function Hero() {
  return (
    <section className="phero">
      <div className="wrap herogrid">
        <div>
          <span className="eyebrow">All labour sourcing to managing, on one platform</span>
          <h1>Labour on site. Paperwork off your desk.</h1>
          <p>We provide verified skilled, semi-skilled and unskilled workers for your project site — and then run the whole thing: attendance, wage sheets, replacements, registers, PF and ESIC, and your audit pack. One platform, one team, one retainer per site.</p>
          <div className="hero-btns">
            <a className="btn btn-primary" href="contact.html">Book a free consultation</a>
            <a className="btn btn-ghost" style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,.5)' }} href="how-it-works.html">See how it works</a>
          </div>
          <p style={{ fontSize: 13.5, marginTop: 18, color: 'rgba(255,255,255,.6)' }}>Workers onboarded and verified on the Labour Tech mobile app · 50, 75, 100 or more workers per site · 72-hour replacement · You pay your workers directly.</p>
        </div>
        <Mock kind="dashboard" dark />
      </div>
    </section>
  );
}

const PROBLEMS = [
  ['Supply is a phone call and a gamble', 'Workers arrive through a mukadam at ₹500–2,000 a head. You do not know who is coming, what trade they actually hold, or whether the same crew turns up next week.'],
  ['Every worker becomes your site office’s problem', 'Once they are on site, someone at your end is chasing attendance, advances, wage sheets, absentees and replacements — work nobody was hired to do.'],
  ['A man leaves and the seat stays empty', 'Attrition on a construction site is constant. Refilling a position means starting the sourcing loop again, at whatever rate the market gives you that week.'],
  ['And then the records have to exist', 'Forms 12, 13 and 14 get written the week an inspector is expected. Wage and DA revisions land on 1 January and 1 July with retrospective effect, and the arrears go unpaid. Liability stays with you as employer and principal employer whatever the arrangement.'],
];

const STAGES = [
  ['Tell us the trades and the headcount', 'Masons, bar benders, carpenters, electricians, helpers — skilled, semi-skilled or unskilled. Fifty workers or two hundred; the seat count is yours to set, not a limit we impose.'],
  ['We verify before we send', 'Every worker is onboarded on the Labour Tech mobile app — ID, bank account, trade and skill grade captured and checked digitally. Nobody reaches your gate unverified.'],
  ['Crew on site', 'Workers mobilise against seats. A seat is a position, not a person — so your site plan holds even when people change.'],
  ['We run the crew', 'Attendance daily, wage sheet by day 2, advances tracked, absentees chased, replacements inside 72 hours. Your engineer builds; we handle the labour desk.'],
  ['Compliance comes out of it', 'Registers, PF, ESIC, PT, BOCW cess support and a monthly audit pack — produced from the same records, not reconstructed the week an inspector calls.'],
];

function Lifecycle() {
  return (
    <section className="band" style={{ background: 'var(--lav-2)' }}><div className="wrap">
      <SecTitle eyebrow="How it fits together" title="One number to call, from the first requirement to the last register" sub="Most arrangements cover one stage and hand the rest back to you — a supplier for bodies, a consultant for filings, and your site office holding both together. We hold the whole line." />
      <div className="steps">
        {STAGES.map(([t, b], i) => (
          <div className="stepcard" key={t}>
            <span className="num">{i + 1}</span>
            <h4>{t}</h4>
            <p>{b}</p>
          </div>
        ))}
      </div>
    </div></section>
  );
}

