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

// ─── SLIDE 01 · COVER ───────────────────────────────────────────────
// Boot sequence: HUD layers power on first, reticle locks, wordmark
// materializes, labels slide in, bottom strip settles, status LED ignites.
// Runs once at page load (deck-stage keeps slides mounted, so re-visits
// show the settled state). prefers-reduced-motion kills all durations
// via the global rule in index.html.
function Slide01_Cover() {
  return (
    <Slide section="COVER" chromeless>
      {/* Cyber grid backdrop */}
      <div style={{position:"absolute", inset:0, background: DK_BG}}/>
      <div style={{
        position:"absolute", inset:0, pointerEvents:"none", zIndex: 1,
        animation: "ludus-boot-fade 500ms ease-out 0ms both",
      }}>
        <TechGrid spacing={60} color="rgba(197,174,79,0.09)" fade/>
      </div>
      <div style={{
        position:"absolute", inset:0, pointerEvents:"none", zIndex: 2,
        animation: "ludus-boot-fade 500ms ease-out 100ms both",
      }}>
        <Scanlines opacity={0.05}/>
      </div>

      {/* 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%)`,
        animation: "ludus-boot-fade 500ms ease-out 100ms both",
      }}/>

      {/* Frame brackets — reticle lock-on */}
      <div style={{
        position:"absolute", inset:0, pointerEvents:"none", zIndex: 5,
        animation: "ludus-boot-lock-on 500ms ease-out 300ms both",
      }}>
        <Brackets size={36} color={GOLD} thickness={1.5} inset={56}/>
      </div>

      {/* Top tech label */}
      <div style={{
        position:"absolute", top: 110, left: 120, zIndex: 10,
        fontSize: 12, letterSpacing: "0.35em", color: GOLD,
        animation: "ludus-boot-slide-from-left 400ms ease-out 900ms both",
      }}>
        // 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,
        animation: "ludus-boot-slide-from-right 400ms ease-out 900ms both",
      }}>
        <span style={{
          width: 8, height: 8, borderRadius: "50%", background: GOLD,
          boxShadow: `0 0 12px ${GOLD}`,
          animation: "ludus-boot-dot 450ms ease-out 1250ms both",
        }}/>
        <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))`,
               animation: "ludus-boot-logo 700ms ease-out 500ms both",
             }}/>
      </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",
        animation: "ludus-boot-fade-up 400ms ease-out 1100ms both",
      }}>
        <span>BAD SECTOR LABS · 2026</span>
      </div>
    </Slide>
  );
}

// ─── SLIDE 02 · WHOAMI ──────────────────────────────────────────────
function PersonCard({ imgSrc, idTag, github, 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 — clickable when github handle is supplied */}
        <a
          href={github ? `https://github.com/${github}` : undefined}
          target={github ? "_blank" : undefined}
          rel={github ? "noopener noreferrer" : undefined}
          style={{
            position:"absolute", top: 18, left: 18,
            fontSize: 12, letterSpacing:"0.3em", color: GOLD, fontWeight: 700,
            background: "rgba(9,10,13,0.78)",
            padding: "5px 12px",
            border: `1px solid ${GOLD}`,
            textDecoration: "none",
            cursor: github ? "pointer" : "default",
          }}
        >
          @{idTag}
        </a>
      </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: 19, color: DK_FG, lineHeight: 1.4, fontWeight: 500}}>
          {role}
        </div>
        <div style={{marginTop: 20}}>
          <div style={{fontSize: 12, letterSpacing: "0.3em", color: DK_FG_MUTED, marginBottom: 10, fontWeight: 700}}>
            PREVIOUSLY
          </div>
          {prev.map((p,i)=>(
            <div key={i} style={{
              fontSize: 17, color: DK_FG, lineHeight: 1.55, fontWeight: 500,
              display:"flex", alignItems:"flex-start", gap: 10,
            }}>
              <span style={{color: GOLD, paddingTop: 2, fontWeight: 700}}>▸</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"
            github="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"
            github="ar0dd"
            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"
            github="suibhneofoighil"
            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/redteamer.png" alt="Operator at 02:47"
               style={{
                 position:"absolute", inset: 0,
                 width:"100%", height:"100%", objectFit:"contain", objectPosition:"right center",
                 filter:"contrast(1.08) saturate(0.95) brightness(0.95)",
               }}/>
          {/* 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 style={{padding: 0}}>
        <div style={{position:"relative", flex: 1, overflow:"hidden"}}>
          {/* Full-bleed hero image — same desk, 15 minutes later */}
          <img src="assets/repo-shot.png" alt="Fresh PoC repo on operator's monitor"
               style={{
                 position:"absolute", inset: 0,
                 width:"100%", height:"100%", objectFit:"contain", objectPosition:"right center",
                 filter:"contrast(1.08) saturate(0.95) brightness(0.95)",
               }}/>
          {/* 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%)`,
          }}/>

          {/* Hero text column — mirrors Slide 03 */}
          <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>THE BAIT</span>
            </div>
            <div style={{
              fontSize: 112, fontWeight: 700, color: DK_FG,
              lineHeight: 0.95, letterSpacing:"-0.02em",
              fontFamily:"'JetBrains Mono', monospace",
            }}>
              "<span style={{color: GOLD}}>This is<br/>perfect!</span>"
              <span style={{color: GOLD, opacity: 0.7}}>_</span>
            </div>
            <div style={{
              marginTop: 28, fontSize: 22, color: DK_FG_MUTED, letterSpacing:"0.02em",
            }}>
              A fresh PoC. A CVE you're 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>
          </div>

          {/* Subject stamp — escalates from SUBJ·OPERATOR on slide 03 */}
          <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 · BAIT
          </div>
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 05 · DID YOU JUST DETONATE *THAT* BINARY? ────────────────
// Beat 3 — the realization. WannaCry as the cautionary specimen, news clippings as context.
const NEWS_SANS = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
const NEWS_SERIF = `Georgia, "Times New Roman", serif`;

function NewsCard_GoogleTAG() {
  return (
    <div style={{
      flex: 1, minHeight: 0, background:"#fff", color:"#202124",
      fontFamily: NEWS_SANS, padding:"14px 22px",
      display:"grid", gridTemplateColumns:"1fr auto", gridTemplateRows:"auto 1fr auto",
      columnGap: 16, rowGap: 6, alignItems:"center",
    }}>
      <div style={{
        gridColumn:"1 / -1",
        fontSize: 9, letterSpacing:"0.14em", color:"#5f6368", fontWeight: 500,
        textTransform:"uppercase", borderBottom:"1px solid #e8eaed", paddingBottom: 6,
      }}>
        Threat Analysis Group
      </div>
      <div style={{
        fontSize: 22, lineHeight: 1.15, fontWeight: 500, color:"#202124",
        letterSpacing:"-0.01em", alignSelf:"center",
      }}>
        New campaign targeting security researchers
      </div>
      <div style={{
        fontSize: 10, color:"#5f6368", whiteSpace:"nowrap",
        alignSelf:"center", textAlign:"right",
      }}>
        Jan 25, 2021 · 4 min read
      </div>
      <div style={{
        gridColumn:"1 / -1", display:"flex", alignItems:"center", gap: 10,
        paddingTop: 6, borderTop:"1px solid #f1f3f4",
      }}>
        <div style={{
          width: 22, height: 22, borderRadius:"50%", background:"#1a73e8",
          color:"#fff", fontSize: 11, fontWeight: 600,
          display:"flex", alignItems:"center", justifyContent:"center",
        }}>A</div>
        <div style={{display:"flex", flexDirection:"column", lineHeight: 1.2}}>
          <span style={{fontSize: 11, color:"#202124", fontWeight: 500}}>Adam Weidemann</span>
          <span style={{fontSize: 9, color:"#5f6368"}}>Threat Analysis Group</span>
        </div>
      </div>
    </div>
  );
}

function NewsCard_Record() {
  const Tag = ({children}) => (
    <span style={{
      fontSize: 8, letterSpacing:"0.04em", fontWeight: 700, color:"#fff",
      background:"#e87511", padding:"3px 6px",
      display:"inline-block",
    }}>{children}</span>
  );
  return (
    <div style={{
      flex: 1, minHeight: 0, background:"#fff", color:"#111",
      fontFamily: NEWS_SANS, padding:"12px 18px",
      display:"grid", gridTemplateColumns:"140px 1fr", columnGap: 18,
    }}>
      <div style={{
        display:"flex", flexDirection:"column", justifyContent:"space-between",
        borderRight:"1px solid #e5e5e5", paddingRight: 14,
      }}>
        <div style={{
          fontSize: 7, letterSpacing:"0.14em", color:"#6b6b6b",
          textTransform:"uppercase",
        }}>Image: Micha Brandli</div>
        <div style={{display:"flex", flexDirection:"column", lineHeight: 1.25, margin:"6px 0"}}>
          <span style={{fontSize: 11, color:"#111", fontWeight: 600}}>Daryna Antoniuk</span>
          <span style={{fontSize: 9, color:"#6b6b6b", marginTop: 1}}>September 7th, 2023</span>
        </div>
        <div style={{display:"flex", flexWrap:"wrap", gap: 4}}>
          <Tag>Nation-state</Tag>
          <Tag>Cybercrime</Tag>
          <Tag>News</Tag>
        </div>
      </div>
      <div style={{display:"flex", flexDirection:"column", justifyContent:"center", minWidth: 0}}>
        <div style={{
          fontSize: 16, lineHeight: 1.18, fontWeight: 700, color:"#111",
          letterSpacing:"-0.005em",
        }}>
          North Korean hackers target security researchers with new zero-day
        </div>
        <div style={{
          fontSize: 10, lineHeight: 1.35, color:"#3a3a3a", marginTop: 8,
        }}>
          State-backed North Korean hackers are reportedly targeting security researchers using at
          least one zero-day vulnerability, Google warned in a <span style={{color:"#c5352e", textDecoration:"underline"}}>report</span> released Thursday.
        </div>
      </div>
    </div>
  );
}

function NewsCard_DarkReading() {
  return (
    <div style={{
      flex: 1, minHeight: 0, background:"#fff", color:"#111",
      fontFamily: NEWS_SANS, padding:"12px 20px",
      display:"flex", flexDirection:"column", justifyContent:"space-between",
    }}>
      <div>
        <div style={{
          fontFamily: NEWS_SERIF,
          fontSize: 17, lineHeight: 1.15, fontWeight: 700, color:"#111",
          letterSpacing:"-0.005em",
        }}>
          Hackers Lure Cybersecurity Researchers With Fake LinkedIn Recruiter Profiles
        </div>
        <div style={{
          fontSize: 10, lineHeight: 1.35, color:"#3a3a3a", marginTop: 6,
        }}>
          Campaign demonstrates the DPRK-backed cyberattackers are gaining tools to avoid EDR tools.
        </div>
      </div>
      <div style={{
        display:"flex", alignItems:"center", justifyContent:"space-between",
        paddingTop: 8, borderTop:"1px solid #e5e5e5", marginTop: 8,
      }}>
        <div style={{display:"flex", alignItems:"center", gap: 8}}>
          <div style={{
            width: 22, height: 22, borderRadius:"50%", background:"#222",
            color:"#c9a227", fontSize: 8, fontWeight: 700, letterSpacing:"0.05em",
            display:"flex", alignItems:"center", justifyContent:"center",
          }}>DR</div>
          <div style={{display:"flex", flexDirection:"column", lineHeight: 1.2}}>
            <span style={{fontSize: 10, color:"#111", fontWeight: 600}}>Dark Reading Staff, <span style={{fontWeight: 400}}>Dark Reading</span></span>
            <span style={{fontSize: 9, color:"#6b6b6b"}}>March 13, 2023</span>
          </div>
        </div>
        <div style={{display:"flex", alignItems:"center", gap: 12}}>
          <span style={{fontSize: 9, color:"#6b6b6b"}}>1 Min Read</span>
          <span style={{
            fontSize: 9, fontWeight: 700, color:"#111",
            borderLeft:"2px solid #c9a227", paddingLeft: 6,
          }}>Editor's Choice</span>
        </div>
      </div>
    </div>
  );
}

function Slide05_YoloBinary() {
  return (
    <Slide section="THE PROBLEM" hideBrackets>
      <NightHUD beat="03" clock="03:14" t="27:00" risk={0.92} riskLabel="CRITICAL" riskColor={CRIMSON}/>
      <Content style={{padding: 0}}>
        <div style={{position:"relative", flex: 1, overflow:"hidden"}}>
          {/* Full-bleed hero image — same operator, now drowning in consequence */}
          <img src="assets/wannacry-shot.png" alt="Operator realizes what he detonated — WannaCry lock screen, news clippings orbiting like intrusive thoughts"
               style={{
                 position:"absolute", inset: 0,
                 width:"100%", height:"100%", objectFit:"cover", objectPosition:"center",
                 filter:"contrast(1.05) saturate(1.02) brightness(0.95)",
               }}/>
          {/* Scanlines */}
          <div style={{
            position:"absolute", inset:0,
            background: "repeating-linear-gradient(180deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px)",
          }}/>
          {/* Top vignette — darkens headline band while preserving most clippings */}
          <div style={{
            position:"absolute", inset:0,
            background: `linear-gradient(180deg, ${DK_BG} 0%, rgba(9,10,13,0.8) 6%, rgba(9,10,13,0.35) 14%, transparent 26%)`,
          }}/>
          {/* Bottom vignette — for stamp legibility */}
          <div style={{
            position:"absolute", inset:0,
            background: `linear-gradient(0deg, ${DK_BG} 0%, rgba(9,10,13,0.55) 8%, transparent 22%)`,
          }}/>

          {/* Hero headline — top center */}
          <div style={{
            position:"absolute", top: 64, left: "50%", transform:"translateX(-50%)",
            textAlign:"center", width:"100%", maxWidth: 1400, padding:"0 60px",
          }}>
            <div style={{
              fontSize: 11, letterSpacing:"0.4em", color: CRIMSON, fontWeight: 700,
              display:"flex", alignItems:"center", justifyContent:"center", gap: 14,
            }}>
              <span style={{width: 60, height: 1, background: CRIMSON}}/>
              <span>REALIZATION</span>
              <span style={{width: 60, height: 1, background: CRIMSON}}/>
            </div>
            <div style={{
              fontFamily:"'JetBrains Mono', monospace",
              fontSize: 80, fontWeight: 700, color: DK_FG,
              lineHeight: 1.05, letterSpacing:"-0.02em",
              marginTop: 20,
              textShadow: "0 2px 24px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.7)",
            }}>
              Did you just <span style={{color: GOLD}}>detonate</span>{" "}
              <span style={{color: DK_FG_MUTED, fontStyle:"italic", fontWeight: 400}}>that</span> binary?
            </div>
          </div>

          {/* Specimen stamp — bottom center, anchors the fact */}
          <div style={{
            position:"absolute", bottom: 52, left: "50%", transform:"translateX(-50%)",
            border:`1px solid ${CRIMSON}`, padding:"11px 22px",
            fontSize: 11, letterSpacing:"0.3em", color: CRIMSON, fontWeight: 700,
            background:"rgba(9,10,13,0.82)",
            backdropFilter:"blur(4px)",
            display:"flex", gap: 18, alignItems:"center",
          }}>
            <span>SPECIMEN · WANNACRY · MAY 2017</span>
            <span style={{width: 1, height: 12, background: CRIMSON, opacity: 0.5}}/>
            <span style={{color: DK_FG_MUTED, fontWeight: 500}}>200K+ HOSTS</span>
          </div>
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 06 · DID *YOU* JUST DETONATE THAT BINARY? ────────────────
// Beat 04 — the outcome. Pronoun flips. The client email arrives at 04:29.
// Hero photo: operator collapsed at the desk, "Network Outage" email
// from Angry Joe on the monitor.
function Slide06_DidYouYolo() {
  return (
    <Slide section="THE PROBLEM" hideBrackets>
      <NightHUD beat="04" clock="04:29" t="01:42:00" risk={1.0} riskLabel="CRITICAL"/>
      <Content style={{padding: 0}}>
        <div style={{position:"relative", flex: 1, overflow:"hidden"}}>
          {/* Full-bleed hero image — the receipts have arrived, Angry Joe's
              email on screen, operator slumped at the desk. */}
          <img src="assets/angry-joe-email-shot.png" alt="Operator collapsed at the desk reading the client's network-outage email"
               style={{
                 position:"absolute", inset: 0,
                 width:"100%", height:"100%", objectFit:"cover", objectPosition:"center",
                 filter:"contrast(1.05) saturate(1.02) brightness(0.95)",
               }}/>
          {/* 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%)`,
          }}/>

          {/* Hero text column — mirrors Slides 03/04 */}
          <div style={{
            position:"absolute", left: 120, top: "50%",
            transform:"translateY(-50%)", maxWidth: 860,
          }}>
            <div style={{
              fontSize: 13, letterSpacing:"0.4em", color: CRIMSON, fontWeight: 700,
              display:"flex", alignItems:"center", gap: 14, marginBottom: 36,
            }}>
              <span style={{width: 36, height: 1, background: CRIMSON}}/>
              <span>THE RECEIPT</span>
            </div>
            <div style={{
              fontSize: 80, fontWeight: 700, color: DK_FG,
              lineHeight: 1.02, letterSpacing:"-0.02em",
              fontFamily:"'JetBrains Mono', monospace",
            }}>
              Did <span style={{
                color: CRIMSON,
                textDecoration: "underline",
                textDecorationThickness: 6,
                textUnderlineOffset: 12,
              }}>YOU</span> just detonate<br/>that binary?
            </div>
          </div>

          {/* Inbox stamp — parallels SUBJ stamps on slides 03/04 */}
          <div style={{
            position:"absolute", bottom: 48, right: 64,
            border:`1px solid ${CRIMSON}`, padding:"10px 18px",
            fontSize: 11, letterSpacing:"0.3em", color: CRIMSON, fontWeight: 700,
            background:"rgba(9,10,13,0.82)",
            backdropFilter:"blur(4px)",
            display:"flex", gap: 14, alignItems:"center",
          }}>
            <span>INBOX · 04:29 MON</span>
            <span style={{width: 1, height: 12, background: CRIMSON, opacity: 0.5}}/>
            <span style={{color: DK_FG_MUTED, fontWeight: 500}}>FROM THE CLIENT</span>
          </div>
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 07 · RECEIPTS ─────────────────────────────────────────────
// The data anchor after the 4-beat night sequence. Three stats in a triangle:
// risk is real → growing → aimed at you.
function Slide07_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: 13, letterSpacing:"0.3em", color: GOLD, fontWeight: 700,
                         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: 19, color: DK_FG, lineHeight: 1.35, fontWeight: 600}}>
              YoY increase in malicious open-source packages
            </div>
            <div style={{fontSize: 15, color: DK_FG_MUTED, lineHeight: 1.5, marginTop:"auto", fontWeight: 500}}>
              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: 13, letterSpacing:"0.3em", color: GOLD, fontWeight: 700,
                         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: 15, color: DK_FG_MUTED, lineHeight: 1.5, marginTop:"auto", fontWeight: 500}}>
              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) — dark surface, no red-on-red */}
          <div style={{
            border:`1px solid ${CRIMSON}`, padding:"36px 32px",
            display:"flex", flexDirection:"column", gap: 18,
            background:"rgba(20,22,28,0.7)", position:"relative",
            boxShadow: `0 0 28px rgba(233,69,96,0.15)`,
          }}>
            <div style={{fontSize: 13, letterSpacing:"0.3em", color: CRIMSON, fontWeight: 700,
                         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: 16, color: DK_FG, lineHeight: 1.5, fontWeight: 500}}>
              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: 15, color: DK_FG_MUTED, lineHeight: 1.5, marginTop:"auto", fontWeight: 500,
                         borderTop:`1px solid ${CRIMSON}60`, 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: 22, color: DK_FG, fontStyle:"italic", fontWeight: 500,
        }}>
          <span>…and no way to tell which is which.</span>
          <span style={{
            fontSize: 13, letterSpacing:"0.25em", color: DK_FG_MUTED,
            fontStyle:"normal", textTransform:"uppercase", fontWeight: 600,
          }}>
            Sources · Leiden / USENIX WOOT '25 · Sonatype Q2 '25 · Kaspersky Dec '25
          </span>
        </div>
      </Content>
    </Slide>
  );
}

