// ─────────────────────────────────────────────────────────────────────────────
// WrapRealityPage.jsx — dedicated product page for WRAP Reality™ (VR training).
//
// Rendered by App.jsx for the route #/products/wrap-reality INSTEAD of the
// generic ProductsPage detail template, so the existing URL and the product
// card / cross-links keep working while this one product gets a bespoke,
// slick-style layout. The `wrap-reality` entry must stay in PRODUCTS
// (ProductsPage.jsx) — the router resolves the route by checking window.PRODUCTS,
// and the list card + related-product cross-links read from it.
//
// Content mirrors the WRAP Reality™ V2 sales slick, with three brand-compliance
// adjustments applied (see NOTE markers below):
//   1. The "Simulated Response Options" weapons list is reframed as the full
//      FORCE CONTINUUM that officers train to de-escalate away from — leading
//      with Non-Lethal Response™ tools — rather than a tactical weapons roster.
//   2. The Chief David Lash testimonial is held out (usage rights pending per
//      the slick's own footnote). It lives here commented-out for one-line
//      restoration once cleared.
//   3. The "50%+" figure is presented with the slick's disclaimer and needs a
//      cited source before it should stand as a headline stat (flagged in PR).
//
// Reuses window.StoriesCarousel and window.ProductGrants (exported from
// ProductsPage.jsx) so Real Stories + Grants cross-links stay single-source.
// ─────────────────────────────────────────────────────────────────────────────
const { useState: useWRState, useEffect: useWREffect } = React;

// Story ids mirror the wrap-reality entry's relatedStories in ProductsPage.jsx.
const WR_STORY_IDS = ['training-when-how-why', 'lexington-testimonial', 'calstateparks-testimonial'];

// ── Small presentational helpers ─────────────────────────────────────────────
const wrEyebrow = (color) => ({
  fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em',
  color: color || 'var(--accent)', textTransform: 'uppercase', marginBottom: 16,
});

function WRPill({ children }) {
  return (
      <span style={{
        display: 'inline-block', fontFamily: 'Barlow Condensed', fontWeight: 700,
        fontSize: 15, letterSpacing: '0.04em', textTransform: 'uppercase',
        color: 'var(--text)', background: 'var(--card-bg)',
        border: '1px solid var(--border-strong)', borderRadius: 4,
        padding: '9px 16px',
      }}>{children}</span>
  );
}

function WRBullet({ children }) {
  return (
      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '13px 0', borderBottom: '1px solid var(--border)' }}>
        <div style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 3 }}>
          <svg width="9" height="7" viewBox="0 0 10 8"><path d="M1 4l2.5 2.5 5.5-5.5" stroke="#000" strokeWidth="1.7" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div>
        <span style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text)' }}>{children}</span>
      </div>
  );
}

