function StoryView() {
  const { React } = window;
  const { useRef, useEffect, useState } = React;

  const deckRef = useRef(null);
  const pauseBtnRef = useRef(null);
  const [paused, setPaused] = useState(false);

  // Always start at slide 0 when the story view mounts.
  useEffect(() => {
    const deck = deckRef.current;
    if (!deck) return;
    if (deck.length > 0) { deck.goTo(0); return; }
    // Fallback: slides not yet slotted — wait for first slidechange.
    const onFirst = () => deck.goTo(0);
    deck.addEventListener('slidechange', onFirst, { once: true });
    return () => deck.removeEventListener('slidechange', onFirst);
  }, []);

  // Inject pause/play button into the deck-stage shadow overlay (runs once on mount).
  useEffect(() => {
    const deck = deckRef.current;
    if (!deck || !deck.shadowRoot) return;
    const overlay = deck.shadowRoot.querySelector('.overlay');
    if (!overlay) return;

    const divider = document.createElement('span');
    divider.className = 'divider';

    const btn = document.createElement('button');
    btn.className = 'btn';
    btn.type = 'button';
    btn.style.fontSize = '11px';
    btn.style.letterSpacing = '0.02em';
    btn.innerHTML = '❚❚';
    btn.setAttribute('aria-label', 'Pause autoplay');
    btn.addEventListener('click', () => setPaused(p => !p));

    overlay.prepend(divider);
    overlay.prepend(btn);
    pauseBtnRef.current = btn;

    return () => { btn.remove(); divider.remove(); pauseBtnRef.current = null; };
  }, []);

  // Keep pause button text in sync with paused state.
  useEffect(() => {
    const btn = pauseBtnRef.current;
    if (!btn) return;
    btn.innerHTML = paused ? '▶' : '❚❚';
    btn.setAttribute('aria-label', paused ? 'Resume autoplay' : 'Pause autoplay');
  }, [paused]);

  // Auto-advance with per-slide delay. Slide 1 lingers 3 s longer.
  useEffect(() => {
    if (paused) return;
    let id;
    const schedule = () => {
      const deck = deckRef.current;
      const delay = (!deck || deck.index === 0) ? 10000 : 7000;
      id = setTimeout(() => {
        if (!deck || !deck.length) { schedule(); return; }
        if (deck.index >= deck.length - 1) { deck.goTo(0); } else { deck.next(); }
        schedule();
      }, delay);
    };
    schedule();
    return () => clearTimeout(id);
  }, [paused]);

  return (
    <React.Fragment>
      <header className="story-nav hero-nav">
        <div className="nav-brand">
          <img src="branding/sekura-logo-inverse.svg" alt="sekura" height="22" />
        </div>
        <nav className="nav-links">
          <a href="#product">product</a>
          <a href="#team">team</a>
          <a href="#login" className="nav-login">log in</a>
        </nav>
      </header>

      <deck-stage ref={deckRef} width="1920" height="1080">

        {/* 01 · COVER */}
        <section className="slide slide--cover" data-label="Cover">
          <div className="cover-grid"></div>
          <div className="cover-noise"></div>
          <div className="cover-body">
            <div className="cover-brandmark">
              <span className="cbm-line"></span>
              <img src="branding/sekura-logo.svg" alt="sekura" height="140" />
              <span className="cbm-line cbm-line--right"></span>
            </div>
            <p className="cover-tagline">
              because static security does not hold
              <br /><em>in a dynamic environment.</em>
            </p>
            <div className="cover-foot">
              <div className="cover-foot-left">
                <div className="cf-num">01</div>
                <div className="cf-label">the prologue</div>
              </div>
            </div>
          </div>
        </section>

        {/* 02 · CHANGE HEALTHCARE */}
        <section className="slide slide--exhibit" data-label="Change Healthcare">
          <div className="exhibit-grid">
            <div className="ex-left">
              <h2 className="ex-h2">
                every enterprise<br />
                has <em>security infrastructure.</em>
              </h2>
              <p className="ex-sub">
                firewalls. encryption. endpoint tools. and every enterprise
                believes these things are enough.
              </p>
              <p className="ex-strong">they are not enough.</p>
            </div>
            <div className="ex-right">
              <div className="ex-stack">
                <div className="ex-stack-title">change healthcare · had</div>
                <div className="ex-stack-grid">
                  <div className="ex-item"><span className="ex-check">✓</span>next-gen firewall</div>
                  <div className="ex-item"><span className="ex-check">✓</span>end-to-end encryption</div>
                  <div className="ex-item"><span className="ex-check">✓</span>edr across endpoints</div>
                  <div className="ex-item"><span className="ex-check">✓</span>siem + soc 24/7</div>
                  <div className="ex-item"><span className="ex-check">✓</span>annual pentest</div>
                  <div className="ex-item"><span className="ex-check">✓</span>soc 2 type ii</div>
                </div>
              </div>
              <div className="ex-breach">
                <div className="ex-breach-stat">
                  <div className="ex-breach-num">15B</div>
                  <div className="ex-breach-lbl">transactions / year · disrupted</div>
                </div>
                <p className="ex-breach-copy">attackers probed until they found a way.</p>
              </div>
            </div>
          </div>
        </section>

        {/* 03 · THE INSIGHT */}
        <section className="slide slide--insight" data-label="The Insight">
          <div className="insight-body">
            <div className="insight-quote">
              <h2 className="insight-h2">
                thousands of alerts.
                <br />a handful <em>actually</em>
                <br />matter.
              </h2>
            </div>
            <aside className="insight-argument">
              <p>
                traditional security gives you a list of vulnerabilities.
                <strong> hundreds. maybe thousands.</strong> most don't matter.
                some are critical. you can't tell the difference.
              </p>
              <p>
                so teams chase alerts. they prioritize by severity scores
                that have no relationship to their actual environment.
                they patch things that were never exploitable — and miss
                the things that are.
              </p>
              <div className="insight-triple">
                <div><span className="trip-label">state of security</span><span className="trip-value">expensive</span></div>
                <div><span className="trip-label">cadence</span><span className="trip-value">slow</span></div>
                <div><span className="trip-label">method</span><span className="trip-value">guesswork</span></div>
              </div>
            </aside>
          </div>
        </section>

        {/* 04 · SEKURA (prove it) */}
        <section className="slide slide--sekura" data-label="We Prove It">
          <div className="sekura-hero">
            <h2 className="sekura-h2">
              we prove exploitation
              <br /><em>before attackers do.</em>
            </h2>
            <p className="sekura-sub">
              sekura is an autonomous penetration testing platform powered by
              specialized ai agents. it runs continuously inside your environment.
              it finds real, exploitable vulnerabilities. and it proves they are
              real with deterministic proof-of-exploit.
            </p>
            <div className="sekura-triad">
              <div className="triad-item triad-item--muted">not a scan.</div>
              <div className="triad-sep">·</div>
              <div className="triad-item triad-item--muted">not a score.</div>
              <div className="triad-sep">·</div>
              <div className="triad-item triad-item--strong">proof.</div>
            </div>
          </div>
          <footer className="slide-foot">
            <div className="sf-meta">autonomous · continuous · deterministic</div>
          </footer>
        </section>

        {/* 05 · FOUR PILLARS */}
        <section className="slide slide--pillars" data-label="Four Pillars">
          <div className="pillars-grid">
            <article className="pillar">
              <div className="pillar-num">01</div>
              <h3 className="pillar-hammer">continuous,<br />not periodic.</h3>
              <p className="pillar-body">
                your attack surface changes daily. your security testing should too.
                sekura monitors perimeter, endpoints, applications, data, and code
                around the clock.
              </p>
            </article>
            <article className="pillar pillar--accent">
              <div className="pillar-num">02</div>
              <h3 className="pillar-hammer">proof,<br />not probability.</h3>
              <p className="pillar-body">
                every finding ships with a deterministic proof-of-exploit.
                your team stops chasing alerts and starts fixing what actually matters.
              </p>
            </article>
            <article className="pillar">
              <div className="pillar-num">03</div>
              <h3 className="pillar-hammer">fixes,<br />not findings.</h3>
              <p className="pillar-body">
                clear remediation guidance delivered through outlook, slack, teams,
                jira, confluence. sekura can resolve issues automatically. ship fixes
                instead of reading reports.
              </p>
            </article>
            <article className="pillar">
              <div className="pillar-num">04</div>
              <h3 className="pillar-hammer">deployed behind<br />your firewall.</h3>
              <p className="pillar-body">
                your data and ai processing stay inside your environment.
                full control. no exceptions. running in hours, not months —
                enterprise-grade without the enterprise-speed rollout.
              </p>
            </article>
          </div>
        </section>

        {/* 06 · THE ECONOMICS */}
        <section className="slide slide--econ" data-label="The Economics">
          <div className="econ-head">
            <h2 className="econ-h2">
              better security.
              <br /><em>a fraction of the cost.</em>
            </h2>
          </div>
          <div className="econ-compare">
            <div className="econ-col econ-col--old">
              <div className="econ-tag">traditional pentest</div>
              <div className="econ-price">
                <span className="econ-strike">$30k</span>
                <span className="econ-sep">—</span>
                <span className="econ-strike">$150k</span>
              </div>
              <div className="econ-meta">per test · point-in-time</div>
              <p className="econ-copy">by the time you read the report, your environment has changed.</p>
            </div>
            <div className="econ-arrow" aria-hidden="true">
              <svg viewBox="0 0 200 40" width="200" height="40">
                <line x1="0" y1="20" x2="186" y2="20" stroke="currentColor" strokeWidth="1.5" />
                <path d="M176 11 L192 20 L176 29" fill="none" stroke="currentColor" strokeWidth="1.5" />
              </svg>
            </div>
            <div className="econ-col econ-col--new">
              <div className="econ-tag">sekura · continuous</div>
              <div className="econ-price econ-price--new">
                a fraction<span className="econ-of">of that cost.</span>
              </div>
              <div className="econ-meta">whole attack surface · always on</div>
              <p className="econ-copy">move from periodic checks to <em>continuous confidence.</em></p>
            </div>
          </div>
          <div className="econ-fw">
            <div className="fw-label">audit prep as a byproduct · maps to</div>
            <div className="fw-grid">
              {['SOC 2','ISO 27001','HIPAA','PCI DSS','NIST CSF','NIST 800-53','GDPR','CCPA','FedRAMP','HITRUST','FFIEC','CIS','GLBA','CMMC'].map(fw => (
                <span key={fw} className="fw-chip">{fw}</span>
              ))}
            </div>
            <div className="fw-count">
              <span className="fw-n">14</span>
              <span className="fw-l">leading frameworks</span>
            </div>
          </div>
          <footer className="slide-foot">
            <div className="sf-quote">
              <span className="sf-quote-mark">"</span>
              this is not incremental improvement.
              <em> this is a different model.</em>
            </div>
          </footer>
        </section>

        {/* 07 · CLOSER + CTA */}
        <section className="slide slide--closer" data-label="Closer">
          <div className="closer-grid"></div>
          <div className="closer-body">
            <h2 className="closer-h2">
              <em>agentic protection</em>
              <br />in a constantly changing environment.
            </h2>
            <div className="closer-ctas">
              <a href="#product" className="cta cta--primary">
                see the live platform <span className="cta-arrow">→</span>
              </a>
              <a href="#scan" className="cta cta--ghost">
                scan your repo
              </a>
            </div>
          </div>
          <footer className="closer-foot">
            <div className="cf-meta">deployed behind your firewall · sekura.ai</div>
            <div className="cf-hint"><span className="kbd">R</span> to restart · <span className="kbd">←</span> <span className="kbd">→</span> to navigate</div>
          </footer>
        </section>

      </deck-stage>
    </React.Fragment>
  );
}

window.StoryView = StoryView;