// =====================================================
// TOYOTA BOSHOKU BEC ATTACK 2019 — CASE STUDY
// React JSX Cinematic Presentation
// =====================================================

const { useState, useEffect, useRef, useCallback } = React;

// ===================================================
// PARTICLES COMPONENT
// ===================================================
function Particles({ count = 20 }) {
  const particles = Array.from({ length: count }, (_, i) => ({
    id: i,
    left: `${Math.random() * 100}%`,
    delay: `${Math.random() * 8}s`,
    duration: `${6 + Math.random() * 8}s`,
    height: `${60 + Math.random() * 120}px`,
    opacity: 0.15 + Math.random() * 0.4,
  }));

  return (
    <div className="intro-particles">
      {particles.map(p => (
        <div
          key={p.id}
          className="intro-particle"
          style={{
            left: p.left,
            animationDelay: p.delay,
            animationDuration: p.duration,
            height: p.height,
            opacity: p.opacity,
          }}
        />
      ))}
      <div className="intro-scanline" />
    </div>
  );
}

// ===================================================
// LOADING SCREEN
// ===================================================
function LoadingScreen({ onDone }) {
  const [fadeOut, setFadeOut] = useState(false);

  useEffect(() => {
    const t1 = setTimeout(() => setFadeOut(true), 2600);
    const t2 = setTimeout(onDone, 3400);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [onDone]);

  return (
    <div className={`loading-screen${fadeOut ? ' fade-out' : ''}`}>
      {/* Toyota oval logo recreation */}
      <div style={{ marginBottom: '20px', position: 'relative' }}>
        <svg width="80" height="56" viewBox="0 0 80 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <ellipse cx="40" cy="28" rx="38" ry="26" stroke="rgba(235,10,30,0.6)" strokeWidth="2" fill="none"/>
          <ellipse cx="40" cy="28" rx="22" ry="26" stroke="rgba(235,10,30,0.6)" strokeWidth="2" fill="none"/>
          <ellipse cx="40" cy="10" rx="16" ry="8" stroke="rgba(235,10,30,0.6)" strokeWidth="2" fill="none"/>
        </svg>
      </div>
      <div className="loading-logo">TOYOTA BOSHOKU</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.6rem', color: 'var(--text-muted)', letterSpacing: '0.2em', marginBottom: '20px' }}>
        CORPORATION — CASE STUDY 2019
      </div>
      <div className="loading-bar-container">
        <div className="loading-bar" />
      </div>
      <div className="loading-text">INITIALIZING CASE STUDY...</div>
    </div>
  );
}

// ===================================================
// INTRO CINEMATIC SCREEN
// ===================================================
function IntroScreen({ onEnter }) {
  const [exiting, setExiting] = useState(false);

  const handleEnter = () => {
    setExiting(true);
    setTimeout(onEnter, 1200);
  };

  useEffect(() => {
    const handleKey = (e) => {
      if (e.key === 'Enter' || e.key === ' ') handleEnter();
    };
    window.addEventListener('keydown', handleKey);
    return () => window.removeEventListener('keydown', handleKey);
  }, []);

  return (
    <div className={`intro-screen${exiting ? ' exiting' : ''}`}>
      <Particles count={25} />

      {/* Background grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)',
        backgroundSize: '80px 80px',
        pointerEvents: 'none',
      }} />

      {/* Large background text */}
      <div style={{
        position: 'absolute',
        fontSize: 'clamp(8rem, 20vw, 18rem)',
        fontFamily: 'var(--font-display)',
        fontWeight: 900,
        color: 'rgba(235,10,30,0.04)',
        top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        whiteSpace: 'nowrap',
        letterSpacing: '-0.05em',
        pointerEvents: 'none',
        userSelect: 'none',
      }}>BEC</div>

      {/* Glow orb */}
      <div style={{
        position: 'absolute',
        width: '600px', height: '600px',
        background: 'radial-gradient(circle, rgba(235,10,30,0.12) 0%, transparent 70%)',
        top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        pointerEvents: 'none',
        animation: 'logoPulse 3s ease-in-out infinite',
      }} />

      <div className="intro-content">
        <div className="intro-badge">
          CLASSIFIED INCIDENT REPORT // CYBERSECURITY CASE STUDY
        </div>

        <div className="intro-title">
          <span className="intro-title-line">
            <span style={{ color: 'var(--toyota-red)' }}>TOYOTA</span>
          </span>
          <span className="intro-title-line">
            BOSHOKU
          </span>
          <span className="intro-title-line" style={{ fontSize: '0.45em', letterSpacing: '0.15em', color: 'var(--text-secondary)', fontWeight: 400 }}>
            BEC ATTACK ANALYSIS
          </span>
        </div>

        <div className="intro-divider" />

        <div className="intro-subtitle">
          A $37 Million Business Email Compromise — August 2019
        </div>

        <div className="intro-meta">
          <div className="intro-meta-item">
            <span className="intro-meta-label">Incident Date</span>
            <span className="intro-meta-value">Aug 14, 2019</span>
          </div>
          <div className="intro-meta-item">
            <span className="intro-meta-label">Financial Loss</span>
            <span className="intro-meta-value" style={{ color: 'var(--toyota-red)' }}>$37.3M</span>
          </div>
          <div className="intro-meta-item">
            <span className="intro-meta-label">Attack Type</span>
            <span className="intro-meta-value">BEC / Social Engineering</span>
          </div>
          <div className="intro-meta-item">
            <span className="intro-meta-label">Target</span>
            <span className="intro-meta-value">European Subsidiary</span>
          </div>
        </div>

        <button className="intro-enter-btn" onClick={handleEnter}>
          <span>▶ ENTER CASE STUDY</span>
        </button>

        <div style={{
          marginTop: '16px',
          fontFamily: 'var(--font-mono)',
          fontSize: '0.55rem',
          color: 'var(--text-muted)',
          letterSpacing: '0.2em',
          opacity: 0,
          animation: 'fadeInUp 0.8s ease 3s forwards',
        }}>
          PRESS ENTER OR CLICK TO BEGIN
        </div>
      </div>
    </div>
  );
}

// ===================================================
// TICKER COMPONENT
// ===================================================
function Ticker() {
  const items = [
    "TOYOTA BOSHOKU CORP. — FINANCIAL LOSS: ¥4 BILLION ($37.3M USD)",
    "INCIDENT DATE: 14 AUGUST 2019",
    "ATTACK TYPE: BUSINESS EMAIL COMPROMISE (BEC)",
    "TARGET: EUROPEAN SUBSIDIARY OF TOYOTA BOSHOKU",
    "ATTACKER IMPERSONATED: LEGITIMATE INTERNAL EXECUTIVE",
    "METHOD: FRAUDULENT WIRE TRANSFER INSTRUCTIONS VIA EMAIL",
    "STATUS: UNDER INVESTIGATION — FUNDS RECOVERY ATTEMPTED",
    "FBI IC3 REPORT 2019: BEC LOSSES EXCEEDED $1.77 BILLION GLOBALLY",
    "TOYOTA BOSHOKU CORP — TSE: 3116 — KARIYA, AICHI, JAPAN",
  ];
  const allItems = [...items, ...items];

  return (
    <div className="ticker-container">
      <div className="ticker-label">⚠ THREAT ALERT</div>
      <div className="ticker-track">
        <div className="ticker-content">
          {allItems.map((item, i) => (
            <span key={i} className="ticker-item">
              {item}<span className="ticker-sep">◆</span>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

// ===================================================
// SLIDE BACKGROUND
// ===================================================
function SlideBg({ slideIndex }) {
  return (
    <div className="slide-bg">
      <div className="slide-bg-grid" />
      <div className={`slide-bg-radial ${slideIndex % 3 === 0 ? 'red' : 'gold'}`}
        style={{ width: '500px', height: '500px' }}
      />
    </div>
  );
}

// ===================================================
// SLIDE HEADER
// ===================================================
function SlideHeader({ number, total, category, slideTitle }) {
  return (
    <div className="slide-header">
      <div className="slide-header-left">
        <div className="slide-number">{String(number).padStart(2, '0')}/{String(total).padStart(2, '0')}</div>
        <div className="slide-category">{category}</div>
      </div>
      <div className="slide-header-center">
        TOYOTA BOSHOKU BEC ATTACK — 2019
      </div>
      <div className="slide-header-right">
        CASE STUDY<br />
        <span style={{ color: 'var(--text-muted)', fontSize: '0.55rem' }}>CONFIDENTIAL</span>
      </div>
    </div>
  );
}

// ===================================================
// SLIDE 0: ABSTRACT
// ===================================================
function SlideAbstract({ isActive }) {
  const delays = [0.2, 0.35, 0.5, 0.65, 0.8, 0.95, 1.1, 1.25];
  const keywords = ['Business Email Compromise', 'Social Engineering', 'Wire Fraud', 'Toyota Boshoku', 'Financial Loss', 'BEC Attack', 'Cybersecurity', 'Incident Response'];

  return (
    <div className="slide-body">
      <div className="slide-eyebrow">Abstract</div>
      <div className="slide-title">
        The <span className="highlight">$37M</span> Deception
      </div>
      <div className="slide-title-line" />

      <div className="abstract-content">
        <div className="abstract-main">
          <div className="card card-red-top" style={{ animationDelay: '0.2s' }}>
            <div className="card-label">Overview</div>
            <div className="card-text" style={{ fontSize: '0.88rem', lineHeight: '1.8' }}>
              In August 2019, Toyota Boshoku Corporation—a premier Japanese auto parts supplier and member of the Toyota Group—became the victim of a sophisticated Business Email Compromise (BEC) attack. A fraudulent email, crafted to impersonate an internal executive or trusted business partner, successfully directed a finance employee at the company's European subsidiary to execute an unauthorized wire transfer of approximately ¥4 billion (US $37.3 million).
            </div>
          </div>

          <div className="card" style={{ animationDelay: '0.35s' }}>
            <div className="card-label">Purpose of This Study</div>
            <div className="card-text">
              This case study examines the anatomy of the attack, the vulnerabilities it exploited, the organizational and procedural failures that allowed it to succeed, and the lessons and countermeasures that enterprises—particularly in high-value supply chains—must adopt to defend against BEC threats.
            </div>
          </div>

          <div className="quote-block">
            <div className="quote-text">
              "We became aware that the directions were fraudulent shortly after the leakage. Recognizing the high possibility of criminal activity, we promptly established a team comprising legal professionals, then reported the loss to local investigating authorities."
            </div>
            <div className="quote-source">— Toyota Boshoku Corporation Official Press Release, September 6, 2019</div>
          </div>
        </div>

        <div className="abstract-sidebar">
          <div className="card" style={{ animationDelay: '0.5s' }}>
            <div className="card-label">Key Facts</div>
            <table className="detail-table">
              <tbody>
                <tr><td><strong>Victim</strong></td><td>Toyota Boshoku (EU Subsidiary)</td></tr>
                <tr><td><strong>Date</strong></td><td>August 14, 2019</td></tr>
                <tr><td><strong>Loss</strong></td><td style={{ color: 'var(--toyota-red)', fontWeight: 700 }}>¥4B (~$37.3M)</td></tr>
                <tr><td><strong>Attack Vector</strong></td><td>Email / Social Engineering</td></tr>
                <tr><td><strong>Technique</strong></td><td>Identity Impersonation + Wire Fraud</td></tr>
                <tr><td><strong>Sector</strong></td><td>Automotive Manufacturing</td></tr>
                <tr><td><strong>Recovery</strong></td><td>Ongoing (Partial)</td></tr>
              </tbody>
            </table>
          </div>

          <div className="card" style={{ animationDelay: '0.65s' }}>
            <div className="card-label">Keywords</div>
            <div className="keyword-list">
              {keywords.map((kw, i) => (
                <span
                  key={i}
                  className="keyword-tag"
                  style={{ animationDelay: `${0.7 + i * 0.08}s` }}
                >
                  {kw}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ===================================================
// SLIDE 1: EXECUTIVE SUMMARY / INTRODUCTION
// ===================================================
function SlideExecutiveSummary({ isActive }) {
  return (
    <div className="slide-body">
      <div className="slide-eyebrow">Executive Summary / Introduction</div>
      <div className="slide-title">
        A <span className="highlight">Critical</span> Wake-Up Call
      </div>
      <div className="slide-title-line" />

      <div className="tag-strip">
        <span className="badge badge-danger"><span className="badge-dot" />SEVERITY: CRITICAL</span>
        <span className="badge badge-warning">ATTACK VECTOR: EMAIL</span>
        <span className="badge badge-warning">IMPACT: FINANCIAL</span>
      </div>

      <div className="two-col" style={{ marginBottom: '20px' }}>
        <div className="card card-red-top" style={{ animationDelay: '0.2s' }}>
          <div className="card-label">The Incident</div>
          <div className="card-text">
            On <strong style={{ color: 'var(--text-primary)' }}>August 14, 2019</strong>, Toyota Boshoku Corporation disclosed that a fraudulent party had successfully manipulated a finance employee at its European operations into executing an unauthorized bank transfer of approximately <strong style={{ color: 'var(--toyota-red)' }}>¥4 billion ($37.3 million USD)</strong>. The method used was a classic Business Email Compromise—where the attacker crafted highly convincing communications that appeared to originate from trusted executives or partners.
          </div>
        </div>

        <div className="card" style={{ animationDelay: '0.35s' }}>
          <div className="card-label">Significance</div>
          <div className="card-text">
            This incident represents one of the <strong style={{ color: 'var(--text-primary)' }}>largest single-event BEC losses</strong> recorded in the automotive industry. It exposed the inherent vulnerabilities within multinational corporate finance workflows—particularly the trust-based communication channels used between headquarters and overseas subsidiaries. It sent shockwaves through the global business community regarding email-based fraud risks.
          </div>
        </div>
      </div>

      <div className="content-grid content-grid-3" style={{ marginBottom: '20px' }}>
        {[
          { val: '$37.3M', label: 'Total Loss', sub: '¥4 Billion JPY' },
          { val: '1 Email', label: 'Attack Vector', sub: 'Single fraudulent instruction' },
          { val: '75%', label: 'BEC Exposure Rate', sub: 'Businesses attacked annually' },
        ].map((s, i) => (
          <div key={i} className="stat-block" style={{ animationDelay: `${0.5 + i * 0.15}s` }}>
            <span className="stat-value">{s.val}</span>
            <div className="stat-label">{s.label}</div>
            <div className="stat-sublabel">{s.sub}</div>
          </div>
        ))}
      </div>

      <div className="card" style={{ animationDelay: '0.8s' }}>
        <div className="card-label">Why It Matters</div>
        <div className="card-text">
          BEC attacks are not malware-driven—they exploit the most difficult vulnerability to patch: <strong style={{ color: 'var(--text-primary)' }}>human trust</strong>. The Toyota Boshoku case became a landmark example of how social engineering, combined with a lack of multi-factor verification in financial processes, can bypass even sophisticated technical defenses. The FBI's 2019 Internet Crime Report identified BEC as the single costliest form of cybercrime, responsible for over $1.77 billion in losses that year alone.
        </div>
      </div>
    </div>
  );
}

// ===================================================
// SLIDE 2: BACKGROUND INFORMATION
// ===================================================
function SlideBackground({ isActive }) {
  return (
    <div className="slide-body">
      <div className="slide-eyebrow">Background Information</div>
      <div className="slide-title">
        The <span className="highlight">Target</span> & The Threat
      </div>
      <div className="slide-title-line" />

      <div className="two-col" style={{ marginBottom: '20px' }}>
        <div className="section-flex">
          <div className="card card-red-top" style={{ animationDelay: '0.2s' }}>
            <div className="card-label">About Toyota Boshoku</div>
            <div className="card-text" style={{ lineHeight: '1.8' }}>
              Toyota Boshoku Corporation (TYO: 3116), headquartered in <strong style={{ color: 'var(--text-primary)' }}>Kariya, Aichi, Japan</strong>, is a Tier-1 automotive supplier and a core member of the Toyota Group. The company specializes in seating, interior trim, filtration systems, and related components for Toyota and other automakers worldwide. With operations spanning <strong style={{ color: 'var(--text-primary)' }}>over 30 countries</strong> and annual revenues exceeding ¥1 trillion, Toyota Boshoku maintains a vast and complex global supply chain that requires constant cross-border financial transactions.
            </div>
          </div>

          <div className="card" style={{ animationDelay: '0.35s' }}>
            <div className="card-label">The European Subsidiary</div>
            <div className="card-text">
              The targeted entity was one of Toyota Boshoku's European subsidiaries—an operation deeply integrated into the company's global financial network. The subsidiary regularly processed large international wire transfers as part of normal operations, making it an attractive target for BEC operators seeking maximum financial return.
            </div>
          </div>
        </div>

        <div className="section-flex">
          <div className="card" style={{ animationDelay: '0.5s' }}>
            <div className="card-label">Understanding BEC</div>
            <div className="card-text" style={{ lineHeight: '1.8' }}>
              <strong style={{ color: 'var(--text-primary)' }}>Business Email Compromise (BEC)</strong> is a form of spear-phishing where cybercriminals impersonate trusted individuals—executives, finance officers, or vendors—to trick employees into transferring funds or sensitive information. Unlike malware attacks, BEC relies entirely on deception and social engineering. Attackers conduct extensive reconnaissance to study corporate structure, email conventions, financial workflows, and relationships before crafting their fraudulent messages.
            </div>
          </div>

          <div className="card" style={{ animationDelay: '0.65s' }}>
            <div className="card-label">BEC Threat Landscape (2019)</div>
            <div className="section-flex">
              {[
                { label: 'Global BEC Losses (2019)', pct: 0.88, display: '$1.77 Billion' },
                { label: 'Businesses Exposed Annually', pct: 0.75, display: '75%' },
                { label: 'Attacks on Corporations', pct: 0.62, display: '62% YoY Growth' },
              ].map((item, i) => (
                <div key={i} className="threat-item" style={{ animationDelay: `${0.7 + i * 0.15}s` }}>
                  <div className="threat-header">
                    <span className="threat-name">{item.label}</span>
                    <span className="threat-pct">{item.display}</span>
                  </div>
                  <div className="threat-bar-track">
                    <div className="threat-bar-fill" style={{ width: `${item.pct * 100}%` }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="quote-block">
        <div className="quote-text">
          "Business Email Compromise is one of the most financially damaging online crimes. It exploits the fact that so many of us rely on email to conduct business—both personal and professional."
        </div>
        <div className="quote-source">— FBI Internet Crime Complaint Center (IC3), 2019 Annual Report</div>
      </div>
    </div>
  );
}

// ===================================================
// SLIDE 3: PROBLEM DESCRIPTION
// ===================================================
function SlideProblem({ isActive }) {
  const timelineItems = [
    {
      code: 'T-∞',
      date: 'Weeks/Months Prior',
      title: 'Reconnaissance Phase',
      desc: 'Attackers conduct deep intelligence gathering on Toyota Boshoku—researching org structure, executive names, email formats, finance workflows, and active business relationships via LinkedIn, corporate websites, and potentially compromised emails.',
    },
    {
      code: 'T-07',
      date: 'Early August 2019',
      title: 'Preparation & Crafting',
      desc: 'Fraudulent email accounts or spoofed domains are created, closely mimicking legitimate Toyota Boshoku internal or partner email addresses. A pretext is constructed—likely a time-sensitive request for a change in banking credentials tied to a pending transaction.',
    },
    {
      code: 'T-00',
      date: 'August 14, 2019',
      title: 'Attack Execution',
      desc: 'The fraudulent email is sent to a finance employee at the European subsidiary, containing fabricated payment instructions directing a wire transfer to an attacker-controlled bank account. The email presents with high credibility.',
    },
    {
      code: 'T+01',
      date: 'Same Day / Shortly After',
      title: 'Wire Transfer Processed',
      desc: 'The finance employee, trusting the email\'s apparent legitimacy, processes the transfer of approximately ¥4 billion ($37.3M USD) to the attacker\'s account. No secondary verification was sought.',
    },
    {
      code: 'T+02',
      date: 'Shortly After Transfer',
      title: 'Fraud Detected',
      desc: 'Toyota Boshoku and the subsidiary become aware the payment instructions were fraudulent—likely when the legitimate counterparty contacts them about the unpaid invoice, or through internal reconciliation.',
    },
    {
      code: 'T+04',
      date: 'September 6, 2019',
      title: 'Public Disclosure',
      desc: 'Toyota Boshoku issues an official press release disclosing the incident, confirming the financial loss and the engagement of law enforcement and legal professionals for investigation and fund recovery.',
    },
  ];

  return (
    <div className="slide-body">
      <div className="slide-eyebrow">Problem Description</div>
      <div className="slide-title">
        Anatomy of the <span className="highlight">Attack</span>
      </div>
      <div className="slide-title-line" />

      <div className="two-col">
        <div>
          <div className="timeline">
            {timelineItems.map((item, i) => (
              <div
                key={i}
                className="timeline-item"
                style={{ animationDelay: `${0.15 + i * 0.12}s` }}
              >
                <div className="timeline-dot">{item.code}</div>
                <div className="timeline-content">
                  <div className="timeline-date">{item.date}</div>
                  <div className="timeline-title">{item.title}</div>
                  <div className="timeline-desc">{item.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="section-flex">
          <div className="card card-red-top" style={{ animationDelay: '0.2s' }}>
            <div className="card-label">Core Problem</div>
            <div className="card-text" style={{ lineHeight: '1.8' }}>
              The fundamental problem was the <strong style={{ color: 'var(--text-primary)' }}>uncritical acceptance of email instructions</strong> for large financial transactions without independent verification. The attack succeeded because:
            </div>
            <ul className="numbered-list" style={{ marginTop: '12px' }}>
              {[
                'Email authenticity was not independently verified',
                'No secondary approval process existed for large transfers',
                'Social engineering perfectly exploited existing trust relationships',
                'Urgency tactics discouraged scrutiny',
                'Finance staff lacked sufficient BEC awareness training',
              ].map((item, i) => (
                <li key={i} style={{ animationDelay: `${0.4 + i * 0.1}s` }}>
                  <span className="num">{i + 1}</span>
                  {item}
                </li>
              ))}
            </ul>
          </div>

          <div className="highlight-box" style={{ opacity: 0, animation: isActive ? 'cardReveal 0.6s ease 1s forwards' : 'none' }}>
            <div className="card-label" style={{ marginBottom: '8px' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.6rem', color: 'var(--toyota-red)', letterSpacing: '0.25em', textTransform: 'uppercase' }}>
                CRITICAL VULNERABILITY
              </span>
            </div>
            <div className="card-text">
              The attacker exploited the <strong style={{ color: 'var(--text-primary)' }}>inherent trust asymmetry</strong> in large multinational organizations—where overseas subsidiaries habitually defer to instructions from headquarters-level contacts, and where the sheer volume of transactions reduces per-transaction scrutiny.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ===================================================
// SLIDE 4: METHODOLOGY & ANALYSIS
// ===================================================
function SlideMethodology({ isActive }) {
  const flowSteps = [
    { num: '01', title: 'Intelligence Gathering', desc: 'Open-source recon on org structure, contacts & email patterns' },
    { num: '02', title: 'Identity Fabrication', desc: 'Spoof/lookalike domain created to mimic trusted exec or partner' },
    { num: '03', title: 'Pretext Crafting', desc: 'Urgent, convincing narrative built around a pending business action' },
    { num: '04', title: 'Targeted Delivery', desc: 'Fraudulent email sent to finance employee with wire instructions' },
    { num: '05', title: 'Execution', desc: 'Victim processes transfer. Funds moved to attacker account' },
    { num: '06', title: 'Laundering', desc: 'Funds rapidly moved across multiple accounts to prevent recovery' },
  ];

  return (
    <div className="slide-body">
      <div className="slide-eyebrow">Methodology & Analysis</div>
      <div className="slide-title">
        How the <span className="highlight">Attack</span> Worked
      </div>
      <div className="slide-title-line" />

      {/* Attack Flow */}
      <div style={{ marginBottom: '24px' }}>
        <div style={{
          fontFamily: 'var(--font-mono)',
          fontSize: '0.62rem',
          color: 'var(--text-muted)',
          letterSpacing: '0.2em',
          textTransform: 'uppercase',
          marginBottom: '12px',
        }}>Attack Chain</div>
        <div className="attack-flow">
          {flowSteps.map((step, i) => (
            <div
              key={i}
              className="flow-step"
              style={{ animationDelay: `${0.1 + i * 0.12}s` }}
            >
              <div className="flow-step-num">{step.num}</div>
              <div className="flow-step-title">{step.title}</div>
              <div className="flow-step-desc">{step.desc}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="two-col">
        <div className="section-flex">
          <div className="card card-red-top" style={{ animationDelay: '0.7s' }}>
            <div className="card-label">Social Engineering Techniques</div>
            <ul className="numbered-list">
              {[
                { title: 'Authority Impersonation', desc: 'Fraudulent email posed as a senior executive or trusted business partner, exploiting the organizational hierarchy to suppress questioning.' },
                { title: 'Urgency & Pressure', desc: 'Time-sensitive framing discouraged the recipient from following standard verification procedures.' },
                { title: 'Contextual Legitimacy', desc: 'The email likely referenced real business context, correct names, and plausible scenarios to increase credibility.' },
                { title: 'Minimal Digital Footprint', desc: 'BEC requires no malware—pure deception. This evades most technical security controls like antivirus and firewalls.' },
              ].map((item, i) => (
                <li key={i} style={{ animationDelay: `${0.8 + i * 0.1}s`, flexDirection: 'column', gap: '2px' }}>
                  <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
                    <span className="num">{i + 1}</span>
                    <div>
                      <div style={{ color: 'var(--text-primary)', fontWeight: 600, fontFamily: 'var(--font-body)', marginBottom: '2px' }}>{item.title}</div>
                      <div style={{ fontFamily: 'var(--font-text)', fontSize: '0.78rem', color: 'var(--text-secondary)', lineHeight: '1.5' }}>{item.desc}</div>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="section-flex">
          <div className="card" style={{ animationDelay: '0.75s' }}>
            <div className="card-label">Attack Profile</div>
            <table className="detail-table">
              <tbody>
                <tr><td><strong>Attack Category</strong></td><td>Business Email Compromise (BEC/CEO Fraud)</td></tr>
                <tr><td><strong>MITRE ATT&CK</strong></td><td>T1566 – Phishing / Spear-Phishing</td></tr>
                <tr><td><strong>Target Role</strong></td><td>Finance / Accounts Payable Employee</td></tr>
                <tr><td><strong>Impersonated</strong></td><td>Executive or Authorized Business Partner</td></tr>
                <tr><td><strong>Delivery Method</strong></td><td>Email (Spoofed / Lookalike Domain)</td></tr>
                <tr><td><strong>Malware Used</strong></td><td>None — Pure Social Engineering</td></tr>
                <tr><td><strong>Financial Mechanism</strong></td><td>International Wire Transfer (SWIFT)</td></tr>
                <tr><td><strong>Detection Lag</strong></td><td>Shortly after funds transferred</td></tr>
              </tbody>
            </table>
          </div>

          <div className="card" style={{ animationDelay: '0.9s' }}>
            <div className="card-label">Organizational Vulnerabilities Exploited</div>
            <div className="section-flex">
              {[
                { label: 'Lack of Transfer Verification Protocol', pct: 0.95 },
                { label: 'Absence of Dual Authorization', pct: 0.9 },
                { label: 'Email Spoofing Susceptibility', pct: 0.8 },
                { label: 'Insufficient BEC Awareness Training', pct: 0.85 },
              ].map((item, i) => (
                <div key={i} className="threat-item" style={{ animationDelay: `${1.0 + i * 0.12}s`, marginBottom: '10px' }}>
                  <div className="threat-header">
                    <span className="threat-name" style={{ fontSize: '0.78rem' }}>{item.label}</span>
                    <span className="threat-pct">{Math.round(item.pct * 100)}%</span>
                  </div>
                  <div className="threat-bar-track">
                    <div className="threat-bar-fill" style={{ width: `${item.pct * 100}%` }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ===================================================
// SLIDE 5: PROPOSED SOLUTIONS & ALTERNATIVES
// ===================================================
function SlideSolutions({ isActive }) {
  const solutions = [
    {
      icon: '🔐',
      title: 'Multi-Factor Verification for Transfers',
      desc: 'All wire transfer requests—especially those exceeding defined thresholds—must require independent, out-of-band verification. This means a direct phone call (not email) to confirm with the known, pre-registered contact number of the requester.',
      priority: 'CRITICAL',
    },
    {
      icon: '✅',
      title: 'Dual Authorization (Maker-Checker)',
      desc: 'Implement a two-person integrity rule for all significant financial transactions. The employee initiating a payment and a separate approving officer must both authenticate and approve the transfer before it is processed.',
      priority: 'CRITICAL',
    },
    {
      icon: '📧',
      title: 'Email Authentication (DMARC/DKIM/SPF)',
      desc: 'Deploy and enforce DMARC, DKIM, and SPF records across all corporate email domains. These protocols validate email sender authenticity and can automatically reject or flag spoofed messages before they reach employees.',
      priority: 'HIGH',
    },
    {
      icon: '🎓',
      title: 'Regular BEC Awareness Training',
      desc: 'Conduct frequent, scenario-based security awareness training programs focusing on BEC, social engineering tactics, and red-flag recognition. Include simulated phishing and BEC exercises to test employee vigilance.',
      priority: 'HIGH',
    },
    {
      icon: '📋',
      title: 'Formalized Payment Change Protocols',
      desc: 'Establish rigid, documented procedures for any changes to banking account information or payment instructions. Any such request must follow a strict validation chain regardless of the apparent authority of the requester.',
      priority: 'HIGH',
    },
    {
      icon: '🔍',
      title: 'Advanced Email Threat Detection',
      desc: 'Implement AI-powered email security tools that can detect anomalous email patterns, domain lookalikes, spoofed senders, and unusual behavioral signals indicative of a BEC attempt.',
      priority: 'MEDIUM',
    },
  ];

  const priorityColors = {
    CRITICAL: 'var(--toyota-red)',
    HIGH: 'var(--accent-gold)',
    MEDIUM: '#4a90d9',
  };

  return (
    <div className="slide-body">
      <div className="slide-eyebrow">Proposed Solutions & Alternatives</div>
      <div className="slide-title">
        Building <span className="highlight">Resilience</span>
      </div>
      <div className="slide-title-line" />

      <div className="content-grid content-grid-2" style={{ gap: '16px' }}>
        {solutions.map((sol, i) => (
          <div
            key={i}
            className="rec-item"
            style={{ animationDelay: `${0.15 + i * 0.12}s` }}
          >
            <div className="rec-icon">{sol.icon}</div>
            <div className="rec-content">
              <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '6px' }}>
                <div className="rec-title">{sol.title}</div>
                <span style={{
                  fontFamily: 'var(--font-mono)',
                  fontSize: '0.52rem',
                  color: priorityColors[sol.priority],
                  border: `1px solid ${priorityColors[sol.priority]}`,
                  padding: '1px 7px',
                  letterSpacing: '0.1em',
                  opacity: 0.8,
                  flexShrink: 0,
                }}>{sol.priority}</span>
              </div>
              <div className="rec-desc">{sol.desc}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="quote-block" style={{ marginTop: '16px' }}>
        <div className="quote-text">
          "Implementing simple verification steps—like calling a known contact to confirm a wire request—could have prevented the $37.3 million loss entirely."
        </div>
        <div className="quote-source">— Security Industry Analysis, Post-Incident Review</div>
      </div>
    </div>
  );
}

// ===================================================
// SLIDE 6: RESULTS & EVALUATION
// ===================================================
function SlideResults({ isActive }) {
  return (
    <div className="slide-body">
      <div className="slide-eyebrow">Results & Evaluation</div>
      <div className="slide-title">
        Impact & <span className="highlight">Aftermath</span>
      </div>
      <div className="slide-title-line" />

      <div className="content-grid content-grid-3" style={{ marginBottom: '20px' }}>
        {[
          { val: '$37.3M', label: 'Immediate Financial Loss', sub: '≈ ¥4 Billion JPY' },
          { val: 'Mar 2020', label: 'Earnings Forecast at Risk', sub: 'Possible revision needed' },
          { val: '0', label: 'Technical Exploits Used', sub: 'Pure social engineering' },
        ].map((s, i) => (
          <div key={i} className="stat-block" style={{ animationDelay: `${0.15 + i * 0.15}s` }}>
            <span className="stat-value">{s.val}</span>
            <div className="stat-label">{s.label}</div>
            <div className="stat-sublabel">{s.sub}</div>
          </div>
        ))}
      </div>

      <div className="two-col">
        <div className="section-flex">
          <div className="card card-red-top" style={{ animationDelay: '0.5s' }}>
            <div className="card-label">Immediate Consequences</div>
            <ul className="numbered-list">
              {[
                { title: 'Massive Monetary Loss', desc: 'Approximately $37.3 million transferred to attacker-controlled accounts. Immediate financial impact threatened the company\'s quarterly earnings outlook.' },
                { title: 'Law Enforcement Engagement', desc: 'Toyota Boshoku immediately engaged local European law enforcement and established an internal legal task force to pursue fund recovery.' },
                { title: 'Investor & Market Impact', desc: 'Public disclosure required on September 6, 2019, creating reputational and investor confidence concerns for Toyota Group.' },
                { title: 'Fund Recovery Efforts', desc: 'The company worked with banks and authorities to attempt recovery. Likelihood diminished as funds were likely laundered across multiple international accounts.' },
              ].map((item, i) => (
                <li key={i} style={{ animationDelay: `${0.6 + i * 0.1}s`, flexDirection: 'column' }}>
                  <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
                    <span className="num">{i + 1}</span>
                    <div>
                      <div style={{ color: 'var(--text-primary)', fontWeight: 600, fontFamily: 'var(--font-body)', marginBottom: '2px' }}>{item.title}</div>
                      <div style={{ fontFamily: 'var(--font-text)', fontSize: '0.78rem', color: 'var(--text-secondary)', lineHeight: '1.5' }}>{item.desc}</div>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="section-flex">
          <div className="card" style={{ animationDelay: '0.55s' }}>
            <div className="card-label">Industry-Wide Impact</div>
            <div className="card-text" style={{ lineHeight: '1.8' }}>
              The Toyota Boshoku breach became a heavily cited case study in the cybersecurity industry, triggering a wave of BEC awareness campaigns, revised financial security protocols at multinational corporations, and increased FBI/Europol attention to BEC crime networks operating in Eastern Europe and West Africa.
              <br /><br />
              The automotive sector—with its complex, high-value global supply chains—was identified as <strong style={{ color: 'var(--toyota-red)' }}>particularly vulnerable</strong> to BEC due to frequent cross-border transactions and reliance on email-based business communication.
            </div>
          </div>

          <div className="card" style={{ animationDelay: '0.7s' }}>
            <div className="card-label">Evaluation of Response</div>
            <table className="detail-table">
              <tbody>
                <tr>
                  <td><strong>Response Speed</strong></td>
                  <td style={{ color: 'var(--accent-gold)' }}>Moderate — Fraud detected shortly post-transfer but funds already moved</td>
                </tr>
                <tr>
                  <td><strong>Transparency</strong></td>
                  <td style={{ color: '#4a9' }}>Positive — Timely public disclosure and proactive communication</td>
                </tr>
                <tr>
                  <td><strong>Recovery Chance</strong></td>
                  <td style={{ color: 'var(--toyota-red)' }}>Low — International wire fraud recovery rate is typically under 10%</td>
                </tr>
                <tr>
                  <td><strong>Prevention Failure</strong></td>
                  <td style={{ color: 'var(--toyota-red)' }}>Critical — No secondary verification process existed</td>
                </tr>
                <tr>
                  <td><strong>Post-Incident Controls</strong></td>
                  <td style={{ color: 'var(--accent-gold)' }}>Enhanced — Protocols significantly strengthened post-incident</td>
                </tr>
              </tbody>
            </table>
          </div>

          <div className="verdict-box">
            <div className="verdict-label">Overall Verdict</div>
            <div className="verdict-value">
              Preventable with<br />
              <span style={{ color: 'var(--toyota-red)' }}>Basic Controls</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ===================================================
// SLIDE 7: CONCLUSION & RECOMMENDATIONS
// ===================================================
function SlideConclusion({ isActive }) {
  const pillars = [
    {
      icon: '🛡',
      title: 'Verify Always',
      text: 'Establish a zero-trust approach to financial instructions received via email. Every request for fund transfer must be independently verified through a pre-established, out-of-band channel.',
    },
    {
      icon: '👥',
      title: 'Two-Person Rule',
      text: 'No single employee should have unilateral authority to execute large wire transfers. Dual authorization is non-negotiable for transactions above defined thresholds.',
    },
    {
      icon: '📚',
      title: 'Train & Test',
      text: 'Ongoing, scenario-based security awareness training is essential. Employees must be empowered to question unusual financial requests without fear of reprisal.',
    },
    {
      icon: '🔒',
      title: 'Harden Email',
      text: 'Deploy DMARC, DKIM, and SPF. Implement AI-powered email threat detection. Make spoofing technically difficult, not just procedurally inconvenient.',
    },
  ];

  return (
    <div className="slide-body">
      <div className="slide-eyebrow">Conclusion & Recommendations</div>
      <div className="slide-title">
        The Human <span className="highlight">Firewall</span>
      </div>
      <div className="slide-title-line" />

      <div className="conclusion-hero" style={{ flex: 'unset', marginBottom: '24px' }}>
        <div className="conclusion-quote">
          "The most sophisticated cyberattack in history required{' '}
          <span style={{ color: 'var(--toyota-red)' }}>no code, no malware, no exploits</span>—only a convincing email and an unchecked process."
        </div>
      </div>

      <div className="conclusion-pillars" style={{ marginBottom: '20px' }}>
        {pillars.map((pillar, i) => (
          <div
            key={i}
            className="pillar"
            style={{ animationDelay: `${0.4 + i * 0.12}s` }}
          >
            <span className="pillar-icon">{pillar.icon}</span>
            <div className="pillar-title">{pillar.title}</div>
            <div className="pillar-text">{pillar.text}</div>
          </div>
        ))}
      </div>

      <div className="two-col">
        <div className="card card-red-top" style={{ animationDelay: '0.8s' }}>
          <div className="card-label">Key Takeaways</div>
          <ul className="numbered-list">
            {[
              'BEC attacks bypass all technical controls—the human element is the last line of defense.',
              'Organizational hierarchy and trust are powerful attack surfaces in social engineering.',
              'The $37.3M loss was entirely preventable with a simple phone verification call.',
              'Multinational companies with cross-border financial operations must prioritize BEC defense.',
              'Rapid public disclosure and law enforcement engagement, while commendable, rarely recover funds.',
            ].map((item, i) => (
              <li key={i} style={{ animationDelay: `${0.9 + i * 0.1}s` }}>
                <span className="num">{i + 1}</span>
                {item}
              </li>
            ))}
          </ul>
        </div>

        <div className="section-flex">
          <div className="card" style={{ animationDelay: '0.85s' }}>
            <div className="card-label">Final Recommendations</div>
            <div className="card-text" style={{ lineHeight: '1.8' }}>
              Organizations of every size must treat BEC as a <strong style={{ color: 'var(--text-primary)' }}>top-tier financial security risk</strong>. The Toyota Boshoku incident demonstrates that wealth, global brand recognition, and technical sophistication do not confer immunity to social engineering. The recommended actions are:
              <br /><br />
              <strong style={{ color: 'var(--toyota-red)' }}>Immediate:</strong> Implement multi-step verification for wire transfers, enforce dual authorization, deploy email authentication protocols.
              <br /><br />
              <strong style={{ color: 'var(--toyota-red)' }}>Short-Term:</strong> Conduct mandatory BEC awareness training, establish documented payment change procedures, deploy email threat detection tools.
              <br /><br />
              <strong style={{ color: 'var(--toyota-red)' }}>Long-Term:</strong> Build a security-aware organizational culture where employees are empowered and encouraged to verify, question, and report suspicious financial requests without hesitation.
            </div>
          </div>

          <div
            style={{
              padding: '24px',
              background: 'rgba(235,10,30,0.06)',
              border: '1px solid rgba(235,10,30,0.3)',
              textAlign: 'center',
              opacity: 0,
              animation: isActive ? 'cardReveal 0.8s ease 1.4s forwards' : 'none',
              position: 'relative',
            }}
          >
            <div className="corner-deco tl" />
            <div className="corner-deco tr" />
            <div className="corner-deco bl" />
            <div className="corner-deco br" />
            <div style={{
              fontFamily: 'var(--font-mono)',
              fontSize: '0.6rem',
              color: 'var(--toyota-red)',
              letterSpacing: '0.3em',
              marginBottom: '12px',
            }}>CASE CLOSED</div>
            <div style={{
              fontFamily: 'var(--font-display)',
              fontSize: '1.2rem',
              fontWeight: 900,
              color: 'var(--text-primary)',
              lineHeight: '1.3',
              marginBottom: '8px',
            }}>TOYOTA BOSHOKU BEC<br />2019</div>
            <div style={{
              fontFamily: 'var(--font-text)',
              fontSize: '0.75rem',
              color: 'var(--text-secondary)',
            }}>$37.3M lost to social engineering.<br />A preventable catastrophe with lasting lessons.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ===================================================
// SIDE NAV PANEL (hover-to-reveal)
// ===================================================
function SideNav({ currentSlide, slideLabels, onNavigate }) {
  const [hovered, setHovered] = useState(false);

  return (
    <div
      style={{
        position: 'fixed',
        right: 0,
        top: '50%',
        transform: 'translateY(-50%)',
        z: 500,
        zIndex: 500,
        display: 'flex',
        alignItems: 'center',
        gap: 0,
      }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {/* Label panel */}
      <div style={{
        background: 'rgba(4,4,8,0.95)',
        border: '1px solid rgba(255,255,255,0.06)',
        borderRight: 'none',
        padding: '12px 0',
        overflow: 'hidden',
        width: hovered ? '180px' : '0px',
        transition: 'width 0.3s cubic-bezier(0.25,0.46,0.45,0.94)',
      }}>
        {slideLabels.map((label, i) => (
          <div
            key={i}
            onClick={() => onNavigate(i)}
            style={{
              padding: '8px 20px',
              fontFamily: 'var(--font-mono)',
              fontSize: '0.6rem',
              letterSpacing: '0.1em',
              textTransform: 'uppercase',
              color: currentSlide === i ? 'var(--toyota-red)' : 'var(--text-muted)',
              cursor: 'pointer',
              whiteSpace: 'nowrap',
              borderLeft: currentSlide === i ? '2px solid var(--toyota-red)' : '2px solid transparent',
              transition: 'color 0.2s ease',
            }}
          >
            <span style={{ marginRight: '8px', opacity: 0.4 }}>{String(i + 1).padStart(2, '0')}</span>
            {label}
          </div>
        ))}
      </div>

      {/* Pip column */}
      <div style={{
        background: 'rgba(4,4,8,0.8)',
        border: '1px solid rgba(255,255,255,0.06)',
        padding: '12px 6px',
        display: 'flex',
        flexDirection: 'column',
        gap: '8px',
        alignItems: 'center',
      }}>
        {slideLabels.map((_, i) => (
          <div
            key={i}
            onClick={() => onNavigate(i)}
            style={{
              width: '5px',
              height: currentSlide === i ? '20px' : '5px',
              background: currentSlide === i ? 'var(--toyota-red)' : 'rgba(255,255,255,0.15)',
              cursor: 'pointer',
              transition: 'all 0.3s ease',
              boxShadow: currentSlide === i ? '0 0 6px rgba(235,10,30,0.6)' : 'none',
            }}
          />
        ))}
      </div>
    </div>
  );
}

// ===================================================
// NAVIGATION BAR
// ===================================================
function NavBar({ currentSlide, totalSlides, slideLabels, onNavigate }) {
  const progress = ((currentSlide + 1) / totalSlides) * 100;

  return (
    <div className="nav-container">
      <div className="nav-progress-section">
        <div className="nav-progress-track">
          <div className="nav-progress-fill" style={{ width: `${progress}%` }} />
        </div>
        <div className="nav-progress-text">
          {slideLabels[currentSlide]}
        </div>
      </div>

      <div className="nav-dots">
        {Array.from({ length: totalSlides }, (_, i) => (
          <div
            key={i}
            className={`nav-dot${currentSlide === i ? ' active' : ''}`}
            onClick={() => onNavigate(i)}
            title={slideLabels[i]}
          />
        ))}
      </div>

      <div className="nav-controls">
        <button
          className="nav-btn"
          onClick={() => onNavigate(currentSlide - 1)}
          disabled={currentSlide === 0}
          title="Previous slide (←)"
        >←</button>
        <button
          className="nav-btn"
          onClick={() => onNavigate(currentSlide + 1)}
          disabled={currentSlide === totalSlides - 1}
          title="Next slide (→)"
        >→</button>
      </div>
    </div>
  );
}

// ===================================================
// MAIN APP
// ===================================================
function App() {
  const [phase, setPhase] = useState('loading'); // loading | intro | presentation
  const [currentSlide, setCurrentSlide] = useState(0);
  const [transitionState, setTransitionState] = useState('active'); // active | transitioning
  const [targetSlide, setTargetSlide] = useState(0);

  const slideLabels = [
    'Abstract',
    'Executive Summary',
    'Background',
    'Problem Description',
    'Methodology & Analysis',
    'Proposed Solutions',
    'Results & Evaluation',
    'Conclusion',
  ];

  const TOTAL_SLIDES = slideLabels.length;

  const navigateToSlide = useCallback((index) => {
    if (index < 0 || index >= TOTAL_SLIDES || index === currentSlide) return;
    setTargetSlide(index);
    setTransitionState('transitioning');
    setTimeout(() => {
      setCurrentSlide(index);
      setTransitionState('active');
    }, 400);
  }, [currentSlide, TOTAL_SLIDES]);

  // Keyboard navigation
  useEffect(() => {
    if (phase !== 'presentation') return;
    const handleKey = (e) => {
      if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === 'PageDown') {
        navigateToSlide(currentSlide + 1);
      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') {
        navigateToSlide(currentSlide - 1);
      }
    };
    window.addEventListener('keydown', handleKey);
    return () => window.removeEventListener('keydown', handleKey);
  }, [phase, currentSlide, navigateToSlide]);

  const slides = [
    { component: SlideAbstract, category: 'ABSTRACT', num: 1 },
    { component: SlideExecutiveSummary, category: 'EXECUTIVE SUMMARY', num: 2 },
    { component: SlideBackground, category: 'BACKGROUND', num: 3 },
    { component: SlideProblem, category: 'PROBLEM DESCRIPTION', num: 4 },
    { component: SlideMethodology, category: 'METHODOLOGY & ANALYSIS', num: 5 },
    { component: SlideSolutions, category: 'PROPOSED SOLUTIONS', num: 6 },
    { component: SlideResults, category: 'RESULTS & EVALUATION', num: 7 },
    { component: SlideConclusion, category: 'CONCLUSION', num: 8 },
  ];

  // Slide background configs
  const bgConfigs = [
    { color: 'red', x: 'right: -150px', y: 'top: -100px' },
    { color: 'red', x: 'left: -100px', y: 'bottom: 0' },
    { color: 'gold', x: 'right: -150px', y: 'top: 50%' },
    { color: 'red', x: 'left: 50%', y: 'top: -100px' },
    { color: 'gold', x: 'right: -100px', y: 'bottom: -100px' },
    { color: 'gold', x: 'left: -100px', y: 'top: -100px' },
    { color: 'red', x: 'left: 50%', y: 'bottom: -150px' },
    { color: 'red', x: 'left: 50%', y: 'top: 50%' },
  ];

  return (
    <>
      {/* Loading Screen */}
      {phase === 'loading' && (
        <LoadingScreen onDone={() => setPhase('intro')} />
      )}

      {/* Intro Cinematic */}
      {(phase === 'intro' || phase === 'intro-exiting') && (
        <IntroScreen onEnter={() => setPhase('presentation')} />
      )}

      {/* Main Presentation */}
      {phase === 'presentation' && (
        <div className="presentation">
          <Ticker />

          <div className="slides-wrapper" style={{ paddingTop: '28px' }}>
            {slides.map((slide, i) => {
              const SlideComponent = slide.component;
              const isActive = currentSlide === i && transitionState === 'active';
              const isExiting = currentSlide === i && transitionState === 'transitioning';
              const bgConf = bgConfigs[i];

              return (
                <div
                  key={i}
                  className={`slide slide-${i}${isActive ? ' active' : ''}${isExiting ? ' exiting' : ''}`}
                  style={{ zIndex: isActive || isExiting ? 1 : 0 }}
                >
                  {/* Background */}
                  <div className="slide-bg">
                    <div className="slide-bg-grid" />
                    <div
                      className={`slide-bg-radial ${bgConf.color}`}
                      style={{
                        width: '500px',
                        height: '500px',
                        position: 'absolute',
                      }}
                    />
                  </div>

                  <div className="slide-inner" style={{ position: 'relative', zIndex: 1 }}>
                    <SlideHeader
                      number={slide.num}
                      total={TOTAL_SLIDES}
                      category={slide.category}
                    />
                    <SlideComponent isActive={isActive} />
                  </div>
                </div>
              );
            })}
          </div>

          <NavBar
            currentSlide={currentSlide}
            totalSlides={TOTAL_SLIDES}
            slideLabels={slideLabels}
            onNavigate={navigateToSlide}
          />

          <SideNav
            currentSlide={currentSlide}
            slideLabels={slideLabels}
            onNavigate={navigateToSlide}
          />
        </div>
      )}
    </>
  );
}

// Mount
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));
