// Main app — homepage (wanted poster lineup) + Zada story page

// Drop a Vimeo video ID into vimeoId to enable the "Watch the video"
// button on each case page. Until set, the modal shows the existing
// "VIDEO PENDING" placeholder.
const VILLAINS = [
  {
    id: 'zada',
    num: '01',
    name: 'JOSEPH ZADA',
    crime: 'Federal securities fraud · Ponzi',
    img: 'assets/zada-mugshot.webp',
    locked: false,
    rot: -3, top: 4, left: 5,
    vimeoId: 1187153127,
  },
  { id: 'wright', num: '02', name: 'KIRK WRIGHT', crime: 'Hedge-fund fraud · 47 counts · NFL victims', img: 'assets/wright-mugshot.webp', locked: false, rot: 4, top: 8, left: 28, vimeoId: null },
  { id: 'banks', num: '03', name: 'CHARLES BANKS', crime: 'Wire fraud · Tim Duncan advisor', img: 'assets/banks-mugshot.webp', locked: false, rot: -2, top: 2, left: 52, vimeoId: null },
  { id: 'guertin', num: '04', name: 'JENNIFER GUERTIN', crime: 'Breach of trust · Largest youth-sports theft in N.A.', img: 'assets/guertin-mugshot.webp', locked: false, rot: 5, top: 6, left: 75, vimeoId: null },
  { id: 'placeholder-5', num: '05', name: 'CLASSIFIED', crime: 'Tax evasion · Money laundering', locked: true, rot: -4, top: 38, left: 18 },
  { id: 'placeholder-6', num: '06', name: 'CLASSIFIED', crime: 'Identity theft ring', locked: true, rot: 3, top: 42, left: 60 },
];

const VILLAIN_BY_ID = Object.fromEntries(VILLAINS.map(v => [v.id, v]));

// Wanted poster card
const WantedPoster = ({ v, onClick, intensity }) => {
  const { num, name, crime, img, locked, rot } = v;
  return (
    <div className={`villain-card paper-tex${locked ? ' locked' : ''}`} style={{
      transform: `rotate(${intensity ? rot : 0}deg)`,
      cursor: locked ? 'not-allowed' : 'pointer',
    }} onClick={() => !locked && onClick(v)}>
      <div className="num">{num}</div>
      {!locked && <div className="badge">★ FILE OPEN</div>}
      {locked && <div className="badge coming">LOCKED</div>}
      <div className="photo" style={img ? { backgroundImage: `url(${img})` } : {}}>
        {locked && (
          <div className="locked-mark" aria-hidden="true">
            <span className="locked-glyph">?</span>
            <span className="locked-sub">UNLOCK SOON</span>
          </div>
        )}
      </div>
      <div className="stripes" />
      <div className="label">
        <div className="name">{name}</div>
        <div className="crime">{crime}</div>
      </div>
    </div>
  );
};