// ── Page ─────────────────────────────────────────────────────────────────────
function WrapRealityPage({ navigate }) {
  useWREffect(() => { document.title = 'WRAP Reality™ — Immersive VR Training — WRAP®'; }, []);
  useWREffect(() => {
    window.Intercom && window.Intercom('trackEvent', 'viewed_product', { product_id: 'wrap-reality' });
  }, []);

  const isMobile = useMobile();

  // Honor prefers-reduced-motion: show the static action shot instead of the
  // autoplaying hero loop for visitors who ask for reduced motion.
  const [reduceMotion, setReduceMotion] = useWRState(
      () => typeof window !== 'undefined' && !!window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
  );
  useWREffect(() => {
    if (!window.matchMedia) return;
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    const handler = e => setReduceMotion(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);

  const StoriesCarousel = window.StoriesCarousel;   // reused cross-link section (single-source)
  const ProductGrants   = window.ProductGrants;     // reused cross-link section (single-source)
  const relatedProducts = (window.PRODUCTS || []).filter(p => p.id !== 'wrap-reality').slice(0, 4);

  const pad = isMobile ? '20px' : '48px';

  return (
      <main style={{ paddingTop: 72 }}>

        {/* ── HERO ─────────────────────────────────────────────────────────── */}
        <section style={{ background: 'var(--bg)', padding: isMobile ? '40px 20px 56px' : '64px 48px 80px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto' }}>
            <button onClick={() => navigate('products')} style={{
              background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)',
              fontSize: 13, fontFamily: 'DM Sans', marginBottom: 36, padding: 0,
              display: 'flex', alignItems: 'center', gap: 8,
            }}>← All Products</button>

            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 56, alignItems: isMobile ? 'start' : 'stretch' }}>
              <div>
                <div style={wrEyebrow()}>Immersive VR Training Platform · Prevent. De-escalate. Respond.</div>
                <h1 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(46px, 7vw, 92px)', textTransform: 'uppercase', color: 'var(--text)', lineHeight: 0.9, marginBottom: 20 }}>
                  Train for the moment that <span style={{ color: 'var(--accent)' }}>changes the outcome.</span>
                </h1>
                <p style={{ fontFamily: 'Barlow Condensed', fontWeight: 600, fontSize: 22, color: 'var(--accent)', marginBottom: 22, letterSpacing: '0.02em', textTransform: 'uppercase' }}>
                  Train the brain. Build the response.
                </p>
                <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--text-sub)', marginBottom: 34, maxWidth: 560 }}>
                  WRAP Reality™ is immersive virtual reality training that reinforces lawful decision-making under stress —
                  the dry fire for practical de-escalation and use-of-force decision-making. Built for police academies,
                  training commanders, and public-safety agencies preparing personnel for high-stress, split-second decisions.
                </p>
                <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                  <button onClick={() => navigate('contact')} style={{
                    background: 'var(--accent)', color: '#000', border: 'none', cursor: 'pointer',
                    padding: '13px 30px', borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 700, fontSize: 14,
                  }}>Request Info</button>
                  <a href="mailto:training@wrap.com" style={{
                    background: 'transparent', color: 'var(--text)', border: '1px solid var(--border-strong)',
                    cursor: 'pointer', padding: '13px 30px', borderRadius: 4, fontFamily: 'DM Sans',
                    fontWeight: 700, fontSize: 14, textDecoration: 'none', display: 'inline-block',
                  }}>Contact Training</a>
                </div>
              </div>
              {/* Hero visual: looping, muted VR clip that fills the left column's
                  height (grid alignItems:stretch + objectFit:cover) and blends into
                  the copy — its left edge is faded into the navy via a mask so video
                  + text read as one seamless hero. Cover is center-anchored so the
                  officer and headset stay in frame; only the room's outer edges are
                  trimmed. The action shot is the poster + reduced-motion fallback.
                  NOTE: same-origin <video> needs `media-src 'self'` in vercel.json's
                  CSP or it is blocked in production — verify before shipping. */}
              <div style={{
                position: 'relative', overflow: 'hidden',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                minHeight: isMobile ? 'auto' : 320,
                borderRadius: isMobile ? 8 : 0,
              }}>
                {(() => {
                  const heroMask = 'linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 6%, #000 22%, #000 100%)';
                  const mediaStyle = isMobile
                      ? { width: '100%', height: 'auto', display: 'block', borderRadius: 8 }
                      : { width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 50%', display: 'block',
                        WebkitMaskImage: heroMask, maskImage: heroMask };
                  return reduceMotion ? (
                      <img src="assets/wrap-reality-action.webp" alt="Officer training inside a WRAP Reality™ immersive VR scenario"
                           loading="eager" decoding="async" style={mediaStyle} />
                  ) : (
                      <video
                          autoPlay muted loop playsInline preload="metadata"
                          poster="assets/wrap-reality-action.webp"
                          aria-label="WRAP Reality™ immersive VR training in progress"
                          style={mediaStyle}
                      >
                        <source src="assets/wrap-reality-hero.webm" type="video/webm" />
                        <source src="assets/wrap-reality-hero.mp4" type="video/mp4" />
                      </video>
                  );
                })()}
              </div>
            </div>
          </div>
        </section>

        {/* ── PROBLEM / SOLUTION ───────────────────────────────────────────── */}
        <section style={{ background: 'var(--bg-2)', padding: isMobile ? '56px 20px' : '88px 48px' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 44 : 72 }}>
            <div>
              <div style={wrEyebrow()}>The Problem</div>
              <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: isMobile ? 34 : 40, textTransform: 'uppercase', color: 'var(--text)', lineHeight: 1.02, marginBottom: 28 }}>
                Real-world decisions require more than classroom instruction.
              </h2>
              <div>
                {[
                  'Critical decisions must be made in unpredictable, high-stress situations.',
                  'Traditional training is difficult to repeat, customize, or deliver consistently.',
                  'Classroom instruction alone can\u2019t prepare personnel for the field.',
                ].map((t, i) => (
                    <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '13px 0', borderBottom: '1px solid var(--border)' }}>
                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--text-muted)', flexShrink: 0, marginTop: 9 }} />
                      <span style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-sub)' }}>{t}</span>
                    </div>
                ))}
              </div>
            </div>
            <div>
              <div style={wrEyebrow()}>The Solution</div>
              <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: isMobile ? 34 : 40, textTransform: 'uppercase', color: 'var(--text)', lineHeight: 1.02, marginBottom: 28 }}>
                Build experience before the moment is real.
              </h2>
              <div>
                {[
                  'Assess evolving situations inside realistic, interactive scenarios.',
                  'Communicate with subjects and select from multiple response options.',
                  'Practice within a safe, controlled training environment.',
                ].map((t, i) => <WRBullet key={i}>{t}</WRBullet>)}
              </div>
            </div>
          </div>
        </section>

        {/* ── THREE PILLARS ────────────────────────────────────────────────── */}
        <section style={{ background: 'var(--bg)', padding: isMobile ? '56px 20px' : '80px 48px' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 20 }}>
            {[
              { t: 'Real-Life Scenarios', d: 'Train across evolving situations that reflect the realities of modern public safety.' },
              { t: 'Active Participation', d: 'Practice communication, conflict resolution, and tactical decision-making inside the scenario.' },
              { t: 'Review + Improve', d: 'Replay performance, examine choices, and build skills through instructor-led feedback.' },
            ].map((c, i) => (
                <div key={i} style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 8, padding: '28px 26px', borderTop: `2px solid ${i === 0 ? 'var(--accent)' : 'var(--border)'}` }}>
                  <div style={{ fontFamily: 'DM Sans', fontWeight: 700, fontSize: 17, color: 'var(--text)', marginBottom: 12 }}>{c.t}</div>
                  <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--text-sub)' }}>{c.d}</p>
                </div>
            ))}
          </div>
        </section>

        {/* ── IMMERSIVE LEARNING CYCLE (01–04) ─────────────────────────────── */}
        <section style={{ background: 'var(--bg-2)', padding: isMobile ? '56px 20px' : '88px 48px' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto' }}>
            <div style={wrEyebrow()}>A Complete Immersive Learning Cycle</div>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 2, marginTop: 8 }}>
              {[
                { n: '01', t: 'Experience', d: 'Enter a realistic virtual environment.' },
                { n: '02', t: 'Engage',     d: 'Communicate and respond as events unfold.' },
                { n: '03', t: 'Decide',     d: 'Apply judgment under pressure.' },
                { n: '04', t: 'Review',     d: 'Replay, debrief, and improve.' },
              ].map((s, i) => (
                  <div key={i} style={{ background: 'var(--card-bg)', padding: isMobile ? '26px 20px' : '32px 26px', borderTop: `2px solid ${i === 0 ? 'var(--accent)' : 'var(--border)'}` }}>
                    <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 44, color: 'var(--accent)', lineHeight: 1, marginBottom: 12 }}>{s.n}</div>
                    <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 800, fontSize: 20, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 8, letterSpacing: '0.02em' }}>{s.t}</div>
                    <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--text-sub)' }}>{s.d}</p>
                  </div>
              ))}
            </div>
            <p style={{ fontFamily: 'Barlow Condensed', fontWeight: 800, fontSize: isMobile ? 26 : 34, textTransform: 'uppercase', color: 'var(--text)', marginTop: isMobile ? 40 : 56, lineHeight: 1.05 }}>
              One more option can change the outcome.
            </p>
          </div>
        </section>

        {/* ── MORE REPS, FEWER RESOURCES ───────────────────────────────────── */}
        <section style={{ background: 'var(--bg)', padding: isMobile ? '56px 20px' : '88px 48px' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.1fr 0.9fr', gap: isMobile ? 36 : 64, alignItems: 'center' }}>
            <div>
              <div style={wrEyebrow()}>Train Without the Overhead</div>
              <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: isMobile ? 40 : 52, textTransform: 'uppercase', color: 'var(--text)', lineHeight: 0.98, marginBottom: 24 }}>
                More reps. Fewer resources.
              </h2>
              <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--text-sub)', marginBottom: 28 }}>
                Scenario training normally costs role-players, simulation munitions, multiple locations, and a schedule built
                around daylight. WRAP Reality™ delivers the same repetitions in one room, on demand — including low-light
                encounters at any hour — without the additional resources, while helping reduce the injury risk that comes
                with live-action reps.
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                {['No Role-Players', 'No Sim Rounds', 'No Site Bookings', 'No Waiting for Dark', 'Lower Injury Exposure'].map((p, i) => <WRPill key={i}>{p}</WRPill>)}
              </div>
            </div>
            <div style={{ aspectRatio: '4/3', borderRadius: 8, overflow: 'hidden', border: '1px solid var(--border)', background: 'var(--bg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: isMobile ? 24 : 40 }}>
              <img src="assets/wrap-reality-headset.png" alt="WRAP Reality™ headset with full-body tracking"
                   loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
            </div>
          </div>
        </section>

        {/* ── PLATFORM CAPABILITIES TABLE ──────────────────────────────────── */}
        <section style={{ background: 'var(--bg-2)', padding: isMobile ? '56px 20px' : '80px 48px' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto' }}>
            <div style={wrEyebrow()}>An Immersive Platform Built for Public-Safety Readiness</div>
            <div style={{ borderTop: '1px solid var(--border)', marginTop: 8 }}>
              {[
                { c: '40+ Pre-Scripted Modules', m: 'Train across a growing range of realistic public-safety situations.' },
                { c: 'Adaptive Customization',   m: 'Customizable, branching scenarios with real-time instructor control and multiple possible outcomes.' },
                { c: 'Reality Rewind',           m: 'Replay scenarios and review encounters from multiple perspectives.' },
                { c: 'Full-Body Tracking',       m: 'Allow trainees to move naturally and interact within realistic environments.' },
              ].map((row, i) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.9fr 1.6fr', gap: isMobile ? 6 : 32, padding: '22px 0', borderBottom: '1px solid var(--border)' }}>
                    <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 800, fontSize: 22, textTransform: 'uppercase', color: 'var(--text)', letterSpacing: '0.01em' }}>{row.c}</div>
                    <div style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-sub)' }}>{row.m}</div>
                  </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── FORCE CONTINUUM (reframed from "Simulated Response Options") ──── */}
        {/* NOTE (brand): the slick lists lethal options as a flat "Simulated
            Response Options" roster. On a public Non-Lethal Response™ page that
            reads tactical, so this is reframed as the full continuum officers
            train to de-escalate AWAY from, leading with NLR tools. To revert to
            a flat list, replace this section's copy — the pills already carry
            the same options. */}
        <section style={{ background: 'var(--bg)', padding: isMobile ? '56px 20px' : '80px 48px' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.15fr 0.85fr', gap: isMobile ? 36 : 56, alignItems: 'center' }}>
            <div>
              <div style={wrEyebrow()}>Train Across the Full Force Continuum</div>
              <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: isMobile ? 34 : 44, textTransform: 'uppercase', color: 'var(--text)', lineHeight: 1.0, marginBottom: 20 }}>
                Practice choosing the lowest appropriate option — and ending situations without deadly force.
              </h2>
              <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--text-sub)', marginBottom: 30 }}>
                Scenarios present the full response continuum so officers can rehearse selecting — and justifying — the least
                amount of force required to resolve an encounter safely. Training leads with Non-Lethal Response™ options and
                represents higher force levels so personnel practice de-escalating away from them.
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                {['BolaWrap® Remote Restraint', 'OC Spray', 'CEW / Stun Device', 'Handgun', 'Shotgun', 'AR-Platform Rifle'].map((p, i) => (
                    <span key={i} style={{
                      display: 'inline-block', fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 15,
                      letterSpacing: '0.04em', textTransform: 'uppercase',
                      color: i < 3 ? '#000' : 'var(--text)',
                      background: i < 3 ? 'var(--accent)' : 'var(--card-bg)',
                      border: i < 3 ? '1px solid var(--accent)' : '1px solid var(--border-strong)',
                      borderRadius: 4, padding: '9px 16px',
                    }}>{p}</span>
                ))}
              </div>
              <p style={{ fontSize: 12.5, color: 'var(--text-muted)', marginTop: 18 }}>
                Non-Lethal Response™ options are highlighted. Higher force levels are included to be trained down from, not toward.
              </p>
            </div>
            {/* Action shot (4:5 portrait, shown uncropped) supporting the continuum copy. */}
            <div style={{ borderRadius: 10, overflow: 'hidden', border: '1px solid var(--border)', background: 'var(--bg-3)', aspectRatio: '4 / 5' }}>
              <img src="assets/wrap-reality-action.webp" alt="Officer training with a blue practice pistol inside a WRAP Reality™ scenario"
                   loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
          </div>
        </section>

        {/* ── TRAIN CRITICAL SKILLS / TRAINING & CERTIFICATION ─────────────── */}
        <section style={{ background: 'var(--bg-2)', padding: isMobile ? '56px 20px' : '80px 48px' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 44 : 72 }}>
            <div>
              <div style={wrEyebrow()}>Train Critical Skills</div>
              <div style={{ marginTop: 8 }}>
                {[
                  'De-escalation and conflict resolution',
                  'Verbal skills and situational awareness',
                  'Critical thinking and tactical decision-making',
                  'Appropriate tactical use-of-force measures',
                ].map((t, i) => <WRBullet key={i}>{t}</WRBullet>)}
              </div>
            </div>
            <div>
              <div style={wrEyebrow()}>Training &amp; Certification</div>
              <div style={{ marginTop: 8 }}>
                {[
                  'IADLEST/POST certification pathways that meet in-service opportunities',
                  'Human factors and decision-making certifications',
                  'Short burst-training lessons — learnable in the field or the classroom',
                  'Proficiency tracking with the latest VR scenarios',
                ].map((t, i) => <WRBullet key={i}>{t}</WRBullet>)}
              </div>
            </div>
          </div>
        </section>

        {/* ── STATS + DISCLAIMER ───────────────────────────────────────────── */}
        <section style={{ background: 'var(--bg)', padding: isMobile ? '10px 20px 0' : '0 48px' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', gap: 2, flexDirection: isMobile ? 'column' : 'row' }}>
            {/* NOTE (claim): "50%+" mirrors the current live product page and the
                slick, but needs a cited source before standing as a headline
                stat. Flagged in the PR for verification. */}
            {[
              { val: '50%+',    label: 'Skill degradation avoided\nwith reinforcement' },
              { val: '30 days', label: 'Typical agency\nonboarding timeline' },
            ].map((s, i) => (
                <div key={i} style={{ flex: 1, background: 'var(--card-bg)', padding: '36px 28px', borderTop: '3px solid var(--accent)' }}>
                  <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 48, color: 'var(--accent)', lineHeight: 1, marginBottom: 10 }}>{s.val}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-sub)', lineHeight: 1.5, whiteSpace: 'pre-line' }}>{s.label}</div>
                </div>
            ))}
          </div>
          <div style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '20px 0 0' : '24px 0 0' }}>
            <p style={{ fontSize: 12.5, color: 'var(--text-muted)', lineHeight: 1.6, maxWidth: 860 }}>
              WRAP Reality™ trains Non-Lethal Response™-specific, lawful, hands-on best practices. It does not replace an
              agency&rsquo;s existing defensive tactics program.
            </p>
          </div>

          {/* NOTE (authorization): Chief David Lash testimonial withheld — usage
              rights pending confirmation before external publication per the
              slick footnote. Restore this block once written clearance is on
              file. */}
          {/*
          <blockquote style={{ maxWidth: 1200, margin: '32px auto 0', borderLeft: '3px solid var(--accent)', paddingLeft: 24 }}>
            <p style={{ fontFamily: 'Barlow Condensed', fontWeight: 600, fontSize: isMobile ? 22 : 26, color: 'var(--text)', lineHeight: 1.35 }}>
              "The variety of scenarios and the ability to act out de-escalation tactics enables officers to practice
              ending situations without using deadly force."
            </p>
            <cite style={{ display: 'block', fontStyle: 'normal', fontSize: 13, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--accent)', marginTop: 14 }}>
              Chief David Lash · Northern York County Regional Police Department
            </cite>
          </blockquote>
          */}
        </section>

        {/* ── MAKE THE CALL (CTA) ──────────────────────────────────────────── */}
        <section style={{ background: 'var(--bg-2)', padding: isMobile ? '64px 20px' : '96px 48px', borderTop: '1px solid var(--border)' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.2fr 0.8fr', gap: isMobile ? 28 : 48, alignItems: 'center' }}>
            <div>
              <div style={wrEyebrow()}>Experience WRAP Reality™</div>
              <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: isMobile ? 48 : 68, textTransform: 'uppercase', color: 'var(--text)', lineHeight: 0.95, marginBottom: 18 }}>
                Make the call.
              </h2>
              <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--text-sub)', maxWidth: 520 }}>
                See it. Assess it. Step into a realistic scenario, respond as it unfolds, then replay it with an instructor
                to strengthen performance.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: isMobile ? 'flex-start' : 'flex-end' }}>
              <button onClick={() => navigate('contact')} style={{
                background: 'var(--accent)', color: '#000', border: 'none', cursor: 'pointer',
                padding: '15px 34px', borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 700, fontSize: 15,
              }}>Request Info →</button>
              <a href="mailto:training@wrap.com" style={{
                color: 'var(--accent)', fontFamily: 'DM Sans', fontWeight: 600, fontSize: 14, textDecoration: 'none',
              }}>Or contact the training team →</a>
            </div>
          </div>
        </section>

        {/* ── CROSS-LINKS: Real Stories + Grants (reused, single-source) ───── */}
        {StoriesCarousel && <StoriesCarousel storyIds={WR_STORY_IDS} navigate={navigate} isMobile={isMobile} />}
        {ProductGrants && <ProductGrants productId="wrap-reality" navigate={navigate} isMobile={isMobile} />}

        {/* ── RELATED PRODUCTS ─────────────────────────────────────────────── */}
        <section style={{ background: 'var(--bg)', padding: isMobile ? '56px 20px' : '80px 48px' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 40 }}>
              <h3 style={{ fontFamily: 'Barlow Condensed', fontWeight: 800, fontSize: 34, textTransform: 'uppercase', color: 'var(--text)' }}>The Complete System</h3>
              <button onClick={() => navigate('products')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--accent)', fontSize: 14, fontWeight: 600, fontFamily: 'DM Sans' }}>View All →</button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 14 }}>
              {relatedProducts.map(p => (
                  <div key={p.id}
                       onClick={() => navigate('product', p.id)}
                       style={{ background: 'var(--card-bg)', borderRadius: 6, padding: '22px 20px 26px', border: '1px solid var(--border)', cursor: 'pointer', transition: 'border-color 0.2s' }}
                       onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(255,181,5,0.28)'}
                       onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}
                  >
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: p.tagColor, marginBottom: 8 }}>{p.category}</div>
                    <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 20, color: 'var(--text)', marginBottom: 6 }}>{p.name}</div>
                    <div style={{ fontSize: 13, color: 'var(--text-sub)', lineHeight: 1.5 }}>{p.tagline}</div>
                  </div>
              ))}
            </div>
          </div>
        </section>

        <Footer navigate={navigate} />
      </main>
  );
}

Object.assign(window, { WrapRealityPage });