function AppSourcing() {
  return (
    <section className="band"><div className="wrap">
      <SecTitle eyebrow="Where the workers come from" title="Onboarded on an app, not on a notebook at the gate" sub="Every worker we deploy is registered on the Labour Tech mobile application — in his own regional language, with voice prompts, built for people who have never filled a form online. That is what makes verified supply repeatable instead of a favour someone did you last month." />
      <div className="grid3">
        {[['smartphone', 'Registered on the app, by the worker', 'Name, trade, skill grade, home district, languages and availability captured on his own phone. Not typed up later by a supervisor from memory.'],
          ['scan-face', 'Documents checked digitally', 'Aadhaar-based identity, bank account for direct wage payment, and trade or skill evidence uploaded and reviewed before the profile can be deployed anywhere.'],
          ['radar', 'Availability you can see before you commit', 'Because the pool is digital, your dashboard shows live availability by trade and city — so you know a requirement is fillable before you plan around it.']].map(([ic, t, b]) => (
          <div className="svc" key={t}><span className="ico"><Icon n={ic} /></span><h3>{t}</h3><p>{b}</p></div>
        ))}
      </div>
      <div className="note" style={{ marginTop: 22 }}>The worker application is free for workers, and no individual worker’s personal data is shown on this website or to other businesses.</div>
    </div></section>
  );
}

function Problem() {
  return (
    <section className="band"><div className="wrap">
      <SecTitle eyebrow="The problem" title="Getting workers is the easy part. Keeping the site staffed and accounted for is not." sub="Sourcing, retention, attendance, payment and paperwork are treated as five separate jobs at most sites. They are one continuous job, and it lands on your team." />
      <div className="grid2">
        {PROBLEMS.map(([t, b]) => <div className="svc" key={t}><h3>{t}</h3><p>{b}</p></div>)}
      </div>
    </div></section>
  );
}

const PILLARS = [
  ['users-round', 'Skilled, semi-skilled and unskilled supply', 'Workers register on the Labour Tech app with ID, bank details, trade and skill grade checked before they are ever deployed. Scoped in blocks of 25 — 50, 75 or 100 seats on a site, and larger deployments quoted after we look at the requirement with you.'],
  ['clipboard-list', 'Day-to-day management of the crew', 'Attendance, absentee follow-up, advances and recoveries, document expiries, wage sheet and a bank-ready payout file — run by our compliance executive for your site, not by your engineer.'],
  ['repeat', '72-hour replacement', 'A seat is a position, not a person. When a worker leaves we mobilise a replacement within 72 hours — and a worker returning to your site is re-deployed the same day.'],
  ['file-stack', 'Registers generated, not typed', 'Forms 9, 10, 12, 13, 14, 15, 16, 17, 18, 19 and Form D every month, plus CLRA Form XII and XIII for your principal-employer file — produced from attendance, handling mid-month joins and exits.'],
  ['bell-ring', 'Filings prepared to a calendar', 'PF, ESIC, PT and TDS bifurcation per worker per cycle, prepared by day 13 so you deposit by the 15th. BOCW registration and cess return support included.'],
  ['wifi-off', 'Attendance that works without signal', 'Marked at site on mobile, queued locally, synced when there is network. Everything downstream depends on it, so it cannot depend on connectivity.'],
  ['folder-check', 'One audit pack a month', 'Every register, challan, acknowledgement and payment proof for the site, in a single download, ready to put in front of an inspector.'],
];

function Solution() {
  return (
    <section className="band" style={{ background: 'var(--lav-2)' }}><div className="wrap">
      <SecTitle eyebrow="The retainer" title="Seven things you stop doing yourself" sub="One monthly retainer per project site, covering supply, the running management of the crew and the entire statutory function for the workers deployed there." />
      <div className="grid2">
        {PILLARS.map(([ic, t, b]) => <div className="svc" key={t}><span className="ico"><Icon n={ic} /></span><h3>{t}</h3><p>{b}</p></div>)}
      </div>
    </div></section>
  );
}

const REPLACES = [
  ['Labour officer or site compliance staff', '₹35,000 – 45,000'],
  ['Supervisor time spent on muster, advances and chasing absentees', 'Your own time'],
  ['Payroll executive', '₹25,000 – 30,000'],
  ['Compliance consultant retainer', '₹15,000'],
  ['Sourcing and verifying the workers yourself', 'Your own time'],
];

