/* Solutions, Developers, Company pages */

const SolutionsPage = ({ onNavigate }) => {
  const solutions = [
    { id: 'audit', name: 'PQC Audit', icon: 'search', tag: 'Discovery',
      desc: 'Scan your environment for quantum-vulnerable cryptography. Get a CBOM (cryptographic bill of materials), risk score per asset, and a phased migration plan.',
      kpis: [['Assets scanned', '12,400+'], ['Algos detected', 'RSA · ECDSA · DH · ECC'], ['Output', 'CBOM + risk map']],
      featured: true, accent: true },
    { id: 'hndl', name: 'Harvest-Now-Decrypt-Later', icon: 'shield', tag: 'Threat',
      desc: 'Identify long-lived secrets exposed to capture today and decryption tomorrow. Wrap them with hybrid PQC immediately.',
      kpis: [['Risk window', '5–15 yrs'], ['Coverage', 'TLS · IPsec · SSH'], ['Mitigation', 'Hybrid wrap']] },
    { id: 'nist', name: 'NIST Migration', icon: 'key', tag: 'Standards',
      desc: 'Phased rollout to ML-KEM, ML-DSA, and SLH-DSA aligned to NIST FIPS 203/204/205 and CNSA 2.0 timelines.',
      kpis: [['Algos', 'ML-KEM · ML-DSA · SLH-DSA'], ['Compliance', 'CNSA 2.0 · BSI'], ['Hybrid', 'X25519 + ML-KEM']] },
    { id: 'tls', name: 'Hybrid TLS', icon: 'lock', tag: 'Transport',
      desc: 'Drop-in TLS 1.3 with hybrid key exchange. Browsers, services, edge — all negotiating classical + PQC in parallel.',
      kpis: [['Latency', '+2.4 ms'], ['Compat', 'TLS 1.3'], ['Mode', 'Hybrid']] },
    { id: 'vpn', name: 'Quantum-Safe VPN', icon: 'globe', tag: 'Networking',
      desc: 'IPsec and Wireguard, post-quantum. Same wire, same operations, future-proof key exchange.',
      kpis: [['Protocols', 'IPsec · WG'], ['Throughput', '40 Gbps'], ['Tunnels', '8,192']] },
    { id: 'agility', name: 'Crypto-Agility', icon: 'bolt', tag: 'Operations',
      desc: 'Algorithms negotiated at runtime. Roll forward when standards or threats change — no redeploy.',
      kpis: [['Roll forward', '< 5 min'], ['Algorithms', 'Pluggable'], ['Audit', 'Ledger-backed']] },
  ];
  const industries = [
    { name: 'Government & Defense', desc: 'Sovereign-grade PQC for classified networks.', icon: 'shield' },
    { name: 'Banking & Finance', desc: 'RBI quantum advisory aligned. Long-tail data protection.', icon: 'database' },
    { name: 'Telecom & ISP', desc: 'Carrier-grade PQC for backhaul and subscriber traffic.', icon: 'antenna' },
    { name: 'Healthcare', desc: '50-year retention for genomic and clinical data.', icon: 'cube' },
    { name: 'Critical Infrastructure', desc: 'OT, SCADA, and grid-edge PQC overlays.', icon: 'circuit' },
    { name: 'Cloud & SaaS', desc: 'Wrap multi-tenant traffic without app changes.', icon: 'cloud' },
  ];

  return (
    <div>
      <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>
          <span style={{ color: 'var(--ink)' }}>Solutions</span>
        </div>
      </div>

      <section style={{ paddingBlock: 80 }}>
        <div className="container">
          <div className="hero-eyebrow-row">
            <span className="pill accent">Solutions</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', maxWidth: 920 }}>
            Six paths to <em style={{ color: 'var(--accent)' }}>quantum-ready</em>.<br/>
            Start with an audit.
          </h1>
          <p className="lede">Map your cryptographic surface, prioritize by risk, and migrate at the protocol layer — without rewriting applications.</p>
        </div>
      </section>

      <section className="tight">
        <div className="container">
          <div className="product-grid">
            {solutions.map(s => (
              <article key={s.id} className={`pcard ${s.featured ? 'span-12' : 'span-4'}`} style={s.featured ? { display: 'grid', gridTemplateColumns: '1.1fr 1fr', alignItems: 'stretch' } : null}>
                {s.featured && (
                  <div style={{ padding: 48, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                    <div className="pcard-eyebrow"><Icon name={s.icon} size={14} color="var(--accent)"/> {s.tag} · Featured</div>
                    <h3 className="h2" style={{ marginTop: 12 }}>{s.name}</h3>
                    <p className="lede" style={{ marginTop: 16 }}>{s.desc}</p>
                    <div className="hero-stats" style={{ marginTop: 32, paddingTop: 24, gridTemplateColumns: 'repeat(3, 1fr)' }}>
                      {s.kpis.map(([k, v]) => (
                        <div key={k}>
                          <div className="hero-stat-num" style={{ fontSize: 24 }}>{v}</div>
                          <div className="hero-stat-label">{k}</div>
                        </div>
                      ))}
                    </div>
                    <div className="hero-actions" style={{ marginTop: 32 }}>
                      <a className="btn primary">Run an audit <Icon name="arrow-right" size={14}/></a>
                      <a className="btn ghost">Sample CBOM (PDF)</a>
                    </div>
                  </div>
                )}
                {s.featured && (
                  <div style={{ background: '#fafbfc', borderLeft: '1px solid var(--line)', padding: 32, display: 'flex', alignItems: 'center' }}>
                    <AuditViz/>
                  </div>
                )}
                {!s.featured && (
                  <div className="pcard-body" style={{ padding: 28 }}>
                    <div className="pcard-eyebrow"><Icon name={s.icon} size={14} color="var(--accent)"/> {s.tag}</div>
                    <h3 className="pcard-name">{s.name}</h3>
                    <p className="pcard-desc">{s.desc}</p>
                    <div className="pcard-spec-list" style={{ marginTop: 16 }}>
                      {s.kpis.map(([k, v]) => <span key={k}>{k} <strong>{v}</strong></span>)}
                    </div>
                    <a className="btn linklike" style={{ marginTop: 20 }}>Learn more <Icon name="arrow-right" size={14}/></a>
                  </div>
                )}
              </article>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="section-head">
            <div className="text">
              <div className="eyebrow">By industry</div>
              <h2 className="h2">Where QSec ships today.</h2>
            </div>
          </div>
          <div className="product-grid">
            {industries.map(ind => (
              <article key={ind.name} className="pcard span-4 hoverable">
                <div className="pcard-body">
                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--accent-50)', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
                    <Icon name={ind.icon} size={20} color="var(--accent)"/>
                  </div>
                  <h3 className="pcard-name">{ind.name}</h3>
                  <p className="pcard-desc">{ind.desc}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// Audit visual — a CBOM-style discovery panel
const AuditViz = () => (
  <svg viewBox="0 0 480 360" style={{ width: '100%', height: 'auto' }}>
    <rect width="480" height="360" rx="8" fill="#fff" stroke="#e5e7eb"/>
    {/* header */}
    <rect x="0" y="0" width="480" height="40" rx="8" fill="#fafbfc"/>
    <text x="20" y="25" fontSize="11" fontWeight="600" fontFamily="Inter, sans-serif" fill="#1c1d1f" letterSpacing="0.5">CBOM · acme.gov.in</text>
    <circle cx="450" cy="20" r="4" fill="#10864c"/>
    {/* risk legend */}
    <g transform="translate(20, 60)">
      <text fontSize="9" letterSpacing="1" fontWeight="600" fontFamily="Inter, sans-serif" fill="#6b6e74">QUANTUM RISK BY ALGORITHM</text>
    </g>
    {/* stacked bars */}
    {[
      ['RSA-2048', 240, 'high'],
      ['ECDSA-P256', 180, 'high'],
      ['DH-2048', 120, 'high'],
      ['AES-256', 60, 'low'],
      ['ML-KEM-768', 40, 'safe'],
    ].map(([algo, w, risk], i) => {
      const color = risk === 'high' ? '#c7242c' : risk === 'low' ? '#b95400' : 'var(--accent)';
      return (
        <g key={algo} transform={`translate(20, ${88 + i*30})`}>
          <text fontSize="11" fontFamily="JetBrains Mono, monospace" fill="#1c1d1f">{algo}</text>
          <rect x="120" y="-10" width="240" height="14" rx="3" fill="#f1f3f5"/>
          <rect x="120" y="-10" width={w} height="14" rx="3" fill={color}/>
          <text x="370" y="0" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="#6b6e74">{risk}</text>
        </g>
      );
    })}
    {/* mini pie */}
    <g transform="translate(380, 250)">
      <circle r="50" fill="#f1f3f5"/>
      <path d="M0 -50 A50 50 0 0 1 47.5 -15.5 L0 0 Z" fill="#c7242c"/>
      <path d="M47.5 -15.5 A50 50 0 0 1 31 39 L0 0 Z" fill="#b95400"/>
      <path d="M31 39 A50 50 0 0 1 -50 0 L0 0 Z" fill="var(--accent)"/>
      <circle r="28" fill="#fff"/>
      <text textAnchor="middle" y="-2" fontSize="14" fontFamily="Instrument Serif, serif" fill="#1c1d1f">62%</text>
      <text textAnchor="middle" y="12" fontSize="8" fontFamily="Inter, sans-serif" fill="#6b6e74">at risk</text>
    </g>
    {/* migration */}
    <g transform="translate(20, 270)">
      <text fontSize="9" letterSpacing="1" fontWeight="600" fontFamily="Inter, sans-serif" fill="#6b6e74">MIGRATION PLAN</text>
      {[['Phase 1 · Hybrid TLS', '14 days'], ['Phase 2 · IPsec PQC', '30 days'], ['Phase 3 · Full PQ', '90 days']].map(([p, t], i) => (
        <g key={p} transform={`translate(0, ${20 + i*18})`}>
          <circle cx="6" cy="0" r="3" fill="var(--accent)"/>
          <text x="16" y="3" fontSize="11" fontFamily="Inter, sans-serif" fill="#1c1d1f">{p}</text>
          <text x="220" y="3" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="#6b6e74">{t}</text>
        </g>
      ))}
    </g>
  </svg>
);

const DevelopersPage = ({ onNavigate }) => {
  const sdks = [
    { lang: 'Go', install: 'go get github.com/qsec/qsec-go', icon: 'G' },
    { lang: 'Rust', install: 'cargo add qsec', icon: 'R' },
    { lang: 'TypeScript', install: 'npm i @qsec/sdk', icon: 'TS' },
    { lang: 'Python', install: 'pip install qsec', icon: 'Py' },
    { lang: 'Java', install: 'implementation "io.qsec:sdk:1.0"', icon: 'J' },
    { lang: 'C', install: 'apt install libqsec-dev', icon: 'C' },
  ];

  return (
    <div>
      <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>
          <span style={{ color: 'var(--ink)' }}>Developers</span>
        </div>
      </div>

      <section style={{ paddingBlock: 80 }}>
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-eyebrow-row">
                <span className="pill accent"><Icon name="code" size={12} color="var(--accent)"/> Developers</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' }}>
                Build <em style={{ color: 'var(--accent)' }}>quantum-safe</em><br/>in an afternoon.
              </h1>
              <p className="lede">Six SDKs. One API. Wrap your existing TLS, IPsec, gRPC, or message-bus traffic and ship hybrid PQC today.</p>
              <div className="hero-actions mt-32">
                <a className="btn primary">Read the docs <Icon name="arrow-right" size={14}/></a>
                <a className="btn ghost">View on GitHub <Icon name="arrow-up-right" size={12}/></a>
              </div>
            </div>
            <div>
              <div className="code-block">
                <div><span className="com">// Hybrid PQC TLS in 4 lines</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"</span>,</div>
                <div>{'  '}suite: <span className="str">"hybrid-x25519-mlkem768"</span>,</div>
                <div>{'}'});</div>
                <div><span className="kw">await</span> <span className="fn">conn.send</span>(payload);</div>
                <div style={{ marginTop: 12, color: '#6b7280' }}>{'──'}</div>
                <div><span className="com">// $ qsec test</span></div>
                <div><span className="com">// [ok] handshake · ML-KEM-768 · 12 ms</span></div>
                <div><span className="com">// [ok] attest    · ML-DSA-65  · 4 ms</span></div>
                <div><span className="com">// [ok] ledger    · 0xa9c2…f81e</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="tight">
        <div className="container">
          <div className="section-head">
            <div className="text">
              <div className="eyebrow">SDKs</div>
              <h2 className="h2">First-class support across your stack.</h2>
            </div>
          </div>
          <div className="product-grid">
            {sdks.map(s => (
              <article key={s.lang} className="pcard span-4 hoverable">
                <div className="pcard-body">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                    <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--accent-50)', color: 'var(--accent)', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 13 }}>{s.icon}</div>
                    <h3 className="pcard-name" style={{ fontSize: 18 }}>{s.lang}</h3>
                  </div>
                  <code style={{ display: 'block', background: '#0b1020', color: '#e6e9ef', padding: '10px 12px', borderRadius: 6, fontSize: 12, fontFamily: 'JetBrains Mono, monospace', overflow: 'auto' }}>{s.install}</code>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 16, fontSize: 12, color: 'var(--ink-3)' }}>
                    <span>v1.0.4 · MIT</span>
                    <a className="btn linklike" style={{ fontSize: 12 }}>Docs →</a>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="section-head">
            <div className="text">
              <div className="eyebrow">Resources</div>
              <h2 className="h2">Everything you need to migrate.</h2>
            </div>
          </div>
          <div className="product-grid">
            {[
              { icon: 'code', title: 'API Reference', desc: 'Full OpenAPI spec for the controller and SDK methods.', tag: 'Docs' },
              { icon: 'layers', title: 'Migration Guide', desc: 'From classical TLS, IPsec, and SSH to hybrid PQC, step-by-step.', tag: 'Guide' },
              { icon: 'cube', title: 'Architecture Patterns', desc: 'Reference architectures for branch, datacenter, and air-gapped.', tag: 'Patterns' },
              { icon: 'database', title: 'CBOM Schema', desc: 'JSON schema for cryptographic bill of materials.', tag: 'Spec' },
              { icon: 'shield', title: 'Security Whitepapers', desc: 'Threat models, formal proofs, and audit reports.', tag: 'Papers' },
              { icon: 'zap', title: 'Status & Changelog', desc: 'Live status, release notes, and deprecations.', tag: 'Live' },
            ].map(r => (
              <article key={r.title} className="pcard span-4 hoverable">
                <div className="pcard-body">
                  <div className="pcard-eyebrow"><Icon name={r.icon} size={14} color="var(--accent)"/> {r.tag}</div>
                  <h3 className="pcard-name" style={{ fontSize: 18 }}>{r.title}</h3>
                  <p className="pcard-desc">{r.desc}</p>
                  <a className="btn linklike" style={{ marginTop: 8 }}>Open <Icon name="arrow-up-right" size={12}/></a>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="card" style={{ padding: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
            <div>
              <div className="eyebrow">Open source</div>
              <h2 className="h2" style={{ marginTop: 12 }}>We ship in the open.</h2>
              <p className="lede mt-16">Core SDKs and reference implementations are MIT-licensed. Audited by independent cryptographers. CBOM schema is community-governed.</p>
              <div className="hero-actions mt-32">
                <a className="btn secondary"><Icon name="code" size={14}/> github.com/qsec</a>
                <a className="btn ghost">Discord →</a>
              </div>
            </div>
            <div style={{ background: 'var(--bg-2)', borderRadius: 10, padding: 32, border: '1px solid var(--line)' }}>
              {[
                ['qsec/qsec-sdk', 'TypeScript', '4.2k'],
                ['qsec/qsec-go', 'Go', '2.8k'],
                ['qsec/qsec-rs', 'Rust', '1.9k'],
                ['qsec/cbom-schema', 'JSON', '640'],
              ].map(([repo, lang, stars], i) => (
                <div key={repo} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderBottom: i < 3 ? '1px solid var(--line)' : 'none', alignItems: 'center' }}>
                  <div>
                    <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: 'var(--ink)', fontWeight: 500 }}>{repo}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4 }}>{lang}</div>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'JetBrains Mono, monospace' }}>★ {stars}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

const CompanyPage = ({ onNavigate }) => {
  const team = [
    { name: 'Anika Rao', role: 'Co-founder, CEO', bio: 'Ex-Cisco SD-WAN. NIST PQC working group.' },
    { name: 'Vikram Shah', role: 'Co-founder, CTO', bio: 'Cryptography PhD, IIT Bombay. ML-KEM contributor.' },
    { name: 'Priya Menon', role: 'VP Engineering', bio: 'Ex-Palo Alto. 12 years in network security.' },
    { name: 'Rahul Iyer', role: 'VP Cryptography', bio: 'Lattice-based crypto. ePrint author.' },
  ];
  const investors = ['Sequoia', 'Accel', 'Lightspeed', 'Z47', 'Blume', 'Peak XV'];
  const milestones = [
    ['2023', 'Founded in Bengaluru. NIST FIPS 203 draft published same year.'],
    ['2024', 'Series A · $18M led by Sequoia. First PQC SD-WAN appliances ship to pilot customers.'],
    ['2025', '100K TPS PQC blockchain controller online. CNSA 2.0 alignment certified.'],
    ['2026', 'World-first PQC EDR ships. Hosted controller GA in 14 regions.'],
  ];

  return (
    <div>
      <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>
          <span style={{ color: 'var(--ink)' }}>Company</span>
        </div>
      </div>

      <section style={{ paddingBlock: 80 }}>
        <div className="container">
          <div className="hero-eyebrow-row">
            <span className="pill accent">About QSec</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', maxWidth: 880 }}>
            Building the <em style={{ color: 'var(--accent)' }}>quantum-safe</em><br/>internet, one wire at a time.
          </h1>
          <p className="lede">QSec was founded in 2023 by veterans of network security and lattice-based cryptography to make post-quantum migration something a network engineer can ship in a sprint — not a five-year program.</p>
        </div>
      </section>

      <section className="tight" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="spec-grid">
            {[['Founded', '2023', 'Bengaluru'], ['Funding', '$24M', 'Series A'], ['Headcount', '74', 'engineers'], ['Customers', '120+', 'enterprises']].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>

      <section>
        <div className="container">
          <div className="section-head">
            <div className="text">
              <div className="eyebrow">Mission</div>
              <h2 className="h2">Make post-quantum the default.<br/><span style={{ color: 'var(--ink-3)', fontWeight: 400 }}>Without rewriting the world.</span></h2>
              <p className="lede mt-16">A useful quantum computer is a question of when, not if. The data being captured today is already at risk. We believe the migration has to happen at the protocol layer — silently, automatically, and crypto-agile from day one.</p>
            </div>
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="section-head">
            <div className="text">
              <div className="eyebrow">Timeline</div>
              <h2 className="h2">Three years. Five products.</h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {milestones.map(([year, evt], i) => (
              <div key={year} className="card" style={{ padding: 24, background: 'var(--bg)' }}>
                <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 36, color: 'var(--accent)', lineHeight: 1 }}>{year}</div>
                <div style={{ width: 24, height: 2, background: 'var(--accent)', margin: '12px 0 16px', opacity: 0.5 }}/>
                <div style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>{evt}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="section-head">
            <div className="text">
              <div className="eyebrow">Leadership</div>
              <h2 className="h2">Cryptographers shipping products.</h2>
            </div>
          </div>
          <div className="product-grid">
            {team.map(t => (
              <article key={t.name} className="pcard span-3">
                <div style={{ aspectRatio: '1/1', background: 'linear-gradient(135deg, var(--accent-50), #fafbfc)', borderBottom: '1px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
                    <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 88, color: 'var(--accent)', opacity: 0.8 }}>{t.name.split(' ').map(n => n[0]).join('')}</div>
                  </div>
                </div>
                <div className="pcard-body">
                  <h3 className="pcard-name" style={{ fontSize: 18 }}>{t.name}</h3>
                  <div style={{ fontSize: 12.5, color: 'var(--accent)', fontWeight: 500, marginTop: -4 }}>{t.role}</div>
                  <p className="pcard-desc" style={{ marginTop: 8 }}>{t.bio}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="section-head">
            <div className="text">
              <div className="eyebrow">Backed by</div>
              <h2 className="h2">Investors who back deep tech.</h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
            {investors.map(i => (
              <div key={i} className="card" style={{ padding: '32px 16px', textAlign: 'center', background: 'var(--bg)' }}>
                <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 24, color: 'var(--ink-2)' }}>{i}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="card" style={{ padding: 48, background: 'var(--bg)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 48, alignItems: 'center' }}>
              <div>
                <div className="eyebrow">Careers</div>
                <h2 className="h2" style={{ marginTop: 12 }}>Help us ship.</h2>
                <p className="lede mt-16">Hiring across cryptography, networking, and platform. Bengaluru, Pune, and remote.</p>
                <a className="btn primary mt-24">See 18 open roles <Icon name="arrow-right" size={14}/></a>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                {[
                  ['Cryptographer', 'Lattices · ePrint'],
                  ['Senior SRE', 'Controller · K8s'],
                  ['Kernel Engineer', 'eBPF · Linux'],
                  ['Product Designer', 'Controller · UI'],
                  ['Solutions Architect', 'Government'],
                  ['Developer Advocate', 'SDK · Open source'],
                ].map(([role, area]) => (
                  <div key={role} className="card hoverable" style={{ padding: 16, cursor: 'pointer' }}>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{role}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>{area}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { SolutionsPage, DevelopersPage, CompanyPage });