const PLANDATA = {
  contractor: {
    name: 'Labour Contractors', per: 'Platform subscription', unit: 'Annual subscription',
    lead: 'You supply labour — so you buy the platform, not the department. Pool access, requirement discovery and bidding, plus an optional compliance back-office for your own workers.',
    tiers: [
      ['Starter', ['25 worker contact reveals a month', 'Bid on 10 requirements a month', 'One location in the Pune Metropolitan Region', 'Verified business profile', 'Requirement discovery in that location']],
      ['Growth', ['75 worker contact reveals a month', 'Unlimited bidding', 'Verified badge and priority placement in bid lists', 'Discovery across the whole Pune Metropolitan Region', 'Lead and connection management']],
    ],
  },
  epc: {
    name: 'EPC / general contractor', per: 'Managed labour retainer', managed: true, unit: 'Per project site',
    lead: 'One retainer per project site. Verified workers deployed at the seat count you scope, and your entire labour compliance function run by our team from the platform.',
  },
  builder: {
    name: 'Builder / developer', per: 'Managed labour retainer', managed: true, unit: 'Per project site',
    lead: 'One retainer per project site. Verified workers deployed at the seat count you scope, statutory records maintained end to end, and a portfolio view across every site you run.',
  },
};

const GROUPS = [
  ['users', 'Verified labour supply', ['Seat count scoped with you — 50, 75 or 100 on one site, and any figure above that scoped in a requirement consultation', 'Every worker verified before deployment — ID, bank, trade and skill grade', 'Replacement mobilised within 72 hours of a worker leaving', 'Returning workers re-deployed the same day — their records already exist', 'Seat board showing who is on site, days held and where you are short']],
  ['shield', 'Compliance, run by our team', ['Forms 9, 10, 12, 13, 14, 15, 16, 17, 18, 19 and Form D generated every month', 'CLRA Form XII and XIII prepared for your principal-employer file', 'PF, ESIC, PT and TDS bifurcation per worker per cycle', 'Returns filing support on every payroll cycle', 'BOCW registration and cess return support', 'Minimum wage and VDA revision alerts, with arrears exposure flagged per site']],
  ['layout-dashboard', 'Dashboard and records', ['Attendance marked at site on mobile — works offline, syncs when there is signal', 'Wage sheet and bank-ready payout file each cycle', 'Advance and recovery ledger', 'Inspection-ready audit pack — one download per site per month', 'Safety induction, PPE issue and incident registers', 'Multi-site view across every project on retainer']],
];

const REPLACES = [
  ['Labour officer / site compliance staff', '₹35,000 – 45,000'],
  ['Payroll executive', '₹25,000 – 30,000'],
  ['Compliance consultant retainer', '₹15,000'],
  ['Sourcing and verifying the workers yourself', 'Your own time'],
];

const ADDONS = [
  ['Moving up a seat band mid-term — 50 to 75, or 75 to 100', 'Re-banded from the next cycle'],
  ['Sites needing more than 100 workers', 'Scoped in a requirement consultation, then quoted'],
  ['Worker onboarding — KYC, e-Shram and BOCW enrolment', 'One time, per worker'],
  ['Replacements beyond 12 in a month', 'Per worker'],
  ['Historical clean-up — prior months’ registers reconstructed', 'One time, per site'],
  ['Each additional project site', 'A retainer of its own'],
];

const MSEATS = [['Up to 50 workers', 'One tower, one package or a finishing crew'], ['Up to 75 workers', 'A site running two or three trades at once'], ['Up to 100 workers', 'Structure and finishing together, or a long package'], ['More than 100 workers', 'Scoped with you before it is quoted']];
const CSEATS = [['Up to 25 workers', 'A single crew you place at a time'], ['Up to 50 workers', 'Two or three crews across sites'], ['Up to 75 workers', 'Regular multi-trade supply'], ['Up to 100 workers', 'Sustained supply across several buyers'], ['More than 100 workers', 'Scoped with you before it is quoted']];

const ROLE_LABELS = [['contractor', 'Labour Contractors', 'hard-hat'], ['epc', 'EPC / general contractor', 'building-2'], ['builder', 'Builder / developer', 'landmark']];

const COMMON = [
  ['file-signature', 'How quoting works', 'Tell us the requirement — workers, trades, location and start date. We come back with a written quote and scope. Nothing is payable before you accept it.'],
  ['receipt', 'GST invoicing', 'Every payment generates a GST invoice against your registered business details. All quoted amounts are exclusive of GST.'],
  ['wallet', 'Wages stay with you', 'You pay your workers directly from your own account. We prepare the payout file and hold the record — we never hold or disburse wages.'],
];

