/* GCCReady — Mini-GCC (3-stage pilot → scale → own entity) + brief form */

// Reads from central config. To set/change, edit components/config.jsx → SHEETS_ENDPOINT.
function _SHEETS_ENDPOINT() { return (window.GR_CONFIG && window.GR_CONFIG.SHEETS_ENDPOINT) || ''; }

function StageStepper({ activeId }) {
  return (
    <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14}}>
      {GR_MINIGCC_STAGES.map((s) => {
        const active = s.id === activeId;
        return (
          <a key={s.id} href={`#/mini-gcc?stage=${s.id}`} style={{
            display:'flex', flexDirection:'column', gap:6,
            padding:'22px 22px',
            border: active ? '2px solid var(--gr-gold)' : '1.5px solid var(--gr-border)',
            borderRadius:20, background: active ? 'linear-gradient(180deg, var(--gr-gold-50), #fff)' : '#fff',
            textDecoration:'none', color:'var(--gr-fg-1)',
            boxShadow: active ? 'var(--gr-shadow-gold)' : 'var(--gr-shadow-xs)',
            transition:'all .2s ease',
          }}>
            <div style={{font:'700 11.5px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>Stage {s.id}</div>
            <div style={{font:'800 26px/1 "DM Sans"', color:'var(--gr-navy)', letterSpacing:'-0.015em', marginTop:4}}>{s.label}</div>
            <div style={{font:'600 13px/1.4 Inter', color:'var(--gr-fg-3)'}}>{s.size} · {s.timeline}</div>
          </a>
        );
      })}
    </div>
  );
}

function getStageFromHash() {
  const m = window.location.hash.match(/stage=(\d)/);
  return m ? parseInt(m[1], 10) : 1;
}

