const FLOWS = {
  builder: {
    label: 'Builders & developers',
    mock: 'seats',
    icon: 'landmark',
    intro: 'You buy a managed retainer for each project site. From mobilisation onward the labour department for that site runs on the platform, staffed by our team.',
    steps: [
      ['Compliance gap check', 'Forty-five minutes on one site. We look at the muster roll, the last three PF and ESIC challans, the BOCW registration and this year\u2019s wage-revision arrears, and send a two-page findings note within 48 hours.'],
      ['Register and get verified', 'Company details, GST and KYC once at organisation level, for every site you run.'],
      ['Scope the site', 'Seat count by trade, wage bands, shift pattern, site conditions and your establishment codes. Seat count set by you — 50, 75 or 100 in standard bands, and anything larger scoped and quoted in a requirement meeting first.'],
      ['Accept the quote', 'Your quote states the retainer, the term and the billing cycle for that site, along with onboarding and any historical clean-up. Nothing is payable until you accept it.'],
      ['Mobilise', 'Seats filled from the verified pool. Each worker onboarded with ID, bank, e-Shram and BOCW enrolment before they reach site.'],
      ['Run the monthly cycle', 'Attendance daily, wage sheet by day 2, your approval by day 4, wages paid by you by day 7, registers by day 10, PF and ESIC challans by day 13.'],
      ['Take the audit pack', 'By day 20 every register, challan, acknowledgement and payment proof for the site is in one download.'],
      ['Add the next site', 'A second site is a second retainer. From your third site onward every site moves to the lower per-site rate.'],
    ],
    plan: ['Managed labour retainer', 'Per project site, at the seat count you scope. Invoiced quarterly in advance on a 12-month term.', ['Verified supply and 72-hour replacement', 'Forms 9 to 19, Form D, CLRA Form XII and XIII', 'PF, ESIC, PT and TDS bifurcation with filing support', 'Monthly audit pack per site']],
  },
  epc: {
    label: 'EPC & general contractors',
    mock: 'registers',
    icon: 'building-2',
    intro: 'Same retainer, per site — but scoped to augment the site compliance staff you already have, and with package-wise requirements and bidding included.',
    steps: [
      ['Compliance gap check', 'On one site, on your busiest package. Findings note in 48 hours, retainer quoted on page two.'],
      ['Register and get verified', 'Company details, GST and KYC. Verification unlocks requirement posting and contractor access.'],
      ['Scope the site', 'Seats by trade and package, wage bands, and which parts of the statutory function your own staff keep.'],
      ['Sign and invoice', 'Twelve-month term, quarterly in advance, one retainer per site.'],
      ['Mobilise, or post and bid', 'Fill seats from the verified pool, and post any overflow package as a requirement for contractors to bid on.'],
      ['Run the monthly cycle', 'The same dated calendar — attendance, wage sheet, your approval, your disbursement, registers, challans.'],
      ['Track fulfilment', 'Seats required against seats filled and active, by trade and package, until the site closes.'],
      ['Take the audit pack', 'One download per site per month, ready for a principal-employer file or an inspection.'],
    ],
    plan: ['Managed labour retainer', 'Per project site, at the seat count you scope. Invoiced quarterly in advance on a 12-month term.', ['Verified supply and 72-hour replacement', 'Full statutory register and filing preparation', 'Requirement posting and contractor bidding included', 'Monthly audit pack per site']],
  },
  contractor: {
    label: 'Labour Contractors',
    mock: 'feed',
    icon: 'hard-hat',
    intro: 'You supply labour, so you buy the platform rather than the department — pool access and requirements you can bid on. Your own workers\u2019 compliance is a separate per-worker add-on.',
    steps: [
      ['Register your business', 'Company name, location, trades handled and workforce capacity. Mobile verified by OTP.'],
      ['Complete GST and KYC', 'GST details or PAN, company registration and identity documents. Bidding opens once verified.'],
      ['Build your profile', 'Trades, years in business, capacity, project history and service areas. This is what buyers read before inviting you.'],
      ['Choose a tier', 'Starter gives 25 worker reveals and 10 bids a month in one location. Growth gives 75 reveals, unlimited bidding, a verified badge and discovery across the whole Pune Metropolitan Region.'],
      ['Discover and bid', 'Open requirements across the region with headcount, trade, start date and bid deadline. Bid with workforce, rate and availability.'],
      ['Check the pool first', 'Availability by trade and city before you commit to a headcount. Contact reveals within your monthly allowance, with a cooldown per worker.'],
      ['Add the compliance back-office', 'Optional. Our team runs the registers and filings for your own workers at a per-worker monthly rate, minimum 25 workers, billed in arrears on actual headcount.'],
    ],
    plan: ['Platform subscription', 'An annual subscription. Starter and Growth tiers, quoted against the volume you need.', ['Labour pool access with monthly reveal allowance', 'Requirement discovery and bidding', 'Verified business profile', 'Optional compliance back-office, per worker']],
  },
};