// Homepage
const HomePage = ({ onPick, tweaks, onRoute }) => {
  useReveal();
  const accent = tweaks.accent;
  const [photoOpen, setPhotoOpen] = React.useState(false);
  React.useEffect(() => {
    if (!photoOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setPhotoOpen(false); };
    window.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [photoOpen]);
  return (
    <div className="page active">
      <Nav onBack={() => window.scrollTo({ top: 0, behavior: 'smooth' })} meta="VOL. I · NHL EDITION 2026" />

      {/* HERO */}
      <section className="hero paper-tex">
        <div className="corner-tl" /><div className="corner-tr" /><div className="corner-bl" /><div className="corner-br" />

        <div className="hero-logos">
          <a className="hero-logo hero-logo--pcfi" href="https://pcfi.org" target="_blank" rel="noopener noreferrer" aria-label="Private Company Fraud Index — PCFI.org">
            <img src="assets/pcfi-logo.png" alt="PCFI.org · Private Company Fraud Index" />
          </a>
          <a className="hero-logo hero-logo--alumni" href="https://nhlalumni.com" target="_blank" rel="noopener noreferrer" aria-label="NHL Alumni">
            <img src="assets/nhla-logo.png" alt="The Alumni — NHL Alumni Association" />
          </a>
        </div>

        <div className="hero-grid">
          <div className="reveal-l">
            <h1 className="hero-title">
              THE<br />
              BOOK<br />
              <span className="of">— OF —</span><br />
              <span className="bad">BAD</span>
              <span className="nhl-edition" aria-label="NHL Edition 2026">
                <span className="nhl-edition-star">★</span>
                <span className="nhl-edition-text">
                  NHL<br/>EDITION
                  <span className="nhl-edition-year">2026</span>
                </span>
                <span className="nhl-edition-star">★</span>
              </span>
            </h1>
            <p className="hero-sub">
              Athletes are losing <strong>$1.00B–$2.00B</strong> every year to private-company fraud.
              The good news — every week, a retired Navy SEAL and federal law-enforcement investigator,
              a Facebook and PayPal anti-fraud executive, an NHL Hall of Famer, and a team with over
              <strong> $2.00B in active diligence</strong> break down how it happened and how to make sure
              it never happens to you. Free for all <strong>NHLAA members</strong>. This is the
              fraud-awareness program our alumni never had — until now.
            </p>
            <div className="hero-stamps">
              <Stamp color="var(--red)" rot={-6}>VOL. I</Stamp>
              <Stamp color="var(--money)" rot={4} style={{ color: 'var(--money)' }}>EVIDENCE INSIDE</Stamp>
              <Stamp color="var(--bruise)" rot={-2} style={{ color: 'var(--bruise)' }}>FOR ALUMNI</Stamp>
            </div>
            <button className="hero-cta" onClick={() => {
              document.getElementById('lineup').scrollIntoView({ behavior: 'smooth' });
            }}>
              MEET THE BAD GUYS <span className="arrow">→</span>
            </button>
          </div>

          <div className="ticker-wrap reveal-r">
            <FraudTicker />
            <CaseCTA
              sub="Two real frauds. Two sets of choices. Pick a case file and live with the calls."
              options={[
                { tag: '01', label: 'THE OIL PLAY · ZADA', onClick: () => onRoute('oil-play') },
                { tag: '02', label: 'THE TRUST PLAY · BANKS', onClick: () => onRoute('case') },
              ]}
            />
            <button type="button" className="wv-cta" onClick={() => {
              const el = document.getElementById('victims');
              if (el) el.scrollIntoView({ behavior: 'smooth' });
            }}>
              OR — SEE THE HUMAN COST <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </section>

      {/* ALUMNI PITCH BANNER */}
      <section className="alumni-pitch paper-tex">
        <div className="ap-corner-tl" /><div className="ap-corner-tr" />
        <div className="ap-eyebrow reveal">★ A BRIEFING FOR THE HOCKEY ALUMNI COMMUNITY ★</div>
        <h2 className="ap-headline reveal">
          YOU BUILT THE CAREER.<br />
          <span className="ap-strike">THEY</span> BUILT THE SCAM.
        </h2>
        <div className="ap-grid">
          <div className="ap-col reveal-l">
            <div className="ap-stat">
              <div className="ap-stat-num">$2.01B</div>
              <div className="ap-stat-lbl">Estimated annual losses<br/>to athlete-targeted fraud</div>
            </div>
          </div>
          <div className="ap-col reveal">
            <p className="ap-body">
              Pro athletes are the perfect mark: high income, sudden wealth,
              busy careers, and an advisor who "handles everything." Hockey alumni —
              with pension cheques, post-career investments, and the locker-room
              "trusted friend" — sit squarely in the crosshairs.
            </p>
            <p className="ap-body">
              <strong>Every case in this book is real.</strong> Every name is verified.
              Every red flag could've been spotted. The Book of Bad turns court files
              and indictments into a toolkit alumni can actually use.
            </p>
          </div>
          <div className="ap-col reveal-r">
            <div className="ap-checklist">
              <div className="ap-check-title">WHAT'S INSIDE</div>
              <div className="ap-check-item">→ Real-money case files</div>
              <div className="ap-check-item">→ Red-flag checklists</div>
              <div className="ap-check-item">→ Interactive "what would you do?" plays</div>
              <div className="ap-check-item">→ Live fraud counter</div>
              <div className="ap-check-item">→ New chapter every month</div>
            </div>
          </div>
        </div>
      </section>

      {/* SCATTERED WANTED POSTERS */}
      <section className="lineup" id="lineup">
        <div className="heading">
          <h2 className="reveal-l">
            THE<br /><em>LINEUP</em>
          </h2>
          <p className="reveal-r">
            Four files open. Two still locked. Six advisors-turned-thieves — from
            the <strong>NHL Hall-of-Famer</strong> stripped of <strong>$43.00M</strong> to the
            Ontario youth-hockey association drained in <strong>35 days</strong>. Every face
            on this wall is someone an alum trusted. Click any unlocked file to read it —
            the last two unlock soon.
          </p>
        </div>

        <div className="villains">
          {VILLAINS.map((v, i) => (
            <div key={v.id} className="reveal" style={{ transitionDelay: `${i * 60}ms` }}>
              <WantedPoster v={v} onClick={onPick} intensity={tweaks.cartoonIntensity > 0.3} />
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 80, fontFamily: "'Special Elite', monospace", opacity: 0.6, fontSize: 13, letterSpacing: '0.2em' }}>
          ★ FILE 01 OPEN · 05 SEALED · UPDATED MONTHLY ★
        </div>
      </section>

      {/* THE HUMAN COST */}
      <section className="wall-victims paper-tex" id="victims">
        <div className="wv-corner-tl" /><div className="wv-corner-tr" />
        <div className="wv-corner-bl" /><div className="wv-corner-br" />
        <div className="wv-heading">
          <div className="wv-eyebrow reveal">★ THE HUMAN COST ★</div>
          <h2 className="wv-title reveal">
            THE PEOPLE<br />
            <em>BEHIND THE NUMBERS</em>
          </h2>
          <p className="wv-sub reveal">
            Hall-of-famers, Super Bowl champions, and youth-hockey families.
            Different jerseys, same playbook ran on them. No locker room was bulletproof.
          </p>
        </div>

        <div className="wv-dedication reveal">
          <div className="wv-ded-eyebrow">★ IN MEMORIAM ★</div>
          <div className="wv-ded-line">For <strong>Dr. Dale Lynn McCord</strong></div>
          <div className="wv-ded-years">1942 — 2002</div>
          <div className="wv-ded-sub">
            Captain, United States Army &nbsp;·&nbsp; Vietnam Veteran &nbsp;·&nbsp; Air Medal Recipient &nbsp;·&nbsp; Cancer Doctor &nbsp;·&nbsp; Father &nbsp;·&nbsp; Friend
          </div>
        </div>

        <div className="wv-grid">
          <button
            type="button"
            className="wv-card wv-card--memorial reveal"
            style={{ '--tilt': '-1.5deg' }}
            onClick={() => setPhotoOpen(true)}
            aria-label="Open photo of Dr. Dale Lynn McCord"
          >
            <div className="wv-tape" />
            <div className="wv-memorial-photo" style={{ backgroundImage: 'url(assets/mccord-photo.jpg)' }} />
            <div className="wv-memorial-name">DR. DALE LYNN McCORD</div>
            <div className="wv-memorial-years">1942 — 2002</div>
            <div className="wv-memorial-role">CAPTAIN · U.S. ARMY · VIETNAM VET · CANCER DOCTOR</div>
            <div className="wv-memorial-zoom">CLICK TO ENLARGE <span className="arrow">⤢</span></div>
          </button>
          {[
            { sport: 'NHL', team: 'Detroit · Hall of Fame', name: 'SERGEI FEDOROV', amount: '$43.00M', today: '$322.07M', todayNote: '7.49× · S&P 500 TR · ~2006 entry', stolen: 'JOSEPH ZADA', caseRoute: 'zada', rot: -2, photo: 'assets/victim-fedorov.jpg' },
            { sport: 'NBA', team: 'San Antonio · Hall of Fame', name: 'TIM DUNCAN', amount: '$20.00M', today: '$95.00M', todayNote: '4.75× · S&P 500 TR · ~2009 entry', stolen: 'CHARLES BANKS', caseRoute: 'banks', rot: 1.5, photo: 'assets/victim-duncan.jpg' },
            { sport: 'NBA', team: 'Minnesota Timberwolves · Hall of Fame', name: 'KEVIN GARNETT', amount: '$77.00M', today: '$241.78M', todayNote: '3.14× · S&P 500 TR · ~2014 entry', stolen: 'CHARLES BANKS', caseRoute: 'banks', rot: -1.5, photo: 'assets/victim-garnett.webp' },
            { sport: 'NFL', team: 'Denver Broncos · Super Bowl champ', name: 'STEVE ATWATER', amount: '$2.70M', today: '$14.39M', todayNote: '5.33× · S&P 500 TR · ~2002 entry', stolen: 'KIRK WRIGHT', caseRoute: 'wright', rot: -1.5, photo: 'assets/victim-atwater.jpg' },
            { sport: 'NFL', team: 'Denver Broncos · Super Bowl MVP', name: 'TERRELL DAVIS', amount: 'Career savings', stolen: 'KIRK WRIGHT', caseRoute: 'wright', rot: 2, photo: 'assets/victim-davis.jpg' },
            { sport: 'NFL', team: 'Tennessee Titans · 4× Pro Bowl', name: 'BLAINE BISHOP', amount: 'Career savings', stolen: 'KIRK WRIGHT', caseRoute: 'wright', rot: -1, photo: 'assets/victim-bishop.webp' },
            { sport: 'OMHA', team: '25,000+ Hockey Families · ON', name: 'YOUTH HOCKEY ONTARIO', amount: '$2.40M', today: '$6.43M', todayNote: '2.68× · S&P 500 TR · 2018 entry', stolen: 'JENNIFER GUERTIN', caseRoute: 'guertin', rot: 2, photo: 'assets/victim-omha.jpg' },
          ].map((v, i) => (
            <div key={i} className="wv-card wv-card--photo reveal" style={{ '--tilt': `${v.rot}deg`, transitionDelay: `${(i + 1) * 60}ms` }}>
              <div className="wv-tape" />
              <div className="wv-photo" style={{ backgroundImage: `url(${v.photo})` }} aria-label={`Photo of ${v.name}`} />
              <div className="wv-sport">{v.sport}</div>
              <div className="wv-team">{v.team}</div>
              <div className="wv-name">{v.name}</div>
              <div className="wv-amount-lbl">STRIPPED OF</div>
              <div className="wv-amount">{v.amount}</div>
              {v.today && (
                <div className="wv-today-block">
                  <div className="wv-today-lbl">WORTH TODAY · S&amp;P 500</div>
                  <div className="wv-today">{v.today}</div>
                  <div className="wv-today-note">{v.todayNote}</div>
                </div>
              )}
              <button type="button" className="wv-by" onClick={() => onRoute(v.caseRoute)}>
                → CASE: {v.stolen}
              </button>
            </div>
          ))}
        </div>
        <div className="wv-more reveal">
          <div className="wv-more-num">+ 500</div>
          <div className="wv-more-text">
            MORE INVESTORS NAMED IN THE WRIGHT, ZADA, AND BANKS FILINGS — DOCTORS, RETIREES, ROOKIES, AND THE FAMILY MEMBERS WHO TRUSTED THEM.
          </div>
        </div>
      </section>

      {/* TRUST BUT VERIFY CTA */}
      <section className="trust-cta paper-tex">
        <div className="tc-corner-tl" /><div className="tc-corner-tr" />
        <div className="tc-corner-bl" /><div className="tc-corner-br" />
        <div className="tc-inner">
          <div className="tc-eyebrow reveal">★ TRUST BUT VERIFY ★</div>
          <h2 className="tc-title reveal">
            GOT A CALL?<br />
            <em>EMAIL US FIRST.</em>
          </h2>
          <p className="tc-body reveal">
            If a private company calls or texts you to do business —
            <strong> before you say yes </strong>—
            email us. We'll run the diligence so you don't end up on the next page of this book.
          </p>
          <a
            className="tc-button reveal-zoom"
            href="mailto:nhlaa@oware.com?subject=Trust%20but%20verify%20with%20NHL%20AA"
          >
            <span className="tc-button-icon">✉</span>
            <span className="tc-button-label">
              <span className="tc-button-line">EMAIL <strong>nhlaa@oware.com</strong></span>
              <span className="tc-button-sub">SUBJECT · "TRUST BUT VERIFY WITH NHL AA"</span>
            </span>
            <span className="tc-button-arrow">→</span>
          </a>
          <div className="tc-foot reveal">
            FREE FOR ALL NHLAA MEMBERS &nbsp;·&nbsp; CONFIDENTIAL &nbsp;·&nbsp; FAST TURNAROUND
          </div>
        </div>
      </section>

      <footer>
        <div>© THE BOOK OF BAD — VOLUME I</div>
        <div>A FRAUD-AWARENESS PROJECT FOR THE HOCKEY ALUMNI COMMUNITY · 2026</div>
      </footer>

      {photoOpen && (
        <div className="photo-lightbox" onClick={() => setPhotoOpen(false)}>
          <button
            type="button"
            className="photo-lightbox-close"
            onClick={(e) => { e.stopPropagation(); setPhotoOpen(false); }}
            aria-label="Close photo"
          >✕</button>
          <div className="photo-lightbox-frame" onClick={(e) => e.stopPropagation()}>
            <img src="assets/mccord-photo.jpg" alt="Dr. Dale Lynn McCord" />
            <div className="photo-lightbox-cap">
              <strong>Dr. Dale Lynn McCord</strong> &nbsp;·&nbsp; 1942 — 2002<br />
              Captain, United States Army &nbsp;·&nbsp; Vietnam Veteran &nbsp;·&nbsp; Air Medal Recipient &nbsp;·&nbsp; Cancer Doctor &nbsp;·&nbsp; Father &nbsp;·&nbsp; Friend
            </div>
          </div>
          <div className="photo-lightbox-hint">PRESS ESC OR CLICK OUTSIDE TO CLOSE</div>
        </div>
      )}
    </div>
  );
};

// Animated book cover
const BookCover = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <div
      style={{ width: '100%', height: '100%', position: 'relative', cursor: 'pointer' }}
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <div className="book" style={{
        transform: `rotate(${open ? -8 : -2}deg)`,
        transition: 'transform .5s cubic-bezier(.5,.0,.2,1.2)',
      }}>
        <div className="spine" />
        <div className="cover">
          <div>
            <div style={{ fontFamily: "'Special Elite', monospace", fontSize: 12, letterSpacing: '0.2em', marginBottom: 10, opacity: 0.7 }}>★ VOLUME I ★</div>
            <h3>
              THE<br />BOOK<br />OF<br /><span>BAD</span>
            </h3>
          </div>
          <div className="seal">EVIDENCE<br/>INSIDE</div>
        </div>
        <div className="halftone-overlay" />
      </div>
      {/* Flipped page hint */}
      <div style={{
        position: 'absolute', right: -8, top: 12, bottom: 12,
        width: 24,
        background: 'repeating-linear-gradient(180deg, var(--paper) 0 4px, var(--paper-2) 4px 6px)',
        border: '3px solid var(--ink)',
        transform: open ? 'rotateY(20deg) translateX(8px)' : 'rotateY(0) translateX(0)',
        transformOrigin: 'left center',
        transition: 'transform .5s cubic-bezier(.5,.0,.2,1.2)',
      }} />
    </div>
  );
};