function Economics() {
  return (
    <section className="band"><div className="wrap" style={{ maxWidth: 760 }}>
      <SecTitle eyebrow="What it replaces" title="A labour department costs ₹75,000 – 90,000 a month to staff" sub="And it still leaves you to find the workers yourself." />
      <div className="tblwrap">
        <table className="tbl">
          <thead><tr><th>What a site office staffs 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, one retainer per site</b></td><td className="tc"><b>See your account</b></td></tr>
          </tbody>
        </table>
      </div>
      <div className="note" style={{ marginTop: 22 }}>Indicative market salary ranges, not a quotation. Retainer pricing is shown inside your account for your business type — <a className="link" href="pricing.html">log in to see yours</a>.</div>
    </div></section>
  );
}

const CADENCE = [
  ['Daily', 'Attendance marked at site. Seat board updated, absences flagged.'],
  ['Weekly', 'Empty seats actioned against the 72-hour commitment. Advances and recoveries entered. Document expiries reviewed.'],
  ['Day 2', 'Wage sheet and bank-ready payout file issued to you.'],
  ['Day 4', 'You approve the wage sheet in the dashboard.'],
  ['Day 7', 'You disburse wages from your own account. Proof of payment captured against the register.'],
  ['Day 10', 'Forms 9 to 19 and Form D generated. CLRA Form XII and XIII updated.'],
  ['Day 13', 'PF ECR and ESIC challans prepared, so you deposit by the 15th.'],
  ['Day 20', 'Audit pack published for the month.'],
  ['1 Jan · 1 Jul', 'Minimum wage and dearness allowance revision applied, with arrears exposure reported per site.'],
];

const BANDS = [
  ['Up to 50', 'One tower, one package, a finishing crew. The standard starting scope.'],
  ['Up to 75', 'A site in full swing across two or three trades at once.'],
  ['Up to 100', 'Structure and finishing running together, or a long-duration package.'],
];

function Scale() {
  return (
    <section className="band" style={{ background: 'var(--lav-2)' }}><div className="wrap" style={{ maxWidth: 900 }}>
      <SecTitle eyebrow="Scoping your site" title="You tell us the headcount. We are not a fifty-worker outfit." sub="Seats are scoped per site in blocks of 25, and the rate per seat falls with every block. Larger sites are normal work for us — they are just scoped properly first." />
      <div className="grid3">
        {BANDS.map(([n, b]) => (
          <div className="svc" key={n} style={{ alignItems: 'flex-start' }}>
            <span className="num" style={{ width: 'auto', minWidth: 56, borderRadius: 28, padding: '0 16px', fontSize: 18 }}>{n}</span>
            <h3>{n} workers on site</h3>
            <p>{b}</p>
          </div>
        ))}
      </div>
      <div className="panel" style={{ padding: 32, marginTop: 24 }}>
        <span className="eyebrow">More than 100 workers on one site</span>
        <h3 className="h3" style={{ margin: '10px 0 8px' }}>150 or 200 seats is a conversation, not a checkout.</h3>
        <p>Large deployments are scoped before they are quoted: trade mix, shift patterns, gate-wise attendance, wage bands and a compliance executive posted to your site. Send us the requirement and we will come back with a mobilisation plan and a quote.</p>
        <div className="hero-btns" style={{ justifyContent: 'flex-start', marginTop: 18 }}>
          <a className="btn btn-primary" href="contact.html">Send us your requirement</a>
          <a className="btn btn-ghost" href="pricing.html">See seat bands in your account</a>
        </div>
      </div>
      <div className="note" style={{ marginTop: 20 }}>Retainer pricing for each band is shown inside your account for your business type. Every band includes supply, day-to-day management and the full compliance function for the workers deployed.</div>
    </div></section>
  );
}

