// Homepage components

const MODES = {
  solo: {
    key: 'solo',
    label: 'Solo',
    tagline: 'Individual · Local-first · Free',
    accent: 'var(--solo)',
    accentHex: '#58A6FF',
    headline: 'Track your AI-generated code. On your machine. Forever.',
    sub: 'A VS Code extension that silently correlates every AI insertion with the prompt that wrote it. No cloud. No account. No telemetry.',
    cta: { primary: 'Install for VS Code', secondary: 'Watch 2-min demo' },
    price: 'Free, forever',
    stats: [
      ['1-click', 'install from Marketplace'],
      ['100%', 'local encrypted storage'],
      ['0', 'bytes sent to our servers'],
    ],
  },
  team: {
    key: 'team',
    label: 'Team',
    tagline: '5–500 engineers · Cloud or self-hosted · From $99/mo',
    accent: 'var(--team)',
    accentHex: '#3FB950',
    headline: 'Govern every AI insertion across your team — in real time.',
    sub: 'Unified dashboard, risk heatmaps, Slack alerts, and a REST API. Ship AI-generated code with the oversight your auditors expect.',
    cta: { primary: 'Start 14-day trial', secondary: 'Tour the dashboard' },
    price: '$99–299 / mo',
    stats: [
      ['< 15 min', 'from signup to first signal'],
      ['14 days', 'free trial, no card'],
      ['92%', 'prompt-to-code correlation'],
    ],
  },
  enterprise: {
    key: 'enterprise',
    label: 'Enterprise',
    tagline: 'Self-hosted · Compliance-grade · Custom',
    accent: 'var(--ent)',
    accentHex: '#A371F7',
    headline: 'Compliance-grade provenance, inside your VPC.',
    sub: 'Self-hosted Docker or Kubernetes. Neo4j lineage graphs. SSO, RBAC, SOC2 & HIPAA alignment. Your code never leaves your network.',
    cta: { primary: 'Book a demo', secondary: 'Download security brief' },
    price: 'Custom',
    stats: [
      ['2–4 wks', 'typical implementation'],
      ['99.9%', 'SLA with 24/7 on-call'],
      ['SOC2', 'Type II roadmap'],
    ],
  },
};

// ---------- Hero with integrated mode selector ----------
function Hero({ config }) {
  const [mode, setMode] = useState('solo');
  const m = MODES[mode];

  return (
    <section className="hero reveal" style={{ position: 'relative', paddingTop: 80, paddingBottom: 96, borderTop: 'none', overflow: 'hidden' }}>
      {config.grid === 'on' && <div className="grid-bg" />}
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ '--accent': m.accent }}>
              <span className="dot" />
              AI CODE PROVENANCE · {m.label.toUpperCase()} MODE
            </div>
            <h1 style={{ marginTop: 22, marginBottom: 18 }}>
              {m.headline.split('.').slice(0, -1).join('.') + '.'}
              {m.headline.endsWith('.') ? '' : ''}
            </h1>
            <p className="lead" style={{ marginBottom: 28 }}>{m.sub}</p>

            {/* Mode selector inline */}
            <div style={{ display: 'flex', gap: 8, marginBottom: 28, flexWrap: 'wrap' }}>
              {Object.values(MODES).map(mm => (
                <ModePill key={mm.key} mode={mm.key === 'enterprise' ? 'enterprise' : mm.key}
                  active={mode === mm.key} onClick={() => setMode(mm.key)}>
                  {mm.label}
                </ModePill>
              ))}
            </div>

            <div className="row" style={{ gap: 12, flexWrap: 'wrap' }}>
              <a href={mode === 'solo' ? 'https://marketplace.visualstudio.com/items?itemName=karnatipraveen.lineagelens' : mode === 'team' ? 'team.html' : 'enterprise.html'} 
                 target={mode === 'solo' ? '_blank' : '_self'}
                 className="btn btn-lg" style={{
                background: m.accent, color: '#0B1020', fontWeight: 600, textDecoration: 'none', display: 'inline-flex', alignItems: 'center'
              }}>{m.cta.primary} →</a>
              <button className="btn btn-lg btn-ghost">{m.cta.secondary}</button>
            </div>

            <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24, maxWidth: 540 }}>
              {m.stats.map(([n, label]) => (
                <div key={label}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 22, fontWeight: 600, color: m.accent, letterSpacing: '-0.02em' }}>{n}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>{label}</div>
                </div>
              ))}
            </div>
          </div>

          <HeroVisual mode={mode} />
        </div>

        {/* Trust strip */}
        <div style={{
          marginTop: 72, paddingTop: 24, borderTop: '1px solid var(--border-muted)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 16,
        }}>
          <div className="mono dim" style={{ fontSize: 12, letterSpacing: '0.05em' }}>DETECTS AI CODE FROM</div>
          <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', fontSize: 14, color: 'var(--text-muted)' }}>
            <span>◆ Cursor</span>
            <span>◇ ChatGPT</span>
            <span>◈ Claude</span>
            <span>◉ Aider</span>
            <span>◎ Copilot</span>
            <span>✦ Local LLMs</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Hero visual: mode-specific product vignette ----------
