// Solutions page — educational, problem-focused, no secret sauce
function SolutionsPage() {

  const hardwareProblems = [
    {
      n: '01',
      t: 'Physical Infrastructure Was Not Built for Quantum Threats',
      b: 'Most hardware deployed in critical infrastructure — networking equipment, security appliances, key management systems — was designed and procured before post-quantum cryptography existed as a practical standard. The cryptographic assumptions baked into that hardware are now approaching their operational limits. Replacing hardware wholesale is expensive and disruptive. The challenge is upgrading protection without replacing infrastructure.',
    },
    {
      n: '02',
      t: 'Key Distribution Is the Core Vulnerability',
      b: 'The security of any encrypted system ultimately depends on how cryptographic keys are generated, distributed, and managed. In classical systems, key distribution relies on mathematical problems that quantum computers can solve efficiently. Physical key distribution — using the principles of quantum mechanics rather than mathematical hardness — offers a fundamentally different approach to this problem, one that remains secure regardless of computational advances.',
    },
    {
      n: '03',
      t: 'Sovereign and Air-Gapped Environments Have Unique Requirements',
      b: "Government networks, defence infrastructure, and classified systems cannot rely on cloud-based or software-only cryptographic solutions. They require physical, on-premises security that operates independently of external infrastructure — with no single point of failure and no dependency on network connectivity. These environments need hardware specifically designed for sovereign-grade isolation.",
    },
  ];

  const softwareProblems = [
    {
      n: '01',
      t: 'Existing Software Relies on Cryptography That Will Become Vulnerable',
      b: "The encryption protecting data in transit and at rest across virtually every enterprise and government system today — TLS, RSA, elliptic curve cryptography — was not designed to withstand quantum attacks. Organisations cannot simply wait for software vendors to issue updates. Understanding which systems are most exposed and planning a structured migration is a capability organisations need to build now.",
    },
    {
      n: '02',
      t: 'Legacy Systems Cannot Be Easily Replaced',
      b: "Critical infrastructure software stacks are not replaced on short cycles. Healthcare systems, financial platforms, energy management software, and government IT infrastructure have multi-decade operational lifespans. The challenge is not building new systems from scratch — it is introducing quantum-safe cryptographic protection into existing systems without disrupting operations, without re-architecting applications, and without requiring extended downtime.",
    },
    {
      n: '03',
      t: 'Detecting Quantum-Targeted Threats Requires New Approaches',
      b: "The Harvest Now, Decrypt Later threat model does not produce observable incidents the way classical attacks do. Encrypted data being collected for future decryption looks identical to normal network traffic. Protecting against this requires a different kind of security awareness — one that accounts for the long-term confidentiality requirements of data being generated and transmitted today.",
    },
  ];

  const regulatory = [
    {
      tag: 'ITSM.40.001',
      body: "The Canadian Centre for Cyber Security's PQC Migration Roadmap (June 2025) — the primary federal guidance document setting out expectations and timelines for all Government of Canada departments to transition to quantum-safe cryptographic standards.",
    },
    {
      tag: 'CSE ITSP.40.111',
      body: "The Communications Security Establishment's approved cryptographic algorithm standard for Government of Canada systems — defining which quantum-resistant algorithms are appropriate at each classification and sensitivity level.",
    },
    {
      tag: 'TBS SPIN · Oct 2025',
      body: "The Treasury Board Security Policy Implementation Notice that converts ITSM.40.001 into monitored, auditable obligations — making PQC readiness a consideration in Government of Canada procurement from April 2026.",
    },
    {
      tag: 'Bill C-8 · CCSPA',
      body: "Canada's Critical Cyber Systems Protection Act, currently before Parliament — the legislation that will extend cybersecurity obligations to designated operators of critical infrastructure in telecommunications, finance, energy, and transport.",
    },
  ];

  return (
    <div style={{ position: 'relative', zIndex: 2, padding: '140px 40px 120px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>

        {/* Page Header */}
        <div style={{ textAlign: 'center', marginBottom: 120, maxWidth: 820, marginLeft: 'auto', marginRight: 'auto' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 24 }}>
            <Eyebrow>Our Solutions</Eyebrow>
          </div>
          <h1 style={{
            fontSize: 'clamp(48px, 7vw, 88px)', fontWeight: 600, margin: 0, marginBottom: 24,
            lineHeight: 1.05, letterSpacing: '-0.035em', color: 'var(--text)',
          }}>
            The QDI Platform —{' '}
            <em style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--text-soft)' }}>Hardware & Software Solutions</em>
          </h1>
          <p style={{ fontSize: 19, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.6, margin: 0 }}>
            Quantum cybersecurity is not a single problem with a single solution. The challenges facing physical infrastructure are fundamentally different from those facing software systems. QDI works across both dimensions — because a complete response to the quantum security challenge requires addressing both.
          </p>
        </div>

        {/* SECTION 1 — HARDWARE */}
        <div style={{ marginBottom: 48 }}>
          <Eyebrow>QDI Platform — Hardware</Eyebrow>
          <h2 style={{
            fontSize: 'clamp(34px, 4.4vw, 52px)', fontWeight: 600, margin: '20px 0 16px',
            lineHeight: 1.08, letterSpacing: '-0.022em', color: 'var(--text)',
          }}>
            The Hardware Security Problem
          </h2>
          <p style={{ fontSize: 17, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.65, maxWidth: 860, margin: 0 }}>
            Physical infrastructure presents a distinct set of quantum security challenges. Unlike software, hardware cannot be patched remotely or updated overnight. The organisations that depend on it most — government agencies, defence organisations, national critical infrastructure operators — also have the highest security requirements and the least tolerance for operational disruption.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginBottom: 80 }}>
          {hardwareProblems.map((x) => (
            <Card key={x.n} style={{ padding: 32 }}>
              <div style={{
                fontSize: 11, fontWeight: 500, color: 'var(--accent-bright)',
                letterSpacing: '0.2em', marginBottom: 20, fontVariantNumeric: 'tabular-nums',
              }}>{x.n}</div>
              <div style={{ width: 28, height: 1, background: 'var(--accent-bright)', marginBottom: 20 }} />
              <h3 style={{ fontSize: 18, fontWeight: 600, margin: '0 0 14px', lineHeight: 1.3, letterSpacing: '-0.01em', color: 'var(--text)' }}>{x.t}</h3>
              <p style={{ fontSize: 14, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.75, margin: 0 }}>{x.b}</p>
            </Card>
          ))}
        </div>

        <Card style={{ padding: '40px 48px', marginBottom: 120 }} hover={false}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <Eyebrow>QDI Platform · Hardware Solution</Eyebrow>
              <h3 style={{
                fontSize: 28, fontWeight: 600, margin: '20px 0 16px',
                lineHeight: 1.2, letterSpacing: '-0.015em', color: 'var(--text)',
              }}>
                Designed for environments where security cannot be compromised
              </h3>
              <p style={{ fontSize: 15, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.7, margin: 0 }}>
                QDI's hardware solutions are purpose-built for organisations that require on-premises, sovereign-grade quantum security. Deployed directly within a client's facility, they operate independently of cloud infrastructure — providing quantum-safe key management and cryptographic protection at the physical layer, air-gapped or fiber-connected, with no dependency on external systems.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { label: 'Deployment', value: 'On-premises, within client facility or secure data centre' },
                { label: 'Connectivity', value: 'Air-gapped or dedicated fiber — fully independent of public internet' },
                { label: 'Best suited for', value: 'Government agencies, defence organisations, national critical infrastructure' },
                { label: 'Key capability', value: 'Quantum-safe key distribution and cryptographic protection at the hardware level' },
              ].map((r) => (
                <div key={r.label} style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 16, paddingBottom: 16, borderBottom: '1px solid var(--rule)' }}>
                  <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--accent-bright)', letterSpacing: '0.12em', textTransform: 'uppercase', paddingTop: 2 }}>{r.label}</div>
                  <div style={{ fontSize: 14, color: 'var(--text-soft)', lineHeight: 1.55 }}>{r.value}</div>
                </div>
              ))}
            </div>
          </div>
        </Card>

        {/* DIVIDER */}
        <div style={{ position: 'relative', height: 1, marginBottom: 120 }}>
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, transparent, rgba(10,138,118,0.4), transparent)' }} />
        </div>

        {/* SECTION 2 — SOFTWARE */}
        <div style={{ marginBottom: 48 }}>
          <Eyebrow>QDI Platform — Software</Eyebrow>
          <h2 style={{
            fontSize: 'clamp(34px, 4.4vw, 52px)', fontWeight: 600, margin: '20px 0 16px',
            lineHeight: 1.08, letterSpacing: '-0.022em', color: 'var(--text)',
          }}>
            The Software Security Problem
          </h2>
          <p style={{ fontSize: 17, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.65, maxWidth: 860, margin: 0 }}>
            The software security challenge is, in some ways, broader than the hardware challenge — because software touches everything. Every application, every network service, every cloud platform relies on cryptographic protocols that were designed for a pre-quantum world. The scale of what needs to change, and the operational constraints of changing it, is the central challenge organisations are working through.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginBottom: 80 }}>
          {softwareProblems.map((x) => (
            <Card key={x.n} style={{ padding: 32 }}>
              <div style={{
                fontSize: 11, fontWeight: 500, color: 'var(--accent-bright)',
                letterSpacing: '0.2em', marginBottom: 20, fontVariantNumeric: 'tabular-nums',
              }}>{x.n}</div>
              <div style={{ width: 28, height: 1, background: 'var(--accent-bright)', marginBottom: 20 }} />
              <h3 style={{ fontSize: 18, fontWeight: 600, margin: '0 0 14px', lineHeight: 1.3, letterSpacing: '-0.01em', color: 'var(--text)' }}>{x.t}</h3>
              <p style={{ fontSize: 14, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.75, margin: 0 }}>{x.b}</p>
            </Card>
          ))}
        </div>

        <Card style={{ padding: '40px 48px', marginBottom: 120 }} hover={false}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <Eyebrow>QDI Platform · Software Solution</Eyebrow>
              <h3 style={{
                fontSize: 28, fontWeight: 600, margin: '20px 0 16px',
                lineHeight: 1.2, letterSpacing: '-0.015em', color: 'var(--text)',
              }}>
                Quantum-safe protection without replacing what you have
              </h3>
              <p style={{ fontSize: 15, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.7, margin: 0 }}>
                QDI's software platform is designed for organisations that need to extend quantum-safe protection to existing infrastructure — without rip-and-replace, without rebuilding applications, and without operational downtime. It introduces dual-layer cryptographic protection into existing systems, allowing organisations to address the quantum security challenge within their current infrastructure investment.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { label: 'Deployment', value: 'Installed on existing cloud or on-premises infrastructure' },
                { label: 'Disruption', value: 'No changes to applications, no operational downtime' },
                { label: 'Best suited for', value: 'Enterprise organisations, government IT departments, regulated sector operators' },
                { label: 'Key capability', value: 'Dual-layer cryptographic protection and real-time threat detection — classical and quantum' },
              ].map((r) => (
                <div key={r.label} style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 16, paddingBottom: 16, borderBottom: '1px solid var(--rule)' }}>
                  <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--accent-bright)', letterSpacing: '0.12em', textTransform: 'uppercase', paddingTop: 2 }}>{r.label}</div>
                  <div style={{ fontSize: 14, color: 'var(--text-soft)', lineHeight: 1.55 }}>{r.value}</div>
                </div>
              ))}
            </div>
          </div>
        </Card>

        {/* SECTION 3 — REGULATORY CONTEXT */}
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 820, marginLeft: 'auto', marginRight: 'auto' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 22 }}>
            <Eyebrow>Regulatory Context</Eyebrow>
          </div>
          <h2 style={{
            fontSize: 'clamp(34px, 4.4vw, 48px)', fontWeight: 600, margin: '0 0 16px',
            lineHeight: 1.08, letterSpacing: '-0.022em', color: 'var(--text)',
          }}>
            Canada's Quantum Security Framework
          </h2>
          <p style={{ fontSize: 16, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.65, margin: 0 }}>
            Canada has developed one of the most comprehensive national responses to the quantum security challenge. These are the primary documents and frameworks shaping that response.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {regulatory.map((c) => (
            <Card key={c.tag} style={{ padding: 28 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent-bright)', letterSpacing: '0.06em', marginBottom: 14 }}>{c.tag}</div>
              <div style={{ height: 1, background: 'var(--rule)', marginBottom: 14 }} />
              <p style={{ fontSize: 13, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.65, margin: 0 }}>{c.body}</p>
            </Card>
          ))}
        </div>

      </div>
    </div>
  );
}

Object.assign(window, { SolutionsPage });
