/* Hero, marquee, products grid, comparison, dashboard preview, EDR section, footer */

const Hero = ({ accent, variant }) => {
  const [tps, setTps] = React.useState(102847);
  React.useEffect(() => {
    const id = setInterval(() => setTps(t => t + Math.floor(Math.random() * 30 + 10)), 700);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow-row">
              <span className="pill accent"><Icon name="sparkle" size={12} color="var(--accent)"/> NIST FIPS 203 / 204 / 205 ready</span>
              <span className="pill dot">Shipping in 2026</span>
            </div>
            <h1>
              Post-quantum<br/>security, <em>without<br/>rewriting your stack.</em>
            </h1>
            <p className="hero-sub">
              QSec ships PQC-ready SD-WAN, ZTNA, EDR, and a 100K-TPS quantum-safe blockchain controller — appliances and cloud, with a hosted controller + SDK that gets enterprises and governments quantum-ready without touching the application layer.
            </p>
            <div className="hero-actions">
              <a className="btn primary">Start free trial <Icon name="arrow-right" size={14}/></a>
              <a className="btn ghost">Talk to engineering</a>
              <span className="ticker" style={{ marginLeft: 8 }}>
                <span className="ticker-dot"/>
                <span>{tps.toLocaleString()} TPS · live</span>
              </span>
            </div>

            <div className="hero-stats">
              <div>
                <div className="hero-stat-num">100K<sub>TPS</sub></div>
                <div className="hero-stat-label">PQC blockchain controller throughput</div>
              </div>
              <div>
                <div className="hero-stat-num">3.2<sub>ms</sub></div>
                <div className="hero-stat-label">Added latency, hybrid ML-KEM tunnels</div>
              </div>
              <div>
                <div className="hero-stat-num">5<sub>products</sub></div>
                <div className="hero-stat-label">Shipping appliance + cloud</div>
              </div>
            </div>
          </div>

          <div className="hero-visual">
            <HeroAppliance accent="var(--accent)"/>
          </div>
        </div>
      </div>
    </section>
  );
};

const Marquee = () => (
  <div className="marquee">
    <div className="marquee-track">
      {[...Array(2)].flatMap((_, copy) =>
        ['NIST FIPS 203 ML-KEM', 'NIST FIPS 204 ML-DSA', 'NIST FIPS 205 SLH-DSA',
         'CNSA 2.0', 'BSI TR-02102', 'RBI Quantum Advisory', 'Hybrid X25519+ML-KEM',
         'IPsec PQC', 'Wireguard PQC', 'TLS 1.3 hybrid', 'Crypto-agile by default'].map((t, i) => (
          <span key={`${copy}-${i}`} className="marquee-item">
            <Icon name="check" size={14} color="var(--accent)"/>
            {t}
          </span>
        ))
      )}
    </div>
  </div>
);

const PRODUCTS = [
  {
    id: 'sdwan', name: 'PQC SD-WAN', tag: 'Networking',
    desc: 'Site-to-site overlay with hybrid ML-KEM key exchange and ML-DSA-signed control plane. Drop-in for existing IPsec deployments.',
    badge: 'Appliance + Cloud',
    icon: 'router',
    specs: [['Throughput', '40 Gbps'], ['Tunnels', '8,192'], ['Algorithms', 'ML-KEM-768']],
    span: 8, big: true, viz: 'appliance', applianceLabel: 'QSEC', applianceSub: 'PQC-SDWAN'
  },
  {
    id: 'ztna', name: 'PQC ZTNA', tag: 'Access',
    desc: 'Identity-aware access with quantum-safe session binding. Per-app, per-user, per-device — no VPN.',
    badge: 'Appliance + Cloud',
    icon: 'lock',
    specs: [['Latency', '<8 ms'], ['Identities', 'SAML/OIDC'], ['Algorithms', 'ML-DSA-65']],
    span: 4, viz: 'appliance', applianceLabel: 'QSEC', applianceSub: 'PQC-ZTNA', ports: 4
  },
  {
    id: 'edr', name: 'PQC EDR', tag: 'Endpoint',
    desc: "World's first endpoint defense with PQC-signed agent attestation. Detects harvest-now-decrypt-later exfiltration patterns.",
    badge: 'World First',
    icon: 'shield',
    specs: [['Agents', 'Win/Mac/Linux'], ['Telemetry', 'eBPF'], ['Sign', 'ML-DSA']],
    span: 6, viz: 'edr', worldFirst: true,
  },
  {
    id: 'chain', name: 'PQC Blockchain Controller', tag: 'Ledger',
    desc: '100K TPS quantum-safe ledger for policy, key, and audit state. ML-DSA signatures, BFT consensus, deterministic finality.',
    badge: 'Hosted + On-prem',
    icon: 'cube',
    specs: [['TPS', '102,000+'], ['Finality', '< 1.2 s'], ['Consensus', 'BFT-PQC']],
    span: 6, viz: 'chain'
  },
  {
    id: 'controller', name: 'PQC Hosted Controller + SDK', tag: 'Platform',
    desc: 'A hosted control plane with a drop-in SDK. Get your apps quantum-ready without modifying their underlying crypto layer.',
    badge: 'Cloud + SDK',
    icon: 'cloud',
    specs: [['SDKs', 'Go · Rust · TS · Java · C'], ['Deploy', 'Helm · Terraform'], ['SLA', '99.99%']],
    span: 12, big: true, viz: 'controller'
  },
];

const ProductCardMedia = ({ p }) => {
  if (p.viz === 'appliance') {
    return (
      <div style={{ width: '100%', height: '100%', background: '#fafbfc', display: 'grid', placeItems: 'center', padding: '6% 5%' }}>
        <div style={{ width: '100%' }}>
          <ApplianceRender label={p.applianceLabel} subLabel={p.applianceSub} ports={p.ports || 8} accent="var(--accent)"/>
        </div>
      </div>
    );
  }
  if (p.viz === 'chain') return <div style={{ width: '100%', height: '100%' }}><ChainViz accent="var(--accent)"/></div>;
  if (p.viz === 'edr') return <div style={{ width: '100%', height: '100%' }}><EdrViz accent="var(--accent)"/></div>;
  if (p.viz === 'controller') return (
    <div style={{ width: '100%', height: '100%', background: '#fafbfc', padding: '32px 48px', display: 'grid', placeItems: 'center' }}>
      <div style={{ width: '100%', maxWidth: 720 }}>
        <DashMock accent="var(--accent)"/>
      </div>
    </div>
  );
  return null;
};

const ProductGrid = ({ onProductClick }) => (
  <section>
    <div className="container">
      <div className="section-head">
        <div className="text">
          <div className="eyebrow">Portfolio</div>
          <h2 className="h2">Five PQC-ready products. <span style={{ color: 'var(--ink-3)', fontWeight: 400 }}>One control plane.</span></h2>
        </div>
        <a className="btn ghost">Compare all <Icon name="arrow-right" size={14}/></a>
      </div>

      <div className="product-grid">
        {PRODUCTS.map(p => (
          <article
            key={p.id}
            className={`pcard span-${p.span}`}
            onClick={() => onProductClick(p)}
            style={p.big && p.viz === 'controller' ? { gridTemplateColumns: '1fr 1fr' } : null}
          >
            <div className="pcard-media" style={p.big && p.viz === 'controller' ? { aspectRatio: '21/9' } : null}>
              <ProductCardMedia p={p}/>
              {p.worldFirst && (
                <div style={{ position: 'absolute', top: 16, left: 16 }}>
                  <span className="pill world-first">★ World First</span>
                </div>
              )}
            </div>
            <div className="pcard-body">
              <div className="pcard-eyebrow">
                <Icon name={p.icon} size={14} color="var(--accent)"/>
                {p.tag} · {p.badge}
              </div>
              <h3 className="pcard-name">{p.name}</h3>
              <p className="pcard-desc">{p.desc}</p>
              <div className="pcard-footer">
                <div className="pcard-spec-list">
                  {p.specs.map(([k, v]) => (
                    <span key={k}>{k} <strong>{v}</strong></span>
                  ))}
                </div>
                <a className="btn linklike">Learn more <Icon name="arrow-right" size={14}/></a>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Compare = () => (
  <section style={{ background: 'var(--bg-2)' }}>
    <div className="container">
      <div className="section-head">
        <div className="text">
          <div className="eyebrow">Why now</div>
          <h2 className="h2">Classical crypto has an expiration date.</h2>
          <p className="lede mt-16">"Harvest now, decrypt later" attacks are happening today. Migrate at the protocol layer with QSec, not the application layer.</p>
        </div>
      </div>
      <div className="card" style={{ padding: 8, background: 'var(--bg)' }}>
        <table className="compare">
          <thead>
            <tr>
              <th>Capability</th>
              <th>Classical stack</th>
              <th>Bolt-on PQC libraries</th>
              <th style={{ color: 'var(--accent)' }}>QSec</th>
            </tr>
          </thead>
          <tbody>
            {[
              ['Quantum-safe key exchange', 'cross', 'check', 'check'],
              ['Hybrid (classical + PQC) by default', 'cross', 'cross', 'check'],
              ['Crypto-agile — swap algorithms without redeploy', 'cross', 'cross', 'check'],
              ['Works without modifying app layer', 'check', 'cross', 'check'],
              ['100K TPS audit ledger', 'cross', 'cross', 'check'],
              ['World-first PQC EDR', 'cross', 'cross', 'check'],
              ['Hosted controller + SDK', 'cross', 'cross', 'check'],
            ].map(([cap, c1, c2, c3], i) => (
              <tr key={i}>
                <td>{cap}</td>
                <td>{c1 === 'check' ? <span className="check"><Icon name="check" size={16}/></span> : <span className="cross"><Icon name="x" size={16}/></span>}</td>
                <td>{c2 === 'check' ? <span className="check"><Icon name="check" size={16}/></span> : <span className="cross"><Icon name="x" size={16}/></span>}</td>
                <td>{c3 === 'check' ? <span className="check"><Icon name="check" size={16}/></span> : <span className="cross"><Icon name="x" size={16}/></span>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </section>
);

const SDKSection = () => (
  <section>
    <div className="container">
      <div className="section-head">
        <div className="text">
          <div className="eyebrow">Hosted Controller + SDK</div>
          <h2 className="h2">Three lines. Quantum-safe.</h2>
          <p className="lede mt-16">Wrap your existing TLS, IPsec, gRPC, or message-bus traffic with the QSec SDK. Hybrid by default. ML-KEM and ML-DSA negotiated automatically.</p>
        </div>
      </div>
      <div className="product-grid">
        <div className="span-7" style={{ gridColumn: 'span 7' }}>
          <div className="code-block">
            <div><span className="com">// Drop-in PQC for any TLS connection</span></div>
            <div><span className="kw">import</span> {'{ qsec }'} <span className="kw">from</span> <span className="str">"@qsec/sdk"</span>;</div>
            <div><br/></div>
            <div><span className="kw">const</span> conn = <span className="kw">await</span> <span className="fn">qsec.connect</span>({'{'}</div>
            <div>{'  '}endpoint: <span className="str">"api.acme.gov.in:443"</span>,</div>
            <div>{'  '}suite: <span className="str">"hybrid-x25519-mlkem768"</span>,</div>
            <div>{'  '}attest: <span className="str">"ml-dsa-65"</span>,</div>
            <div>{'  '}controller: <span className="str">"controller.qsec.io"</span>,</div>
            <div>{'}'});</div>
            <div><br/></div>
            <div><span className="com">// Use like any socket. Crypto-agile.</span></div>
            <div><span className="kw">await</span> <span className="fn">conn.send</span>(payload);</div>
          </div>
        </div>
        <div className="span-5" style={{ gridColumn: 'span 5' }}>
          <div className="flex-col gap-16">
            {[
              { icon: 'layers', title: 'No app changes', desc: 'Wrap existing connections. Your code stays the same; the wire becomes quantum-safe.' },
              { icon: 'bolt', title: 'Crypto-agile', desc: 'Algorithms negotiate at runtime. Roll forward when NIST or CNSA changes the recommendation.' },
              { icon: 'database', title: 'Audit ledger built-in', desc: 'Every key exchange is signed and recorded on the PQC blockchain controller.' },
              { icon: 'globe', title: 'Cloud, on-prem, hybrid', desc: 'Hosted controller, self-hosted controller, or air-gapped — same SDK, same API.' },
            ].map(f => (
              <div key={f.title} className="flex gap-16" style={{ alignItems: 'flex-start' }}>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--accent-50)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                  <Icon name={f.icon} size={18} color="var(--accent)"/>
                </div>
                <div>
                  <div style={{ fontWeight: 600, marginBottom: 4 }}>{f.title}</div>
                  <div style={{ color: 'var(--ink-3)', fontSize: 14 }}>{f.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const ControllerSection = () => (
  <section style={{ background: 'var(--bg-2)' }}>
    <div className="container">
      <div className="section-head">
        <div className="text">
          <div className="eyebrow">Controller</div>
          <h2 className="h2">One pane of glass.<br/><span style={{ color: 'var(--ink-3)', fontWeight: 400 }}>Sites, tunnels, keys, devices, ledger — together.</span></h2>
        </div>
        <a className="btn primary">Tour the controller <Icon name="arrow-right" size={14}/></a>
      </div>
      <div className="dash">
        <div className="dash-tb">
          <span className="dot r"/><span className="dot y"/><span className="dot g"/>
          <span className="url">controller.qsec.io / overview</span>
        </div>
        <DashMock accent="var(--accent)"/>
      </div>
    </div>
  </section>
);

const CtaBand = () => (
  <section className="tight" style={{ background: 'var(--ink)', color: 'white', padding: '80px 0' }}>
    <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
      <div>
        <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>Get quantum-ready</div>
        <h2 className="h1" style={{ marginTop: 12, color: 'white', fontWeight: 500 }}>Pilot in 14 days.<br/>Production in 90.</h2>
      </div>
      <div className="flex gap-12" style={{ flexWrap: 'wrap' }}>
        <a className="btn" style={{ background: 'white', color: 'var(--ink)' }}>Request appliance</a>
        <a className="btn ghost" style={{ borderColor: 'rgba(255,255,255,0.2)', color: 'white' }}>Talk to sales</a>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="site">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div className="topnav-logo" style={{ marginBottom: 16 }}>
            <span className="glyph">Q</span>
            <span style={{ fontSize: 18 }}>QSec</span>
          </div>
          <p style={{ color: 'var(--ink-3)', fontSize: 13.5, maxWidth: 320, lineHeight: 1.55 }}>
            Post-quantum security for networks, clouds, and endpoints. Built in India, deployed worldwide.
          </p>
          <div className="flex gap-8 mt-24">
            {['NIST', 'CNSA 2.0', 'BSI', 'RBI'].map(b => (
              <span key={b} className="pill" style={{ fontSize: 11 }}>{b}</span>
            ))}
          </div>
        </div>
        <div className="footer-col">
          <h4>Products</h4>
          <ul>
            <li><a>PQC SD-WAN</a></li>
            <li><a>PQC ZTNA</a></li>
            <li><a>PQC EDR</a></li>
            <li><a>PQC Blockchain</a></li>
            <li><a>Controller + SDK</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Solutions</h4>
          <ul>
            <li><a>Government</a></li>
            <li><a>Banking</a></li>
            <li><a>Telecom</a></li>
            <li><a>Healthcare</a></li>
            <li><a>Critical infra</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Developers</h4>
          <ul>
            <li><a>SDK docs</a></li>
            <li><a>API reference</a></li>
            <li><a>Migration guide</a></li>
            <li><a>Status</a></li>
            <li><a>GitHub</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Company</h4>
          <ul>
            <li><a>About</a></li>
            <li><a>Careers</a></li>
            <li><a>Press</a></li>
            <li><a>Contact</a></li>
            <li><a>Trust center</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-meta">
        <div>© 2026 QSec Networks. All rights reserved.</div>
        <div className="flex gap-16">
          <a>Privacy</a><a>Terms</a><a>Security</a><a>Cookies</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Hero, Marquee, ProductGrid, Compare, SDKSection, ControllerSection, CtaBand, Footer, PRODUCTS });