// Solutions page — Two deployment tracks: Hardware + Software
function SolutionsPage() {
  const sentinelSpecs = [
    ['Processor', 'Intel Xeon Gold 6248R — 24 cores, 3.0 GHz'],
    ['Memory', '128 GB DDR4 ECC'],
    ['Storage', '2 TB NVMe SSD + 8 TB threat intelligence archive'],
    ['Network', 'Dual 10 GbE NICs + dedicated fiber optic QKD interface'],
    ['Security Hardware', 'Thales Luna HSM 7 — FIPS 140-2 Level 3 + TPM 2.0'],
    ['QKD Hardware', 'ID Quantique Clavis3'],
    ['QRNG Device', 'ID Quantique Quantis — 4 Mbps entropy generation'],
    ['Best for', 'Classified networks, sovereign fibre links, defence perimeters'],
  ];

  const guardianSpecs = [
    ['Processor', 'Intel Xeon Silver 4214 — 12 cores, 2.2 GHz'],
    ['Memory', '64 GB DDR4 ECC'],
    ['Storage', '1 TB NVMe SSD + 4 TB archive'],
    ['Network', 'Dual 1 GbE NICs or single 10 GbE NIC'],
    ['Security Hardware', 'TPM 2.0 (HSM optional, recommended)'],
    ['QKD Hardware', 'Not required — PQC-only operation'],
    ['QRNG Device', 'Software entropy source with ANU QRNG API'],
    ['Best for', 'Government agencies, healthcare, financial infrastructure'],
  ];

  const calloutBoxes = [
    {
      title: 'Software Stack',
      items: [
        'Ubuntu Server 22.04 LTS hardened',
        'Rust core services',
        'Python 3.11 threat intelligence',
        'liboqs 0.9.0+ Open Quantum Safe',
        'PostgreSQL 15 with pgcrypto',
        'Apache Kafka 3.5',
      ],
    },
    {
      title: 'Key Exchange Protocol',
      items: [
        'QKD BB84 with decoy states',
        'Kyber-1024 KEM fallback',
        'MCQKR — Monte Carlo Quantum Key Rotation',
        'Automatic failover to PQC-only if QKD unavailable',
      ],
    },
    {
      title: 'Security Layers',
      items: [
        'mTLS 1.3 with PQC ciphers',
        'AES-256-GCM encryption',
        'Dilithium-5 digital signatures',
        'HMAC-SHA3-512 integrity',
        'BFT consensus validation',
        'HSM key storage',
      ],
    },
  ];

  const softwareCards = [
    {
      title: 'Drop-In Deployment',
      body: 'Install a lightweight container on existing cloud servers — x86 or ARM — via Docker or Kubernetes on AWS or Azure. No custom hardware. No re-architecting. No application code changes. From deployment to full protection in under 24 hours.',
    },
    {
      title: 'Dual-Spectrum Engine',
      body: 'The Silbersperre core runs two cryptographic layers simultaneously — RSA-4096 for classical threat protection and CRYSTALS-Kyber (ML-KEM) + CRYSTALS-Dilithium (ML-DSA) for quantum-safe protection. If either layer is ever compromised independently, the other maintains full data protection. Defense in parallel, not merely in depth.',
    },
    {
      title: 'Live Watch — HNDL Detection',
      body: "Silbersperre's Live Watch module monitors network traffic for behavioural patterns consistent with Harvest Now, Decrypt Later operations — bulk encrypted data exfiltration signatures characteristic of state-sponsored harvest campaigns. Upon detection, encryption protocols escalate automatically and the CISO is alerted immediately. This is the only commercially available tool that actively identifies live HNDL attempts in real time.",
    },
  ];

  const steps = [
    {
      title: 'Deploy Container',
      body: 'Install the QDI lightweight container on existing cloud infrastructure. Runs directly on the existing stack via Docker/Kubernetes. Zero disruption. Client infrastructure continues at full capacity throughout.',
    },
    {
      title: 'Wrap Data Streams',
      body: 'The Dual-Spectrum Engine activates — automatically wrapping all legacy data streams in a dual-layer cryptographic shell. No changes to application code. No re-architecting. All data in transit and at rest is now protected by both RSA-4096 and NIST PQC algorithms simultaneously.',
    },
    {
      title: 'Resume Operations with Full Immunity',
      body: 'System reboots with full immunity active. Full NIST PQC compliance is live from the moment of activation. FIPS 140-3 validation underway for U.S. Federal procurement eligibility. Infrastructure is now invisible to HNDL attacks.',
    },
  ];

  const compareRows = [
    ['Deployment Speed', '2–4 weeks (physical install)', 'Under 24 hours'],
    ['Best For', 'Classified / sovereign / air-gapped environments', 'Enterprise / cloud / rapid compliance'],
    ['QKD Support', 'Full QKD via ID Quantique hardware', 'PQC-only (QKD roadmap in Phase 3)'],
    ['Infrastructure Changes', 'Physical nodes installed on-premises', 'Zero — deploys on existing cloud stack'],
  ];

  const compliance = [
    { tag: 'NSM-10', body: 'U.S. White House National Security Memorandum — PQC transition mandate for all National Security Systems by 2030' },
    { tag: 'CNSA 2.0', body: 'Commercial National Security Algorithm Suite 2.0 — NSA-mandated quantum-resistant algorithms for classified systems' },
    { tag: 'EU NIS2', body: 'European Network and Information Systems Directive — quantum resilience obligations for critical infrastructure operators' },
    { tag: 'FIPS 140-3', body: 'Federal Information Processing Standard — cryptographic module validation required for U.S. Federal procurement' },
  ];

  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: 880, marginLeft: 'auto', marginRight: 'auto' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 24 }}>
            <Eyebrow>Deployment Options</Eyebrow>
          </div>
          <h1 style={{
            fontSize: 'clamp(48px, 7vw, 88px)', fontWeight: 600, margin: 0, marginBottom: 24,
            lineHeight: 1.05, letterSpacing: '-0.035em', color: 'var(--text)',
          }}>
            Two Ways <em style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--accent-bright)' }}>to Deploy</em>
          </h1>
          <p style={{ fontSize: 19, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.5, margin: 0, letterSpacing: '-0.005em' }}>
            QDI delivers quantum-safe security through two complementary deployment tracks — a physical hardware infrastructure for maximum-security environments, and a software platform for rapid enterprise deployment. Both tracks run the same Dual-Spectrum core.
          </p>
        </div>

        {/* SECTION 1 — HARDWARE */}
        <div style={{ marginBottom: 64 }}>
          <Eyebrow>Track 01 — Hardware</Eyebrow>
          <h2 style={{
            fontSize: 'clamp(34px, 4.4vw, 52px)', fontWeight: 600, margin: '20px 0 8px',
            lineHeight: 1.08, letterSpacing: '-0.022em', color: 'var(--text)', maxWidth: 880,
          }}>
            QDI QETIS
          </h2>
          <div style={{
            fontSize: 14, fontWeight: 300, color: 'var(--accent-bright)',
            margin: '0 0 24px', letterSpacing: '0.01em',
          }}>
            Quantum Encrypted Threat Intelligence Sharing
          </div>
          <h3 style={{
            fontSize: 22, fontWeight: 500, margin: '0 0 18px',
            lineHeight: 1.2, letterSpacing: '-0.01em', color: 'var(--text-soft)', maxWidth: 880,
          }}>
            Physical Quantum Security <em style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--text-soft)' }}>Infrastructure</em>
          </h3>
          <p style={{ fontSize: 18, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.55, margin: 0, maxWidth: 880, letterSpacing: '-0.005em' }}>
            For government agencies, defence organisations, and critical infrastructure operators requiring sovereign-grade, physically isolated quantum security nodes deployed on-premises.
          </p>
        </div>

        {/* Two-column: text + node cards */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, marginBottom: 96, alignItems: 'stretch' }}>
          <div style={{ paddingTop: 8, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start' }}>
            <p style={{ fontSize: 16, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.75, margin: 0 }}>
              QDI's hardware deployment track installs purpose-built physical security nodes directly within a client's facility or secure data centre. These nodes operate fully air-gapped or fiber-connected, providing quantum key distribution and post-quantum cryptographic protection at the hardware level — independent of cloud infrastructure and immune to software-layer compromise.
            </p>
            <p style={{ fontSize: 16, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.75, marginTop: 22 }}>
              Hardware deployment is suited for environments where data sovereignty, regulatory isolation, and physical security clearance are non-negotiable requirements — including classified government networks, sovereign defence communications, and national critical infrastructure.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <NodeCard name="Sentinel Node" sub="Full QKD Capability" specs={sentinelSpecs} ringCount={2} />
            <NodeCard name="Guardian Node" sub="PQC-Only Deployment" specs={guardianSpecs} ringCount={1} />
          </div>
        </div>

        {/* Mesh Network band */}
        <div style={{ marginBottom: 56 }}>
          <Card style={{ padding: 0, overflow: 'hidden' }} hover={false}>
            <div style={{ padding: '40px 48px 24px' }}>
              <Eyebrow>QETIS Node Network</Eyebrow>
              <p style={{ fontSize: 16, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.7, margin: '16px 0 0', maxWidth: 980 }}>
                Sentinel and Guardian nodes form a decentralised mesh network — each node communicates via encrypted quantum-safe channels, shares threat intelligence in real time, and operates Byzantine Fault Tolerant consensus. The network strengthens with every node added. A network of 100+ nodes can validate and isolate threats collectively, with no single point of failure.
              </p>
            </div>
            <MeshDiagram />
          </Card>
        </div>

        {/* Three callout spec boxes */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginBottom: 120 }}>
          {calloutBoxes.map((b) => (
            <Card key={b.title} style={{
              borderLeft: '2px solid var(--accent-bright)',
              borderRadius: 10,
              padding: 26,
            }}>
              <div style={{
                fontSize: 11, fontWeight: 500, color: 'var(--accent-bright)',
                letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 16,
              }}>{b.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {b.items.map((i) => (
                  <li key={i} style={{ fontSize: 13.5, color: 'var(--text-soft)', lineHeight: 1.55, display: 'flex', gap: 10 }}>
                    <span style={{ color: 'var(--accent-bright)', opacity: 0.7, fontSize: 10, lineHeight: '1.7' }}>◆</span>
                    <span>{i}</span>
                  </li>
                ))}
              </ul>
            </Card>
          ))}
        </div>

        {/* DIVIDER */}
        <div style={{ position: 'relative', height: 1, marginBottom: 120 }}>
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, transparent, rgba(18,196,168,0.55), transparent)' }} />
          <div style={{ position: 'absolute', inset: '-3px 0', background: 'linear-gradient(90deg, transparent, rgba(18,196,168,0.18), transparent)', filter: 'blur(6px)' }} />
        </div>

        {/* SECTION 2 — SOFTWARE */}
        <div style={{ marginBottom: 64 }}>
          <Eyebrow>Track 02 — Software</Eyebrow>
          <h2 style={{
            fontSize: 'clamp(34px, 4.4vw, 52px)', fontWeight: 600, margin: '20px 0 8px',
            lineHeight: 1.08, letterSpacing: '-0.022em', color: 'var(--text)', maxWidth: 880,
          }}>
            QDI Silbersperre
          </h2>
          <div style={{
            fontSize: 14, fontWeight: 300, color: 'var(--accent-bright)',
            margin: '0 0 24px', letterSpacing: '0.01em',
          }}>
            Dual-Spectrum Software Security Platform
          </div>
          <p style={{ fontSize: 18, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.55, margin: 0, maxWidth: 880, letterSpacing: '-0.005em' }}>
            For enterprise organisations, government IT departments, and regulated operators requiring rapid deployment with zero hardware changes and zero operational downtime.
          </p>
        </div>

        {/* Two-column: feature cards + timeline — equal height columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 96, alignItems: 'stretch' }}>
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 20, height: '100%', boxSizing: 'border-box' }}>
            {softwareCards.map((c) => (
              <Card key={c.title} style={{ padding: 28, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>
                <h3 style={{
                  fontSize: 20, fontWeight: 600, margin: 0, marginBottom: 12, color: 'var(--text)',
                  letterSpacing: '-0.01em',
                }}>{c.title}</h3>
                <p style={{ fontSize: 14.5, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.7, margin: 0 }}>
                  {c.body}
                </p>
              </Card>
            ))}
          </div>

          <div style={{ height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <Timeline steps={steps} />
          </div>
        </div>

        {/* Comparison table */}
        <div style={{ marginBottom: 120 }}>
          <Card style={{ padding: 0, overflow: 'hidden' }} hover={false}>
            <div style={{ padding: '32px 36px 8px' }}>
              <h3 style={{
                fontSize: 24, fontWeight: 600, margin: 0, color: 'var(--text)', letterSpacing: '-0.01em',
              }}>Choosing Your Deployment Track</h3>
            </div>
            <ComparisonTable rows={compareRows} />
          </Card>
        </div>

        {/* SECTION 3 — COMPLIANCE */}
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 820, marginLeft: 'auto', marginRight: 'auto' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 22 }}>
            <Eyebrow>Regulatory Alignment</Eyebrow>
          </div>
          <h2 style={{
            fontSize: 'clamp(34px, 4.4vw, 52px)', fontWeight: 600, margin: 0,
            lineHeight: 1.08, letterSpacing: '-0.022em', color: 'var(--text)',
          }}>
            Built for <em style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--text-soft)' }}>the Mandate</em>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {compliance.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>
  );
}

