// Phase 0 Labs, page content for each route.

const { useState } = React;

function HomePage({ go }) {
  return (
    <div>
      <div style={{ padding: '32px 32px 80px', position: 'relative', overflow: 'hidden' }}>
        <BlueprintGrid color="rgba(133,183,235,0.05)" size={40} />
        <div style={{
          position: 'absolute', top: -100, right: -100, width: 700, height: 700,
          background: `radial-gradient(circle, ${T.blueDeep}33 0%, transparent 60%)`,
          pointerEvents: 'none',
        }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 460px', gap: 56 }}>
          <div>
            <div style={{
              fontFamily: FONT.mono, fontSize: 12, letterSpacing: 1.5,
              color: T.teal, textTransform: 'uppercase', marginBottom: 28,
              display: 'inline-flex', alignItems: 'center', gap: 12,
              border: `1px solid ${T.border}`, padding: '6px 14px',
              background: 'rgba(93,202,165,0.05)',
            }}>
              <Dot color={T.teal} size={6} /> $ phase0 --status
            </div>
            <h1 style={{
              fontFamily: FONT.sans, fontSize: 88, fontWeight: 400,
              lineHeight: 1.0, letterSpacing: -2.5, color: T.textBright, margin: 0,
            }}>
              The phase before<br />
              <span style={{ color: T.blue }}>everything </span>
              <em style={{ color: T.teal, fontStyle: 'italic', fontWeight: 300 }}>else.</em>
            </h1>
            <div style={{
              marginTop: 32, fontFamily: FONT.sans, fontSize: 18,
              lineHeight: 1.65, color: T.dim, maxWidth: 580,
            }}>
              <span style={{ color: T.blue }}>We have been where you are.</span><br/>Phase 0 Labs is a team of proven entrepreneurs, equally adept at navigating startups
              and deep enterprise experience across teams, product, engineering, and leadership. We meet clients
              where they are; bringing the agentic and platform knowledge, governance, and scalable frameworks they need
              to transition confidently into AI-native and enabled systems and products.
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
              <button
                onClick={() => {
                  const el = document.getElementById('home-contact');
                  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }}
                style={{
                  background: T.blue, color: T.ink, border: 'none',
                  borderRadius: 6, padding: '14px 26px',
                  fontFamily: FONT.sans, fontSize: 15, fontWeight: 500,
                  cursor: 'pointer',
                }}>Contact</button>
              {/* platform page hidden for now
              <button onClick={() => go('platform')} style={{
                background: 'transparent', color: T.text,
                border: `1px solid ${T.border}`,
                padding: '14px 22px', fontFamily: FONT.mono, fontSize: 12,
                letterSpacing: 1.5, textTransform: 'uppercase', cursor: 'pointer',
              }}>read the platform spec ↓</button>
              */}
            </div>
            
          </div>
          <div>
            <CodeBlock title="~/phase0/system.json" live lines={[
              { tokens: [{ kind: 'punct', text: '{' }] },
              { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: '"teams"' }, { kind: 'punct', text: ': [' }] },
              { tokens: [{ kind: 'text', text: '    ' }, { kind: 'string', text: '"production"' }, { kind: 'punct', text: ', ' }, { kind: 'string', text: '"engineering"' }, { kind: 'punct', text: ', ' }, { kind: 'string', text: '"agentic"' }] },
              { tokens: [{ kind: 'text', text: '  ],' }] },
              { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: '"approach"' }, { kind: 'punct', text: ': ' }, { kind: 'string', text: '"agentic-solutions"' }, { kind: 'punct', text: ',' }] },
              { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: '"time_to_prod"' }, { kind: 'punct', text: ': ' }, { kind: 'string', text: '"post phase 0' }, { kind: 'punct', text: ',' }] },
              { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: '"compliance"' }, { kind: 'punct', text: ': [' }] },
              { tokens: [{ kind: 'text', text: '    ' }, { kind: 'string', text: '"ISO 42001"' }, { kind: 'punct', text: ', ' }, { kind: 'string', text: '"SOC 2"' }, { kind: 'punct', text: ', ' }, { kind: 'string', text: '"HIPAA"' }, { kind: 'punct', text: ', ' }, { kind: 'string', text: '"EU AI Act"' }] },
              { tokens: [{ kind: 'text', text: '  ],' }] },
              { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: '"vibe_coded"' }, { kind: 'punct', text: ': ' }, { kind: 'number', text: 'false' }, { kind: 'punct', text: ',' }] },
              { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: '"scalable"' }, { kind: 'punct', text: ': ' }, { kind: 'number', text: 'true' }, { kind: 'punct', text: ',' }] },
              { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: '"compliant"' }, { kind: 'punct', text: ': ' }, { kind: 'number', text: 'true' }, { kind: 'punct', text: ',' }] },
              { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: '"secure"' }, { kind: 'punct', text: ': ' }, { kind: 'number', text: 'true' }, { kind: 'punct', text: ',' }] },
              { tokens: [{ kind: 'punct', text: '}' }] },
            ]} />
          </div>
        </div>
      </div>

      <Section code="§ 01" label="What we do">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end', marginBottom: 40 }}>
          <h2 style={{ fontFamily: FONT.sans, fontSize: 48, fontWeight: 400, letterSpacing: -1, lineHeight: 1.1, color: T.text, margin: 0 }}>
            Three practices.<br />One Control Plane.
          </h2>
          <div style={{ fontFamily: FONT.sans, fontSize: 16, color: T.dim, lineHeight: 1.7 }}>
            We become or embed with your team to build AI-native and AI-enabled systems; bringing the pace of startups and the rigor of enterprise to ship products that are scalable and secure from day one.
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          <PillarCard num="01" sub="TEAM" color={T.blue} title="AI-Powered Teams"
            items={['Tech Founders, Leaders, Team Builders', 'Chat & Action Agents + Orchestration', 'Scale + Security', 'LLM, MCP, Tools', 'Training']} />
          <PillarCard num="02" sub="PRODUCTS & PLATFORMS" color={T.teal} title="AI Native & Enabled"
            items={['Concept ➡ Build ➡ Production', 'API + Integrations', 'Infrastructure, Logging, Auditing, Testing', 'E2E, Deployments, DevOps']} />
          <PillarCard num="03" sub="GOVERNANCE" color={T.purple} title="Governance & Compliance"
            items={['Agentic Governance + Compliance', 'Human In the Loop, Immutable Attestation', 'ISO-42001, SOC 2, HIPAA, EU AI Act', 'Policy, Risk Assessment']} />
        </div>
      </Section>

      <Section code="§ 02" label="Live system diagram">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'start', marginBottom: 40 }}>
          <h2 style={{ fontFamily: FONT.sans, fontSize: 48, fontWeight: 400, letterSpacing: -1, lineHeight: 1.1, color: T.text, margin: 0 }}>
          The AI Blueprint <br/> we bring to every project.
          </h2>
          <div style={{ fontFamily: FONT.sans, fontSize: 16, color: T.dim, lineHeight: 1.7 }}>
            Six nodes around a single core: Teams, Planning, Scale, Agentic, Observe, Governance. It's how we think about every AI system we ship - adapted to your stack, your data residency, your business.
          </div>
        </div>
        <SystemDiagram />
      </Section>

      <Section code="§ 03" label="Eval & observability">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end', marginBottom: 40 }}>
          <h2 style={{ fontFamily: FONT.sans, fontSize: 48, fontWeight: 400, letterSpacing: -1, lineHeight: 1.1, color: T.text, margin: 0 }}>
            Auditable by Design.
          </h2>
          <div style={{ fontFamily: FONT.sans, fontSize: 16, color: T.dim, lineHeight: 1.7 }}>
            Every run, every prompt, every tool call, traced, evaluated, signed. Paired with Human in the Loop capabilities so you are comfortable with what 
            agents are doing and producing.
          </div>
        </div>
        <EvalDashboard />
      </Section>

      <Section code="§ 04" label="Manifesto" padding="120px 32px">
        <div style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', opacity: 0.06, pointerEvents: 'none' }}>
            <BrandMark size={460} theme="dark" animated />
          </div>
          <div style={{ position: 'relative', maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
            <div style={{ fontFamily: FONT.sans, fontSize: 38, fontWeight: 400, lineHeight: 1.4, color: T.text, letterSpacing: -0.3, textWrap: 'pretty' }}>
              AI without architecture is a demo. AI without governance is a liability. We exist for the founders and operators who refuse to choose between
              <span style={{ color: T.teal }}> speed </span>and the
              <span style={{ color: T.blue }}> rigor </span>their customers, regulators, and boards require.
            </div>
            <div style={{ fontFamily: FONT.mono, fontSize: 12, letterSpacing: 1.5, color: T.dim, textTransform: 'uppercase', marginTop: 36 }}>
             , Phase 0 is where the choice gets made.
            </div>
          </div>
        </div>
      </Section>

      <div id="home-contact">
        <Section code="§ 05" label="Get in touch">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, alignItems: 'start' }}>
            <div>
              <h2 style={{ fontFamily: FONT.sans, fontSize: 48, fontWeight: 400, letterSpacing: -1, lineHeight: 1.1, color: T.text, margin: 0 }}>
                Let's talk about <br />
                <span style={{ color: T.blue }}>where you are.</span>
              </h2>
              <div style={{ marginTop: 24, fontFamily: FONT.sans, fontSize: 17, lineHeight: 1.65, color: T.dim, maxWidth: 460 }}>
                Most engagements begin with a conversation at no cost. Send us a note and we'll get back to you within one business day.
              </div>
              <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 14 }}>
                {[
                  ['Email', 'contact@phase0labs.com'],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 12, borderBottom: `1px solid ${T.border}` }}>
                    <span style={{ fontFamily: FONT.sans, fontSize: 13, color: T.dim }}>{k}</span>
                    <a style={{ fontFamily: FONT.sans, fontSize: 15, color: T.text }}>{v}</a>
                  </div>
                ))}
              </div>
            </div>
            <ContactForm />
          </div>
        </Section>
      </div>
    </div>
  );
}

