/* global React */
const { useState: useStateB, useEffect: useEffectB } = React;

// ============================================================
// BUNDLE EXPLORER — pick units, see compounded outcome
// ============================================================
function BundleExplorer({ t }) {
  const [selected, setSelected] = useStateB(new Set(['cx', 'elements']));

  const toggle = (k) => {
    const next = new Set(selected);
    if (next.has(k)) next.delete(k);
    else next.add(k);
    setSelected(next);
  };

  const setFromKeys = (keys) => setSelected(new Set(keys));
  const clearAll = () => setSelected(new Set());

  const key = UNIT_KEYS.filter(k => selected.has(k)).join('+');
  const outcome = t.bundle.combos[key] || t.bundle.empty;
  const count = selected.size;
  const tier = t.bundle.tiers[count];

  const selectedUnits = UNIT_KEYS.filter(k => selected.has(k));

  // preset match detection
  const presetMatch = (preset) => {
    if (preset.keys.length !== count) return false;
    return preset.keys.every(k => selected.has(k));
  };

  return (
    <section id="approach" style={bundleStyles.root}>
      <div style={bundleStyles.inner}>
        <div style={bundleStyles.head}>
          <div style={bundleStyles.eyebrow}>{t.bundle.eyebrow}</div>
          <h2 style={bundleStyles.h2}>
            {t.bundle.title}<br/>
            <em style={bundleStyles.em}>{t.bundle.titleEm}</em>
          </h2>
          <p style={bundleStyles.lede}>{t.bundle.lede}</p>
        </div>

        {/* TIER LADDER — explains the compounding logic upfront */}
        <div style={bundleStyles.ladder}>
          {t.bundle.tiers.map((tr, i) => {
            const active = i === count;
            const past = i < count;
            return (
              <div key={tr.key} style={{
                ...bundleStyles.ladderStep,
                opacity: active || past ? 1 : 0.4,
              }}>
                <div style={{
                  ...bundleStyles.ladderDot,
                  background: active ? 'var(--prodct-500)' : past ? 'var(--prodct-300)' : 'var(--border-strong)',
                  transform: active ? 'scale(1.25)' : 'scale(1)',
                }} />
                <div style={{
                  ...bundleStyles.ladderLabel,
                  color: active ? 'var(--fg-strong)' : 'var(--fg-muted)',
                  fontWeight: active ? 600 : 500,
                }}>
                  {tr.n}× · {tr.label}
                </div>
                {i < t.bundle.tiers.length - 1 && (
                  <div style={{
                    ...bundleStyles.ladderLine,
                    background: past ? 'var(--prodct-300)' : 'var(--border-strong)',
                  }} />
                )}
              </div>
            );
          })}
        </div>

        <div style={bundleStyles.panel}>
          <div style={bundleStyles.prompt}>
            <span style={bundleStyles.promptMono}>{t.bundle.prompt}</span>
            {count > 0 && (
              <button onClick={clearAll} style={bundleStyles.clearBtn}>
                {t.bundle.reset}
              </button>
            )}
          </div>

          <div style={bundleStyles.chips}>
            {UNIT_KEYS.map(k => {
              const u = t.unitData[k];
              const on = selected.has(k);
              const col = `var(--${k}-500)`;
              const bg = `var(--${k}-100)`;
              return (
                <button
                  key={k}
                  onClick={() => toggle(k)}
                  style={{
                    ...bundleStyles.chip,
                    background: on ? col : 'var(--bg-elevated)',
                    color: on ? '#fff' : 'var(--fg-strong)',
                    borderColor: on ? col : 'var(--border-strong)',
                  }}
                >
                  <span style={{
                    ...bundleStyles.chipTag,
                    fontFamily: 'var(--font-mono)',
                    color: on ? 'rgba(255,255,255,0.75)' : col,
                    background: on ? 'rgba(255,255,255,0.14)' : bg,
                  }}>{u.tag}</span>
                  <span style={bundleStyles.chipName}>{u.name}</span>
                  <span style={bundleStyles.chipCheck}>{on ? '●' : '○'}</span>
                </button>
              );
            })}
          </div>

          {/* PRESETS — curated combinations to show possibilities */}
          <div style={bundleStyles.presetsWrap}>
            <div style={bundleStyles.presetsLabel}>
              <span style={bundleStyles.presetsMono}>{t.bundle.presetsLabel}</span>
            </div>
            <div style={bundleStyles.presets}>
              {t.bundle.presets.map((p, i) => {
                const matched = presetMatch(p);
                return (
                  <button
                    key={i}
                    onClick={() => setFromKeys(p.keys)}
                    style={{
                      ...bundleStyles.preset,
                      borderColor: matched ? 'var(--prodct-500)' : 'var(--border)',
                      background: matched ? 'var(--prodct-50, rgba(217,119,87,0.08))' : 'transparent',
                    }}
                  >
                    <div style={bundleStyles.presetTop}>
                      <div style={bundleStyles.presetDots}>
                        {p.keys.map(k => (
                          <span key={k} style={{
                            ...bundleStyles.presetDot,
                            background: `var(--${k}-500)`,
                          }} />
                        ))}
                      </div>
                      <span style={bundleStyles.presetCount}>{p.keys.length}×</span>
                    </div>
                    <div style={bundleStyles.presetLabel}>{p.label}</div>
                    <div style={bundleStyles.presetWhy}>{p.why}</div>
                  </button>
                );
              })}
            </div>
          </div>

          <div style={bundleStyles.outcomeWrap}>
            <div style={bundleStyles.outcomeMeta}>
              <span style={bundleStyles.outcomeMonoKey}>
                {count === 0 ? '∅' : selectedUnits.map(k=>t.unitData[k].tag).join(' + ')}
              </span>
              <span style={bundleStyles.outcomeCount}>
                {count} / 4 · <span style={bundleStyles.outcomeTier}>{tier.label}</span>
              </span>
            </div>

            {/* Tier sublabel — narrates what this level of combination means */}
            <div style={bundleStyles.tierSub}>{tier.sub}</div>

            <p
              key={key + outcome /* force re-fade on change */}
              style={bundleStyles.outcomeText}
            >
              {outcome}
            </p>

            {/* Per-unit contributions — makes the compounding visible */}
            {count >= 1 && (
              <div style={bundleStyles.contribWrap}>
                <div style={bundleStyles.contribHeader}>{t.bundle.contribHeader}</div>
                <div style={bundleStyles.contribGrid}>
                  {selectedUnits.map(k => (
                    <div key={k} style={bundleStyles.contribCard}>
                      <div style={{
                        ...bundleStyles.contribTag,
                        color: `var(--${k}-500)`,
                        background: `var(--${k}-100)`,
                      }}>
                        {t.unitData[k].tag}
                      </div>
                      <div style={bundleStyles.contribText}>
                        {t.bundle.contrib[k]}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Visual amplifier bars — grow with count */}
            <div style={bundleStyles.amp}>
              {[1,2,3,4].map(i => (
                <div key={i} style={{
                  ...bundleStyles.ampBar,
                  background: i <= count ? `var(--${selectedUnits[i-1] || 'prodct'}-500)` : 'var(--border)',
                  height: i <= count ? 6 + i * 2 : 4,
                  opacity: i <= count ? 1 : 0.5,
                }} />
              ))}
              <div style={bundleStyles.ampLabel}>
                {count === 0 ? '—' : count === 4 ? 'max compound' : `${count}× leverage`}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const bundleStyles = {
  root: { padding: '0 40px 120px' },
  inner: { maxWidth: 1200, margin: '0 auto' },
  head: { display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 48, maxWidth: 720 },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-muted)' },
  h2: {
    fontFamily: 'var(--font-sans)', fontSize: 'clamp(40px, 5.5vw, 68px)',
    fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02,
    color: 'var(--fg-strong)', margin: 0,
  },
  em: { fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--prodct-500)' },
  lede: { fontSize: 17, lineHeight: 1.55, color: 'var(--fg-muted)', margin: '4px 0 0', maxWidth: 640 },

  ladder: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    margin: '0 0 28px', padding: '0 4px', gap: 0,
  },
  ladderStep: {
    display: 'flex', alignItems: 'center', flex: 1, position: 'relative',
    transition: 'opacity 220ms var(--ease-out)',
  },
  ladderDot: {
    width: 14, height: 14, borderRadius: '50%', flexShrink: 0,
    transition: 'all 220ms var(--ease-out)',
  },
  ladderLabel: {
    fontFamily: 'var(--font-mono)', fontSize: 11, marginLeft: 10,
    whiteSpace: 'nowrap', transition: 'all 220ms var(--ease-out)',
  },
  ladderLine: {
    flex: 1, height: 1, marginLeft: 12, marginRight: 4,
    transition: 'background 220ms var(--ease-out)',
  },

  panel: {
    background: 'var(--bg-elevated)', border: '1px solid var(--border)',
    borderRadius: 12, padding: 32, display: 'flex', flexDirection: 'column', gap: 24,
  },
  prompt: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 },
  promptMono: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-subtle)' },
  clearBtn: {
    fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)',
    background: 'transparent', border: '1px solid var(--border)', padding: '6px 10px',
    borderRadius: 4, cursor: 'pointer', letterSpacing: '0.02em',
  },
  chips: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 },
  chip: {
    display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px',
    border: '1px solid', borderRadius: 8, cursor: 'pointer',
    fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
    textAlign: 'left', transition: 'all 180ms var(--ease-out)',
  },
  chipTag: { fontSize: 11, padding: '2px 6px', borderRadius: 3 },
  chipName: { flex: 1 },
  chipCheck: { fontSize: 14, opacity: 0.9 },

  presetsWrap: {
    display: 'flex', flexDirection: 'column', gap: 10,
    borderTop: '1px solid var(--border)', paddingTop: 20,
  },
  presetsLabel: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
  presetsMono: { fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-subtle)', letterSpacing: '0.02em' },
  presets: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 },
  preset: {
    display: 'flex', flexDirection: 'column', gap: 6, padding: '12px 14px',
    border: '1px solid', borderRadius: 8, cursor: 'pointer',
    textAlign: 'left', transition: 'all 180ms var(--ease-out)',
    fontFamily: 'var(--font-sans)',
  },
  presetTop: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
  presetDots: { display: 'flex', gap: 4 },
  presetDot: { width: 8, height: 8, borderRadius: '50%' },
  presetCount: { fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-subtle)' },
  presetLabel: { fontSize: 14, fontWeight: 500, color: 'var(--fg-strong)', letterSpacing: '-0.01em' },
  presetWhy: { fontSize: 12, color: 'var(--fg-muted)', lineHeight: 1.45 },

  outcomeWrap: {
    borderTop: '1px solid var(--border)',
    paddingTop: 24, display: 'flex', flexDirection: 'column', gap: 14,
  },
  outcomeMeta: {
    display: 'flex', justifyContent: 'space-between',
    fontFamily: 'var(--font-mono)', fontSize: 12,
  },
  outcomeMonoKey: { color: 'var(--fg-strong)' },
  outcomeCount: { color: 'var(--fg-subtle)' },
  outcomeTier: { color: 'var(--prodct-500)', fontWeight: 600 },
  tierSub: {
    fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-muted)',
    letterSpacing: '0.01em', animation: 'fadeIn 280ms var(--ease-out)',
  },
  outcomeText: {
    fontFamily: 'var(--font-sans)', fontSize: 'clamp(22px, 2.4vw, 30px)',
    fontWeight: 400, letterSpacing: '-0.015em', lineHeight: 1.32,
    color: 'var(--fg-strong)', margin: 0, animation: 'fadeIn 280ms var(--ease-out)',
  },

  contribWrap: { display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 },
  contribHeader: {
    fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-subtle)',
    letterSpacing: '0.02em',
  },
  contribGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
    gap: 8,
  },
  contribCard: {
    display: 'flex', flexDirection: 'column', gap: 6,
    padding: '12px 14px', background: 'var(--bg)',
    border: '1px solid var(--border)', borderRadius: 6,
    animation: 'fadeIn 280ms var(--ease-out)',
  },
  contribTag: {
    fontFamily: 'var(--font-mono)', fontSize: 11,
    padding: '2px 6px', borderRadius: 3, alignSelf: 'flex-start',
  },
  contribText: { fontSize: 13, lineHeight: 1.5, color: 'var(--fg)' },

  amp: {
    display: 'flex', alignItems: 'flex-end', gap: 4, marginTop: 4,
    paddingTop: 12, borderTop: '1px dashed var(--border)',
  },
  ampBar: { width: 28, borderRadius: 2, transition: 'all 220ms var(--ease-out)' },
  ampLabel: {
    marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11,
    color: 'var(--fg-subtle)', alignSelf: 'center',
  },
};

