function AboutPage() {
  return (
    <>
      <section className="section-tight pt-16">
        <Container>
          <Eyebrow>About</Eyebrow>
          <h1 className="m-display mt-3 max-w-3xl">We're building the construction SaaS we wished existed when we ran jobs.</h1>
          <p className="m-lede mt-5 max-w-2xl">SyncBuild is a small team of ex-GCs, construction-SaaS veterans, and AI infrastructure people. We&rsquo;re pilot-ready with a GC running residential, commercial and condos lined up &mdash; deploy target within 2&ndash;3 weeks of AWS Activate approval.</p>
        </Container>
      </section>
      <section className="section">
        <Container>
          <div className="grid md:grid-cols-3 gap-4">
            {[
              ['Target','Opinionated, not rigid','Sentence case. Verbs for buttons. Numerals for numbers. No exclamation marks. No emoji. The brand is deliberately quiet so the content can be loud.'],
              ['GitBranch','Honest about status','Every feature in CLAUDE.md has a ✅ / 🟡 / 🔲 marker. When we stub, we mark it and add a trigger to DEFERRED.md. No aspirational bullets.'],
              ['Users','Crews-in-the-loop','Every module was shaped with a real GC, sub, or PM watching the draft before we shipped. We don\'t believe the workflow unless someone\'s used it Friday at 5pm.'],
            ].map(v => <FeatureCard key={v[1]} icon={v[0]} title={v[1]}>{v[2]}</FeatureCard>)}
          </div>
        </Container>
      </section>
      <section className="section" style={{ background: 'var(--bg-muted)' }}>
        <Container>
          <SectionHeading eyebrow="Where we are" title="Pilot-ready. Not pilot-deployed." lede="Everything you see in the demo is running in a tenant today &mdash; multi-tenant core, four first-party modules, credit-metered assistant, Stripe-backed top-ups, trust layer, CloudFormation + ECS pipeline. One pilot customer is lined up; seed round opens in 60 days." />
          <div className="mt-10 grid md:grid-cols-3 gap-4">
            {[
              ['Check','Built + running today','Auth, SSO, billing, file storage. PM, Daily Logs, Photos, RFIs. Assistant with tool routing + memory. Credit ledger + itemised invoices. Trust layer + audit log.'],
              ['Clock','Quarter 1 of pilot-running','Submittals &mdash; commercial-pilot blocker. Drawings &mdash; version-tracked sheet sets with markup. Change orders &mdash; scope / schedule / price mod flow.'],
              ['ArrowUpRight','Quarter 2','Mobile native app. Semantic search across every log, RFI, photo, decision. Outcome-billing commercial rollout &mdash; charge on accepted output.'],
            ].map(v => <FeatureCard key={v[1]} icon={v[0]} title={v[1]}>{v[2]}</FeatureCard>)}
          </div>
        </Container>
      </section>
      <section className="section" style={{ background: 'var(--bg-muted)' }}>
        <Container>
          <SectionHeading eyebrow="Investors" title="Backed by people who build." />
          <div className="mt-10 grid md:grid-cols-4 gap-4">
            {['Field Ventures','Concrete Capital','Ridge Seed','Operator Angels'].map(n => (
              <div key={n} className="card p-6 flex items-center gap-3">
                <div className="w-8 h-8 rounded" style={{ background: 'var(--bg-muted)' }} />
                <div className="text-[14px] font-semibold">{n}</div>
              </div>
            ))}
          </div>
        </Container>
      </section>
      <CTABand />
    </>
  );
}
Object.assign(window, { AboutPage });