// Platform page
function PlatformPage() {
  const cards = [
    { t: 'Harvest Now, Decrypt Later Threat', b: 'Nation-state adversaries collect encrypted data today to decrypt it once quantum computers mature. Data with a shelf-life beyond five years is already at probabilistic risk.' },
    { t: 'Compliance-Driven Procurement', b: 'NSM-10, CNSA 2.0, and EU NIS2 create binding migration mandates. QDI Silbersperre is designed specifically to satisfy these compliance requirements.' },
    { t: 'Zero Rip-and-Replace', b: 'QDI Silbersperre licenses quantum-safe algorithms into existing infrastructure. No hardware replacement, no operational downtime, no service disruption during transition.' },
    { t: 'Crypto-Agile by Design', b: 'Cryptographic algorithms are modular and swappable without system redesign. NIST algorithm updates — including HQC selection (July 2025) — are already on the product roadmap.' },
    { t: 'Patent-Pending IP', b: 'Core Dual-Spectrum architecture protected under CIPO Application #3,286,218, filed September 2024. PCT international filing in progress.' },
    { t: 'FIPS 140-3 Roadmap', b: 'Architecture built toward FIPS 140-3 validation. NIST PQC-standardised algorithms implemented as the cryptographic foundation.' },
  ];

  return (
    <div style={{ position: 'relative', zIndex: 2, padding: '140px 40px 120px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {/* Header */}
        <div style={{ textAlign: 'center', marginBottom: 120, maxWidth: 820, marginLeft: 'auto', marginRight: 'auto' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 24 }}>
            <Eyebrow>Our Platform</Eyebrow>
          </div>
          <h1 style={{
            fontSize: 'clamp(48px, 7vw, 88px)', fontWeight: 600, margin: 0, marginBottom: 20,
            lineHeight: 1.05, letterSpacing: '-0.035em', color: 'var(--text)',
          }}>
            <span style={{ color: 'var(--text)', fontWeight: 600 }}>QDI</span>{' '}
            <span style={{ color: 'var(--accent-bright)', fontStyle: 'italic', fontWeight: 400 }}>Silbersperre</span>
          </h1>
          <div style={{ fontSize: 22, fontWeight: 400, color: 'var(--text-soft)', marginBottom: 24, letterSpacing: '-0.01em' }}>
            Dual-Spectrum Quantum-Safe Security Architecture
          </div>
          <p style={{ fontSize: 15, fontWeight: 400, color: 'var(--text-muted)', lineHeight: 1.7, margin: 0 }}>
            QDI Silbersperre is QDI's unified security platform, designed to simultaneously protect critical infrastructure against today's conventional cyber threats while immunising it against tomorrow's quantum-enabled attacks — with zero operational disruption and no hardware replacement required.
          </p>
        </div>

        {/* Architecture */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center', marginBottom: 140 }}>
          <div>
            <Eyebrow>The Architecture</Eyebrow>
            <h2 style={{
              fontSize: 'clamp(32px, 3.6vw, 44px)', fontWeight: 600, margin: '20px 0 24px',
              lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--text)',
            }}>
              Dual-Spectrum <em style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--text-soft)' }}>Design</em>
            </h2>
            <p style={{ fontSize: 16, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.75, margin: 0 }}>
              Most security platforms address either classical threats or quantum threats — not both simultaneously. QDI Silbersperre's Dual-Spectrum Architecture runs both protection layers in a single unified deployment. Classical threat detection and response operates in real time. Post-quantum cryptographic layers protect data and communications against future quantum decryption.
            </p>
            <p style={{ fontSize: 16, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.75, marginTop: 20 }}>
              Both layers are managed through one unified interface, one deployment cycle, one vendor relationship.
            </p>
          </div>
          <ArchitectureDiagram />
        </div>

        {/* Capabilities */}
        <div style={{ marginBottom: 140 }}>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
              <Eyebrow>Capabilities</Eyebrow>
            </div>
            <h2 style={{ fontSize: 40, fontWeight: 600, margin: 0, letterSpacing: '-0.02em', color: 'var(--text)' }}>
              Six pillars, one platform.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {cards.map((c, i) => (
              <Card key={c.t} style={{ display: 'flex', flexDirection: 'column', gap: 20, minHeight: 240 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--accent-bright)', letterSpacing: '0.18em', fontVariantNumeric: 'tabular-nums' }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <span style={{ flex: 1, height: 1, background: 'var(--border)' }} />
                </div>
                <h3 style={{ fontSize: 18, fontWeight: 600, margin: 0, lineHeight: 1.3, letterSpacing: '-0.01em', color: 'var(--text)' }}>{c.t}</h3>
                <p style={{ fontSize: 13, fontWeight: 400, color: 'var(--text-dim)', lineHeight: 1.7, margin: 0 }}>{c.b}</p>
              </Card>
            ))}
          </div>
        </div>

        {/* HOW IT WORKS / Architecture Layers */}
        <HowItWorksSection />

        {/* Target Sectors */}
        <div style={{ marginBottom: 140 }}>
          <div style={{ marginBottom: 56 }}>
            <Eyebrow>Target Sectors</Eyebrow>
            <h2 style={{ fontSize: 'clamp(32px, 3.6vw, 44px)', fontWeight: 600, margin: '20px 0 0', letterSpacing: '-0.02em', color: 'var(--text)', lineHeight: 1.1 }}>
              Designed for regulated operators.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
            {[
              { t: 'Critical Infrastructure', d: 'Power grids, utilities, and transport systems' },
              { t: 'Government & Defence', d: 'Sovereign data and national security systems' },
              { t: 'Healthcare', d: 'Patient data and medical research protection' },
              { t: 'Financial Services', d: 'Banking infrastructure and transaction security' },
              { t: 'Energy & Utilities', d: 'Grid control systems and SCADA protection' },
            ].map((s) => <SectorBox key={s.t} s={s} />)}
          </div>
        </div>

        {/* Deployment Phases */}
        <div>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
              <Eyebrow>Deployment Model</Eyebrow>
            </div>
            <h2 style={{ fontSize: 'clamp(32px, 3.6vw, 44px)', fontWeight: 600, margin: 0, letterSpacing: '-0.02em', color: 'var(--text)', lineHeight: 1.1 }}>
              Three phases to scale.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, position: 'relative' }}>
            {[
              { ph: 'Phase 01', when: 'Now', name: 'Validation', bullets: ['Enterprise Proof-of-Value licensing', '$50K–$250K per engagement', 'Direct sales'] },
              { ph: 'Phase 02', when: '18–36 months', name: 'Anchor', bullets: ['Government & defense multi-year contracts', '$1M–$5M contract value', 'Public tenders (RFP)'] },
              { ph: 'Phase 03', when: '36+ months', name: 'Scale', bullets: ['Quantum-as-a-Service API model', 'Recurring usage (ARR)', 'Channel partners'] },
            ].map((p, i) => (
              <Card key={p.ph} style={{ padding: 36 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 28 }}>
                  <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--accent-bright)', letterSpacing: '0.2em' }}>{p.ph.toUpperCase()}</span>
                  <span style={{ fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{p.when}</span>
                </div>
                <h3 style={{ fontSize: 32, fontWeight: 600, margin: 0, marginBottom: 24, letterSpacing: '-0.02em', color: 'var(--text)' }}>{p.name}</h3>
                <Rule style={{ marginBottom: 20 }} />
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {p.bullets.map((b) => (
                    <li key={b} style={{ fontSize: 13, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.6, display: 'flex', gap: 12 }}>
                      <span style={{ color: 'var(--accent-bright)', fontWeight: 500 }}>→</span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ArchitectureDiagram() {
  return (
    <div style={{
      background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 10,
      padding: 36, backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
      position: 'relative',
    }}>
      <div style={{ fontSize: 10, color: 'var(--text-muted)', letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 24 }}>
        QDI Silbersperre Architecture · Simplified
      </div>
      <svg viewBox="0 0 400 360" style={{ width: '100%', height: 'auto', display: 'block' }}>
        <defs>
          <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0,0 L10,5 L0,10 z" fill="var(--accent-bright)" />
          </marker>
        </defs>

        {/* Classical Threat Layer */}
        <g>
          <rect x="20" y="20" width="360" height="60" rx="4" fill="none" stroke="var(--border)" />
          <text x="36" y="44" fontFamily="IBM Plex Sans" fontSize="9" fill="var(--accent-bright)" letterSpacing="2">LAYER 01</text>
          <text x="36" y="66" fontFamily="IBM Plex Sans" fontSize="13" fontWeight="500" fill="var(--text)">Classical Threat Layer</text>
          <text x="230" y="66" fontFamily="IBM Plex Sans" fontSize="10" fontWeight="300" fill="var(--text-muted)">Real-time detection · Response</text>
        </g>

        {/* Post-Quantum Layer */}
        <g>
          <rect x="20" y="100" width="360" height="60" rx="4" fill="none" stroke="var(--border)" />
          <text x="36" y="124" fontFamily="IBM Plex Sans" fontSize="9" fill="var(--accent-bright)" letterSpacing="2">LAYER 02</text>
          <text x="36" y="146" fontFamily="IBM Plex Sans" fontSize="13" fontWeight="500" fill="var(--text)">Post-Quantum Cryptography Layer</text>
          <text x="260" y="146" fontFamily="IBM Plex Sans" fontSize="10" fontWeight="300" fill="var(--text-muted)">NIST-standardised</text>
        </g>

        {/* Connecting lines */}
        <line x1="200" y1="160" x2="200" y2="195" stroke="var(--accent-bright)" strokeWidth="1" markerEnd="url(#arr)" />

        {/* Core */}
        <g>
          <rect x="120" y="200" width="160" height="56" rx="4" fill="rgba(14,158,136,0.15)" stroke="var(--accent-bright)" />
          <text x="200" y="224" fontFamily="IBM Plex Sans" fontSize="9" fill="var(--accent-bright)" letterSpacing="2" textAnchor="middle">CORE</text>
          <text x="200" y="244" fontFamily="IBM Plex Sans" fontSize="14" fontWeight="600" fill="var(--text)" textAnchor="middle">QDI Silbersperre</text>
        </g>

        {/* Deployment targets */}
        <line x1="150" y1="256" x2="80" y2="300" stroke="var(--border)" strokeWidth="1" markerEnd="url(#arr)" />
        <line x1="200" y1="256" x2="200" y2="300" stroke="var(--border)" strokeWidth="1" markerEnd="url(#arr)" />
        <line x1="250" y1="256" x2="320" y2="300" stroke="var(--border)" strokeWidth="1" markerEnd="url(#arr)" />

        <g>
          <text x="80" y="320" fontFamily="IBM Plex Sans" fontSize="11" fontWeight="500" fill="var(--text)" textAnchor="middle">Enterprise</text>
          <text x="80" y="335" fontFamily="IBM Plex Sans" fontSize="9" fontWeight="300" fill="var(--text-muted)" textAnchor="middle">PoV licensing</text>
        </g>
        <g>
          <text x="200" y="320" fontFamily="IBM Plex Sans" fontSize="11" fontWeight="500" fill="var(--text)" textAnchor="middle">Government</text>
          <text x="200" y="335" fontFamily="IBM Plex Sans" fontSize="9" fontWeight="300" fill="var(--text-muted)" textAnchor="middle">Multi-year</text>
        </g>
        <g>
          <text x="320" y="320" fontFamily="IBM Plex Sans" fontSize="11" fontWeight="500" fill="var(--text)" textAnchor="middle">Defense</text>
          <text x="320" y="335" fontFamily="IBM Plex Sans" fontSize="9" fontWeight="300" fill="var(--text-muted)" textAnchor="middle">Sovereign contracts</text>
        </g>
      </svg>
    </div>
  );
}

Object.assign(window, { PlatformPage });

// ---------- Sector Box ----------
function SectorBox({ s }) {
  const [h, setH] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        background: h ? '#0d1e2e' : '#0a1520',
        border: h ? '1px solid rgba(14,158,136,0.8)' : '1px solid rgba(14,158,136,0.35)',
        borderRadius: 8,
        padding: '28px 20px',
        textAlign: 'center',
        transition: 'background 0.25s ease, border-color 0.25s ease, transform 0.25s ease',
        transform: h ? 'translateY(-2px)' : 'translateY(0)',
      }}
    >
      <div style={{
        fontFamily: "'IBM Plex Sans', sans-serif",
        fontSize: 15, fontWeight: 600, color: '#ffffff',
        marginBottom: 8, lineHeight: 1.3, letterSpacing: '-0.005em',
      }}>{s.t}</div>
      <div style={{
        fontSize: 13, fontWeight: 400,
        color: 'var(--accent-bright)',
        lineHeight: 1.5,
      }}>{s.d}</div>
    </div>
  );
}

// ---------- How It Works ----------
const HOW_LAYERS = [
  {
    badge: 'LAYER 01',
    title: 'Classical AI Threat Detection Grid',
    desc: 'An intelligent AI-driven perimeter grid operates as a wide-spectrum capture net — modelled like a spider web across the entire network surface. Every packet, signal, and connection attempt is monitored in real time. Anomalous patterns, known threat signatures, and behavioural deviations are flagged instantly. Nothing crosses this layer undetected.',
    bg: 'rgba(10, 30, 42, 0.55)',
    leftBorder: 2,
    visual: 'web',
    visualTint: 'rgba(18,196,168,0.35)',
  },
  {
    badge: 'LAYER 02',
    title: 'Classical AI Cyber Honeypot',
    desc: 'Threats that pass initial detection are funnelled into a sophisticated classical honeypot environment. Adversarial actors, malware, and intrusion attempts are redirected into isolated decoy infrastructure that mirrors real systems. Attackers are neutralised, their methods are analysed, and intelligence is fed back into the threat detection grid — continuously improving the outer net.',
    bg: 'rgba(8, 26, 36, 0.7)',
    leftBorder: 3,
    visual: 'comb',
    visualTint: 'rgba(234, 181, 67, 0.38)',
  },
  {
    badge: 'LAYER 03',
    title: 'QKD + PQC Quantum Honeypot',
    desc: 'A second, deeper honeypot layer built specifically for quantum-enabled adversaries. Quantum Key Distribution (QKD) and Post-Quantum Cryptography (PQC) algorithms create cryptographically secure decoy channels. Any attempt to exploit classical encryption vulnerabilities — including Harvest Now, Decrypt Later attacks — is trapped, logged, and isolated at this layer before reaching core systems.',
    bg: 'rgba(6, 22, 32, 0.82)',
    leftBorder: 4,
    visual: 'lattice',
    visualTint: 'rgba(170, 120, 230, 0.42)',
  },
  {
    badge: 'CORE',
    title: 'QDI Silbersperre — The Core Algorithm',
    desc: 'The Dual-Spectrum kernel at the heart of the platform. Only fully verified, sanitised communications reach this layer. The Silbersperre core manages cryptographic key lifecycle, enforces NIST PQC standards, maintains system integrity, and provides the unified control interface for enterprise and government operators. It is the last line — and the strongest.',
    bg: 'rgba(5, 18, 26, 0.95)',
    leftBorder: 4,
    visual: 'shield',
    visualTint: 'rgba(18,196,168,0.7)',
    isCore: true,
  },
];

function FlowArrow() {
  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      height: 56, position: 'relative',
    }}>
      <svg width="28" height="56" viewBox="0 0 28 56" fill="none" style={{ overflow: 'visible' }}>
        <defs>
          <linearGradient id="flowLine" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="rgba(18,196,168,0)" />
            <stop offset="0.5" stopColor="rgba(18,196,168,0.55)" />
            <stop offset="1" stopColor="rgba(18,196,168,0)" />
          </linearGradient>
        </defs>
        <line x1="14" y1="0" x2="14" y2="56" stroke="url(#flowLine)" strokeWidth="1" />
        <g style={{ animation: 'flowDot 2.4s linear infinite' }}>
          <circle cx="14" cy="0" r="3" fill="#12c4a8" style={{ filter: 'drop-shadow(0 0 6px rgba(18,196,168,0.8))' }} />
        </g>
        <g style={{ animation: 'flowChev 2.4s ease-in-out infinite' }}>
          <path d="M8 36 L14 42 L20 36" stroke="#12c4a8" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </g>
      </svg>
      <style>{`
        @keyframes flowDot { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(50px); opacity: 0; } }
        @keyframes flowChev { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(3px); } }
      `}</style>
    </div>
  );
}

function LayerVisual({ kind, tint }) {
  const s = { width: 72, height: 72, flexShrink: 0, opacity: 0.9 };
  if (kind === 'web') {
    return (
      <svg style={s} viewBox="0 0 72 72" fill="none" stroke={tint} strokeWidth="0.8">
        <circle cx="36" cy="36" r="8" />
        <circle cx="36" cy="36" r="18" />
        <circle cx="36" cy="36" r="28" />
        <line x1="36" y1="6" x2="36" y2="66" />
        <line x1="6" y1="36" x2="66" y2="36" />
        <line x1="14" y1="14" x2="58" y2="58" />
        <line x1="58" y1="14" x2="14" y2="58" />
      </svg>
    );
  }
  if (kind === 'comb') {
    const hex = (cx, cy) => {
      const pts = [];
      for (let i = 0; i < 6; i++) {
        const a = (Math.PI / 3) * i - Math.PI / 6;
        pts.push(`${cx + 10 * Math.cos(a)},${cy + 10 * Math.sin(a)}`);
      }
      return pts.join(' ');
    };
    return (
      <svg style={s} viewBox="0 0 72 72" fill="none" stroke={tint} strokeWidth="0.9">
        <polygon points={hex(20, 22)} />
        <polygon points={hex(40, 22)} />
        <polygon points={hex(60, 22)} />
        <polygon points={hex(30, 40)} />
        <polygon points={hex(50, 40)} />
        <polygon points={hex(20, 58)} />
        <polygon points={hex(40, 58)} />
        <polygon points={hex(60, 58)} />
      </svg>
    );
  }
  if (kind === 'lattice') {
    return (
      <svg style={s} viewBox="0 0 72 72" fill="none" stroke={tint} strokeWidth="0.9">
        {[12, 24, 36, 48, 60].map((x) => (
          <g key={x}>
            {[12, 24, 36, 48, 60].map((y) => (
              <circle key={y} cx={x} cy={y} r="1.4" fill={tint} />
            ))}
          </g>
        ))}
        <path d="M12 12 L60 60 M60 12 L12 60 M12 36 L60 36 M36 12 L36 60" opacity="0.5" />
        <circle cx="36" cy="36" r="5" stroke={tint} fill="none" strokeWidth="1.2" />
      </svg>
    );
  }
  if (kind === 'shield') {
    return (
      <svg style={{ ...s, width: 88, height: 88 }} viewBox="0 0 88 88" fill="none">
        <defs>
          <linearGradient id="shieldFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="rgba(18,196,168,0.25)" />
            <stop offset="1" stopColor="rgba(18,196,168,0.05)" />
          </linearGradient>
        </defs>
        <path d="M44 8 L72 18 L72 44 C72 62 60 74 44 80 C28 74 16 62 16 44 L16 18 Z"
          fill="url(#shieldFill)" stroke="#12c4a8" strokeWidth="1.6"
          style={{ filter: 'drop-shadow(0 0 10px rgba(18,196,168,0.6))' }} />
        <circle cx="44" cy="42" r="4" fill="#12c4a8" />
        <line x1="44" y1="24" x2="44" y2="38" stroke="#12c4a8" strokeWidth="1" />
        <line x1="44" y1="46" x2="44" y2="60" stroke="#12c4a8" strokeWidth="1" />
        <line x1="26" y1="42" x2="40" y2="42" stroke="#12c4a8" strokeWidth="1" />
        <line x1="48" y1="42" x2="62" y2="42" stroke="#12c4a8" strokeWidth="1" />
        <circle cx="44" cy="24" r="1.6" fill="#12c4a8" />
        <circle cx="44" cy="60" r="1.6" fill="#12c4a8" />
        <circle cx="26" cy="42" r="1.6" fill="#12c4a8" />
        <circle cx="62" cy="42" r="1.6" fill="#12c4a8" />
      </svg>
    );
  }
  return null;
}

function LayerBand({ l }) {
  const core = l.isCore;
  return (
    <div style={{
      position: 'relative',
      background: l.bg,
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
      borderRadius: 10,
      border: core ? '4px solid #12c4a8' : '1px solid rgba(14,158,136,0.2)',
      borderLeft: core ? '4px solid #12c4a8' : `${l.leftBorder}px solid #12c4a8`,
      boxShadow: core
        ? '0 0 36px rgba(18,196,168,0.35), 0 0 80px rgba(18,196,168,0.12), 0 1px 0 rgba(255,255,255,0.04) inset'
        : '0 1px 0 rgba(255,255,255,0.03) inset',
      padding: '40px 40px',
      display: 'grid',
      gridTemplateColumns: '140px 1fr 120px',
      gap: 32,
      alignItems: 'center',
      minHeight: 200,
    }}>
      <div>
        <span style={{
          display: 'inline-block',
          fontSize: core ? 13 : 11,
          fontWeight: core ? 600 : 500,
          color: core ? '#12c4a8' : '#12c4a8',
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          padding: core ? '8px 14px' : '6px 12px',
          border: core ? '1px solid rgba(18,196,168,0.7)' : '1px solid rgba(18,196,168,0.35)',
          borderRadius: 4,
          background: core ? 'rgba(18,196,168,0.12)' : 'rgba(18,196,168,0.05)',
          textShadow: core ? '0 0 12px rgba(18,196,168,0.7)' : 'none',
        }}>{l.badge}</span>
      </div>
      <div>
        <h3 style={{
          fontSize: core ? 26 : 22,
          fontWeight: 600,
          margin: 0, marginBottom: 14,
          color: core ? '#ffffff' : '#f0f4f8',
          letterSpacing: '-0.015em',
          lineHeight: 1.25,
        }}>{l.title}</h3>
        <p style={{
          fontSize: 14, fontWeight: 400,
          color: '#f0f4f8',
          lineHeight: 1.7, margin: 0,
          maxWidth: 820,
        }}>{l.desc}</p>
      </div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
        <LayerVisual kind={l.visual} tint={l.visualTint} />
      </div>
    </div>
  );
}

function HowItWorksSection() {
  return (
    <div style={{ marginBottom: 140 }}>
      <div style={{ textAlign: 'center', marginBottom: 64, maxWidth: 820, marginLeft: 'auto', marginRight: 'auto' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
          <Eyebrow>Architecture</Eyebrow>
        </div>
        <h2 style={{
          fontSize: 'clamp(36px, 4.4vw, 52px)', fontWeight: 600, margin: 0, marginBottom: 20,
          letterSpacing: '-0.02em', color: 'var(--text)', lineHeight: 1.08,
        }}>
          How QDI Silbersperre Works
        </h2>
        <p style={{
          fontSize: 17, fontWeight: 400, color: '#f0f4f8', lineHeight: 1.6, margin: 0,
        }}>
          A layered defense architecture that intercepts, isolates, and neutralises threats before they reach critical systems — at both the classical and quantum level.
        </p>
      </div>

      <div>
        {HOW_LAYERS.map((l, i) => (
          <React.Fragment key={l.badge}>
            <LayerBand l={l} />
            {i < HOW_LAYERS.length - 1 && <FlowArrow />}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { HowItWorksSection, SectorBox });