// Video modal — Vimeo iframe when villain.vimeoId is set, placeholder otherwise.
const VideoModal = ({ show, onClose, villain }) => {
  // ESC key closes the modal
  React.useEffect(() => {
    if (!show) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    // Lock background scroll while modal is open
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [show, onClose]);
  if (!show) return null;
  const vimeoId = villain?.vimeoId;
  return (
    <div className="video-modal show" onClick={onClose}>
      <button className="close" onClick={onClose} aria-label="Close video">✕</button>
      <div className="frame" onClick={e => e.stopPropagation()}>
        {vimeoId ? (
          <iframe
            src={`https://player.vimeo.com/video/${vimeoId}?autoplay=1&title=0&byline=0&portrait=0&dnt=1`}
            allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
            allowFullScreen
            frameBorder="0"
            title={`${villain?.name || 'Case'} — video`}
          />
        ) : (
          <div className="placeholder">
            <div className="play-circle" />
            <div className="vlabel">VIDEO PENDING</div>
            <div className="vsub">Add a Vimeo ID to {villain?.name || 'this case'} in app.jsx (VILLAINS → vimeoId)</div>
          </div>
        )}
      </div>
    </div>
  );
};

// Root app
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E8412B",
  "cartoonIntensity": 0.6,
  "defaultMode": "read",
  "stampSlam": true
}/*EDITMODE-END*/;