function HeroVisual({ mode }) {
  if (mode === 'solo') return <SoloVisual />;
  if (mode === 'team') return <TeamVisual />;
  return <EnterpriseVisual />;
}

function SoloVisual() {
  const [hoverLineage, setHoverLineage] = useState(false);
  const [promptText, setPromptText] = useState('');
  const fullPrompt = '"write a function that charges a card using stripe..."';

  useEffect(() => {
    let i = 0;
    const typeWriter = setInterval(() => {
      setPromptText(fullPrompt.substring(0, i));
      i++;
      if (i > fullPrompt.length) clearInterval(typeWriter);
    }, 50);
    return () => clearInterval(typeWriter);
  }, []);

  return (
    <div className="code-window" style={{ boxShadow: '0 30px 80px rgba(0,0,0,0.5)' }}>
      <div className="code-header">
        <div className="code-dots"><span/><span/><span/></div>
        <span>payments.ts — LineageLens</span>
        <span style={{ marginLeft: 'auto', color: 'var(--solo)' }}>● local</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 220px' }}>
        <div className="code-body" style={{ borderRight: '1px solid var(--border-muted)' }}>
          <div><span className="dim">1</span>  <span className="tok-kw">async function</span> <span className="tok-fn">chargeCard</span>(<span className="tok-var">amount</span>) {'{'}</div>
          <div style={{ 
            background: hoverLineage ? 'rgba(88,166,255,0.15)' : 'rgba(88,166,255,0.05)', 
            borderLeft: hoverLineage ? '3px solid var(--solo)' : '2px solid color-mix(in oklab, var(--solo) 50%, transparent)', 
            paddingLeft: 8, margin: '0 -18px 0 -20px', paddingRight: 18,
            transition: 'all 0.3s ease'
          }}>
            <div><span className="dim">2</span>    <span className="tok-kw">const</span> <span className="tok-var">key</span> = <span className="tok-str">"sk_live_4f..."</span>;</div>
            <div><span className="dim">3</span>    <span className="tok-kw">const</span> <span className="tok-var">res</span> = <span className="tok-kw">await</span> <span className="tok-fn">fetch</span>(url, {'{'}</div>
            <div><span className="dim">4</span>      headers: {'{'} Authorization: key {'}'},</div>
            <div><span className="dim">5</span>      body: <span className="tok-fn">JSON</span>.stringify({'{'} amount {'}'})</div>
            <div><span className="dim">6</span>    {'}'});</div>
          </div>
          <div><span className="dim">7</span>    <span className="tok-kw">return</span> res.<span className="tok-fn">json</span>();</div>
          <div><span className="dim">8</span> {'}'}</div>
        </div>
        <div style={{ padding: 14, background: 'var(--bg-2)', fontFamily: 'var(--mono)', fontSize: 11 }}>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', marginBottom: 8, letterSpacing: '0.05em' }}>PROVENANCE</div>
          <div 
            onMouseEnter={() => setHoverLineage(true)}
            onMouseLeave={() => setHoverLineage(false)}
            style={{ 
              padding: 8, background: 'var(--bg-1)', borderRadius: 6, 
              border: hoverLineage ? '1px solid var(--solo)' : '1px solid var(--border-muted)', 
              marginBottom: 8, cursor: 'pointer', transition: 'all 0.3s ease',
              boxShadow: hoverLineage ? '0 0 12px rgba(88,166,255,0.15)' : 'none',
              transform: hoverLineage ? 'scale(1.02)' : 'scale(1)'
            }}
          >
            <div style={{ color: 'var(--solo)' }}>◆ Cursor · claude-sonnet</div>
            <div style={{ color: 'var(--text-muted)', marginTop: 4, fontSize: 10 }}>2 min ago · lines 2–6</div>
          </div>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', marginBottom: 6, letterSpacing: '0.05em' }}>RISK</div>
          <div style={{ padding: '6px 8px', background: 'rgba(248,81,73,0.12)', color: 'var(--red)', borderRadius: 5, fontSize: 11, marginBottom: 6, cursor: 'pointer', transition: 'all 0.2s ease' }} onMouseEnter={(e) => e.currentTarget.style.transform = 'translateX(4px)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'translateX(0)'}>
            ● HIGH · hardcoded secret
          </div>
          <div style={{ padding: '6px 8px', background: 'rgba(210,153,34,0.12)', color: 'var(--yellow)', borderRadius: 5, fontSize: 11, cursor: 'pointer', transition: 'all 0.2s ease' }} onMouseEnter={(e) => e.currentTarget.style.transform = 'translateX(4px)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'translateX(0)'}>
            ● MED · unvalidated input
          </div>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', margin: '10px 0 6px', letterSpacing: '0.05em' }}>PROMPT</div>
          <div style={{ color: 'var(--text-muted)', fontSize: 11, lineHeight: 1.5 }}>
            {promptText}<span style={{ display: 'inline-block', width: 6, height: 12, background: 'var(--solo)', marginLeft: 2, animation: 'blink 1s infinite' }} />
            <style>{`@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }`}</style>
          </div>
        </div>
      </div>
    </div>
  );
}

function TeamVisual() {
  const [hoverSquare, setHoverSquare] = useState(null);

  const heatmapRows = [
    { name: 'payments/', data: [0,0,0,1,1,2,2,3,0,0,0,1,1,2,3,0,0,1,0,0,1,2,3,0,0,0,1,1,2] },
    { name: 'auth/', data: [0,1,1,2,3,0,0,1,1,2,3,0,0,0,1,1,3,0,0,1,1,2,1,2,0,0,0,0,0] },
    { name: 'api/', data: [2,2,0,0,1,1,2,3,0,0,1,1,2,3,0,0,0,1,1,2,2,3,0,0,0,0,1,0,0] },
    { name: 'jobs/', data: [0,0,0,1,1,2,3,0,0,0,1,1,2,3,0,0,0,1,1,3,0,0,0,1,1,2,2,0,0] },
    { name: 'ui/', data: [1,1,2,2,0,0,0,1,1,2,3,0,0,1,1,2,3,0,0,0,1,1,2,2,3,0,0,0,0] },
    { name: 'lib/', data: [2,3,0,0,0,1,1,1,3,0,0,1,1,2,3,0,0,0,1,1,2,3,0,0,0,1,1,0,0] },
  ];
  const cMap = ['var(--bg-3)', 'var(--green)', 'var(--yellow)', 'var(--red)'];

  return (
    <div className="code-window" style={{ boxShadow: '0 30px 80px rgba(0,0,0,0.5)' }}>
      <div className="code-header" style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 16px', background: 'var(--bg-2)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div className="code-dots"><span/><span/><span/></div>
          <span style={{ color: 'var(--text)' }}>lineagelens.app / scaleup-inc</span>
        </div>
        <div style={{ color: 'var(--text-muted)' }}>
          <span style={{ color: 'var(--team)', marginRight: 6 }}>● live</span> updated 34s ago
        </div>
      </div>
      <div style={{ padding: 20, background: 'var(--bg-1)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 16 }}>
          <MetricTile label="AI insertions · 7d" value="1,284" delta="↑ 18% WoW" color="var(--team)" />
          <MetricTile label="Code % AI" value="37%" delta="↑ 3 pts" color="var(--team)" />
          <MetricTile label="High-risk open" value="6" delta="↓ 4 today" color="var(--red)" />
          <MetricTile label="Compliance score" value="94" delta="/ 100" color="var(--green)" />
        </div>
        
        <div className="card" style={{ padding: '16px 20px', background: 'var(--bg-2)', marginBottom: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16, fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--text-dim)', letterSpacing: '0.05em', textTransform: 'uppercase' }}>
            <div>RISK HEATMAP · BY FILE · LAST 30 DAYS</div>
            <div style={{ display: 'flex', gap: 10 }}>
              <span><span style={{color:'var(--red)'}}>■</span> high</span>
              <span><span style={{color:'var(--yellow)'}}>■</span> med</span>
              <span><span style={{color:'var(--text-dim)'}}>■</span> low</span>
            </div>
          </div>
          <div style={{ display: 'grid', gap: 8 }}>
            {heatmapRows.map((row, i) => (
              <div key={row.name} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ width: 80, fontSize: 12, fontFamily: 'var(--mono)', color: 'var(--text-muted)' }}>{row.name}</div>
                <div style={{ display: 'flex', gap: 4, flex: 1 }}>
                  {row.data.map((val, j) => (
                    <div 
                      key={j} 
                      onMouseEnter={() => setHoverSquare(`${i}-${j}`)}
                      onMouseLeave={() => setHoverSquare(null)}
                      style={{ 
                        width: '100%', height: 12, borderRadius: 2, 
                        background: cMap[val],
                        opacity: hoverSquare && hoverSquare !== `${i}-${j}` ? 0.4 : 1,
                        transform: hoverSquare === `${i}-${j}` ? 'scale(1.2)' : 'scale(1)',
                        transition: 'all 0.2s ease',
                        cursor: 'pointer'
                      }} 
                    />
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 16 }}>
          <div className="card" style={{ padding: '16px 20px', background: 'var(--bg-2)' }}>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--mono)', marginBottom: 16, letterSpacing: '0.05em' }}>AGENT MIX</div>
            <BarRow label="Cursor" pct={48} color="var(--team)" />
            <BarRow label="ChatGPT" pct={27} color="var(--solo)" />
            <BarRow label="Claude" pct={19} color="var(--ent)" />
            <BarRow label="Aider + others" pct={6} color="var(--text-muted)" />
          </div>
          <div className="card" style={{ padding: '16px 20px', background: 'var(--bg-2)' }}>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--mono)', marginBottom: 16, letterSpacing: '0.05em' }}>RECENT · HIGH RISK</div>
            {[
              ['payments.ts', 'sarah.m', 'hardcoded secret', 'var(--red)'],
              ['auth/login.py', 'alex.c', 'weak crypto', 'var(--yellow)'],
              ['api/user.ts', 'marcus.j', 'sql injection', 'var(--red)'],
              ['jobs/export.py', 'priya.r', 'shell exec', 'var(--red)'],
            ].map(([f, u, r, c]) => (
              <div key={f} style={{ display: 'grid', gridTemplateColumns: '120px 80px 1fr', gap: 10, fontSize: 12, padding: '8px 0', borderTop: '1px solid var(--border-muted)', fontFamily: 'var(--mono)', alignItems: 'center' }}>
                <span style={{ color: 'var(--text)', fontWeight: 500 }}>{f}</span>
                <span style={{ color: 'var(--text-muted)' }}>@{u}</span>
                <span style={{ color: c }}>● {r}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function MetricTile({ label, value, delta, color }) {
  const [hover, setHover] = useState(false);
  return (
    <div 
      className="card" 
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ 
        padding: '16px 20px', background: 'var(--bg-2)',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        transition: 'all 0.2s ease',
        boxShadow: hover ? '0 8px 24px rgba(0,0,0,0.2)' : 'none'
      }}
    >
      <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--mono)', letterSpacing: '0.05em' }}>{label}</div>
      <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 12, color: 'var(--text)' }}>{value}</div>
      <div style={{ fontSize: 12, color, marginTop: 8, fontFamily: 'var(--mono)' }}>{delta}</div>
    </div>
  );
}

function BarRow({ label, pct, color }) {
  const [hover, setHover] = useState(false);
  return (
    <div 
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ display: 'grid', gridTemplateColumns: '80px 1fr 40px', gap: 16, alignItems: 'center', marginBottom: 12, fontSize: 13, fontFamily: 'var(--mono)', transition: 'all 0.2s ease', opacity: hover ? 1 : 0.8 }}
    >
      <span style={{ color: 'var(--text-muted)' }}>{label}</span>
      <div style={{ height: 8, background: 'var(--bg-3)', borderRadius: 4, overflow: 'hidden' }}>
        <div style={{ width: `${pct}%`, height: '100%', background: color, borderRadius: 4, transition: 'width 1s ease-out' }} />
      </div>
      <span style={{ color: 'var(--text-muted)', textAlign: 'right' }}>{pct}%</span>
    </div>
  );
}

function EnterpriseVisual() {
  const [activeFlow, setActiveFlow] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setActiveFlow(prev => (prev + 1) % 3);
    }, 1500);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="code-window" style={{ boxShadow: '0 30px 80px rgba(0,0,0,0.5)', fontFamily: 'var(--mono)' }}>
      <div className="code-header" style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 16px', background: 'var(--bg-2)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div className="code-dots"><span/><span/><span/></div>
          <span style={{ color: 'var(--text)' }}>architecture · self-hosted in your VPC</span>
        </div>
        <div style={{ color: 'var(--ent)' }}>● zero egress</div>
      </div>
      <div style={{ padding: 40, background: 'var(--bg-1)', position: 'relative', height: 480 }}>
        
        {/* Customer VPC Box */}
        <div style={{ 
          position: 'absolute', top: 40, left: 40, right: 40, bottom: 60, 
          border: '1px dashed color-mix(in oklab, var(--ent) 40%, transparent)', 
          borderRadius: 12, padding: 24, zIndex: 0 
        }}>
          <div style={{ fontSize: 11, color: 'var(--ent)', letterSpacing: '0.05em', marginBottom: 20 }}>CUSTOMER VPC</div>
          <div style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '0.05em', marginBottom: 12 }}>ENGINEERS</div>
        </div>

        {/* Components Layer */}
        <div style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%' }}>
          {/* SVG Lines */}
          <svg style={{ position: 'absolute', top: -40, left: -40, width: 'calc(100% + 80px)', height: 'calc(100% + 80px)', pointerEvents: 'none' }}>
            <defs>
              <marker id="arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
                <path d="M0,0 L6,3 L0,6 Z" fill="var(--text-muted)" />
              </marker>
              <marker id="arrow-active" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
                <path d="M0,0 L6,3 L0,6 Z" fill="var(--ent)" />
              </marker>
            </defs>

            {/* Ext to Gateway */}
            <path d="M 220 160 L 330 200" stroke={activeFlow===0?"var(--ent)":"var(--border)"} strokeDasharray={activeFlow===0?"4 4":"2 4"} markerEnd={activeFlow===0?"url(#arrow-active)":"url(#arrow)"} />
            <path d="M 220 210 L 330 210" stroke={activeFlow===1?"var(--ent)":"var(--border)"} strokeDasharray={activeFlow===1?"4 4":"2 4"} markerEnd={activeFlow===1?"url(#arrow-active)":"url(#arrow)"} />
            <path d="M 220 260 L 330 220" stroke={activeFlow===2?"var(--ent)":"var(--border)"} strokeDasharray={activeFlow===2?"4 4":"2 4"} markerEnd={activeFlow===2?"url(#arrow-active)":"url(#arrow)"} />

            {/* Gateway to Backend */}
            <path d="M 460 210 L 530 180" stroke="var(--text-muted)" markerEnd="url(#arrow)" />

            {/* Backend to DBs */}
            <path d="M 580 270 L 580 320" stroke="var(--text-muted)" markerEnd="url(#arrow)" />
            <path d="M 680 270 L 680 320" stroke="var(--text-muted)" markerEnd="url(#arrow)" />

            {/* Backend/Postgres to SIEM */}
            <path d="M 530 350 L 260 380" stroke="var(--border)" strokeDasharray="4 4" markerEnd="url(#arrow)" />
          </svg>

          {/* HTML Nodes */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, position: 'absolute', top: 100, left: 20 }}>
            {[0, 1, 2].map(i => (
              <div key={i} style={{ 
                padding: '10px 16px', background: 'var(--bg-2)', border: '1px solid var(--border)', borderRadius: 6,
                display: 'flex', alignItems: 'center', gap: 8, fontSize: 13,
                boxShadow: activeFlow === i ? '0 0 12px color-mix(in oklab, var(--ent) 20%, transparent)' : 'none',
                borderColor: activeFlow === i ? 'var(--ent)' : 'var(--border)',
                transition: 'all 0.3s ease', cursor: 'pointer'
              }} onMouseEnter={() => setActiveFlow(i)}>
                <span style={{ color: 'var(--solo)' }}>●</span> vscode ext
              </div>
            ))}
          </div>

          <div style={{ 
            position: 'absolute', top: 130, left: 290, padding: '16px 24px', background: 'color-mix(in oklab, var(--ent) 8%, var(--bg-2))', 
            border: '1px solid color-mix(in oklab, var(--ent) 40%, transparent)', borderRadius: 8, textAlign: 'center',
            transition: 'all 0.3s ease', cursor: 'pointer'
          }} onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.05)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
            <div style={{ fontSize: 11, color: 'var(--ent)', marginBottom: 8, letterSpacing: '0.05em' }}>GATEWAY</div>
            <div style={{ fontSize: 14, color: 'var(--text)', fontWeight: 600 }}>TLS 1.3</div>
            <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 4 }}>OIDC · SAML</div>
          </div>

          <div style={{ 
            position: 'absolute', top: 90, left: 490, padding: '20px 24px', background: 'var(--bg-2)', 
            border: '1px solid var(--border)', borderRadius: 8, width: 200,
            transition: 'all 0.3s ease', cursor: 'pointer'
          }} onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.02)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', marginBottom: 16, letterSpacing: '0.05em' }}>BACKEND · K8S</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13, color: 'var(--text)' }}>
              <div>· api</div>
              <div>· correlator</div>
              <div>· risk engine</div>
              <div>· compliance</div>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 20, position: 'absolute', top: 280, left: 490 }}>
            <div style={{ padding: '16px 20px', background: 'var(--bg-2)', border: '1px solid var(--team)', borderRadius: 8, width: 90, transition: 'all 0.3s ease', cursor: 'pointer' }} onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-4px)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
              <div style={{ fontSize: 11, color: 'var(--team)', marginBottom: 8, letterSpacing: '0.05em' }}>POSTGRES</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>pgvector</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>AES-256</div>
            </div>
            <div style={{ padding: '16px 20px', background: 'var(--bg-2)', border: '1px solid var(--ent)', borderRadius: 8, width: 90, transition: 'all 0.3s ease', cursor: 'pointer' }} onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-4px)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
              <div style={{ fontSize: 11, color: 'var(--ent)', marginBottom: 8, letterSpacing: '0.05em' }}>NEO4J</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>lineage</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>graphs</div>
            </div>
          </div>

          <div style={{ 
            position: 'absolute', top: 320, left: 80, padding: '16px 24px', background: 'var(--bg-2)', 
            border: '1px solid var(--border)', borderRadius: 8, textAlign: 'center', transition: 'all 0.3s ease', cursor: 'pointer'
          }} onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.05)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', marginBottom: 8, letterSpacing: '0.05em' }}>SIEM</div>
            <div style={{ fontSize: 13, color: 'var(--text)' }}>splunk · DD</div>
          </div>

        </div>

        <div style={{ position: 'absolute', bottom: 20, left: 0, width: '100%', textAlign: 'center', fontSize: 11, color: 'var(--text-muted)', letterSpacing: '0.05em' }}>
          EVERY COMPONENT RUNS ON YOUR INFRASTRUCTURE. NO SAAS DEPENDENCY.
        </div>
      </div>
    </div>
  );
}

