// Comparison table, features detail, pricing, testimonials, FAQ, CTA

function Comparison() {
  const rows = [
    ['INFRASTRUCTURE', true],
    ['Setup', 'VS Code extension only', 'Docker (2 containers)', 'Docker (4 containers)'],
    ['Users', '1', 'Multiple', 'Multiple'],
    ['Roles', '—', 'admin / member', 'admin / member'],
    ['Data store', 'Local JSON', 'PostgreSQL', 'PostgreSQL + Neo4j'],
    ['Ports used', '—', '8787, 8788', '8787, 8788, 7474, 7687'],
    ['FEATURES', true],
    ['Provenance recording', '✓', '✓', '✓'],
    ['AI explanation', '✓', '✓', '✓'],
    ['Keyword search', '—', '✓', '✓'],
    ['Semantic / vector search', '—', '—', '✓'],
    ['Insights dashboard', '—', '✓', '✓'],
    ['Team management', '—', '✓', '✓'],
    ['Graph lineage (Neo4j)', '—', '—', '✓'],
    ['SECURITY ARCHITECTURE', true],
    ['JWT access + refresh tokens (HS256)', '—', '✓', '✓'],
    ['Stateless token revocation (token_version)', '—', '✓', '✓'],
    ['PBKDF2-SHA256 passwords (390k iter)', '—', '✓', '✓'],
    ['Scope-based access control', '—', '✓', '✓'],
    ['Role-based access (admin / member)', '—', '✓', '✓'],
    ['Workspace isolation', '—', '✓', '✓'],
    ['HTTP sliding-window rate limiting', '—', '✓', '✓'],
    ['WebSocket rate limiting (connect + msg)', '—', '✓', '✓'],
    ['Body size enforcement (HTTP + WS)', '—', '✓', '✓'],
    ['Security response headers (7 headers)', '—', '✓', '✓'],
    ['CORS allowlist', '—', '✓', '✓'],
    ['Trusted host enforcement', '—', '✓', '✓'],
    ['Production health data hiding', '—', '✓', '✓'],
    ['Neo4j credentials isolation', '—', '—', '✓'],
  ];
  const cell = (v, col) => {
    const color = { 1: 'var(--solo)', 2: 'var(--team)', 3: 'var(--ent)' }[col];
    if (v === '✓') return <span style={{ color }}>✓</span>;
    if (v === '—') return <span style={{ color: 'var(--text-dim)' }}>—</span>;
    return <span style={{ color: 'var(--text-muted)', fontSize: 13 }}>{v}</span>;
  };
  return (
    <section id="compare" className="reveal">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot" />COMPARE</div>
          <h2 style={{ marginTop: 18 }}>Every capability, every mode.</h2>
        </div>
        <div className="card reveal-stagger" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
            padding: '18px 24px', borderBottom: '1px solid var(--border)',
            background: 'var(--bg-3)', fontFamily: 'var(--mono)', fontSize: 12,
            letterSpacing: '0.05em', textTransform: 'uppercase',
          }}>
            <div style={{ color: 'var(--text-muted)' }}>Feature</div>
            <div style={{ color: 'var(--solo)' }}>Solo</div>
            <div style={{ color: 'var(--team)' }}>Team</div>
            <div style={{ color: 'var(--ent)' }}>Enterprise</div>
          </div>
          {rows.map((r, i) => {
            if (r[1] === true) {
              return (
                <div key={i} style={{
                  padding: '16px 24px 10px', borderBottom: '1px solid var(--border-muted)',
                  fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.06em',
                  color: 'var(--text-dim)', background: 'var(--bg-1)',
                }}>— {r[0]}</div>
              );
            }
            return (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
                padding: '14px 24px', borderBottom: '1px solid var(--border-muted)',
                fontSize: 14, alignItems: 'center',
              }}>
                <div style={{ color: 'var(--text)' }}>{r[0]}</div>
                <div>{cell(r[1], 1)}</div>
                <div>{cell(r[2], 2)}</div>
                <div>{cell(r[3], 3)}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------- Pricing cards ----------
function Pricing() {
  const tiers = [
    {
      name: 'Solo', color: 'var(--solo)', price: '$0', unit: 'forever free',
      desc: 'For the individual developer auditing their own AI code.',
      features: [
        'VS Code extension, auto-detection',
        'Local encrypted storage (SQLite)',
        'Basic risk scoring (secrets, command exec)',
        'AST analysis + full-text history search',
        'Multi-LLM: Cursor, ChatGPT, Claude, Aider',
        'JSON / CSV local export',
        'Community support',
      ],
      cta: 'Contact to Buy Solo',
      note: 'Reach out to unlock Pro features',
      href: 'mailto:contact@lineagelens.com?subject=Buy%20Solo%20Pro',
    },
    {
      name: 'Team', color: 'var(--team)', price: '$99', unit: '/ month, starts', popular: true,
      desc: 'For the engineering team that needs shared visibility and alerts.',
      features: [
        'Everything in Solo',
        'Unlimited team members',
        'Managed cloud (AWS · EU/US/APAC)',
        'Real-time dashboard + risk heatmap',
        'Slack + email alerts',
        'REST API for CI/CD + SIEM',
        'Role-based access + audit logs',
        'Monthly compliance reports',
        'Email support · 24h SLA',
      ],
      cta: 'Contact to Buy Team',
      note: 'Reach out to purchase Team plan',
      href: 'mailto:contact@lineagelens.com?subject=Buy%20Team%20Plan',
    },
    {
      name: 'Enterprise', color: 'var(--ent)', price: 'Custom', unit: 'from $5k/mo',
      desc: 'For the regulated organization that needs full control and lineage.',
      features: [
        'Everything in Team',
        'Self-hosted Docker / Kubernetes',
        'Neo4j lineage graphs',
        'SSO · SAML · OIDC',
        'Advanced RBAC + data residency',
        'SOC2 / HIPAA / ISO27001 alignment',
        'SIEM + Jira + GitHub + custom webhooks',
        '24/7 on-call + dedicated SRE',
        '99.9% uptime SLA',
      ],
      cta: 'Contact to Buy Enterprise',
      note: 'Dedicated onboarding · 2–4 week implementation',
      href: 'mailto:contact@lineagelens.com?subject=Buy%20Enterprise%20Plan',
    },
  ];
  return (
    <section id="pricing" className="reveal">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow"><span className="dot" />PRICING</div>
          <h2 style={{ marginTop: 18 }}>Pricing that grows with you.</h2>
          <p className="lead" style={{ marginTop: 12 }}>Start free. Upgrade when your team needs visibility. Self-host when compliance demands it.</p>
        </div>
        <div className="grid grid-3 reveal-stagger">
          {tiers.map(t => (
            <div key={t.name} className="card" style={{
              padding: 28, position: 'relative',
              borderColor: t.popular ? `color-mix(in oklab, ${t.color} 45%, var(--border))` : 'var(--border-muted)',
              background: t.popular ? `linear-gradient(180deg, color-mix(in oklab, ${t.color} 8%, var(--bg-2)) 0%, var(--bg-2) 70%)` : 'var(--bg-2)',
            }}>
              {t.popular && (
                <div style={{
                  position: 'absolute', top: -11, left: 24, padding: '3px 10px',
                  background: t.color, color: 'var(--bg)', fontSize: 11,
                  fontFamily: 'var(--mono)', fontWeight: 600, borderRadius: 4,
                  letterSpacing: '0.05em',
                }}>MOST POPULAR</div>
              )}
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: t.color }}>● {t.name.toUpperCase()}</div>
              <div style={{ marginTop: 20, display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <div style={{ fontSize: 42, fontWeight: 600, letterSpacing: '-0.03em' }}>{t.price}</div>
                <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{t.unit}</div>
              </div>
              <p style={{ marginTop: 10, fontSize: 14, minHeight: 42 }}>{t.desc}</p>
              <button onClick={() => window.location.href = t.href} style={{
                width: '100%', marginTop: 18,
                padding: '11px 16px', borderRadius: 6, fontSize: 14, fontWeight: 500,
                background: t.color, color: 'var(--bg)', border: 'none', cursor: 'pointer',
              }}>{t.cta} →</button>
              <div className="mono dim" style={{ fontSize: 11, marginTop: 10, textAlign: 'center' }}>{t.note}</div>
              <ul style={{ listStyle: 'none', padding: 0, marginTop: 24, borderTop: '1px solid var(--border-muted)', paddingTop: 20 }}>
                {t.features.map(f => (
                  <li key={f} style={{ display: 'flex', gap: 10, padding: '6px 0', fontSize: 13, color: 'var(--text-muted)' }}>
                    <span style={{ color: t.color, marginTop: 3, fontSize: 10 }}>●</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Testimonials ----------
function Testimonials() {
  const t = [
    {
      mode: 'Solo', color: 'var(--solo)',
      quote: 'I used to wonder where my ChatGPT code came from. Now I know exactly which prompt generated each insertion — and I caught two hardcoded secrets before they hit main.',
      name: 'Secure Your Workflow', role: 'Upgrade to Solo Mode today',
      initials: 'UP',
    },
    {
      mode: 'Team', color: 'var(--team)',
      quote: 'Our team was using Cursor, ChatGPT, and Claude with zero oversight. LineageLens gave us a live dashboard overnight. Caught five risky patterns in the first week.',
      name: 'Protect Your Org', role: 'Unlock Team Features',
      initials: 'PRO',
    },
    {
      mode: 'Enterprise', color: 'var(--ent)',
      quote: 'As a regulated bank, we needed to prove AI code is auditable. The self-hosted Neo4j lineage and SSO made our last compliance review the shortest one in three years.',
      name: 'Ensure Compliance', role: 'Book an Enterprise demo',
      initials: 'ENT',
    },
  ];
  return (
    <section id="stories" className="reveal">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow"><span className="dot" />WHO USES IT</div>
          <h2 style={{ marginTop: 18 }}>Three modes. Three kinds of engineer.</h2>
        </div>
        <div className="grid grid-3 reveal-stagger">
          {t.map(x => (
            <div key={x.name} className="card" style={{ padding: 28, background: 'var(--bg-2)' }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: x.color, marginBottom: 16 }}>
                ● {x.mode.toUpperCase()} MODE
              </div>
              <p style={{ fontSize: 15, color: 'var(--text)', lineHeight: 1.55 }}>"{x.quote}"</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--border-muted)' }}>
                <div style={{
                  width: 36, height: 36, borderRadius: '50%',
                  background: `color-mix(in oklab, ${x.color} 18%, var(--bg-3))`,
                  color: x.color, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 600,
                  border: `1px solid color-mix(in oklab, ${x.color} 35%, transparent)`,
                }}>{x.initials}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{x.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{x.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 40, padding: '24px 32px', display: 'grid',
          gridTemplateColumns: 'repeat(5, 1fr)', gap: 24,
          border: '1px solid var(--border-muted)', borderRadius: 12, background: 'var(--bg-2)',
        }}>
          {[
            ['5,000+', 'developers'],
            ['100+', 'team deployments'],
            ['12', 'enterprise rollouts'],
            ['2.5M', 'lines tracked'],
            ['92%', 'correlation accuracy'],
          ].map(([n, l]) => (
            <div key={l} style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em', fontFamily: 'var(--mono)' }}>{n}</div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    ['How does LineageLens detect AI-generated code?', 'A local HTTP proxy intercepts LLM API traffic (OpenAI, Anthropic, OpenRouter, etc.) while a VS Code extension watches for insertions of 4+ lines. We correlate by timestamp (±15 s window) and AST similarity, achieving 92%+ accuracy on major LLMs.'],
    ['Which LLM tools are supported?', 'Any tool that uses HTTP/HTTPS for inference: ChatGPT, Claude, Cursor, Aider, OpenRouter, local Ollama/LM Studio, custom endpoints. GitHub Copilot inline is limited (opaque binary protocol); Copilot Chat works fine.'],
    ['Is my code ever sent to your servers?', 'Solo: no, never. Team: only if you choose managed cloud — self-hosted Team is available. Enterprise: always self-hosted in your VPC. We collect zero code content in any mode by default.'],
    ['Can I migrate between modes?', 'Yes, in either direction. Solo → Team is a one-click import that preserves every historical insertion. Team → Enterprise is a coordinated migration handled by our engineers.'],
    ['What about Copilot?', 'Copilot Chat is fully supported. Copilot inline (greyed-out completions) uses a proprietary encrypted protocol — we detect insertions but cannot capture the underlying prompt. We label these as "Copilot: inline, prompt unavailable."'],
    ['How long is Enterprise implementation?', 'Typical 2–4 weeks: week 1 discovery, week 2 infra & Postgres/Neo4j, week 3 SSO & RBAC, week 4 pilot + training. A dedicated onboarding engineer works with your team throughout.'],
    ['What about data residency?', 'Team managed cloud supports EU, US, and APAC regions. Enterprise runs entirely in your infrastructure — residency is whatever your infrastructure is.'],
    ['Are you SOC2 certified?', 'Team mode is aligned with SOC2 Type II controls; certification is on the 2026 roadmap. Enterprise mode architecture is SOC2, HIPAA, and ISO27001 aligned and customers have passed audits using it.'],
  ];
  return (
    <section id="faq" className="reveal">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot" />FAQ</div>
          <h2 style={{ marginTop: 18 }}>Questions people actually ask.</h2>
        </div>
        <div className="card reveal-stagger" style={{ padding: 0, overflow: 'hidden' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderTop: i ? '1px solid var(--border-muted)' : 'none' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', padding: '20px 28px', textAlign: 'left',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20,
                fontSize: 15, fontWeight: 500,
              }}>
                <span>{it[0]}</span>
                <span style={{
                  color: 'var(--text-muted)', fontFamily: 'var(--mono)',
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                  transition: 'transform 180ms ease',
                }}>+</span>
              </button>
              {open === i && (
                <div style={{ padding: '0 28px 24px', fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.6, maxWidth: 780 }}>
                  {it[1]}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- CTA ----------
function FinalCTA() {
  return (
    <section className="reveal" style={{ paddingBottom: 120 }}>
      <div className="container">
        <div className="card" style={{
          padding: '64px 56px', textAlign: 'center',
          background: `
            radial-gradient(circle at 20% 20%, rgba(88,166,255,0.12), transparent 50%),
            radial-gradient(circle at 80% 30%, rgba(63,185,80,0.12), transparent 50%),
            radial-gradient(circle at 50% 80%, rgba(163,113,247,0.12), transparent 50%),
            var(--bg-2)
          `,
          border: '1px solid var(--border)',
        }}>
          <div className="eyebrow" style={{ margin: '0 auto' }}><span className="dot" />GET STARTED</div>
          <h2 style={{ marginTop: 18, marginBottom: 14, fontSize: 44 }}>
            Your AI wrote it.<br />Now prove it.
          </h2>
          <p className="lead" style={{ margin: '0 auto 28px' }}>
            One proxy. One extension. Full lineage from prompt to production. Install free in under 60 seconds.
          </p>
          <div className="row" style={{ justifyContent: 'center', 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 }}>Install Solo — free →</a>
            <a href="team.html" className="btn btn-lg btn-ghost">Start Team trial</a>
            <a href="enterprise.html" className="btn btn-lg btn-ghost">Book Enterprise demo</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Security Highlights ----------
function SecurityHighlights() {
  const securityFeatures = [
    { title: 'Stateless Token Revocation', desc: 'No blacklists. Incremented token_version in DB instantly invalidates old tokens. Zero Redis dependency.' },
    { title: 'PBKDF2-SHA256 Hashing', desc: 'Exceeds OWASP 2024 standards with 390,000 iterations and random 16-byte salt per user. Constant-time compares.' },
    { title: 'Strict Access Control', desc: 'Role-based (admin/member) and explicit scope-based access verified on every API request. Total workspace isolation.' },
    { title: 'Multi-layer Rate Limiting', desc: 'Sliding-window HTTP (120 req/60s) + independent WebSocket connection and message limits per workspace.' },
    { title: 'Defense in Depth', desc: 'Strict CORS allowlists, Trusted Host enforcement, Body size limits (2MB), and 7x Security headers.' },
    { title: 'Zero Information Leak', desc: 'Production /health hides internal status. Unauthenticated WebSockets are proactively closed with code 4401.' },
  ];

  return (
    <section id="security" className="reveal" style={{ background: 'rgba(1,4,9,0.80)', backdropFilter: 'blur(0px)', borderTop: '1px solid var(--border-muted)', borderBottom: '1px solid var(--border-muted)' }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow" style={{ '--accent': 'var(--team)' }}><span className="dot" style={{ background: 'var(--team)' }}/>ENTERPRISE-GRADE SECURITY</div>
          <h2 style={{ marginTop: 18 }}>Built to pass your vendor security review.</h2>
          <p className="lead" style={{ marginTop: 12 }}>
            Whether you use our managed cloud (Team) or self-host (Enterprise), LineageLens implements defense-in-depth at every layer.
          </p>
        </div>
        <div className="grid grid-3 reveal-stagger">
          {securityFeatures.map(f => (
            <div key={f.title} className="card" style={{ padding: 24, background: 'var(--bg-2)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--team)' }} />
                <h4 style={{ margin: 0, fontSize: 15 }}>{f.title}</h4>
              </div>
              <p style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5, margin: 0 }}>{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Comparison, Pricing, Testimonials, FAQ, FinalCTA, SecurityHighlights });