// Sections: Hero, ValueProps, HowItWorks, Features, UseCases, Playground, Pricing, Quote, Compliance, FinalCTA
const { useState: uS, useEffect: uE, useRef: uR } = React;

const HEADLINES = [
  { h: ['Post-quantum keys,', <br key="b" />, 'production-ready.'], sub: 'Mint, rotate, sign, and verify with NIST-finalized algorithms through one HTTP API. Tenant-isolated by design. Audited on every change. Rotatable without downtime.' },
  { h: ['Future-proof your', <br key="b" />, <em key="e" style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400 }}>cryptography stack.</em>], sub: 'Drop in ML-KEM-768 and ML-DSA-65 today. Long-lived data signed and sealed against tomorrow’s quantum decryptors — with the operational guarantees regulated industries already expect.' },
  { h: ['One API.', <br key="b" />, 'Quantum-safe by default.'], sub: 'Replace bespoke key infrastructure with a managed platform built around NIST FIPS 203 + 204. Keys are encrypted at rest, isolated per tenant, and traceable on every operation.' },
];

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="/" className="brand" aria-label="api4pqc home">
          <span className="brand-mark"><Icon.Logo size={16} /></span>
          api4pqc
          <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-4)', fontWeight: 400, marginLeft: 2, letterSpacing: '0.04em' }}>.com</span>
        </a>
        <div className="nav-links">
          <a href="#features">Platform</a>
          <a href="#how">How it works</a>
          <a href="#pricing">Pricing</a>
          <a href="#docs">Docs</a>
        </div>
        <div className="nav-cta">
          <a href="https://app.api4pqc.com/login" style={{ fontSize: 14, color: 'var(--ink-3)' }}>Sign in</a>
          <a href="mailto:hello@api4pqc.com?subject=api4pqc%20-%20intro" className="btn btn-primary btn-sm">Talk to us <Icon.Arrow size={12} /></a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ headlineVariant }) {
  const data = HEADLINES[headlineVariant] || HEADLINES[0];
  return (
    <section className="hero">
      <LatticeBackground />
      <div className="shell hero-grid" style={{ position: 'relative' }}>
        <div className="fade-up">
          <div style={{ marginBottom: 24, display: 'flex', gap: 10, alignItems: 'center' }}>
            <span className="pill">
              <span className="dot" />
              NIST FIPS 203 + 204 — ML-KEM-768 & ML-DSA-65
            </span>
          </div>
          <h1>{data.h}</h1>
          <p className="lede" style={{ marginTop: 24 }}>{data.sub}</p>
          <div className="hero-cta" style={{ marginTop: 36 }}>
            <a href="mailto:hello@api4pqc.com?subject=api4pqc%20-%20sandbox%20access" className="btn btn-primary">Get sandbox access <Icon.Arrow /></a>
            <a href="https://docs.api4pqc.com" className="btn btn-ghost">Read the docs</a>
          </div>
          <div className="hero-trust">
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-4)' }}>Built for</span>
            <div style={{ display: 'flex', gap: 24, color: 'var(--ink-3)', fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.005em' }}>
              <span>Regulated industries</span>
              <span style={{ color: 'var(--line-strong)' }}>·</span>
              <span>Platform teams</span>
              <span style={{ color: 'var(--line-strong)' }}>·</span>
              <span>Long-lived data</span>
            </div>
          </div>
        </div>
        <div className="fade-up" style={{ animationDelay: '120ms' }}>
          <CodeWindow samples={CODE_SAMPLES.hero} defaultLang="js" langs={['js', 'ts', 'py', 'go', 'curl']} />
        </div>
      </div>
    </section>
  );
}

function ValueProps() {
  const items = [
    { eyebrow: '01 / Ship faster', icon: <Icon.Shield />, title: 'Post-quantum, in one API call', body: 'Replace months of cryptographic engineering with a single HTTPS request. Mint a NIST-finalized keypair, encapsulate, sign, verify — your team focuses on the product, not the primitives.' },
    { eyebrow: '02 / Sleep at night', icon: <Icon.Bolt />, title: 'Tenant-isolated, encrypted at rest', body: 'Every secret is sealed with AES-256-GCM and bound to the row that owns it, so a leaked database snapshot stays useless. Master keys rotate atomically — drilled in production with zero downtime.' },
    { eyebrow: '03 / Pass the audit', icon: <Icon.Globe />, title: 'Compliance-ready by construction', body: 'Every key creation, rotation, deletion, and webhook change lands in an immutable audit trail with actor, target, outcome and metadata. The evidence your auditor wants is one SQL query away.' },
  ];
  return (
    <section className="section">
      <div className="shell">
        <div className="grid grid-3">
          {items.map((it, i) => (
            <div key={i} className="card flat" style={{ borderRadius: 14, background: 'transparent', border: '1px solid var(--line)', padding: 32 }}>
              <div className="label" style={{ marginBottom: 18 }}>{it.eyebrow}</div>
              <div style={{ width: 36, height: 36, borderRadius: 9, background: 'var(--accent-soft)', color: 'var(--accent-deep)', display: 'grid', placeItems: 'center', marginBottom: 20 }}>
                {it.icon}
              </div>
              <h3 style={{ marginBottom: 10 }}>{it.title}</h3>
              <p style={{ color: 'var(--ink-3)', fontSize: 15, lineHeight: 1.6 }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const [step, setStep] = uS(0);
  uE(() => {
    const t = setInterval(() => setStep(s => (s + 1) % 4), 5200);
    return () => clearInterval(t);
  }, []);

  const steps = [
    { title: 'Mint a keypair',         sub: 'One POST. Get a key id back.',                detail: { kind: 'code', lang: 'curl' } },
    { title: 'Encapsulate or sign',    sub: 'Production-grade PQC primitives.',            detail: { kind: 'diagram' } },
    { title: 'Inspect your keys',      sub: 'Versioned, isolated, encrypted at rest.',     detail: { kind: 'keys' } },
    { title: 'Rotate without downtime',sub: 'Atomic master-key rotation, drilled live.',   detail: { kind: 'compliance' } },
  ];

  return (
    <section className="section muted" id="how">
      <div className="shell">
        <div className="section-header">
          <span className="eyebrow">How it works</span>
          <h2>From zero to quantum-safe in four steps.</h2>
          <p className="lede">Tenant isolation, identity-bound encryption, and audit logging happen inside the platform. Your application makes one HTTP call.</p>
        </div>

        <div className="stepper">
          <div className="step-list">
            {steps.map((s, i) => (
              <button key={i} onClick={() => setStep(i)} className={`step-item ${i === step ? 'active' : ''} ${i < step ? 'done' : ''}`}>
                <span className="step-num">{i < step ? <Icon.Check size={12} /> : `0${i + 1}`}</span>
                <div style={{ flex: 1 }}>
                  <div className="step-title">{s.title}</div>
                  <div className="step-sub">{s.sub}</div>
                </div>
              </button>
            ))}
          </div>
          <div className="step-detail">
            <StepDetail step={step} />
          </div>
        </div>
      </div>
    </section>
  );
}

function StepDetail({ step }) {
  if (step === 0) {
    return (
      <div className="fade-up" key={step} style={{ display: 'flex', flexDirection: 'column', gap: 20, height: '100%' }}>
        <div>
          <span className="eyebrow">Step 01</span>
          <h3 style={{ marginTop: 10, marginBottom: 8 }}>One HTTP call.</h3>
          <p style={{ color: 'var(--ink-3)', fontSize: 14.5 }}>POST to mint a key. The platform sets up tenant scoping, encrypts the secret at rest, and returns a key id you can use immediately. Authentication is a single API key header — no certificate dance, no key-shipping ceremony.</p>
        </div>
        <CodeWindow samples={CODE_SAMPLES.playground.encrypt} defaultLang="curl" langs={['curl', 'js', 'py', 'go']} showTraffic={false} />
      </div>
    );
  }
  if (step === 1) {
    return (
      <div className="fade-up" key={step} style={{ display: 'flex', flexDirection: 'column', gap: 20, height: '100%' }}>
        <div>
          <span className="eyebrow">Step 02</span>
          <h3 style={{ marginTop: 10, marginBottom: 8 }}>Pick the primitive your workload needs.</h3>
          <p style={{ color: 'var(--ink-3)', fontSize: 14.5 }}>Encapsulate to wrap a data key. Sign to prove provenance. Verify to confirm authenticity. Each primitive runs in milliseconds, returns a deterministic shape, and is interoperable with any standards-conformant client.</p>
        </div>
        <FlowDiagram />
      </div>
    );
  }
  if (step === 2) {
    return (
      <div className="fade-up" key={step} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <div>
          <span className="eyebrow">Step 03</span>
          <h3 style={{ marginTop: 10, marginBottom: 8 }}>Your keys, your control.</h3>
          <p style={{ color: 'var(--ink-3)', fontSize: 14.5 }}>Browse, version, and lifecycle every key from the dashboard or the API. Each key version is independently encrypted and tied to your tenant — a stolen database snapshot reveals nothing without the master key it was sealed under.</p>
        </div>
        <KeyTable />
      </div>
    );
  }
  return (
    <div className="fade-up" key={step} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div>
        <span className="eyebrow">Step 04</span>
        <h3 style={{ marginTop: 10, marginBottom: 8 }}>Rotate without downtime.</h3>
        <p style={{ color: 'var(--ink-3)', fontSize: 14.5 }}>Master-key rotation is a single command, drilled live in production: hundreds of keys re-encrypted under a fresh master key in seconds, with a fallback path that keeps every existing call working through the cutover.</p>
      </div>
      <ComplianceTimeline />
    </div>
  );
}

function KeyTable() {
  const rows = [
    { id: '8fa47b9c…b8c05', alg: 'ML-KEM-768', use: 'kem', rotated: 'just now',  status: 'active' },
    { id: '2d405bb4…e1aced', alg: 'ML-DSA-65', use: 'sign', rotated: '2h ago',   status: 'active' },
    { id: '14479df9…71af7e', alg: 'ML-DSA-65', use: 'sign', rotated: '4d ago',   status: 'active' },
    { id: '8413ad82…6055d754', alg: 'ML-DSA-65', use: 'sign', rotated: '1w ago — v1 retained', status: 'rotated' },
  ];
  return (
    <div style={{ border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden', background: 'white', fontFamily: 'var(--mono)', fontSize: 12.5 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.4fr 1fr 1fr 0.7fr', padding: '12px 16px', background: 'var(--bg-section)', borderBottom: '1px solid var(--line)', fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-4)' }}>
        <span>Key ID</span><span>Algorithm</span><span>Use</span><span>Last rotated</span><span>Status</span>
      </div>
      {rows.map((r, i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '2fr 1.4fr 1fr 1fr 0.7fr', padding: '14px 16px', borderBottom: i === rows.length - 1 ? 'none' : '1px solid var(--line)', alignItems: 'center' }}>
          <span style={{ color: 'var(--ink)' }}>{r.id}</span>
          <span style={{ color: 'var(--ink-3)' }}>{r.alg}</span>
          <span style={{ color: 'var(--ink-3)' }}>{r.use}</span>
          <span style={{ color: 'var(--ink-3)' }}>{r.rotated}</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: r.status === 'active' ? 'var(--good)' : 'var(--warn)' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'currentColor' }} />{r.status}
          </span>
        </div>
      ))}
    </div>
  );
}

function ComplianceTimeline() {
  const items = [
    { date: 'Aug 2024', label: 'NIST FIPS 203 finalized', status: 'shipped', body: 'ML-KEM-768 live across the encapsulate / decapsulate API' },
    { date: 'Aug 2024', label: 'NIST FIPS 204 finalized', status: 'shipped', body: 'ML-DSA-65 live across sign and verify' },
    { date: 'May 2026', label: 'Production rotation drill', status: 'shipped', body: 'Hundreds of keys re-encrypted under a fresh master key — zero downtime' },
    { date: 'Ongoing',  label: 'SOC 2-aligned posture',     status: 'shipped', body: 'Full audit trail, hardened runtime, scoped access controls in production' },
  ];
  return (
    <div style={{ border: '1px solid var(--line)', borderRadius: 12, background: 'white', padding: 8 }}>
      {items.map((it, i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 100px', gap: 16, padding: '14px 16px', alignItems: 'center', borderBottom: i === items.length - 1 ? 'none' : '1px dashed var(--line)' }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11.5, color: 'var(--ink-4)' }}>{it.date}</span>
          <div>
            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>{it.label}</div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-4)', marginTop: 2 }}>{it.body}</div>
          </div>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.06em', textTransform: 'uppercase', textAlign: 'right', color: it.status === 'shipped' ? 'var(--good)' : 'var(--warn)' }}>
            ● {it.status}
          </span>
        </div>
      ))}
    </div>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.ValueProps = ValueProps;
window.HowItWorks = HowItWorks;
window.HEADLINES = HEADLINES;