/* Terracheck Marketing Landing Page
   Vanilla React + Babel — no build step.
   All components (Btn, Chip, Panel, Metric, Ind, LayerRow, Logo, Input, ThemeToggle)
   come from components.jsx via window globals.
*/

const { useState, useEffect, useRef } = React;

/* ─── color constants (hex for alpha math; CSS vars for plain references) ─── */
const TEAL   = '#14b8a6';
const GREEN  = '#10b981';
const AMBER  = '#eab308';
const BLUE   = '#3b82f6';
const PURPLE = '#a78bfa';

/* Animation text colors — CSS vars work as style.color strings */
const _t  = 'var(--tx)';
const _t3 = 'var(--tx-3)';
const _tl = 'var(--teal)';
const _gn = 'var(--layer-unit)';
const _am = 'var(--layer-sec)';
const _bl = 'var(--layer-integ)';

/* ─── FadeIn ─────────────────────────────────────────────────────────────── */
function FadeIn({ children, delay = 0 }) {
  const [visible, setVisible] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setVisible(true); },
      { threshold: 0.05 }
    );
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref} style={{
      opacity: visible ? 1 : 0,
      transform: visible ? 'none' : 'translateY(14px)',
      transition: `opacity 600ms ${delay}ms ease-out, transform 600ms ${delay}ms ease-out`,
    }}>
      {children}
    </div>
  );
}

/* ─── WorkflowAnimation ──────────────────────────────────────────────────── */
function mkL(at, icon, ic, segs) {
  return { at, type: 'item', item: { kind: 'line', icon, ic, segs } };
}
function mkD(at, label) {
  return { at, type: 'item', item: { kind: 'div', label } };
}
function mkLR(at, layer, count, duration) {
  return { at, type: 'item', item: { kind: 'layer', layer, status: 'pass', count, duration } };
}
function mkDt(at, dots) {
  return { at, type: 'dots', dots };
}

const ANIM_EVENTS = [
  mkD(0,    '⬡  detect'),
  mkL(300,  '▸', _t3, [{ t: 'polling jfrog registry...', c: _t3 }]),
  mkL(1400, '◆', _tl, [{ t: 'new version detected: ', c: _tl }, { t: 'aks-cluster v3.2.0', c: _t }]),

  mkD(2000, '⬡  analyze'),
  mkL(2300, '▸', _t3, [{ t: 'analyzing module complexity...', c: _t3 }]),
  mkL(3100, '◆', _am, [{ t: 'complexity score: ', c: _t }, { t: '67/100', c: _am }, { t: '  (medium)', c: _t3 }]),
  mkL(3700, '◆', _bl, [{ t: 'ai strategy: ', c: _t }, { t: 'claude sonnet 4.6', c: _bl }]),

  mkD(4500, '⬡  generate'),
  mkL(4800, '▸', _t3, [{ t: 'generating test suite...', c: _t3 }]),
  mkL(5300, '◆', _gn, [{ t: 'unit_test.go', c: _gn },        { t: '          847 lines', c: _t3 }]),
  mkL(5700, '◆', _gn, [{ t: 'security_test.go', c: _gn },    { t: '      312 lines', c: _t3 }]),
  mkL(6100, '◆', _gn, [{ t: 'integration_test.go', c: _gn }, { t: '   534 lines', c: _t3 }]),
  mkL(6500, '◆', _gn, [{ t: 'e2e_test.go', c: _gn },         { t: '          289 lines', c: _t3 }]),
  mkL(6900, '✓', _tl, [{ t: '4 test files generated', c: _tl }]),

  mkD(7600, '⬡  validate'),
  mkL(7900, '▸', _t3, [{ t: 'validating syntax...', c: _t3 }]),
  mkL(8700, '✓', _gn, [{ t: 'terraform validate', c: _t }, { t: '  ✓', c: _gn }]),
  mkL(9200, '✓', _gn, [{ t: 'go build ./...', c: _t },     { t: '  ✓', c: _gn }]),

  mkD(9900,  '⬡  fast tests  (k8s)'),
  mkDt(9900, { unit: 'active' }),
  mkL(10100, '▸', _t3, [{ t: 'dispatching k8s jobs...', c: _t3 }]),
  mkLR(10900, 'unit', '18/18', '4.2s'),
  mkDt(10900, { unit: 'done', sec: 'active' }),
  mkLR(12000, 'sec', '31/31', '12.8s'),
  mkDt(12000, { sec: 'done' }),
  mkL(12500, '◆', _tl, [{ t: 'fast tests passed ✓', c: _tl }]),

  mkD(13200, '⬡  gate'),
  mkL(13500, '▸', _t3, [{ t: 'checking cloud gate...', c: _t3 }]),
  mkL(14100, '✓', _gn, [{ t: 'fast tests', c: _gn },        { t: '  passed ✓', c: _t3 }]),
  mkL(14600, '✓', _gn, [{ t: 'azure credentials', c: _gn }, { t: '  configured ✓', c: _t3 }]),
  mkL(15100, '◆', _tl, [{ t: 'gate passed — scheduling cloud tests', c: _tl }]),

  mkD(15800, '⬡  cloud tests  (azure)'),
  mkDt(15800, { integ: 'active' }),
  mkL(16100, '▸', _t3, [{ t: 'running cloud tests in azure...', c: _t3 }]),
  mkLR(17200, 'integ', '6/6', '8m 32s'),
  mkDt(17200, { integ: 'done', e2e: 'active' }),
  mkLR(18400, 'e2e', '3/3', '22m 10s'),
  mkDt(18400, { e2e: 'done' }),

  mkD(19100, '⬡  promote'),
  mkL(19500, '★', _tl, [{ t: 'aks-cluster v3.2.0', c: _tl }, { t: '  → PROMOTED', c: _gn }]),
  mkL(20000, '★', _gn, [{ t: 'badge: validated ✓', c: _gn }]),
  mkL(20400, '★', _gn, [{ t: 'release repo: updated', c: _gn }]),
  { at: 20400, type: 'done' },
];

const ANIM_LOOP_MS = 24400;

function dsToInd(ds) {
  if (ds === 'done') return 'pass';
  if (ds === 'active') return 'run';
  return 'pend';
}