// ─── SLIDE 08 · 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: 2,
      flex: 1,
      padding: "10px 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: 14, letterSpacing:"0.08em", color: DK_FG_MUTED, paddingLeft: 24, fontWeight: 500}}>
        {sub}
      </div>}
    </div>
  );

  const Scorecard = ({scores}) => (
    <div style={{
      marginTop: "auto",
      borderTop: `1px solid ${DK_BORDER}`,
      background: "rgba(9,10,13,0.6)",
      padding: "14px 22px",
    }}>
      <div style={{fontSize: 13, letterSpacing:"0.3em", color: DK_FG_MUTED, marginBottom: 8, fontWeight: 700}}>
        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: 4, alignItems:"flex-start",
          }}>
            <div style={{fontSize: 14, color: scores[i] ? DK_FG : CRIMSON, letterSpacing:"0.05em", fontWeight: 600}}>
              {n}
            </div>
            <div style={{
              fontSize: 22, 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: 12}}>Lab & range automation — the field today</Title>
        <div style={{fontSize: TS.body, color: DK_FG_MUTED, marginTop: 10, 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: 16, padding: "10px 22px",
          border: `1px solid ${DK_BORDER}`,
          background: "rgba(9,10,13,0.6)",
        }}>
          <div style={{fontSize: 13, letterSpacing:"0.3em", color: GOLD, whiteSpace:"nowrap", fontWeight: 700}}>
            // FOUR NEEDS
          </div>
          <div style={{flex: 1, height: 1, background: DK_BORDER_SOFT}}/>
          {needs.map((n, i) => (
            <React.Fragment key={n}>
              <div style={{fontSize: 16, letterSpacing:"0.06em", color: DK_FG, fontWeight: 600}}>{n}</div>
              {i < needs.length - 1 && (
                <div style={{fontSize: 13, color: DK_FG_MUTED}}>·</div>
              )}
            </React.Fragment>
          ))}
        </div>

        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 36, marginTop: 16, flex: 1, minHeight: 0}}>
          {/* Commercial */}
          <div style={{position:"relative", border:`1px solid ${DK_BORDER}`, padding: "22px 0 0", display:"flex", flexDirection:"column"}}>
            <Brackets size={16} color={GOLD} inset={-1} thickness={1.5}/>
            <div style={{padding: "0 30px 16px", borderBottom: `1px solid ${DK_BORDER}`}}>
              <div style={{fontSize: 14, letterSpacing:"0.3em", color: GOLD, fontWeight: 700}}>CATEGORY A</div>
              <div style={{fontSize: 32, fontWeight: 700, marginTop: 4}}>Commercial</div>
              <div style={{fontSize: 16, color: DK_FG_MUTED, marginTop: 2, fontWeight: 500}}>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: "22px 0 0", display:"flex", flexDirection:"column"}}>
            <Brackets size={16} color={GOLD} inset={-1} thickness={1.5}/>
            <div style={{padding: "0 30px 16px", borderBottom: `1px solid ${DK_BORDER}`}}>
              <div style={{fontSize: 14, letterSpacing:"0.3em", color: GOLD, fontWeight: 700}}>CATEGORY B</div>
              <div style={{fontSize: 32, fontWeight: 700, marginTop: 4}}>Open Source</div>
              <div style={{fontSize: 16, color: DK_FG_MUTED, marginTop: 2, fontWeight: 500}}>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_DidYouYolo,
  Slide07_Receipts, Slide08_Landscape,
});
