// Partners: Qryptec first, then the ecosystem we are growing.

const QRYPTEC_CAPABILITIES = [
  { n: '01', t: 'Quantum proof cryptography', b: 'Engineering aimed at the ciphers everything else depends on, hardened against near term quantum algorithms and quantum annealing attacks.' },
  { n: '02', t: 'Military grade security', b: 'Built to defence grade standards, drawn from work for commercial and state owned clients.' },
  { n: '03', t: 'Academic backbone', b: 'Grown from a research group with two decades of cryptography research. Leadership still teaches and researches at top universities.' },
  { n: '04', t: 'Consulting', b: 'Audits existing cyber assets and builds a cost effective roadmap against state and non state threats.' },
  { n: '05', t: 'Customised cryptography', b: 'Proprietary IP from years of in house R&D, adapted to each client rather than sold off the shelf.' },
  { n: '06', t: 'In house manufacturing', b: 'A dedicated team designs, builds and manufactures its own devices end to end.' },
];

function PartnersPage({ navigate }) {
  return (
    <>
      {/* Hero: text left, the key right */}
      <section className="q-hero">
        <div className="q-wrap">
          <div className="q-split">
            <div className="q-stack-lg">
              <Eyebrow>Our partners</Eyebrow>
              <h1 className="q-h1">Built with partners who <span className="q-accent">build</span>.</h1>
              <p className="q-lead" style={{ maxWidth: 520 }}>Qryptec is a post quantum cryptography company. It designs and manufactures the cryptographic hardware and software that closes the gap RSA and ECC leave open.</p>
              <p className="q-p" style={{ maxWidth: 520 }}>Their in house team designed and built our flagship hardware security key alongside us, from the cryptographic core to the enclosure.</p>
              <div className="q-actions">
                <button className="q-btn" onClick={() => navigate('solutions', { scrollTo: 'built-with-qryptec' })}>See the product <Arrow /></button>
                <button className="q-btn ghost" onClick={() => navigate('contact', { defaultType: 'Partnership / Ecosystem' })}>Partner with us</button>
              </div>
            </div>
            <KeyTeaser />
          </div>
        </div>
      </section>

      {/* What Qryptec brings: plain cards */}
      <section className="q-sec alt">
        <div className="q-wrap">
          <div className="q-head q-stack" style={{ marginBottom: 44 }}>
            <Eyebrow>What Qryptec brings</Eyebrow>
            <h2 className="q-h2">Six capabilities, one team.</h2>
          </div>
          <div className="q-grid c3">
            {QRYPTEC_CAPABILITIES.map((c, i) => (
              <Reveal key={c.n} delay={(i % 3) * 60}>
                <div className="q-card"><span className="q-num">{c.n}</span><h3 className="q-h3">{c.t}</h3><p className="q-p">{c.b}</p></div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Ecosystem */}
      <section className="q-sec">
        <div className="q-wrap">
          <div className="q-split rev">
            <div className="q-grid">
              {['Manufacturing partner', 'Research partner'].map((t) => (
                <div className="q-card flat q-open" key={t}><span className="q-num">OPEN</span><h3 className="q-h3">{t}</h3><p className="q-p">Space for the right partner.</p></div>
              ))}
            </div>
            <Reveal>
              <div className="q-stack-lg">
                <Eyebrow>Growing the ecosystem</Eyebrow>
                <h2 className="q-h2">We focus on what we do best, and partner for the rest.</h2>
                <p className="q-lead">Manufacturing, deployment and specialist research are areas where we work with partners. Qryptec is the first. It will not be the last.</p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <CtaBand title="Building hardware, software, or both? Let us talk." text="We are open to manufacturers, researchers and integrators working on the quantum safe transition." label="Start a conversation" onClick={() => navigate('contact', { defaultType: 'Partnership / Ecosystem' })} />
    </>
  );
}

Object.assign(window, { PartnersPage });