function MiniGCCPage() {
  const [stageId, setStageId] = React.useState(getStageFromHash());
  React.useEffect(() => {
    const onChange = () => setStageId(getStageFromHash());
    window.addEventListener('hashchange', onChange);
    return () => window.removeEventListener('hashchange', onChange);
  }, []);
  const stage = GR_MINIGCC_STAGES.find((s) => s.id === stageId) || GR_MINIGCC_STAGES[0];

  return (
    <>
      <PageHead
        title="Mini-GCC India — EOR Pilot, Scale, Own Subsidiary in 21 Days"
        description="Set up a 3–10 person India team via EOR. Built-in path to your own Pvt Ltd subsidiary. We handle talent, ops, legal, tooling. Pre-vetted role pods (Finance Ops, AI Data, AI Marketing, Clinical). Pilot in 21 days."
        canonical="/mini-gcc"
        schema={[
          schemaService({ name:'Mini-GCC Setup', description:'EOR-first India team for US founders, with built-in path to Pvt Ltd subsidiary.', slug:'/mini-gcc', serviceType:'BusinessConsulting', areaServed:['US','UK','EU','SG','AU'] }),
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'Mini-GCC',href:'/mini-gcc'}]),
          schemaFAQ([
            { q:'What is a Mini-GCC?', a:'A 3–10 person India team set up via EOR (Employer of Record) — no entity required at the start. As the team grows, GCCReady transitions to your own Pvt Ltd subsidiary.' },
            { q:'How fast can I hire my first Mini-GCC FTE?', a:'2–3 weeks from brief. EOR partners handle compliance; GCCReady provides a vetted candidate from your role pod.' },
            { q:'When does owning the entity make sense?', a:'Typically at 20+ FTEs, when transfer pricing benefits and IP control outweigh per-FTE EOR costs.' },
            { q:'What functions can I deploy as Mini-GCC pods?', a:'Finance Ops (R2R/P2P/O2C), Data Analytics, AI Marketing, AI Product Ops, Clinical Data Mgmt, and custom pods.' },
          ]),
        ]}
      />
      <HeroDark>
        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:48, alignItems:'center'}}>
          <div>
            <Pill tone="dark" icon="rocket">For US founders / CFOs / COOs</Pill>
            <h1 className="gr-h1" style={{color:'#fff', marginTop:18, fontSize:64, lineHeight:1.04}}>
              Mini-GCC.<br/>
              <span style={{color:'#F59E0B'}}>Pilot to subsidiary</span>,<br/>
              one team.
            </h1>
            <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:18, maxWidth:560}}>
              Pre-vetted India teams via EOR. Built-in path to your own subsidiary. We handle talent, ops, legal, and tooling — so you can test the thesis in 21 days and scale when the math says so.
            </p>
            <div style={{display:'flex', gap:12, marginTop:28, flexWrap:'wrap'}}>
              <a href="#/mini-gcc/form" className="gr-btn gr-btn-gold gr-btn-lg">
                Send a Mini-GCC brief <Icon name="arrow-right" size={16}/>
              </a>
              <a href="#/contact?intent=mini_gcc" className="gr-btn gr-btn-lg" style={{
                background:'rgba(255,255,255,.1)', color:'#fff',
                border:'1px solid rgba(255,255,255,.18)',
              }}>Talk to the team</a>
            </div>
          </div>
          <div style={{
            padding:32, borderRadius:24,
            background:'rgba(255,255,255,.06)', border:'1px solid rgba(255,255,255,.10)',
          }}>
            <div style={{font:'700 11.5px/1 Inter', color:'#FBBF24', letterSpacing:'.14em', textTransform:'uppercase'}}>What you get</div>
            <h3 style={{font:'800 24px/1.2 "DM Sans"', color:'#fff', marginTop:8, letterSpacing:'-0.015em'}}>3 stages. One vendor. Zero hand-offs.</h3>
            <div style={{marginTop:18, display:'flex', flexDirection:'column', gap:14}}>
              {GR_MINIGCC_STAGES.map((s) => (
                <div key={s.id} style={{display:'flex', alignItems:'flex-start', gap:12}}>
                  <div style={{
                    width:30, height:30, borderRadius:8,
                    background: s.id === 1 ? '#22C55E' : s.id === 2 ? '#F59E0B' : '#0891B2',
                    color:'#fff', flexShrink:0,
                    font:'800 14px/1 "DM Sans"',
                    display:'grid', placeItems:'center',
                  }}>{s.id}</div>
                  <div>
                    <div style={{font:'700 14px/1.3 "DM Sans"', color:'#fff'}}>{s.label} — {s.size}</div>
                    <div style={{font:'500 12.5px/1.4 Inter', color:'rgba(255,255,255,.65)', marginTop:2}}>{s.route}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </HeroDark>

      <section className="gr-section">
        <div className="gr-container">
          <SectionTitle eyebrow="The path" title="Three stages, one vendor."
            sub="Click any stage to see what we deliver, the decision rule, and pricing model." />
          <StageStepper activeId={stage.id}/>

          <div className="gr-card" style={{marginTop:24, padding:36}}>
            <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:36}}>
              <div>
                <Pill tone="gold">{`Stage ${stage.id} · ${stage.size} · ${stage.timeline}`}</Pill>
                <h3 style={{font:'800 32px/1.15 "DM Sans"', color:'var(--gr-navy)', marginTop:14, letterSpacing:'-0.018em'}}>
                  {stage.label} — {stage.route}
                </h3>
                <p style={{font:'400 17px/1.65 Inter', color:'var(--gr-fg-2)', marginTop:14, maxWidth:520}}>{stage.why}</p>
                <div style={{
                  marginTop:22, padding:'18px 20px',
                  background:'var(--gr-bg-cream)', borderRadius:14,
                  border:'1px solid var(--gr-gold-100)',
                }}>
                  <div style={{font:'700 11.5px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>Decision rule</div>
                  <p style={{font:'600 14.5px/1.55 Inter', color:'var(--gr-fg-1)', margin:'8px 0 0'}}>{stage.decision}</p>
                </div>
                <div style={{marginTop:18, font:'500 13.5px/1 Inter', color:'var(--gr-fg-3)'}}>
                  <strong style={{color:'var(--gr-navy)'}}>Pricing:</strong> {stage.pricing}
                </div>
              </div>
              <div>
                <div style={{font:'700 11.5px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>What we deliver</div>
                <div style={{marginTop:14, display:'flex', flexDirection:'column', gap:10}}>
                  {stage.deliver.map((it, i) => (
                    <div key={i} style={{
                      padding:'14px 16px', borderRadius:12,
                      background:'#fff', border:'1px solid var(--gr-border-soft)',
                      display:'flex', alignItems:'flex-start', gap:10,
                      font:'500 13.5px/1.45 Inter', color:'var(--gr-fg-1)',
                    }}>
                      <Icon name="check-circle" size={16} style={{color:'var(--gr-green)', flexShrink:0, marginTop:1}}/>{it}
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div style={{display:'flex', gap:12, marginTop:24, flexWrap:'wrap'}}>
              <a href={`#/mini-gcc/form?stage=${stage.id}`} className="gr-btn gr-btn-gold gr-btn-lg">
                Send a {stage.label} brief <Icon name="arrow-right" size={16}/>
              </a>
              <a href="#/contact?intent=mini_gcc" className="gr-btn gr-btn-ghost gr-btn-lg">Talk to the team</a>
            </div>
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="EOR vs. own entity" title="A simple decision matrix"
            sub="When does the math swing? Use this to set expectations with your CFO before you commit."/>
          <div style={{
            background:'#fff', border:'1px solid var(--gr-border)',
            borderRadius:20, overflow:'hidden', boxShadow:'var(--gr-shadow-sm)',
          }}>
            <table style={{width:'100%', borderCollapse:'collapse'}}>
              <thead>
                <tr style={{background:'var(--gr-bg-tint)'}}>
                  <th style={thStyle}>Dimension</th>
                  <th style={thStyle}>EOR (Pilot / Scale)</th>
                  <th style={thStyle}>Own Entity (Pvt Ltd / LLP)</th>
                </tr>
              </thead>
              <tbody>
                {[
                  ['Time to first hire', '~2–3 weeks', '~3–6 months'],
                  ['Setup cost', 'Low — per-FTE / month', 'One-time legal + ongoing fixed'],
                  ['Compliance load', 'EOR carries it', 'You carry it (with our partners)'],
                  ['IP / data control', 'Adequate with clauses', 'Strongest — fully owned'],
                  ['Tax efficiency', 'Limited', 'STPI / SEZ / GIFT City benefits possible'],
                  ['Best for', 'Pilots, small teams, fast tests', 'Long-term presence, IP-heavy work'],
                ].map((row, i) => (
                  <tr key={i} style={{borderTop: i>0 ? '1px solid var(--gr-border-soft)' : 'none'}}>
                    <td style={{...tdStyle, font:'700 13.5px/1.4 "DM Sans"', color:'var(--gr-navy)'}}>{row[0]}</td>
                    <td style={{...tdStyle, font:'500 13.5px/1.5 Inter', color:'var(--gr-fg-2)'}}>{row[1]}</td>
                    <td style={{...tdStyle, font:'500 13.5px/1.5 Inter', color:'var(--gr-fg-2)'}}>{row[2]}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section className="gr-section">
        <div className="gr-container">
          <SectionTitle eyebrow="Pre-built pods" title="Deploy a function. Mix and match."
            sub="Each pod ships with talent, tooling, and a 30-day ramp plan."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
            {[
              { icon:'calculator', tag:'Pod', title:'AI Finance Ops Pod', body:'R2R / P2P / O2C with ERP + Copilot. 3–8 FTEs.', href:'#/mini-gcc/form?pod=fa-ops' },
              { icon:'bar-chart', tag:'Pod', title:'AI Data Analytics Pod', body:'SQL + Power BI + Python. 2–6 FTEs.', href:'#/mini-gcc/form?pod=data-analytics' },
              { icon:'trending-up', tag:'Pod', title:'AI Marketing Pod', body:'Performance + lifecycle + Gen AI content. 2–5 FTEs.', href:'#/mini-gcc/form?pod=ai-marketing' },
              { icon:'rocket', tag:'Pod', title:'AI Product Ops Pod', body:'PM + Designer + Analyst for AI features. 2–5 FTEs.', href:'#/mini-gcc/form?pod=ai-pm' },
              { icon:'heart-pulse', tag:'Pod', title:'Clinical Data Pod', body:'CDM + PV + Reg Affairs. 3–10 FTEs.', href:'#/mini-gcc/form?pod=pharma-rnd' },
              { icon:'sparkles', tag:'Pod', title:'Custom Pod', body:'Tell us the function. We design the pod.', href:'#/mini-gcc/form' },
            ].map((it, i) => (
              <a key={i} href={it.href} className="gr-card" style={{
                padding:24, textDecoration:'none', color:'var(--gr-fg-1)',
              }}>
                <div style={{
                  width:44, height:44, borderRadius:12,
                  background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
                  display:'grid', placeItems:'center', marginBottom:16,
                }}><Icon name={it.icon} size={20}/></div>
                <Pill tone="navy">{it.tag}</Pill>
                <h3 className="gr-h4" style={{marginTop:10, fontSize:19}}>{it.title}</h3>
                <p style={{font:'500 14px/1.55 Inter', color:'var(--gr-fg-2)', margin:'8px 0 0'}}>{it.body}</p>
                <div style={{marginTop:14, font:'700 13px/1 Inter', color:'var(--gr-gold-700)', display:'flex', alignItems:'center', gap:6}}>
                  Configure <Icon name="arrow-right" size={13}/>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <MiniGCCTCOCalc/>

      <CTABand title="From pilot to subsidiary in one path." sub="Send a 1-minute brief; we'll come back with pod composition, EOR-vs-entity recommendation, and indicative pricing." primaryLabel="Send Mini-GCC brief" primaryHref="#/mini-gcc/form"/>
    </>
  );
}

function MiniGCCFormPage() {
  const [status, setStatus] = React.useState({ kind:'idle', msg:'' });
  const formRef = React.useRef(null);

  const onSubmit = async (e) => {
    e.preventDefault();
    const fd = new FormData(formRef.current);
    const data = {};
    fd.forEach((v, k) => { data[k] = String(v); });
    data.form_type = 'mini_gcc';
    data.source_path = window.location.hash;
    data.ua = navigator.userAgent;
    data.ts_client = new Date().toISOString();

    try {
      localStorage.setItem('gccready_minigcc_last', JSON.stringify(data));
    } catch (_) {}

    const SHEETS_ENDPOINT = _SHEETS_ENDPOINT();
    if (SHEETS_ENDPOINT) {
      setStatus({ kind:'sending', msg:'Sending to GCCReady…' });
      try {
        const params = new URLSearchParams();
        Object.entries(data).forEach(([k, v]) => params.set(k, v));
        const res = await fetch(SHEETS_ENDPOINT, {
          method:'POST',
          headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},
          body: params.toString(),
        });
        if (!res.ok) throw new Error('http ' + res.status);
        setStatus({ kind:'success', msg:'Got it. We\'ll come back with a 1-pager within one business day.' });
        formRef.current.reset();
      } catch (err) {
        setStatus({ kind:'error', msg:'Network hiccup — opening your email client as backup.' });
        const subject = `Mini-GCC brief — ${data.name||''}`;
        const body = Object.entries(data).map(([k,v])=>`${k}: ${v}`).join('\n');
        window.location.href = `mailto:info@gccready.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
      }
    } else {
      const subject = `Mini-GCC brief — ${data.name||''}`;
      const body = Object.entries(data).map(([k,v])=>`${k}: ${v}`).join('\n');
      window.location.href = `mailto:info@gccready.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
      setStatus({ kind:'idle', msg:'Opened your email client. Reply to that thread and we\'ll take it from there.' });
    }
  };

  return (
    <>
      <HeroDark>
        <div style={{maxWidth:840}}>
          <Crumbs items={[{ label:'Mini-GCC', href:'#/mini-gcc' }, { label:'Brief' }]}/>
          <h1 className="gr-h1" style={{color:'#fff', marginTop:18, fontSize:54}}>Send your Mini-GCC brief.</h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:14, maxWidth:680}}>
            One minute of inputs. We come back with pod composition, timeline, EOR-vs-entity recommendation, and indicative pricing — within one business day.
          </p>
        </div>
      </HeroDark>

      <section className="gr-section">
        <div className="gr-container" style={{maxWidth:840}}>
          <form ref={formRef} onSubmit={onSubmit} className="gr-card" style={{
            padding:36, display:'grid', gridTemplateColumns:'1fr 1fr', gap:18,
          }}>
            <Field label="Your name" name="name" required/>
            <Field label="Work email" name="email" type="email" required/>
            <Field label="WhatsApp / Phone" name="whatsapp" placeholder="+1 …"/>
            <Field label="HQ country" name="founder_country" placeholder="United States"/>
            <Select label="Sector" name="sector" options={['SaaS / Tech','Financial Services','Healthcare / Pharma','E-commerce / Retail','Industrial / Manufacturing','Consulting / Services','Other']}/>
            <Select label="Primary function" name="target_function" options={['Finance Ops','Data / Analytics','AI / ML','Product / Engineering','Marketing','Customer Ops','Clinical / Regulatory','Other']}/>
            <Field label="Headcount Year 1" name="headcount_y1" type="number" placeholder="3"/>
            <Field label="Headcount Year 2" name="headcount_y2" type="number" placeholder="10"/>
            <Field label="Headcount Year 3" name="headcount_y3" type="number" placeholder="25"/>
            <Select label="Setup preference" name="preference" options={[['undecided','Undecided / advise me'],['eor','EOR pilot'],['entity','Own entity (Pvt Ltd)'],['hybrid','EOR now, entity later']]}/>
            <Select label="Target go-live" name="timeline" options={['2–4 weeks','1–2 months','3–6 months','6+ months']} span={2}/>
            <TextArea label="Anything else we should know?" name="message" placeholder="What problem are you solving with the India team? Any compliance / IP requirements?" span={2}/>

            <div style={{gridColumn:'1/-1', display:'flex', gap:10, flexWrap:'wrap'}}>
              <button type="submit" className="gr-btn gr-btn-gold gr-btn-lg" disabled={status.kind==='sending'}>
                {status.kind==='sending' ? 'Sending…' : 'Send Mini-GCC brief'} <Icon name="arrow-right" size={16}/>
              </button>
              <a href="#/mini-gcc" className="gr-btn gr-btn-ghost gr-btn-lg">Back to overview</a>
            </div>
            {status.msg && (
              <div style={{
                gridColumn:'1/-1',
                padding:'12px 14px', borderRadius:12,
                background: status.kind==='success' ? 'var(--gr-green-50)' : status.kind==='error' ? 'var(--gr-red-50)' : 'var(--gr-bg-tint)',
                color: status.kind==='success' ? 'var(--gr-green)' : status.kind==='error' ? 'var(--gr-red)' : 'var(--gr-fg-2)',
                font:'600 13.5px/1.5 Inter',
              }}>{status.msg}</div>
            )}
          </form>
        </div>
      </section>
    </>
  );
}

function Field({ label, name, type='text', required, placeholder, span }) {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:6, gridColumn: span ? `span ${span}` : undefined}}>
      <label htmlFor={name} style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)', letterSpacing:'-0.005em'}}>{label}</label>
      <input id={name} name={name} type={type} required={required} placeholder={placeholder} style={{
        padding:'12px 14px', font:'500 14.5px/1.4 Inter',
        border:'1.5px solid var(--gr-border)', borderRadius:11,
        background:'#fff', color:'var(--gr-fg-1)',
      }}/>
    </div>
  );
}
function Select({ label, name, options, span }) {
  const norm = options.map((o) => Array.isArray(o) ? o : [o, o]);
  return (
    <div style={{display:'flex', flexDirection:'column', gap:6, gridColumn: span ? `span ${span}` : undefined}}>
      <label htmlFor={name} style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)'}}>{label}</label>
      <select id={name} name={name} style={{
        padding:'12px 14px', font:'500 14.5px/1.4 Inter',
        border:'1.5px solid var(--gr-border)', borderRadius:11,
        background:'#fff', color:'var(--gr-fg-1)', cursor:'pointer',
      }}>
        {norm.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
      </select>
    </div>
  );
}
function TextArea({ label, name, placeholder, span }) {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:6, gridColumn: span ? `span ${span}` : undefined}}>
      <label htmlFor={name} style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)'}}>{label}</label>
      <textarea id={name} name={name} placeholder={placeholder} rows={4} style={{
        padding:'12px 14px', font:'500 14.5px/1.5 Inter',
        border:'1.5px solid var(--gr-border)', borderRadius:11,
        background:'#fff', color:'var(--gr-fg-1)', resize:'vertical',
      }}/>
    </div>
  );
}

/* ============================================================================
 * Mini-GCC TCO Calculator — EOR vs Own Entity, by year
 * ========================================================================== */
function MiniGCCTCOCalc() {
  const [hcY1, setHcY1] = React.useState(3);
  const [hcY3, setHcY3] = React.useState(15);
  const [hcY5, setHcY5] = React.useState(40);
  const [avgCTC, setAvgCTC] = React.useState(20); // ₹L
  const [duration, setDuration] = React.useState(5); // years

  // Cost models (per FTE per month, INR L converted to USD ~$240/L)
  // EOR fully-loaded: ~125% of CTC + EOR fee (~12% of CTC) + tooling.
  // Entity fully-loaded: ~115% of CTC + setup amortised + ongoing compliance/admin.
  const eorPerFTEMonth = (avgCTC * 100000 / 12) * 1.25 + (avgCTC * 100000 / 12) * 0.12 + 8000; // INR
  const entityPerFTEMonth_running = (avgCTC * 100000 / 12) * 1.15 + 18000; // higher fixed admin
  const entitySetupOnce = 1800000; // ~₹18 L incorporation + legal + STPI/SEZ + first audit
  const entityAnnualFixed = 850000; // ~₹8.5 L corp sec / audit / payroll vendor / etc.

  const interpHC = (year) => {
    if (year <= 1) return hcY1;
    if (year <= 3) return Math.round(hcY1 + (hcY3 - hcY1) * (year - 1) / 2);
    return Math.round(hcY3 + (hcY5 - hcY3) * (year - 3) / 2);
  };

  const years = Array.from({length: duration}, (_, i) => i + 1);
  let cumEor = 0;
  let cumEntity = entitySetupOnce; // entity bears setup upfront
  const rows = years.map((y) => {
    const hc = interpHC(y);
    const eorCost = eorPerFTEMonth * hc * 12;
    const entityCost = entityPerFTEMonth_running * hc * 12 + entityAnnualFixed;
    cumEor    += eorCost;
    cumEntity += entityCost;
    return { y, hc, eorCost, entityCost, cumEor, cumEntity };
  });

  // Breakeven year
  const breakeven = rows.find((r) => r.cumEntity < r.cumEor);
  const recommendation = breakeven
    ? `Switch to own entity by Year ${breakeven.y}. Entity TCO becomes lower starting that year.`
    : duration >= 5
      ? 'EOR remains cheaper through year 5 — stay with EOR for now.'
      : 'EOR is cheaper at this scale and duration. Run an EOR pilot first; revisit at higher headcount.';

  const fmt = (n) => '₹' + (n / 10000000).toFixed(1) + ' Cr';

  return (
    <section className="gr-section">
      <div className="gr-container">
        <SectionTitle eyebrow="EOR vs Entity TCO" title="Live cost calculator — your numbers, by year" sub="Plug in your real headcount plan and average CTC. We model both routes and show breakeven."/>
        <div className="gr-card" style={{padding:36, display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:36}}>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <TCOInput label="Headcount Year 1" value={hcY1} setValue={setHcY1} min={1} max={50}/>
            <TCOInput label="Headcount Year 3" value={hcY3} setValue={setHcY3} min={1} max={200}/>
            <TCOInput label="Headcount Year 5" value={hcY5} setValue={setHcY5} min={1} max={500}/>
            <TCOInput label="Avg fully-loaded CTC (₹ LPA)" value={avgCTC} setValue={setAvgCTC} min={6} max={120} step={0.5}/>
            <div>
              <label style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)'}}>Modelling duration (years)</label>
              <input type="range" min="2" max="8" value={duration} onChange={(e)=>setDuration(parseInt(e.target.value))} style={{width:'100%', marginTop:10, accentColor:'var(--gr-gold)'}}/>
              <div style={{font:'700 14px/1 "DM Sans"', color:'var(--gr-navy)', marginTop:6}}>{duration} years</div>
            </div>
          </div>

          <div style={{display:'flex', flexDirection:'column', gap:14}}>
            <div className="gr-card" style={{padding:0, overflow:'hidden'}}>
              <table style={{width:'100%', borderCollapse:'collapse'}}>
                <thead>
                  <tr style={{background:'var(--gr-bg-tint)'}}>
                    <th style={tcoTh}>Year</th>
                    <th style={tcoTh}>HC</th>
                    <th style={tcoTh}>EOR</th>
                    <th style={tcoTh}>Entity</th>
                    <th style={tcoTh}>Cumul. EOR</th>
                    <th style={tcoTh}>Cumul. Entity</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map((r) => {
                    const cheaper = r.cumEntity < r.cumEor ? 'entity' : 'eor';
                    return (
                      <tr key={r.y} style={{borderTop:'1px solid var(--gr-border-soft)', background: breakeven && breakeven.y === r.y ? 'var(--gr-gold-50)' : '#fff'}}>
                        <td style={{...tcoTd, fontWeight:700, color:'var(--gr-navy)'}}>Y{r.y}</td>
                        <td style={tcoTd}>{r.hc}</td>
                        <td style={tcoTd}>{fmt(r.eorCost)}</td>
                        <td style={tcoTd}>{fmt(r.entityCost)}</td>
                        <td style={{...tcoTd, fontWeight: cheaper==='eor'?700:500, color: cheaper==='eor'?'var(--gr-green)':'var(--gr-fg-2)'}}>{fmt(r.cumEor)}</td>
                        <td style={{...tcoTd, fontWeight: cheaper==='entity'?700:500, color: cheaper==='entity'?'var(--gr-green)':'var(--gr-fg-2)'}}>{fmt(r.cumEntity)}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
            <div style={{padding:'18px 22px', borderRadius:14, background:'var(--gr-grad-hero)', color:'#fff', position:'relative', overflow:'hidden'}}>
              <div style={{position:'absolute', right:-40, top:-40, width:160, height:160, background:'radial-gradient(circle, rgba(245,158,11,.25) 0%, transparent 60%)'}}/>
              <div className="gr-eyebrow" style={{color:'#FBBF24', position:'relative'}}>Recommendation</div>
              <p style={{font:'600 16px/1.5 Inter', color:'#fff', margin:'8px 0 0', position:'relative'}}>{recommendation}</p>
              <a href="#/mini-gcc/form" className="gr-btn gr-btn-gold" style={{marginTop:16, position:'relative'}}>Get a custom plan <Icon name="arrow-right" size={14}/></a>
            </div>
            <p style={{font:'500 11.5px/1.5 Inter', color:'var(--gr-fg-4)'}}>
              EOR includes 25% benefits load + 12% partner fee. Entity includes 15% benefits + ₹8.5 L annual compliance + ₹18 L one-time setup. Both exclude ESOPs, real-estate, and one-off relocations. Indicative.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function TCOInput({ label, value, setValue, min, max, step=1 }) {
  return (
    <div>
      <label style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)'}}>{label}</label>
      <input type="number" min={min} max={max} step={step} value={value} onChange={(e)=>setValue(parseFloat(e.target.value || 0))}
        style={{ width:'100%', marginTop:10, padding:'12px 14px', font:'500 14.5px/1.4 Inter', border:'1.5px solid var(--gr-border)', borderRadius:11, background:'#fff', color:'var(--gr-fg-1)' }}/>
    </div>
  );
}

const tcoTh = { padding:'12px 14px', textAlign:'left', font:'700 11px/1.2 Inter', letterSpacing:'.10em', textTransform:'uppercase', color:'var(--gr-fg-3)' };
const tcoTd = { padding:'12px 14px', font:'500 13.5px/1.4 Inter', color:'var(--gr-fg-1)' };

Object.assign(window, { MiniGCCPage, MiniGCCFormPage, MiniGCCTCOCalc });