function PlatformPage({ go }) {
  return (
    <div>
      <PageHeader code="§ /platform" section="The control plane" title="An AI-native platform, built like infrastructure." intro="Phase 0 ships a control plane for AI products: gateway, evals, tracing, policy, attestation. Adapted to your stack and your regulators, not a hosted SaaS, but a pattern you own." />
      <Section code="§ 01" label="System diagram">
        <SystemDiagram />
      </Section>
      <Section code="§ 02" label="Capabilities">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {[
            { c: T.blue, t: 'LLM Gateway', d: 'Unified routing across providers. Fallbacks, retries, caching. Per-tenant rate limits and budgets.' },
            { c: T.teal, t: 'Eval Harness', d: 'Golden datasets, regression tracking, judge-of-judges, cost-vs-quality dashboards.' },
            { c: T.purple, t: 'Attestation Log', d: 'Cryptographically signed run records, every prompt, tool call, output. Auditable forever.' },
            { c: T.blue, t: 'Tracing & Observability', d: 'OpenTelemetry-native. p50/p99, token cost, error budgets, drift alarms.' },
            { c: T.teal, t: 'Policy Engine', d: 'PII redaction, model allowlists, region locks, tool sandboxing, enforced at the gateway.' },
            { c: T.purple, t: 'Multi-Tenant Isolation', d: 'Row-level, key-level, region-level. Built for regulated workloads from day zero.' },
          ].map(c => (
            <div key={c.t} style={{
              background: T.panel, border: `1px solid ${T.border}`, padding: 24,
              display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Dot color={c.c} size={8} />
                <h3 style={{ fontFamily: FONT.sans, fontSize: 18, fontWeight: 500, color: T.text, margin: 0, letterSpacing: -0.2 }}>{c.t}</h3>
              </div>
              <div style={{ fontFamily: FONT.sans, fontSize: 14, color: T.dim, lineHeight: 1.6 }}>{c.d}</div>
            </div>
          ))}
        </div>
      </Section>
      <Section code="§ 03" label="Eval pipeline · sample">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <CodeBlock title="evals/agent.eval.ts" lines={[
            { tokens: [{ kind: 'keyword', text: 'import' }, { kind: 'text', text: ' { ' }, { kind: 'fn', text: 'defineEval' }, { kind: 'text', text: ', ' }, { kind: 'fn', text: 'judge' }, { kind: 'text', text: " } " }, { kind: 'keyword', text: 'from' }, { kind: 'string', text: " '@phase0/evals'" }] },
            { kind: 'comment', text: '' },
            { tokens: [{ kind: 'keyword', text: 'export default' }, { kind: 'text', text: ' ' }, { kind: 'fn', text: 'defineEval' }, { kind: 'punct', text: '({' }] },
            { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: 'name' }, { kind: 'punct', text: ': ' }, { kind: 'string', text: "'triage_v3'" }, { kind: 'punct', text: ',' }] },
            { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: 'dataset' }, { kind: 'punct', text: ': ' }, { kind: 'string', text: "'./golden/triage.jsonl'" }, { kind: 'punct', text: ',' }] },
            { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: 'judges' }, { kind: 'punct', text: ': [' }] },
            { tokens: [{ kind: 'text', text: '    ' }, { kind: 'fn', text: 'judge' }, { kind: 'punct', text: '.' }, { kind: 'fn', text: 'factuality' }, { kind: 'punct', text: '(),' }] },
            { tokens: [{ kind: 'text', text: '    ' }, { kind: 'fn', text: 'judge' }, { kind: 'punct', text: '.' }, { kind: 'fn', text: 'safety' }, { kind: 'punct', text: '({ ' }, { kind: 'key', text: 'policy' }, { kind: 'punct', text: ': ' }, { kind: 'string', text: "'hipaa-strict'" }, { kind: 'punct', text: ' }),' }] },
            { tokens: [{ kind: 'text', text: '    ' }, { kind: 'fn', text: 'judge' }, { kind: 'punct', text: '.' }, { kind: 'fn', text: 'regression' }, { kind: 'punct', text: '({ ' }, { kind: 'key', text: 'baseline' }, { kind: 'punct', text: ': ' }, { kind: 'string', text: "'v2'" }, { kind: 'punct', text: ' }),' }] },
            { tokens: [{ kind: 'text', text: '  ],' }] },
            { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: 'thresholds' }, { kind: 'punct', text: ': { ' }, { kind: 'key', text: 'pass' }, { kind: 'punct', text: ': ' }, { kind: 'number', text: '0.92' }, { kind: 'punct', text: ' },' }] },
            { tokens: [{ kind: 'punct', text: '})' }] },
          ]} />
          <EvalDashboard />
        </div>
      </Section>
      <Section code="§ 04" label="Gateway config">
        <CodeBlock title="phase0.yaml" lines={[
          { tokens: [{ kind: 'key', text: 'gateway' }, { kind: 'punct', text: ':' }] },
          { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: 'route' }, { kind: 'punct', text: ':' }] },
          { tokens: [{ kind: 'text', text: '    - ' }, { kind: 'key', text: 'match' }, { kind: 'punct', text: ': ' }, { kind: 'string', text: 'tier == "enterprise"' }] },
          { tokens: [{ kind: 'text', text: '      ' }, { kind: 'key', text: 'model' }, { kind: 'punct', text: ': ' }, { kind: 'string', text: 'claude-opus-5' }, { kind: 'text', text: '   ' }, { kind: 'punct', text: '# strict eval gate' }] },
          { tokens: [{ kind: 'text', text: '      ' }, { kind: 'key', text: 'fallback' }, { kind: 'punct', text: ': [' }, { kind: 'string', text: 'claude-sonnet-5' }, { kind: 'punct', text: ', ' }, { kind: 'string', text: 'gpt-5' }, { kind: 'punct', text: ']' }] },
          { tokens: [{ kind: 'text', text: '    - ' }, { kind: 'key', text: 'match' }, { kind: 'punct', text: ': ' }, { kind: 'string', text: 'region == "eu"' }] },
          { tokens: [{ kind: 'text', text: '      ' }, { kind: 'key', text: 'pin' }, { kind: 'punct', text: ': ' }, { kind: 'string', text: 'eu-west-1' }] },
          { tokens: [{ kind: 'key', text: 'policy' }, { kind: 'punct', text: ':' }] },
          { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: 'pii' }, { kind: 'punct', text: ': ' }, { kind: 'string', text: 'redact' }] },
          { tokens: [{ kind: 'text', text: '  ' }, { kind: 'key', text: 'attest' }, { kind: 'punct', text: ': ' }, { kind: 'string', text: 'all' }, { kind: 'text', text: '  ' }, { kind: 'punct', text: '# every run signed and logged' }] },
        ]} />
      </Section>
    </div>
  );
}