function NodeCard({ name, sub, specs, ringCount }) {
  return (
    <Card style={{ padding: 24, display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
        <NodeRingIcon rings={ringCount} />
        <div>
          <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--text)', letterSpacing: '-0.01em' }}>
            {name}
          </div>
          <div style={{ fontSize: 11, color: 'var(--accent-bright)', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 2 }}>
            {sub}
          </div>
        </div>
      </div>
      <div style={{ height: 1, background: 'var(--rule)', margin: '18px 0' }} />
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
        {specs.map(([label, val]) => (
          <li key={label} style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 2 }}>
            <span style={{
              fontSize: 10, color: 'var(--accent-bright)', letterSpacing: '0.14em', textTransform: 'uppercase',
            }}>{label}</span>
            <span style={{ fontSize: 13, color: 'var(--text)', lineHeight: 1.5 }}>{val}</span>
          </li>
        ))}
      </ul>
    </Card>
  );
}

function NodeRingIcon({ rings }) {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
      {rings >= 2 && (
        <circle cx="14" cy="14" r="12" stroke="#12c4a8" strokeWidth="1" opacity="0.55" />
      )}
      <circle cx="14" cy="14" r={rings >= 2 ? 8 : 11} stroke="#12c4a8" strokeWidth="1.2" opacity={rings >= 2 ? 0.9 : 0.7} />
      <circle cx="14" cy="14" r="2.2" fill="#12c4a8" opacity="0.85" />
    </svg>
  );
}

