/* Home page — hero with variants, trust bar, modules grid, agent workforce,
   assistant showcase, security band, pricing teaser, CTA. */

function HeroCenter({ copy }) {
  return (
    <section className="relative section pb-24">
      <div className="absolute inset-0 ticks ticks-mask opacity-40 pointer-events-none" />
      <Container className="relative text-center">
        <Badge tone="brand" className="mb-5"><Icon name="Sparkles" size={12} /> Early access · construction SaaS, built agent-native</Badge>
        <h1 className="m-display mx-auto max-w-4xl">{copy.headline}</h1>
        <p className="m-lede mt-6 mx-auto">{copy.lede}</p>
        <div className="mt-8 flex flex-wrap gap-3 justify-center">
          <Button to="contact" size="lg" icon="Sparkles">Request early access</Button>
          <Button to="product" variant="ghost" size="lg" iconEnd="ArrowRight">See the product</Button>
        </div>
        <div className="mt-12 max-w-4xl mx-auto"><CommandBarStandalone /></div>
        <div className="mt-16"><AssistantMock /></div>
      </Container>
    </section>
  );
}

function HeroSplit({ copy }) {
  return (
    <section className="relative section pb-20">
      <div className="absolute inset-0 ticks ticks-mask opacity-40 pointer-events-none" />
      <Container className="relative grid lg:grid-cols-12 gap-10 items-center">
        <div className="lg:col-span-5">
          <Badge tone="brand" className="mb-5"><Icon name="Sparkles" size={12} /> In active build · early access open</Badge>
          <h1 className="m-display">{copy.headline}</h1>
          <p className="m-lede mt-5">{copy.lede}</p>
          <div className="mt-7 flex flex-wrap gap-3">
            <Button to="contact" size="lg" icon="Sparkles">Request early access</Button>
            <Button to="product" variant="ghost" size="lg" iconEnd="ArrowRight">See the product</Button>
          </div>
          <ul className="mt-8 grid grid-cols-2 gap-x-6 gap-y-2 text-[13px]" style={{ color: 'var(--fg2)' }}>
            <li className="flex items-center gap-2"><Icon name="Check" size={12} /> Projects, logs, photos, RFIs</li>
            <li className="flex items-center gap-2"><Icon name="Check" size={12} /> Credit-metered AI workforce</li>
            <li className="flex items-center gap-2"><Icon name="Check" size={12} /> Bring your own S3 bucket</li>
            <li className="flex items-center gap-2"><Icon name="Check" size={12} /> OIDC SSO, audit log, RBAC</li>
          </ul>
        </div>
        <div className="lg:col-span-7"><AssistantMock /></div>
      </Container>
    </section>
  );
}

function HeroRight({ copy }) {
  return (
    <section className="relative section pb-20">
      <div className="absolute inset-0 ticks ticks-mask opacity-40 pointer-events-none" />
      <Container className="relative grid lg:grid-cols-12 gap-10 items-center">
        <div className="lg:col-span-7"><ProjectHomeMock /></div>
        <div className="lg:col-span-5">
          <Badge tone="brand" className="mb-5"><Icon name="Sparkles" size={12} /> Agent-native from day one</Badge>
          <h1 className="m-display">{copy.headline}</h1>
          <p className="m-lede mt-5">{copy.lede}</p>
          <div className="mt-7 flex flex-wrap gap-3">
            <Button to="contact" size="lg" icon="Sparkles">Request early access</Button>
            <Button to="workforce" variant="ghost" size="lg" iconEnd="ArrowRight">See the workforce</Button>
          </div>
        </div>
      </Container>
    </section>
  );
}