// ---------- Problem section ----------
function Problems() {
  const probs = [
    { k: '01', t: 'Security blind spot', d: 'LLMs cheerfully emit SQL injection, hardcoded secrets, weak crypto, and silent command exec. You ship what you can\'t see.' },
    { k: '02', t: 'Compliance gap', d: 'Auditors now ask: was this code AI-generated? Who approved it? No provenance trail, no evidence — you fail the audit.' },
    { k: '03', t: 'Tool sprawl', d: 'Your team uses Cursor, ChatGPT, Claude, Aider, Copilot. Five tools, zero unified signal, and no-one can answer "which AI wrote this?"' },
    { k: '04', t: 'Quality fog', d: 'AI adoption is up and to the right, but you can\'t correlate it to defects, review cycles, or incident root-cause.' },
  ];
  return (
    <section id="problem" className="reveal">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow" style={{ '--accent': 'var(--red)' }}><span className="dot" />THE PROBLEM</div>
          <h2 style={{ marginTop: 18 }}>You don't know what your AI wrote. Neither does anyone else.</h2>
          <p className="lead" style={{ marginTop: 12 }}>
            AI-generated code is already in your repo, your PRs, and your production. The question isn't whether — it's what, by whom, and with what risk.
          </p>
        </div>
        <div className="grid grid-4 reveal-stagger">
          {probs.map(p => (
            <div key={p.k} className="card">
              <div className="mono dim" style={{ fontSize: 11, letterSpacing: '0.06em' }}>{p.k}</div>
              <h4 style={{ marginTop: 10, marginBottom: 8 }}>{p.t}</h4>
              <p style={{ fontSize: 14 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- How it works ----------
function HowItWorks() {
  const [tab, setTab] = useState('solo');
  const flows = {
    solo: {
      accent: 'var(--solo)',
      steps: [
        ['DETECT', 'Extension watches for insertions of 4+ lines'],
        ['PROXY', 'Local HTTP proxy captures LLM prompt traffic'],
        ['CORRELATE', 'Match insertion to prompt within ±15 seconds'],
        ['SCORE', 'AST + regex analysis flags secrets, SQLi, weak crypto'],
        ['STORE', 'Encrypted local SQLite — never leaves your machine'],
      ],
    },
    team: {
      accent: 'var(--team)',
      steps: [
        ['DETECT', 'Each engineer\'s extension syncs to the team backend'],
        ['INDEX', 'Postgres + pgvector for semantic prompt search'],
        ['DASHBOARD', 'Real-time aggregate metrics update every 5 min'],
        ['ALERT', 'Slack + email on high-risk insertions'],
        ['API', 'REST endpoints for CI/CD gating and SIEM ingestion'],
      ],
    },
    enterprise: {
      accent: 'var(--ent)',
      steps: [
        ['SELF-HOST', 'Docker / K8s in your VPC — zero egress'],
        ['LINEAGE', 'Neo4j traces prompt → code → PR → deploy'],
        ['AUTH', 'SAML / OIDC SSO with custom RBAC scoping'],
        ['COMPLY', 'SOC2, HIPAA, ISO27001 report generation'],
        ['INTEGRATE', 'Jira, GitHub, GitLab, Jenkins, Splunk, any SIEM'],
      ],
    },
  };
  const f = flows[tab];
  return (
    <section id="how" className="reveal">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot" style={{ background: f.accent }} />HOW IT WORKS</div>
          <h2 style={{ marginTop: 18 }}>A local proxy, a code watcher, and a correlation engine.</h2>
          <p className="lead" style={{ marginTop: 12 }}>The pipeline is the same across all three modes. What changes is where the data lives and who can see it.</p>
        </div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
          {['solo', 'team', 'enterprise'].map(t => (
            <button key={t} onClick={() => setTab(t)}
              className={`mono`}
              style={{
                padding: '8px 16px', borderRadius: 6, fontSize: 13,
                border: '1px solid ' + (tab === t ? flows[t].accent : 'var(--border)'),
                background: tab === t ? 'color-mix(in oklab, ' + flows[t].accent + ' 14%, var(--bg-2))' : 'var(--bg-2)',
                color: tab === t ? flows[t].accent : 'var(--text-muted)',
                textTransform: 'uppercase', letterSpacing: '0.05em',
              }}>
              {t}
            </button>
          ))}
        </div>

        <div className="card" style={{ padding: 32, background: 'var(--bg-2)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, position: 'relative' }}>
            {f.steps.map((s, i) => (
              <div key={s[0]} style={{ padding: '0 16px', position: 'relative' }}>
                {i > 0 && (
                  <div style={{
                    position: 'absolute', left: 0, top: 16, width: 32, height: 1,
                    background: f.accent, opacity: 0.4, transform: 'translateX(-16px)',
                  }} />
                )}
                <div style={{
                  width: 32, height: 32, borderRadius: 8,
                  border: '1px solid ' + f.accent,
                  background: `color-mix(in oklab, ${f.accent} 12%, var(--bg-1))`,
                  color: f.accent, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 600, marginBottom: 14,
                }}>{i + 1}</div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: f.accent, marginBottom: 6 }}>{s[0]}</div>
                <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5 }}>{s[1]}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Mode deep-dive teaser ----------
function ModeDeepDive() {
  const modes = [
    {
      key: 'solo', label: 'Solo', color: 'var(--solo)', href: 'solo.html',
      for: 'For the individual developer',
      headline: 'Your code, your machine, your audit.',
      summary: 'A VS Code extension with local encrypted storage. Track every AI insertion offline, with zero egress.',
      price: 'Free',
    },
    {
      key: 'team', label: 'Team', color: 'var(--team)', href: 'team.html',
      for: 'For the engineering team',
      headline: 'Shared visibility. Live alerts.',
      summary: 'Real-time dashboard, risk heatmaps, Slack alerts, and a REST API. Ship AI code with the oversight auditors expect.',
      price: 'from $99/mo',
      popular: true,
    },
    {
      key: 'enterprise', label: 'Enterprise', color: 'var(--ent)', href: 'enterprise.html',
      for: 'For the regulated org',
      headline: 'Full control. Full lineage.',
      summary: 'Self-hosted in your VPC with Neo4j lineage graphs, SSO, and SOC2/HIPAA/ISO27001 alignment.',
      price: 'Custom',
    },
  ];
  return (
    <section id="modes" className="reveal">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow"><span className="dot" />THREE MODES · ONE PRODUCT</div>
          <h2 style={{ marginTop: 18 }}>Start free. Grow as your org does.</h2>
          <p className="lead" style={{ marginTop: 12 }}>
            Same detection engine across every mode. Upgrade paths preserve every byte of history.
          </p>
        </div>
        <div className="grid grid-3 reveal-stagger">
          {modes.map(m => (
            <a key={m.key} href={m.href} className="card" style={{
              padding: 28, textDecoration: 'none', position: 'relative',
              borderColor: m.popular ? `color-mix(in oklab, ${m.color} 40%, var(--border))` : 'var(--border-muted)',
              background: m.popular ? `linear-gradient(180deg, color-mix(in oklab, ${m.color} 8%, var(--bg-2)) 0%, var(--bg-2) 80%)` : 'var(--bg-2)',
            }}>
              {m.popular && (
                <div style={{
                  position: 'absolute', top: 14, right: 14, fontSize: 10,
                  fontFamily: 'var(--mono)', padding: '3px 8px',
                  background: m.color, color: 'var(--bg)', borderRadius: 4,
                  fontWeight: 600, letterSpacing: '0.05em',
                }}>MOST POPULAR</div>
              )}
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: m.color, marginBottom: 8 }}>
                ● {m.label.toUpperCase()}
              </div>
              <div style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: 14 }}>{m.for}</div>
              <h3 style={{ marginBottom: 14, fontSize: 22 }}>{m.headline}</h3>
              <p style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.55, marginBottom: 24 }}>{m.summary}</p>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                paddingTop: 18, borderTop: '1px solid var(--border-muted)', marginBottom: 18,
              }}>
                <div className="mono dim" style={{ fontSize: 10, letterSpacing: '0.05em' }}>PRICE</div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>{m.price}</div>
              </div>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                gap: 8, padding: '10px 14px', borderRadius: 6,
                background: `color-mix(in oklab, ${m.color} 14%, transparent)`,
                border: `1px solid color-mix(in oklab, ${m.color} 35%, transparent)`,
                color: m.color, fontSize: 13, fontWeight: 500,
              }}>
                Explore more — {m.label} page →
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  MODES, Hero, Problems, HowItWorks, ModeDeepDive,
  SoloVisual, TeamVisual, EnterpriseVisual,
  MetricTile, BarRow,
});