// ============================================================
// COMPOUND FLOW — animated network visualization of compounding
// Shows 4 units as nodes. Edges light up + particles flow along them
// as the stage cycles: solo → paired → stacked → full.
// ============================================================

// --- Variant A: NETWORK (grid) ---
function FlowNetworkSVG({ activeSet, activeEdgeCount, hoverUnit, setHoverUnit, NODES, CORE, EDGES, isEdgeActive, edgeKey }) {
  return (
    <svg viewBox="0 0 600 420" style={flowStyles.svg} preserveAspectRatio="xMidYMid meet">
      <defs>
        {UNIT_KEYS.map(k => (
          <radialGradient key={k} id={`glow-${k}`} cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor={`var(--${k}-500)`} stopOpacity="0.45" />
            <stop offset="100%" stopColor={`var(--${k}-500)`} stopOpacity="0" />
          </radialGradient>
        ))}
      </defs>

      {EDGES.map(([a, b]) => {
        const na = NODES[a], nb = NODES[b];
        const active = isEdgeActive(a, b);
        const k = edgeKey(a, b);
        return (
          <g key={k}>
            <line
              x1={na.x} y1={na.y} x2={nb.x} y2={nb.y}
              stroke={active ? 'var(--prodct-500)' : 'var(--border-strong)'}
              strokeWidth={active ? 1.5 : 1}
              strokeDasharray={active ? '0' : '4 4'}
              opacity={active ? 0.65 : 0.4}
              style={{ transition: 'all 500ms var(--ease-out)' }}
            />
            {active && (
              <circle r="4" fill={`var(--${a}-500)`}>
                <animateMotion dur="2.6s" repeatCount="indefinite"
                  path={`M${na.x},${na.y} L${nb.x},${nb.y}`} />
                <animate attributeName="opacity" values="0;1;1;0"
                  keyTimes="0;0.1;0.9;1" dur="2.6s" repeatCount="indefinite" />
              </circle>
            )}
            {active && (
              <circle r="3" fill={`var(--${b}-500)`} opacity="0.7">
                <animateMotion dur="2.6s" begin="1.3s" repeatCount="indefinite"
                  path={`M${nb.x},${nb.y} L${na.x},${na.y}`} />
              </circle>
            )}
          </g>
        );
      })}

      <g>
        <circle cx={CORE.x} cy={CORE.y} r={18 + activeEdgeCount * 2}
          fill="var(--prodct-500)" opacity={0.12 + activeEdgeCount * 0.04}
          style={{ transition: 'all 600ms var(--ease-out)' }} />
        <circle cx={CORE.x} cy={CORE.y} r="10" fill="var(--prodct-500)" opacity="0.9" />
        <circle cx={CORE.x} cy={CORE.y} r="14" fill="none"
          stroke="var(--prodct-500)" strokeWidth="1" opacity="0.35">
          <animate attributeName="r" values="14;26;14" dur="2.4s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0.5;0;0.5" dur="2.4s" repeatCount="indefinite" />
        </circle>
        <text x={CORE.x} y={CORE.y + 4} textAnchor="middle"
          fontFamily="var(--font-mono)" fontSize="10" fill="#fff" opacity="0.95">
          {activeEdgeCount}×
        </text>
      </g>

      {UNIT_KEYS.map(k => {
        const n = NODES[k];
        const active = activeSet.has(k);
        return (
          <g key={k} onMouseEnter={() => setHoverUnit(k)} style={{ cursor: 'pointer' }}>
            <circle cx={n.x} cy={n.y} r="52" fill={`url(#glow-${k})`}
              opacity={active ? 1 : 0.25}
              style={{ transition: 'opacity 500ms var(--ease-out)' }} />
            <circle cx={n.x} cy={n.y} r={active ? 26 : 20}
              fill={active ? `var(--${k}-500)` : 'var(--bg-elevated)'}
              stroke={active ? `var(--${k}-500)` : 'var(--border-strong)'}
              strokeWidth={active ? 2 : 1}
              style={{ transition: 'all 400ms var(--ease-out)' }} />
            {active && (
              <circle cx={n.x} cy={n.y} r="26" fill="none"
                stroke={`var(--${k}-500)`} strokeWidth="1" opacity="0.5">
                <animate attributeName="r" values="26;42;26" dur="2.2s" repeatCount="indefinite" />
                <animate attributeName="opacity" values="0.6;0;0.6" dur="2.2s" repeatCount="indefinite" />
              </circle>
            )}
            <text x={n.x} y={n.y + 4} textAnchor="middle"
              fontFamily="var(--font-mono)" fontSize="11"
              fill={active ? '#fff' : 'var(--fg-muted)'}
              style={{ transition: 'fill 400ms var(--ease-out)', pointerEvents: 'none' }}>
              {n.tag}
            </text>
            <text x={n.x} y={n.y + (n.y < CORE.y ? -40 : 50)} textAnchor="middle"
              fontFamily="var(--font-sans)" fontSize="13" fontWeight="500"
              fill={active ? 'var(--fg-strong)' : 'var(--fg-muted)'}
              style={{ transition: 'all 400ms var(--ease-out)', pointerEvents: 'none' }}>
              {n.label}
            </text>
          </g>
        );
      })}
    </svg>
  );
}

