/* Product detail page (PQC SD-WAN) */

const ProductDetail = ({ onNavigate }) => {
  const [tab, setTab] = React.useState('appliance');

  const appliances = [
    { name: 'QSec Edge 8', sub: 'Branch site · 1 Gbps', ports: 4, sku: 'QS-EDGE-8' },
    { name: 'QSec Edge 24', sub: 'Regional · 10 Gbps', ports: 8, sku: 'QS-EDGE-24' },
    { name: 'QSec Edge 96', sub: 'Datacenter · 40 Gbps', ports: 16, sku: 'QS-EDGE-96' },
  ];

  return (
    <div>
      {/* Breadcrumb */}
      <div style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
        <div className="container" style={{ padding: '12px 24px', fontSize: 12.5, color: 'var(--ink-3)' }}>
          <a onClick={() => onNavigate('home')} style={{ cursor: 'pointer' }}>Home</a>
          <span style={{ margin: '0 8px' }}>/</span>
          <a>Products</a>
          <span style={{ margin: '0 8px' }}>/</span>
          <span style={{ color: 'var(--ink)' }}>PQC SD-WAN</span>
        </div>
      </div>

      {/* Hero */}
      <section style={{ paddingBlock: 80 }}>
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-eyebrow-row">
                <span className="pill accent"><Icon name="router" size={12} color="var(--accent)"/> Networking · Appliance + Cloud</span>
              </div>
              <h1 style={{ fontFamily: 'Instrument Serif, serif', fontWeight: 400, fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 0.96, letterSpacing: '-0.025em', margin: '0 0 20px' }}>
                PQC <em style={{ color: 'var(--accent)' }}>SD-WAN</em>
              </h1>
              <p className="lede">
                A site-to-site overlay that negotiates hybrid X25519+ML-KEM key exchange and signs control-plane state with ML-DSA — running on the same wire your IPsec does today.
              </p>
              <div className="hero-actions mt-32">
                <a className="btn primary">Configure & quote <Icon name="arrow-right" size={14}/></a>
                <a className="btn ghost">Datasheet (PDF)</a>
              </div>
            </div>
            <div className="hero-visual" style={{ aspectRatio: '4/3', background: '#fafbfc' }}>
              <div style={{ width: '100%', height: '100%', display: 'grid', placeItems: 'center', padding: '6%' }}>
                <ApplianceRender label="QSec" subLabel="PQC-SDWAN" ports={10}/>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Spec sheet */}
      <section className="tight" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="spec-grid">
            {[
              ['Throughput', '40', 'Gbps'],
              ['Tunnels', '8,192', 'concurrent'],
              ['Added latency', '3.2', 'ms'],
              ['Algorithms', 'ML-KEM-768', '+ X25519'],
            ].map(([l, v, s]) => (
              <div key={l} className="spec-cell">
                <div className="label">{l}</div>
                <div className="value">{v}<sub>{s}</sub></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Tabs: appliance / cloud / sdk */}
      <section>
        <div className="container">
          <div className="section-head">
            <div className="text">
              <div className="eyebrow">Form factors</div>
              <h2 className="h2">Choose how you deploy.</h2>
            </div>
            <div className="tabs">
              {['appliance', 'cloud', 'sdk'].map(t => (
                <button key={t} className={`tab ${tab === t ? 'active' : ''}`} onClick={() => setTab(t)}>
                  {t === 'sdk' ? 'SDK' : t.charAt(0).toUpperCase() + t.slice(1)}
                </button>
              ))}
            </div>
          </div>

          {tab === 'appliance' && (
            <div className="product-grid">
              {appliances.map(a => (
                <article key={a.sku} className="pcard span-4 hoverable">
                  <div className="pcard-media" style={{ aspectRatio: '16/10' }}>
                    <div style={{ width: '100%', height: '100%', background: '#fafbfc', display: 'grid', placeItems: 'center', padding: '8% 6%' }}>
                      <ApplianceRender label="QSec" subLabel="PQC-SDWAN" ports={a.ports}/>
                    </div>
                  </div>
                  <div className="pcard-body">
                    <div className="pcard-eyebrow">{a.sku}</div>
                    <h3 className="pcard-name">{a.name}</h3>
                    <p className="pcard-desc">{a.sub}</p>
                    <div className="pcard-footer">
                      <span style={{ fontSize: 13, color: 'var(--ink-3)' }}>From <strong style={{ color: 'var(--ink)' }}>$2,400</strong></span>
                      <a className="btn linklike">Configure <Icon name="arrow-right" size={14}/></a>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          )}

          {tab === 'cloud' && (
            <div className="product-grid">
              <div className="span-12" style={{ gridColumn: 'span 12' }}>
                <div className="card" style={{ padding: 0 }}>
                  <div style={{ aspectRatio: '21/9', borderBottom: '1px solid var(--line)' }}>
                    <CloudBadge accent="var(--accent)" label="QSEC CLOUD"/>
                  </div>
                  <div style={{ padding: 32, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32 }}>
                    {[
                      { t: 'Hosted gateway', d: 'Spin up PQC SD-WAN POPs in 14 regions. No appliance needed.' },
                      { t: 'BYOC', d: 'Run gateways in your AWS / Azure / GCP / OCI account.' },
                      { t: 'Hybrid', d: 'Mix appliance branches with cloud spokes — same control plane.' },
                    ].map(f => (
                      <div key={f.t}>
                        <div style={{ fontWeight: 600, marginBottom: 6 }}>{f.t}</div>
                        <div style={{ fontSize: 13.5, color: 'var(--ink-3)' }}>{f.d}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}

          {tab === 'sdk' && (
            <div className="product-grid">
              <div className="span-7" style={{ gridColumn: 'span 7' }}>
                <div className="code-block">
                  <div><span className="com"># Linux: drop-in PQC IPsec replacement</span></div>
                  <div>$ <span className="fn">qsec-sdwan</span> connect \</div>
                  <div>{'    '}--peer mumbai-hq.qsec.io \</div>
                  <div>{'    '}--suite hybrid-x25519-mlkem768 \</div>
                  <div>{'    '}--sign ml-dsa-65</div>
                  <div><br/></div>
                  <div><span className="com">[ok] Tunnel up · 3.2 ms RTT · ML-KEM-768</span></div>
                  <div><span className="com">[ok] Control plane signed · ML-DSA-65</span></div>
                  <div><span className="com">[ok] Ledger receipt · 0xa9c2…f81e</span></div>
                </div>
              </div>
              <div className="span-5" style={{ gridColumn: 'span 5' }}>
                <p className="lede">A single binary that negotiates hybrid PQC over standard UDP/4500. No kernel modules. Works inside containers, VMs, and bare metal.</p>
                <ul style={{ listStyle: 'none', padding: 0, marginTop: 24 }}>
                  {['Linux x86_64 / arm64', 'Windows Server 2019+', 'macOS 13+', 'BSD'].map(p => (
                    <li key={p} style={{ padding: '10px 0', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', fontSize: 14 }}>
                      <span>{p}</span>
                      <a className="btn linklike">Download <Icon name="arrow-up-right" size={12}/></a>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Architecture */}
      <section style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="section-head">
            <div className="text">
              <div className="eyebrow">Architecture</div>
              <h2 className="h2">Hybrid by default.</h2>
              <p className="lede mt-16">Every tunnel runs classical X25519 in parallel with ML-KEM-768. If either is broken, the session is still safe.</p>
            </div>
          </div>
          <div className="card" style={{ padding: 48, background: 'var(--bg)' }}>
            <svg viewBox="0 0 1000 280" style={{ width: '100%', height: 'auto' }}>
              <defs>
                <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto">
                  <path d="M0 0L10 5L0 10z" fill="var(--accent)"/>
                </marker>
              </defs>
              {/* nodes */}
              {[
                { x: 80, y: 140, label: 'Branch', sub: 'QSec Edge 8' },
                { x: 380, y: 80, label: 'Regional POP', sub: 'QSec Cloud' },
                { x: 380, y: 200, label: 'Controller', sub: 'PQC ledger' },
                { x: 720, y: 80, label: 'HQ', sub: 'QSec Edge 96' },
                { x: 720, y: 200, label: 'AWS VPC', sub: 'BYOC gateway' },
              ].map((n, i) => (
                <g key={i}>
                  <rect x={n.x - 70} y={n.y - 30} width="140" height="60" rx="8" fill="#fff" stroke="var(--line)"/>
                  <text x={n.x} y={n.y - 6} textAnchor="middle" fontSize="13" fontWeight="600" fontFamily="Inter, sans-serif" fill="var(--ink)">{n.label}</text>
                  <text x={n.x} y={n.y + 14} textAnchor="middle" fontSize="11" fontFamily="Inter, sans-serif" fill="var(--ink-3)">{n.sub}</text>
                </g>
              ))}
              {/* tunnels */}
              {[
                [150, 140, 310, 80], [150, 140, 310, 200],
                [450, 80, 650, 80], [450, 200, 650, 200],
                [450, 80, 650, 200], [450, 200, 650, 80],
              ].map(([x1,y1,x2,y2], i) => (
                <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--accent)" strokeWidth="1.6" strokeDasharray="4 4" markerEnd="url(#arrow)" opacity="0.65"/>
              ))}
              {/* labels on links */}
              <text x="500" y="60" textAnchor="middle" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="var(--ink-3)">hybrid X25519 + ML-KEM-768</text>
            </svg>
          </div>
        </div>
      </section>
    </div>
  );
};

window.ProductDetail = ProductDetail;