const SLIDES = [
{
  EN: {
    eyebrow: 'SERVICE · MANAGED SERVICES',
    title: ['Infrastructure', 'that doesn\u2019t', 'get in the way.'],
    italicWord: 'doesn\u2019t',
    body: 'Streamline business processes through automation, optimized IT infrastructure, and proactive system management\u2014reducing downtime and improving productivity.',
    metric: { value: '42%', label: 'Infra spend reduced' },
    secondary: { value: '2.1\u00d7', label: 'Throughput' }
  },
  DE: {
    eyebrow: 'SERVICE · MANAGED SERVICES',
    title: ['Infrastruktur,', 'die nicht im', 'Weg steht.'],
    italicWord: 'nicht',
    body: 'Optimieren Sie Gesch\u00e4ftsprozesse durch Automatisierung, eine optimierte IT-Infrastruktur und proaktives Systemmanagement \u2014 weniger Ausfallzeiten, h\u00f6here Produktivit\u00e4t.',
    metric: { value: '42%', label: 'Infrastrukturkosten reduziert' },
    secondary: { value: '2.1\u00d7', label: 'Durchsatz' }
  },
  bg: 'dark',
  diagram: 'architecture'
},
{
  EN: {
    eyebrow: 'SERVICE · MEDICAL DEVICE INTEGRATION',
    title: ['Lab instruments, X-ray', 'systems and EMR/EHR,', 'finally talking.'],
    italicWord: 'finally',
    body: 'HL7, FHIR and DICOM integrations that connect lab analyzers, X-ray systems and EMR/EHR \u2014 automated, bidirectional, audit-ready.',
    metric: { value: '0', label: 'Manual errors' },
    secondary: { value: '2×', label: 'Faster turnaround' }
  },
  DE: {
    eyebrow: 'SERVICE · INTEGRATION MEDIZINTECHNIK',
    title: ['Laborger\u00e4te, R\u00f6ntgen-', 'systeme und EMR/EHR,', 'endlich verbunden.'],
    italicWord: 'endlich',
    body: 'HL7-, FHIR- und DICOM-Integrationen, die Laboranalyseger\u00e4te, R\u00f6ntgensysteme und EMR/EHR verbinden \u2014 automatisiert, bidirektional, audit-sicher.',
    metric: { value: '0', label: 'Manuelle Fehler' },
    secondary: { value: '2×', label: 'Schnellere Bearbeitung' }
  },
  bg: 'paper',
  diagram: 'medlab'
},
{
  EN: {
    eyebrow: 'SERVICE · AI SOLUTIONS & SIMULATION',
    title: ['From complex data', 'to smart', 'decisions—powered by AI'],
    italicWord: 'smart',
    body: 'Address industry-specific challenges with customized AI models and simulation environments.',
    metric: { value: '6.4×', label: 'Faster simulation' },
    secondary: { value: 'GPU', label: 'Accelerated compute' }
  },
  DE: {
    eyebrow: 'SERVICE · KI-L\u00d6SUNGEN & SIMULATION',
    title: ['Von komplexen Daten', 'zu klugen', 'Entscheidungen \u2014 mit KI'],
    italicWord: 'klugen',
    body: 'L\u00f6sen Sie branchenspezifische Herausforderungen mit ma\u00dfgeschneiderten KI-Modellen und Simulationsumgebungen.',
    metric: { value: '6.4×', label: 'Schnellere Simulation' },
    secondary: { value: 'GPU', label: 'Beschleunigte Rechenleistung' }
  },
  bg: 'dark',
  diagram: 'aivis'
}];