const CYCLE = [
  ['Daily', 'Attendance marked at site on mobile — offline capable, syncs when there is signal. Seat board updated, absences flagged.'],
  ['Weekly', 'Empty seats actioned against the 72-hour replacement commitment. Advances and recoveries entered. Document expiries reviewed. Seat report to the client.'],
  ['Month end', 'Attendance frozen. Overtime and advances reconciled.'],
  ['By day 2', 'Wage sheet and bank-ready payout file issued to the client.'],
  ['By day 4', 'Client approves the wage sheet in the dashboard — the payment and audit trigger.'],
  ['By day 7', 'Client disburses wages from their own account. Proof of payment captured against the register. TDS deposit support where applicable.'],
  ['By day 10', 'Forms 9, 10, 12, 13, 14, 15, 16, 17, 18, 19 and Form D generated. CLRA Form XII and XIII updated.'],
  ['By day 13', 'PF ECR and ESIC challans prepared so the client deposits by the 15th.'],
  ['By day 20', 'Audit pack published for the month. Professional tax per the state cycle.'],
  ['Quarterly', 'Retainer invoice in advance. Thirty-minute compliance review. TDS return support.'],
  ['1 January · 1 July', 'Minimum wage and dearness allowance revision applied. Arrears exposure checked and reported per site — revisions are notified late and apply retrospectively.'],
  ['Annually', 'BOCW cess return support and registration renewal. Insurance renewal check. PF annual return. Renewal conversation 60 days before term end.'],
];

const MONEY = [
  ['Client', 'Pays Labour Tech a retainer per site, quarterly in advance. Pays workers directly from their own account, from the payout file we prepare. Deposits PF, ESIC, PT and TDS in their own name.'],
  ['Labour Tech', 'Invoices the service fee only, plus 18% GST on that fee. Never receives, holds or routes wages, advances or statutory contributions.'],
  ['Worker', 'Paid directly by the client, in full, into the bank account verified at onboarding. Pays Labour Tech nothing, ever.'],
];

