// Solo deep-dive page

function SoloHero() {
  return (
    <section className="theme-solo" style={{ paddingTop: 80, paddingBottom: 72, borderTop: 'none', position: 'relative', overflow: 'hidden' }}>
      <SoloMotionBg />
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="eyebrow"><span className="dot" />SOLO MODE · FREE · LOCAL-FIRST</div>
            <h1 style={{ marginTop: 22, marginBottom: 18 }}>
              Your AI-generated code, audited on your own machine.
            </h1>
            <p className="lead" style={{ marginBottom: 28 }}>
              A VS Code extension and a local proxy. No account. No telemetry. No cloud. Everything encrypted in a SQLite file you own — and can delete with one command.
            </p>
            <div className="row" style={{ gap: 12, flexWrap: 'wrap' }}>
              <a href="https://marketplace.visualstudio.com/items?itemName=karnatipraveen.lineagelens" target="_blank" className="btn btn-lg" style={{ background: 'var(--solo)', color: '#0B1020', fontWeight: 600, textDecoration: 'none', display: 'inline-flex', alignItems: 'center' }}>Install for VS Code →</a>
              <button className="btn btn-lg btn-ghost">View on GitHub</button>
            </div>
            <div className="mono dim" style={{ marginTop: 18, fontSize: 12 }}>
              $ code --install-extension lineagelens.vscode
            </div>
          </div>
          <SoloVisual />
        </div>
      </div>
    </section>
  );
}

