// Joseph Zada story page

const ZadaStory = ({ onBack, onOpenVideo, onOpenOilPlay }) => {
  const [mode, setMode] = React.useState('read'); // 'read' | 'video'
  const scrollY = useScrollY();
  useReveal();

  // Mugshot parallax / zoom
  const heroRef = React.useRef(null);
  const [heroProgress, setHeroProgress] = React.useState(0);
  React.useEffect(() => {
    if (!heroRef.current) return;
    const r = heroRef.current.getBoundingClientRect();
    const total = r.height;
    const seen = Math.max(0, Math.min(total, -r.top));
    setHeroProgress(seen / total);
  }, [scrollY]);

  const mugScale = 1 + heroProgress * 0.18;
  const mugY = heroProgress * -40;
  const charTilt = Math.sin(scrollY / 200) * 3;

  return (
    <div className="story page active">
      <Nav onBack={onBack} />

      {/* COVER SCENE */}
      <section className="cover-scene paper-tex" ref={heroRef}>
        <div className="bg-grid" />
        <div className="ft-rule">
          <span>6'</span><span>5'</span><span>4'</span><span>3'</span><span>2'</span><span>1'</span>
        </div>

        <div className="mug-stage">
          <div className="mug-frame" style={{
            transform: `scale(${mugScale}) translateY(${mugY}px) rotate(${charTilt * 0.3}deg)`,
            transition: 'transform .12s linear',
          }}>
            <div className="corner-mark tl" />
            <div className="corner-mark tr" />
            <div className="corner-mark bl" />
            <div className="corner-mark br" />
            <img src="assets/zada-mugshot.webp" alt="Joseph Zada mugshot" />
            <div className="mug-tags tag-a">EVIDENCE&nbsp;#001</div>
            <div className="mug-tags tag-b">CASE: ZADA-2010</div>
            {onOpenOilPlay && (
              <CaseCTA
                className="case-cta--sticker"
                onClick={onOpenOilPlay}
                eyebrow="★ INTERACTIVE ★"
                title={(<>THE OIL<br />PLAY</>)}
                sub="Step into Fedorov's $43.00M decisions."
                buttonLabel="PLAY THE CASE"
              />
            )}
          </div>

          <div className="villain-name-block">
            <div className="file">CASE FILE No. 01 &nbsp;//&nbsp; THE BOOK OF BAD</div>
            <h1>
              JOSEPH
              <span className="last">ZADA</span>
            </h1>
            <div className="tagline">
              The fake oil baron who pitched <em>"private Saudi deals"</em> and turned <u>$55.00M of stolen savings</u> into a $12.00M horse stable.
            </div>

            <div className="quick-stats">
              <div className="stat">
                <div className="k">Raised</div>
                <div className="v">$55.00M</div>
              </div>
              <div className="stat">
                <div className="k">Investors</div>
                <div className="v">60+</div>
              </div>
              <div className="stat">
                <div className="k">Sentence</div>
                <div className="v">17.5 yrs</div>
              </div>
            </div>

            <div className="mode-toggle" role="tablist">
              <button
                className={mode === 'read' ? 'active' : ''}
                onClick={() => setMode('read')}
              >
                <span style={{
                  width: 14, height: 12,
                  border: '2px solid currentColor',
                  display: 'inline-block',
                  position: 'relative',
                }} />
                Read the story
              </button>
              <button
                className={mode === 'video' ? 'active' : ''}
                onClick={() => { setMode('video'); onOpenVideo(); }}
              >
                <span className="play-ico" />
                Watch the video
              </button>
            </div>
          </div>
        </div>

        <div className="scroll-cue">
          <span>Open the file</span>
          <div className="arr" />
        </div>
      </section>

      {/* MARQUEE STRIP */}
      <div className="stamp-strip">
        <div className="track">
          <span>★ FAKE SAUDI OIL BOARD ★</span>
          <span className="r">$55.00M RAISED · $0.00 INVESTED</span>
          <span>★ $12.00M STABLE · CHANDELIERS ★</span>
          <span className="r">SERGEI FEDOROV LOST $43.00M</span>
          <span>★ 15 COUNTS MAIL FRAUD ★</span>
          <span className="r">210 MONTHS FEDERAL</span>
          <span>★ FAKE SAUDI OIL BOARD ★</span>
          <span className="r">$55.00M RAISED · $0.00 INVESTED</span>
          <span>★ $12.00M STABLE · CHANDELIERS ★</span>
          <span className="r">SERGEI FEDOROV LOST $43.00M</span>
          <span>★ 15 COUNTS MAIL FRAUD ★</span>
          <span className="r">210 MONTHS FEDERAL</span>
        </div>
      </div>

      {/* CHAPTER 1 — THE SETUP */}
      <section className="chapter ch1 paper-tex">
        <div className="chapter-inner">
          <div className="chapter-num">01</div>
          <h2 className="reveal-l">
            <span className="hl">THE SETUP</span>
          </h2>
          <p className="lede reveal">
            <strong>Joseph Zada</strong> arrived in <strong>Wellington, Florida</strong>, the way serious money
            arrives in any equestrian town — with horses. By the early 2000s he owned a <strong>10-acre property</strong>
            adjacent to the Palm Beach International Equestrian Center, with a stable that cost
            <strong> $12.00M</strong> to build. <em>Marble floors. Twenty mahogany stalls. Chandeliers.</em>
            He even owned <strong>Custom Made</strong> — the Irish Sport Horse that carried David O'Connor to
            individual eventing gold at the 2000 Sydney Olympics. The horses were real. The money behind them was not.
          </p>
          <p className="lede reveal">
            The pitch never changed. Zada said he had a seat at a <strong>secret London trading board</strong>,
            connected to <em>Saudi oil and currency markets through royal-family contacts</em>. He promised
            returns as high as <strong>48% annually</strong>. He introduced investors to a "Wolfgang" he said
            sat on the board, and a "Mohamed Zarrouk" he claimed was a Saudi royal. On at least one occasion,
            he <strong>hired actors</strong> to attend a party at his home and pose as a Saudi prince and princess.
            <em> Investors shook hands with performers and wrote checks to a con.</em>
          </p>

          <div className="panels">
            <div className="panel reveal-l paper-tex">
              <div className="panel-num">①</div>
              <div className="panel-title">The Stable</div>
              <div
                className="panel-art has-image"
                role="img"
                aria-label="Clay illustration of Joseph Zada in a black suit, arms wide, surrounded by mansion, Rolls Royce, racehorse, gold bars, and an oil drum"
                style={{ backgroundImage: 'url(assets/zada-panel-stable.webp)' }}
              />
              <div className="panel-cap">$12.00M · 10 acres next to the Palm Beach Equestrian Center. Marble floors. Chandeliers. The set dressing of a man pretending to be richer than he was.</div>
            </div>
            <div className="panel reveal">
              <div className="panel-num">②</div>
              <div className="panel-title">The Pitch</div>
              <div
                className="panel-art has-image"
                role="img"
                aria-label="Clay illustration of Joseph Zada and Sergei Fedorov in a Red Wings jersey holding a check for $43.00M, with an oil tanker and dollar signs on the wall behind them"
                style={{ backgroundImage: 'url(assets/zada-panel-pitch.webp)' }}
              />
              <div className="panel-cap">48% returns. "Private Saudi oil." No SEC filings. No prospectus. No actual oil. Sergei Fedorov wrote a check for $43.00M.</div>
            </div>
            <div className="panel reveal-r paper-tex">
              <div className="panel-num">③</div>
              <div className="panel-title">The Cast</div>
              <div
                className="panel-art has-image"
                role="img"
                aria-label="Clay illustration of Joseph Zada presenting two hired actors as a Saudi prince and princess on a stage under a chandelier, with investors gathered below"
                style={{ backgroundImage: 'url(assets/zada-panel-cast.webp)' }}
              />
              <div className="panel-cap">"Wolfgang" the London board member. "Mohamed Zarrouk" the royal. A prince and princess at the party. All paid performers.</div>
            </div>
          </div>

          <blockquote className="pullquote reveal">
            <p>His connections with Saudi royalty existed only in his imagination.</p>
            <cite>— SEC Litigation Release LR-22798</cite>
          </blockquote>
        </div>
      </section>

      {/* CHAPTER 2 — THE SCHEME */}
      <section className="chapter ch2" style={{ position: 'relative' }}>
        <MoneyRain count={18} />
        <div
          className="ch2-corner-prop reveal-r"
          role="img"
          aria-label="Clay illustration of a Saudi-prince character standing beside an empty, toppled oil drum, holding a $39.00 price tag"
          style={{ backgroundImage: 'url(assets/zada-empty-barrel.webp)' }}
        />
        <div className="chapter-inner" style={{ position: 'relative', zIndex: 2 }}>
          <div className="chapter-num">02</div>
          <h2 className="reveal-l">THE SCHEME</h2>
          <p className="lede reveal">
            <strong>Zero oil was purchased. Zero trades were executed.</strong> Zero investment activity of
            any kind occurred across <strong>twelve years</strong>. Investor funds went into bank accounts
            Zada controlled, then split two ways: paying earlier investors their "interest" in the classic
            Ponzi recycling loop, and funding the lifestyle that made the next round of investment seem rational.
            Of the ~<strong>$27.50M</strong> the SEC documented flowing through the scheme between 2006 and 2009 alone,
            roughly <strong>$12.40M</strong> was recycled back to investors as fake "returns" — and the
            remaining <strong>$15.00M</strong> went to Zada.
          </p>
          <p className="lede reveal">
            There were no fabricated brokerage statements, no phantom custodial accounts, no offshore entities.
            <em> The absence was the fraud.</em> The spending — the $12.00M stable, the mansions in Wellington
            and Grosse Pointe Shores, the Olympic-class horses, the dressage sponsorships bearing his
            company's name — wasn't a byproduct. It was the engine.
          </p>

          <div className="kinetic">
            <span className="row r1 reveal-l">HE PROMISED</span>
            <span className="row r2 reveal">48% A YEAR.</span>
            <span className="row r3 reveal-l"><span className="strikeout">SAUDI OIL.</span> SECRET BOARD. <span className="strikeout">ROYAL ACCESS.</span></span>
            <span className="row r4 reveal-zoom">NONE OF IT REAL.</span>
          </div>

          <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', marginTop: 60 }}>
            <SlamStamp color="var(--red)" rot={-10}>FRAUD</SlamStamp>
            <SlamStamp color="var(--gold)" rot={6} delay={150}>PONZI</SlamStamp>
            <SlamStamp color="var(--paper)" rot={-3} delay={300}>$55.00M</SlamStamp>
          </div>
        </div>
      </section>

      {/* CHAPTER 3 — THE VICTIMS */}
      <section className="chapter ch3 paper-tex">
        <div className="chapter-inner">
          <div className="chapter-num">03</div>
          <h2 className="reveal-l">
            <span className="underline-doodle">THE VICTIMS</span>
          </h2>
          <p className="lede reveal">
            The <strong>60+ investors</strong> Zada drew in split across two communities that never overlapped.
            In Wellington and Palm Beach he recruited through the <em>equestrian world</em>. In Grosse Pointe,
            Michigan, he recruited through <em>local social networks</em> — including a fire-rescue chief and
            the dozen firefighters who followed his lead. The largest single victim was <strong>Sergei Fedorov</strong>:
            Hall of Fame center, 1,248 NHL games, three Stanley Cups, 1994 Hart Trophy. He trusted Zada
            with approximately <strong>$43.00M</strong> — the vast majority of his career earnings.
          </p>

          <div className="victims-row">
            <div className="victim-card featured reveal-l">
              <div className="pull">HOCKEY LEGEND</div>
              <div className="avatar">🏒</div>
              <div className="role">VICTIM No. 001 · ~$43.00M</div>
              <div className="who">SERGEI FEDOROV</div>
              <p className="quote">3× Stanley Cup champion. 1994 Hart Trophy. Hockey Hall of Famer. 1,248 NHL games across an 18-year career. Trusted Zada with what represented the vast majority of his career earnings — funneled through "private Saudi oil contracts" that did not exist.</p>
              <div style={{ fontFamily: "'Special Elite', monospace", fontSize: 13, opacity: 0.7 }}>— InvestmentNews / federal court filings</div>
            </div>
            <div className="victim-card reveal-r">
              <div className="pull">EQUESTRIANS</div>
              <div className="avatar">🏇</div>
              <div className="role">VICTIMS · ~$8.00M COMBINED</div>
              <div className="who">THE WELLINGTON CIRCLE</div>
              <p className="quote"><strong>Robert Dover</strong> — 6-time U.S. Olympic dressage rider, the most decorated American in his sport — invested ~$4.00M. <strong>Robert Ross</strong>, another prominent equestrian, invested ~$4.00M. Both filed civil suits in Palm Beach County in 2008. According to court records, neither has been paid.</p>
              <div style={{ fontFamily: "'Special Elite', monospace", fontSize: 13, opacity: 0.7 }}>— Chronicle of the Horse</div>
            </div>
          </div>

          <div className="victims-row" style={{ marginTop: 28 }}>
            <div className="victim-card reveal-l">
              <div className="pull">FIRST RESPONDERS</div>
              <div className="avatar">🚒</div>
              <div className="role">VICTIMS · ~$700.00K + DOZENS MORE</div>
              <div className="who">THE GROSSE POINTE CREW</div>
              <p className="quote">A Palm Beach fire-rescue district chief invested ~$700,000.00. <strong>Twelve firefighters followed their chief in</strong>, each handing over savings accumulated across decades of public-service paychecks. None of it was placed in any market. All of it paid for chandeliers.</p>
              <div style={{ fontFamily: "'Special Elite', monospace", fontSize: 13, opacity: 0.7 }}>— DOJ Press Release</div>
            </div>
            <div className="victim-card reveal-r">
              <div className="pull">EVERYONE ELSE</div>
              <div className="avatar">📒</div>
              <div className="role">VICTIMS · ~60 TOTAL</div>
              <div className="who">THE ROLODEX</div>
              <p className="quote">A veterinarian. A jeweler. A pawnbroker. Schoolteachers, mechanics, neighbors. The socioeconomic range of victims was, in the words of the SEC's filing, "extraordinary." All bound by one thing: they trusted a man who owned beautiful horses and claimed to know Saudi princes.</p>
              <div style={{ fontFamily: "'Special Elite', monospace", fontSize: 13, opacity: 0.7 }}>— SEC LR-22919</div>
            </div>
          </div>
        </div>
      </section>

      {/* CHAPTER 4 — TIMELINE */}
      <section className="chapter ch4 paper-tex">
        <div className="chapter-inner">
          <div className="chapter-num">04</div>
          <h2 className="reveal-l">THE FALL</h2>

          <div className="timeline">
            {[
              { yr: '1998', ev: 'The pitch begins', det: 'Zada starts pitching "private Saudi oil deals" with 48% guaranteed returns. The first checks clear. The first "interest payments" land on time — paid out of the next victim\'s deposit.' },
              { yr: 'Early 2000s', ev: 'The stable goes up', det: 'Zada builds a $12.00M, 10-acre stable adjacent to the Palm Beach International Equestrian Center. Marble floors. 20 mahogany stalls. Chandeliers. He acquires Custom Made — Olympic gold-medal eventing horse.' },
              { yr: '2008', ev: 'First lawsuits', det: 'Robert Dover and Robert Ross file civil suits in Palm Beach County seeking recovery of their investments. Zada tells them a billion-dollar inheritance from the Saudi royal family is on the way.' },
              { yr: '2009', ev: 'Collapse', det: 'New investor capital can no longer service the promised returns. Withdrawals freeze. The scheme implodes after twelve years and ~$55.00M raised from 60+ investors.' },
              { yr: 'Nov 10, 2010', ev: 'SEC files civil complaint', det: 'U.S. District Court, Eastern District of Michigan. Charges: securities fraud, sale of unregistered securities, material misrepresentations. Receivership begins.', cuffed: true },
              { yr: 'Sep 4, 2013', ev: 'Federal indictment', det: 'Federal grand jury in the Southern District of Florida indicts Zada on 27 counts: mail fraud, wire fraud, money laundering, interstate transport of stolen property.' },
              { yr: 'Jan 31, 2014', ev: 'SEC final judgment', det: '$121,657,741.00 ordered: $56.50M disgorgement + $8.50M prejudgment interest + $56.50M civil penalty. Uncollectible. The money is gone.' },
              { yr: 'Sep 3, 2015', ev: 'Convicted', det: 'After a 6-week jury trial, guilty on 15 of 27 counts — all 15 for mail fraud. Each count carries a statutory max of 20 years.', guilty: true },
              { yr: '2016', ev: 'Sentenced', det: 'U.S. District Judge Kenneth Marra sentences Zada to 210 months — 17 years, 6 months — in federal prison, followed by supervised release.' },
              { yr: 'Aug 2017', ev: '11th Circuit affirms', det: 'Both the conviction and the 210-month sentence upheld in full on appeal. Combined civil + criminal liability exceeds $175.00M.' },
              { yr: 'May 2020', ev: 'Home confinement', det: 'Transferred to home confinement under the CARES Act — reportedly to his Grosse Pointe Shores mansion. The man who built a $12.00M stable with stolen money serves the rest of his sentence in the home that stolen money paid for.' },
            ].map((t, i) => (
              <div key={i} className={`timeline-item reveal-l ${t.guilty ? 'guilty' : ''} ${t.cuffed ? 'cuffed' : ''}`}>
                <div className="yr">{t.yr}</div>
                <div className="ev">{t.ev}</div>
                <div className="det">{t.det}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CHAPTER 5 — VERDICT */}
      <section className="chapter ch5">
        <div className="chapter-inner">
          <div className="chapter-num">05</div>
          <h2 className="reveal" style={{ color: 'var(--paper)' }}>THE VERDICT</h2>
          <SlamStamp color="var(--paper)" rot={-6}>
            <span style={{ fontSize: 'clamp(60px,14vw,200px)', display: 'inline-block', padding: '0 30px' }}>GUILTY</span>
          </SlamStamp>
          <div className="verdict-meta reveal">
            <div className="v-item">210 MONTHS</div>
            <div className="v-item">15× MAIL FRAUD</div>
            <div className="v-item">S.D. FLORIDA</div>
            <div className="v-item">$175.00M+ TOTAL LIABILITY</div>
          </div>

          <blockquote className="pullquote dark reveal">
            <p>Zada orchestrated a years-long, massive fraud and posed a substantial risk of loss to investors, with $18.80M misappropriated.</p>
            <cite>— U.S. Attorney's Office, Southern District of Florida (DOJ Press Release)</cite>
          </blockquote>
        </div>
      </section>

      {/* CHAPTER 6 — WHAT WAS LOST */}
      <section className="chapter ch6 paper-tex">
        <div className="chapter-inner">
          <div className="chapter-num">06</div>
          <h2 className="reveal-l">WHAT WAS LOST</h2>
          <p className="lede reveal">
            Had the same <strong>$55.00M</strong> simply sat in a boring S&amp;P 500 index fund — no
            Saudi princes, no chandeliers, no $12.00M stable, no Wolfgang — Fedorov would still have his
            career earnings. Robert Dover would be remembered purely for six Olympic Games. Chief Guyn
            would have his retirement. The twelve firefighters would still trust their colleague's judgment.
            <em> The veterinarian, the jeweler, the pawnbroker</em> would each have a brokerage statement
            instead of a victim-impact filing.
          </p>
          <div className="counterfactual reveal">
            <div className="counterfactual-eyebrow">★ THE ALTERNATE TIMELINE ★</div>
            <div className="counterfactual-title">PLAN B:<br />BORING<br />WORKED.</div>
            <div className="counterfactual-number">$412.00M</div>
            <div className="counterfactual-caption">
              What that $55.00M would be worth today (Jan 1, 2026) — a <strong>7.49× multiple</strong>,
              dividends reinvested.
            </div>
            <div className="counterfactual-source">
              S&amp;P 500 total-return index, January 2006 entry (midpoint of the 1998–2009 fraud window).
              Source: Official Data Foundation · officialdata.org/us/stocks/s-p-500/2006
            </div>
          </div>
          <p className="lede reveal" style={{ marginTop: 40 }}>
            The whole apparatus — the fake princes, the phantom oil tankers, the $12.00M horse barn that
            doubled as a stage set, the man called Wolfgang, the man called Zarrouk — was unnecessary.
            <strong> A boring index fund would have outperformed the best returns Zada ever promised.</strong>
            <br /><br />
            What was destroyed here wasn't just capital. It was the ordinary expectation that the people
            you trust with your money will not spend it on costumes.
          </p>
        </div>
      </section>

      {/* NEXT CTA */}
      <section className="next-cta">
        <h3>The book has <em>more pages</em>.</h3>
        <p>Zada is one of six. Five more villains, five more athletes whose money disappeared into "exclusive deals" with people they trusted. Coming chapter by chapter.</p>
        <div className="btns">
          <button className="btn" onClick={onBack}>← Back to the Lineup</button>
          <button className="btn ghost" onClick={onOpenVideo}>▶ Watch the Video</button>
        </div>
      </section>

      <footer>
        <div>© THE BOOK OF BAD — VOLUME I</div>
        <div>FILE 01/06 · JOSEPH ZADA · ARRESTED 2010 · SENTENCED 2015–16</div>
      </footer>
    </div>
  );
};

const Nav = ({ onBack, meta = 'CASE 01 / 06 · JOSEPH ZADA' }) => {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 80);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`top ${show ? 'show' : ''}`}>
      <div className="brand" onClick={onBack}>
        <div className="dot" />
        <span>THE BOOK OF BAD</span>
        <span className="brand-edition" aria-label="NHL Edition 2026">NHL <em>EDITION</em></span>
      </div>
      <div className="meta">{meta}</div>
    </nav>
  );
};

Object.assign(window, { ZadaStory, Nav });