function HowPage() {
  const [tab, setTab] = useState('builder');
  const f = FLOWS[tab];
  return (
    <Page page="how-it-works.html">
      <PHero center eyebrow="How it works" title="From gap check to audit pack." sub="What the managed retainer looks like month by month, and what changes if you are a contractor buying platform access instead." />
      <section className="band"><div className="wrap">
        <div className="center" style={{ marginBottom: 34 }}>
          <div className="toggle">
            {Object.entries(FLOWS).map(([k, v]) => <button key={k} className={tab === k ? 'on' : ''} onClick={() => setTab(k)}>{v.label}</button>)}
          </div>
        </div>
        <div className="split" style={{ alignItems: 'start' }}>
          <div>
            <span className="kicker"><Icon n={f.icon} size={16} /> {f.label}</span>
            <p className="lead" style={{ margin: '16px 0 26px' }}>{f.intro}</p>
            <div className="flow">
              {f.steps.map(([t, b], i) => (
                <div className="fstep" key={t}>
                  <span className="n">{i + 1}</span>
                  <div><h4>{t}</h4><p>{b}</p></div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, position: 'sticky', top: 100 }}>
            <Mock kind={f.mock} />
            <div className="plan" style={{ padding: 28 }}>
              <h3 className="h4">{f.plan[0]}</h3>
              <p className="small">{f.plan[1]} Price shown in your account after you register.</p>
              <Ticks items={f.plan[2]} />
              <a className="btn btn-primary" href="get-started.html" style={{ marginTop: 6 }}>Start registration</a>
            </div>
          </div>
        </div>
      </div></section>

      <section className="band" style={{ background: 'var(--lav-2)' }}><div className="wrap" style={{ maxWidth: 860 }}>
        <SecTitle eyebrow="The monthly cycle" title="Every date, written down before you sign" sub="This is the calendar a site on retainer runs on. Nothing in it depends on someone remembering." />
        <div className="tblwrap">
          <table className="tbl">
            <tbody>{CYCLE.map(([w, b]) => <tr key={w}><td style={{ whiteSpace: 'nowrap', fontWeight: 600, color: 'var(--ink)' }}>{w}</td><td>{b}</td></tr>)}</tbody>
          </table>
        </div>
        <div className="note" style={{ marginTop: 22 }}>Statutory deposit dates shown are the general position and are confirmed against your own establishment codes at onboarding. Filing is supported and prepared by us; the deposit is made by you, in your name.</div>
      </div></section>

      <section className="band"><div className="wrap" style={{ maxWidth: 860 }}>
        <SecTitle eyebrow="How the money moves" title="Wages never pass through us" sub="This is a deliberate structure, not an operational detail. It keeps GST on our fee alone and keeps us out of the contractor relationship." />
        <div className="tblwrap">
          <table className="tbl">
            <thead><tr><th>Who</th><th>Does what</th></tr></thead>
            <tbody>{MONEY.map(([w, b]) => <tr key={w}><td style={{ whiteSpace: 'nowrap', fontWeight: 600, color: 'var(--ink)' }}>{w}</td><td>{b}</td></tr>)}</tbody>
          </table>
        </div>
      </div></section>

      <section className="band" style={{ background: 'var(--lav-2)' }}><div className="wrap">
        <SecTitle eyebrow="Seats, not names" title="How a site full of changing faces stays one fixed retainer" sub="Workers come and go. Your invoice and your scope do not." />
        <div className="grid3">
          {[['A seat is a position', ['Any verified worker can occupy it', 'Filled and vacated by date range', 'Registers show actual days worked', 'Your retainer never changes']],
            ['When a worker leaves', ['Deployment closed, seat marked empty', 'Replacement mobilised within 72 hours', 'Release checklist before the seat refills', 'Up to 12 replacements a month included']],
            ['When a worker returns', ['Documents already on their app profile', 'Re-deployed the same day', 'No repeat onboarding fee', 'Previous days and record on your site visible']]].map(([t, list]) => (
            <div className="svc" key={t}><h3>{t}</h3><Ticks items={list} /></div>
          ))}
        </div>
        <div className="note" style={{ marginTop: 24 }}>Example — a 50-seat site with 70 unique workers across a month files for all 70. That administration is ours; your retainer is unchanged.</div>
      </div></section>

      <section className="band"><div className="wrap">
        <SecTitle eyebrow="Statuses" title="Everything on the platform has a state" sub="No item sits in an undefined condition — for you, for a contractor, or for our team." />
        <div className="grid3">
          {[['Verification', [['Not started', 'off'], ['Submitted', 'info'], ['Under review', 'wait'], ['Verified', 'ok'], ['Resubmission required', 'bad']]],
            ['Deployment', [['Requested', 'info'], ['Allocated', 'wait'], ['Mobilised', 'wait'], ['Active', 'ok'], ['Released', 'off'], ['Absconded', 'bad']]],
            ['Filing', [['Not due', 'off'], ['Prepared', 'info'], ['Sent to client', 'wait'], ['Deposited', 'ok'], ['Acknowledged', 'ok'], ['Overdue', 'bad']]]].map(([t, items]) => (
            <div className="svc" key={t}><h3>{t}</h3><div className="chips" style={{ marginTop: 6 }}>{items.map(([l, c]) => <span className={'badge ' + c} key={l}>{l}</span>)}</div></div>
          ))}
        </div>
      </div></section>

      <CtaBand title="Start with one site." sub="A gap check on your busiest site, a two-page findings note in 48 hours, and a retainer quote on page two." primary={['Book a free consultation', 'contact.html']} secondary={['Register your business', 'get-started.html']} />
    </Page>
  );
}

LTMount('how', <HowPage />);