function WorkflowAnimation() {
  const [items, setItems] = useState([]);
  const [dots, setDots] = useState({ unit: 'idle', sec: 'idle', integ: 'idle', e2e: 'idle' });
  const [isDone, setIsDone] = useState(false);
  const termRef = useRef(null);

  useEffect(() => {
    let alive = true;
    const ids = [];

    function run() {
      if (!alive) return;
      setItems([]);
      setDots({ unit: 'idle', sec: 'idle', integ: 'idle', e2e: 'idle' });
      setIsDone(false);

      for (const evt of ANIM_EVENTS) {
        ids.push(setTimeout(() => {
          if (!alive) return;
          if (evt.type === 'item')      setItems(p => [...p, evt.item]);
          else if (evt.type === 'dots') setDots(p => ({ ...p, ...evt.dots }));
          else if (evt.type === 'done') setIsDone(true);
        }, evt.at));
      }

      ids.push(setTimeout(run, ANIM_LOOP_MS));
    }

    run();
    return () => { alive = false; ids.forEach(clearTimeout); };
  }, []);

  useEffect(() => {
    const el = termRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [items]);

  return (
    <div style={{
      width: '100%', maxWidth: 500,
      borderRadius: 'var(--r-lg)',
      overflow: 'hidden',
      border: '1px solid var(--line)',
      background: 'var(--bg-well)',
      boxShadow: '0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03)',
      fontFamily: 'var(--fn-mono)',
    }}>
      {/* title bar */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '10px 14px', background: 'var(--bg-panel)',
        borderBottom: '1px solid var(--line)',
      }}>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#ff5f57' }} />
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#febc2e' }} />
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#28c840' }} />
          <span style={{ marginLeft: 8, fontSize: 11, color: 'var(--tx-3)', letterSpacing: '0.02em' }}>
            terracheck — live workflow
          </span>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <Ind status={dsToInd(dots.unit)}  size={7} label="UNIT"  />
          <Ind status={dsToInd(dots.sec)}   size={7} label="SEC"   />
          <Ind status={dsToInd(dots.integ)} size={7} label="INTEG" />
          <Ind status={dsToInd(dots.e2e)}   size={7} label="E2E"   />
        </div>
      </div>

      {/* terminal body */}
      <div ref={termRef} className="term-scroll" style={{
        height: 300, padding: '12px 14px',
        fontSize: 12, lineHeight: 1.65, overflowY: 'auto',
      }}>
        {items.map((item, i) => {
          if (item.kind === 'div') {
            return (
              <div key={i} style={{
                color: 'var(--tx-4)', fontSize: 10,
                letterSpacing: '0.08em', textTransform: 'uppercase',
                padding: '8px 0 4px',
                borderTop: i > 0 ? '1px solid var(--line)' : undefined,
                marginTop: i > 0 ? 4 : 0,
              }}>{item.label}</div>
            );
          }
          if (item.kind === 'layer') {
            return (
              <div key={i} style={{ marginTop: 2, marginBottom: 2 }}>
                <LayerRow
                  layer={item.layer}
                  status={item.status}
                  count={item.count}
                  duration={item.duration}
                />
              </div>
            );
          }
          return (
            <div key={i} style={{ display: 'flex', gap: 6, alignItems: 'baseline' }}>
              <span style={{ color: item.ic, flexShrink: 0, width: 12 }}>{item.icon}</span>
              <span>
                {item.segs.map((seg, j) => (
                  <span key={j} style={{ color: seg.c }}>{seg.t}</span>
                ))}
              </span>
            </div>
          );
        })}
        {items.length > 0 && !isDone && (
          <div style={{ display: 'flex', gap: 6, alignItems: 'baseline', marginTop: 2 }}>
            <span style={{ color: 'var(--tx-4)', width: 12 }}>▸</span>
            <span className="cursor" style={{ fontSize: 12 }} />
          </div>
        )}
      </div>

      {/* status bar */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '8px 14px', background: 'var(--bg-panel)',
        borderTop: '1px solid var(--line)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Ind status={isDone ? 'pass' : 'run'} size={7} />
          <span style={{ fontSize: 11, color: 'var(--tx-3)' }}>aks-cluster v3.2.0</span>
        </div>
        <span style={{
          fontSize: 10, fontFamily: 'var(--fn-mono)',
          color: isDone ? 'var(--layer-unit)' : 'var(--tx-4)',
          letterSpacing: '0.06em',
        }}>
          {isDone ? 'PROMOTED ✓' : 'testing...'}
        </span>
      </div>
    </div>
  );
}

/* ─── WaitlistForm ───────────────────────────────────────────────────────── */
const PLANS = [
  { id: 'free',    label: 'free · $0'      },
  { id: 'starter', label: 'starter · $49/mo' },
  { id: 'pro',     label: 'pro · $199/mo'  },
  { id: 'team',    label: 'team · $499/mo' },
];

function WaitlistForm() {
  const [plan, setPlan]     = useState('pro');
  const [email, setEmail]   = useState('');
  const [status, setStatus] = useState('idle');
  const [error, setError]   = useState('');

  async function submit() {
    if (!email.includes('@')) {
      setError('enter a valid email address');
      return;
    }
    setError('');
    setStatus('loading');
    try {
      const { error } = await window.__sb
        .from('waitlist')
        .insert({ email: email.trim(), plan });
      if (error) throw error;
      setStatus('done');
    } catch (err) {
      console.error(err);
      setStatus('idle');
      setError('something went wrong. please try again.');
    }
  }

  if (status === 'done') {
    return (
      <div style={{ padding: '1.25rem 0', display: 'flex', alignItems: 'center', gap: 10 }}>
        <Chip color={GREEN} dot>you're on the list — we'll be in touch</Chip>
      </div>
    );
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.875rem' }}>
      <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
        {PLANS.map(p => (
          <Btn
            key={p.id}
            variant={plan === p.id ? 'primary' : 'outline'}
            size="sm"
            onClick={() => setPlan(p.id)}
          >
            {p.label}
          </Btn>
        ))}
      </div>
      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-start', flexWrap: 'wrap' }}>
        <div style={{ flex: 1, minWidth: 220 }}>
          <Input
            value={email}
            onChange={setEmail}
            placeholder="you@company.com"
            error={error}
            icon="@"
          />
        </div>
        <Btn variant="primary" loading={status === 'loading'} onClick={submit}>
          join waitlist
        </Btn>
      </div>
    </div>
  );
}

/* ─── Nav ────────────────────────────────────────────────────────────────── */
function Nav() {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  function scrollTo(id) {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  }

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(10,13,18,0.9)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'var(--line)' : 'transparent'}`,
      transition: 'background 300ms, border-color 300ms',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 56,
      }}>
        <Logo size={24} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'nowrap' }}>
          {[
            ['features',     'features'],
            ['pricing',      'pricing'],
            ['integrations', 'integrations'],
            ['roadmap',      'roadmap'],
          ].map(([id, label]) => (
            <Btn key={id} variant="ghost" size="sm" onClick={() => scrollTo(id)}>
              {label}
            </Btn>
          ))}
          <ThemeToggle />
          <Btn variant="primary" size="sm" onClick={() => scrollTo('cta')}>
            join waitlist
          </Btn>
        </div>
      </div>
    </nav>
  );
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
function Hero() {
  return (
    <section style={{ paddingTop: '6.5rem', paddingBottom: '5rem', background: 'var(--bg-base)' }}>
      <div className="container">
        <div className="hero-grid">
          <div>
            <div style={{ marginBottom: '1.25rem' }}>
              <Chip color={TEAL} dot="pulse">early access — join the waitlist</Chip>
            </div>
            <h1 style={{
              fontFamily: 'var(--fn-sans)',
              fontSize: 'clamp(1.875rem, 4.5vw, 3rem)',
              fontWeight: 800,
              color: 'var(--tx)',
              letterSpacing: '-0.04em',
              lineHeight: 1.1,
              margin: '0 0 1.25rem',
            }}>
              terraform modules<br />
              <span style={{ color: 'var(--teal)' }}>tested automatically</span>
            </h1>
            <p style={{
              fontSize: '1.0625rem',
              color: 'var(--tx-2)',
              lineHeight: 1.75,
              maxWidth: 480,
              margin: '0 0 2rem',
              fontFamily: 'var(--fn-sans)',
            }}>
              terracheck detects new module versions in your registry, generates ai test suites using claude, and runs 4-layer testing against real cloud infrastructure — fully automated, no ci changes needed.
            </p>
            <WaitlistForm />
          </div>
          <div className="hero-anim">
            <WorkflowAnimation />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── SocialProof ────────────────────────────────────────────────────────── */
function SocialProof() {
  const metrics = [
    { label: 'modules tested',       value: '2,400+', sub: 'across all clouds',   color: 'var(--teal)' },
    { label: 'test files generated', value: '18k+',   sub: 'by claude ai',        color: 'var(--layer-unit)' },
    { label: 'findings blocked',     value: '3,200+', sub: 'before production',   color: 'var(--layer-sec)' },
    { label: 'avg test runtime',     value: '~26m',   sub: 'unit to e2e',         color: 'var(--layer-integ)' },
  ];
  return (
    <section style={{
      background: 'var(--bg-panel)',
      padding: '3.5rem 0',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div className="container">
        <div className="metrics-grid">
          {metrics.map((m, i) => (
            <FadeIn key={i} delay={i * 60}>
              <Metric label={m.label} value={m.value} sub={m.sub} color={m.color} />
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Features ───────────────────────────────────────────────────────────── */
const FEATURES = [
  {
    icon: '◉',
    title: 'auto-detection',
    desc: 'polls your registry every 5 minutes. the moment a new module version lands, testing kicks off automatically — no webhooks, no manual triggers.',
    accent: TEAL,
  },
  {
    icon: '◈',
    title: 'ai test generation',
    desc: 'claude reads your .tf files and generates unit, security, integration, and e2e tests. understands your variables, resources, and outputs.',
    accent: BLUE,
  },
  {
    icon: '▤',
    title: '4-layer testing',
    desc: 'unit (seconds) → security scan (seconds) → integration on real infra (minutes) → e2e workflow (minutes). every layer must pass before promotion.',
    accent: GREEN,
  },
  {
    icon: '◎',
    title: 'cis compliance',
    desc: 'built-in checks for azure cis 1.4, aws cis 1.5, and gcp cis 1.3. compliance failures block promotion. every module ships policy-compliant.',
    accent: AMBER,
  },
  {
    icon: '⬡',
    title: 'multi-cloud',
    desc: 'azure, aws, gcp, and kubernetes. test modules against real cloud credentials. catches provider-specific bugs before they hit production.',
    accent: PURPLE,
  },
  {
    icon: '★',
    title: 'auto-promotion',
    desc: 'validated modules get promoted to your release registry with a certified badge. your team only consumes modules that have passed all 4 layers.',
    accent: TEAL,
  },
];

function Features() {
  return (
    <section id="features" style={{ background: 'var(--bg-base)', padding: '6rem 0' }}>
      <div className="container">
        <FadeIn>
          <div style={{ textAlign: 'center', marginBottom: '3.5rem' }}>
            <span style={{
              fontFamily: 'var(--fn-mono)', fontSize: 11, color: 'var(--teal)',
              letterSpacing: '0.12em', textTransform: 'uppercase',
              display: 'block', marginBottom: 12,
            }}>capabilities</span>
            <h2 style={{
              fontSize: 'clamp(1.75rem, 3.5vw, 2.5rem)',
              fontWeight: 700, color: 'var(--tx)',
              letterSpacing: '-0.03em', lineHeight: 1.2,
              fontFamily: 'var(--fn-sans)', margin: 0,
            }}>everything your modules need</h2>
            <p style={{
              marginTop: 12, color: 'var(--tx-2)', fontSize: 15,
              maxWidth: 480, margin: '12px auto 0',
              fontFamily: 'var(--fn-sans)',
            }}>
              from first commit to certified release — fully automated.
            </p>
          </div>
        </FadeIn>
        <div className="features-grid">
          {FEATURES.map((f, i) => (
            <FadeIn key={i} delay={i * 60}>
              <Panel accent={f.accent} hoverable padding="1.75rem" style={{ height: '100%' }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 'var(--r-sm)',
                  background: `${f.accent}18`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 17, color: f.accent,
                  marginBottom: '1rem', fontFamily: 'var(--fn-mono)',
                }}>{f.icon}</div>
                <h3 style={{
                  fontFamily: 'var(--fn-mono)', fontSize: 13, fontWeight: 600,
                  color: 'var(--tx)', letterSpacing: '0.02em', margin: '0 0 8px',
                }}>{f.title}</h3>
                <p style={{
                  fontSize: 14, color: 'var(--tx-2)', lineHeight: 1.65,
                  margin: 0, fontFamily: 'var(--fn-sans)',
                }}>{f.desc}</p>
              </Panel>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── HowItWorks ─────────────────────────────────────────────────────────── */
const STEPS = [
  {
    n: '01', title: 'connect your registry',
    desc: 'point terracheck at your jfrog artifactory, terraform registry, gitlab, or github packages. one api key, done.',
    accent: TEAL,
  },
  {
    n: '02', title: 'version detected',
    desc: 'terracheck polls every 5 minutes. when a new version appears, it queues a full pipeline run automatically.',
    accent: BLUE,
  },
  {
    n: '03', title: 'ai generates tests',
    desc: 'claude reads your .tf source and generates unit, security, integration, and e2e test files tailored to your module.',
    accent: BLUE,
  },
  {
    n: '04', title: 'fast tests on k8s',
    desc: 'unit and security tests run in parallel kubernetes jobs — usually done in under 30 seconds.',
    accent: GREEN,
  },
  {
    n: '05', title: 'cloud tests on real infra',
    desc: 'integration and e2e tests provision actual azure, aws, or gcp resources, verify behavior, and tear down cleanly.',
    accent: AMBER,
  },
  {
    n: '06', title: 'promote or block',
    desc: 'all layers pass → module gets a validated badge and lands in your release registry. any failure → blocked with a full report.',
    accent: GREEN,
  },
];

function HowItWorks() {
  return (
    <section id="how" style={{ background: 'var(--bg-panel)', padding: '6rem 0' }}>
      <div className="container">
        <FadeIn>
          <div style={{ textAlign: 'center', marginBottom: '3.5rem' }}>
            <span style={{
              fontFamily: 'var(--fn-mono)', fontSize: 11, color: 'var(--teal)',
              letterSpacing: '0.12em', textTransform: 'uppercase',
              display: 'block', marginBottom: 12,
            }}>how it works</span>
            <h2 style={{
              fontSize: 'clamp(1.75rem, 3.5vw, 2.5rem)',
              fontWeight: 700, color: 'var(--tx)',
              letterSpacing: '-0.03em', lineHeight: 1.2,
              fontFamily: 'var(--fn-sans)', margin: 0,
            }}>six steps to certified</h2>
          </div>
        </FadeIn>
        <div className="steps-grid">
          {STEPS.map((s, i) => (
            <FadeIn key={i} delay={i * 80}>
              <Panel accent={s.accent} padding="1.5rem" style={{ height: '100%' }}>
                <div style={{
                  fontFamily: 'var(--fn-mono)', fontSize: 11,
                  color: s.accent, letterSpacing: '0.1em', marginBottom: '0.75rem',
                }}>{s.n}</div>
                <h3 style={{
                  fontFamily: 'var(--fn-mono)', fontSize: 13, fontWeight: 600,
                  color: 'var(--tx)', margin: '0 0 8px',
                }}>{s.title}</h3>
                <p style={{
                  fontSize: 13, color: 'var(--tx-2)', lineHeight: 1.65,
                  margin: 0, fontFamily: 'var(--fn-sans)',
                }}>{s.desc}</p>
              </Panel>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Integrations ───────────────────────────────────────────────────────── */
const INTEG_ITEMS = [
  { name: 'jfrog artifactory', cat: 'registries', icon: '📦', color: TEAL,   desc: 'poll artifactory for new module versions' },
  { name: 'terraform registry', cat: 'registries', icon: '⬡',  color: TEAL,   desc: 'official hashicorp terraform registry' },
  { name: 'gitlab packages',   cat: 'registries', icon: '🦊',  color: TEAL,   desc: 'gitlab package registry support' },
  { name: 'github packages',   cat: 'registries', icon: '◉',   color: TEAL,   desc: 'github container & package registry' },
  { name: 'azure devops',      cat: 'ci/cd',      icon: '⚙',   color: BLUE,   desc: 'trigger pipelines on promotion' },
  { name: 'github actions',    cat: 'ci/cd',      icon: '▶',   color: BLUE,   desc: 'post-promotion workflow dispatch' },
  { name: 'gitlab ci',         cat: 'ci/cd',      icon: '⚡',  color: BLUE,   desc: 'pipeline triggers via gitlab api' },
  { name: 'azure',             cat: 'environment',     icon: '☁',   color: PURPLE, desc: 'real azure infra for cloud tests' },
  { name: 'aws',               cat: 'environment',     icon: '◈',   color: AMBER,  desc: 'aws ec2/vpc/iam integration tests' },
  { name: 'gcp',               cat: 'environment',     icon: '◎',   color: GREEN,  desc: 'google cloud compute & gke tests' },
  { name: 'kubernetes',        cat: 'environment', icon: '⬢',   color: BLUE,   desc: 'k8s jobs for unit & security layers' },
];

const INTEG_FILTERS = [
  { id: 'all',        label: 'all',        color: 'var(--tx-2)' },
  { id: 'registries', label: 'registries', color: TEAL   },
  { id: 'ci/cd',      label: 'ci / cd',    color: BLUE   },
  { id: 'environment', label: 'environment', color: PURPLE },
];

function IntegCard({ item, visible }) {
  const [hovered, setHovered] = useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: hovered ? `${item.color}0f` : 'var(--bg-panel)',
        border: `1px solid ${hovered ? `${item.color}55` : 'var(--line)'}`,
        borderRadius: 'var(--r-md)',
        padding: '1.25rem',
        cursor: 'default',
        transition: 'all 200ms',
        transform: hovered ? 'translateY(-2px)' : 'none',
        boxShadow: hovered ? `0 8px 32px ${item.color}22` : 'none',
        opacity: visible ? 1 : 0,
        pointerEvents: visible ? 'auto' : 'none',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
        <div style={{
          width: 32, height: 32, borderRadius: 'var(--r-sm)',
          background: `${item.color}18`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 15, flexShrink: 0,
          transition: 'background 200ms',
          ...(hovered ? { background: `${item.color}30` } : {}),
        }}>{item.icon}</div>
        <div>
          <div style={{
            fontFamily: 'var(--fn-mono)', fontSize: 12, fontWeight: 600,
            color: hovered ? item.color : 'var(--tx)',
            transition: 'color 200ms',
          }}>{item.name}</div>
          <div style={{
            fontFamily: 'var(--fn-mono)', fontSize: 9,
            color: item.color, textTransform: 'uppercase', letterSpacing: '0.1em', opacity: 0.7,
          }}>{item.cat}</div>
        </div>
      </div>
      <p style={{
        fontFamily: 'var(--fn-sans)', fontSize: 12, color: 'var(--tx-3)',
        margin: 0, lineHeight: 1.5,
        maxHeight: hovered ? 40 : 0,
        overflow: 'hidden',
        opacity: hovered ? 1 : 0,
        transition: 'max-height 200ms, opacity 200ms',
      }}>{item.desc}</p>
    </div>
  );
}

function Integrations() {
  const [filter, setFilter] = useState('all');


  return (
    <section id="integrations" style={{ background: 'var(--bg-base)', padding: '6rem 0' }}>
      <div className="container">
        <FadeIn>
          <div style={{ textAlign: 'center', marginBottom: '2.5rem' }}>
            <span style={{
              fontFamily: 'var(--fn-mono)', fontSize: 11, color: 'var(--teal)',
              letterSpacing: '0.12em', textTransform: 'uppercase',
              display: 'block', marginBottom: 12,
            }}>integrations</span>
            <h2 style={{
              fontSize: 'clamp(1.75rem, 3.5vw, 2.5rem)',
              fontWeight: 700, color: 'var(--tx)',
              letterSpacing: '-0.03em',
              fontFamily: 'var(--fn-sans)', margin: '0 0 1.5rem',
            }}>works with your stack</h2>

            {/* Filter tabs */}
            <div style={{ display: 'flex', gap: 6, justifyContent: 'center', flexWrap: 'wrap' }}>
              {INTEG_FILTERS.map(f => (
                <button
                  key={f.id}
                  onClick={() => setFilter(f.id)}
                  style={{
                    padding: '5px 14px',
                    borderRadius: 'var(--r-sm)',
                    border: `1px solid ${filter === f.id ? f.color : 'var(--line)'}`,
                    background: filter === f.id ? `${f.color}18` : 'transparent',
                    color: filter === f.id ? f.color : 'var(--tx-3)',
                    fontFamily: 'var(--fn-mono)', fontSize: 12, fontWeight: 600,
                    cursor: 'pointer', transition: 'all 150ms',
                    textTransform: 'lowercase',
                  }}
                >{f.label}</button>
              ))}
            </div>
          </div>
        </FadeIn>

        {/* Cards grid */}
        <FadeIn delay={100}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
            gap: '0.875rem',
            marginBottom: '3rem',
          }}>
            {INTEG_ITEMS.map(item => (
              <IntegCard
                key={item.name}
                item={item}
                visible={filter === 'all' || item.cat === filter}
              />
            ))}
          </div>
        </FadeIn>

        {/* Pipeline flow */}
        <FadeIn delay={200}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            gap: 0, flexWrap: 'wrap', padding: '1.5rem',
            background: 'var(--bg-panel)', borderRadius: 'var(--r-lg)',
            border: '1px solid var(--line)',
          }}>
            {[
              { label: 'registry',  icon: '📦', color: TEAL   },
              { label: 'detect',    icon: '◉',  color: TEAL,   arrow: true },
              { label: 'generate',  icon: '◈',  color: BLUE,   arrow: true },
              { label: 'k8s tests', icon: '⬢',  color: GREEN,  arrow: true },
              { label: 'cloud',     icon: '☁',  color: PURPLE, arrow: true },
              { label: 'promote',   icon: '★',  color: TEAL,   arrow: true },
            ].map((step) => (
              <React.Fragment key={step.label}>
                {step.arrow && (
                  <div style={{
                    width: 24, height: 1,
                    background: 'var(--line)',
                    flexShrink: 0,
                  }} />
                )}
                <FlowStep step={step} />
              </React.Fragment>
            ))}
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

function FlowStep({ step }) {
  const [h, setH] = useState(false);
  return (
    <div
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
        padding: '10px 14px', borderRadius: 'var(--r-sm)', cursor: 'default',
        background: h ? `${step.color}12` : 'transparent',
        transition: 'background 150ms',
      }}
    >
      <span style={{
        fontSize: 18,
        filter: h ? `drop-shadow(0 0 6px ${step.color})` : 'none',
        transition: 'filter 150ms',
      }}>{step.icon}</span>
      <span style={{
        fontFamily: 'var(--fn-mono)', fontSize: 9,
        color: h ? step.color : 'var(--tx-3)',
        textTransform: 'uppercase', letterSpacing: '0.1em',
        transition: 'color 150ms',
      }}>{step.label}</span>
    </div>
  );
}

/* ─── Pricing ────────────────────────────────────────────────────────────── */
const TIERS = [
  {
    id: 'free', name: 'free', price: '$0',
    tagline: 'get started today',
    features: ['3 modules', 'unit tests only', '10 ai test generations/mo', 'terraform registry', 'community support'],
  },
  {
    id: 'starter', name: 'starter', price: '$49', period: '/mo',
    tagline: 'growing teams',
    features: ['15 modules', 'unit + security tests', '100 ai test generations/mo', 'weekly continuous testing', 'all registries', 'email support'],
  },
  {
    id: 'pro', name: 'pro', price: '$199', period: '/mo',
    tagline: 'production-grade',
    popular: true,
    features: ['50 modules', 'all 4 test layers', '500 ai test generations/mo', 'nightly continuous testing', 'custom opa policies', 'cis compliance reports', 'priority support'],
  },
  {
    id: 'team', name: 'team', price: '$499', period: '/mo',
    tagline: 'enterprise-ready',
    features: ['200 modules', 'all 4 test layers', '2000 ai test generations/mo', 'custom schedule', 'self-hosted option', 'sso / saml', 'sla + dedicated support'],
  },
];

function PricingCard({ tier }) {
  function scrollToCTA() {
    document.getElementById('cta')?.scrollIntoView({ behavior: 'smooth' });
  }
  return (
    <Panel
      accent={tier.popular ? TEAL : undefined}
      glow={tier.popular}
      glowColor={TEAL}
      hoverable
      padding="1.75rem"
      style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%' }}
    >
      {tier.popular && (
        <div style={{ position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)' }}>
          <Chip color={TEAL} variant="solid" size="sm">most popular</Chip>
        </div>
      )}

      <div style={{ marginBottom: '1.25rem' }}>
        <div style={{
          fontFamily: 'var(--fn-mono)', fontSize: 13, fontWeight: 600,
          color: tier.popular ? 'var(--teal)' : 'var(--tx)',
          letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 4,
        }}>{tier.name}</div>
        <div style={{ fontSize: 12, color: 'var(--tx-3)', fontFamily: 'var(--fn-mono)' }}>{tier.tagline}</div>
      </div>

      <div style={{ marginBottom: '1.5rem' }}>
        <span style={{
          fontFamily: 'var(--fn-mono)',
          fontSize: 'clamp(1.75rem, 3vw, 2.25rem)',
          fontWeight: 700, color: 'var(--tx)', letterSpacing: '-0.04em',
        }}>{tier.price}</span>
        {tier.period && (
          <span style={{ fontFamily: 'var(--fn-mono)', fontSize: 13, color: 'var(--tx-3)' }}>
            {tier.period}
          </span>
        )}
      </div>

      <ul style={{
        listStyle: 'none', flex: 1, margin: '0 0 1.5rem', padding: 0,
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        {tier.features.map(f => (
          <li key={f} style={{ display: 'flex', gap: 8, alignItems: 'baseline' }}>
            <span style={{ color: 'var(--teal)', fontSize: 12, flexShrink: 0, fontFamily: 'var(--fn-mono)' }}>✓</span>
            <span style={{ fontSize: 13, color: 'var(--tx-2)', fontFamily: 'var(--fn-sans)' }}>{f}</span>
          </li>
        ))}
      </ul>

      <Btn variant={tier.popular ? 'primary' : 'outline'} full onClick={scrollToCTA}>
        join waitlist
      </Btn>
    </Panel>
  );
}

function Pricing() {
  return (
    <section id="pricing" style={{ background: 'var(--bg-raised)', padding: '6rem 0' }}>
      <div className="container">
        <FadeIn>
          <div style={{ textAlign: 'center', marginBottom: '3.5rem' }}>
            <span style={{
              fontFamily: 'var(--fn-mono)', fontSize: 11, color: 'var(--teal)',
              letterSpacing: '0.12em', textTransform: 'uppercase',
              display: 'block', marginBottom: 12,
            }}>pricing</span>
            <h2 style={{
              fontSize: 'clamp(1.75rem, 3.5vw, 2.5rem)',
              fontWeight: 700, color: 'var(--tx)',
              letterSpacing: '-0.03em', lineHeight: 1.2,
              fontFamily: 'var(--fn-sans)', margin: 0,
            }}>simple, module-based pricing</h2>
            <p style={{ marginTop: 12, color: 'var(--tx-2)', fontSize: 15, fontFamily: 'var(--fn-sans)' }}>
              start free. scale as your registry grows.
            </p>
          </div>
        </FadeIn>
        <div className="pricing-grid">
          {TIERS.map((tier, i) => (
            <FadeIn key={tier.id} delay={i * 60}>
              <PricingCard tier={tier} />
            </FadeIn>
          ))}
        </div>
        <FadeIn delay={200}>
          <div style={{
            marginTop: '2.5rem', textAlign: 'center', padding: '1.25rem',
            border: '1px solid var(--line)', borderRadius: 'var(--r-lg)',
            background: 'var(--bg-panel)',
          }}>
            <span style={{ fontFamily: 'var(--fn-mono)', fontSize: 13, color: 'var(--tx-2)' }}>
              need more?{' '}
              <span style={{ color: 'var(--teal)' }}>enterprise plans</span>
              {' '}with unlimited modules, sso, soc2, and dedicated infra —{' '}
              <button
                onClick={() => document.getElementById('cta')?.scrollIntoView({ behavior: 'smooth' })}
                style={{
                  background: 'none', border: 'none', color: 'var(--teal)',
                  fontFamily: 'var(--fn-mono)', fontSize: 13, cursor: 'pointer', padding: 0,
                }}
              >
                talk to us ↗
              </button>
            </span>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

/* ─── Roadmap ─────────────────────────────────────────────────────────────── */
const STATUS_META = {
  shipped:   { icon: '✅', color: GREEN  },
  building:  { icon: '🔨', color: TEAL   },
  planned:   { icon: '📋', color: BLUE   },
  exploring: { icon: '💡', color: AMBER  },
  future:    { icon: '🔮', color: PURPLE },
};

const ROADMAP_PHASES = [
  {
    id: 'foundation', period: 'jun — aug 2026', label: 'foundation',
    status: 'building', accentColor: TEAL, active: true,
    desc: 'core platform. automated detect → test → promote loop for first customers.',
    cta: 'early access opens august 2026',
    features: [
      { text: 'auto-detection of new versions',        status: 'planned' },
      { text: 'ai test generation (claude sonnet 4.6)', status: 'planned' },
      { text: 'unit tests (.tftest.hcl)',               status: 'planned' },
      { text: 'security scans (tfsec + checkov)',       status: 'planned' },
      { text: 'k8s job execution (~20s)',               status: 'planned' },
      { text: 'jfrog + terraform registry',            status: 'planned' },
      { text: 'dashboard — pipeline view',             status: 'planned' },
      { text: 'early access — first 50 users',         status: 'planned' },
    ],
  },
  {
    id: 'expand', period: 'sep — nov 2026', label: 'expand',
    status: 'planned', accentColor: BLUE,
    desc: 'multi-cloud testing, more registries, ci/cd integrations. production-ready.',
    features: [
      { text: 'integration tests (real infra)',        status: 'planned' },
      { text: 'e2e tests (workflow validation)',       status: 'planned' },
      { text: 'azure devops + github actions',         status: 'planned' },
      { text: 'azure + aws cloud support',             status: 'planned' },
      { text: 'cost-saving gate (fast → cloud)',       status: 'planned' },
      { text: 'auto-promotion to release registry',   status: 'planned' },
      { text: 'module validation badge (embeddable)', status: 'planned' },
      { text: 'continuous testing (nightly)',          status: 'planned' },
    ],
  },
  {
    id: 'scale', period: 'dec 2026 — feb 2027', label: 'scale',
    status: 'planned', accentColor: PURPLE,
    desc: 'team features, more ai models, advanced policies. mid-market ready.',
    features: [
      { text: 'gitlab + github packages',         status: 'planned' },
      { text: 'gcp + kubernetes provider',        status: 'planned' },
      { text: 'custom opa/rego policies',         status: 'planned' },
      { text: 'ai model selection per module',    status: 'planned' },
      { text: 'aws bedrock + google vertex',      status: 'planned' },
      { text: 'team management (roles, rbac)',    status: 'planned' },
      { text: 'slack / teams notifications',      status: 'planned' },
      { text: 'webhook api',                      status: 'planned' },
    ],
  },
  {
    id: 'enterprise', period: 'mar — may 2027', label: 'enterprise',
    status: 'exploring', accentColor: AMBER,
    desc: 'self-hosted option, compliance, sso. ready for enterprise adoption.',
    features: [
      { text: 'self-hosted (helm chart)',           status: 'exploring' },
      { text: 'sso / saml (azure ad, okta)',        status: 'exploring' },
      { text: 'soc2 type i certification',          status: 'exploring' },
      { text: 'audit log',                          status: 'exploring' },
      { text: 'azure marketplace listing',          status: 'exploring' },
      { text: 'private registry support',           status: 'exploring' },
      { text: 'dedicated support + sla',            status: 'exploring' },
    ],
  },
  {
    id: 'platform', period: 'beyond', label: 'platform',
    status: 'future', accentColor: PURPLE,
    desc: 'long-term platform vision. where we\'re heading.',
    features: [
      { text: 'ai-powered fix suggestions',          status: 'future' },
      { text: 'opentofu + pulumi support',           status: 'future' },
      { text: 'drift detection',                     status: 'future' },
      { text: 'module quality leaderboard',          status: 'future' },
      { text: '"terracheck certified" program',      status: 'future' },
      { text: 'module marketplace',                  status: 'future' },
      { text: 'vs code extension',                   status: 'future' },
    ],
  },
];

function RoadmapFeature({ feature }) {
  const s = STATUS_META[feature.status];
  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', padding: '3px 0' }}>
      <span style={{ fontSize: 10, flexShrink: 0, lineHeight: 1.75, opacity: 0.8 }}>{s.icon}</span>
      <span style={{
        fontFamily: 'var(--fn-sans)', fontSize: 12, color: 'var(--tx-2)', lineHeight: 1.55,
      }}>{feature.text}</span>
    </div>
  );
}

function RoadmapPhaseCard({ phase, index }) {
  const sm = STATUS_META[phase.status];
  const isFuture = phase.status === 'future';
  const isExploring = phase.status === 'exploring';
  return (
    <FadeIn delay={index * 70}>
      <div style={{
        background: phase.active ? `${TEAL}08` : 'var(--bg-panel)',
        border: `1px solid ${phase.active ? `${TEAL}45` : 'var(--line)'}`,
        borderTop: `2px solid ${phase.active ? TEAL : phase.accentColor + '40'}`,
        borderRadius: 'var(--r-lg)',
        padding: '1.5rem',
        height: '100%',
        opacity: isFuture ? 0.55 : isExploring ? 0.8 : 1,
        display: 'flex', flexDirection: 'column',
        boxShadow: phase.active ? `0 0 32px ${TEAL}12` : 'none',
      }}>
        {/* Period */}
        <div style={{
          fontFamily: 'var(--fn-mono)', fontSize: 9,
          color: phase.active ? TEAL : 'var(--tx-4)',
          letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8,
        }}>{phase.period}</div>

        {/* Label + status */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <div style={{
            fontFamily: 'var(--fn-mono)', fontSize: 13, fontWeight: 700,
            color: phase.active ? TEAL : 'var(--tx)',
            letterSpacing: '0.04em', textTransform: 'uppercase',
          }}>{phase.label}</div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            background: `${sm.color}15`, border: `1px solid ${sm.color}35`,
            borderRadius: 'var(--r-sm)', padding: '2px 7px',
          }}>
            <span style={{ fontSize: 9 }}>{sm.icon}</span>
            <span style={{
              fontFamily: 'var(--fn-mono)', fontSize: 9, color: sm.color,
              textTransform: 'uppercase', letterSpacing: '0.08em',
            }}>{phase.status}</span>
          </div>
        </div>

        {/* Description */}
        <p style={{
          fontFamily: 'var(--fn-sans)', fontSize: 12, color: 'var(--tx-3)',
          margin: '0 0 12px', lineHeight: 1.55,
        }}>{phase.desc}</p>

        <div style={{ height: 1, background: 'var(--line)', marginBottom: 10 }} />

        {/* Feature list */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          {phase.features.map((f, i) => (
            <RoadmapFeature key={i} feature={f} />
          ))}
        </div>

        {/* CTA strip */}
        {phase.cta && (
          <div style={{
            marginTop: 14, padding: '7px 10px',
            background: `${TEAL}12`, border: `1px solid ${TEAL}30`,
            borderRadius: 'var(--r-sm)',
          }}>
            <span style={{
              fontFamily: 'var(--fn-mono)', fontSize: 9, color: TEAL,
              textTransform: 'uppercase', letterSpacing: '0.08em',
            }}>⚡ {phase.cta}</span>
          </div>
        )}
      </div>
    </FadeIn>
  );
}

function Roadmap() {
  return (
    <section id="roadmap" style={{ background: 'var(--bg-panel)', padding: '6rem 0' }}>
      <div className="container">
        <FadeIn>
          <div style={{ textAlign: 'center', marginBottom: '3rem' }}>
            <span style={{
              fontFamily: 'var(--fn-mono)', fontSize: 11, color: 'var(--teal)',
              letterSpacing: '0.12em', textTransform: 'uppercase',
              display: 'block', marginBottom: 12,
            }}>/// roadmap</span>
            <h2 style={{
              fontSize: 'clamp(1.75rem, 3.5vw, 2.5rem)',
              fontWeight: 700, color: 'var(--tx)',
              letterSpacing: '-0.03em', lineHeight: 1.2,
              fontFamily: 'var(--fn-sans)', margin: '0 0 1rem',
            }}>where we're going</h2>
            <p style={{
              color: 'var(--tx-2)', fontSize: 15, maxWidth: 520,
              margin: '0 auto', fontFamily: 'var(--fn-sans)', lineHeight: 1.65,
            }}>
              public roadmap. early access opens august 2026 — join the waitlist to shape what gets built first.
            </p>
          </div>
        </FadeIn>

        {/* Timeline connector strip */}
        <FadeIn delay={80}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: '2.5rem', overflowX: 'auto', padding: '0 0 4px',
          }}>
            {ROADMAP_PHASES.map((phase, i) => {
              const sm = STATUS_META[phase.status];
              const isLast = i === ROADMAP_PHASES.length - 1;
              return (
                <React.Fragment key={phase.id}>
                  <div style={{
                    display: 'flex', flexDirection: 'column', alignItems: 'center',
                    gap: 6, flexShrink: 0, minWidth: 80,
                  }}>
                    <div style={{
                      width: 30, height: 30, borderRadius: '50%',
                      background: phase.active ? TEAL : `${sm.color}18`,
                      border: `2px solid ${phase.active ? TEAL : sm.color + '45'}`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: phase.active ? 14 : 11,
                      color: phase.active ? 'var(--bg-base)' : sm.color,
                      boxShadow: phase.active ? `0 0 14px ${TEAL}55` : 'none',
                      opacity: phase.status === 'future' ? 0.5 : 1,
                    }}>
                      {phase.active ? '●' : sm.icon}
                    </div>
                    <span style={{
                      fontFamily: 'var(--fn-mono)', fontSize: 9,
                      color: phase.active ? TEAL : 'var(--tx-4)',
                      textTransform: 'uppercase', letterSpacing: '0.08em', textAlign: 'center',
                    }}>{phase.label}</span>
                  </div>
                  {!isLast && (
                    <div style={{
                      flex: 1, height: 1, minWidth: 16, marginBottom: 22,
                      background: i === 0
                        ? `linear-gradient(to right, ${TEAL}80, ${BLUE}40)`
                        : 'var(--line)',
                    }} />
                  )}
                </React.Fragment>
              );
            })}
          </div>
        </FadeIn>

        <div className="roadmap-grid">
          {ROADMAP_PHASES.map((phase, i) => (
            <RoadmapPhaseCard key={phase.id} phase={phase} index={i} />
          ))}
        </div>

        {/* Legend */}
        <FadeIn delay={200}>
          <div style={{
            marginTop: '2rem', padding: '0.875rem 1.5rem',
            border: '1px solid var(--line)', borderRadius: 'var(--r-lg)',
            background: 'var(--bg-base)',
            display: 'flex', gap: '1.25rem', flexWrap: 'wrap', justifyContent: 'center',
          }}>
            {Object.entries(STATUS_META).map(([key, val]) => (
              <div key={key} style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                <span style={{ fontSize: 11 }}>{val.icon}</span>
                <span style={{
                  fontFamily: 'var(--fn-mono)', fontSize: 10, color: 'var(--tx-3)',
                  textTransform: 'uppercase', letterSpacing: '0.08em',
                }}>{key}</span>
              </div>
            ))}
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

/* ─── CTA ────────────────────────────────────────────────────────────────── */
function CTA() {
  return (
    <section id="cta" style={{ background: 'var(--bg-base)', padding: '6rem 0' }}>
      <div className="container">
        <FadeIn>
          <div style={{ maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
            <span style={{
              fontFamily: 'var(--fn-mono)', fontSize: 11, color: 'var(--teal)',
              letterSpacing: '0.12em', textTransform: 'uppercase',
              display: 'block', marginBottom: 12,
            }}>get early access</span>
            <h2 style={{
              fontSize: 'clamp(1.75rem, 3.5vw, 2.5rem)',
              fontWeight: 700, color: 'var(--tx)',
              letterSpacing: '-0.03em', lineHeight: 1.2,
              fontFamily: 'var(--fn-sans)', margin: '0 0 1rem',
            }}>stop shipping untested modules</h2>
            <p style={{
              color: 'var(--tx-2)', fontSize: 16, lineHeight: 1.65,
              margin: '0 0 2.5rem', fontFamily: 'var(--fn-sans)',
            }}>
              join the waitlist and be first to automate your terraform module testing pipeline.
            </p>
            <Panel padding="2rem" style={{ textAlign: 'left' }}>
              <WaitlistForm />
            </Panel>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer style={{
      borderTop: '1px solid var(--line)',
      background: 'var(--bg-panel)',
      padding: '1.5rem 0',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: '0.75rem',
      }}>
        <Logo size={22} compact />
        <span style={{ fontFamily: 'var(--fn-mono)', fontSize: 11, color: 'var(--tx-3)' }}>
          automated terraform module testing
        </span>
        <span style={{ fontFamily: 'var(--fn-mono)', fontSize: 11, color: 'var(--tx-4)' }}>
          © {new Date().getFullYear()}
        </span>
      </div>
    </footer>
  );
}

/* ─── App ────────────────────────────────────────────────────────────────── */
function App() {
  useEffect(() => {
    try {
      const saved = localStorage.getItem('ttt-theme');
      if (saved) document.documentElement.setAttribute('data-theme', saved);
    } catch {}
  }, []);

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero />
        <SocialProof />
        <Features />
        <HowItWorks />
        <Integrations />
        <Pricing />
        <Roadmap />
        <CTA />
      </main>
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);