function GovernancePage({ go }) {
  const frameworks = [
    { c: T.teal, k: 'SOC 2 Type II', s: 'Audited', d: 'Trust services criteria. Annual audit cycle, continuous evidence collection.' },
    { c: T.teal, k: 'HIPAA', s: 'Audited', d: 'BAAs in place. PHI redaction at gateway, audit log retention.' },
    { c: T.blue, k: 'EU AI Act', s: 'Ready', d: 'High-risk system documentation, human-oversight controls, conformity assessment package.' },
    { c: T.purple, k: 'ISO 27001', s: 'In progress', d: 'Stage 2 audit Q4 2026. ISMS established, controls operating.' },
    { c: T.blue, k: 'NIST AI RMF', s: 'Aligned', d: 'Govern / map / measure / manage, embedded into our delivery process.' },
    { c: T.purple, k: 'Model Risk', s: 'Framework', d: 'SR 11-7-aligned model risk inventory, validation, and monitoring.' },
  ];
  return (
    <div>
      <PageHeader code="§ /governance" section="Compliance & risk" title="Audit-grade by construction. Not by audit." intro="Governance is not a checkbox. It is a property of how the system was built. We design it in on day one, and bring our own frameworks, attestation pipelines, and policy engine." />
      <Section code="§ 01" label="Frameworks">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {frameworks.map(f => (
            <div key={f.k} style={{ background: T.panel, border: `1px solid ${T.border}`, padding: 24, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Dot color={f.c} size={8} />
                  <h3 style={{ fontFamily: FONT.sans, fontSize: 18, fontWeight: 500, color: T.text, margin: 0 }}>{f.k}</h3>
                </div>
                <span style={{ fontFamily: FONT.mono, fontSize: 10.5, color: f.c, border: `1px solid ${f.c}40`, padding: '3px 8px', letterSpacing: 1, textTransform: 'uppercase' }}>● {f.s}</span>
              </div>
              <div style={{ fontFamily: FONT.sans, fontSize: 14, color: T.dim, lineHeight: 1.6 }}>{f.d}</div>
            </div>
          ))}
        </div>
      </Section>
      <Section code="§ 02" label="Policy enforced at the gateway">
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24 }}>
          <CodeBlock title="policy/governance.rego" lines={[
            { tokens: [{ kind: 'keyword', text: 'package' }, { kind: 'text', text: ' phase0.governance' }] },
            { kind: 'comment', text: '' },
            { tokens: [{ kind: 'fn', text: 'allow' }, { kind: 'text', text: ' ' }, { kind: 'punct', text: '{' }] },
            { tokens: [{ kind: 'text', text: '  ' }, { kind: 'fn', text: 'input' }, { kind: 'punct', text: '.' }, { kind: 'key', text: 'tenant' }, { kind: 'punct', text: '.region == ' }, { kind: 'fn', text: 'input' }, { kind: 'punct', text: '.' }, { kind: 'key', text: 'request' }, { kind: 'punct', text: '.region' }] },
            { tokens: [{ kind: 'text', text: '  ' }, { kind: 'fn', text: 'has_attestation' }, { kind: 'punct', text: '(' }, { kind: 'fn', text: 'input' }, { kind: 'punct', text: '.' }, { kind: 'key', text: 'request' }, { kind: 'punct', text: ')' }] },
            { tokens: [{ kind: 'text', text: '  ' }, { kind: 'keyword', text: 'not' }, { kind: 'text', text: ' ' }, { kind: 'fn', text: 'pii_unredacted' }, { kind: 'punct', text: '(' }, { kind: 'fn', text: 'input' }, { kind: 'punct', text: '.' }, { kind: 'key', text: 'request' }, { kind: 'punct', text: '.body)' }] },
            { tokens: [{ kind: 'text', text: '  ' }, { kind: 'fn', text: 'within_budget' }, { kind: 'punct', text: '(' }, { kind: 'fn', text: 'input' }, { kind: 'punct', text: '.' }, { kind: 'key', text: 'tenant' }, { kind: 'punct', text: ')' }] },
            { tokens: [{ kind: 'punct', text: '}' }] },
          ]} />
          <div style={{ background: T.panel, border: `1px solid ${T.border}`, padding: 24, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: 1.2, color: T.dim, textTransform: 'uppercase' }}>// what this gives you</div>
            {[
              'Every request evaluated against policy before it reaches a model',
              'Every response signed and written to an immutable attestation log',
              'Every model swap, prompt change, and tool addition is a versioned event',
              'Every audit question answered with a query, not a fire drill',
            ].map(b => (
              <div key={b} style={{ fontFamily: FONT.sans, fontSize: 14, color: T.text, lineHeight: 1.6, paddingLeft: 18, position: 'relative' }}>
                <span style={{ position: 'absolute', left: 0, top: 7, width: 6, height: 6, border: `1px solid ${T.teal}` }} />
                {b}
              </div>
            ))}
          </div>
        </div>
      </Section>
    </div>
  );
}