// URL <-> route mapping. Keep ROUTE_TO_PATH in sync with PATH_TO_ROUTE.
const PATH_TO_ROUTE = {
  '/':           'home',
  '/zada':       'zada',
  '/wright':     'wright',
  '/banks':      'banks',
  '/guertin':    'guertin',
  '/case':       'case',
  '/oil-play':   'oil-play',
  '/research':   'research',
};
const ROUTE_TO_PATH = {
  home:        '/',
  zada:        '/zada',
  wright:      '/wright',
  banks:       '/banks',
  guertin:     '/guertin',
  case:        '/case',
  'oil-play':  '/oil-play',
  research:    '/research',
};
const ROUTE_TITLES = {
  home:        'The Book of Bad — Vol. I',
  zada:        'Joseph Zada · Case 01 / 06 — The Book of Bad',
  wright:      'Kirk Wright · Case 02 / 06 — The Book of Bad',
  banks:       'Charles Banks · Case 03 / 06 — The Book of Bad',
  guertin:     'Jennifer Guertin · Case 04 / 06 — The Book of Bad',
  case:        'The Trust Play · Interactive Case — The Book of Bad',
  'oil-play':  'The Oil Play · Interactive Case — The Book of Bad',
  research:    'PCFI Research Paper · The Book of Bad',
};
const routeFromLocation = () => PATH_TO_ROUTE[window.location.pathname] || 'home';

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRouteState] = React.useState(routeFromLocation);
  const [video, setVideo] = React.useState({ show: false, villain: null });

  const setRoute = React.useCallback((next) => {
    const path = ROUTE_TO_PATH[next] || '/';
    if (window.location.pathname !== path) {
      window.history.pushState({ route: next }, '', path);
    }
    setRouteState(next);
  }, []);

  // Browser back/forward
  React.useEffect(() => {
    const onPopState = () => setRouteState(routeFromLocation());
    window.addEventListener('popstate', onPopState);
    return () => window.removeEventListener('popstate', onPopState);
  }, []);

  // Apply accent to CSS variable
  React.useEffect(() => {
    document.documentElement.style.setProperty('--red', tweaks.accent);
  }, [tweaks.accent]);

  // Reset scroll on route change + sync document.title + track pageview
  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
    document.title = ROUTE_TITLES[route] || ROUTE_TITLES.home;
    if (typeof gtag === 'function') {
      gtag('event', 'page_view', {
        page_title: document.title,
        page_location: window.location.href,
        page_path: window.location.pathname,
      });
    }
  }, [route]);

  const handlePick = (v) => {
    if (v.id === 'zada') setRoute('zada');
    else if (v.id === 'wright') setRoute('wright');
    else if (v.id === 'banks') setRoute('banks');
    else if (v.id === 'guertin') setRoute('guertin');
  };

  return (
    <>
      {route === 'home' && <HomePage onPick={handlePick} tweaks={tweaks} onRoute={setRoute} />}
      {route === 'zada' && (
        <ZadaStory
          onBack={() => setRoute('home')}
          onOpenVideo={() => setVideo({ show: true, villain: VILLAIN_BY_ID.zada })}
          onOpenOilPlay={() => setRoute('oil-play')}
        />
      )}
      {route === 'wright' && (
        <WrightStory
          onBack={() => setRoute('home')}
          onOpenVideo={() => setVideo({ show: true, villain: VILLAIN_BY_ID.wright })}
        />
      )}
      {route === 'banks' && (
        <BanksStory
          onBack={() => setRoute('home')}
          onOpenVideo={() => setVideo({ show: true, villain: VILLAIN_BY_ID.banks })}
        />
      )}
      {route === 'guertin' && (
        <GuertinStory
          onBack={() => setRoute('home')}
          onOpenVideo={() => setVideo({ show: true, villain: VILLAIN_BY_ID.guertin })}
        />
      )}
      {route === 'case' && (
        <InteractiveCase onBack={() => setRoute('home')} />
      )}
      {route === 'oil-play' && (
        <OilPlayCase onBack={() => setRoute('zada')} />
      )}
      {route === 'research' && (
        <ResearchPaper onBack={() => setRoute('home')} />
      )}

      <VideoModal
        show={video.show}
        onClose={() => setVideo({ show: false, villain: null })}
        villain={video.villain}
      />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakColor label="Accent color" value={tweaks.accent} onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Cartoon" />
        <TweakSlider
          label="Cartoon intensity"
          value={tweaks.cartoonIntensity}
          min={0} max={1} step={0.1}
          onChange={(v) => setTweak('cartoonIntensity', v)}
        />
        <TweakToggle
          label="Stamp slams on scroll"
          value={tweaks.stampSlam}
          onChange={(v) => setTweak('stampSlam', v)}
        />
        <TweakSection label="Defaults" />
        <TweakRadio
          label="Story default view"
          value={tweaks.defaultMode}
          options={[
            { value: 'read', label: 'Read' },
            { value: 'video', label: 'Video' },
          ]}
          onChange={(v) => setTweak('defaultMode', v)}
        />
        <TweakSection label="Quick jump" />
        <TweakButton label="Open Joseph Zada file →" onClick={() => setRoute('zada')} />
        <TweakButton label="Open Kirk Wright file →" onClick={() => setRoute('wright')} />
        <TweakButton label="Open Charles Banks file →" onClick={() => setRoute('banks')} />
        <TweakButton label="Open Jennifer Guertin file →" onClick={() => setRoute('guertin')} />
        <TweakButton label="Open Oil Play case →" onClick={() => setRoute('oil-play')} />
        <TweakButton label="Back to lineup ←" onClick={() => setRoute('home')} />
      </TweaksPanel>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);