function ProductPage() {
  return (
    <>
      <section className="section-tight pt-16">
        <Container>
          <Eyebrow>Product</Eyebrow>
          <h1 className="m-display mt-3 max-w-3xl">One platform for the office and the field — with a workforce of agents inside it.</h1>
          <p className="m-lede mt-5 max-w-2xl">SyncBuild is a multi-tenant React + Symfony app with module seams where construction workflows plug in. Every module registers tools, routes and events through a stable SDK.</p>
        </Container>
      </section>

      <section className="pb-16">
        <Container><ProjectHomeMock /></Container>
      </section>

      <section className="section" style={{ background: 'var(--bg-muted)' }}>
        <Container>
          <SectionHeading eyebrow="Architecture" title="Seams, not plumbing." lede="LLM provider, file storage, email transport, billing, observability — every edge lives behind an interface. Swap Anthropic for OpenAI in config. Swap Stripe the day you need to." />
          <div className="mt-10 grid lg:grid-cols-3 gap-4">
            {[
              ['Boxes', 'Module-extensible', 'First-party and third-party modules register tools, routes, and event subscribers through the SDK. Reference impl: Project Management (43 files, no App\\ deps).'],
              ['Network', 'Vendor-neutral at the edges', 'Behind interfaces: LlmClientInterface (Anthropic, OpenAI), FileStorageInterface (S3, MinIO), BillingProviderInterface (Stripe), NotificationServiceInterface (SMTP).'],
              ['GitBranch', 'Extraction-ready', 'Core cross-service interfaces — webhook dispatch, notifications, agent runtime, file storage — ready to split out when scale demands it. No rewrite.'],
            ].map(([ic, t, d]) => <FeatureCard key={t} icon={ic} title={t}>{d}</FeatureCard>)}
          </div>
        </Container>
      </section>

      <section className="section">
        <Container>
          <div className="grid lg:grid-cols-12 gap-10 items-center">
            <div className="lg:col-span-5">
              <Eyebrow>Assistant</Eyebrow>
              <h2 className="m-headline mt-3">Two-phase routing. Zero misroutes.</h2>
              <p className="m-lede mt-4">LlmIntentResolver picks a capability pack. AgentRuntime picks the verb inside it. Slash-commands and page-context fast paths skip phase-1 entirely. Every action carries a stakes level — low, medium, or high — and the UI enforces it.</p>
              <Checklist items={[
                'Proactive banner: "14 inputs today — draft?"',
                'Preview-exit on medium-stakes tool calls (AwaitingApproval → Approve / Deny)',
                'Cancellation flag checked at each loop head (Redis-backed)',
                'SSE streams envelope_final — token streaming in Phase B',
              ]} />
            </div>
            <div className="lg:col-span-7"><AssistantMock /></div>
          </div>
        </Container>
      </section>

      <section className="section" style={{ background: 'var(--bg-muted)' }}>
        <Container>
          <div className="grid lg:grid-cols-12 gap-10 items-start">
            <div className="lg:col-span-5">
              <Eyebrow>Daily Logs</Eyebrow>
              <h2 className="m-headline mt-3">Capture → synthesis → finalization.</h2>
              <p className="m-lede mt-4">Field crews add inputs — typed notes, photos, a voice memo. A proactive banner appears the moment there's enough to draft. The assistant synthesises a structured log and waits for approval. Finalisation is one-way; inputs stay immutable, drafts are reversible.</p>
              <Checklist items={[
                'Inputs: text · photo_ref · voice_transcript — each timestamped, each attributable',
                'Vision auto-tags photos — you confirm or replace the tags',
                'Status lifecycle: no_draft → draft → finalized (irreversible in UI)',
                'Crews field parses "3 electricians, 2 plumbers" into role+count pills',
              ]} />
            </div>
            <div className="lg:col-span-7"><DailyLogMock /></div>
          </div>
        </Container>
      </section>

      <section className="section">
        <Container>
          <div className="grid lg:grid-cols-12 gap-10 items-start">
            <div className="lg:col-span-7"><PhotoGalleryMock /></div>
            <div className="lg:col-span-5">
              <Eyebrow>Photos</Eyebrow>
              <h2 className="m-headline mt-3">Every photo is a first-class record.</h2>
              <p className="m-lede mt-4">Upload from the field or the office. Vision auto-tags with captions and keywords — rebar, formwork, safety, PPE. Search by tag. Link photos into RFIs, daily logs, and tasks. Storage lives in your S3 bucket, not ours.</p>
              <Button to="modules" variant="ghost" iconEnd="ArrowRight" className="mt-4">Browse the modules</Button>
            </div>
          </div>
        </Container>
      </section>

      <CTABand />
    </>
  );
}
Object.assign(window, { ProductPage });