// --- Variant B: STACK (layered foundation → surface) ---
// Four horizontal layers, bottom = Elements (foundation),
// Labs = products, CX = surface, Skills = team.
// Particles rise bottom → top; when a layer is active, it glows
// and emits more particles upward (compound = more streams).
function FlowStackSVG({ activeUnits, activeSet, activeEdgeCount, hoverUnit, setHoverUnit, t }) {
  // Layer order: bottom to top (foundation → surface)
  const LAYERS = [
    { k: 'elements', y: 330, label: 'Foundation' },
    { k: 'labs',     y: 250, label: 'Products' },
    { k: 'cx',       y: 170, label: 'Surface' },
    { k: 'skills',   y: 90,  label: 'Team' },
  ];
  // Column positions — particles rise along these X lanes.
  const LANES = [140, 220, 300, 380, 460];

  return (
    <svg viewBox="0 0 600 420" style={flowStyles.svg} preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="stack-fade" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--bg)" stopOpacity="1" />
          <stop offset="20%" stopColor="var(--bg)" stopOpacity="0" />
        </linearGradient>
        {UNIT_KEYS.map(k => (
          <linearGradient key={k} id={`layer-${k}`} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor={`var(--${k}-500)`} stopOpacity="0" />
            <stop offset="50%" stopColor={`var(--${k}-500)`} stopOpacity="0.18" />
            <stop offset="100%" stopColor={`var(--${k}-500)`} stopOpacity="0" />
          </linearGradient>
        ))}
      </defs>

      {/* Horizontal layer bands */}
      {LAYERS.map((L, i) => {
        const active = activeSet.has(L.k);
        return (
          <g key={L.k}>
            {/* band */}
            <rect x="40" y={L.y - 26} width="520" height="52" rx="6"
              fill={active ? `url(#layer-${L.k})` : 'transparent'}
              stroke={active ? `var(--${L.k}-500)` : 'var(--border)'}
              strokeWidth="1"
              strokeDasharray={active ? '0' : '3 4'}
              opacity={active ? 1 : 0.5}
              style={{ transition: 'all 500ms var(--ease-out)' }} />
            {/* layer label (left) */}
            <text x="52" y={L.y - 8}
              fontFamily="var(--font-mono)" fontSize="10"
              fill={active ? `var(--${L.k}-500)` : 'var(--fg-subtle)'}
              style={{ transition: 'fill 500ms var(--ease-out)' }}>
              0{4 - i} · {L.label}
            </text>
            {/* tag (right) */}
            <text x="548" y={L.y + 5} textAnchor="end"
              fontFamily="var(--font-mono)" fontSize="12"
              fontWeight={active ? 600 : 400}
              fill={active ? 'var(--fg-strong)' : 'var(--fg-muted)'}
              style={{ transition: 'all 500ms var(--ease-out)' }}>
              {t.unitData[L.k].tag} {t.unitData[L.k].name}
            </text>
            {/* nodes at each lane on active layer */}
            {active && LANES.map((x, li) => (
              <g key={li}>
                <circle cx={x} cy={L.y} r="5"
                  fill={`var(--${L.k}-500)`} opacity="0.95" />
                <circle cx={x} cy={L.y} r="5" fill="none"
                  stroke={`var(--${L.k}-500)`} strokeWidth="1" opacity="0.5">
                  <animate attributeName="r" values="5;12;5"
                    dur={`${1.6 + li * 0.15}s`} repeatCount="indefinite"
                    begin={`${li * 0.25}s`} />
                  <animate attributeName="opacity" values="0.7;0;0.7"
                    dur={`${1.6 + li * 0.15}s`} repeatCount="indefinite"
                    begin={`${li * 0.25}s`} />
                </circle>
              </g>
            ))}
          </g>
        );
      })}

      {/* Rising particles — one stream per lane, color matches topmost active layer it passes through */}
      {LANES.map((x, li) => {
        // find which layers this lane "crosses" — simple: all active layers
        if (activeUnits.length === 0) return null;
        // per-lane particle; stagger timing
        const delay = li * 0.35;
        // color cycles through active units
        const col = activeUnits[li % activeUnits.length];
        return (
          <g key={`p-${li}`}>
            <circle r="3.5" fill={`var(--${col}-500)`} opacity="0.9">
              <animateMotion dur="4s" begin={`${delay}s`} repeatCount="indefinite"
                path={`M${x},400 L${x},40`} />
              <animate attributeName="opacity"
                values="0;0.95;0.95;0" keyTimes="0;0.1;0.85;1"
                dur="4s" begin={`${delay}s`} repeatCount="indefinite" />
            </circle>
            {/* trail */}
            <circle r="2" fill={`var(--${col}-500)`} opacity="0.5">
              <animateMotion dur="4s" begin={`${delay + 0.2}s`} repeatCount="indefinite"
                path={`M${x},400 L${x},40`} />
              <animate attributeName="opacity"
                values="0;0.5;0" keyTimes="0;0.5;1"
                dur="4s" begin={`${delay + 0.2}s`} repeatCount="indefinite" />
            </circle>
          </g>
        );
      })}

      {/* Top-side "output" meter — grows with active count */}
      <g>
        <line x1="40" y1="60" x2="560" y2="60"
          stroke="var(--border)" strokeWidth="1" strokeDasharray="2 3" />
        <rect x="40" y="44"
          width={activeUnits.length === 0 ? 0 : 40 + activeEdgeCount * 80}
          height="8" rx="2"
          fill="var(--prodct-500)" opacity="0.75"
          style={{ transition: 'width 600ms var(--ease-out)' }} />
        <text x="560" y="52" textAnchor="end"
          fontFamily="var(--font-mono)" fontSize="10" fill="var(--fg-subtle)">
          value output · {activeUnits.length === 0 ? '0' : activeEdgeCount === 0 ? '1×' : `${activeEdgeCount + 1}×`}
        </text>
      </g>

      {/* bottom fade to suggest infinite flow source */}
      <rect x="0" y="380" width="600" height="40" fill="url(#stack-fade)" opacity="0.6"
        transform="scale(1,-1) translate(0,-820)" />
    </svg>
  );
}

