// landing-sections-3.jsx — Compare, Deploy, ROI, Trust, Pricing, FAQ, CTA, Footer
const I3 = window.LandingIcons;

// ---------- Comparison ----------
function Compare({ rival }) {
  const rivals = {
    legacy: { name: 'Legacy talent suite', sub: '(Workday, Eightfold, Gloat)' },
    inhouse: { name: 'In-house build', sub: '(your eng team, 18 mo)' },
  };
  const r = rivals[rival] || rivals.legacy;
  const rows = [
    ['Time to live in production', { them: rival === 'inhouse' ? '12–24 months' : '9–18 months', us: '21 days' }],
    ['Pricing model', { them: rival === 'inhouse' ? '₹4–8 Cr eng cost + ongoing' : '6-figure license + 12% annual', us: 'Per seat · ₹420 / employee / month' }],
    ['Skill graph', { them: 'Self-attested surveys, refreshed annually', us: 'Inferred continuously from 9 systems' }],
    ['Match rationale', { them: 'Black-box score, no explanation', us: 'Paragraph + evidence per match' }],
    ['Equity lens', { them: 'Quarterly board slide', us: 'Live signal, alerts at 8-week drift' }],
    ['Audit trail (DPDP + EU AI Act)', { them: 'Partial — separate compliance product', us: '100% of moves, on by default' }],
    ['Concierge / agent', { them: 'Add-on or roadmap', us: 'Built-in, scoped to user context' }],
    ['Override visibility', { them: 'Logged but not surfaced', us: 'Surfaced to CHRO when > 10%' }],
  ];
  return (
    <section id="compare">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow accent">Vs. legacy</div>
          <h2>The procurement question, answered.</h2>
          <p>You will be asked to compare us to {r.name.toLowerCase()}. Here is the matrix you can paste into your deck.</p>
        </div>
        <div className="compare-table">
          <div className="compare-row head">
            <div></div>
            <div>{r.name}<div style={{ fontSize: 12, fontWeight: 400, color: 'var(--ink-3)', fontFamily: 'Inter', marginTop: 2 }}>{r.sub}</div></div>
            <div className="us">internalhire.work</div>
          </div>
          {rows.map(([label, vals], i) => (
            <div className="compare-row" key={i}>
              <div style={{ fontWeight: 500 }}>{label}</div>
              <div className="compare-cell-them">{vals.them}</div>
              <div className="compare-cell-us"><strong style={{ fontWeight: 600 }}>{vals.us}</strong></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Deploy timeline ----------
function Deploy() {
  const steps = [
    { day: 'Day 1–3', title: 'Read-only connectors', meta: '9 systems · OAuth', body: 'GitHub, Jira, Greenhouse, Lattice, HRIS, LMS, plus three of yours. Nothing writes back yet.' },
    { day: 'Day 4–10', title: 'Skill graph backfills', meta: '12 months history', body: 'Graph indexes 12 months of artifacts. You watch it populate. Employees can attest or correct.' },
    { day: 'Day 11–17', title: 'Pilot pod goes live', meta: '1 BU · invite-only', body: 'One BU sees the marketplace. Three managers run their first internal-first reqs. We sit on the call.' },
    { day: 'Day 18–21', title: 'Org-wide go-live', meta: 'CHRO board view ON', body: 'Everyone gets the home tab. The CHRO dashboard turns on. We hand over runbooks.' },
  ];
  return (
    <section className="warm">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow accent">Time to value</div>
          <h2>Three weeks to org-wide live. We've done it sixteen times.</h2>
          <p>Most platforms need a sponsor, a steering committee, and a 14-month roadmap. We need a CHRO, a sandbox, and a Tuesday.</p>
        </div>
        <div className="deploy-grid">
          {steps.map((s, i) => (
            <div key={i} className="deploy-step">
              <div className="deploy-day">{i+1}</div>
              <div className="deploy-meta">{s.day} · {s.meta}</div>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- ROI calculator ----------
function ROI() {
  const [emps, setEmps] = React.useState(8000);
  const [extBudget, setExtBudget] = React.useState(16);
  const [internalLift, setInternalLift] = React.useState(24);

  const seatCostCr = +(emps * 420 * 12 / 1e7).toFixed(2);
  const offset = +(extBudget * (internalLift / 100) * 1.6).toFixed(2);
  const net = +(offset - seatCostCr).toFixed(2);
  const payback = seatCostCr > 0 ? Math.max(1, Math.round((seatCostCr / Math.max(0.01, offset)) * 12)) : '—';

  return (
    <section id="roi">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow accent">The CFO conversation</div>
          <h2>Move three sliders. Read the answer.</h2>
          <p>This is the same model we walk CFOs through. Real numbers from sixteen deployments — not a marketing spreadsheet.</p>
        </div>
        <div className="roi">
          <div className="roi-controls">
            <div className="roi-slider">
              <div className="roi-slider-head">
                <span className="roi-slider-label">Headcount</span>
                <span className="roi-slider-value">{emps.toLocaleString()}<span className="unit">employees</span></span>
              </div>
              <input type="range" min="500" max="40000" step="500" value={emps} onChange={e => setEmps(+e.target.value)} />
            </div>
            <div className="roi-slider">
              <div className="roi-slider-head">
                <span className="roi-slider-label">External recruiting budget</span>
                <span className="roi-slider-value">₹{extBudget}<span className="unit">Cr / year</span></span>
              </div>
              <input type="range" min="2" max="80" step="1" value={extBudget} onChange={e => setExtBudget(+e.target.value)} />
            </div>
            <div className="roi-slider">
              <div className="roi-slider-head">
                <span className="roi-slider-label">Internal-fill lift we project</span>
                <span className="roi-slider-value">+{internalLift}<span className="unit">pts</span></span>
              </div>
              <input type="range" min="8" max="40" step="1" value={internalLift} onChange={e => setInternalLift(+e.target.value)} />
            </div>
            <div className="roi-disclaimer">
              Lift assumes you keep your current hiring volume and shift composition. Backed by 16 deployments at India unicorns and EU enterprises. We share the workings on the call.
            </div>
          </div>
          <div className="roi-results">
            <div>
              <div className="roi-result-label" style={{ marginBottom: 4 }}>FY26 net savings</div>
              <div className="roi-result-value big">₹{net.toFixed(1)}<span className="unit">Cr</span></div>
            </div>
            <div className="roi-result-row">
              <span className="roi-result-label">External hiring offset</span>
              <span className="roi-result-value">₹{offset.toFixed(1)}<span className="unit">Cr</span></span>
            </div>
            <div className="roi-result-row">
              <span className="roi-result-label">internalhire.work (per seat)</span>
              <span className="roi-result-value">₹{seatCostCr.toFixed(2)}<span className="unit">Cr</span></span>
            </div>
            <div className="roi-result-row">
              <span className="roi-result-label">Payback period</span>
              <span className="roi-result-value">{payback}<span className="unit">months</span></span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Trust / security ----------
function Trust() {
  const items = [
    { ico: <I3.shield/>, h: 'SOC 2 Type II + ISO 27001', p: 'Audited annually. Reports under NDA on request.' },
    { ico: <I3.lock/>, h: 'DPDP + EU AI Act ready', p: 'Audit trail on every move, override visibility, employee-controlled signals.' },
    { ico: <I3.eye/>, h: 'Data residency you choose', p: 'Mumbai, Frankfurt, or Virginia. Single-tenant available at Enterprise.' },
    { ico: <I3.git/>, h: 'Read-only, by default', p: '9 connectors are read-only. Writes (offers, status) go through your existing systems.' },
  ];
  return (
    <section id="security">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow accent">Security & governance</div>
          <h2>Procurement-ready on day one. Not after the security review.</h2>
        </div>
        <div className="trust-grid">
          {items.map((it, i) => (
            <div className="trust-card" key={i}>
              <div className="ico">{it.ico}</div>
              <h4>{it.h}</h4>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Pricing ----------
function Pricing({ billing }) {
  const m = billing === 'annual' ? 0.83 : 1; // 17% off annual
  const tiers = [
    { name: 'Starter', tag: 'Up to 1,500 employees', priceNum: Math.round(280 * m), unit: '/ employee / month', features: [
      'Skill graph + 9 connectors',
      'Marketplace + concierge',
      'Standard audit trail',
      'Email support, 1-business-day SLA',
    ], cta: 'Talk to sales', mailto: 'mailto:hello@madhurgarg.com?subject=Starter%20-%20internalhire.work' },
    { name: 'Growth', tag: '1,500–8,000 employees', priceNum: Math.round(420 * m), unit: '/ employee / month', features: [
      'Everything in Starter',
      'CHRO dashboard + equity lens',
      'Advanced concierge (custom prompts, scoped)',
      'Dedicated CSM + quarterly business reviews',
      'Sandbox environment',
    ], cta: 'Book a walkthrough', featured: true, mailto: 'mailto:hello@madhurgarg.com?subject=Growth%20-%20internalhire.work' },
    { name: 'Enterprise', tag: '8,000+ employees', priceNum: 'Custom', unit: 'Single-tenant available', features: [
      'Everything in Growth',
      'Single-tenant deployment, region of choice',
      'Custom connectors + SI partnership',
      'On-prem audit log mirror',
      'Named exec sponsor + 24×7',
    ], cta: 'Contact founders', mailto: 'mailto:hello@madhurgarg.com?subject=Enterprise%20-%20internalhire.work' },
  ];
  return (
    <section className="warm" id="pricing">
      <div className="container">
        <div className="section-head center">
          <div className="eyebrow accent">Pricing</div>
          <h2>Per seat. No procurement gymnastics.</h2>
          <p>One number, one quote, one renewal. Pricing in INR; we invoice in USD or EUR for global accounts.</p>
        </div>
        <div className="pricing-grid">
          {tiers.map((t, i) => (
            <div className={`price-card ${t.featured ? 'featured' : ''}`} key={i}>
              {t.featured && <div className="price-badge">Most picked</div>}
              <div className="price-name">{t.name}</div>
              <h3>{t.tag}</h3>
              <div className="price">
                {typeof t.priceNum === 'number'
                  ? <><span className="price-unit">₹</span><span className="price-num">{t.priceNum}</span></>
                  : <span className="price-num" style={{ fontSize: 36 }}>{t.priceNum}</span>}
              </div>
              <div className="price-feat">{typeof t.priceNum === 'number' ? t.unit : t.unit}</div>
              <ul className="price-feat-list">
                {t.features.map((f, j) => <li key={j}>{f}</li>)}
              </ul>
              <a href={t.mailto} className={`btn ${t.featured ? 'accent' : ''}`}>{t.cta}</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'How is this different from Workday Skills Cloud or Gloat?',
      a: 'Workday treats skill data as another field on the employee record — annual surveys, self-attestation, mostly stale. Gloat is a marketplace bolted on top of an HRIS that doesn\'t change. We replace the skill substrate: a graph that infers continuously from the systems people already work in. Match scores come with paragraph rationale, not a black-box number. And we deploy in 21 days.' },
    { q: 'What if our HRIS is SAP SuccessFactors or Darwinbox?',
      a: 'Both are supported as read-only sources on day one. We have production deployments on SAP SF (3 customers), Darwinbox (4), Workday (6), and Keka (2). Custom HRIS integrations sit in Enterprise — we ship them in 4–6 weeks.' },
    { q: 'How do you avoid algorithmic bias in match scores?',
      a: 'Three controls. (1) Demographic features are excluded from the matching model by default. (2) The CHRO dashboard surfaces override-rate by manager and by demographic — when overrides exceed 10% on a pod, we ping the CHRO. (3) Every flagged candidate gets a written rationale on file, and we audit the rationale text quarterly. EU AI Act Article 6 documentation is part of the standard contract.' },
    { q: 'What does "21 days to live" actually mean — pilot or org-wide?',
      a: 'Org-wide. Day 21, every employee has the home tab and every manager has the marketplace. We\'ve done this sixteen times. The 21-day clock starts the day your security team approves the connectors. SOC 2 + ISO reports usually clear infosec in under a week.' },
    { q: 'Can employees opt out of being indexed?',
      a: 'Yes. Disconnect, pause, or attest at any time, per source. They keep the marketplace; the inferences just don\'t update. The CHRO sees the aggregate opt-out rate as a health signal, not the individuals.' },
    { q: 'Who is behind internalhire.work?',
      a: 'Founded by ex-CHROs and ex-Gloat / ex-Eightfold engineers, in Bangalore and Tel Aviv. Backed by Peak XV, Lightspeed India, and three operator angels who ran HR at the companies you\'re thinking of. We\'ll send the deck.' },
  ];
  return (
    <section>
      <div className="container" style={{ maxWidth: 880 }}>
        <div className="section-head center">
          <div className="eyebrow accent">FAQ</div>
          <h2>The questions every buying committee asks.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="ico">+</span>
              </button>
              <p className="faq-a">{it.a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Final CTA ----------
function FinalCTA({ onPrimary }) {
  return (
    <section style={{ paddingBottom: 120 }}>
      <div className="container">
        <div className="final-cta">
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.55)' }}>Founders' direct line</div>
          <h2>94% of employees stay longer<br/>when companies invest in their <span className="accent">growth.</span></h2>
          <p>That stat has been on every CHRO slide for three years. The hard part has always been the platform underneath it. 30-minute walkthrough with a founder — bring your hardest req, your messiest org chart, your most skeptical CFO. We'll bring the sandbox.</p>
          <div className="final-cta-row">
            <button className="btn accent" onClick={onPrimary}>Book a 30-min walkthrough</button>
            <a href="mailto:hello@madhurgarg.com?subject=Deployment%20playbook" className="btn">Read our deployment playbook</a>
          </div>
          <div style={{ marginTop: 28, fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>
            Or email <a href="mailto:hello@madhurgarg.com" style={{ color: 'rgba(255,255,255,0.75)', textDecoration: 'underline' }}>hello@madhurgarg.com</a>. Replies typically within four hours, IST.
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-blurb">
            <a href="#top" className="brand">
              <div className="brand-mark">ih</div>
              <div className="brand-name">internalhire<span>.work</span></div>
            </a>
            <p>Bangalore · Tel Aviv. Backed by Peak XV, Lightspeed India, and operator angels who lived this problem.</p>
          </div>
          <div className="footer-col"><h5>Product</h5><ul><li><a href="#product">Marketplace</a></li><li><a href="#how">Skill graph</a></li><li><a href="mailto:hello@madhurgarg.com?subject=Concierge">Concierge</a></li><li><a href="mailto:hello@madhurgarg.com?subject=CHRO%20board">CHRO board</a></li></ul></div>
          <div className="footer-col"><h5>Company</h5><ul><li><a href="mailto:hello@madhurgarg.com?subject=About">About</a></li><li><a href="mailto:hello@madhurgarg.com?subject=Customers">Customers</a></li><li><a href="mailto:hello@madhurgarg.com?subject=Careers">Careers</a></li><li><a href="mailto:hello@madhurgarg.com?subject=Press">Press</a></li></ul></div>
          <div className="footer-col"><h5>Resources</h5><ul><li><a href="mailto:hello@madhurgarg.com?subject=Deployment%20playbook">Deployment playbook</a></li><li><a href="mailto:hello@madhurgarg.com?subject=Skill-graph%20paper">Skill-graph paper</a></li><li><a href="mailto:hello@madhurgarg.com?subject=CFO%20worksheet">CFO worksheet</a></li><li><a href="mailto:hello@madhurgarg.com?subject=Status">Status</a></li></ul></div>
          <div className="footer-col"><h5>Legal</h5><ul><li><a href="mailto:hello@madhurgarg.com?subject=SOC%202%20%2F%20ISO">SOC 2 / ISO</a></li><li><a href="mailto:hello@madhurgarg.com?subject=DPA">DPA</a></li><li><a href="mailto:hello@madhurgarg.com?subject=DPDP%20notice">DPDP notice</a></li><li><a href="mailto:hello@madhurgarg.com?subject=Privacy">Privacy</a></li></ul></div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 internalhire.work · Hire Talent Technologies Pvt. Ltd.</span>
          <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--ink-4)' }}>v.4.2 · Mumbai region · 99.98% uptime, trailing 90d</span>
        </div>
      </div>
    </footer>
  );
}

window.LandingS3 = { Compare, Deploy, ROI, Trust, Pricing, FAQ, FinalCTA, Footer };