function Diagram({ kind, dark, hovered }) {
  const stroke = dark ? '#1F1F22' : '#DFE0E1';
  const node = dark ? '#111114' : '#FFFFFF';
  const nodeBorder = dark ? '#2A2A2D' : '#DFE0E1';
  const dim = dark ? '#2A2A2D' : '#C5C6C8';
  const text = dark ? '#6C6C65' : '#929596';
  const liveGlow = dark ? 'url(#glowDark)' : 'url(#glowLight)';

  if (kind === 'architecture') {
    const accentOpacity = hovered ? 0.5 : 0.28;
    const nodeStroke = hovered ? '#DF3E6F' : nodeBorder;
    return (
      <svg viewBox="0 0 700 493" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" style={{ display: 'block' }}>
        <defs>
          <pattern id="gridA" width="28" height="28" patternUnits="userSpaceOnUse">
            <path d="M 28 0 L 0 0 0 28" fill="none" stroke={stroke} strokeWidth="0.8" />
          </pattern>
          <radialGradient id="glowDark" cx="50%" cy="50%" r="55%">
            <stop offset="0%" stopColor="#DF3E6F" stopOpacity={accentOpacity} />
            <stop offset="100%" stopColor="#DF3E6F" stopOpacity="0" />
          </radialGradient>
          <radialGradient id="glowLight" cx="50%" cy="50%" r="55%">
            <stop offset="0%" stopColor="#DF3E6F" stopOpacity={hovered ? 0.22 : 0.14} />
            <stop offset="100%" stopColor="#DF3E6F" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="700" height="493" fill="url(#gridA)" />
        <circle cx="350" cy="246" r="220" fill={dark ? 'url(#glowDark)' : 'url(#glowLight)'} />

        {/* Central hub */}
        <circle cx="350" cy="246" r="38" fill={node} stroke="#DF3E6F" strokeWidth={hovered ? 2 : 1.5} />
        <circle cx="350" cy="246" r="26" fill="#DF3E6F" opacity={hovered ? 0.25 : 0.15} />
        <circle cx="350" cy="246" r="12" fill="#DF3E6F" />
        <text x="350" y="300" textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="9" fill={text} letterSpacing="0.12em">CORE</text>

        {/* Orbital ring */}
        <circle cx="350" cy="246" r="110" fill="none" stroke={hovered ? '#DF3E6F' : stroke} strokeWidth="1" strokeDasharray="4 6" opacity={hovered ? 0.4 : 1} />

        {/* 6 satellite nodes */}
        {[0, 1, 2, 3, 4, 5].map((i) => {
          const angle = i / 6 * Math.PI * 2 - Math.PI / 2;
          const r = 110;
          const nx = 350 + Math.cos(angle) * r;
          const ny = 246 + Math.sin(angle) * r;
          const labels = ['CLOUD', 'SECURITY', 'DATA', 'NETWORK', 'DEVOPS', 'SUPPORT'];
          const accent = i === 1 || i === 4;
          const isHoverAccent = hovered && (i === 0 || i === 3);
          return (
            <g key={i}>
              <line x1="350" y1="246" x2={nx} y2={ny}
              stroke={accent || isHoverAccent ? '#DF3E6F' : stroke}
              strokeWidth={accent || isHoverAccent ? 1.5 : 1}
              strokeDasharray={accent || isHoverAccent ? 'none' : '3 5'}
              opacity={accent ? 0.6 : isHoverAccent ? 0.5 : 0.4} />
              <circle cx={nx} cy={ny} r="28" fill={node}
              stroke={accent ? '#DF3E6F' : isHoverAccent ? '#DF3E6F' : nodeBorder}
              strokeWidth={accent || isHoverAccent ? 1.5 : 1} />
              {(accent || isHoverAccent) && <circle cx={nx} cy={ny} r="20" fill="#DF3E6F" opacity={isHoverAccent ? 0.12 : 0.08} />}
              <rect x={nx - 12} y={ny - 10} width="24" height="4" rx="2" fill={accent ? '#DF3E6F' : dim} opacity="0.9" />
              <rect x={nx - 8} y={ny + 1} width="16" height="3" rx="1.5" fill={dim} opacity="0.6" />
              <text x={nx} y={ny + 44} textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="8"
              fill={accent || isHoverAccent ? '#DF3E6F' : text} letterSpacing="0.1em">{labels[i]}</text>
            </g>);

        })}

        {/* Outer metric pills */}
        {[
        { x: 128, y: 80, label: 'UPTIME', value: '99.98%', accent: true },
        { x: 490, y: 341, label: 'REGIONS', value: '5' },
        { x: 490, y: 80, label: 'ALERTS', value: '0' }].
        map((m) =>
        <g key={m.label}>
            <rect x={m.x} y={m.y} width="110" height="52" rx="8" fill={node} stroke={m.accent ? '#DF3E6F' : hovered ? dim : nodeBorder} strokeWidth={m.accent ? 1.5 : 1} />
            {m.accent && <rect x={m.x} y={m.y} width="110" height="3" rx="8" fill="#DF3E6F" />}
            <text x={m.x + 12} y={m.y + 18} fontFamily="Geist Mono, monospace" fontSize="8" fill={text} letterSpacing="0.12em">{m.label}</text>
            <text x={m.x + 12} y={m.y + 38} fontFamily="Geist, sans-serif" fontSize="16" fontWeight="500" fill={m.accent ? '#DF3E6F' : dark ? '#fff' : '#0D0F10'}>{m.value}</text>
          </g>
        )}
      </svg>);

  }

  if (kind === 'pipeline') {
    const stages = ['SOURCE', 'INGEST', 'TRANSFORM', 'WAREHOUSE', 'SERVE'];
    return (
      <svg viewBox="0 0 700 520" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" style={{ display: 'block' }}>
        <defs>
          <pattern id="gridP" width="32" height="32" patternUnits="userSpaceOnUse">
            <path d="M 32 0 L 0 0 0 32" fill="none" stroke={stroke} strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="700" height="520" fill="url(#gridP)" />
        {/* Horizontal track */}
        <line x1="80" y1="260" x2="620" y2="260" stroke={stroke} strokeWidth="1" />
        {stages.map((s, i) => {
          const x = 80 + i * 135;
          const accent = i === 2;
          return (
            <g key={s}>
              <circle cx={x} cy={260} r="10" fill={node} stroke={accent ? '#DF3E6F' : nodeBorder} strokeWidth={accent ? 1.5 : 1} />
              {accent && <circle cx={x} cy={260} r="4" fill="#DF3E6F" />}
              <text x={x} y={235} textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="10" fill={text} letterSpacing="0.12em">{s}</text>
              <text x={x} y={295} textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="9" fill={text} opacity="0.7">
                {['t+0', 't+12', 't+45', 't+58', 't+60'][i]}
              </text>
            </g>);

        })}
        {/* Mini histograms above each stage */}
        {stages.map((s, i) => {
          const x = 80 + i * 135 - 40;
          return (
            <g key={'h' + i} transform={`translate(${x}, 130)`}>
              {[...Array(8)].map((_, j) => {
                const h = 20 + (i * 3 + j * 7) % 50;
                return <rect key={j} x={j * 10} y={70 - h} width="6" height={h} fill={i === 2 ? '#DF3E6F' : dim} opacity={i === 2 ? 0.85 : 0.55} />;
              })}
            </g>);

        })}
        {/* Latency callout */}
        <g transform="translate(420, 380)">
          <rect width="180" height="68" rx="6" fill={node} stroke={nodeBorder} />
          <text x="14" y="22" fontFamily="Geist Mono, monospace" fontSize="9" fill={text} letterSpacing="0.12em">P95 LATENCY</text>
          <text x="14" y="50" fontFamily="Geist, sans-serif" fontSize="22" fill={dark ? '#fff' : '#0D0F10'} fontWeight="500">412 ms</text>
          <text x="120" y="50" fontFamily="Geist Mono, monospace" fontSize="11" fill="#3D7A66">▼ 38%</text>
        </g>
      </svg>);

  }

  // medlab — bidirectional lab ↔ hospital data exchange
  if (kind === 'medlab') {
    const LAB_INSTRUMENTS = ['Analyzer A', 'Centrifuge', 'Sequencer', 'Imager'];
    const HOSPITAL_SYSTEMS = ['EMR / EHR', 'LIS', 'PACS', 'HIS'];
    // 20% smaller: box w=128,h=45, spacing=72, hub=96×64
    const boxW = 102, boxH = 36, rowGap = 58, startY = 112;
    const hubX = 311, hubY = 220, hubW = 77, hubH = 51;
    const hubCX = hubX + hubW / 2, hubCY = hubY + hubH / 2;
    return (
      <svg viewBox="0 0 700 493" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" style={{display:'block'}}>
        <defs>
          <pattern id="gridML" width="28" height="28" patternUnits="userSpaceOnUse">
            <path d="M 28 0 L 0 0 0 28" fill="none" stroke={stroke} strokeWidth="0.8"/>
          </pattern>
          <radialGradient id="mlGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#DF3E6F" stopOpacity="0.18"/>
            <stop offset="100%" stopColor="#DF3E6F" stopOpacity="0"/>
          </radialGradient>
          <marker id="arrowR" markerWidth="4" markerHeight="4" refX="3" refY="2" orient="auto">
            <path d="M0,0 L0,4 L4,2 z" fill="#DF3E6F" opacity="0.8"/>
          </marker>
          <marker id="arrowL" markerWidth="4" markerHeight="4" refX="1" refY="2" orient="auto-start-reverse">
            <path d="M4,0 L4,4 L0,2 z" fill={dim} opacity="0.6"/>
          </marker>
        </defs>
        <rect width="700" height="493" fill="url(#gridML)"/>
        <circle cx="350" cy="246" r="200" fill="url(#mlGlow)"/>

        {/* HL7 Central Hub */}
        <rect x={hubX} y={hubY} width={hubW} height={hubH} rx="10" fill={node} stroke="#DF3E6F" strokeWidth="1.5"/>
        <rect x={hubX} y={hubY} width={hubW} height="3" rx="10" fill="#DF3E6F"/>
        <text x={hubCX} y={hubY + 16} textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="7" fill="#DF3E6F" letterSpacing="0.12em">HL7 / FHIR</text>
        <text x={hubCX} y={hubY + 30} textAnchor="middle" fontFamily="Geist, sans-serif" fontSize="9.5" fontWeight="500" fill={dark ? '#fff' : '#0D0F10'}>Integration</text>
        <text x={hubCX} y={hubY + 43} textAnchor="middle" fontFamily="Geist, sans-serif" fontSize="9.5" fontWeight="500" fill={dark ? '#fff' : '#0D0F10'}>Engine</text>

        {/* Lab instruments — left column */}
        {LAB_INSTRUMENTS.map((name, i) => {
          const y = startY + i * rowGap;
          const bx = 52, by = y;
          const bCX = bx + boxW, bCY = by + boxH / 2;
          return (
            <g key={name}>
              <rect x={bx} y={by} width={boxW} height={boxH} rx="7" fill={node} stroke={nodeBorder} strokeWidth="1"/>
              <rect x={bx} y={by} width="3" height={boxH} rx="4" fill="#DF3E6F" opacity="0.7"/>
              <text x={bx + boxW - 10} y={by + 13} textAnchor="end" fontFamily="Geist Mono, monospace" fontSize="6.5" fill={text} letterSpacing="0.1em">LAB</text>
              <text x={bx + boxW - 10} y={by + 27} textAnchor="end" fontFamily="Geist, sans-serif" fontSize="9.5" fontWeight="500" fill={dark ? '#fff' : '#0D0F10'}>{name}</text>
              {/* Result arrow → hub */}
              <line x1={bCX + 2} y1={bCY - 3} x2={hubX - 4} y2={hubCY - 3}
                stroke="#DF3E6F" strokeWidth="0.75" strokeDasharray="3 3"
                markerEnd="url(#arrowR)" opacity="0.65"/>
              {/* Order arrow ← hub */}
              <line x1={hubX - 4} y1={hubCY + 3} x2={bCX + 2} y2={bCY + 3}
                stroke={dim} strokeWidth="0.6" strokeDasharray="2 3"
                markerEnd="url(#arrowL)" opacity="0.45"/>
            </g>
          );
        })}

        {/* Hospital systems — right column */}
        {HOSPITAL_SYSTEMS.map((name, i) => {
          const y = startY + i * rowGap;
          const bx = 548, by = y;
          const bCX = bx, bCY = by + boxH / 2;
          const hubRX = hubX + hubW;
          return (
            <g key={name}>
              <rect x={bx} y={by} width={boxW} height={boxH} rx="7" fill={node} stroke={nodeBorder} strokeWidth="1"/>
              <rect x={bx + boxW - 3} y={by} width="3" height={boxH} rx="4" fill="#3D7A66" opacity="0.7"/>
              <text x={bx + 8} y={by + 13} fontFamily="Geist Mono, monospace" fontSize="6.5" fill={text} letterSpacing="0.1em">HOSPITAL</text>
              <text x={bx + 8} y={by + 27} fontFamily="Geist, sans-serif" fontSize="9.5" fontWeight="500" fill={dark ? '#fff' : '#0D0F10'}>{name}</text>
              {/* Result arrow → hospital */}
              <line x1={hubRX + 4} y1={hubCY - 3} x2={bCX - 4} y2={bCY - 3}
                stroke="#3D7A66" strokeWidth="0.75" strokeDasharray="3 3"
                markerEnd="url(#arrowR)" opacity="0.55"/>
              {/* Order arrow ← hospital */}
              <line x1={bCX - 4} y1={bCY + 3} x2={hubRX + 4} y2={hubCY + 3}
                stroke={dim} strokeWidth="0.6" strokeDasharray="2 3"
                opacity="0.45"/>
            </g>
          );
        })}

        {/* Status badges */}
        <g transform="translate(258, 440)">
          <rect width="88" height="26" rx="6" fill={node} stroke="#3D7A66" strokeWidth="1"/>
          <circle cx="12" cy="13" r="3.5" fill="#3D7A66"/>
          <text x="22" y="17" fontFamily="Geist Mono, monospace" fontSize="8" fill={text} letterSpacing="0.1em">CONNECTED</text>
        </g>
        <g transform="translate(358, 440)">
          <rect width="84" height="26" rx="6" fill={node} stroke={nodeBorder} strokeWidth="1"/>
          <circle cx="12" cy="13" r="3.5" fill="#DF3E6F"/>
          <text x="22" y="17" fontFamily="Geist Mono, monospace" fontSize="8" fill={text} letterSpacing="0.1em">LIVE SYNC</text>
        </g>
      </svg>
    );
  }

  // aivis — AI neural network + simulation visualization
  if (kind === 'aivis') {
    const layers = [
      { label: 'INPUT', nodes: 4, x: 100 },
      { label: 'HIDDEN', nodes: 6, x: 240 },
      { label: 'ATTENTION', nodes: 6, x: 380 },
      { label: 'OUTPUT', nodes: 3, x: 520 },
    ];
    const nodeR = 13;
    const totalH = 493;
    const getY = (count, idx) => (totalH / 2) + (idx - (count - 1) / 2) * 56;

    // Active path through the network — pink data flow
    const activePath = [
      { layer: 0, node: 1 },
      { layer: 1, node: 2 },
      { layer: 2, node: 3 },
      { layer: 3, node: 1 },
    ];
    const isActiveNode = (li, ni) => activePath.some(p => p.layer === li && p.node === ni);
    const isActiveEdge = (li, ai, bi) => {
      const a = activePath.find(p => p.layer === li);
      const b = activePath.find(p => p.layer === li + 1);
      return a && b && a.node === ai && b.node === bi;
    };

    return (
      <svg viewBox="0 0 700 493" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" style={{display:'block'}}>
        <defs>
          <pattern id="gridAI" width="28" height="28" patternUnits="userSpaceOnUse">
            <path d="M 28 0 L 0 0 0 28" fill="none" stroke={stroke} strokeWidth="0.8"/>
          </pattern>
          <radialGradient id="aiGlow" cx="35%" cy="50%" r="55%">
            <stop offset="0%" stopColor="#DF3E6F" stopOpacity="0.18"/>
            <stop offset="100%" stopColor="#DF3E6F" stopOpacity="0"/>
          </radialGradient>
          <radialGradient id="aiGlow2" cx="75%" cy="55%" r="45%">
            <stop offset="0%" stopColor="#3D7A66" stopOpacity="0.16"/>
            <stop offset="100%" stopColor="#3D7A66" stopOpacity="0"/>
          </radialGradient>
          <linearGradient id="activeFlow" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#DF3E6F" stopOpacity="0.9"/>
            <stop offset="100%" stopColor="#DF3E6F" stopOpacity="0.6"/>
          </linearGradient>
          <radialGradient id="activeNodeGrad" cx="35%" cy="35%" r="65%">
            <stop offset="0%" stopColor="#FF6B95"/>
            <stop offset="100%" stopColor="#DF3E6F"/>
          </radialGradient>
          <radialGradient id="outputNodeGrad" cx="35%" cy="35%" r="65%">
            <stop offset="0%" stopColor="#5BA68C"/>
            <stop offset="100%" stopColor="#3D7A66"/>
          </radialGradient>
          <filter id="aiBlur" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="3"/>
          </filter>
        </defs>
        <rect width="700" height="493" fill="url(#gridAI)"/>
        <circle cx="240" cy="246" r="240" fill="url(#aiGlow)"/>
        <circle cx="520" cy="246" r="180" fill="url(#aiGlow2)"/>

        {/* Decorative orbital rings around active path */}
        <g opacity={hovered ? 0.6 : 0.35} style={{transition:'opacity 400ms'}}>
          <circle cx="380" cy="246" r="190" fill="none" stroke="#DF3E6F" strokeWidth="0.5" strokeDasharray="2 6" opacity="0.5"/>
          <circle cx="380" cy="246" r="140" fill="none" stroke="#DF3E6F" strokeWidth="0.5" strokeDasharray="1 4" opacity="0.4"/>
        </g>

        {/* Connections between layers */}
        {layers.slice(0, -1).map((layerA, li) => {
          const layerB = layers[li + 1];
          return [...Array(layerA.nodes)].map((_, ai) =>
            [...Array(layerB.nodes)].map((_, bi) => {
              const y1 = getY(layerA.nodes, ai);
              const y2 = getY(layerB.nodes, bi);
              const active = isActiveEdge(li, ai, bi);
              if (active) return null; // render active edges in second pass on top
              return (
                <line key={`${li}-${ai}-${bi}`}
                  x1={layerA.x + nodeR} y1={y1}
                  x2={layerB.x - nodeR} y2={y2}
                  stroke="#C5C6C8"
                  strokeWidth={0.5}
                  opacity={hovered ? 0.35 : 0.22}
                  style={{transition:'opacity 400ms'}}
                />
              );
            })
          );
        })}

        {/* Active path edges — render on top with glow */}
        {layers.slice(0, -1).map((layerA, li) => {
          const layerB = layers[li + 1];
          const a = activePath.find(p => p.layer === li);
          const b = activePath.find(p => p.layer === li + 1);
          if (!a || !b) return null;
          const y1 = getY(layerA.nodes, a.node);
          const y2 = getY(layerB.nodes, b.node);
          return (
            <g key={`active-${li}`}>
              <line x1={layerA.x + nodeR} y1={y1} x2={layerB.x - nodeR} y2={y2}
                stroke="#DF3E6F" strokeWidth="3" opacity="0.18" filter="url(#aiBlur)"/>
              <line x1={layerA.x + nodeR} y1={y1} x2={layerB.x - nodeR} y2={y2}
                stroke="url(#activeFlow)" strokeWidth="1.5" opacity="0.95"/>
              {/* Animated dot traveling along edge */}
              <circle r="3.5" fill="#DF3E6F">
                <animateMotion dur="1.8s" repeatCount="indefinite" begin={`${li * 0.45}s`}
                  path={`M ${layerA.x + nodeR} ${y1} L ${layerB.x - nodeR} ${y2}`}/>
                <animate attributeName="opacity" values="0;1;1;0" dur="1.8s" repeatCount="indefinite" begin={`${li * 0.45}s`}/>
              </circle>
            </g>
          );
        })}

        {/* Nodes */}
        {layers.map((layer, li) => (
          [...Array(layer.nodes)].map((_, ni) => {
            const y = getY(layer.nodes, ni);
            const isOutput = li === layers.length - 1;
            const active = isActiveNode(li, ni);
            return (
              <g key={`${li}-${ni}`}>
                {active && (
                  <>
                    <circle cx={layer.x} cy={y} r={nodeR + 12} fill="#DF3E6F" opacity="0.1"/>
                    <circle cx={layer.x} cy={y} r={nodeR + 6} fill="#DF3E6F" opacity="0.18">
                      <animate attributeName="r" values={`${nodeR + 4};${nodeR + 10};${nodeR + 4}`} dur="2.2s" repeatCount="indefinite"/>
                      <animate attributeName="opacity" values="0.25;0.05;0.25" dur="2.2s" repeatCount="indefinite"/>
                    </circle>
                  </>
                )}
                <circle cx={layer.x} cy={y} r={nodeR}
                  fill={active ? 'url(#activeNodeGrad)' : (isOutput ? 'url(#outputNodeGrad)' : '#FFFFFF')}
                  stroke={active ? '#DF3E6F' : (isOutput ? '#3D7A66' : '#DFE0E1')}
                  strokeWidth={active || isOutput ? 1.2 : 1}
                />
                {active && <circle cx={layer.x - 3} cy={y - 3} r={3} fill="#FFFFFF" opacity="0.6"/>}
                {isOutput && !active && <circle cx={layer.x - 3} cy={y - 3} r={3} fill="#FFFFFF" opacity="0.5"/>}
              </g>
            );
          })
        ))}

        {/* Layer labels */}
        {layers.map((layer) => (
          <text key={layer.label} x={layer.x} y={50}
            textAnchor="middle"
            fontFamily="Geist Mono, monospace" fontSize="9"
            fill="#929596" letterSpacing="0.16em" fontWeight="500"
          >{layer.label}</text>
        ))}

        {/* Top-left telemetry strip */}
        <g transform="translate(36, 78)">
          <text fontFamily="Geist Mono, monospace" fontSize="8" fill="#929596" letterSpacing="0.14em">PIPELINE STATUS</text>
          <g transform="translate(0, 14)">
            <circle cx="4" cy="4" r="4" fill="#3D7A66"/>
            <circle cx="4" cy="4" r="4" fill="#3D7A66" opacity="0.4">
              <animate attributeName="r" values="4;9;4" dur="1.6s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.5;0;0.5" dur="1.6s" repeatCount="indefinite"/>
            </circle>
            <text x="14" y="8" fontFamily="Geist, sans-serif" fontSize="11" fill="#0A0A0B" fontWeight="500">Inference active</text>
          </g>
        </g>

        {/* Right-side metric cards */}
        {[
          { y: 80, label: 'MODEL', value: 'CFD / FEA', accent: '#DF3E6F' },
          { y: 152, label: 'COMPUTE', value: 'GPU ×8', accent: '#4A5D7E' },
          { y: 224, label: 'PARAMS', value: '4.2B', accent: '#929596' },
        ].map((m) => (
          <g key={m.label} transform={`translate(541, ${m.y})`}>
            <rect width="120" height="60" rx="10" fill="#FFFFFF" stroke="#DFE0E1" strokeWidth="1"/>
            <rect width="3" height="60" rx="0" fill={m.accent}/>
            <text x="14" y="22" fontFamily="Geist Mono, monospace" fontSize="8" fill="#929596" letterSpacing="0.14em" fontWeight="500">{m.label}</text>
            <text x="14" y="44" fontFamily="Geist, sans-serif" fontSize="17" fontWeight="600" fill="#0A0A0B">{m.value}</text>
          </g>
        ))}

        {/* Speedup hero card */}
        <g transform="translate(541, 308)">
          <rect width="120" height="78" rx="10" fill="#3D7A66"/>
          <rect width="120" height="78" rx="10" fill="url(#outputNodeGrad)" opacity="0.15"/>
          <text x="14" y="22" fontFamily="Geist Mono, monospace" fontSize="8" fill="#FFFFFF" opacity="0.7" letterSpacing="0.14em" fontWeight="500">SPEEDUP</text>
          <text x="14" y="56" fontFamily="Geist, sans-serif" fontSize="32" fontWeight="600" fill="#FFFFFF" letterSpacing="-0.02em">6.4×</text>
          <text x="14" y="71" fontFamily="Geist, sans-serif" fontSize="9" fill="#FFFFFF" opacity="0.7">vs CPU baseline</text>
        </g>

        {/* Bottom waveform / signal */}
        <g transform="translate(36, 410)" opacity="0.85">
          <text fontFamily="Geist Mono, monospace" fontSize="8" fill="#929596" letterSpacing="0.14em">LATENCY · 24ms</text>
          <g transform="translate(0, 14)">
            {[...Array(40)].map((_, i) => {
              const h = 6 + Math.abs(Math.sin(i * 0.6) * 14) + (i % 3) * 2;
              const isAccent = i > 18 && i < 26;
              return (
                <rect key={i} x={i * 6} y={20 - h} width="3" height={h} rx="1"
                  fill={isAccent ? '#DF3E6F' : '#C5C6C8'}/>
              );
            })}
          </g>
        </g>

        <text x="36" y="468" fontFamily="Geist Mono, monospace" fontSize="9" fill="#929596" letterSpacing="0.12em">
          NEURAL PIPELINE · GPU-ACCELERATED · REAL-TIME INFERENCE
        </text>
      </svg>
    );
  }

  // matrix
  const cols = 14,rows = 9;
  return (
    <svg viewBox="0 0 700 520" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" style={{ display: 'block' }}>
      <defs>
        <pattern id="gridM" width="32" height="32" patternUnits="userSpaceOnUse">
          <path d="M 32 0 L 0 0 0 32" fill="none" stroke={stroke} strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="700" height="520" fill="url(#gridM)" />
      <g transform="translate(70, 80)">
        {[...Array(rows)].map((_, r) =>
        [...Array(cols)].map((_, c) => {
          const seed = (r * 7 + c * 13) % 17;
          const filled = seed > 4;
          const accent = seed === 5 || seed === 11;
          return (
            <rect
              key={`${r}-${c}`}
              x={c * 38}
              y={r * 38}
              width={28}
              height={28}
              rx={3}
              fill={filled ? accent ? '#DF3E6F' : node : 'transparent'}
              stroke={accent ? '#DF3E6F' : nodeBorder}
              strokeWidth={1}
              opacity={filled ? 1 : 0.35} />);


        })
        )}
      </g>
      <text x="70" y="60" fontFamily="Geist Mono, monospace" fontSize="10" fill={text} letterSpacing="0.12em">CONTROL COVERAGE · SOC 2 · ISO 27001 · HIPAA</text>
      <text x="70" y="468" fontFamily="Geist Mono, monospace" fontSize="10" fill={text} letterSpacing="0.12em">126 / 126 CONTROLS · 0 EXCEPTIONS</text>
    </svg>);

}

