// Jennifer Guertin story page — OMHA director of finance who stole $2.40M in 35 days
// Case 04 / 06

const GuertinStory = ({ onBack, onOpenVideo }) => {
  const [mode, setMode] = React.useState('read');
  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 04 / 06 · JENNIFER GUERTIN" />

      {/* 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/guertin-mugshot.webp" alt="Jennifer Guertin mugshot" />
            <div className="mug-tags tag-a">EVIDENCE&nbsp;#004</div>
            <div className="mug-tags tag-b">CASE: GUERTIN-2021</div>
          </div>

          <div className="villain-name-block">
            <div className="file">CASE FILE No. 04 &nbsp;//&nbsp; THE BOOK OF BAD</div>
            <h1>
              JENNIFER
              <span className="last">GUERTIN</span>
            </h1>
            <div className="tagline">
              The OMHA's director of finance for 17 years. Then in <u>35 days she took $2.40M</u>.
            </div>

            <div className="quick-stats">
              <div className="stat">
                <div className="k">Stolen</div>
                <div className="v">$2.40M</div>
              </div>
              <div className="stat">
                <div className="k">In</div>
                <div className="v">35 days</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">★ 35 DAYS · ONE EMPLOYEE · ZERO ALERTS ★</div>
        <div className="wealth-total">$2,400,000.00</div>
        <div className="wealth-label">WEALTH DESTROYED</div>
        <div className="wealth-breakdown">
          <span><strong>84</strong> transactions</span>
          <span><strong>3×</strong> $1.00M wires</span>
          <span><strong>~$28.00K</strong> avg / tx</span>
          <span><strong>0</strong> alerts triggered</span>
        </div>
      </section>

      {/* MARQUEE STRIP */}
      <div className="stamp-strip">
        <div className="track">
          <span>★ 17 YEARS UNCHECKED ACCESS ★</span>
          <span className="r">OMHA · 300,000 KIDS</span>
          <span>★ 84 TRANSACTIONS · 35 DAYS ★</span>
          <span className="r">3 × $1,000,000.00 WIRES</span>
          <span>★ LARGEST YOUTH-SPORTS THEFT IN N.A. ★</span>
          <span className="r">48 MONTHS CUSTODY</span>
          <span>★ 17 YEARS UNCHECKED ACCESS ★</span>
          <span className="r">OMHA · 300,000 KIDS</span>
          <span>★ 84 TRANSACTIONS · 35 DAYS ★</span>
          <span className="r">3 × $1,000,000.00 WIRES</span>
          <span>★ LARGEST YOUTH-SPORTS THEFT IN N.A. ★</span>
          <span className="r">48 MONTHS CUSTODY</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">
            The registration table sat just inside the arena lobby, between the trophy case and the door
            to the ice. Every September across Ontario, parents lined up at tables like this one to write
            checks for tryout fees, league registrations, tournament deposits — money flowing into the
            accounts of the <strong>Ontario Minor Hockey Association</strong>. Founded in 1935. The
            <em> largest minor hockey governing body in the world</em>: 300,000 participants, 260+
            member associations, 31 leagues, ~600 development clinics a year, ~$8.70M annual revenue.
          </p>
          <p className="lede reveal">
            <strong>Jennifer Guertin</strong> was hired to manage the OMHA's money. She controlled the bank
            accounts, the accounting system, and the computer infrastructure that recorded every dollar.
            She produced the financial reports the volunteer board relied on for governance. She held
            this role for <strong>17 years</strong>. <em>The tenure was not incidental. It was the architecture.</em>
            Seventeen years without a second pair of eyes on the accounts she controlled. Seventeen years
            in which the board's financial literacy was the OMHA's director of finance.
          </p>
          <p className="lede reveal">
            <strong>The trust was total.</strong> The promise was simple: the money parents paid to let their
            children play hockey would be used for hockey. That promise required someone to manage the
            money. <em>The money required someone to watch.</em>
          </p>

          <div className="panels">
            <div className="panel reveal-l paper-tex">
              <div className="panel-num">①</div>
              <div className="panel-title">The Org</div>
              <div className="panel-art has-image" style={{ backgroundImage: 'url(assets/guertin-panel-org.webp)' }} aria-label="Clay illustration of OMHA youth hockey players on the ice with parents bundled up watching from the stands behind the glass." />
              <div className="panel-cap">The largest minor hockey governing body in the world. Volunteer board. ~$8.70M annual revenue. Headquartered in Richmond Hill, Ontario.</div>
            </div>
            <div className="panel reveal">
              <div className="panel-num">②</div>
              <div className="panel-title">The Role</div>
              <div className="panel-art has-image" style={{ backgroundImage: 'url(assets/guertin-panel-role.webp)' }} aria-label="Clay illustration of Jennifer Guertin signing a stack of cheques at her OMHA desk under a 'Director of Finance' nameplate." />
              <div className="panel-cap">Bank access, accounting system, computer infrastructure, board reporting. One employee. Every lever.</div>
            </div>
            <div className="panel reveal-r paper-tex">
              <div className="panel-num">③</div>
              <div className="panel-title">The Tenure</div>
              <div className="panel-art has-image" style={{ backgroundImage: 'url(assets/guertin-panel-tenure.webp)' }} aria-label="Clay illustration of Guertin under a 'Finance Oversight: J. Guertin' plaque holding two folders — 'OMHA Books' and 'My Account' — with cash slipping between them." />
              <div className="panel-cap">No dual-auth requirement on transfers. No independent reconciliation. No board member with raw bank statements. The trust was total. The verification was zero.</div>
            </div>
          </div>

          <blockquote className="pullquote reveal">
            <p>Investigators determined that during the accused's tenure as director of finance, she had stolen approximately $2.40M dollars from the association.</p>
            <cite>— York Regional Police, Financial Crimes Unit (October 2021)</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">
            What made the scheme possible was not technical sophistication. <strong>It was structural absence.</strong>
            Guertin was not a hacker. <em>She was the system.</em> The fraud required no accomplice, no
            forged documents, no external conspiracy. It required only the absence of a second pair
            of eyes — and the OMHA had granted her that absence on her first day and never revoked it.
          </p>

          <div className="scheme-breakdown reveal">
            <div className="scheme-block">
              <div className="scheme-num">①</div>
              <h3>The Mechanics</h3>
              <p>A structural flaw existed since hire-day: a <strong>secondary OMHA bank account</strong> Guertin alone controlled. Across a 6-month window in 2018, she executed <strong>84 transactions</strong> on 35 active days, moving money from the primary operating account to the secondary, then to her personal credit cards. <strong>3 of those transfers were $1,000,000.00 each.</strong> None triggered an alert. None required a second signature.</p>
            </div>
            <div className="scheme-block">
              <div className="scheme-num">②</div>
              <h3>The Velocity</h3>
              <p>The timing was precise. The theft hit during <strong>peak registration season</strong>, when the largest volume of incoming payments — tryout fees, league registrations, tournament deposits — flowed through OMHA accounts. ~$28,571.00 per transaction. Nearly 2.4 transactions per day. <em>That is not the cadence of someone testing limits. It is the cadence of someone executing on a timeline she controlled.</em></p>
            </div>
            <div className="scheme-block">
              <div className="scheme-num">③</div>
              <h3>The Access Architecture</h3>
              <p>The OMHA is a volunteer-governed organization. The board members who oversaw Guertin's work were hockey volunteers — not financial auditors. They relied on the director of finance to report what the finances showed. <strong>She showed them what she wanted.</strong> No dual-authorization on transfers. No independent reconciliation of registration deposits. No board member with raw bank statements.</p>
            </div>
            <div className="scheme-block">
              <div className="scheme-num">④</div>
              <h3>The Confession</h3>
              <p>The fraud did not unravel because someone caught it. <strong>It unraveled because the money ran out.</strong> Guertin walked into Executive Director Ian Taylor's office and confessed — not as an act of conscience, but as an act of arithmetic. She had taken enough that the OMHA's primary account could no longer cover an upcoming scheduled payment.</p>
            </div>
          </div>

          <div className="kinetic">
            <span className="row r1 reveal-l">17 YEARS.</span>
            <span className="row r2 reveal">35 DAYS.</span>
            <span className="row r3 reveal-l"><span className="strikeout">SECOND SIGNATURE.</span> 84 TXS. <span className="strikeout">DUAL AUTH.</span></span>
            <span className="row r4 reveal-zoom">ZERO ALERTS.</span>
          </div>

          <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', marginTop: 60 }}>
            <SlamStamp color="var(--red)" rot={-10}>BREACH</SlamStamp>
            <SlamStamp color="var(--gold)" rot={6} delay={150}>OF TRUST</SlamStamp>
            <SlamStamp color="var(--paper)" rot={-3} delay={300}>$2.40M</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">
            There is no celebrity victim in this case. There is an <strong>institution</strong> — and behind
            the institution, <strong>300,000 kids</strong> and the families who paid to let them play.
            The OMHA, an organization whose entire revenue depends on the willingness of those families
            to trust that registration money will be used for hockey, absorbed a <strong>$2.40M hole</strong>
            in its balance sheet. <em>The remaining $2.30M was never recovered.</em>
          </p>

          <div className="victims-row">
            <div className="victim-card featured reveal-l" style={{ gridColumn: '1 / -1' }}>
              <div className="pull">THE INSTITUTION</div>
              <div className="avatar">🏒</div>
              <div className="role">VICTIM · $2.40M HOLE · ~$8.70M ANNUAL REVENUE</div>
              <div className="who">ONTARIO MINOR HOCKEY ASSOCIATION</div>
              <p className="quote">Founded 1935. The largest minor hockey governing body in the world. 300,000 participants across 260+ member associations, 31 leagues, ~600 development clinics annually. Headquartered in Richmond Hill, Ontario. Absorbed the entire loss with no insurance payout covering the full amount.</p>
              <div style={{ fontFamily: "'Special Elite', monospace", fontSize: 13, opacity: 0.7 }}>— OMHA / CBC News</div>
            </div>
          </div>

          <div className="victims-row" style={{ marginTop: 28 }}>
            <div className="victim-card reveal-l">
              <div className="pull">THE FAMILIES</div>
              <div className="avatar">👨‍👩‍👧‍👦</div>
              <div className="role">300,000 PARTICIPANTS · 260 LOCAL CLUBS</div>
              <div className="who">THE PARENTS WHO WROTE THE CHECKS</div>
              <p className="quote">Across Ontario, parents wrote checks for tryout fees, league registrations, and tournament deposits — believing every dollar funded ice time and development for their kids. <strong>~28% of the payments coming in during the busiest registration season of 2018 were rerouted to a single employee's personal credit-card debt.</strong></p>
              <div style={{ fontFamily: "'Special Elite', monospace", fontSize: 13, opacity: 0.7 }}>— CBC Sports investigation</div>
            </div>
            <div className="victim-card reveal-r">
              <div className="pull">THE GOVERNANCE</div>
              <div className="avatar">📋</div>
              <div className="role">VOLUNTEER BOARD · 17 YR BLIND SPOT</div>
              <div className="who">THE PEOPLE WHO TRUSTED HER</div>
              <p className="quote">The board members overseeing Guertin's work were hockey volunteers — coaches, parents, league administrators — not financial auditors. Their oversight model was: receive the finance director's reports and trust them. <strong>For 6,205 days, no one independently verified what those reports showed against what the bank account actually held.</strong></p>
              <div style={{ fontFamily: "'Special Elite', monospace", fontSize: 13, opacity: 0.7 }}>— Newmarket Today / York Regional Police</div>
            </div>
          </div>

          <blockquote className="pullquote reveal" style={{ marginTop: 48 }}>
            <p>The theft is believed to be the largest amount of money ever stolen from a North American youth sports organization.</p>
            <cite>— CBC Sports Investigation, November 19, 2020</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: '~2001', ev: 'Hired as director of finance', det: 'Guertin takes over the OMHA\'s books, banking access, accounting system, and the secondary account no one else will touch for the next 17 years.' },
              { yr: '2001 — 2018', ev: '6,205 days of unchecked access', det: 'No dual-authorization required on transfers. No independent reconciliation of registration deposits against bank statements. No board member with raw bank access. The architecture didn\'t fail — there was no architecture.' },
              { yr: '2018 (35 days)', ev: 'The execution', det: 'During peak registration season, Guertin makes 84 transactions totaling ~$2.40M. Money moves from the primary operating account into the secondary account she alone controls, then to her personal credit cards. 3 of the 84 are $1.00M wires.' },
              { yr: 'Late 2018', ev: 'The arithmetic catches up', det: 'The OMHA\'s primary account can no longer cover a scheduled payment. Guertin walks into Executive Director Ian Taylor\'s office and confesses — not because anyone has asked, but because the math has stopped working.', cuffed: true },
              { yr: 'Nov 30, 2018', ev: 'Reported to police', det: 'OMHA reports the loss to York Regional Police\'s Financial Crimes Unit. Initial estimate: ~$1.00M. The investigation will more than double that figure.' },
              { yr: 'Jun 27, 2019', ev: 'Arrested', det: 'Guertin arrested at her home in Georgina, Ontario. Search warrant executed at the residence. Charged under Canadian Criminal Code: theft over $5,000.00 (s.334), criminal breach of trust (s.336, max 14 yrs), 2× possession of property obtained by crime over $5,000.00 (s.354), unauthorized use of a computer (s.342.1).' },
              { yr: '2019 — 2021', ev: 'Two years in court', det: 'Case proceeds through the Ontario Court of Justice in Richmond Hill. The OMHA operates the entire stretch with a $2.40M hole in its balance sheet and no mechanism for recovery.' },
              { yr: 'Sep 29, 2021', ev: 'Pleads guilty to all 5 counts', det: 'Guertin pleads guilty to theft over $5,000.00, criminal breach of trust, 2 counts of possession of property obtained by crime, and unauthorized use of a computer.', guilty: true },
              { yr: 'Sep 29, 2021', ev: 'Sentenced', det: '48 months in custody. $100,000.00 restitution ordered against a $2.40M theft — a recovery rate of 4.2% (4 cents on the dollar). The remaining $2.30M is absorbed by a nonprofit whose mission is providing ice time for kids ages 6 to 21.' },
            ].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">5 / 5 COUNTS</div>
            <div className="v-item">48 MONTHS</div>
            <div className="v-item">ONT. CT. OF JUSTICE</div>
            <div className="v-item">$100.00K RESTITUTION</div>
          </div>

          <div className="death-callout reveal">
            <div className="death-eyebrow">★ THE ARITHMETIC OF CONSEQUENCE ★</div>
            <div className="death-title">4 CENTS<br/>ON THE DOLLAR.</div>
            <p className="death-body">
              $100,000.00 in restitution against a $2,400,000.00 theft = a <strong>4.2% recovery rate</strong>.
              48 months in custody = roughly <strong>20 months per million stolen</strong>, or
              <strong> 1 day of imprisonment for every $1,644.00 diverted</strong> from children's registration
              fees. Canadian law requires a 2-year mandatory minimum for fraud over $1.00M under s.380 — but
              Guertin was convicted of theft, not fraud, and the minimum did not apply. <em>The gap between
              the statutory architecture and the actual sentence is itself a data point.</em>
            </p>
            <div className="death-source">CTV News · CBC Sports · Justice Laws Website</div>
          </div>
        </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 money simply sat in the OMHA's accounts, none of this needed to happen. The 300,000
            participants would not have lost <strong>$2.40M in registration fees</strong> to the person entrusted
            with safeguarding them. York Regional Police would not have spent <strong>7 months</strong> investigating
            <strong> 84 transactions</strong> nobody inside the organization had reviewed. The volunteer board
            would not have discovered that <em>17 years of trust had been converted into 84 transactions and
            three credit-card statements</em>.
          </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">$6.40M</div>
            <div className="counterfactual-caption">
              What that $2.40M would be worth today (Jan 1, 2026) — a <strong>2.68× multiple</strong>,
              dividends reinvested. Because the entire theft compressed into a 35-day window in a single
              calendar year, the investment date requires no averaging: <strong>2018 is both start and midpoint</strong>.
            </div>
            <div className="counterfactual-source">
              S&amp;P 500 total-return index, 2018 entry, dividends reinvested.
              Source: Official Data Foundation · officialdata.org/us/stocks/s-p-500/2018
            </div>
          </div>
          <p className="lede reveal" style={{ marginTop: 40 }}>
            Every season that passes, the gap between what the OMHA <em>has</em> and what it <em>should
            have had</em> grows wider. The compounding does not stop.
            <strong> The damage is still growing.</strong>
            <br /><br />
            <strong>The structural lesson is not about Guertin's character.</strong> It is about the OMHA's
            architecture. A single employee controlled the accounting system, the bank access, the
            secondary account, and the financial reporting for 17 years. <em>The $2.40M was not stolen
            through sophistication. It was stolen through access — the same access granted on her
            first day and never independently verified for 6,205 days.</em>
          </p>
        </div>
      </section>

      {/* NEXT CTA */}
      <section className="next-cta">
        <h3>The book has <em>more pages</em>.</h3>
        <p>Guertin is one of six. Two more cases coming — every one a different lesson in why "we trust her" was never a control.</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 04/06 · JENNIFER GUERTIN · CONVICTED SEPT 2021 · ONT. CT. OF JUSTICE</div>
      </footer>
    </div>
  );
};

Object.assign(window, { GuertinStory });