function AboutPage({ go }) {
  return (
    <div>
      <PageHeader code="§ /studio" section="Who we are" title="A senior team, calibrated for phase zero." intro="Phase 0 Labs is a small studio of staff- and principal-level product, design, and engineering operators. We have shipped at scale before. We do it again, on purpose, every six weeks." />
      <Section code="§ 01" label="Operating principles">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {[
            ['Senior by default', 'Staff and principal operators on every engagement. No ramp-up tax. No junior bench warming.'],
            ['Architecture first', 'Decisions made in week one outlive the product. We make them carefully, then move fast.'],
            ['Governance native', 'Auditability, attestation, policy enforcement, designed in, not retrofitted.'],
            ['Velocity, measured', 'Six weeks to production. Not a slogan. A measurement we hit on every engagement.'],
            ['No vibe coding', 'Real types, real tests, real observability. Demos die quietly. Systems persist.'],
            ['Document well enough to leave', 'Every engagement ends with the option to operate it ourselves or hand it off cleanly.'],
          ].map(([k, v]) => (
            <div key={k} style={{ background: T.panel, border: `1px solid ${T.border}`, padding: 28 }}>
              <h3 style={{ fontFamily: FONT.sans, fontSize: 22, fontWeight: 500, color: T.text, margin: 0, letterSpacing: -0.3 }}>{k}</h3>
              <div style={{ marginTop: 12, fontFamily: FONT.sans, fontSize: 14, color: T.dim, lineHeight: 1.7 }}>{v}</div>
            </div>
          ))}
        </div>
      </Section>
      <Section code="§ 02" label="The team">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {[
            ['Founders', '02', 'Ex-Stripe, ex-Anthropic'],
            ['Staff+ engineers', '08', 'Distributed systems, ML infra'],
            ['Senior product', '04', 'Regulated industries'],
            ['Trusted partners', '06', 'Security, legal, design'],
          ].map(([k, n, sub]) => (
            <div key={k} style={{ background: T.panel, border: `1px solid ${T.border}`, padding: 24 }}>
              <div style={{ fontFamily: FONT.mono, fontSize: 10.5, letterSpacing: 1.2, color: T.dim, textTransform: 'uppercase' }}>{k}</div>
              <div style={{ fontFamily: FONT.sans, fontSize: 44, fontWeight: 500, color: T.text, letterSpacing: -1, marginTop: 8 }}>{n}</div>
              <div style={{ fontFamily: FONT.sans, fontSize: 13, color: T.dim, marginTop: 4 }}>{sub}</div>
            </div>
          ))}
        </div>
      </Section>
      <Section code="§ 03" label="Where we work">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            ['Boston', 'HQ', 'In-person Tuesdays + Thursdays'],
            ['New York', 'Studio', 'Client engagements & partner office'],
            ['Remote', 'Distributed', 'EU, LATAM. Async-default.'],
          ].map(([k, t, d]) => (
            <div key={k} style={{ background: T.panel, border: `1px solid ${T.border}`, padding: 28 }}>
              <div style={{ fontFamily: FONT.mono, fontSize: 10.5, letterSpacing: 1.2, color: T.teal, textTransform: 'uppercase' }}>{t}</div>
              <h3 style={{ fontFamily: FONT.sans, fontSize: 28, fontWeight: 500, color: T.text, margin: '8px 0 12px', letterSpacing: -0.4 }}>{k}</h3>
              <div style={{ fontFamily: FONT.sans, fontSize: 14, color: T.dim, lineHeight: 1.6 }}>{d}</div>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
}

function ContactPage({ go }) {
  return (
    <div>
      <PageHeader code="§ /contact" section="Begin at phase zero" title="File a brief. We will read it within one business day." intro="Most engagements begin with a 90-minute architecture review at no cost. We use it to determine whether we are the right team for what you are building." />
      <Section code="§ 01" label="Open a session">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <ContactForm />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ background: T.panel, border: `1px solid ${T.border}`, padding: 28 }}>
              <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: 1.2, color: T.dim, textTransform: 'uppercase', marginBottom: 16 }}>// direct contacts</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {[
                  ['EMAIL', 'contact@phase0labs.com'],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 12, borderBottom: `1px solid ${T.border}` }}>
                    <span style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: 1.2, color: T.dim }}>{k}</span>
                    <a style={{ fontFamily: FONT.sans, fontSize: 15, color: T.text, cursor: 'pointer' }}>{v}</a>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ background: T.panel, border: `1px solid ${T.border}`, padding: 28 }}>
              <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: 1.2, color: T.dim, textTransform: 'uppercase', marginBottom: 12 }}>// what to expect</div>
              <div style={{ fontFamily: FONT.mono, fontSize: 13, color: T.text, lineHeight: 1.9 }}>
                <div><span style={{ color: T.teal }}>T+0</span>, you submit a brief</div>
                <div><span style={{ color: T.teal }}>T+1d</span>, we reply or decline</div>
                <div><span style={{ color: T.teal }}>T+1w</span>, 90-min architecture review</div>
                <div><span style={{ color: T.teal }}>T+2w</span>, signed scope or referral</div>
              </div>
            </div>
          </div>
        </div>
      </Section>
    </div>
  );
}