// --- Variant C: PIPELINE (minimal horizontal) ---
// Simplest variant: 4 unit badges in a row. Active ones glow; a value
// particle travels left-to-right through only the active units,
// visibly "compounding" as it passes through each.
function FlowPipelineSVG({ activeUnits, activeSet, activeEdgeCount, setHoverUnit, t }) {
  // Horizontal arrangement
  const SLOTS = [
    { k: 'elements', x: 100 },
    { k: 'labs',     x: 240 },
    { k: 'cx',       x: 380 },
    { k: 'skills',   x: 520 },
  ];
  const Y = 200;
  const R = 30;

  // Only active slots, in order — this is the path the particle travels
  const activeSlots = SLOTS.filter(s => activeSet.has(s.k));
  const pathPoints = activeSlots.map(s => `${s.x},${Y}`).join(' L');
  const pathD = activeSlots.length >= 1 ? `M${pathPoints}` : null;

  return (
    <svg viewBox="0 0 620 400" style={flowStyles.svg} preserveAspectRatio="xMidYMid meet">
      <defs>
        {UNIT_KEYS.map(k => (
          <radialGradient key={k} id={`pipe-glow-${k}`} cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor={`var(--${k}-500)`} stopOpacity="0.4" />
            <stop offset="100%" stopColor={`var(--${k}-500)`} stopOpacity="0" />
          </radialGradient>
        ))}
      </defs>

      {/* baseline dashed line between all slots */}
      <line x1={SLOTS[0].x} y1={Y} x2={SLOTS[SLOTS.length-1].x} y2={Y}
        stroke="var(--border-strong)" strokeWidth="1" strokeDasharray="4 5" opacity="0.6" />

      {/* solid line connecting active slots only */}
      {activeSlots.length >= 2 && (
        <path d={pathD} fill="none"
          stroke="var(--prodct-500)" strokeWidth="2" opacity="0.7" />
      )}

      {/* slot circles */}
      {SLOTS.map((s, i) => {
        const active = activeSet.has(s.k);
        return (
          <g key={s.k}
            onMouseEnter={() => setHoverUnit(s.k)}
            style={{ cursor: 'pointer' }}>
            {/* glow halo */}
            <circle cx={s.x} cy={Y} r={R + 30} fill={`url(#pipe-glow-${s.k})`}
              opacity={active ? 1 : 0}
              style={{ transition: 'opacity 500ms var(--ease-out)' }} />
            {/* base circle */}
            <circle cx={s.x} cy={Y} r={R}
              fill={active ? `var(--${s.k}-500)` : 'var(--bg-elevated)'}
              stroke={active ? `var(--${s.k}-500)` : 'var(--border-strong)'}
              strokeWidth="1.5"
              style={{ transition: 'all 400ms var(--ease-out)' }} />
            {/* pulse ring when active */}
            {active && (
              <circle cx={s.x} cy={Y} r={R} fill="none"
                stroke={`var(--${s.k}-500)`} strokeWidth="1" opacity="0.5">
                <animate attributeName="r" values={`${R};${R+18};${R}`}
                  dur="2.4s" repeatCount="indefinite"
                  begin={`${i * 0.3}s`} />
                <animate attributeName="opacity" values="0.6;0;0.6"
                  dur="2.4s" repeatCount="indefinite"
                  begin={`${i * 0.3}s`} />
              </circle>
            )}
            {/* tag inside */}
            <text x={s.x} y={Y + 5} textAnchor="middle"
              fontFamily="var(--font-mono)" fontSize="12"
              fill={active ? '#fff' : 'var(--fg-muted)'}
              style={{ transition: 'fill 400ms var(--ease-out)', pointerEvents: 'none' }}>
              {t.unitData[s.k].tag}
            </text>
            {/* name below */}
            <text x={s.x} y={Y + R + 28} textAnchor="middle"
              fontFamily="var(--font-sans)" fontSize="13" fontWeight="500"
              fill={active ? 'var(--fg-strong)' : 'var(--fg-muted)'}
              style={{ transition: 'all 400ms var(--ease-out)', pointerEvents: 'none' }}>
              {t.unitData[s.k].name}
            </text>
            {/* step number above */}
            <text x={s.x} y={Y - R - 16} textAnchor="middle"
              fontFamily="var(--font-mono)" fontSize="10"
              fill={active ? `var(--${s.k}-500)` : 'var(--fg-subtle)'}
              style={{ transition: 'fill 400ms var(--ease-out)', pointerEvents: 'none' }}>
              {active ? `${activeSlots.findIndex(a => a.k === s.k) + 1} / ${activeSlots.length}` : '—'}
            </text>
          </g>
        );
      })}

      {/* Traveling value particle — picks up "mass" as it passes each active slot */}
      {activeSlots.length >= 2 && (
        <>
          <circle r="6" fill="var(--prodct-500)" opacity="0.95">
            <animateMotion
              dur={`${1.5 + activeSlots.length * 0.5}s`}
              repeatCount="indefinite"
              path={pathD}
              keyPoints={activeSlots.map((_, i) => (i / (activeSlots.length - 1)).toFixed(3)).join(';')}
              keyTimes={activeSlots.map((_, i) => (i / (activeSlots.length - 1)).toFixed(3)).join(';')}
              calcMode="linear"
            />
          </circle>
          {/* trail */}
          <circle r="3" fill="var(--prodct-500)" opacity="0.5">
            <animateMotion
              dur={`${1.5 + activeSlots.length * 0.5}s`}
              begin="0.15s"
              repeatCount="indefinite"
              path={pathD}
            />
          </circle>
        </>
      )}
      {activeSlots.length === 1 && (
        <circle cx={activeSlots[0].x} cy={Y} r="4" fill="var(--prodct-500)" opacity="0.9">
          <animate attributeName="r" values="4;8;4" dur="1.8s" repeatCount="indefinite" />
        </circle>
      )}

      {/* Leverage meter bottom */}
      <g>
        <text x="310" y="360" textAnchor="middle"
          fontFamily="var(--font-mono)" fontSize="11" fill="var(--fg-subtle)"
          letterSpacing="0.04em">
          {activeUnits.length === 0
            ? 'PICK A UNIT'
            : activeUnits.length === 1
              ? 'SINGLE OUTCOME · 1× VALUE'
              : `${activeUnits.length} UNITS CONNECTED · ${activeEdgeCount + 1}× COMPOUND`}
        </text>
      </g>
    </svg>
  );
}

