// Charles Banks story page — Tim Duncan's advisor
// Case 03 / 06

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

  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} meta="CASE 03 / 06 · CHARLES BANKS" />

      {/* 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/banks-mugshot.webp" alt="Charles Banks mugshot" />
            <div className="mug-tags tag-a">EVIDENCE&nbsp;#003</div>
            <div className="mug-tags tag-b">CASE: BANKS-2017</div>
          </div>

          <div className="villain-name-block">
            <div className="file">CASE FILE No. 03 &nbsp;//&nbsp; THE BOOK OF BAD</div>
            <h1>
              CHARLES
              <span className="last">BANKS</span>
            </h1>
            <div className="tagline">
              The Atlanta wealth manager who bankrupted an NBA legend through <u>twelve years of hidden commissions</u>.
            </div>

            <div className="quick-stats">
              <div className="stat">
                <div className="k">Stolen</div>
                <div className="v">$20.00M+</div>
              </div>
              <div className="stat">
                <div className="k">Victim</div>
                <div className="v">Duncan</div>
              </div>
              <div className="stat">
                <div className="k">Sentence</div>
                <div className="v">48 mos</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 && 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>

      {/* WEALTH DESTROYED BANNER */}
      <section className="wealth-destroyed">
        <div className="wealth-eyebrow">★ THE SLOW DRIP · 2005 — 2017 ★</div>
        <div className="wealth-total">$20,000,000.00<span>+</span></div>
        <div className="wealth-label">WEALTH DESTROYED</div>
        <div className="wealth-breakdown">
          <span><strong>$2.50M</strong> / year</span>
          <span><strong>$208.00K</strong> / month</span>
          <span><strong>$48.00K</strong> / week</span>
          <span><strong>$6,849.00</strong> / day</span>
        </div>
      </section>

      {/* MARQUEE STRIP */}
      <div className="stamp-strip">
        <div className="track">
          <span>★ HIDDEN COMMISSIONS ★</span>
          <span className="r">UNDISCLOSED CONFLICTS</span>
          <span>★ GAMEDAY ENT. · $7.50M LOAN ★</span>
          <span className="r">"AMENDMENT" THAT WASN'T</span>
          <span>★ TIM DUNCAN · $20.00M LOSS ★</span>
          <span className="r">48 MONTHS FEDERAL</span>
          <span>★ HIDDEN COMMISSIONS ★</span>
          <span className="r">UNDISCLOSED CONFLICTS</span>
          <span>★ GAMEDAY ENT. · $7.50M LOAN ★</span>
          <span className="r">"AMENDMENT" THAT WASN'T</span>
          <span>★ TIM DUNCAN · $20.00M LOSS ★</span>
          <span className="r">48 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">
            Tim Duncan arrived in San Antonio in 1997 — a 21-year-old from the U.S. Virgin Islands by way
            of Wake Forest, the first overall pick, and a young man who had never asked for fame and
            <em> did not particularly want it</em>. He drove a beat-up <strong>Chevy Cavalier</strong> to practice. He wore
            T-shirts to team dinners. He spent 19 seasons becoming arguably the greatest power forward
            in NBA history without ever demanding the spotlight.
          </p>
          <p className="lede reveal">
            His financial philosophy matched his personality: <strong>conservative, quiet, delegated to someone
            he trusted</strong>. That someone was <strong>Charles Augustus Banks IV</strong> — a polished Atlanta
            wealth manager at <strong>CSI Capital Management</strong>, a firm specializing in pro athletes.
            Banks was older, well-connected, fluent in money. The kind of person a quiet 21-year-old might
            reasonably entrust with everything. <em>The relationship would last nearly two decades.</em>
          </p>

          <div className="panels">
            <div className="panel reveal-l paper-tex">
              <div className="panel-num">①</div>
              <div className="panel-title">The Mentor</div>
              <div className="panel-art has-image" style={{ backgroundImage: 'url(assets/banks-panel-mentor.webp)' }} aria-label="Clay illustration of Charles Banks in a suit shaking hands with Tim Duncan in a Spurs tracksuit outside the Terroir Life office." />
              <div className="panel-cap">Banks rises through CSI's ranks: EVP in 1997, ownership stake in 1999, president by 2001.</div>
            </div>
            <div className="panel reveal">
              <div className="panel-num">②</div>
              <div className="panel-title">The Trust</div>
              <div className="panel-art has-image" style={{ backgroundImage: 'url(assets/banks-panel-trust.webp)' }} aria-label="Clay illustration of Banks at a desk swapping documents into a typewriter — labeled stacks read 'WHAT TIM SEES' and 'WHAT TIM SIGNED.'" />
              <div className="panel-cap">Two decades of total delegation. Duncan asks no questions. The advisor delivers no surprises.</div>
            </div>
            <div className="panel reveal-r paper-tex">
              <div className="panel-num">③</div>
              <div className="panel-title">The Pivot</div>
              <div className="panel-art has-image" style={{ backgroundImage: 'url(assets/banks-panel-pivot.webp)' }} aria-label="Clay illustration of Banks in a wine cellar slipping cash into a 'TERROIR' envelope on top of a 'MAYACAMAS WINE SALES' receipt." />
              <div className="panel-cap">Wine-country venture capital. Vineyards in California, New Zealand, South Africa. Duncan keeps trusting him.</div>
            </div>
          </div>

          <blockquote className="pullquote reveal">
            <p>Banks recommended that Duncan invest in companies in which Banks himself had undisclosed financial stakes — collecting commissions, receiving loans, and holding controlling interests in the very entities he told Duncan to fund.</p>
            <cite>— SEC Civil Complaint, September 2016</cite>
          </blockquote>
        </div>
      </section>

      {/* CHAPTER 2 — THE SCHEME */}
      <section className="chapter ch2" style={{ position: 'relative' }}>
        <MoneyRain count={18} />
        <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">
            The fraud was not a Ponzi scheme. There was no fictitious investment. It was simpler — and
            in some ways worse: <strong>Banks recommended companies in which he himself held undisclosed
            financial stakes</strong>. He collected commissions on Duncan's deposits. He received loans from
            the same ventures. He held controlling interests in the entities he was telling Duncan to fund.
            <em> Duncan thought he was getting independent advice. He was getting a sales pitch.</em>
          </p>

          <div className="scheme-breakdown reveal">
            <div className="scheme-block">
              <div className="scheme-num">①</div>
              <h3>The Invisible Conflict</h3>
              <p>The advisor stood to profit from every recommendation he made. Duncan could not see it because Banks did not disclose it. Total conflict, total opacity.</p>
            </div>
            <div className="scheme-block">
              <div className="scheme-num">②</div>
              <h3>The Investments</h3>
              <p>Between approximately 2005 and 2013: Terroir Capital's hotel fund, its winery fund, beauty products, sports merchandise. Each unsuitable for a conservative investor. Each carrying undisclosed risk. Each structured so Banks profited whether Duncan did or not.</p>
            </div>
            <div className="scheme-block">
              <div className="scheme-num">③</div>
              <h3>The Gameday Trap</h3>
              <p>2012: Banks persuades Duncan to loan <strong>$7.50M</strong> to Gameday Entertainment, LLC — the apparel company where Banks served as chairman of the board and held a controlling interest. Promised: <strong>12% interest</strong> over 5 years, "first position" security. Promised: a <strong>matching second investor</strong>. The second investor did not exist.</p>
            </div>
            <div className="scheme-block">
              <div className="scheme-num">④</div>
              <h3>The Amendment That Wasn't</h3>
              <p>Banks later presents Duncan with what he calls an "amendment" — supposedly to <em>reduce</em> Duncan's exposure by $1.50M. It was not an amendment. It was a brand-new <strong>$6.00M loan</strong> in which Duncan unknowingly subordinated his first-position security on the original $7.50M. In one signing: from secured to unsecured, with <strong>$13.50M total exposure</strong> to a single Banks-controlled company.</p>
            </div>
          </div>

          <div className="kinetic">
            <span className="row r1 reveal-l">HE RECOMMENDED</span>
            <span className="row r2 reveal">HIS OWN COMPANIES.</span>
            <span className="row r3 reveal-l"><span className="strikeout">FIRST POSITION.</span> 12%. <span className="strikeout">SECOND INVESTOR.</span></span>
            <span className="row r4 reveal-zoom">ALL THEATER.</span>
          </div>

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

      {/* CHAPTER 3 — THE VICTIM */}
      <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 VICTIM</span>
          </h2>
          <p className="lede reveal">
            <strong>Tim Duncan</strong> was the kind of athlete who shouldn't have been a victim. He was the
            understated superstar — quiet, conservative, allergic to the spotlight. He earned approximately
            <strong> $242.00M</strong> in NBA salary across 19 seasons, won <strong>5 championships</strong>, took
            home <strong>2 MVPs</strong>, made <strong>15 All-Star teams</strong>, and was named Finals MVP three times. He
            was the player least likely, in anyone's estimation, to be defrauded. <em>And he was.</em>
          </p>

          <div className="victims-row">
            <div className="victim-card featured reveal-l" style={{ gridColumn: '1 / -1' }}>
              <div className="pull">THE NAME ON THE BANNER</div>
              <div className="avatar">🏀</div>
              <div className="role">VICTIM No. 001 · ~$20.00M</div>
              <div className="who">TIM DUNCAN</div>
              <p className="quote">5× NBA Champion (1999, 2003, 2005, 2007, 2014). 2× MVP. 15× All-Star. 3× Finals MVP. The first overall pick in 1997 and arguably the greatest power forward in basketball history. Drove a Chevy Cavalier. Wore T-shirts to dinner. Hired Banks at age 21 and trusted him for 20 years.</p>
              <div style={{ fontFamily: "'Special Elite', monospace", fontSize: 13, opacity: 0.7 }}>— Basketball Reference / Spotrac</div>
            </div>
          </div>

          <blockquote className="pullquote reveal" style={{ marginTop: 40 }}>
            <p>I thought, for the most part, I was keeping an eye on things. You have to have people checking on people checking on people. I did that for a while. Obviously, I got to a point where the people I trusted were checking on themselves.</p>
            <cite>— Tim Duncan (InvestmentNews)</cite>
          </blockquote>
        </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: '1997', ev: 'The relationship begins', det: 'Banks (CSI Capital, Atlanta) takes on Duncan as a client. Duncan is 21, fresh from Wake Forest, freshly drafted #1 overall.' },
              { yr: '~2007', ev: 'The pivot', det: 'Banks leaves CSI to found Terroir Capital — wine-country venture capital. The advisory relationship continues. Banks starts recommending Duncan invest in Banks\' own ventures.' },
              { yr: '2005 — 2013', ev: 'The slow drip', det: '~$20.00M flows from Duncan into Terroir-adjacent vehicles: hotels, wineries, beauty products. Each carries an undisclosed Banks stake.' },
              { yr: '2012', ev: 'The Gameday loan', det: 'Banks persuades Duncan to loan $7.50M to Gameday Entertainment at 12% / 5 yrs / "first position." The promised matching second investor does not exist.' },
              { yr: '2012 — 2013', ev: 'The "amendment"', det: 'Banks presents an "amendment" to the $7.50M deal that is actually a new $6.00M loan subordinating Duncan from first position to last. Total exposure: $13.50M.' },
              { yr: '2013', ev: 'The divorce', det: 'Duncan\'s divorce proceedings trigger a granular review of family finances. Millions are unaccounted for. The advisory relationship\'s rot becomes visible.' },
              { yr: 'Jan 2015', ev: 'Civil suit filed', det: 'Duncan files in U.S. District Court for the Western District of Texas — losses exceeding $20.00M, breach of fiduciary duty, fraud, undisclosed conflicts.' },
              { yr: 'Sep 2016', ev: 'Indicted', det: 'Federal grand jury (W.D. Texas) indicts Banks on 2 counts of wire fraud (max 20 yrs each). SEC files parallel civil complaint. Banks arrested in San Antonio.', cuffed: true },
              { yr: 'Apr 3, 2017', ev: 'Pleads guilty', det: 'Banks pleads guilty to 1 count of wire fraud before U.S. District Judge Fred Biery.', guilty: true },
              { yr: 'Jun 28, 2017', ev: 'Sentenced', det: 'Judge Biery sentences Banks to 48 months federal prison + $7.50M restitution + 3 yrs supervised release. Below the 78-97 month guidelines but well above the probation Banks\' team requested.' },
              { yr: 'Sep 5, 2017', ev: 'Reports to prison', det: 'Banks agrees to sell his stake in Napa\'s Mayacamas Vineyards to satisfy restitution. Reports to federal prison.' },
              { yr: 'Jan 2018', ev: 'Civil settlement', det: 'Duncan settles civil suits against Banks for $7.50M — same as the criminal restitution. Litigation ends. Of the ~$20.00M loss, $12.50M will never be recovered.' },
              { yr: 'Jul 2018', ev: '5th Cir. affirms', det: 'Fifth Circuit Court of Appeals upholds conviction and sentence. Affirms the $13.50M actual-loss calculation and the sentencing enhancement. SEC bars Banks from the securities industry for life.' },
            ].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">48 MONTHS</div>
            <div className="v-item">1× WIRE FRAUD</div>
            <div className="v-item">W.D. TEXAS</div>
            <div className="v-item">$7.50M RESTITUTION</div>
          </div>

          <blockquote className="pullquote dark reveal">
            <p>Judge Biery, you may not understand how difficult it is for me to be in the public light in this horrible way — as the poster child for a dumb athlete whose financial adviser took his money.</p>
            <cite>— Tim Duncan, victim impact statement at sentencing, June 2017</cite>
          </blockquote>

          <blockquote className="pullquote dark reveal">
            <p>I certainly have the power to [let you withdraw your guilty plea] and we'll let your mother come and watch the government prove not only this count but prove everything else against you. Now, do you want to do that?</p>
            <cite>— U.S. District Judge Fred Biery, addressing Banks at sentencing after 100+ leniency letters arrived</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>$20.00M</strong> simply sat in an index fund — no Gameday Entertainment,
            no phantom second investor, no "amendment" designed to strip a first-position lien from a man
            who didn't know his lien had been stripped — Duncan would not have stood in a federal courtroom
            calling himself <em>"the poster child for a dumb athlete."</em> The $20.00M would not have funded
            <strong> Charles Banks' wine-country ambitions</strong>. It would have funded
            <strong> Tim Duncan's grandchildren's futures</strong>.
          </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">$95.00M+</div>
            <div className="counterfactual-caption">
              What that $20.00M would be worth today in an S&amp;P 500 total-return index — and the
              compounding hasn't stopped. The damage is still growing.
            </div>
            <div className="counterfactual-source">
              S&amp;P 500 total-return index, dividends reinvested, midpoint-of-fraud entry (~2009).
            </div>
          </div>
          <p className="lede reveal" style={{ marginTop: 40 }}>
            Duncan said it himself: <em>"I'm a man of my word and assumed other people would be."</em>
            That assumption, applied to a passive index fund, would have required no faith at all — only
            patience. <strong>5 championships earned by trusting the system. $20.00M lost by trusting one
            person inside it.</strong>
          </p>
        </div>
      </section>

      {/* NEXT CTA */}
      <section className="next-cta">
        <h3>The book has <em>more pages</em>.</h3>
        <p>Banks is one of six. Four more cases coming — every one of them a different way the same trust gets weaponized.</p>
        <div className="btns">
          <button className="btn" onClick={onBack}>← Back to the Lineup</button>
          {onOpenVideo && <button className="btn ghost" onClick={onOpenVideo}>▶ Watch the Video</button>}
        </div>
      </section>

      <footer>
        <div>© THE BOOK OF BAD — VOLUME I</div>
        <div>FILE 03/06 · CHARLES BANKS · INDICTED 2016 · SENTENCED 2017</div>
      </footer>
    </div>
  );
};

Object.assign(window, { BanksStory });