function MeshDiagram() {
  // Hub-and-spoke layout — Observer at center, 5 outer nodes (3 Sentinel, 2 Guardian)
  const observer = { x: 300, y: 250 };
  const nodes = [
    { x: 300, y: 65,  kind: 'sentinel', label: 'SENTINEL', anchor: 'middle', tx: 300, ty: 65 - 52 },          // 12 o'clock — above
    { x: 476, y: 172, kind: 'guardian', label: 'GUARDIAN', anchor: 'start',  tx: 476 + 44, ty: 172 + 4 },     // 2 o'clock — right
    { x: 414, y: 420, kind: 'sentinel', label: 'SENTINEL', anchor: 'middle', tx: 414, ty: 420 + 52 },         // 4 o'clock — below
    { x: 186, y: 420, kind: 'guardian', label: 'GUARDIAN', anchor: 'middle', tx: 186, ty: 420 + 52 },         // 8 o'clock — below
    { x: 124, y: 172, kind: 'sentinel', label: 'SENTINEL', anchor: 'end',    tx: 124 - 44, ty: 172 + 4 },     // 10 o'clock — left
  ];

  const sentinelColor = '#0e9e88';
  const guardianStroke = 'rgba(14,158,136,0.55)';
  const guardianFill = 'rgba(14,158,136,0.05)';
  const guardianDot = 'rgba(14,158,136,0.7)';

  // Encrypted channel midpoint between Node 1 (top sentinel) and Node 2 (upper-right guardian)
  // Offset slightly outward (away from observer) so the label doesn't sit on the line.
  const m12x = (nodes[0].x + nodes[1].x) / 2;
  const m12y = (nodes[0].y + nodes[1].y) / 2;
  const dx = m12x - observer.x;
  const dy = m12y - observer.y;
  const d = Math.sqrt(dx * dx + dy * dy);
  const offset = 14;
  const ecX = m12x + (dx / d) * offset;
  const ecY = m12y + (dy / d) * offset;

  return (
    <div style={{ width: '100%', padding: '8px 0 28px' }}>
      <svg
        viewBox="0 0 600 520"
        style={{ display: 'block', width: '100%', maxWidth: 600, height: 'auto', margin: '0 auto' }}
        aria-hidden="true"
      >
        {/* LINES — drawn first, beneath nodes */}

        {/* Spoke lines: each outer node to Observer center (dashed) */}
        {nodes.map((n, i) => (
          <line
            key={`spoke-${i}`}
            x1={observer.x} y1={observer.y}
            x2={n.x} y2={n.y}
            stroke="rgba(14,158,136,0.35)"
            strokeWidth="1"
            strokeDasharray="5 4"
          />
        ))}

        {/* Perimeter lines: each outer node to its two immediate neighbours (solid) */}
        {nodes.map((n, i) => {
          const m = nodes[(i + 1) % nodes.length];
          return (
            <line
              key={`peri-${i}`}
              x1={n.x} y1={n.y}
              x2={m.x} y2={m.y}
              stroke="rgba(14,158,136,0.5)"
              strokeWidth="1"
            />
          );
        })}

        {/* ENCRYPTED CHANNEL — single label on the perimeter line between Node 1 & Node 2 */}
        <text
          x={ecX}
          y={ecY}
          textAnchor="middle"
          fill="rgba(14,158,136,0.5)"
          fontSize="9"
          letterSpacing="0.1em"
          fontFamily="IBM Plex Sans, sans-serif"
        >
          ENCRYPTED CHANNEL
        </text>

        {/* OUTER NODES */}
        {nodes.map((n, i) => (
          <g key={`node-${i}`}>
            {n.kind === 'sentinel' ? (
              <>
                {/* Outer ring */}
                <circle cx={n.x} cy={n.y} r="36" fill="none" stroke={sentinelColor} strokeWidth="1.5" />
                {/* Inner ring */}
                <circle cx={n.x} cy={n.y} r="24" fill="rgba(14,158,136,0.08)" stroke={sentinelColor} strokeWidth="1.5" />
                {/* Center dot */}
                <circle cx={n.x} cy={n.y} r="5" fill={sentinelColor} />
              </>
            ) : (
              <>
                {/* Single ring */}
                <circle cx={n.x} cy={n.y} r="30" fill={guardianFill} stroke={guardianStroke} strokeWidth="1.5" />
                {/* Center dot */}
                <circle cx={n.x} cy={n.y} r="4" fill={guardianDot} />
              </>
            )}
            <text
              x={n.tx}
              y={n.ty}
              textAnchor={n.anchor}
              fill={n.kind === 'sentinel' ? sentinelColor : guardianDot}
              fontSize="11"
              letterSpacing="0.15em"
              fontFamily="IBM Plex Sans, sans-serif"
            >
              {n.label}
            </text>
          </g>
        ))}

        {/* OBSERVER (center, dashed) */}
        <circle
          cx={observer.x} cy={observer.y}
          r="40"
          fill="rgba(14,158,136,0.06)"
          stroke="#0e9e88"
          strokeWidth="1.5"
          strokeDasharray="6 4"
        />
        <circle cx={observer.x} cy={observer.y} r="5" fill="#12c4a8" />
        <text
          x={observer.x}
          y={observer.y + 58}
          textAnchor="middle"
          fill="#f0f4f8"
          fontSize="12"
          fontWeight="500"
          letterSpacing="0.1em"
          fontFamily="IBM Plex Sans, sans-serif"
        >
          OBSERVER
        </text>
        <text
          x={observer.x}
          y={observer.y + 74}
          textAnchor="middle"
          fill="rgba(14,158,136,0.6)"
          fontSize="9"
          letterSpacing="0.12em"
          fontFamily="IBM Plex Sans, sans-serif"
        >
          ENCRYPTED CHANNEL
        </text>
      </svg>
    </div>
  );
}