function CompoundFlow({ t, variant = 'network' }) {
  const STAGES = t.bundle.flow.stages;
  const [stageIdx, setStageIdx] = useStateB(0);
  const [playing, setPlaying] = useStateB(true);
  const [hoverUnit, setHoverUnit] = useStateB(null);

  // Which units are "lit" at each stage. Rotates through a sensible sequence
  // so users see different combinations, ending at full.
  const STAGE_SETS = [
    ['cx'],                                 // solo
    ['cx', 'elements'],                     // paired
    ['cx', 'elements', 'labs'],             // stacked
    ['cx', 'elements', 'labs', 'skills'],   // full
  ];
  const activeUnits = STAGE_SETS[stageIdx];
  const activeSet = new Set(activeUnits);

  useEffectB(() => {
    if (!playing) return;
    const id = setInterval(() => {
      setStageIdx(prev => (prev + 1) % STAGES.length);
    }, 3600);
    return () => clearInterval(id);
  }, [playing, STAGES.length]);

  // Node positions (viewBox 600x420). 4 corners around a central core.
  const NODES = {
    cx:       { x: 140, y: 110, label: 'CX',       tag: '[CX]' },
    labs:     { x: 460, y: 110, label: 'Labs',     tag: '[Labs]' },
    elements: { x: 140, y: 310, label: 'Elements', tag: '[Elements]' },
    skills:   { x: 460, y: 310, label: 'Skills',   tag: '/skills' },
  };
  const CORE = { x: 300, y: 210 };

  // All 6 possible edges between 4 units
  const EDGES = [
    ['cx', 'labs'],
    ['cx', 'elements'],
    ['cx', 'skills'],
    ['labs', 'elements'],
    ['labs', 'skills'],
    ['elements', 'skills'],
  ];

  const edgeKey = (a, b) => [a, b].sort().join('-');
  const isEdgeActive = (a, b) => activeSet.has(a) && activeSet.has(b);
  const activeEdgeCount = EDGES.filter(([a, b]) => isEdgeActive(a, b)).length;

  const stage = STAGES[stageIdx];

  return (
    <section style={flowStyles.root}>
      <div style={flowStyles.inner}>
        <div style={flowStyles.head}>
          <div style={flowStyles.eyebrow}>{t.bundle.flow.eyebrow}</div>
          <h3 style={flowStyles.h3}>{t.bundle.flow.title}</h3>
          <p style={flowStyles.lede}>{t.bundle.flow.lede}</p>
        </div>

        <div style={flowStyles.card}>
          {/* stage ladder / controls */}
          <div style={flowStyles.controls}>
            <div style={flowStyles.stageRow}>
              {STAGES.map((s, i) => {
                const active = i === stageIdx;
                const past = i < stageIdx;
                return (
                  <button
                    key={s.key}
                    onClick={() => { setStageIdx(i); setPlaying(false); }}
                    style={{
                      ...flowStyles.stageBtn,
                      background: active ? 'var(--prodct-500)' : 'transparent',
                      color: active ? '#fff' : past ? 'var(--fg-strong)' : 'var(--fg-muted)',
                      borderColor: active ? 'var(--prodct-500)' : 'var(--border-strong)',
                    }}
                  >
                    <span style={flowStyles.stageNum}>0{i + 1}</span>
                    <span style={flowStyles.stageLabel}>{s.label}</span>
                  </button>
                );
              })}
            </div>
            <button
              onClick={() => setPlaying(p => !p)}
              style={{
                ...flowStyles.playBtn,
                color: playing ? 'var(--prodct-500)' : 'var(--fg-muted)',
                borderColor: playing ? 'var(--prodct-500)' : 'var(--border-strong)',
              }}
            >
              <span style={flowStyles.playDot(playing)} />
              {playing ? t.bundle.flow.playLabel : t.bundle.flow.pauseLabel}
            </button>
          </div>

          {/* SVG network */}
          <div
            style={flowStyles.svgWrap}
            onMouseLeave={() => setHoverUnit(null)}
          >
            {variant === 'stack' ? (
              <FlowStackSVG
                activeUnits={activeUnits}
                activeSet={activeSet}
                activeEdgeCount={activeEdgeCount}
                hoverUnit={hoverUnit}
                setHoverUnit={setHoverUnit}
                t={t}
              />
            ) : variant === 'pipeline' ? (
              <FlowPipelineSVG
                activeUnits={activeUnits}
                activeSet={activeSet}
                activeEdgeCount={activeEdgeCount}
                setHoverUnit={setHoverUnit}
                t={t}
              />
            ) : (
              <FlowNetworkSVG
                activeSet={activeSet}
                activeEdgeCount={activeEdgeCount}
                hoverUnit={hoverUnit}
                setHoverUnit={setHoverUnit}
                NODES={NODES}
                CORE={CORE}
                EDGES={EDGES}
                isEdgeActive={isEdgeActive}
                edgeKey={edgeKey}
              />
            )}
          </div>

          {/* narration */}
          <div style={flowStyles.narr}>
            <div style={flowStyles.narrMeta}>
              <span style={flowStyles.narrKey}>
                {activeUnits.map(k => NODES[k].tag).join(' + ')}
              </span>
              <span style={flowStyles.narrEdges}>
                {activeEdgeCount} {activeEdgeCount === 1 ? 'connection' : 'connections'}
              </span>
            </div>
            <p key={stage.key} style={flowStyles.narrText}>{stage.narr}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

const flowStyles = {
  root: { padding: '0 40px 120px' },
  inner: { maxWidth: 1200, margin: '0 auto' },
  head: { display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 720, marginBottom: 40 },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-muted)' },
  h3: {
    fontFamily: 'var(--font-sans)', fontSize: 'clamp(28px, 3.4vw, 42px)',
    fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1,
    color: 'var(--fg-strong)', margin: 0,
  },
  lede: { fontSize: 16, lineHeight: 1.55, color: 'var(--fg-muted)', margin: 0, maxWidth: 620 },

  card: {
    background: 'var(--bg-elevated)', border: '1px solid var(--border)',
    borderRadius: 12, padding: 24, display: 'flex', flexDirection: 'column', gap: 20,
  },
  controls: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    gap: 16, flexWrap: 'wrap',
  },
  stageRow: { display: 'flex', gap: 8, flexWrap: 'wrap' },
  stageBtn: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '8px 12px', border: '1px solid', borderRadius: 6, cursor: 'pointer',
    fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500,
    transition: 'all 200ms var(--ease-out)',
  },
  stageNum: { fontFamily: 'var(--font-mono)', fontSize: 10, opacity: 0.7 },
  stageLabel: {},
  playBtn: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '8px 12px', border: '1px solid', borderRadius: 6, cursor: 'pointer',
    background: 'transparent', fontFamily: 'var(--font-mono)', fontSize: 11,
    letterSpacing: '0.02em', transition: 'all 200ms var(--ease-out)',
  },
  playDot: (on) => ({
    width: 8, height: 8, borderRadius: '50%',
    background: on ? 'var(--prodct-500)' : 'var(--fg-subtle)',
    animation: on ? 'fadeIn 1.2s ease-in-out infinite alternate' : 'none',
  }),

  svgWrap: {
    width: '100%', aspectRatio: '600 / 420',
    background: 'var(--bg)', borderRadius: 8, overflow: 'hidden',
    border: '1px solid var(--border)',
  },
  svg: { width: '100%', height: '100%', display: 'block' },

  narr: {
    borderTop: '1px solid var(--border)',
    paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 8,
  },
  narrMeta: {
    display: 'flex', justifyContent: 'space-between',
    fontFamily: 'var(--font-mono)', fontSize: 12,
  },
  narrKey: { color: 'var(--fg-strong)' },
  narrEdges: { color: 'var(--prodct-500)' },
  narrText: {
    fontFamily: 'var(--font-sans)', fontSize: 'clamp(16px, 1.6vw, 19px)',
    lineHeight: 1.45, color: 'var(--fg)', margin: 0,
    animation: 'fadeIn 400ms var(--ease-out)',
  },
};

