// slides-middle.jsx — Slides 8 through 14 (disadvantages, asymmetry, goal, YAML, roles, use cases OCO + Red Team)

// ─── SLIDE 08 · DISADVANTAGES TABLE ───────────────────────────────
function Slide09_Disadvantages() {
  const rows = [
    { category: "Cloud-based", severity: "cost", dealbreaker: true, items: ["Expensive per-seat billing", "No access to underlying infrastructure", "Telemetry exposure — who sees your traffic?"] },
    { category: "Rigid", severity: "fixed", items: ["Fixed domain names", "Fixed IPs", "Fixed user accounts, vulnerabilities, configurations"] },
    { category: "Single-user", severity: "collab", items: ["No easy way to share with teammates", "Single EDR/logging solution — if any", "No concept of OPSEC"] },
    { category: "Hard to extend", severity: "ext", dealbreaker: true, items: ["Cannot install arbitrary software", "Cannot integrate with customer tooling", "No automation hooks"] },
  ];
  return (
    <Slide section="THE MARKET">
      <Content>
        <NumberedEyebrow>GAP ANALYSIS</NumberedEyebrow>
        <Title style={{marginTop: 16}}>Why other tools don't fit</Title>
        <div style={{fontSize: TS.body, color: DK_FG_MUTED, marginTop: 12, maxWidth: 1100}}>
          Commercial and open source alike trade away something operators need.
        </div>

        <div style={{flex:1, marginTop: 40, display:"grid", gridTemplateColumns:"1fr 1fr", gap: 24}}>
          {rows.map((r, i) => (
            <div key={i} style={{
              position:"relative", border: `1px solid ${r.dealbreaker ? CRIMSON : DK_BORDER}`, padding: 0,
              background: r.dealbreaker ? "rgba(143,29,52,0.06)" : "rgba(25,28,34,0.5)",
              display:"flex", flexDirection:"column",
              boxShadow: r.dealbreaker ? `0 0 30px rgba(143,29,52,0.15)` : "none",
            }}>
              <Brackets size={12} color={r.dealbreaker ? CRIMSON : "rgba(197,174,79,0.5)"} inset={-1}/>
              <div style={{
                display:"flex", alignItems:"center", gap: 18,
                padding: "20px 28px",
                borderBottom: `1px solid ${r.dealbreaker ? "rgba(143,29,52,0.4)" : DK_BORDER}`,
                background: "rgba(143,29,52,0.08)",
              }}>
                <div style={{
                  fontSize: 13, color: CRIMSON, fontWeight: 700, letterSpacing:"0.3em",
                  border: `1px solid ${CRIMSON}`, padding: "4px 10px",
                }}>
                  ISSUE 0{i+1}
                </div>
                <div style={{fontSize: 32, fontWeight: 700, color: DK_FG}}>{r.category}</div>

              </div>
              <div style={{padding: "22px 28px", display:"flex", flexDirection:"column", gap: 12}}>
                {r.items.map((it, j)=>(
                  <div key={j} style={{display:"flex", gap: 14, fontSize: 20, color: DK_FG, lineHeight: 1.4}}>
                    <span style={{color: CRIMSON, fontWeight: 700}}>×</span>
                    <span>{it}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 09 · RECENT ASYMMETRY (chart) ───────────────────────────
function Slide10_Asymmetry() {
  return (
    <Slide section="THE OPPORTUNITY">
      <TechGrid spacing={40} color="rgba(197,174,79,0.05)" fade={false}/>
      <Content>
        <div style={{display:"flex", alignItems:"baseline", justifyContent:"space-between"}}>
          <div>
            <NumberedEyebrow>MACRO TREND</NumberedEyebrow>
            <Title style={{marginTop: 16}}>Hardware overtook what software needs</Title>
            <div style={{fontSize: TS.body, color: DK_FG_MUTED, marginTop: 20, maxWidth: 1100}}>
              For the first time, the average commodity machine can run a moderately complex enterprise network. The golden age of hypervisors is <span style={{color: GOLD}}>now</span>.
            </div>
          </div>
        </div>

        {/* Chart */}
        <div style={{flex:1, marginTop: 40, position:"relative"}}>
          <svg viewBox="0 0 1680 540" style={{width:"100%", height:"100%", overflow:"visible"}}>
            <defs>
              <linearGradient id="g_hw" x1="0" y1="1" x2="0" y2="0">
                <stop offset="0%" stopColor="rgba(197,174,79,0.0)"/>
                <stop offset="100%" stopColor="rgba(197,174,79,0.35)"/>
              </linearGradient>
              <linearGradient id="g_sw" x1="0" y1="1" x2="0" y2="0">
                <stop offset="0%" stopColor="rgba(143,29,52,0.0)"/>
                <stop offset="100%" stopColor="rgba(143,29,52,0.3)"/>
              </linearGradient>
            </defs>

            {/* Grid */}
            {[0,1,2,3,4].map(i => (
              <line key={i} x1="80" x2="1640" y1={80 + i*100} y2={80 + i*100}
                    stroke={DK_BORDER_SOFT} strokeDasharray="2 6"/>
            ))}
            <line x1="80" y1="80" x2="80" y2="480" stroke={DK_BORDER}/>
            <line x1="80" y1="480" x2="1640" y2="480" stroke={DK_BORDER}/>

            {/* X axis labels */}
            {[["2008", 200],["2017", 900],["2026", 1580]].map(([y, x],i)=>(
              <text key={i} x={x} y="512" fill={DK_FG_MUTED} fontSize="18" letterSpacing="0.2em" textAnchor="middle">{y}</text>
            ))}

            {/* Software-needs curve — gentle, near-linear rise */}
            <path d="M80,385 C 500,375 1000,340 1640,270" fill="url(#g_sw)" stroke="none" opacity="0.35"/>
            <path d="M80,385 C 500,375 1000,340 1640,270"
                  fill="none" stroke={CRIMSON} strokeWidth="3" strokeLinecap="round"/>

            {/* Hardware power — flat early, lift starts ~2015, crosses software at 2017 */}
            <path d="M80,460 C 700,460 820,400 900,341 S 1500,130 1640,110" fill="url(#g_hw)" stroke="none"/>
            <path d="M80,460 C 700,460 820,400 900,341 S 1500,130 1640,110"
                  fill="none" stroke={GOLD} strokeWidth="4" strokeLinecap="round"/>

            {/* Crossover marker — exactly where curves meet */}
            <circle cx="900" cy="341" r="10" fill={DK_BG} stroke={GOLD} strokeWidth="3"/>
            <circle cx="900" cy="341" r="3" fill={GOLD}/>
            <line x1="900" y1="341" x2="900" y2="80" stroke={GOLD} strokeWidth="1" strokeDasharray="3 4" opacity="0.6"/>
            <text x="900" y="62" fill={GOLD} fontSize="16" letterSpacing="0.2em" textAnchor="middle" fontWeight="700">CROSSOVER</text>

            {/* Kicker callout — anchored to the crossover */}
            <g>
              <line x1="900" y1="341" x2="1120" y2="380" stroke={GOLD} strokeWidth="1" opacity="0.5"/>
              <rect x="1120" y="360" width="420" height="56" fill={DK_BG} stroke={GOLD} strokeWidth="1"/>
              <text x="1138" y="386" fill={DK_FG} fontSize="18" fontWeight="600">A full AD lab (5 VMs, DC + clients)</text>
              <text x="1138" y="406" fill={DK_FG} fontSize="18" fontWeight="600">now fits on a <tspan fill={GOLD}>$1k mini PC.</tspan></text>
            </g>

            {/* Tool timeline markers — dots sit ON the hardware curve, labels well above */}
            {[
              {x: 200, y: 459, label: "PROXMOX",    year: "2008"},
              {x: 480, y: 448, label: "ANSIBLE",    year: "2012"},
              {x: 580, y: 439, label: "DOCKER",     year: "2013"},
              {x: 740, y: 411, label: "KUBERNETES", year: "2015"},
            ].map((m,i)=>(
              <g key={i}>
                <line x1={m.x} y1={m.y} x2={m.x} y2={m.y - 70} stroke={DK_FG_MUTED} strokeWidth="1" strokeDasharray="2 3"/>
                <circle cx={m.x} cy={m.y} r="7" fill={DK_BG} stroke={GOLD} strokeWidth="2"/>
                <circle cx={m.x} cy={m.y} r="2.5" fill={GOLD}/>
                <rect x={m.x - 58} y={m.y - 110} width="116" height="38" fill={DK_BG} stroke={DK_BORDER}/>
                <text x={m.x} y={m.y - 90} fill={DK_FG} fontSize="18" letterSpacing="0.18em" textAnchor="middle" fontWeight="600">{m.label}</text>
                <text x={m.x} y={m.y - 76} fill={GOLD} fontSize="13" letterSpacing="0.2em" textAnchor="middle" fontWeight="500">{m.year}</text>
              </g>
            ))}

            {/* Labels on curves — positioned well clear of the lines */}
            <rect x="1430" y="46" width="210" height="56" fill={DK_BG} stroke="rgba(197,174,79,0.3)"/>
            <text x="1620" y="70" fill={GOLD} fontSize="20" fontWeight="700" letterSpacing="0.05em" textAnchor="end">Hardware power</text>
            <text x="1620" y="92" fill={DK_FG_MUTED} fontSize="13" letterSpacing="0.2em" textAnchor="end">CPU · RAM · DISK</text>
            <rect x="1430" y="216" width="210" height="56" fill={DK_BG} stroke="rgba(143,29,52,0.35)"/>
            <text x="1620" y="240" fill={CRIMSON} fontSize="20" fontWeight="700" letterSpacing="0.05em" textAnchor="end">Software needs</text>
            <text x="1620" y="262" fill={DK_FG_MUTED} fontSize="13" letterSpacing="0.2em" textAnchor="end">MODERATE NETWORKS</text>

            {/* Y axis label */}
            <text x="70" y="80" fill={DK_FG_MUTED} fontSize="14" letterSpacing="0.2em" textAnchor="end">HIGH</text>
            <text x="70" y="480" fill={DK_FG_MUTED} fontSize="14" letterSpacing="0.2em" textAnchor="end">LOW</text>
          </svg>
        </div>

        {/* readout removed — chart speaks for itself */}
      </Content>
    </Slide>
  );
}

// ─── SLIDE 10 · THE GOAL ─────────────────────────────────────────
function Slide11_Goal() {
  const traits = [
    {
      label: "EASY",
      tagline: "Deploy in minutes",
      items: [
        "One static binary — `./ludus-server`",
        "Static clients for Win/Linux/macOS",
        "Open source, fully documented",
        "API-driven · cloud or on-prem",
      ],
    },
    {
      label: "FLEXIBLE",
      tagline: "Shape any network",
      items: [
        "Templates are base OS installs",
        "Labs build dynamically at deploy",
        "No \"golden master\" templates required",
        "Domains, IPs, users — all user-declared",
      ],
    },
    {
      label: "EXPANDABLE",
      tagline: "Extend with your stack",
      items: [
        "Any existing Ansible role works",
        "Write your own · share your own",
        "Chocolatey package-manager support",
        "Integrates with your CI/CD",
      ],
    },
  ];
  return (
    <Slide section="THE SOLUTION">
      <Content>
        <NumberedEyebrow>MISSION</NumberedEyebrow>
        <Title style={{marginTop: 16}}>
          Solve infrastructure management for cybersecurity
        </Title>

        <div style={{flex:1, marginTop: 56, display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap: 28}}>
          {traits.map((p, i) => (
            <div key={i} style={{
              position:"relative", border: `1px solid ${DK_BORDER}`,
              background: "rgba(25,28,34,0.55)",
              padding: "44px 38px",
              display:"flex", flexDirection:"column",
            }}>
              <Brackets size={16} color={GOLD} inset={-1} thickness={1.5}/>
              <div style={{
                fontSize: 180, fontWeight: 700, color: "rgba(197,174,79,0.09)",
                position:"absolute", bottom: -24, right: 20, lineHeight: 0.85,
                fontVariantNumeric: "tabular-nums", letterSpacing: "-0.04em",
                pointerEvents: "none",
              }}>0{i+1}</div>
              <div style={{fontSize: 16, letterSpacing:"0.4em", color: GOLD, fontWeight: 700, position:"relative", zIndex: 2}}>
                {p.label}
              </div>
              <div style={{fontSize: 52, fontWeight: 700, marginTop: 16, letterSpacing:"-0.015em", lineHeight: 1.05}}>
                {p.tagline}
              </div>
              <div style={{height: 1, background: GOLD, width: 56, marginTop: 22}}/>
              <ul style={{listStyle:"none", margin: "28px 0 0", padding: 0, display:"flex", flexDirection:"column", gap: 14}}>
                {p.items.map((it, j)=>(
                  <li key={j} style={{display:"flex", gap: 12, fontSize: 18, color: DK_FG, lineHeight: 1.45}}>
                    <span style={{color: GOLD}}>▸</span>
                    <span dangerouslySetInnerHTML={{__html: it.replace(/`([^`]+)`/g, '<code style="color:'+GOLD+';background:rgba(197,174,79,0.1);padding:1px 6px;font-size:16px">$1</code>')}}/>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 11 · YAML RANGE CONFIG ───────────────────────────────
function Slide12_YAML() {
  return (
    <Slide section="THE SOLUTION">
      <Content>
        <div style={{display:"flex", alignItems:"baseline", justifyContent:"space-between"}}>
          <div>
            <NumberedEyebrow>AUTHOR YOUR RANGE</NumberedEyebrow>
            <Title style={{marginTop: 16}}>Write it. Drag it. Prompt it.</Title>
          </div>
        </div>

        <div style={{position:"relative", flex: 1, marginTop: 44, display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap: 28}}>
          {/* YAML panel */}
          <div style={{position:"relative", display:"flex", flexDirection:"column", minWidth: 0}}>
            <div style={{
              display:"flex", alignItems:"center", gap: 10,
              padding: "12px 18px", background: "rgba(25,28,34,0.9)",
              border: `1px solid ${DK_BORDER}`, borderBottom: "none",
              fontSize: 11, letterSpacing:"0.3em", color: GOLD,
            }}>
              <span style={{width: 8, height: 8, background: GOLD, borderRadius: "50%", boxShadow:`0 0 6px ${GOLD}`}}/>
              RANGE.YAML
              <span style={{marginLeft: "auto", color: DK_FG_MUTED}}>CONFIG-AS-CODE</span>
            </div>
            <div style={{
              position:"relative",
              border: `1px solid ${DK_BORDER}`,
              background: "#0d1117",
              padding: 22,
              flex: 1,
              fontFamily: "JetBrains Mono, monospace",
              fontSize: 14, lineHeight: 1.55,
              color: DK_FG,
              overflow: "hidden",
            }}>
              <Brackets size={12} color="rgba(197,174,79,0.4)" inset={6}/>
              <pre style={{margin:0, whiteSpace:"pre", fontFamily:"inherit"}}>
{`ludus:
  - `}<span style={{color: GOLD}}>vm_name</span>{`: `}<span style={{color:"#98c379"}}>ad-dc-win2022-server-x64</span>{`
    `}<span style={{color: GOLD}}>hostname</span>{`: `}<span style={{color:"#98c379"}}>JD-DC01-2022</span>{`
    `}<span style={{color: GOLD}}>template</span>{`: `}<span style={{color:"#98c379"}}>win2022-server-x64-template</span>{`
    `}<span style={{color: GOLD}}>vlan</span>{`: `}<span style={{color:"#d19a66"}}>10</span>{`
    `}<span style={{color: GOLD}}>ip_last_octet</span>{`: `}<span style={{color:"#d19a66"}}>11</span>{`
    `}<span style={{color: GOLD}}>ram_gb</span>{`: `}<span style={{color:"#d19a66"}}>8</span>{`
    `}<span style={{color: GOLD}}>cpus</span>{`: `}<span style={{color:"#d19a66"}}>4</span>{`
    `}<span style={{color: GOLD}}>windows</span>{`:
      `}<span style={{color: GOLD}}>sysprep</span>{`: `}<span style={{color:"#d19a66"}}>true</span>{`
      `}<span style={{color: GOLD}}>domain</span>{`:
        `}<span style={{color: GOLD}}>fqdn</span>{`: `}<span style={{color:"#98c379"}}>ludus.domain</span>{`
        `}<span style={{color: GOLD}}>role</span>{`: `}<span style={{color:"#98c379"}}>primary-dc</span>{`
  - `}<span style={{color: GOLD}}>vm_name</span>{`: `}<span style={{color:"#98c379"}}>ad-win11-22h2-enterprise-x64-1</span>{`
    `}<span style={{color: GOLD}}>template</span>{`: `}<span style={{color:"#98c379"}}>win11-22h2-x64-enterprise</span>{`
    `}<span style={{color: GOLD}}>vlan</span>{`: `}<span style={{color:"#d19a66"}}>10</span>{`
    `}<span style={{color: GOLD}}>windows</span>{`:
      `}<span style={{color: GOLD}}>office_version</span>{`: `}<span style={{color:"#d19a66"}}>2019</span>{`
      `}<span style={{color: GOLD}}>domain</span>{`:
        `}<span style={{color: GOLD}}>fqdn</span>{`: `}<span style={{color:"#98c379"}}>ludus.domain</span>{`
        `}<span style={{color: GOLD}}>role</span>{`: `}<span style={{color:"#98c379"}}>member</span>
              </pre>
            </div>
          </div>

          {/* Web UI panel — ghost-drag canvas mock */}
          <div style={{position:"relative", display:"flex", flexDirection:"column", minWidth: 0}}>
            <div style={{
              display:"flex", alignItems:"center", gap: 10,
              padding: "12px 18px", background: "rgba(25,28,34,0.9)",
              border: `1px solid ${DK_BORDER}`, borderBottom: "none",
              fontSize: 11, letterSpacing:"0.3em", color: GOLD,
            }}>
              <span style={{width: 8, height: 8, background: GOLD, borderRadius: "50%", boxShadow:`0 0 6px ${GOLD}`}}/>
              WEB UI
              <span style={{marginLeft: "auto", color: DK_FG_MUTED}}>VISUAL EDITOR</span>
            </div>
            <div style={{
              position:"relative",
              border: `1px solid ${DK_BORDER}`,
              background: "#0d1117",
              flex: 1, minHeight: 0, minWidth: 0,
              overflow:"hidden",
              backgroundImage: `radial-gradient(rgba(197,174,79,0.07) 1px, transparent 1px)`,
              backgroundSize: "22px 22px",
              backgroundPosition: "11px 11px",
            }}>
              <Brackets size={12} color="rgba(197,174,79,0.4)" inset={6}/>

              {/* ─── VLAN 10 swimlane ─────────────────── */}
              <div style={{
                position:"absolute", left: 22, right: 22, top: 36, height: "42%",
                border: `1px dashed rgba(197,174,79,0.3)`,
                background: "rgba(197,174,79,0.025)",
              }}>
                <div style={{
                  position:"absolute", top: -9, left: 14,
                  padding: "0 8px", background: "#0d1117",
                  fontFamily: "JetBrains Mono, monospace",
                  fontSize: 10, letterSpacing:"0.3em", color: GOLD,
                }}>
                  VLAN 10 · AD
                </div>

                {/* Placed: DC */}
                <div style={{
                  position:"absolute", left: 16, top: 28,
                  padding: "8px 12px",
                  border: `1px solid ${DK_BORDER}`,
                  background: "rgba(25,28,34,0.85)",
                  fontFamily:"JetBrains Mono, monospace",
                  display:"flex", flexDirection:"column", gap: 4,
                  width: 120,
                }}>
                  <div style={{display:"flex", alignItems:"center", gap: 8}}>
                    <span style={{width: 6, height: 6, background: GOLD, borderRadius:"50%", boxShadow:`0 0 6px ${GOLD}`, flexShrink: 0}}/>
                    <span style={{fontSize: 12, color: DK_FG}}>JD-DC01</span>
                  </div>
                  <div style={{fontSize: 9, color: DK_FG_MUTED, letterSpacing:"0.08em"}}>win2022 · dc</div>
                </div>

                {/* Placed: WIN11-01 */}
                <div style={{
                  position:"absolute", left: 152, top: 28,
                  padding: "8px 12px",
                  border: `1px solid ${DK_BORDER}`,
                  background: "rgba(25,28,34,0.85)",
                  fontFamily:"JetBrains Mono, monospace",
                  display:"flex", flexDirection:"column", gap: 4,
                  width: 120,
                }}>
                  <div style={{display:"flex", alignItems:"center", gap: 8}}>
                    <span style={{width: 6, height: 6, background: "rgba(155,169,180,0.8)", borderRadius:"50%", flexShrink: 0}}/>
                    <span style={{fontSize: 12, color: DK_FG}}>WIN11-01</span>
                  </div>
                  <div style={{fontSize: 9, color: DK_FG_MUTED, letterSpacing:"0.08em"}}>win11 · member</div>
                </div>

                {/* Drop-zone indicator */}
                <div style={{
                  position:"absolute", left: 294, top: 48,
                  width: 146, height: 52,
                  border: `1px dashed ${GOLD}`,
                  background: "rgba(197,174,79,0.06)",
                }}/>
              </div>

              {/* ─── VLAN 20 swimlane ─────────────────── */}
              <div style={{
                position:"absolute", left: 22, right: 22, top: "56%", bottom: 42,
                border: `1px dashed rgba(197,174,79,0.3)`,
                background: "rgba(197,174,79,0.015)",
              }}>
                <div style={{
                  position:"absolute", top: -9, left: 14,
                  padding: "0 8px", background: "#0d1117",
                  fontFamily: "JetBrains Mono, monospace",
                  fontSize: 10, letterSpacing:"0.3em", color: GOLD,
                }}>
                  VLAN 20 · OFFENSE
                </div>

                {/* Placed: Kali */}
                <div style={{
                  position:"absolute", left: 16, top: 28,
                  padding: "8px 12px",
                  border: `1px solid ${DK_BORDER}`,
                  background: "rgba(25,28,34,0.85)",
                  fontFamily:"JetBrains Mono, monospace",
                  display:"flex", flexDirection:"column", gap: 4,
                  width: 120,
                }}>
                  <div style={{display:"flex", alignItems:"center", gap: 8}}>
                    <span style={{width: 6, height: 6, background: "rgba(155,169,180,0.8)", borderRadius:"50%", flexShrink: 0}}/>
                    <span style={{fontSize: 12, color: DK_FG}}>KALI-01</span>
                  </div>
                  <div style={{fontSize: 9, color: DK_FG_MUTED, letterSpacing:"0.08em"}}>kali · attacker</div>
                </div>

                {/* Placed: Router */}
                <div style={{
                  position:"absolute", left: 152, top: 28,
                  padding: "8px 12px",
                  border: `1px solid ${DK_BORDER}`,
                  background: "rgba(25,28,34,0.85)",
                  fontFamily:"JetBrains Mono, monospace",
                  display:"flex", flexDirection:"column", gap: 4,
                  width: 120,
                }}>
                  <div style={{display:"flex", alignItems:"center", gap: 8}}>
                    <span style={{width: 6, height: 6, background: "rgba(155,169,180,0.8)", borderRadius:"50%", flexShrink: 0}}/>
                    <span style={{fontSize: 12, color: DK_FG}}>ROUTER</span>
                  </div>
                  <div style={{fontSize: 9, color: DK_FG_MUTED, letterSpacing:"0.08em"}}>debian-12 · gw</div>
                </div>
              </div>

              {/* ─── Dashed drag-trail (SVG, absolute overlay) ─── */}
              <svg
                style={{position:"absolute", inset: 0, width:"100%", height:"100%", pointerEvents:"none"}}
                preserveAspectRatio="none"
                viewBox="0 0 500 700"
              >
                <path
                  d="M 470 600 C 485 470, 450 320, 400 220"
                  stroke={GOLD}
                  strokeWidth="1.4"
                  strokeDasharray="4 5"
                  fill="none"
                  opacity="0.6"
                />
              </svg>

              {/* ─── Ghost node (being dragged) ─── */}
              <div style={{
                position:"absolute", left: 296, top: 160,
                transform: "rotate(-3deg)",
                padding: "8px 12px",
                border: `1px solid ${GOLD}`,
                background: "rgba(25,28,34,0.95)",
                fontFamily:"JetBrains Mono, monospace",
                display:"flex", flexDirection:"column", gap: 4,
                width: 140,
                opacity: 0.94,
                boxShadow: `0 14px 36px rgba(197,174,79,0.32), 0 0 0 1px ${GOLD}`,
              }}>
                <div style={{display:"flex", alignItems:"center", gap: 8}}>
                  <span style={{width: 6, height: 6, background: GOLD, borderRadius:"50%", boxShadow:`0 0 6px ${GOLD}`, flexShrink: 0}}/>
                  <span style={{fontSize: 12, color: DK_FG}}>WIN11-02</span>
                </div>
                <div style={{fontSize: 9, color: GOLD, letterSpacing:"0.08em"}}>◆ dragging...</div>
              </div>

              {/* ─── Cursor arrow ─── */}
              <svg
                style={{position:"absolute", left: 424, top: 200, width: 22, height: 26, pointerEvents:"none", filter:`drop-shadow(0 2px 6px rgba(0,0,0,0.75))`}}
                viewBox="0 0 20 24"
              >
                <path
                  d="M 2 2 L 2 18 L 6.5 13.5 L 9 19.5 L 11.5 18.5 L 9 12.5 L 15 12.5 Z"
                  fill={GOLD}
                  stroke={DK_BG}
                  strokeWidth="1.2"
                  strokeLinejoin="round"
                />
              </svg>

              {/* ─── Bottom hint ─── */}
              <div style={{
                position:"absolute", bottom: 14, right: 16,
                fontFamily:"JetBrains Mono, monospace", fontSize: 10,
                letterSpacing:"0.3em", color: DK_FG_MUTED,
              }}>
                DRAG · DROP · DEPLOY
              </div>
            </div>
          </div>

          {/* AI / MCP panel */}
          <div style={{position:"relative", display:"flex", flexDirection:"column", minWidth: 0}}>
            <div style={{
              display:"flex", alignItems:"center", gap: 10,
              padding: "12px 18px", background: "rgba(25,28,34,0.9)",
              border: `1px solid ${DK_BORDER}`, borderBottom: "none",
              fontSize: 11, letterSpacing:"0.3em", color: GOLD,
            }}>
              <span style={{width: 8, height: 8, background: GOLD, borderRadius: "50%", boxShadow:`0 0 6px ${GOLD}`}}/>
              AI · MCP
              <span style={{marginLeft: "auto", color: DK_FG_MUTED}}>NATURAL LANGUAGE</span>
            </div>
            <div style={{
              position:"relative",
              border: `1px solid ${DK_BORDER}`,
              background: "#0d1117",
              padding: 22,
              flex: 1, minHeight: 0, minWidth: 0,
              fontFamily: "JetBrains Mono, monospace",
              color: DK_FG,
              overflow: "hidden",
              display:"flex", flexDirection:"column", gap: 14,
            }}>
              <Brackets size={12} color="rgba(197,174,79,0.4)" inset={6}/>

              {/* User prompt bubble */}
              <div style={{display:"flex", flexDirection:"column", gap: 6}}>
                <div style={{
                  fontSize: 10, letterSpacing:"0.3em", color: DK_FG_MUTED,
                  display:"flex", alignItems:"center", gap: 8,
                }}>
                  <span style={{width: 6, height: 6, background: DK_FG_MUTED, borderRadius:"50%"}}/>
                  YOU
                </div>
                <div style={{
                  padding: "10px 14px",
                  border: `1px solid ${DK_BORDER}`,
                  background: "rgba(25,28,34,0.55)",
                  fontSize: 14, lineHeight: 1.5, color: DK_FG,
                }}>
                  <span style={{color:"#98c379"}}>"</span>build me an AD lab: 1 DC, 2 Win11 clients, Kali on a separate VLAN — then snapshot everything<span style={{color:"#98c379"}}>"</span>
                </div>
              </div>

              {/* MCP translation row */}
              <div style={{
                display:"flex", alignItems:"center", gap: 10,
                fontSize: 10, letterSpacing:"0.3em", color: GOLD,
              }}>
                <span style={{flex: 1, height: 1, background: DK_BORDER}}/>
                <span>▼ VIA MCP</span>
                <span style={{flex: 1, height: 1, background: DK_BORDER}}/>
              </div>

              {/* Assistant tool calls */}
              <div style={{display:"flex", flexDirection:"column", gap: 6}}>
                <div style={{
                  fontSize: 10, letterSpacing:"0.3em", color: GOLD,
                  display:"flex", alignItems:"center", gap: 8,
                }}>
                  <span style={{width: 6, height: 6, background: GOLD, borderRadius:"50%", boxShadow:`0 0 6px ${GOLD}`}}/>
                  LUDUS-MCP
                </div>
                <div style={{
                  padding: "12px 14px",
                  border: `1px solid ${DK_BORDER}`,
                  background: "#0a0c10",
                  fontSize: 13, lineHeight: 1.65, color: DK_FG,
                  display:"flex", flexDirection:"column", gap: 4,
                }}>
                  <div><span style={{color: GOLD}}>→</span> <span style={{color:"#d19a66"}}>range.config</span>.set(<span style={{color:"#98c379"}}>ad-lab.yaml</span>)</div>
                  <div><span style={{color: GOLD}}>→</span> <span style={{color:"#d19a66"}}>range</span>.deploy()</div>
                  <div><span style={{color: GOLD}}>→</span> <span style={{color:"#d19a66"}}>snapshot</span>.create(<span style={{color:"#98c379"}}>all-vms</span>)</div>
                </div>
              </div>

              {/* Assistant confirmation */}
              <div style={{display:"flex", flexDirection:"column", gap: 6}}>
                <div style={{
                  fontSize: 10, letterSpacing:"0.3em", color: DK_FG_MUTED,
                  display:"flex", alignItems:"center", gap: 8,
                }}>
                  <span style={{width: 6, height: 6, background: DK_FG_MUTED, borderRadius:"50%"}}/>
                  CLAUDE · CODEX · CURSOR
                </div>
                <div style={{
                  padding: "10px 14px",
                  border: `1px solid ${DK_BORDER}`,
                  background: "rgba(25,28,34,0.55)",
                  fontSize: 13, lineHeight: 1.55, color: DK_FG,
                }}>
                  <div><span style={{color:"#98c379"}}>✓</span> range deployed · 4 VMs across 2 VLANs</div>
                  <div><span style={{color:"#98c379"}}>✓</span> snapshot <span style={{color: GOLD}}>pre-engagement</span> saved</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 12 · ROLES ────────────────────────────────────────────
function Slide13_Roles() {
  // First-party + enterprise roles merged — all shipped or sold by BSL
  const firstParty = [
    {repo:"ludus_adcs",                 who:"BSL"},
    {repo:"ludus_bloodhound_ce",        who:"BSL"},
    {repo:"ludus_mssql",                who:"BSL"},
    {repo:"ludus_elastic_container",    who:"BSL"},
    {repo:"ludus_elastic_agent",        who:"BSL"},
    {repo:"ludus_vulhub",               who:"BSL"},
    {repo:"ludus_commandovm",           who:"BSL"},
    {repo:"ludus_flarevm",              who:"BSL"},
    {repo:"ludus_remnux",               who:"BSL"},
    {repo:"ludus_emux",                 who:"BSL"},
    {repo:"ludus_xz_backdoor",          who:"BSL"},
    {repo:"ludus_adaptix_c2",           who:"BSL"},
    {repo:"ludus_defender_for_endpoint",who:"BSL · enterprise"},
    {repo:"ludus_google_secops",        who:"BSL · enterprise"},
    {repo:"ludus_mythic_c2",            who:"BSL · enterprise"},
    {repo:"ludus_sysmon",               who:"BSL · enterprise"},
    {repo:"ludus_guacamole_server",     who:"BSL · enterprise"},
    {repo:"ludus_guacamole_client",     who:"BSL · enterprise"},
    {repo:"ludus_bulk_ad_content",      who:"BSL · enterprise"},
    {repo:"ludus_unconstrained_deleg",  who:"BSL · enterprise"},
    {repo:"ludus_zeek",                 who:"BSL · enterprise"},
    {repo:"ludus_ghosts_client",        who:"BSL · enterprise"},
    {repo:"ludus_smb_share",            who:"BSL · enterprise"},
    {repo:"ludus_windows_wallpaper",    who:"BSL · enterprise"},
  ];
  // Community roles (from Discord-tracked releases, 2024-03 → 2026-04)
  const community = [
    {repo:"ludus-gitlab-ce",            who:"@tigrebleu"},
    {repo:"ludus-ad-content",           who:"@tigrebleu"},
    {repo:"ludus-local-users",          who:"@tigrebleu"},
    {repo:"ludus_exchange",             who:"@aleemladha"},
    {repo:"ludus_wazuh_agent",          who:"@aleemladha"},
    {repo:"ludus_velociraptor_server",  who:"@f_Murer"},
    {repo:"ludus_velociraptor_client",  who:"@f_Murer"},
    {repo:"ludus_tailscale",            who:"@__Mastadon"},
    {repo:"ludus_adfs",                 who:"@bagelByt3s"},
    {repo:"ludus-ad-vulns",             who:"@Primusinterp"},
    {repo:"ludus_juiceshop",            who:"@xurger"},
    {repo:"ludus-ranges",               who:"@dfirjesseee"},
    {repo:"ludus_install_spice",        who:"@crokrodile"},
    {repo:"ludus_exegol",               who:"@hugojcqs"},
    {repo:"ludus_ghosts_server",        who:"@frack113"},
    {repo:"ludus_filigran_opencti",     who:"@frack113"},
    {repo:"ludus_docker_engine",        who:"@frack113"},
    {repo:"ludus_rustdesk",             who:"@beardhammer"},
    {repo:"ludus_sliver",               who:"@netpenguins"},
    {repo:"ludus_redirector",           who:"@netpenguins"},
    {repo:"ludus_k3s",                  who:"@netpenguins"},
    {repo:"ludus_fake_configs",         who:"@mojeda101"},
    {repo:"ludus_adtimeline_syncthing", who:"@mojeda101"},
    {repo:"ludus_veeam_vbr",            who:"@mojeda101"},
    {repo:"ludus_ad_group_all",         who:"@mojeda101"},
    {repo:"ludus_win_privesc",          who:"@mojeda101"},
    {repo:"ludus_win_rearm",            who:"@mojeda101"},
    {repo:"ludus_kali_setup",           who:"@mojeda101"},
    {repo:"ludus_litterbox_role",       who:"@professor-moody"},
    {repo:"ludus_badblood",             who:"@curi0usJack"},
    {repo:"ludus_wsus",                 who:"@stuk0v_"},
    {repo:"ludus_vectr",                who:"@stuk0v_"},
    {repo:"ludus_ghostwriter",          who:"@stuk0v_"},
    {repo:"ludus_nemesis",              who:"@_brmkit"},
    {repo:"ludus_guacamole",            who:"@_brmkit"},
    {repo:"ludus-fastmcp",              who:"@tjnull"},
    {repo:"ludus_nginx_redirector",     who:"@hunterino_"},
    {repo:"ludus_forgejo",              who:"@hunterino_"},
    {repo:"ludus-defender-lab",         who:"@ischyr"},
    {repo:"ludus_kubernetes_goat",      who:"@bu5h-d"},
    {repo:"ludus_maldev_tools",         who:"@stishy"},
    {repo:"ludus_sccm",                 who:"@synzack"},
    {repo:"ludus_empire",               who:"@dfirjesseee"},
    {repo:"ansible-role-sccm-agent",    who:"@globalbao"},
    {repo:"ansible-role-dotnet48",      who:"@deekayen"},
    {repo:"ansible-role-winlogbeat",    who:"@j91321"},
    {repo:"ansible_role_wsus_server",   who:"@gamethis"},
    {repo:"ansible-role-squid",         who:"@robertdebock"},
  ];
  // Ansible Galaxy — representative, "and 40,000 more"
  const galaxy = [
    {repo:"geerlingguy.docker",         who:"galaxy"},
    {repo:"community.general",          who:"galaxy"},
    {repo:"ansible.posix",              who:"galaxy"},
    {repo:"ansible.windows",            who:"galaxy"},
    {repo:"redhat.rhel_system_roles",   who:"galaxy"},
    {repo:"elastic.elasticsearch",      who:"galaxy"},
    {repo:"kubernetes.core",            who:"galaxy"},
    {repo:"community.vmware",           who:"galaxy"},
    {repo:"cisco.ios",                  who:"galaxy"},
    {repo:"fortinet.fortios",           who:"galaxy"},
    {repo:"paloaltonetworks.panos",     who:"galaxy"},
    {repo:"arista.eos",                 who:"galaxy"},
  ];

  // Compose three marquee rows, each interleaving provenance so every row feels varied
  const interleave = (...lists) => {
    const out = [];
    const maxLen = Math.max(...lists.map(l => l.length));
    for (let i = 0; i < maxLen; i++) {
      for (const l of lists) if (l[i]) out.push(l[i]);
    }
    return out;
  };
  const row1 = interleave(firstParty.slice(0, 8), community.slice(0, 16), galaxy.slice(0, 4));
  const row2 = interleave(community.slice(16, 32), firstParty.slice(8, 16), galaxy.slice(4, 8));
  const row3 = interleave(community.slice(32), firstParty.slice(16), galaxy.slice(8));

  const tint = (who) => {
    if (who === "galaxy") return {dot: "rgba(155,169,180,0.7)", border: DK_BORDER, bg: "rgba(25,28,34,0.55)"};
    if (who.startsWith("BSL")) return {dot: GOLD, border: "rgba(197,174,79,0.45)", bg: "rgba(197,174,79,0.06)"};
    return {dot: "rgba(197,174,79,0.55)", border: DK_BORDER, bg: "rgba(25,28,34,0.55)"};
  };

  const Chip = ({r}) => {
    const t = tint(r.who);
    return (
      <div style={{
        display:"inline-flex", alignItems:"center", gap: 10,
        padding:"10px 16px", border:`1px solid ${t.border}`, background: t.bg,
        fontFamily:"'JetBrains Mono', ui-monospace, monospace", fontSize: 15,
        whiteSpace:"nowrap", flexShrink: 0,
      }}>
        <span style={{width: 6, height: 6, background: t.dot, borderRadius:"50%", boxShadow:`0 0 6px ${t.dot}`}}/>
        <span style={{color: DK_FG}}>{r.repo}</span>
        <span style={{color: DK_FG_MUTED, fontSize: 12, letterSpacing:"0.04em"}}>{r.who}</span>
      </div>
    );
  };

  const Row = ({items, speed, reverse = false}) => (
    <div style={{overflow:"hidden", position:"relative", maskImage:"linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)", WebkitMaskImage:"linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)"}}>
      <div style={{
        display:"flex", gap: 14, whiteSpace:"nowrap", width:"max-content",
        animation:`ludus-marquee ${speed}s linear infinite`,
        animationDirection: reverse ? "reverse" : "normal",
      }}>
        {[...items, ...items, ...items].map((r, i) => <Chip key={i} r={r}/>)}
      </div>
    </div>
  );

  const uniqueAuthors = new Set(community.map(c => c.who)).size;
  const totalRoles = firstParty.length + community.length;

  return (
    <Slide section="THE SOLUTION">
      <style>{`
        @keyframes ludus-marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-33.3333%); }
        }
      `}</style>
      <Content>
        <div style={{display:"flex", alignItems:"baseline", justifyContent:"space-between"}}>
          <div>
            <NumberedEyebrow>EXTENSIBILITY</NumberedEyebrow>
            <Title style={{marginTop: 16}}>Extending Ludus is never the bottleneck</Title>
            <div style={{fontSize: TS.body, color: DK_FG_MUTED, marginTop: 14, maxWidth: 1200}}>
              Ansible roles — shipped by BSL, built by the community, or pulled from Galaxy.
            </div>
          </div>
          <img src="assets/ansible-logo.png" alt="Ansible" style={{height: 56, filter:"brightness(1.2)"}}/>
        </div>

        {/* Stats band */}
        <div style={{
          marginTop: 36, display:"grid", gridTemplateColumns:"1fr 1fr 1fr 1fr",
          border: `1px solid ${DK_BORDER}`, background: "rgba(20,22,28,0.5)",
        }}>
          {[
            {n: `${firstParty.length}`,    label:"ROLES SHIPPED BY BSL",      sub:"first-party + enterprise"},
            {n: `${community.length}+`,    label:"COMMUNITY ROLES",           sub:`${uniqueAuthors}+ contributors`},
            {n: `40,000+`,                 label:"ANSIBLE GALAXY",            sub:"bring anything · no wrapper"},
            {n: `25 mo`,                   label:"ACTIVELY GROWING",          sub:"new roles every week"},
          ].map((s, i) => (
            <div key={i} style={{
              padding: "18px 22px",
              borderRight: i < 3 ? `1px solid ${DK_BORDER}` : "none",
              display:"flex", flexDirection:"column", gap: 4,
            }}>
              <div style={{fontSize: 44, fontWeight: 700, color: GOLD, lineHeight: 1, fontFamily:"'JetBrains Mono', ui-monospace, monospace"}}>{s.n}</div>
              <div style={{fontSize: 11, letterSpacing:"0.3em", color: DK_FG, marginTop: 8, fontWeight: 600}}>{s.label}</div>
              <div style={{fontSize: 12, color: DK_FG_MUTED}}>{s.sub}</div>
            </div>
          ))}
        </div>

        {/* Legend */}
        <div style={{marginTop: 22, display:"flex", alignItems:"center", gap: 24, fontSize: 11, letterSpacing:"0.25em", color: DK_FG_MUTED}}>
          <span style={{display:"inline-flex", alignItems:"center", gap: 8}}>
            <span style={{width: 8, height: 8, background: GOLD, borderRadius:"50%", boxShadow:`0 0 6px ${GOLD}`}}/>
            BSL
          </span>
          <span style={{display:"inline-flex", alignItems:"center", gap: 8}}>
            <span style={{width: 8, height: 8, background: "rgba(197,174,79,0.55)", borderRadius:"50%"}}/>
            COMMUNITY
          </span>
          <span style={{display:"inline-flex", alignItems:"center", gap: 8}}>
            <span style={{width: 8, height: 8, background: "rgba(155,169,180,0.7)", borderRadius:"50%"}}/>
            GALAXY
          </span>
          <span style={{marginLeft:"auto", color: GOLD}}>{totalRoles}+ public Ludus roles</span>
        </div>

        {/* Rotating carousel — three rows, different speeds and directions */}
        <div style={{flex: 1, marginTop: 16, display:"flex", flexDirection:"column", gap: 14, justifyContent:"center", minHeight: 0}}>
          <Row items={row1} speed={140}/>
          <Row items={row2} speed={180} reverse/>
          <Row items={row3} speed={120}/>
        </div>
      </Content>
    </Slide>
  );
}

// ─── Use-case slide template ────────────────────────────────────
function UseCaseSlide({ caseNo, titleWord, subtitle, problem, solution, motif }) {
  return (
    <Slide section={`USE CASE · ${caseNo}/06`}>
      <Content>
        <div style={{display:"flex", alignItems:"baseline", justifyContent:"space-between", marginBottom: 20}}>
          <div>
            <Eyebrow>// USE CASE {String(caseNo).padStart(2,"0")}</Eyebrow>
            <div style={{display:"flex", alignItems:"baseline", gap: 28, marginTop: 16}}>
              <div style={{
                fontSize: 120, fontWeight: 700, color: GOLD, lineHeight: 0.9,
                fontVariantNumeric: "tabular-nums", letterSpacing: "-0.04em",
              }}>
                0{caseNo}
              </div>
              <div>
                <Title size={64}>{titleWord}</Title>
                <div style={{fontSize: 22, color: DK_FG_MUTED, marginTop: 10, letterSpacing:"0.1em"}}>
                  {subtitle}
                </div>
              </div>
            </div>
          </div>
          <div style={{display:"flex", alignItems:"center", gap: 20}}>
            {motif && (
              <div style={{
                width: 72, height: 72,
                border: `1px solid ${GOLD}`,
                background: "rgba(197,174,79,0.06)",
                display:"flex", alignItems:"center", justifyContent:"center",
                color: GOLD,
              }}>
                {motif}
              </div>
            )}
            <div style={{textAlign:"right", fontSize: 12, letterSpacing:"0.3em", color: DK_FG_MUTED}}>
              APPLIES TO<br/>
              <span style={{color: GOLD, fontSize: 14}}>{problem.applies}</span>
            </div>
          </div>
        </div>

        <div style={{flex: 1, display:"grid", gridTemplateColumns:"1fr 1fr", gap: 36, marginTop: 28}}>
          {/* Problem */}
          <div style={{
            position:"relative",
            border: `1px solid ${CRIMSON}`,
            background: "rgba(143,29,52,0.08)",
            padding: "32px 36px",
            display:"flex", flexDirection:"column",
          }}>
            <Brackets size={14} color={CRIMSON} inset={-1} thickness={1.5}/>
            <div style={{display:"flex", alignItems:"center", gap: 14, paddingBottom: 18, borderBottom: `1px solid rgba(143,29,52,0.4)`}}>
              <div style={{
                width: 38, height: 38,
                border: `1.5px solid ${CRIMSON}`,
                display:"flex", alignItems:"center", justifyContent:"center",
                fontSize: 22, color: CRIMSON, fontWeight: 700,
              }}>×</div>
              <div>
                <div style={{fontSize: 11, letterSpacing:"0.35em", color: CRIMSON, fontWeight: 700}}>PROBLEM</div>
                <div style={{fontSize: 22, color: DK_FG, marginTop: 2, lineHeight: 1.3}}>{problem.headline}</div>
              </div>
            </div>
            <ul style={{margin: "24px 0 0", padding: 0, listStyle:"none", display:"flex", flexDirection:"column", gap: 18}}>
              {problem.items.map((it, i)=>(
                <li key={i} style={{display:"flex", gap: 14, fontSize: 21, color: DK_FG, lineHeight: 1.5}}>
                  <span style={{color: CRIMSON, fontSize: 18, paddingTop: 4}}>▸</span>
                  <span dangerouslySetInnerHTML={{__html: it}}/>
                </li>
              ))}
            </ul>
            <div style={{flex: 1}}/>
            <div style={{
              marginTop: 24, paddingTop: 16, borderTop: `1px dashed rgba(143,29,52,0.35)`,
              display:"flex", justifyContent:"space-between", alignItems:"center",
              fontSize: 11, letterSpacing:"0.3em", color: CRIMSON, fontWeight: 700,
            }}>
              <span>STATUS · UNSOLVED</span>
              <span style={{color: DK_FG_MUTED, fontWeight: 400}}>{problem.cost || "COST · TIME + RISK"}</span>
            </div>
          </div>

          {/* Solution */}
          <div style={{
            position:"relative",
            border: `1px solid ${GOLD}`,
            background: "rgba(197,174,79,0.06)",
            padding: "32px 36px",
            display:"flex", flexDirection:"column",
          }}>
            <Brackets size={14} color={GOLD} inset={-1} thickness={1.5}/>
            <div style={{display:"flex", alignItems:"center", gap: 14, paddingBottom: 18, borderBottom: `1px solid rgba(197,174,79,0.35)`}}>
              <div style={{
                width: 38, height: 38,
                border: `1.5px solid ${GOLD}`,
                display:"flex", alignItems:"center", justifyContent:"center",
                color: GOLD,
              }}>
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke={GOLD} strokeWidth="2"><path d="M3 9l4 4 8-9"/></svg>
              </div>
              <div>
                <div style={{fontSize: 11, letterSpacing:"0.35em", color: GOLD, fontWeight: 700}}>SOLUTION · LUDUS</div>
                <div style={{fontSize: 22, color: DK_FG, marginTop: 2, lineHeight: 1.3}}>{solution.headline}</div>
              </div>
            </div>
            <ul style={{margin: "24px 0 0", padding: 0, listStyle:"none", display:"flex", flexDirection:"column", gap: 18}}>
              {solution.items.map((it, i)=>(
                <li key={i} style={{display:"flex", gap: 14, fontSize: 21, color: DK_FG, lineHeight: 1.5}}>
                  <span style={{color: GOLD, fontSize: 18, paddingTop: 4}}>▸</span>
                  <span dangerouslySetInnerHTML={{__html: it}}/>
                </li>
              ))}
            </ul>
            <div style={{flex: 1}}/>
            <div style={{
              marginTop: 24, paddingTop: 16, borderTop: `1px dashed rgba(197,174,79,0.3)`,
              display:"flex", justifyContent:"space-between", alignItems:"center",
              fontSize: 11, letterSpacing:"0.3em", color: GOLD, fontWeight: 700,
            }}>
              <span>STATUS · SHIPPING</span>
              <span style={{color: DK_FG_MUTED, fontWeight: 400}}>{solution.outcome || "OUTCOME · MINUTES"}</span>
            </div>
          </div>
        </div>
      </Content>
    </Slide>
  );
}

// ─── Use-case motif glyphs ──────────────────────────────────────
const MOTIF_OCO = (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.5">
    <circle cx="20" cy="20" r="14"/>
    <circle cx="20" cy="20" r="8"/>
    <circle cx="20" cy="20" r="2" fill="currentColor"/>
    <line x1="20" y1="4" x2="20" y2="10"/><line x1="20" y1="30" x2="20" y2="36"/>
    <line x1="4" y1="20" x2="10" y2="20"/><line x1="30" y1="20" x2="36" y2="20"/>
  </svg>
);
const MOTIF_REDTEAM = (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.5">
    <path d="M20 4 L33 11 L33 22 C33 29 27 34 20 36 C13 34 7 29 7 22 L7 11 Z"/>
    <path d="M14 20 L18 24 L26 15"/>
  </svg>
);
const MOTIF_AI = (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.5">
    <circle cx="10" cy="10" r="3"/><circle cx="30" cy="10" r="3"/>
    <circle cx="10" cy="30" r="3"/><circle cx="30" cy="30" r="3"/>
    <circle cx="20" cy="20" r="4"/>
    <line x1="13" y1="11" x2="17" y2="18"/><line x1="27" y1="11" x2="23" y2="18"/>
    <line x1="13" y1="29" x2="17" y2="22"/><line x1="27" y1="29" x2="23" y2="22"/>
  </svg>
);
const MOTIF_THREATEM = (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.5">
    <rect x="6" y="6" width="12" height="12"/>
    <rect x="22" y="6" width="12" height="12"/>
    <rect x="6" y="22" width="12" height="12"/>
    <rect x="22" y="22" width="12" height="12"/>
    <line x1="18" y1="12" x2="22" y2="12"/>
    <line x1="12" y1="18" x2="12" y2="22"/>
    <line x1="28" y1="18" x2="28" y2="22"/>
    <line x1="18" y1="28" x2="22" y2="28"/>
  </svg>
);
const MOTIF_VULN = (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.5">
    <path d="M6 20 h8 l3 -8 l6 16 l3 -8 h8"/>
    <circle cx="6" cy="20" r="1.5" fill="currentColor"/>
    <circle cx="34" cy="20" r="1.5" fill="currentColor"/>
  </svg>
);
const MOTIF_INTEL = (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.5">
    <circle cx="17" cy="17" r="10"/>
    <line x1="25" y1="25" x2="34" y2="34"/>
    <line x1="13" y1="17" x2="21" y2="17"/>
    <line x1="17" y1="13" x2="17" y2="21"/>
  </svg>
);

// ─── SLIDE 13B · USE CASES OVERVIEW ──────────────────────────────
const OVERVIEW_ROWS = [
  { n: 1, name: "Offensive Cyber Ops",     outcome: "Ship tools with their test range built-in" },
  { n: 2, name: "Red Team Infrastructure", outcome: "One isolated range per engagement" },
  { n: 3, name: "AI & Model Training",     outcome: "Clean-room training data on demand" },
  { n: 4, name: "Threat Emulation",        outcome: "Realistic enterprises in minutes, not days" },
  { n: 5, name: "Vuln Scan Testing",       outcome: "CI/CD for detection logic" },
  { n: 6, name: "Threat Intelligence",     outcome: "A digital twin attackers can't detect" },
];

function Slide13b_Overview() {
  return (
    <Slide section="USE CASES · OVERVIEW">
      <Content>
        <div style={{marginBottom: 40}}>
          <Eyebrow>// USE CASES · SUMMARY</Eyebrow>
          <Title size={84} style={{marginTop: 16}}>
            Six use cases. <span style={{color: GOLD}}>One platform.</span>
          </Title>
        </div>

        <div style={{
          flex: 1, display: "flex", flexDirection: "column",
          justifyContent: "space-around",
        }}>
          {OVERVIEW_ROWS.map(row => (
            <div key={row.n} style={{
              display: "flex", alignItems: "center", gap: 32,
              paddingBottom: 18,
              borderBottom: `1px solid ${DK_BORDER_SOFT}`,
            }}>
              <div style={{
                fontSize: 56, fontWeight: 700, color: GOLD, lineHeight: 1,
                fontVariantNumeric: "tabular-nums", letterSpacing: "-0.04em",
                minWidth: 88,
              }}>
                0{row.n}
              </div>
              <div style={{
                fontSize: 30, fontWeight: 700, color: DK_FG,
                letterSpacing: "0.06em", textTransform: "uppercase",
                whiteSpace: "nowrap",
              }}>
                {row.name}
              </div>
              <div style={{
                flex: 1, height: 1, background: DK_BORDER,
                opacity: 0.5,
              }}/>
              <div style={{
                fontSize: 26, color: DK_FG_MUTED, lineHeight: 1.3,
                textAlign: "right",
              }}>
                {row.outcome}
              </div>
            </div>
          ))}
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 13 · OCO ──────────────────────────────────────────────
function Slide14_OCO() {
  return <UseCaseSlide
    caseNo={1}
    motif={MOTIF_OCO}
    titleWord="Offensive Cyber Operations"
    subtitle="Operators who need a safe test bench — behind the firewall"
    problem={{
      applies: "OCO · TOOL DEV · PENTEST",
      headline: "Operators need a place to test complex tools safely",
      cost: "COST · HOURS PER TOOL",
      items: [
        "Complex software is hard or time-consuming to set up",
        "Person-hours spent on lab plumbing — not on stakeholder value",
        "On-prem requirement to protect <span style='color:#c5ae4f'>equities</span>",
        "Harder to test ⇒ more <span style='color:#8f1d34'>YOLO</span> ⇒ operational risk",
      ],
    }}
    solution={{
      headline: "Ship tools with their test range built-in",
      outcome: "SPINUP · 2 COMMANDS",
      items: [
        "Every tool can ship with a Ludus range config for testing",
        "Operators spin up test envs with <code style='color:#c5ae4f'>2 commands</code>",
        "On-prem, behind-the-firewall deployment by default",
        "Range state is reproducible — no \"works on my box\"",
      ],
    }}
  />;
}

// ─── SLIDE 14 · RED TEAMS ────────────────────────────────────────
function Slide15_RedTeam() {
  return <UseCaseSlide
    caseNo={2}
    motif={MOTIF_REDTEAM}
    titleWord="Red Team Infrastructure"
    subtitle="Every assessment, without hand-rolling a new stack"
    problem={{
      applies: "RED TEAM · CONSULTING",
      headline: "RT infrastructure is complex and manually deployed",
      cost: "COST · DAYS PER CUSTOMER",
      items: [
        "Every engagement needs separate, isolated infrastructure",
        "Team-hours burned on setup — not on assessing customers",
        "Cloud tools expose sensitive customer data to the provider",
        "KRBTGT hashes on AWS disks? <span style='color:#8f1d34'>No, thanks.</span>",
        "No test env ⇒ assessors use local VMs or none at all",
      ],
    }}
    solution={{
      headline: "A \"range\" for every engagement",
      outcome: "OUTCOME · ONE RANGE PER CUSTOMER",
      items: [
        "Dedicated red-team infrastructure range per customer",
        "Cloud connectors for AWS / Azure / GCP / redirectors",
        "Customer data stays on hardware <span style='color:#c5ae4f'>you own</span>",
        "Less setup ⇒ more assessing ⇒ more customer value",
        "<strong>OPSEC-safe</strong> testing mode available",
      ],
    }}
  />;
}

Object.assign(window, {
  Slide09_Disadvantages, Slide10_Asymmetry, Slide11_Goal, Slide12_YAML,
  Slide13_Roles, Slide13b_Overview, Slide14_OCO, Slide15_RedTeam, UseCaseSlide,
  MOTIF_AI, MOTIF_THREATEM, MOTIF_VULN, MOTIF_INTEL,
});
