// slides-opening.jsx — Slides 1 through 7 (cover, team, problem, market)

// ─── SLIDE 01 · COVER ───────────────────────────────────────────────
function Slide01_Cover() {
  return (
    <Slide section="COVER" chromeless>
      {/* Cyber grid backdrop */}
      <div style={{position:"absolute", inset:0, background: DK_BG}}/>
      <TechGrid spacing={60} color="rgba(197,174,79,0.09)" fade/>
      <Scanlines opacity={0.05}/>

      {/* Diagonal "deploy scan" band */}
      <div style={{
        position:"absolute", inset:0, pointerEvents:"none", zIndex: 2,
        background: `linear-gradient(115deg, transparent 40%, rgba(197,174,79,0.07) 50%, transparent 60%)`,
      }}/>

      {/* Frame brackets */}
      <Brackets size={36} color={GOLD} thickness={1.5} inset={56}/>

      {/* Top tech label */}
      <div style={{
        position:"absolute", top: 110, left: 120, zIndex: 10,
        fontSize: 12, letterSpacing: "0.35em", color: GOLD,
      }}>
        // BAD SECTOR LABS
      </div>
      <div style={{
        position:"absolute", top: 110, right: 120, zIndex: 10,
        fontSize: 12, letterSpacing: "0.35em", color: GOLD, display:"flex", alignItems:"center", gap: 10,
      }}>
        <span style={{
          width: 8, height: 8, borderRadius: "50%", background: GOLD,
          boxShadow: `0 0 12px ${GOLD}`,
        }}/>
        <span>OPERATIONAL</span>
      </div>

      {/* Center — wordmark */}
      <div style={{
        position:"absolute", inset:0, zIndex: 15,
        display:"flex", alignItems:"center", justifyContent:"center",
      }}>
        <img src="assets/ludus-logo-full-white.svg" alt="LUDUS"
             style={{height: 300, width:"auto", filter:`drop-shadow(0 0 72px rgba(197,174,79,0.4))`}}/>
      </div>

      {/* Bottom strip */}
      <div style={{
        position:"absolute", bottom: 110, left: 0, right: 0, zIndex: 10,
        display:"flex", justifyContent:"center",
        fontSize: 12, letterSpacing: "0.3em", color: DK_FG_MUTED, textTransform:"uppercase",
      }}>
        <span>BAD SECTOR LABS · 2026</span>
      </div>
    </Slide>
  );
}