function SoloWhy() {
  const items = [
    { k: 'LOCAL-ONLY', t: 'Your code never leaves your laptop', d: 'Detection, correlation, scoring — all on-device. The only network call is the Marketplace download.' },
    { k: 'NO TELEMETRY', t: 'We do not phone home', d: 'No analytics, no crash reporting, no usage pings. The extension has zero outbound requests after install.' },
    { k: 'ZERO LOGIN', t: 'No account to create', d: 'Install the extension, open a file, start coding. Your machine is your identity.' },
    { k: 'UPGRADE-READY', t: 'One-click migration to Team', d: 'If you ever outgrow local, a single command exports your Solo history to a Team workspace without loss.' },
  ];
  return (
    <section className="theme-solo">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot" />WHY LOCAL-FIRST</div>
          <h2 style={{ marginTop: 18 }}>Privacy by architecture, not by policy.</h2>
        </div>
        <div className="grid grid-4">
          {items.map(i => (
            <div key={i.k} className="card">
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: 'var(--solo)' }}>● {i.k}</div>
              <h4 style={{ marginTop: 12, marginBottom: 8 }}>{i.t}</h4>
              <p style={{ fontSize: 14 }}>{i.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SoloFeatures() {
  const f = [
    ['01', 'AI agent detection', 'Identifies Cursor, ChatGPT, Claude, Aider, OpenRouter, and local LLMs by proxy signature and insertion heuristics.'],
    ['02', 'Prompt-to-code linking', 'Shows the exact prompt that generated each block of code, inline in the editor, with a clickable "Open in side panel" action.'],
    ['03', 'Risk scoring', 'Auto-flags hardcoded secrets, SQL injection patterns, shell exec, weak crypto, and unvalidated inputs. Severity color-coded in the gutter.'],
    ['04', 'AST analysis', 'Parses each insertion into its AST to understand function boundaries, dependencies, and call graphs — not just regex on text.'],
    ['05', 'Local full-text search', 'Query every insertion back to day one: by file, risk level, agent, date range, or prompt keyword. Lightning-fast, offline.'],
    ['06', 'Export anywhere', 'Dump findings as JSON, CSV, or Markdown for your own notes, audits, or to import into Team / Enterprise later.'],
  ];
  return (
    <section className="theme-solo">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot" />WHAT'S INCLUDED</div>
          <h2 style={{ marginTop: 18 }}>Six capabilities. Zero friction.</h2>
        </div>
        <div className="grid grid-3">
          {f.map(x => (
            <div key={x[0]} className="card" style={{ padding: 28 }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--solo)', letterSpacing: '0.06em' }}>{x[0]}</div>
              <h3 style={{ marginTop: 12, marginBottom: 10, fontSize: 18 }}>{x[1]}</h3>
              <p style={{ fontSize: 14 }}>{x[2]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SoloSetup() {
  const steps = [
    ['$ code --install-extension lineagelens.vscode', 'Install from the VS Code Marketplace. 1 click, 1 second, no restart.'],
    ['$ lineagelens proxy start', 'The extension auto-starts a local HTTP proxy on port 9443 the first time you open a file.'],
    ['# use your AI tool normally', 'Open Cursor / ChatGPT / Claude / Aider — the proxy captures traffic transparently. No config needed for most tools.'],
    ['$ lineagelens browse', 'Open the side panel. Every AI insertion has a badge. Click to see the prompt, risk score, and history.'],
  ];
  return (
    <section className="theme-solo">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot" />GETTING STARTED</div>
          <h2 style={{ marginTop: 18 }}>Sixty seconds from zero to tracked.</h2>
        </div>
        <div className="code-window" style={{ background: 'var(--bg-1)' }}>
          <div className="code-header">
            <div className="code-dots"><span/><span/><span/></div>
            <span>~ · zsh · install guide</span>
          </div>
          <div style={{ padding: 0 }}>
            {steps.map((s, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '60px 1.1fr 1fr', alignItems: 'center',
                padding: '22px 24px', borderTop: i ? '1px solid var(--border-muted)' : 'none',
              }}>
                <div className="mono" style={{ fontSize: 12, color: 'var(--solo)' }}>[{(i + 1).toString().padStart(2, '0')}]</div>
                <div className="mono" style={{ fontSize: 13, color: 'var(--text)' }}>{s[0]}</div>
                <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{s[1]}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SoloProxy() {
  return (
    <section className="theme-solo">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="eyebrow"><span className="dot" />UNDER THE HOOD</div>
            <h2 style={{ marginTop: 18, marginBottom: 16 }}>The proxy that makes it work.</h2>
            <p className="lead" style={{ marginBottom: 20 }}>
              A lightweight Node proxy sits on <span className="mono" style={{ color: 'var(--text)' }}>127.0.0.1:9443</span> and intercepts traffic to known LLM endpoints. It correlates each request with a recent code insertion by timestamp and AST similarity.
            </p>
            <ul style={{ listStyle: 'none', padding: 0 }}>
              {[
                'Intercepts api.openai.com, api.anthropic.com, api.cursor.sh, openrouter.ai, + custom',
                '±15 second correlation window, AST similarity > 0.7 threshold',
                'Encrypted SQLite (AES-256) in ~/.lineagelens/db',
                'Auto-rotates old captures after configurable retention (default 90 days)',
              ].map(x => (
                <li key={x} style={{ display: 'flex', gap: 12, padding: '8px 0', fontSize: 14, color: 'var(--text-muted)' }}>
                  <span style={{ color: 'var(--solo)' }}>→</span>
                  <span>{x}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="code-window">
            <div className="code-header">
              <div className="code-dots"><span/><span/><span/></div>
              <span>proxy.log · live</span>
              <span style={{ marginLeft: 'auto', color: 'var(--solo)' }}>● streaming</span>
            </div>
            <div className="code-body" style={{ fontSize: 12, lineHeight: 1.8 }}>
              <div><span className="tok-com">14:22:41</span> <span className="tok-num">POST</span> api.anthropic.com/v1/messages</div>
              <div><span className="tok-com">14:22:41</span>   ↳ model=<span className="tok-str">"claude-3.5-sonnet"</span>, tokens=<span className="tok-num">412</span></div>
              <div><span className="tok-com">14:22:44</span>   ↳ response captured, <span className="tok-num">1.2kb</span></div>
              <div style={{ color: 'var(--solo)' }}>14:22:45 ✓ correlated → payments.ts:L14–42 (ast=0.89)</div>
              <div><span className="tok-com">14:22:45</span>   ↳ risk: <span style={{ color: 'var(--red)' }}>HIGH</span> secret:stripe_key</div>
              <div style={{ marginTop: 8 }}><span className="tok-com">14:23:12</span> <span className="tok-num">POST</span> api.openai.com/v1/chat/completions</div>
              <div><span className="tok-com">14:23:12</span>   ↳ model=<span className="tok-str">"gpt-4o"</span>, tokens=<span className="tok-num">218</span></div>
              <div><span className="tok-com">14:23:14</span>   ↳ response captured, <span className="tok-num">0.6kb</span></div>
              <div style={{ color: 'var(--solo)' }}>14:23:15 ✓ correlated → utils/parse.ts:L88–104</div>
              <div><span className="tok-com">14:23:15</span>   ↳ risk: <span style={{ color: 'var(--green)' }}>LOW</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SoloHero, SoloWhy, SoloFeatures, SoloSetup, SoloProxy });