function Cadence() {
  return (
    <section className="band"><div className="wrap" style={{ maxWidth: 820 }}>
      <SecTitle eyebrow="Service cadence" title="A dated process, not a promise to be responsive" sub="This is the calendar your site runs on from the month you mobilise." />
      <div className="tblwrap">
        <table className="tbl">
          <tbody>{CADENCE.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 dates shown are the general position and are confirmed against your own establishment codes at onboarding.</div>
    </div></section>
  );
}

const ROLES = [
  ['landmark', 'Builders & developers', 'We run the labour desk for each site.', ['Seat count scoped to the site — 50, 75, 100 or more', 'Full statutory register and filing preparation', 'Portfolio view across every site on retainer', 'One retainer per project site'], 'for-builders.html'],
  ['building-2', 'EPC & general contractors', 'We supply the crew and keep the file straight.', ['Seat count scoped to the site — 50, 75, 100 or more', 'Augments the site compliance staff you already have', 'Package-wise requirements and bidding included', 'One retainer per project site'], 'for-epcs.html'],
  ['hard-hat', 'Labour Contractors', 'We give you the reach.', ['Access the registered labour pool', 'Discover and bid on EPC and builder requirements', 'Verified profile buyers can check', 'Optional compliance back-office for your own workers'], 'for-contractors.html'],
];

function Roles() {
  return (
    <section className="band"><div className="wrap">
      <SecTitle eyebrow="Who we work with" title="Find the way we work with you" sub="Every business on a site carries a different part of the labour problem. Open the one that matches yours and see exactly what we take on." />
      <div className="grid3">
        {ROLES.map(([ic, t, tag, list, href]) => (
          <div className="svc" key={t}>
            <span className="ico"><Icon n={ic} /></span>
            <h3>{t}</h3>
            <p style={{ fontWeight: 600, color: 'var(--ink)' }}>{tag}</p>
            <Ticks items={list} />
            <div style={{ marginTop: 'auto', paddingTop: 18 }}></div>
            <a className="link" href={href}>Learn more →</a>
          </div>
        ))}
      </div>
    </div></section>
  );
}

function Demo({ eyebrow, title, body, points, label, flip, mock }) {
  const media = mock ? <Mock kind={mock} /> : <Ph label={label} style={{ minHeight: 340 }} />;
  return (
    <section className="band-sm"><div className="wrap">
      <div className="split">
        {flip ? media : null}
        <div className="stack" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <span className="kicker">{eyebrow}</span>
          <h2 className="h2">{title}</h2>
          <p className="lead">{body}</p>
          <Ticks items={points} />
        </div>
        {flip ? null : media}
      </div>
    </div></section>
  );
}

function DashPreview() {
  return (
    <section className="band" style={{ background: 'var(--lav-2)' }}><div className="wrap">
      <SecTitle eyebrow="Inside the platform" title="One screen for the site, one for the portfolio" sub="Seats filled and empty, this month's registers, the filing calendar and the audit pack — per site." />
      <Mock kind="dashboard" />
      <div className="center" style={{ marginTop: 28 }}><a className="btn btn-primary" href="dashboard.html">Take the dashboard tour</a></div>
    </div></section>
  );
}

const FAQ = [
  ['What exactly does the retainer cover?', 'One project site at the seat count you scope — 50, 75 or 100 workers, or a figure we quote after a requirement consultation — end to end: sourcing from the verified pool, verification before deployment, mobilisation, day-to-day management of the crew, replacements within 72 hours, exit settlement on the register, Forms 9 to 19 and Form D every month, CLRA Form XII and XIII, PF, ESIC, PT and TDS bifurcation, returns filing support, BOCW registration and cess return support, attendance, wage sheet and payout file, advance ledger, safety and incident registers, and a monthly audit pack.'],
  ['Do you pay the workers?', 'Never. We prepare the wage sheet and a bank-ready payout file; you pay the workers directly from your own account. This keeps GST on our fee only, not on your wage bill, and it keeps us out of the contractor relationship.'],
  ['Does this transfer our compliance liability to you?', 'No, and no provider can honestly claim otherwise. Under Indian law obligations rest with the employer and, where applicable, the principal employer. What we provide is facilitation — the records prepared correctly, the filings prepared on time, and a documented trail you can put in front of an inspector.'],
  ['We need 200 workers on one site. Is that even possible?', 'Yes, and it is normal work — but it is scoped before it is priced. Standard bands run at 50, 75 and 100 seats per site, with the rate per seat falling at each block. Above 100 we meet you first, look at trades, shift patterns, gates and wage bands, post a compliance executive to that site rather than sharing one, and then quote. What you should not read into our published bands is a limit on the labour we can put on your site.'],
  ['We run three projects. Is that one retainer or three?', 'Three. The retainer is per project site because the work is per site — separate registers, separate attendance, separate audit pack. From your third site every site moves to a lower per-site rate.'],
  ['What happens when workers leave mid-month?', 'Deployment is on a seat basis. We close the leaving worker\u2019s deployment, mobilise a replacement within 72 hours, and the registers show both with actual days worked. Your retainer does not change. Replacements up to 12 a month are included.'],
  ['How is it priced?', 'Against your requirement, not off a page. You tell us the workers, trades, location and start date; we send a written quote with the scope and the terms. Retainers are per project site on a 12-month term, contractor platform access is an annual subscription, and every amount is exclusive of 18% GST with a GST invoice on each payment.'],
  ['Are you a job portal for workers?', 'No. Workers register on a separate Labour Tech app and are never charged. This website is for businesses, and it never exposes individual worker personal data.'],
];

function Faq() {
  const [open, setOpen] = useState(0);
  return (
    <section className="band"><div className="wrap">
      <SecTitle eyebrow="FAQ" title="What clients ask before they sign" />
      <div className="faq">
        {FAQ.map(([q, a], i) => (
          <div key={q}>
            <button className="q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}><i>{open === i ? '−' : '+'}</i>{q}</button>
            <div className={'a' + (open === i ? ' open' : '')}><p style={{ padding: '0 24px 20px 54px', fontSize: 15 }}>{a}</p></div>
          </div>
        ))}
      </div>
    </div></section>
  );
}

function HomePage() {
  return (
    <Page page="home.html">
      <Hero />
      <div className="pinkband"><div className="wrap"><p>Labour sourcing to labour management — one platform.</p></div></div>
      <Problem />
      <Lifecycle />
      <AppSourcing />
      <Solution />
      <Economics />
      <Scale />
      <Demo eyebrow="Seat board" title="Fifty seats, and who is sitting in them today" body="A seat is a position at your site, not a named worker. The board shows every seat, its current occupant, days held, document status and how many seats are empty right now."
        points={[<span><b>Empty seats</b> — flagged the day they open, with the 72-hour clock running</span>, <span><b>Returning workers</b> — previously on your site, re-deployable the same day</span>, <span><b>Request a replacement</b> — one action, no phone calls</span>]}
        label="Product screenshot — seat board for a project site" mock="seats" />
      <Demo flip eyebrow="Registers" title="Forms 9 to 19, generated from attendance" body="Attendance is the source of truth. Every register downstream is produced from it, including partial-month workers with actual days worked — which is what mid-month joins and exits break in a spreadsheet."
        points={[<span><b>Muster roll and wage register</b> — Forms 12, 13 and 14 every month</span>, <span><b>Advances, fines, overtime</b> — Forms 16, 17, 18 and 19, from the ledger</span>, <span><b>CLRA Form XII and XIII</b> — for your principal-employer file</span>]}
        label="Product screenshot — register generation" mock="registers" />
      <Demo eyebrow="Labour pool" title="Verified supply, before you commit to a headcount" body="Workers register on the Labour Tech app. Availability by trade and city is visible from your dashboard, with verification status — so you know a requirement is fillable before you post it."
        points={[<span><b>By trade and city</b> — masons, helpers, carpenters, bar benders, electricians</span>, <span><b>Verification status</b> — ID, bank, trade and skill grade checked</span>, <span><b>No personal data</b> — individual worker details are never shown on public pages</span>]}
        label="Product screenshot — labour pool availability" mock="pool" />
      <Cadence />
      <Roles />
      <DashPreview />
      <Faq />
      <CtaBand title="Start with a compliance gap check." sub="45 minutes on one of your sites. We look at the muster roll, the last three PF challans, the BOCW registration and this year's arrears, and send you a two-page findings note. No charge, no obligation." primary={['Book a free consultation', 'contact.html']} secondary={['Register your business', 'get-started.html']} />
    </Page>
  );
}

LTMount('home', <HomePage />);