function PricingPage() {
  const [role, setRole] = useState(() => { try { return localStorage.getItem('lt_role'); } catch (e) { return null; } });
  const [open, setOpen] = useState(false);
  const [tier, setTier] = useState(0);
  const [seatIx, setSeatIx] = useState(0);
  const signIn = r => { try { localStorage.setItem('lt_role', r); } catch (e) {} setRole(r); setOpen(false); setSeatIx(0); };
  const signOut = () => { try { localStorage.removeItem('lt_role'); } catch (e) {} setRole(null); setOpen(false); };
  const p = role ? PLANDATA[role] : null;
  const managed = !!(p && p.managed);
  const seatList = managed ? MSEATS : CSEATS;
  const quoteHref = 'subscribe.html?seats=' + seatIx + (managed ? '' : '&tier=' + tier);

  return (
    <Page page="pricing.html">
      <PHero center eyebrow="Plans" title={managed ? 'Tell us what the site needs. We will quote it.' : role ? 'Tell us what you need. We will quote it.' : 'Tell us what you need. We will quote it.'} sub={managed
        ? 'Supply and compliance are two different products, bought on two different units. Scope is published in full; the figure is written against your requirement, because a site with 40 masons in Chakan and a site with 100 across three trades in Kharadi are not the same job.'
        : 'Supply and compliance are two different products, bought on two different units. Scope is published in full; the figure is written against your requirement — the volume you need to reach, where you work and what you supply.'} />
      <section className="band"><div className="wrap" style={{ maxWidth: 880 }}>
        {!role && (
          <div className="panel" style={{ padding: 40 }}>
            <span className="eyebrow">Log in to continue</span>
            <h2 className="h3" style={{ margin: '10px 0 8px' }}>Which account are you signing in to?</h2>
            <p className="small" style={{ marginBottom: 24 }}>Plans are shown per business type once you are signed in. Not registered yet? <a className="link" href="get-started.html">Register your business →</a></p>
            <div className="rolegrid">
              {ROLE_LABELS.map(([k, t, ic]) => (
                <button className="rolecard" key={k} onClick={() => signIn(k)}>
                  <span className="ic"><Icon n={ic} /></span>
                  <span><b>{t}</b><span>Sign in to view your plan</span></span>
                  <i>Log in</i>
                </button>
              ))}
            </div>
            <div className="note" style={{ marginTop: 24 }}>Demo sign-in. In the live platform this screen sits behind authentication and reads your business type from your account.</div>
          </div>
        )}

        {role && !open && (
          <div className="panel" style={{ padding: 40, textAlign: 'center' }}>
            <span className="badge ok">Signed in</span>
            <h2 className="h2" style={{ margin: '14px 0 10px' }}>{p.name}</h2>
            <p className="lead">{p.lead}</p>
            <div className="hero-btns" style={{ justifyContent: 'center', marginTop: 24 }}>
              <button className="btn btn-primary" onClick={() => setOpen(true)}>See your plan</button>
              <a className="btn btn-ghost" href="dashboard.html">Go to dashboard</a>
            </div>
            <p className="small" style={{ marginTop: 18 }}>Signed in as the wrong business type? <a className="link" href="#" onClick={e => { e.preventDefault(); signOut(); }}>Switch account</a></p>
          </div>
        )}

        {role && open && (
          <React.Fragment>
            {!managed && (
              <div className="center" style={{ marginBottom: 22 }}>
                <div className="toggle">
                  {p.tiers.map((t, i) => <button key={t[0]} className={tier === i ? 'on' : ''} onClick={() => setTier(i)}>{t[0]}</button>)}
                </div>
              </div>
            )}

            <div className="plan feat" style={{ padding: 40 }}>
              <span className="tag">{managed ? p.per : p.per + ' — ' + p.tiers[tier][0]}</span>
              <h3 className="h3">{p.name}</h3>
              <div className="h2" style={{ margin: '10px 0 2px' }}>{managed ? 'Quoted per project site.' : 'Quoted on your annual subscription.'}</div>
              <p style={{ maxWidth: 560, marginTop: 4 }}>{managed
                ? 'Pick the number of workers the site needs below and send it to us. You get a written quote covering supply, day-to-day management and the full statutory function for that site — with the rate per worker falling at each block of 25.'
                : 'The platform is sold as an annual subscription. Pick the tier and the volume of workers you need to reach, send it to us, and we will come back with your quote and terms.'}</p>
              <div className="hero-btns" style={{ justifyContent: 'flex-start', marginTop: 8 }}>
                <a className="btn btn-light" href={quoteHref}>Request a quote</a>
                <button className="btn btn-ghost" style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,.5)' }} onClick={() => setOpen(false)}>Back</button>
              </div>
            </div>

            {!managed && <div className="panel" style={{ padding: 40, marginTop: 40 }}><span className="eyebrow">{p.tiers[tier][0]} — what is included</span><h2 className="h3" style={{ margin: '10px 0 18px' }}>Every month, for the year.</h2><Ticks items={p.tiers[tier][1]} /></div>}

            <div className="panel" style={{ padding: 40, marginTop: managed ? 40 : 24 }}>
              <span className="eyebrow">Your requirement</span>
              <h2 className="h3" style={{ margin: '10px 0 8px' }}>How many workers?</h2>
              <p className="small" style={{ marginBottom: 22 }}>{managed ? 'Seats are scoped per site in blocks of 25, and the rate per worker falls with every block. Above 100 on one site we visit, scope the deployment and then quote it.' : 'This sets the pool access and bidding volume we quote against. Above 100 we scope it with you first.'}</p>
              <div className="rolegrid">
                {seatList.map(([t, b], i) => (
                  <button className="rolecard" key={t} onClick={() => setSeatIx(i)} style={seatIx === i ? { borderColor: 'var(--blue)', background: 'var(--lav-2)' } : null}>
                    <span className="ic"><Icon n="users-round" /></span>
                    <span><b>{t}</b><span>{b}</span></span>
                    <i>{seatIx === i ? 'Selected' : 'Select'}</i>
                  </button>
                ))}
              </div>
              <div className="hero-btns" style={{ justifyContent: 'flex-start', marginTop: 24 }}>
                <a className="btn btn-primary" href={quoteHref}>Request a quote for {seatList[seatIx][0].toLowerCase()}</a>
                <a className="btn btn-ghost" href="contact.html">{managed ? 'Book a free consultation' : 'Talk to us first'}</a>
              </div>
            </div>

            {managed && (
              <React.Fragment>
                <div className="grid3" style={{ marginTop: 40 }}>
                  {GROUPS.map(([ic, t, items]) => (
                    <div className="svc" key={t} style={{ textAlign: 'left' }}>
                      <span className="ico"><Icon n={ic} /></span>
                      <h3>{t}</h3>
                      <Ticks items={items} />
                    </div>
                  ))}
                </div>

                <div className="panel" style={{ padding: 40, marginTop: 40 }}>
                  <span className="eyebrow">What the retainer replaces</span>
                  <h2 className="h3" style={{ margin: '10px 0 8px' }}>A labour department costs ₹75,000 – 90,000 a month to staff.</h2>
                  <p className="small" style={{ marginBottom: 22 }}>And it still leaves you to find the workers yourself.</p>
                  <div className="tblwrap" style={{ border: 0 }}>
                    <table className="tbl">
                      <thead><tr><th>What you staff today</th><th className="tc">Monthly cost</th></tr></thead>
                      <tbody>
                        {REPLACES.map(r => <tr key={r[0]}><td>{r[0]}</td><td className="tc">{r[1]}</td></tr>)}
                        <tr><td><b>Labour Tech, per site</b></td><td className="tc"><b>Quoted to your requirement</b></td></tr>
                      </tbody>
                    </table>
                  </div>
                  <div className="note" style={{ marginTop: 20 }}>Comparison figures are indicative market salary ranges, not a quotation. Your own costs will differ.</div>
                </div>

                <div className="panel" style={{ padding: 40, marginTop: 24 }}>
                  <span className="eyebrow">Add-ons</span>
                  <h2 className="h3" style={{ margin: '10px 0 22px' }}>Beyond the retainer.</h2>
                  <div className="tblwrap" style={{ border: 0 }}>
                    <table className="tbl">
                      <tbody>{ADDONS.map(r => <tr key={r[0]}><td>{r[0]}</td><td className="tc"><b>{r[1]}</b></td></tr>)}</tbody>
                    </table>
                  </div>
                  <div className="note" style={{ marginTop: 20 }}>Replacements up to 12 workers a month are included in the retainer. Add-on rates are stated in your quote.</div>
                </div>
              </React.Fragment>
            )}

            {!managed && (
              <div className="panel" style={{ padding: 40, marginTop: 24 }}>
                <span className="eyebrow">Optional add-on</span>
                <h2 className="h3" style={{ margin: '10px 0 8px' }}>Compliance back-office for your own workers</h2>
                <p style={{ marginBottom: 18 }}>You are the employer of your own workers, which means the same statutory registers and returns a builder needs. Our team runs them for you from the same platform, billed on the headcount actually administered each month. Ask for it when you need it and we will quote it with your subscription.</p>
                <Ticks items={['Forms 9 to 19 and Form D generated every month', 'Wage register, muster roll and payslips', 'PF, ESIC, PT and TDS bifurcation per worker per cycle', 'Returns filing support on every payroll cycle', 'Attendance capture that works offline at site', 'Monthly audit pack you can hand to your principal employer']} />
                <div className="note" style={{ marginTop: 20 }}>Available from your dashboard once your platform subscription is active.</div>
              </div>
            )}

            <p className="center small" style={{ marginTop: 24 }}>No commission on hires. Plans for other business types are shown in their own accounts. <a className="link" href="#" onClick={e => { e.preventDefault(); signOut(); }}>Switch account</a></p>

            <div className="grid3" style={{ marginTop: 40 }}>
              {COMMON.map(([ic, t, b]) => <div className="svc" key={t}><span className="ico"><Icon n={ic} /></span><h3>{t}</h3><p>{b}</p></div>)}
            </div>

          </React.Fragment>
        )}
      </div></section>
      <CtaBand title="Not registered yet?" sub="Register your business and complete GST and KYC verification. Your plan and its scope appear in your account as soon as you are in, and a quote follows your requirement." primary={['Register your business', 'get-started.html']} secondary={managed ? ['Book a free consultation', 'contact.html'] : ['Talk to us', 'contact.html']} />
    </Page>
  );
}

LTMount('pricing', <PricingPage />);