function SlideContent({ slide, lang, dark, idx, total, go }) {
  const t = slide[lang] || slide.EN;
  const fg = dark ? 'var(--gs-900)' : 'var(--gs-900)';
  const fgMuted = dark ? 'var(--gs-600)' : 'var(--gs-600)';
  const eyebrowColor = dark ? 'var(--gs-500)' : 'var(--fg-muted)';
  const borderColor = dark ? 'rgba(0,0,0,0.1)' : 'var(--border)';
  const cardBg = dark ? 'rgba(0,0,0,0.05)' : 'rgba(0,0,0,0.03)';
  const [diagramHovered, setDiagramHovered] = React.useState(false);

  return (
    <div className="gs-slide-grid" style={{
      display: 'grid',
      gridTemplateColumns: '1.1fr 1fr',
      height: '100%',
      gap: 0
    }}>
      {/* Left — copy */}
      {(() => {
        const [leftHovered, setLeftHovered] = React.useState(false);
        return (
          <div
            className="gs-slide-left"
            onMouseEnter={() => setLeftHovered(true)}
            onMouseLeave={() => setLeftHovered(false)}
            style={{
              padding: '44px 52px 40px',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              borderRight: `1px solid ${borderColor}`,
              position: 'relative',
              background: dark
                ? (leftHovered ? '#D8D9DB' : '#EDEEEF')
                : (leftHovered ? '#F0F0F0' : '#fff'),
              transition: 'background 400ms var(--ease-standard)',
            }}>
            {/* Hover glow overlay */}
            <div style={{
              position: 'absolute', inset: 0, pointerEvents: 'none',
              background: leftHovered
                ? (dark
                  ? 'radial-gradient(ellipse 70% 60% at 30% 70%, rgba(223,62,111,0.10) 0%, transparent 70%)'
                  : 'radial-gradient(ellipse 70% 60% at 30% 70%, rgba(223,62,111,0.06) 0%, transparent 70%)')
                : (dark
                  ? 'radial-gradient(ellipse 60% 50% at 20% 80%, rgba(223,62,111,0.05) 0%, transparent 70%)'
                  : 'radial-gradient(ellipse 60% 50% at 20% 80%, rgba(223,62,111,0.04) 0%, transparent 70%)'),
              transition: 'background 400ms var(--ease-standard)',
            }} />

        <div className="gs-slide-content" style={{ position: 'relative', width: "100%", maxWidth: 480 }}>
          {/* Eyebrow with animated progress line */}
          <div style={{ marginBottom: 28 }}>
            <div style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 13,
              letterSpacing: '0.16em',
              color: 'var(--accent)',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 10,
              marginBottom: 10
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)',
                boxShadow: '0 0 8px rgba(223,62,111,0.6)',
                animation: 'pulse 1.6s ease-in-out infinite'
              }} />
              {t.eyebrow}
            </div>
            {/* Slide progress bar */}
            <div style={{
              height: 1, background: dark ? 'rgba(255,255,255,0.08)' : 'var(--border)',
              borderRadius: 999, overflow: 'hidden', maxWidth: 200
            }}>
              <div style={{
                height: '100%',
                width: `${(idx + 1) / total * 100}%`,
                background: 'var(--accent)',
                transition: 'width 600ms var(--ease-standard)',
                borderRadius: 999
              }} />
            </div>
          </div>

          {/* Read the brief — top right */}
          <div className="gs-read-brief" style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 20 }}>
            <a href="case-studies.html" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              fontSize: 13, fontWeight: 500, color: fg,
              padding: '10px 18px',
              borderRadius: 999,
              border: `1px solid ${borderColor}`,
              background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
              backdropFilter: 'blur(4px)',
              transition: 'background 160ms'
            }}>Read the brief <span style={{ color: 'var(--accent)' }}>↗</span></a>
          </div>

          <h2 className="gs-slide-title" style={{
            margin: 0,
            fontSize: 45,
            lineHeight: 1.06,
            letterSpacing: '-0.03em',
            fontWeight: 500,
            color: fg,
            maxWidth: 520
          }}>
            {t.title.map((line, i) => {
              const parts = line.split(t.italicWord);
              if (parts.length === 2) {
                return (
                  <span key={i} style={{ display: 'block', fontSize: "40px" }}>
                    {parts[0]}
                    <span style={{
                      fontFamily: 'var(--font-serif)',
                      fontStyle: 'italic',
                      fontWeight: 400,
                      color: 'var(--accent)'
                    }}>{t.italicWord}</span>
                    {parts[1]}
                  </span>);

              }
              return <span key={i} style={{ display: 'block', fontSize: "40px" }}>{line}</span>;
            })}
          </h2>

          <p style={{


            lineHeight: 1.6,
            color: fgMuted,
            maxWidth: '100%', margin: "12px 0 0", fontSize: "15px"
          }} className="gs-slide-body">{t.body}</p>
        </div>

        {/* Bottom — metrics + CTA */}
        <div style={{ position: 'relative', marginTop: 17 }}>
          <div className="gs-metric-grid" style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 24
          }}>
            {[t.metric, t.secondary].map((m, i) =>
            <div key={i} style={{
              padding: '16px 18px',
              borderRadius: 12,
              background: cardBg,
              border: `1px solid ${borderColor}`,
              backdropFilter: 'blur(4px)',
              position: 'relative', overflow: 'hidden'
            }}>
                {i === 0 && <div style={{
                position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                background: 'linear-gradient(90deg, var(--accent), transparent)',
                opacity: 0.8
              }} />}
                <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 9,
                letterSpacing: '0.16em', color: eyebrowColor,
                textTransform: 'uppercase', marginBottom: 8
              }}>{m.label}</div>
                <div className={i === 0 ? 'gs-metric-val-lg' : 'gs-metric-val-sm'} style={{
                fontSize: i === 0 ? 36 : 24,
                fontWeight: 500,
                letterSpacing: '-0.02em',
                color: i === 0 ? dark ? '#fff' : 'var(--gs-900)' : fg,
                lineHeight: 1
              }}>{m.value}</div>
              </div>
            )}
          </div>
        </div>
      </div>
        );
      })()}

      {/* Right — diagram */}
      <div
        className="gs-slide-diagram"
        onMouseEnter={() => setDiagramHovered(true)}
        onMouseLeave={() => setDiagramHovered(false)}
        style={{
          position: 'relative',
          background: dark ?
          diagramHovered ? 'var(--gs-200)' : 'var(--gs-100)' :
          diagramHovered ? 'var(--gs-200)' : 'var(--gs-100)',
          overflow: 'hidden',
          cursor: 'crosshair',
          transition: 'background 400ms var(--ease-standard)'
        }}>
        {/* Decorative corner glow — expands on hover */}
        <div style={{
          position: 'absolute', top: -60, right: -60,
          width: diagramHovered ? 360 : 240,
          height: diagramHovered ? 360 : 240,
          borderRadius: '50%',
          background: `radial-gradient(circle, rgba(223,62,111,${diagramHovered ? 0.32 : 0.18}) 0%, transparent 70%)`,
          pointerEvents: 'none',
          transition: 'width 500ms var(--ease-standard), height 500ms var(--ease-standard), background 500ms'
        }} />
        {/* Centre glow on hover */}
        {diagramHovered &&
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'radial-gradient(ellipse 60% 60% at 50% 50%, rgba(223,62,111,0.10) 0%, transparent 70%)',
          animation: 'fadeIn 300ms ease forwards'
        }} />
        }
        {/* Diagram with scale on hover */}
        <div style={{
          width: '100%', height: '100%',
          transform: diagramHovered ? 'scale(1.04)' : 'scale(1)',
          transition: 'transform 500ms var(--ease-standard)',
          transformOrigin: 'center center'
        }}>
          <Diagram kind={slide.diagram} dark={false} hovered={diagramHovered} />
        </div>
        {/* Gradient fade on left edge */}
        <div style={{
          position: 'absolute', top: 0, left: 0, bottom: 0, width: 48,
          background: dark ?
          `linear-gradient(90deg, ${diagramHovered ? 'var(--gs-200)' : 'var(--gs-100)'}, transparent)` :
          `linear-gradient(90deg, ${diagramHovered ? 'var(--gs-200)' : 'var(--gs-100)'}, transparent)`,
          pointerEvents: 'none',
          transition: 'background 400ms'
        }} />
        <div style={{
          position: 'absolute', top: 20, right: 20,
          fontFamily: 'var(--font-mono)', fontSize: 10,
          letterSpacing: '0.14em', color: '#DF3E6F',
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '6px 10px', borderRadius: 999,
          background: diagramHovered ? 'rgba(223,62,111,0.18)' : dark ? 'rgba(223,62,111,0.1)' : 'rgba(223,62,111,0.08)',
          border: '1px solid rgba(223,62,111,0.3)',
          transition: 'background 300ms'
        }}>
          <span style={{
            width: 5, height: 5, borderRadius: '50%', background: '#DF3E6F',
            animation: 'pulse 1.6s ease-in-out infinite'
          }} />
          LIVE
        </div>
      </div>
    </div>);

}