function ContactForm() {
  const [vals, setVals] = useState({ name: '', company: '', stage: '', email: '', message: '', website: '' });
  const [status, setStatus] = useState('idle'); // idle | sending | sent | error
  const [error, setError] = useState('');
  const set = (k) => (e) => setVals({ ...vals, [k]: e.target.value });
  const fields = [
    ['name', 'Name', 'Jane Doe'],
    ['company', 'Company', 'Acme Inc'],
    ['stage', 'Stage', 'Series A, 30 engineers'],
    ['email', 'Email', 'jane@acme.com'],
  ];
  const inputStyle = {
    width: '100%', background: T.ink, border: `1px solid ${T.border}`,
    borderRadius: 6, padding: '12px 14px', color: T.text,
    fontFamily: FONT.sans, fontSize: 15, outline: 'none',
    transition: 'border-color 120ms',
  };
  const labelStyle = {
    fontFamily: FONT.sans, fontSize: 13, fontWeight: 500,
    color: T.dim, marginBottom: 6, display: 'block',
  };

  const submit = async () => {
    setError('');
    if (!vals.name.trim() || !vals.email.trim() || !vals.message.trim()) {
      setError('Please fill in name, email, and message.');
      return;
    }
    setStatus('sending');
    try {
      const apiBase = window.PHASE0_API_URL || '';
      const res = await fetch(`${apiBase}/api/contact`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(vals),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setStatus('error');
        setError(data.error || 'Something went wrong. Please try again or email contact@phase0labs.com.');
        return;
      }
      setStatus('sent');
    } catch (e) {
      setStatus('error');
      setError('Could not reach the server. Please try again or email contact@phase0labs.com.');
    }
  };

  const sending = status === 'sending';
  const sent = status === 'sent';
  const btnLabel = sent ? 'Thanks, we’ll be in touch.' : sending ? 'Sending…' : 'Send message';

  return (
    <div style={{ background: T.panel, border: `1px solid ${T.border}`, borderRadius: 10, padding: 32 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
        {fields.map(([k, label, ph]) => (
          <div key={k}>
            <label style={labelStyle}>{label}</label>
            <input value={vals[k]} onChange={set(k)} placeholder={ph} style={inputStyle} disabled={sending || sent} />
          </div>
        ))}
      </div>
      <div style={{ marginTop: 18 }}>
        <label style={labelStyle}>How can we help?</label>
        <textarea
          value={vals.message}
          onChange={set('message')}
          placeholder="Tell us a bit about what you're building and where you are today."
          style={{ ...inputStyle, minHeight: 130, resize: 'vertical', lineHeight: 1.5 }}
          disabled={sending || sent}
        />
      </div>
      {/* Honeypot — hidden from humans, bots fill it. */}
      <div style={{ position: 'absolute', left: '-10000px', width: 1, height: 1, overflow: 'hidden' }} aria-hidden="true">
        <label>Website
          <input type="text" tabIndex={-1} autoComplete="off" value={vals.website} onChange={set('website')} />
        </label>
      </div>
      {error && (
        <div style={{ marginTop: 16, fontFamily: FONT.sans, fontSize: 14, color: T.red }}>
          {error}
        </div>
      )}
      <button
        onClick={submit}
        disabled={sending || sent}
        style={{
          marginTop: 22, background: sent ? T.teal : T.blue, color: T.ink, border: 'none',
          borderRadius: 6, padding: '13px 28px', fontFamily: FONT.sans, fontSize: 15,
          fontWeight: 500, cursor: sending || sent ? 'default' : 'pointer',
          opacity: sending ? 0.7 : 1,
        }}>
        {btnLabel}
      </button>
    </div>
  );
}

window.HomePage = HomePage;
window.PlatformPage = PlatformPage;
window.GovernancePage = GovernancePage;
window.AboutPage = AboutPage;
window.ContactPage = ContactPage;