// ============================================================
// PRINCIPLES — dark section, 3 rows
// ============================================================
function Principles({ t }) {
  return (
    <section id="principles" style={prinStyles.root}>
      <div style={prinStyles.inner}>
        <div style={prinStyles.head}>
          <div style={prinStyles.eyebrow}>{t.principles.eyebrow}</div>
          <h2 style={prinStyles.h2}>
            {t.principles.title}<br/>
            <em style={prinStyles.em}>{t.principles.titleEm}</em>
          </h2>
        </div>
        <div style={prinStyles.list}>
          {t.principles.items.map(p => (
            <div key={p.n} style={prinStyles.row}>
              <div style={prinStyles.num}>{p.n}</div>
              <div style={prinStyles.body}>
                <h3 style={prinStyles.t}>{p.t}</h3>
                <p style={prinStyles.d}>{p.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const prinStyles = {
  root: { background: 'var(--prodct-900)', color: 'var(--bone-50)', padding: '110px 40px' },
  inner: { maxWidth: 1080, margin: '0 auto' },
  head: { display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 64 },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'rgba(250,248,244,0.55)' },
  h2: {
    fontFamily: 'var(--font-sans)', fontSize: 'clamp(40px, 5.5vw, 68px)',
    fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02, color: '#fff', margin: 0,
  },
  em: { fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--prodct-300)' },
  list: { display: 'flex', flexDirection: 'column' },
  row: {
    display: 'grid', gridTemplateColumns: '80px 1fr',
    gap: 24, padding: '36px 0', borderTop: '1px solid rgba(255,255,255,0.12)',
  },
  num: { fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 34, color: 'var(--prodct-300)', fontWeight: 400 },
  body: { display: 'flex', flexDirection: 'column', gap: 10, maxWidth: 680 },
  t: { fontFamily: 'var(--font-sans)', fontSize: 28, fontWeight: 500, color: '#fff', letterSpacing: '-0.02em', margin: 0, lineHeight: 1.15 },
  d: { fontSize: 16, lineHeight: 1.6, color: 'rgba(250,248,244,0.72)', margin: 0 },
};

// ============================================================
// CLIENT LOGOS — monogram marks (no images, no fake logos)
// ============================================================
const MONOGRAMS = [
  { m: 'SI', n: 'Siemens' },
  { m: 'AZ', n: 'Allianz' },
  { m: 'DHL', n: 'DHL' },
  { m: 'RG', n: 'REWE Group' },
  { m: 'BO', n: 'Bosch' },
  { m: 'BMW', n: 'BMW' },
  { m: 'DG', n: 'Douglas' },
  { m: 'DB', n: 'Deutsche Bahn' },
  { m: 'E·', n: 'E.ON' },
  { m: 'LH', n: 'Lufthansa' },
  { m: 'HK', n: 'Henkel' },
  { m: 'FP', n: 'Flaschenpost' },
];

function Clients({ t }) {
  // duplicate list so the marquee loops seamlessly
  const loop = [...MONOGRAMS, ...MONOGRAMS];
  return (
    <section style={clStyles.root}>
      <div style={clStyles.inner}>
        <div style={clStyles.meta}>
          <div style={clStyles.eyebrow}>{t.clients.eyebrow}</div>
          <p style={clStyles.lede}>{t.clients.lede}</p>
        </div>
      </div>
      <div style={clStyles.marqueeWrap}>
        <div style={clStyles.fadeL} />
        <div style={clStyles.fadeR} />
        <div style={clStyles.track} className="logoTrack">
          {loop.map((c, i) => (
            <div key={i} style={clStyles.cell} title={c.n}>
              <span style={clStyles.mono}>{c.m}</span>
              <span style={clStyles.name}>{c.n}</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @keyframes logoMarquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .logoTrack { animation: logoMarquee 48s linear infinite; }
        .logoTrack:hover { animation-play-state: paused; }
      `}</style>
    </section>
  );
}

const clStyles = {
  root: { padding: '0 0 120px' },
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 40px' },
  meta: { display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 520, marginBottom: 32 },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-muted)' },
  lede: { fontSize: 15, lineHeight: 1.55, color: 'var(--fg-muted)', margin: 0 },
  marqueeWrap: {
    position: 'relative', overflow: 'hidden',
    borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
  },
  fadeL: {
    position: 'absolute', left: 0, top: 0, bottom: 0, width: 80, zIndex: 2,
    background: 'linear-gradient(to right, var(--bg), transparent)', pointerEvents: 'none',
  },
  fadeR: {
    position: 'absolute', right: 0, top: 0, bottom: 0, width: 80, zIndex: 2,
    background: 'linear-gradient(to left, var(--bg), transparent)', pointerEvents: 'none',
  },
  track: {
    display: 'flex', width: 'max-content',
    willChange: 'transform',
  },
  cell: {
    flex: '0 0 auto', width: 220,
    padding: '28px 28px', display: 'flex', flexDirection: 'column', gap: 6,
    borderRight: '1px solid var(--border)',
    minHeight: 120, justifyContent: 'center', alignItems: 'flex-start',
  },
  mono: {
    fontFamily: 'var(--font-sans)', fontSize: 28, fontWeight: 600,
    letterSpacing: '-0.04em', color: 'var(--fg-strong)', lineHeight: 1,
  },
  name: { fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-subtle)' },
};

// ============================================================
// CASE STUDIES — 2 side-by-side, anonymous but specific
// ============================================================
const CASES = {
  en: [
    {
      unit: 'labs', tag: '[Labs]',
      industry: 'Industrial components manufacturer',
      title: 'From committee paper to live product in 9 weeks.',
      body: 'A configurator replacing a 14-step sales workflow. Concept, UX, React Native app, and managed GCP hosting — one senior team, one business case, one release.',
      metrics: [
        { n: '9 wk', l: 'concept → launch' },
        { n: '−62%', l: 'quote turnaround time' },
        { n: '3', l: 'people, end-to-end' },
      ],
    },
    {
      unit: 'cx', tag: '[CX]',
      industry: 'DACH retailer, 900 stores',
      title: 'Replatformed commerce, rebuilt personalization.',
      body: 'SAP Commerce → Commercetools migration paired with Dynamic Yield personalization and a new Braze lifecycle. Zero-downtime cutover across 11 markets.',
      metrics: [
        { n: '+24%', l: 'conversion on PDP' },
        { n: '11', l: 'markets, one cutover' },
        { n: '0', l: 'hours of downtime' },
      ],
    },
  ],
  de: [
    {
      unit: 'labs', tag: '[Labs]',
      industry: 'Hersteller industrieller Komponenten',
      title: 'Vom Konzeptpapier zum Live-Produkt in 9 Wochen.',
      body: 'Ein Konfigurator, der einen 14-stufigen Vertriebsprozess ersetzt. Konzept, UX, React-Native-App und Managed-Hosting auf GCP — ein Senior-Team, ein Business Case, ein Release.',
      metrics: [
        { n: '9 W.', l: 'Konzept → Launch' },
        { n: '−62 %', l: 'Angebots-Durchlaufzeit' },
        { n: '3', l: 'Menschen, end-to-end' },
      ],
    },
    {
      unit: 'cx', tag: '[CX]',
      industry: 'DACH-Händler, 900 Filialen',
      title: 'Commerce replattformiert, Personalisierung neu gebaut.',
      body: 'SAP Commerce → Commercetools-Migration, kombiniert mit Dynamic-Yield-Personalisierung und einem neuen Braze-Lifecycle. Zero-Downtime-Cutover über 11 Märkte.',
      metrics: [
        { n: '+24 %', l: 'Conversion auf der PDP' },
        { n: '11', l: 'Märkte, ein Cutover' },
        { n: '0', l: 'Stunden Downtime' },
      ],
    },
  ],
};

function Cases({ t, lang }) {
  const items = CASES[lang] || CASES.en;
  const eyebrow = lang === 'de' ? '// Ausgewählte Arbeiten' : '// Selected work';
  const title = lang === 'de' ? 'Zwei Engagements,' : 'Two engagements,';
  const titleEm = lang === 'de' ? 'zwei Ergebnisse.' : 'two outcomes.';
  const readMore = lang === 'de' ? 'Fallstudie lesen' : 'Read the case';
  return (
    <section style={caseStyles.root}>
      <div style={caseStyles.inner}>
        <div style={caseStyles.head}>
          <div style={caseStyles.eyebrow}>{eyebrow}</div>
          <h2 style={caseStyles.h2}>
            {title}<br/><em style={caseStyles.em}>{titleEm}</em>
          </h2>
        </div>
        <div style={caseStyles.grid}>
          {items.map((c, i) => {
            const col = `var(--${c.unit}-500)`;
            const bg = `var(--${c.unit}-100)`;
            return (
              <article key={i} style={{ ...caseStyles.card, borderTopColor: col, borderTopWidth: 3, borderTopStyle: 'solid' }}>
                <div style={caseStyles.cardHead}>
                  <span className={`u-tag u-tag--${c.unit}`} style={{ fontSize: 12, padding: '3px 7px' }}>{c.tag}</span>
                  <span style={caseStyles.industry}>{c.industry}</span>
                </div>
                <h3 style={caseStyles.title}>{c.title}</h3>
                <p style={caseStyles.body}>{c.body}</p>
                <div style={caseStyles.metrics}>
                  {c.metrics.map((m, j) => (
                    <div key={j} style={caseStyles.metric}>
                      <div style={{ ...caseStyles.metricN, color: col }}>{m.n}</div>
                      <div style={caseStyles.metricL}>{m.l}</div>
                    </div>
                  ))}
                </div>
                <a style={{ ...caseStyles.link, color: col, background: bg }}>{readMore}  →</a>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

const caseStyles = {
  root: { padding: '0 40px 120px' },
  inner: { maxWidth: 1200, margin: '0 auto' },
  head: { display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 48, maxWidth: 680 },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-muted)' },
  h2: {
    fontFamily: 'var(--font-sans)', fontSize: 'clamp(40px, 5.5vw, 68px)',
    fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02,
    color: 'var(--fg-strong)', margin: 0,
  },
  em: { fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--prodct-500)' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 },
  card: {
    background: 'var(--bg-elevated)', border: '1px solid var(--border)',
    borderRadius: 10, padding: '28px 28px 28px', display: 'flex', flexDirection: 'column', gap: 14,
  },
  cardHead: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  industry: { fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-subtle)' },
  title: {
    fontFamily: 'var(--font-sans)', fontSize: 26, fontWeight: 500,
    letterSpacing: '-0.02em', lineHeight: 1.2, color: 'var(--fg-strong)', margin: '4px 0 0',
  },
  body: { fontSize: 15, lineHeight: 1.6, color: 'var(--fg-muted)', margin: 0 },
  metrics: {
    display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
    borderTop: '1px solid var(--border)', paddingTop: 18, marginTop: 6, gap: 12,
  },
  metric: { display: 'flex', flexDirection: 'column', gap: 4 },
  metricN: { fontFamily: 'var(--font-sans)', fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1 },
  metricL: { fontSize: 12, color: 'var(--fg-muted)', lineHeight: 1.35 },
  link: {
    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
    padding: '8px 14px', borderRadius: 6, textDecoration: 'none',
    marginTop: 4, alignSelf: 'flex-start', cursor: 'pointer',
  },
};

Object.assign(window, { BundleExplorer, CompoundFlow, Principles, Clients, Cases });