function Slider({ lang = 'EN' }) {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const total = SLIDES.length;
  const touch = React.useRef({ x: 0, y: 0, t: 0, active: false });

  React.useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setIdx((i) => (i + 1) % total), 6500);
    return () => clearTimeout(t);
  }, [idx, paused, total]);

  const go = (n) => setIdx((n + total) % total);
  const slide = SLIDES[idx];
  const dark = slide.bg === 'dark';

  const onTouchStart = (e) => {
    const tc = e.touches[0];
    touch.current = { x: tc.clientX, y: tc.clientY, t: Date.now(), active: true };
    setPaused(true);
  };
  const onTouchEnd = (e) => {
    if (!touch.current.active) return;
    const tc = e.changedTouches[0];
    const dx = tc.clientX - touch.current.x;
    const dy = tc.clientY - touch.current.y;
    const dt = Date.now() - touch.current.t;
    touch.current.active = false;
    // horizontal swipe, not too slow, not mostly vertical
    if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy) * 1.2 && dt < 800) {
      if (dx < 0) go(idx + 1);
      else go(idx - 1);
    }
    // brief unpause delay for autoplay
    setTimeout(() => setPaused(false), 4000);
  };

  return (
    <section
      style={{
        maxWidth: 1440,
        margin: '0 auto',
        padding: '8px var(--page-px,40px) 40px'
      }}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}>
      
      <style>{`
        @media (max-width: 1024px) {
          .gs-slide-diagram { display: none !important; }
          .gs-slide-ticker { display: none !important; }
          .gs-slide-grid { grid-template-columns: 1fr !important; }
          .gs-slider-box { height: auto !important; min-height: 460px; }
          .gs-slide-left { padding: 36px 32px 32px !important; }
          .gs-slide-title { font-size: 40px !important; }
          .gs-slide-body { font-size: 15px !important; max-width: 100% !important; }
          .gs-metric-grid { grid-template-columns: 1fr 1fr !important; }
          .gs-read-brief { display: none !important; }
        }
        @media (max-width: 768px) {
          .gs-slider-box { min-height: 420px; }
          .gs-slide-left { padding: 28px 24px 24px !important; }
          .gs-slide-title { font-size: 34px !important; }
          .gs-slide-body { font-size: 14px !important; }
          .gs-metric-val-lg { font-size: 28px !important; }
          .gs-metric-val-sm { font-size: 18px !important; }
          .gs-slide-eyebrow { font-size: 9px !important; }
          .gs-progress-bar { max-width: 140px !important; }
        }
        @media (max-width: 480px) {
          .gs-slider-box { min-height: 380px; border-radius: 12px !important; }
          .gs-slide-left { padding: 22px 18px 20px !important; }
          .gs-slide-title { font-size: 26px !important; line-height: 1.1 !important; }
          .gs-slide-title span { font-size: 26px !important; }
          .gs-slide-body { font-size: 13px !important; margin-top: 14px !important; max-width: 100% !important; width: auto !important; }
          .gs-metric-grid { gap: 8px !important; margin-bottom: 16px !important; }
          .gs-metric-val-lg { font-size: 24px !important; }
          .gs-metric-val-sm { font-size: 16px !important; }
          .gs-slide-controls { padding: 10px 12px !important; gap: 8px !important; flex-wrap: wrap !important; }
          .gs-arrow-btn { width: 36px !important; height: 36px !important; font-size: 13px !important; }
        }
        @media (max-width: 360px) {
          .gs-slide-title, .gs-slide-title span { font-size: 22px !important; }
          .gs-metric-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
      <div className="gs-slider-box" style={{
        position: 'relative',
        borderRadius: 18,
        overflow: 'hidden',
        border: `1px solid var(--border)`,
        background: '#FFFFFF',
        height: 493,
        transition: 'background 320ms var(--ease-standard), border-color 320ms var(--ease-standard)',
        boxShadow: 'var(--shadow-sm)'
      }}>
        {/* Sliding track */}
        <div style={{
          display: 'flex',
          width: `${total * 100}%`,
          height: '100%',
          transform: `translateX(-${idx * (100 / total)}%)`,
          transition: 'transform 620ms var(--ease-standard)'
        }}>
          {SLIDES.map((s, i) =>
          <div key={i} style={{
            width: `${100 / total}%`,
            height: '100%',
            background: '#FFFFFF',
            color: 'var(--gs-900)'
          }}>
              <SlideContent slide={s} lang={lang} dark={false} idx={idx} total={total} go={go} />
            </div>
          )}
        </div>

        {/* Bottom controls bar */}
        <div className="gs-slide-controls" style={{
          position: 'absolute',
          left: 0, right: 0, bottom: 0,
          padding: '16px 24px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          pointerEvents: 'none',
          zIndex: 2
        }}>
          {/* Progress dots + counter */}
          <div style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 14,
            padding: '10px 16px',
            borderRadius: 999,
            background: 'rgba(255,255,255,0.85)',
            border: `1px solid var(--border)`,
            backdropFilter: 'blur(8px)',
            pointerEvents: 'auto'
          }}>
            <span style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 11,
              letterSpacing: '0.14em',
              color: 'var(--fg-muted)'
            }}>
              {String(idx + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}
            </span>
            <span style={{
              width: 1, height: 12,
              background: 'var(--border)'
            }} />
            <div style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
              {SLIDES.map((_, i) =>
              <button
                key={i}
                onClick={() => go(i)}
                aria-label={`Go to slide ${i + 1}`}
                style={{
                  width: i === idx ? 28 : 8,
                  height: 8,
                  padding: 0,
                  borderRadius: 999,
                  border: 'none',
                  background: i === idx ? 'var(--accent)' : 'var(--border-strong)',
                  cursor: 'pointer',
                  transition: 'width 280ms var(--ease-standard), background 200ms var(--ease-standard)'
                }} />

              )}
            </div>
          </div>

          {/* Prev / Next */}
          <div style={{ display: 'inline-flex', gap: 8, pointerEvents: 'auto' }}>
            <button onClick={() => go(idx - 1)} aria-label="Previous" className="gs-arrow-btn" style={arrowBtn(false)}>←</button>
            <button onClick={() => go(idx + 1)} aria-label="Next" className="gs-arrow-btn" style={arrowBtn(false)}>→</button>
          </div>
        </div>

        {/* Top-left corner ticker */}
        <div className="gs-slide-ticker" style={{
          position: 'absolute',
          top: 24,
          left: 24,
          fontFamily: 'var(--font-mono)',
          fontSize: 12,
          letterSpacing: '0.18em',
          color: 'var(--gs-400)',
          pointerEvents: 'none'
        }}>
          GREY SPACE IT SERVICES GMBH
        </div>
      </div>
    </section>);

}

function arrowBtn(dark) {
  return {
    width: 44,
    height: 44,
    borderRadius: 999,
    border: `1px solid ${dark ? '#2A2A2D' : 'var(--border)'}`,
    background: dark ? 'rgba(10,10,11,0.65)' : 'rgba(255,255,255,0.85)',
    color: dark ? '#fff' : 'var(--gs-900)',
    fontSize: 16,
    cursor: 'pointer',
    fontFamily: 'inherit',
    backdropFilter: 'blur(8px)',
    transition: 'background 160ms var(--ease-standard), transform 160ms var(--ease-standard)'
  };
}

window.Slider = Slider;