function LogosBar() {
  const names = ['Ridgefield GC', 'Moreno Builders', 'Cascade Subs', 'Pacific Forge', 'Ortega Arch.', 'Foundry Developers', 'NorthLight Const.', 'Harbor Partners'];
  return (
    <section className="border-y py-10" style={{ borderColor: 'var(--border)' }}>
      <Container>
        <div className="text-center sb-eyebrow mb-6" style={{ color: 'var(--fg2)' }}>Trusted by crews in the early-access program</div>
        <div className="overflow-hidden">
          <div className="marquee-track">
            {[...names, ...names].map((n, i) => (
              <div key={i} className="flex items-center gap-2 opacity-70 whitespace-nowrap">
                <div className="w-5 h-5 rounded" style={{ background: 'var(--bg-muted)' }} />
                <span className="text-[15px] font-semibold" style={{ letterSpacing: '-0.01em' }}>{n}</span>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

function ModulesGrid() {
  const modules = [
    { icon: 'FolderKanban', title: 'Project Management', body: 'Projects · tasks · milestones · attachments · activity. Nine AI tools; Decisions panel baked in.' },
    { icon: 'ClipboardList', title: 'Daily Logs', body: 'AI-draftable end-of-day reports. Draft previews before it saves. Inputs are immutable, drafts are reversible.' },
    { icon: 'Camera', title: 'Photos', body: 'Auto-tagged jobsite photos. Vision suggests tags with confidence — humans decide what it means.' },
    { icon: 'Flag', title: 'RFIs (next)', body: 'Capture → draft → send to counterparty. Scoped magic-link auth for external reviewers. Phase 1 designed.' },
    { icon: 'Bot', title: 'Assistant', body: 'One command bar across the app. Routes to tools automatically. Confirms before anything irreversible runs.' },
    { icon: 'Activity', title: 'Agent Workforce', body: 'Metering, credit ledger, budgets, trust layer. Ships with every tenant. Enforce or observe.' },
  ];
  return (
    <section className="section">
      <Container>
        <SectionHeading eyebrow="Modules" title="Every module ships with its own AI tools" lede="Each module is a package. It registers its tools, routes, and events through a stable SDK — first-party or third-party, same seam." />
        <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {modules.map(m => (
            <FeatureCard key={m.title} icon={m.icon} title={m.title}>{m.body}</FeatureCard>
          ))}
        </div>
        <div className="mt-10 text-center">
          <Button to="modules" variant="ghost" iconEnd="ArrowRight">Browse all modules</Button>
        </div>
      </Container>
    </section>
  );
}

function WorkforceBand() {
  return (
    <section className="section" style={{ background: 'var(--bg-muted)' }}>
      <Container>
        <div className="grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-5">
            <Eyebrow>Agent Workforce</Eyebrow>
            <h2 className="m-headline mt-3">A credit-metered workforce you can actually govern.</h2>
            <p className="m-lede mt-4">Every tool call is metered, priced, and debited atomically. Set per-tenant and per-user budgets. Enforce, or just observe. Itemised CSV invoices at month-end.</p>
            <Checklist items={[
              'Standard rate card — 20 credits per tool call + 10 per 1k tokens in/out',
              'Sub-budgets by user or by module',
              'Stripe-backed top-ups — Starter (10k) · Growth (50k) · Scale (250k)',
              'Trust layer v1: PII scrub · prompt-injection detection · toxicity tagging',
              'Alerts at 50 · 80 · 100 % of the monthly cap',
            ]} />
            <div className="mt-6 flex gap-3">
              <Button to="workforce" iconEnd="ArrowRight">How the workforce works</Button>
            </div>
          </div>
          <div className="lg:col-span-7"><CreditLedgerMock /></div>
        </div>
      </Container>
    </section>
  );
}

function AssistantShowcase() {
  return (
    <section className="section">
      <Container>
        <div className="grid lg:grid-cols-12 gap-10 items-start">
          <div className="lg:col-span-5">
            <Eyebrow>Assistant</Eyebrow>
            <h2 className="m-headline mt-3">One command bar. Every module.</h2>
            <p className="m-lede mt-4">The assistant is mounted globally. It picks the right capability pack from where you are, and the right verb inside it. Slash-commands and page context skip routing entirely.</p>
            <div className="mt-6 space-y-3">
              {[
                ['Low-stakes', 'Runs straight away. Queries, summaries, citations.'],
                ['Medium-stakes', 'Previews the change. You approve before it saves.'],
                ['High-stakes', 'Typed confirmation — spell it out, then it runs.'],
              ].map(([t, d]) => (
                <div key={t} className="flex gap-3 card p-4">
                  <div className="w-8 h-8 rounded-md grid place-items-center shrink-0" style={{ background: 'var(--brand-tint)', color: 'var(--brand)' }}>
                    <Icon name={t === 'Low-stakes' ? 'Zap' : t === 'Medium-stakes' ? 'Eye' : 'Lock'} size={14} />
                  </div>
                  <div>
                    <div className="text-[14px] font-semibold">{t}</div>
                    <div className="text-[13px] mt-0.5" style={{ color: 'var(--fg2)' }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="lg:col-span-7 space-y-4">
            <PhotoGalleryMock />
            <TrustLayerMock />
          </div>
        </div>
      </Container>
    </section>
  );
}

function SecurityBand() {
  const items = [
    ['Shield', 'Multi-tenant isolation', 'Row-level + path-prefix file separation. No cross-tenant leakage, 404 not 403.'],
    ['KeyRound', 'Auth built right', 'JWT + refresh rotation, refresh replay burns the family. OIDC SSO per tenant with break-glass audit.'],
    ['Lock', 'Secrets at rest', 'AES-256-GCM AEAD with versioned prefix. Nothing sensitive touches a log line.'],
    ['Database', 'Bring your own storage', 'Point SyncBuild at your own S3-compatible bucket. Verify-canary probe before activation.'],
    ['Activity', 'Full audit trail', '19 canonical actions, scrubbed, denormalised actor. Tenant-scoped, append-only.'],
    ['FileText', 'Compliance posture', 'Honest inventory — ISO 27001, SOC 2, GDPR, PIPEDA. What we have, with file paths. What we don\'t, with triggers.'],
  ];
  return (
    <section className="section">
      <Container>
        <SectionHeading eyebrow="Security · compliance" title="Built like infrastructure. Not hopes and prayers." lede="Every cross-cutting concern (auth, audit, plan-gating, module-gating, scopes) is a route-attribute the framework enforces — not something a controller forgot to check." />
        <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {items.map(it => <FeatureCard key={it[1]} icon={it[0]} title={it[1]}>{it[2]}</FeatureCard>)}
        </div>
        <div className="mt-10"><Button to="security" variant="ghost" iconEnd="ArrowRight">Security overview</Button></div>
      </Container>
    </section>
  );
}

function CTABand() {
  return (
    <section className="section">
      <Container>
        <div className="card p-10 md:p-14 relative overflow-hidden">
          <div className="absolute inset-0 ticks opacity-30" />
          <div className="relative max-w-2xl">
            <Eyebrow>Early access</Eyebrow>
            <h2 className="m-headline mt-3">Stop typing up daily logs at 9pm.</h2>
            <p className="m-lede mt-4">SyncBuild is in active build. We're onboarding GCs and subs one crew at a time so every workflow gets honest feedback. Tell us about your project.</p>
            <div className="mt-7 flex flex-wrap gap-3">
              <Button to="contact" size="lg" icon="Sparkles">Request early access</Button>
              <Button href="mailto:hello@syncbuild.co" variant="ghost" size="lg" icon="Mail">hello@syncbuild.co</Button>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function WorkflowTable() {
  const rows = [
    { w: 'Field photos', a: 'Looks at each shot, suggests tags, pulls EXIF dates', who: 'Super clicks Confirm on each tag', icon: 'Camera' },
    { w: 'Daily logs', a: 'Transcribes voice memos, drafts a structured log from the day\u2019s inputs', who: 'Super reviews + finalises', icon: 'ClipboardList' },
    { w: 'RFIs', a: 'Drafts the question, suggests reviewers, tracks responses', who: 'PM confirms before sending; architect answers via magic link \u2014 no login', icon: 'Flag' },
    { w: 'Decisions', a: 'Records "this was decided" across modules, anchored to the project', who: 'Human-authored; the platform only stores', icon: 'CheckSquare' },
    { w: 'Portfolio Q&A', a: 'Answers "what changed this week?" with links back to every source', who: 'You ask. The assistant answers \u2014 never acts without a preview', icon: 'MessageSquare' },
  ];
  return (
    <section className="section">
      <Container>
        <SectionHeading
          eyebrow="The five workflows"
          title="Five places AI does real work — with humans in charge of every decision."
          lede="Not a chat window bolted onto the side. Every workflow is AI-assisted; every outcome is human-owned. The split is explicit, auditable, and the same from photo tags to portfolio-wide questions."
        />
        <div className="mt-12 card p-0 overflow-hidden">
          <div className="hidden md:grid grid-cols-12 gap-0 px-6 py-4 border-b text-[11px] tracking-wider uppercase" style={{ borderColor: 'var(--border)', color: 'var(--fg2)', background: 'var(--bg-muted)', fontWeight: 600 }}>
            <div className="col-span-3">Workflow</div>
            <div className="col-span-5">What the assistant does</div>
            <div className="col-span-4">Who decides</div>
          </div>
          <ul className="divide-y-hairline">
            {rows.map(r => (
              <li key={r.w} className="px-6 py-5 grid md:grid-cols-12 gap-4 md:gap-0 items-start">
                <div className="md:col-span-3 flex items-center gap-3">
                  <div className="w-8 h-8 rounded-md grid place-items-center shrink-0" style={{ background: 'var(--brand-tint)', color: 'var(--brand)' }}>
                    <Icon name={r.icon} size={15} />
                  </div>
                  <div className="text-[14.5px] font-semibold">{r.w}</div>
                </div>
                <div className="md:col-span-5 text-[13.5px]" style={{ color: 'var(--fg2)' }}>{r.a}</div>
                <div className="md:col-span-4 text-[13.5px]" style={{ color: 'var(--fg1)' }}>{r.who}</div>
              </li>
            ))}
          </ul>
        </div>
      </Container>
    </section>
  );
}

function BackgroundAgentsBand() {
  return (
    <section className="section" style={{ background: 'var(--bg-muted)' }}>
      <Container>
        <div className="grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-5">
            <Eyebrow>Background agents <span style={{ color: 'var(--brand)', marginLeft: 8 }}>· in build</span></Eyebrow>
            <h2 className="m-headline mt-3">Scheduled read-only agents that work while you sleep.</h2>
            <p className="m-lede mt-4">Subscribe to a template; the platform runs it on a cadence. Output lands in your inbox, cited back to source, with a "why you got this" panel above every run. Read-only by design \u2014 enforced at the message bus, not just by prompt.</p>
            <Checklist items={[
              'Weekly project digest \u00b7 Daily at-risk scan \u00b7 RFI aging \u00b7 Safety photo digest \u00b7 Recent decisions',
              'Default cap: 2,500 credits / month. Enforced. Alerts at 50 / 80 / 100 %',
              'Severity-gated email \u2014 every run hits the inbox; email only if it matters',
              'Every run carries data window + sources + why-included \u2014 replayable, auditable',
            ]} />
            <div className="mt-6"><Button to="changelog" variant="ghost" iconEnd="ArrowRight">Read the phase plan</Button></div>
          </div>
          <div className="lg:col-span-7"><BackgroundInboxMock /></div>
        </div>
      </Container>
    </section>
  );
}

function ExternalFirstBand() {
  return (
    <section className="section">
      <Container>
        <div className="grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-7 order-2 lg:order-1"><MagicLinkMock /></div>
          <div className="lg:col-span-5 order-1 lg:order-2">
            <Eyebrow>External-first</Eyebrow>
            <h2 className="m-headline mt-3">The people who answer your RFIs don’t work for you. Our software knows that.</h2>
            <p className="m-lede mt-4">Architects, engineers, owners, inspectors — none of them will install your PM tool. Every cross-company workflow in SyncBuild runs on scoped magic links + email. They click, they answer, the thread stays on file. No signup, no account, no friction.</p>
            <Checklist items={[
              'Short-lived, single-use review tokens \u2014 scrubbed from access logs',
              'No login; the thread posts back to your tenant automatically',
              'State machine + webhooks on every reply \u2014 no lost messages',
              'Your tenant stays the system of record; counterparties stay unburdened',
            ]} />
          </div>
        </div>
      </Container>
    </section>
  );
}

function HomePage({ tweaks }) {
  const copyMap = {
    agent: {
      headline: 'Construction PM that acts like a capable assistant — not a filing cabinet.',
      lede: "Today's tools store your documents and log your events. SyncBuild does the coordination work that eats your afternoons — under explicit human supervision, with honest receipts for every AI action.",
    },
    builder: {
      headline: 'The construction platform, rebuilt for the AI era.',
      lede: "The workflows your crews already understand — with an assistant that drafts the logs, tags the photos, and writes the RFIs. You approve. You ship. Every credit shows up on an itemised invoice.",
    },
    outcome: {
      headline: 'Your architects, engineers, and owners don\u2019t work for you. Your software should know that.',
      lede: 'Every cross-company workflow in SyncBuild runs on magic links — no login, no installs. Photos tag themselves. Daily logs draft themselves. RFIs get answered by the architect in their inbox. You stay in control.',
    },
  };
  const copy = copyMap[tweaks.heroCopy] || copyMap.agent;
  const Hero = tweaks.heroLayout === 'centered' ? HeroCenter : tweaks.heroLayout === 'right' ? HeroRight : HeroSplit;
  return (
    <>
      <Hero copy={copy} />
      <LogosBar />
      <WorkflowTable />
      <ModulesGrid />
      <BackgroundAgentsBand />
      <ExternalFirstBand />
      <WorkforceBand />
      <AssistantShowcase />
      <SecurityBand />
      <CTABand />
    </>
  );
}

Object.assign(window, { HomePage });