const CHAPTERS = [
  ['Why construction hiring stayed informal', 'Construction is India\'s largest employer after agriculture, and almost none of its hiring is recorded. A site engineer needs forty masons by the fifteenth; he calls three contractors he already knows. Whoever answers first gets the work. Price discovery, capacity checks and compliance all happen after the fact, if at all.'],
  ['What Labour Tech does', 'We give the transaction a structure. A hiring company posts a requirement in fixed fields — trade, headcount, location, dates, wage band, site conditions. Verified labour contractors respond with a bid in fixed fields — workforce, rate, availability, start date. The buyer compares them on one screen and awards. Everything from that point is tracked against the requirement it came from.'],
  ['A marketplace with three sides', 'Labour contractors supply workforce. EPC and general contractors consume it on packages. Builders and developers consume it across a portfolio of projects. Each side has its own dashboard, its own permissions and its own subscription — but they transact on the same requirement and the same bid.'],
  ['Verification is the product', 'A marketplace is only as good as the businesses on it. GST and KYC verification is required before a supplier can bid, and verification status is shown wherever a business appears. Documents are held privately; only the status is public.'],
];

const VALUES = [
  ['ruler', 'Structure over speed', 'A requirement posted properly takes four minutes and saves a fortnight of negotiation. We will not trade the fields that make bids comparable for a faster form.'],
  ['scale', 'Comparable, not cheapest', 'Bid comparison shows rate next to workforce, availability and history. The lowest number is not automatically the answer, and the interface does not pretend otherwise.'],
  ['lock', 'Documents stay private', 'KYC and GST documents are stored in restricted storage with access logged. Public profiles show status, never the file.'],
  ['map-pin', 'Present where we can actually deliver', 'We operate in the Pune Metropolitan Region, where our supply, our compliance executives and our site presence are. A requirement is only worth posting where it can be filled.'],
];


function AboutPage() {
  return (
    <Page page="about.html">
      <PHero eyebrow="About Labour Tech" title="Hiring infrastructure for construction businesses." sub="Labour Tech is a B2B marketplace and system of record for construction workforce procurement. Not only worker board, not only worker app — the platform the businesses on both sides of a labour contract use to find each other and transact." ctas={[['Get started', 'get-started.html'], ['Book a walkthrough', 'contact.html', 'btn-ghost']]} />
      <section className="band"><div className="wrap">
        <div className="split" style={{ alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 34 }}>
            {CHAPTERS.map(([h, b]) => (
              <div key={h}>
                <h2 className="h3">{h}</h2>
                <p style={{ marginTop: 12 }}>{b}</p>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, position: 'sticky', top: 100 }}>
            <img src="brand/project-towers.png" alt="Twin residential towers on a completed project site" style={{ width: '100%', display: 'block', borderRadius: 'var(--r-md)', border: '1px solid var(--line)' }} />
            <div className="panel tint">
              <span className="eyebrow">Positioning</span>
              <p style={{ marginTop: 10, fontWeight: 600, color: 'var(--ink)' }}>A construction workforce marketplace and hiring infrastructure platform for businesses.</p>
              <p className="small" style={{ marginTop: 10 }}>Worker-facing services are delivered through a separate product and are not offered on this platform.</p>
            </div>
          </div>
        </div>
      </div></section>
      <section className="band" style={{ background: 'var(--lav-2)' }}><div className="wrap">
        <SecTitle eyebrow="How we work" title="Four positions we do not move on" />
        <div className="grid2">
          {VALUES.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>
      <CtaBand title="Talk to us before you subscribe." sub="Bring a live requirement to the call. We will show you how it would be posted, who would see it and what a bid on it looks like." primary={['Book a walkthrough', 'contact.html']} secondary={['Register your business', 'get-started.html']} />
    </Page>
  );
}

LTMount('about', <AboutPage />);