function Timeline({ steps }) {
  return (
    <div style={{ position: 'relative', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
      {/* vertical line — runs through the exact center of every circle (cx = 20px) */}
      <div style={{
        position: 'absolute', left: 19, top: 20, bottom: 20, width: 2,
        background: 'rgba(14,158,136,0.5)',
        zIndex: 1,
      }} />
      {steps.map((s, i) => (
        <div key={s.title} style={{
          display: 'flex', alignItems: 'flex-start', gap: 20,
          marginBottom: i === steps.length - 1 ? 0 : 40,
          position: 'relative',
        }}>
          <div style={{
            flexShrink: 0,
            width: 40, height: 40, borderRadius: '50%',
            background: '#0e9e88',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            position: 'relative', zIndex: 2,
            color: '#ffffff',
            fontFamily: "'IBM Plex Sans', sans-serif",
            fontWeight: 600, fontSize: 16,
          }}>
            {i + 1}
          </div>
          <div style={{ flex: 1, paddingTop: 6 }}>
            <h4 style={{
              color: '#ffffff',
              fontFamily: "'IBM Plex Sans', sans-serif",
              fontWeight: 600, fontSize: 16,
              margin: 0, marginBottom: 8,
              letterSpacing: '-0.005em',
            }}>{s.title}</h4>
            <p style={{
              color: '#ffffff',
              fontFamily: "'IBM Plex Sans', sans-serif",
              fontWeight: 300, fontSize: 14, lineHeight: 1.6,
              margin: 0,
            }}>
              {s.body}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}

function ComparisonTable({ rows }) {
  const headerBg = 'rgba(8,18,26,0.95)';
  return (
    <div style={{ width: '100%' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
        background: headerBg,
        borderTop: '1px solid var(--border-soft)',
        borderBottom: '1px solid var(--border-soft)',
      }}>
        {['', 'Hardware Track', 'Software Track'].map((h, i) => (
          <div key={i} style={{
            padding: '18px 24px',
            fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: i === 0 ? 'var(--text-muted)' : 'var(--accent-bright)',
          }}>{h}</div>
        ))}
      </div>
      {rows.map((r, idx) => (
        <div key={r[0]} style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
          background: idx % 2 === 0 ? '#0a1520' : '#0d1e2e',
          borderBottom: idx === rows.length - 1 ? 'none' : '1px solid rgba(18,196,168,0.08)',
        }}>
          <div style={{ padding: '18px 24px', fontSize: 13, color: '#f0f4f8', fontWeight: 500 }}>{r[0]}</div>
          <div style={{ padding: '18px 24px', fontSize: 13, color: '#f0f4f8', lineHeight: 1.55 }}>{r[1]}</div>
          <div style={{ padding: '18px 24px', fontSize: 13, color: '#f0f4f8', lineHeight: 1.55 }}>{r[2]}</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { SolutionsPage });