// ─── SLIDE 02 · WHOAMI ──────────────────────────────────────────────
function PersonCard({ imgSrc, idTag, name, role, prev, focal = "center 20%" }) {
  return (
    <div style={{
      position: "relative",
      border: `1px solid ${DK_BORDER}`,
      background: "rgba(25,28,34,0.5)",
      padding: 0,
      display:"flex", flexDirection:"column",
    }}>
      <Brackets size={14} color={GOLD} inset={-1} thickness={1.5}/>

      {/* Portrait */}
      <div style={{
        height: 460, overflow:"hidden", position:"relative",
        borderBottom: `1px solid ${DK_BORDER}`,
      }}>
        {imgSrc ? (
          <img src={imgSrc} alt={name} style={{
            width:"100%", height:"100%", objectFit:"cover", objectPosition: focal,
            filter: "grayscale(0.35) contrast(1.05)",
          }}/>
        ) : (
          <div style={{
            width:"100%", height:"100%",
            display:"flex", alignItems:"center", justifyContent:"center",
            background: "repeating-linear-gradient(45deg, rgba(25,28,34,0.6) 0 8px, rgba(25,28,34,0.9) 8px 16px)",
            color: DK_FG_MUTED, fontSize: 12, letterSpacing:"0.3em",
          }}>PHOTO · PLACEHOLDER</div>
        )}
        {/* scanline over photo */}
        <div style={{
          position:"absolute", inset:0, pointerEvents:"none",
          background: "repeating-linear-gradient(180deg, rgba(0,0,0,0.15) 0 1px, transparent 1px 3px)",
        }}/>
        {/* gold HUD ring */}
        <div style={{
          position:"absolute", inset:8, pointerEvents:"none",
          border:`1px solid ${GOLD}`, opacity: 0.4,
        }}/>
        {/* ID label top-left */}
        <div style={{
          position:"absolute", top: 18, left: 18,
          fontSize: 10, letterSpacing:"0.3em", color: GOLD,
          background: "rgba(9,10,13,0.7)",
          padding: "4px 10px",
          border: `1px solid ${GOLD}`,
        }}>
          @{idTag}
        </div>
      </div>

      {/* Info */}
      <div style={{padding: "28px 32px 34px", flex: 1, display:"flex", flexDirection:"column"}}>
        <div style={{fontSize: 30, fontWeight: 700, letterSpacing:"-0.01em", lineHeight: 1.1}}>
          {name}
        </div>
        <div style={{height: 1, background: DK_BORDER, margin: "18px 0"}}/>
        <div style={{fontSize: 17, color: DK_FG, lineHeight: 1.4}}>
          {role}
        </div>
        <div style={{marginTop: 20}}>
          <div style={{fontSize: 10, letterSpacing: "0.3em", color: DK_FG_MUTED, marginBottom: 10}}>
            PREVIOUSLY
          </div>
          {prev.map((p,i)=>(
            <div key={i} style={{
              fontSize: 15, color: DK_FG_MUTED, lineHeight: 1.55,
              display:"flex", alignItems:"flex-start", gap: 10,
            }}>
              <span style={{color: GOLD, paddingTop: 2}}>▸</span>
              <span>{p}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Slide02_Whoami() {
  return (
    <Slide section="TEAM">
      <Content>
        <div style={{marginBottom: 40}}>
          <Eyebrow>// WHOAMI</Eyebrow>
          <Title style={{marginTop: 16}}>The operators behind Ludus</Title>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap: 28, flex:1, minHeight: 0}}>
          <PersonCard
            imgSrc="assets/erik.jpg"
            idTag="kernel sanders"
            name="Erik Hunstad"
            role="Founder · Bad Sector Labs"
            prev={["CTO · Sixgen", "U.S. Department of Defense"]}
            focal="center 48%"
          />
          <PersonCard
            imgSrc="assets/alberto.png"
            idTag="ar0d"
            name="Alberto Rodriguez"
            role="Partner · Bad Sector Labs"
            prev={["Fortune 500 Security Org", "U.S. Department of Defense"]}
          />
          <PersonCard
            imgSrc="assets/suibhne.png"
            idTag="sivna"
            name="Suibhne O'Foighil"
            role="Founding Engineer · Bad Sector Labs"
            prev={["Microsoft", "Various Startups"]}
          />
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 03 · HAS THIS BEEN YOU? ───────────────────────────────────
// ─── SHARED · OPERATOR'S NIGHT HUD ─────────────────────────────────
// The 4-beat problem sequence (slides 3-6) shares a narrative chrome:
// • clock stamp (top-right) advancing through the night
// • RISK meter (top, under chrome) rising from LOW → CRITICAL
// • consistent BEAT label ("BEAT 01/04") for continuity

function NightHUD({ beat, clock, t, risk, riskLabel, riskColor = CRIMSON }) {
  // risk: 0..1
  const segs = 16;
  const lit = Math.round(segs * risk);
  return (
    <div style={{
      position:"absolute", top: 64, left: 0, right: 0,
      display:"flex", alignItems:"center", justifyContent:"space-between",
      padding: "0 44px", height: 36,
      borderBottom: `1px solid ${DK_BORDER}`,
      background: "rgba(9,10,13,0.85)",
      pointerEvents: "none", zIndex: 20,
    }}>
      <div style={{display:"flex", alignItems:"center", gap: 18, fontSize: 11, letterSpacing:"0.3em"}}>
        <span style={{color: GOLD, fontWeight: 700}}>BEAT {beat}/05</span>
        <span style={{color: DK_BORDER}}>│</span>
        <span style={{color: DK_FG_MUTED}}>OPERATOR'S NIGHT</span>
      </div>

      <div style={{display:"flex", alignItems:"center", gap: 14, fontSize: 11, letterSpacing:"0.3em"}}>
        <span style={{color: DK_FG_MUTED}}>RISK</span>
        <div style={{display:"flex", gap: 2, alignItems:"center"}}>
          {Array.from({length: segs}, (_, i) => {
            const on = i < lit;
            const c = i < 5 ? "#7a8a6a" : i < 10 ? GOLD : CRIMSON;
            return (
              <span key={i} style={{
                width: 8, height: 12,
                background: on ? c : "rgba(255,255,255,0.06)",
                boxShadow: on ? `0 0 6px ${c}80` : "none",
              }}/>
            );
          })}
        </div>
        <span style={{color: riskColor, fontWeight: 700}}>{riskLabel}</span>
      </div>

      <div style={{display:"flex", alignItems:"center", gap: 18, fontSize: 11, letterSpacing:"0.3em"}}>
        <span style={{color: DK_FG_MUTED}}>T+ {t}</span>
        <span style={{color: DK_BORDER}}>│</span>
        <span style={{
          fontFamily:"'JetBrains Mono', monospace", fontSize: 20, fontWeight: 700,
          color: GOLD, letterSpacing: "0.15em",
        }}>{clock}</span>
      </div>
    </div>
  );
}

// ─── SLIDE 03 · HAS THIS BEEN YOU? ───────────────────────────────────
// Beat 1 — the setup. One question, one image. No sales copy.
function Slide03_HasThisBeenYou() {
  return (
    <Slide section="THE PROBLEM" hideBrackets>
      <NightHUD beat="01" clock="02:47" t="00:00" risk={0.15} riskLabel="LOW" riskColor={GOLD}/>
      <Content style={{padding: 0}}>
        <div style={{position:"relative", flex: 1, overflow:"hidden"}}>
          {/* Full-bleed hero image */}
          <img src="assets/hacker-scene.png" alt="Late-night lab builder"
               style={{
                 position:"absolute", inset: 0,
                 width:"100%", height:"100%", objectFit:"contain", objectPosition:"right center",
                 filter:"contrast(1.08) saturate(0.95) brightness(0.85)",
               }}/>
          {/* Scanlines */}
          <div style={{
            position:"absolute", inset:0,
            background: "repeating-linear-gradient(180deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px)",
          }}/>
          {/* Left-side vignette for text legibility */}
          <div style={{
            position:"absolute", inset:0,
            background: `linear-gradient(90deg, ${DK_BG} 0%, rgba(9,10,13,0.85) 30%, transparent 62%)`,
          }}/>
          {/* Bottom vignette */}
          <div style={{
            position:"absolute", inset:0,
            background: `linear-gradient(0deg, ${DK_BG} 0%, transparent 22%)`,
          }}/>

          {/* The question — centered, hero type */}
          <div style={{
            position:"absolute", left: 120, top: "50%",
            transform:"translateY(-50%)", maxWidth: 760,
          }}>
            <div style={{
              fontSize: 13, letterSpacing:"0.4em", color: GOLD,
              display:"flex", alignItems:"center", gap: 14, marginBottom: 36,
            }}>
              <span style={{width: 36, height: 1, background: GOLD}}/>
              <span>SETUP</span>
            </div>
            <div style={{
              fontSize: 112, fontWeight: 700, color: DK_FG,
              lineHeight: 0.95, letterSpacing:"-0.02em",
              fontFamily:"'JetBrains Mono', monospace",
            }}>
              Has this<br/>been <span style={{color: GOLD}}>you?</span>
              <span style={{color: GOLD, opacity: 0.7}}>_</span>
            </div>
          </div>

          {/* Subject stamp — bottom right of image */}
          <div style={{
            position:"absolute", bottom: 48, right: 64,
            border:`1px solid ${GOLD}`, padding:"10px 18px",
            fontSize: 11, letterSpacing:"0.3em", color: GOLD,
            background:"rgba(9,10,13,0.72)",
            backdropFilter:"blur(4px)",
          }}>
            SUBJ · OPERATOR
          </div>
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 04 · "THIS IS PERFECT!" ───────────────────────────────────
// Beat 2 — the mark bites. A PoC repo for a fresh CVE, one click from clone.
function Slide04_ThisIsPerfect() {
  return (
    <Slide section="THE PROBLEM" hideBrackets>
      <NightHUD beat="02" clock="03:02" t="15:00" risk={0.38} riskLabel="ELEVATED" riskColor={GOLD}/>
      <Content>
        {/* Spacer for NightHUD */}
        <div style={{height: 40}}/>

        <div style={{display:"flex", alignItems:"baseline", gap: 24, marginTop: 8}}>
          <div style={{
            fontFamily:"'JetBrains Mono', monospace",
            fontSize: 112, fontWeight: 700, color: DK_FG,
            lineHeight: 1, letterSpacing:"-0.02em",
          }}>
            "<span style={{color: GOLD}}>This is perfect!</span>"
          </div>
        </div>
        <div style={{
          marginTop: 14, fontSize: 22, color: DK_FG_MUTED, letterSpacing:"0.02em",
        }}>
          A fresh PoC drops for a CVE you're actively hunting.
          <span style={{color: GOLD}}> One </span><code style={{color: GOLD, background:"rgba(197,174,79,0.08)", padding:"2px 8px", border:`1px solid ${DK_BORDER}`}}>git clone</code>
          <span style={{color: GOLD}}> away.</span>
        </div>

        {/* Stage: the repo screenshot, framed like an evidence photo */}
        <div style={{flex: 1, display:"flex", justifyContent:"center", alignItems:"center", marginTop: 36, position:"relative"}}>
          <div style={{
            position:"relative",
            border:`1px solid ${GOLD}`,
            boxShadow:`0 30px 80px rgba(0,0,0,0.55), 0 0 60px rgba(197,174,79,0.12)`,
            maxWidth: 1280, display:"flex",
          }}>
            <Brackets size={18} color={GOLD} inset={-1} thickness={1.5}/>
            <img src="assets/repo.png" alt="Fresh PoC repo on GitHub"
                 style={{width:"100%", display:"block"}}/>
          </div>
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 05 · DID YOU JUST YOLO *THAT* BINARY? ────────────────────
// Beat 3 — the realization. WannaCry as the cautionary specimen, news clippings as context.
function Slide05_YoloBinary() {
  const clips = [
    { src:"assets/news-google-tag.png"  },
    { src:"assets/news-nk.png"          },
    { src:"assets/news-darkreading.png" },
  ];
  return (
    <Slide section="THE PROBLEM" hideBrackets>
      <NightHUD beat="03" clock="03:14" t="27:00" risk={0.65} riskLabel="HIGH"/>
      <Content>
        <div style={{height: 40}}/>

        {/* Hero line */}
        <div style={{marginTop: 4, textAlign:"center"}}>
          <div style={{
            fontSize: 11, letterSpacing:"0.4em", color: DK_FG_MUTED,
            display:"flex", alignItems:"center", justifyContent:"center", gap: 14,
          }}>
            <span style={{width: 60, height: 1, background: DK_BORDER}}/>
            <span>REALIZATION</span>
            <span style={{width: 60, height: 1, background: DK_BORDER}}/>
          </div>
          <div style={{
            fontFamily:"'JetBrains Mono', monospace",
            fontSize: 80, fontWeight: 700, color: DK_FG,
            lineHeight: 1.05, letterSpacing:"-0.02em",
            marginTop: 18,
          }}>
            Did you just <span style={{color: GOLD}}>YOLO</span>{" "}
            <span style={{color: DK_FG_MUTED, fontStyle:"italic", fontWeight: 400}}>that</span> binary?
          </div>
        </div>

        {/* Evidence row: WannaCry specimen (left) linked to news context (right) */}
        <div style={{
          flex: 1, marginTop: 32, minHeight: 0,
          display:"grid", gridTemplateColumns:"1.75fr 1fr", gap: 28,
        }}>
          {/* WannaCry — the specimen */}
          <div style={{
            position:"relative", border:`1px solid ${CRIMSON}`, background:"#000",
            display:"flex", flexDirection:"column", overflow:"hidden",
          }}>
            <Brackets size={14} color={CRIMSON} inset={-1} thickness={1.5}/>
            <div style={{
              padding:"10px 18px", borderBottom:`1px solid ${CRIMSON}`,
              background:"rgba(143,29,52,0.18)",
              fontSize: 10, letterSpacing:"0.3em", color: CRIMSON, fontWeight: 700,
              display:"flex", justifyContent:"space-between",
            }}>
              <span>SPECIMEN · WANNACRY · MAY 2017</span>
              <span style={{color: DK_FG_MUTED, fontWeight: 500}}>200K+ HOSTS</span>
            </div>
            <div style={{
              flex: 1, minHeight: 0,
              display:"flex", alignItems:"center", justifyContent:"center",
              padding:"20px 28px", position:"relative",
            }}>
              <img src="assets/wannacry.png" alt="WannaCry ransomware"
                style={{
                  width:"100%", height:"100%", objectFit:"contain",
                  filter:"contrast(1.08) saturate(1.05) drop-shadow(0 24px 40px rgba(0,0,0,0.6))",
                }}/>
              <div style={{
                position:"absolute", inset:0, pointerEvents:"none",
                background:"repeating-linear-gradient(180deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px)",
              }}/>
            </div>
          </div>

          {/* News clippings — the context */}
          <div style={{display:"flex", flexDirection:"column", gap: 18, minWidth: 0, minHeight: 0, overflow:"hidden"}}>
            <div style={{
              fontSize: 11, letterSpacing:"0.3em", color: GOLD,
              display:"flex", alignItems:"center", gap: 12,
            }}>
              <span style={{width: 24, height: 1, background: GOLD}}/>
              <span>AND IT'S AIMED AT YOU</span>
            </div>
            <div style={{flex: 1, display:"flex", flexDirection:"column", gap: 14}}>
              {clips.map((s, i) => (
                <div key={i} style={{
                  flex: 1, minHeight: 0,
                  border:`1px solid ${DK_BORDER}`, background:"#fff",
                  display:"flex", alignItems:"center", justifyContent:"center",
                  padding:"12px 14px", overflow:"hidden", position:"relative",
                }}>
                  <img src={s.src} alt=""
                       style={{width:"100%", height:"100%", objectFit:"contain", display:"block"}}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 06 · RECEIPTS ─────────────────────────────────────────────
// Beat 4 — the data. Three stats in a triangle: risk is real → growing → aimed at you.
function Slide06_Receipts() {
  return (
    <Slide section="THE PROBLEM">
      <Content>
        <div style={{marginTop: 4}}>
          <NumberedEyebrow>RECEIPTS</NumberedEyebrow>
          <Title style={{marginTop: 16}}>
            About <span style={{color: GOLD}}>that</span> binary…
          </Title>
        </div>

        {/* Triangle of stats — hero in the center, two supporting on the sides */}
        <div style={{
          flex: 1, marginTop: 40,
          display:"grid", gridTemplateColumns:"1fr 1.3fr 1fr", gap: 28,
          alignItems:"stretch",
        }}>
          {/* Stat 1 — supporting (left, lower visual weight) */}
          <div style={{
            border:`1px solid ${DK_BORDER}`, padding:"36px 32px",
            display:"flex", flexDirection:"column", gap: 18,
            background:"rgba(20,22,28,0.5)", position:"relative",
          }}>
            <div style={{fontSize: 11, letterSpacing:"0.3em", color: GOLD,
                         display:"flex", alignItems:"center", gap: 10}}>
              <span style={{width: 18, height: 1, background: GOLD}}/>
              <span>GROWING</span>
            </div>
            <div style={{
              fontSize: 96, fontWeight: 700, color: DK_FG,
              lineHeight: 0.9, letterSpacing:"-0.03em",
              fontFamily:"'JetBrains Mono', monospace",
            }}>
              <span style={{color: CRIMSON}}>188</span><span style={{fontSize: 56, color: CRIMSON}}>%</span>
            </div>
            <div style={{fontSize: 18, color: DK_FG, lineHeight: 1.35, fontWeight: 600}}>
              YoY increase in malicious open-source packages
            </div>
            <div style={{fontSize: 13, color: DK_FG_MUTED, lineHeight: 1.45, marginTop:"auto"}}>
              Sonatype logged <b style={{color: DK_FG}}>16,279</b> in Q2 2025 alone — <b style={{color: DK_FG}}>845,204</b> total since 2017.
            </div>
          </div>

          {/* Stat 2 — HERO (center, dominant) */}
          <div style={{
            border:`2px solid ${GOLD}`, padding:"36px 36px",
            display:"flex", flexDirection:"column", gap: 22,
            background:"linear-gradient(180deg, rgba(197,174,79,0.10), rgba(197,174,79,0.02))",
            position:"relative",
            boxShadow:"0 0 60px rgba(197,174,79,0.14)",
          }}>
            <Brackets size={14} color={GOLD} inset={-1} thickness={1.5}/>
            <div style={{fontSize: 11, letterSpacing:"0.3em", color: GOLD,
                         display:"flex", alignItems:"center", gap: 10}}>
              <span style={{width: 18, height: 1, background: GOLD}}/>
              <span>THE HEADLINE</span>
            </div>
            <div style={{
              fontSize: 168, fontWeight: 700, color: GOLD,
              lineHeight: 0.88, letterSpacing:"-0.04em",
              fontFamily:"'JetBrains Mono', monospace",
            }}>
              1<span style={{color: DK_FG_MUTED, fontSize: 120}}> in </span>10
            </div>
            <div style={{fontSize: 26, color: DK_FG, lineHeight: 1.25, fontWeight: 600}}>
              PoC exploits on GitHub are <span style={{color: CRIMSON}}>malicious</span>.
            </div>
            <div style={{fontSize: 13, color: DK_FG_MUTED, lineHeight: 1.45, marginTop:"auto"}}>
              Leiden University analyzed <b style={{color: DK_FG}}>47,313</b> PoC repos —
              <b style={{color: DK_FG}}> 10.3%</b> contained Cobalt Strike beacons,
              infostealers, RATs, or hardcoded reverse shells.
            </div>
          </div>

          {/* Stat 3 — supporting (right) */}
          <div style={{
            border:`1px solid ${CRIMSON}`, padding:"36px 32px",
            display:"flex", flexDirection:"column", gap: 18,
            background:"rgba(143,29,52,0.08)", position:"relative",
          }}>
            <div style={{fontSize: 11, letterSpacing:"0.3em", color: CRIMSON,
                         display:"flex", alignItems:"center", gap: 10}}>
              <span style={{width: 18, height: 1, background: CRIMSON}}/>
              <span>TARGETED</span>
            </div>
            <div style={{
              fontSize: 60, fontWeight: 700, color: DK_FG,
              lineHeight: 0.95, letterSpacing:"-0.02em",
              fontFamily:"'JetBrains Mono', monospace",
            }}>
              Polished<br/><span style={{color: CRIMSON}}>bait.</span>
            </div>
            <div style={{fontSize: 14, color: DK_FG, lineHeight: 1.5}}>
              Late-2025 <span style={{color: GOLD, fontWeight: 700}}>Webrat</span> campaign
              used AI-generated READMEs on fake PoC repos to target
              "inexperienced security professionals and students."
            </div>
            <div style={{fontSize: 13, color: DK_FG_MUTED, lineHeight: 1.45, marginTop:"auto",
                         borderTop:`1px solid ${CRIMSON}40`, paddingTop: 12}}>
              Payload: backdoor + infostealer — creds, wallets, webcam, keylog.
            </div>
          </div>
        </div>

        {/* Kicker + sources */}
        <div style={{
          marginTop: 20, padding:"14px 24px",
          border:`1px dashed ${GOLD}`, background: "rgba(197,174,79,0.05)",
          display:"flex", alignItems:"center", justifyContent:"space-between", gap: 24,
          fontSize: 20, color: DK_FG, fontStyle:"italic",
        }}>
          <span>…and no way to tell which is which.</span>
          <span style={{
            fontSize: 10, letterSpacing:"0.25em", color: DK_FG_MUTED,
            fontStyle:"normal", textTransform:"uppercase", fontWeight: 500,
          }}>
            Sources · Leiden / USENIX WOOT '25 · Sonatype Q2 '25 · Kaspersky Dec '25
          </span>
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 07 · DID *YOU* JUST YOLO THAT BINARY? ────────────────────
// Beat 5 — the outcome. The pronoun flips. The inbox ping is the receipt.
function Slide07_DidYouYolo() {
  return (
    <Slide section="THE PROBLEM" hideBrackets>
      <NightHUD beat="04" clock="04:29" t="01:42:00" risk={1.0} riskLabel="CRITICAL"/>
      <Content>
        <div style={{height: 40}}/>

        {/* The punchline — pronoun flipped */}
        <div style={{marginTop: 4, display:"flex", alignItems:"baseline", justifyContent:"space-between", gap: 40}}>
          <div style={{
            fontFamily:"'JetBrains Mono', monospace",
            fontSize: 96, fontWeight: 700, color: DK_FG,
            lineHeight: 1.02, letterSpacing:"-0.02em",
          }}>
            Did <span style={{
              color: CRIMSON,
              textDecoration: "underline",
              textDecorationThickness: 6,
              textUnderlineOffset: 12,
            }}>YOU</span> just YOLO that binary?
          </div>
          <div style={{
            fontSize: 112, lineHeight: 1,
            filter:"drop-shadow(0 0 24px rgba(143,29,52,0.5))",
          }}>😱</div>
        </div>

        {/* The outcome — the client email, framed */}
        <div style={{
          flex: 1, marginTop: 28, position:"relative",
          border:`1px solid ${CRIMSON}`, background:"#fff",
          display:"flex", flexDirection:"column", overflow:"hidden",
        }}>
          <Brackets size={18} color={CRIMSON} inset={-1} thickness={1.5}/>

          <div style={{
            display:"flex", justifyContent:"space-between", alignItems:"center",
            padding:"12px 24px", borderBottom:`1px solid ${CRIMSON}`,
            background:"rgba(143,29,52,0.18)",
            fontSize: 11, letterSpacing:"0.3em", color: CRIMSON, fontWeight: 700,
          }}>
            <span>INBOX · 04:29 MON · FROM THE CLIENT</span>
            <span style={{color: DK_FG_MUTED, letterSpacing:"0.25em", fontWeight: 500}}>
              SUBJ: NETWORK OUTAGE — CALL ME
            </span>
          </div>

          <div style={{
            flex: 1, position:"relative",
            display:"flex", alignItems:"center", justifyContent:"center",
            padding:"28px 48px", background:"#fff",
          }}>
            <img src="assets/angry-joe-email.png" alt="Email from angry client about network outage"
              style={{
                maxWidth:"100%", maxHeight:"100%", objectFit:"contain",
                boxShadow:"0 24px 60px rgba(0,0,0,0.25)",
              }}
            />
          </div>
        </div>

      </Content>
    </Slide>
  );
}

// ─── SLIDE 07 · LAB/RANGE AUTOMATION TOOLS — THE LANDSCAPE ────────
function Slide08_Landscape() {
  const commercial = [
    { name: "Immersive Labs", sub: "formerly Snap Labs" },
    { name: "SimSpace", sub: "mostly DoD" },
    { name: "Hack the Box", sub: "" },
    { name: "Try Hack Me", sub: "" },
    { name: "Pentester Lab", sub: "" },
  ];
  const openSource = [
    { name: "Detection Lab", sub: "archived 2023-01-01", dead: true },
    { name: "AutomatedLab", sub: "PowerShell / HyperV only" },
    { name: "Game of AD (GOAD)", sub: "red-team focused" },
    { name: "ADLab", sub: "vagrant / ansible" },
    { name: "AD-Lab", sub: "PowerShell" },
  ];
  // Operator scorecard: does the camp meet this need?
  const needs = ["Realistic", "Extendable", "On-prem", "Multi-user"];
  const commercialScore = [true,  false, false, true ]; // cloud-first, closed
  const ossScore        = [false, true,  true,  false]; // narrow, single-user

  const Entry = ({name, sub, dead}) => (
    <div style={{
      display:"flex", flexDirection:"column", justifyContent:"center", gap: 4,
      flex: 1,
      padding: "14px 22px",
      borderBottom: `1px solid ${DK_BORDER_SOFT}`,
      opacity: dead ? 0.55 : 1,
      position:"relative",
    }}>
      <div style={{display:"flex", alignItems:"center", gap: 12}}>
        <span style={{color: GOLD, fontSize: 11}}>▸</span>
        <span style={{fontSize: 20, color: DK_FG, textDecoration: dead ? "line-through" : "none"}}>
          {name}
        </span>
      </div>
      {sub && <div style={{fontSize: 12, letterSpacing:"0.12em", color: DK_FG_MUTED, paddingLeft: 24}}>
        {sub}
      </div>}
    </div>
  );

  const Scorecard = ({scores}) => (
    <div style={{
      marginTop: "auto",
      borderTop: `1px solid ${DK_BORDER}`,
      background: "rgba(9,10,13,0.6)",
      padding: "18px 22px",
    }}>
      <div style={{fontSize: 10, letterSpacing:"0.3em", color: DK_FG_MUTED, marginBottom: 12}}>
        OPERATOR NEEDS · MET?
      </div>
      <div style={{display:"grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8}}>
        {needs.map((n, i) => (
          <div key={n} style={{
            display:"flex", flexDirection:"column", gap: 6, alignItems:"flex-start",
          }}>
            <div style={{fontSize: 12, color: scores[i] ? DK_FG : CRIMSON, letterSpacing:"0.05em"}}>
              {n}
            </div>
            <div style={{
              fontSize: 18, fontWeight: 700,
              color: scores[i] ? GOLD : CRIMSON,
            }}>
              {scores[i] ? "✓" : "✗"}
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  return (
    <Slide section="THE MARKET">
      <Content>
        <NumberedEyebrow>LANDSCAPE</NumberedEyebrow>
        <Title style={{marginTop: 16}}>Lab & range automation — the field today</Title>
        <div style={{fontSize: TS.body, color: DK_FG_MUTED, marginTop: 14, maxWidth: 1100}}>
          Two camps. Neither meets all four needs operators actually have.
        </div>

        {/* Needs strip — sets up the vocabulary the scorecards score against */}
        <div style={{
          display:"flex", alignItems:"center", gap: 18,
          marginTop: 22, padding: "14px 22px",
          border: `1px solid ${DK_BORDER}`,
          background: "rgba(9,10,13,0.6)",
        }}>
          <div style={{fontSize: 10, letterSpacing:"0.3em", color: GOLD, whiteSpace:"nowrap"}}>
            // FOUR NEEDS
          </div>
          <div style={{flex: 1, height: 1, background: DK_BORDER_SOFT}}/>
          {needs.map((n, i) => (
            <React.Fragment key={n}>
              <div style={{fontSize: 14, letterSpacing:"0.08em", color: DK_FG}}>{n}</div>
              {i < needs.length - 1 && (
                <div style={{fontSize: 11, color: DK_FG_MUTED}}>·</div>
              )}
            </React.Fragment>
          ))}
        </div>

        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 36, marginTop: 22, flex: 1, minHeight: 0}}>
          {/* Commercial */}
          <div style={{position:"relative", border:`1px solid ${DK_BORDER}`, padding: "28px 0 0", display:"flex", flexDirection:"column"}}>
            <Brackets size={16} color={GOLD} inset={-1} thickness={1.5}/>
            <div style={{padding: "0 30px 22px", borderBottom: `1px solid ${DK_BORDER}`}}>
              <div style={{fontSize: 13, letterSpacing:"0.3em", color: GOLD}}>CATEGORY A</div>
              <div style={{fontSize: 36, fontWeight: 700, marginTop: 6}}>Commercial</div>
              <div style={{fontSize: 14, color: DK_FG_MUTED, marginTop: 4}}>SaaS, closed, per-seat billing</div>
            </div>
            <div style={{flex: 1, display:"flex", flexDirection:"column"}}>{commercial.map((c,i)=><Entry key={i} {...c}/>)}</div>
            <Scorecard scores={commercialScore}/>
          </div>

          {/* Open Source */}
          <div style={{position:"relative", border:`1px solid ${DK_BORDER}`, padding: "28px 0 0", display:"flex", flexDirection:"column"}}>
            <Brackets size={16} color={GOLD} inset={-1} thickness={1.5}/>
            <div style={{padding: "0 30px 22px", borderBottom: `1px solid ${DK_BORDER}`}}>
              <div style={{fontSize: 13, letterSpacing:"0.3em", color: GOLD}}>CATEGORY B</div>
              <div style={{fontSize: 36, fontWeight: 700, marginTop: 6}}>Open Source</div>
              <div style={{fontSize: 14, color: DK_FG_MUTED, marginTop: 4}}>Community-maintained, narrow scope</div>
            </div>
            <div style={{flex: 1, display:"flex", flexDirection:"column"}}>{openSource.map((c,i)=><Entry key={i} {...c}/>)}</div>
            <Scorecard scores={ossScore}/>
          </div>
        </div>
      </Content>
    </Slide>
  );
}

Object.assign(window, {
  Slide01_Cover, Slide02_Whoami, Slide03_HasThisBeenYou,
  Slide04_ThisIsPerfect, Slide05_YoloBinary, Slide06_Receipts,
  Slide07_DidYouYolo, Slide08_Landscape,
});
