// ─── HOMEPAGE: EDITORIAL LAYOUT ───────────────────────────────────────────────
// Ported 1:1 from the approved homepage wireframe (bolawrap-website-shareable).
// Styles live in assets/home/home.css and are all scoped under `.hp`, so this
// page carries its own header + footer and green accent without touching any
// other page. Bracketed copy ("[Headline claim]") is a placeholder pending
// approved, sourced copy — exactly as in the wireframe.
const { useState: useHEState, useEffect: useHEEffect, useRef: useHERef } = React;

const HE_EXT = {
  training:  'https://www.wrap-tactics.com/events-cal',
  support:   'https://knowledge.wrap.com/en/',
  investors: 'https://ir.wrap.com/',
};

// Map a link target to an href. Internal targets are [page, id] pairs routed
// through navigate(); external targets are full URLs opened in a new tab.
function heHref(to) {
  if (typeof to === 'string') return to;
  const [page, id] = to;
  switch (page) {
    case 'products':     return '#/products';
    case 'product':      return `#/products/${id}`;
    case 'use-cases':    return '#/use-cases';
    case 'use-case':     return `#/use-cases/${id}`;
    case 'case-studies': return '#/case-studies';
    case 'case-study':   return `#/case-studies/${id}`;
    case 'contact':      return '#/contact';
    case 'about':        return '#/about';
    case 'wrapshield':   return '#/wrapshield';
    case 'grants':       return '#/grants';
    case 'legal':        return `#/legal/${id}`;
    default:             return '#/';
  }
}

function HELink({ to, navigate, onDone, className, children, track }) {
  const external = typeof to === 'string';
  return (
      <a className={className} href={heHref(to)}
         {...(track ? { 'data-track': 'contact_sales_click', 'data-loc': track } : {})}
         {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
         onClick={e => {
           if (onDone) onDone();
           if (external) return;
           e.preventDefault();
           navigate(to[0], to[1] || null);
         }}>
        {children}
      </a>
  );
}

const HE_NAV = [
  { label: 'Operationalize De-escalation', short: 'Solutions', items: [
      { label: 'Overview', to: ['products'] },
      { label: 'BolaWRAP® 150', to: ['product', 'bolawrap-150'], nb: true },
      { label: 'WRAP Reality™', to: ['product', 'wrap-reality'], nb: true },
      { label: 'Training overview', to: HE_EXT.training },
  ]},
  { label: 'Training', items: [
      { label: 'WRAP Reality™', to: ['product', 'wrap-reality'], nb: true },
      { label: 'LMS', to: HE_EXT.training },
      { label: 'Doctrine & Partners', to: HE_EXT.training },
      { label: 'Certification', to: HE_EXT.training },
      { label: 'Access existing training / app', to: HE_EXT.training, sep: true },
  ]},
  { label: 'Real Stories', to: ['case-studies'] },
  { label: 'Support', items: [
      { label: 'Customer assistance', to: HE_EXT.support },
      { label: 'Product resources', to: HE_EXT.support },
      { label: 'Downloads', to: HE_EXT.support },
  ]},
  { label: 'Investors', to: HE_EXT.investors },
  { label: 'About', items: [
      { label: 'Company', to: ['about'] },
      { label: 'Mission', to: ['about'] },
      { label: 'Leadership', to: ['about'] },
  ]},
  ...(window.WRAP_FLAGS && window.WRAP_FLAGS.wrapshieldEnabled ? [{ label: 'WRAPShield™', to: ['wrapshield'], nb: true }] : []),
];

const nbSpan = (label, nb) => nb ? <span className="nb">{label}</span> : label;

function HEHeader({ navigate }) {
  const [menuOpen, setMenuOpen] = useHEState(false);
  const [openSub, setOpenSub] = useHEState(null);
  const hdrRef = useHERef(null);
  const closeAll = () => { setMenuOpen(false); setOpenSub(null); };

  useHEEffect(() => {
    const onDoc = e => { if (hdrRef.current && !hdrRef.current.contains(e.target)) closeAll(); };
    const onKey = e => { if (e.key === 'Escape') closeAll(); };
    document.addEventListener('click', onDoc);
    document.addEventListener('keydown', onKey);
    return () => { document.removeEventListener('click', onDoc); document.removeEventListener('keydown', onKey); };
  }, []);

  return (
      <header ref={hdrRef} className={'site-header' + (menuOpen ? ' menu-open' : '')} id="siteHeader">
        <div className="hdr-in">
          <a className="wordmark" href="#/" aria-label="WRAP home"
             onClick={e => { e.preventDefault(); closeAll(); navigate('home'); }}></a>
          <nav id="mainNav" aria-label="Main">
            <ul className="navlist">
              {HE_NAV.map((n, i) => n.items ? (
                  <li key={n.label} className={'has-sub' + (openSub === i ? ' open' : '')}>
                    <button type="button" className="nav-btn" aria-expanded={openSub === i}
                            onClick={e => { e.stopPropagation(); setOpenSub(openSub === i ? null : i); }}>
                      {n.short ? <><span className="lbl-long">{n.label}</span><span className="lbl-short">{n.short}</span></> : n.label}
                    </button>
                    <ul className="sub">
                      {n.items.map(it => (
                          <li key={it.label} className={it.sep ? 'sep' : undefined}>
                            <HELink to={it.to} navigate={navigate} onDone={closeAll}>{nbSpan(it.label, it.nb)}</HELink>
                          </li>
                      ))}
                    </ul>
                  </li>
              ) : (
                  <li key={n.label}>
                    <HELink className="nav-link" to={n.to} navigate={navigate} onDone={closeAll}>{nbSpan(n.label, n.nb)}</HELink>
                  </li>
              ))}
            </ul>
            <HELink className="pill gold menu-cta" to={['contact']} navigate={navigate} onDone={closeAll} track="mobile-menu">Contact Sales</HELink>
          </nav>
          <div className="hdr-actions">
            <HELink className="pill gold sm" to={['contact']} navigate={navigate} onDone={closeAll} track="header">Contact Sales</HELink>
            <button type="button" className="burger" id="burger" aria-label="Menu" aria-expanded={menuOpen} aria-controls="mainNav"
                    onClick={e => { e.stopPropagation(); setMenuOpen(!menuOpen); }}><i></i></button>
          </div>
        </div>
      </header>
  );
}

// Animated WRAPShield field art: drifting data specks on a canvas over the
// investor-deck title art, with CSS-animated drone / vehicle / rover / turret.
function HEShieldArt() {
  const artRef = useHERef(null);
  const worldRef = useHERef(null);
  const cvRef = useHERef(null);

  useHEEffect(() => {
    const art = artRef.current, world = worldRef.current, cv = cvRef.current;
    if (!art || !world || !cv) return;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const cx = cv.getContext('2d'), W = cv.width, H = cv.height;
    const fit = () => { world.style.transform = 'scale(' + (art.clientWidth / W) + ')'; };
    let ro = null;
    if (window.ResizeObserver) { ro = new ResizeObserver(fit); ro.observe(art); } else { window.addEventListener('resize', fit); }
    fit();
    const P = [];
    for (let i = 0; i < 300; i++) P.push({ x: Math.random() * W, y: 120 + Math.random() * 660, vx: 6 + Math.random() * 16, ph: Math.random() * 6.28, f: .6 + Math.random() * 1.6, r: .8 + Math.random() * 1.2, c: Math.random() < .55 ? [118, 196, 186] : [218, 176, 98] });
    const draw = (t, dt) => {
      cx.clearRect(0, 0, W, H); cx.globalCompositeOperation = 'lighter';
      for (const p of P) {
        if (!reduce) { p.x += p.vx * dt; if (p.x > W + 30) p.x = -30; }
        const y = p.y + Math.sin(t * .5 + p.ph + p.x * .004) * 7, a = .15 + .6 * Math.abs(Math.sin(t * p.f + p.ph));
        cx.fillStyle = 'rgba(' + p.c + ',' + a.toFixed(3) + ')'; cx.beginPath(); cx.arc(p.x, y, p.r * 1.6, 0, 6.283); cx.fill();
      }
    };
    draw(0, 0);
    let raf = 0, io = null;
    if (!reduce) {
      let vis = true, last = performance.now(), t = 0;
      if (window.IntersectionObserver) { io = new IntersectionObserver(e => { vis = e[0].isIntersecting; }); io.observe(art); }
      const loop = now => { const dt = Math.min(.05, (now - last) / 1000); last = now; if (vis) { t += dt; draw(t, dt); } raf = requestAnimationFrame(loop); };
      raf = requestAnimationFrame(loop);
    }
    return () => {
      cancelAnimationFrame(raf);
      if (io) io.disconnect();
      if (ro) ro.disconnect(); else window.removeEventListener('resize', fit);
    };
  }, []);

  const A = 'assets/home/';
  return (
      <div className="shield-art" ref={artRef} role="img" aria-label="Animated field visual: a sensor tower, soldiers on a ridge, a drone overhead, a patrolling vehicle and rover, and a pan-and-tilt turret over a landscape of flowing data lines.">
        <div className="drift"><div className="world" ref={worldRef}>
          <img className="base" src={A + 'shield-base.jpg'} alt="" width="1983" height="793" />
          <canvas className="fx" ref={cvRef} width="1983" height="793"></canvas>
          <div className="sp midrone"><img src={A + 'shield-midrone.png'} alt="" /></div>
          <div className="sp drone"><img src={A + 'shield-drone.png'} alt="" /></div>
          <div className="sp vehicle"><img src={A + 'shield-vehicle.png'} alt="" /></div>
          <div className="sp rover"><img src={A + 'shield-rover.png'} alt="" /></div>
          <div className="sp turret"><img src={A + 'shield-turret.png'} alt="" /></div>
          <div className="ring"></div><div className="ring" style={{ animationDelay: '1.8s' }}></div><div className="ring" style={{ animationDelay: '3.6s' }}></div>
          <div className="blink"></div><div className="halo"></div>
        </div></div>
      </div>
  );
}

// ─── HOW IT COMPARES ──────────────────────────────────────────────────────────
// Real HTML table (replaces the old animated image). Each rating pairs a
// fill-level icon with its text label, so meaning never depends on the icon
// or on color alone. Level: 4 = most favorable (full) … 0 = least (empty).
// Ratings must stay sourced/approved — edit HE_COMPARE to change them.
const HE_COMPARE_COLS = ['Pain-free?', 'Injury risk', 'Restraint, not force?', 'Duty to render aid'];
const HE_COMPARE = [
  { tool: 'BolaWRAP® 150', featured: true, cells: [['Yes', 4], ['Extremely low', 4], ['Yes', 4], ['Very low', 4]] },
  { tool: 'Taser / CEW',    cells: [['No', 0], ['Low–high', 1], ['No', 0], ['Moderate', 2]] },
  { tool: 'OC spray',       cells: [['No', 0], ['Moderate–low', 2], ['No', 0], ['Moderate', 2]] },
  { tool: 'Baton / impact', cells: [['No', 0], ['High', 0], ['No', 0], ['High', 1]] },
  { tool: 'Beanbag / 40mm', cells: [['No', 0], ['High', 0], ['No', 0], ['Very high', 0]] },
  { tool: 'Empty-hand',     cells: [['No', 0], ['Low–high', 1], ['No', 0], ['Varies', 1]] },
];
const HE_LEVEL_NAME = ['least favorable', 'less favorable', 'mixed', 'more favorable', 'most favorable'];

// Circle filled clockwise from 12 o'clock by `level` quarters.
function HERating({ level }) {
  const r = 7, c = 9;
  let fill = null;
  if (level >= 4) fill = <circle cx={c} cy={c} r={r} fill="currentColor" />;
  else if (level > 0) {
    const a = (level / 4) * 2 * Math.PI;
    const x = c + r * Math.sin(a), y = c - r * Math.cos(a);
    fill = <path d={`M${c},${c} L${c},${c - r} A${r},${r} 0 ${level > 2 ? 1 : 0} 1 ${x.toFixed(2)},${y.toFixed(2)} Z`} fill="currentColor" />;
  }
  return (
      <svg className="cmp-ico" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
        <circle cx={c} cy={c} r={r} fill="none" stroke="currentColor" strokeWidth="1.6" />
        {fill}
      </svg>
  );
}

function HECompareTable() {
  const ref = useHERef(null);
  const [shown, setShown] = useHEState(false);
  useHEEffect(() => {
    const el = ref.current;
    if (!el || !window.IntersectionObserver) { setShown(true); return; }
    const io = new IntersectionObserver(es => { if (es[0].isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.2 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
      <div className={'cmp' + (shown ? ' in' : '')} ref={ref}>
        <h3 className="cmp-title" id="cmp-title">How it compares</h3>
        <div className="cmp-scroll" role="region" aria-labelledby="cmp-title" tabIndex="0">
          <table className="cmp-table">
            <caption className="sr-only">How BolaWRAP® 150 compares with other use-of-force options on pain, injury risk, restraint versus force, and duty to render aid.</caption>
            <thead>
              <tr>
                <th scope="col">Tool</th>
                {HE_COMPARE_COLS.map(c => <th scope="col" key={c}>{c}</th>)}
              </tr>
            </thead>
            <tbody>
              {HE_COMPARE.map((row, ri) => (
                  <tr key={row.tool} className={row.featured ? 'featured' : undefined} style={{ '--i': ri }}>
                    <th scope="row"><span className="nb">{row.tool}</span></th>
                    {row.cells.map(([label, level], ci) => (
                        <td key={ci} className={'lv' + level}>
                          <span className="cmp-cell">
                            <HERating level={level} />
                            <span>{label}<span className="sr-only"> ({HE_LEVEL_NAME[level]})</span></span>
                          </span>
                        </td>
                    ))}
                  </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="cmp-legend" aria-hidden="true">
          <span>Most favorable</span>
          {[4, 3, 2, 1, 0].map(l => <HERating key={l} level={l} />)}
          <span>Least favorable</span>
        </div>
        <p className="swipe-hint">Swipe sideways to see the full table.</p>
      </div>
  );
}

// ─── REAL STORIES (homepage row) ──────────────────────────────────────────────
// Copy mirrors CASE_STUDIES (components/CaseStudiesPage.jsx) where the story
// exists there. Third-party coverage is framed as the outlet's reporting,
// never as WRAP's claim.
const HE_STORIES = [
  {
    kicker: 'Thought Leadership', source: 'Circuit Magazine',
    title: 'The Liability Gap',
    summary: 'A litigation attorney and use-of-force expert examines why federal courts have narrowed when conducted-energy devices can lawfully be used, and where the BolaWRAP® 150 fits as a non-pain-compliance restraint option.',
    img: 'assets/press/circuit-liability-gap.jpg',
    to: ['case-study', 'circuit-the-liability-gap'], cta: 'Read the story',
  },
  {
    kicker: 'In the News', source: 'WBAL-TV 11 News (Baltimore)',
    title: 'Less-Lethal Options for Crisis Response',
    summary: 'WBAL-TV 11 News Investigates looks at how Baltimore-area agencies are weighing less-lethal tools for de-escalating crisis encounters, with the BolaWRAP® 150 discussed among the options available to officers.',
    img: 'assets/press/wbal-lamorie-lesslethal.jpg', video: true,
    to: 'https://www.wbaltv.com/article/police-mental-health-response-tools-bolawrap-baltimore-area/73320547', cta: 'Watch on WBAL-TV 11',
  },
  {
    kicker: 'Bodycam Breakdown', source: 'WRAP',
    title: 'Highland Park Knife Encounter',
    summary: 'A bodycam breakdown of a knife encounter in Highland Park and how the BolaWRAP® 150 was used in the response.',
    img: 'assets/home/story-highland-park.jpg', video: true,
    to: 'https://www.youtube.com/watch?v=8uI5rUBhj4E&t=16s', cta: 'Watch on YouTube',
  },
];

// ─── SITE FOOTER (all pages) ──────────────────────────────────────────────────
// Homepage footer layout, filled with the previous site footer's real content
// (brand line, product + use-case lists, company/resources links, socials,
// © line, legal links). Exposed as window.Footer, so every page's existing
// <Footer navigate={navigate} /> renders this.
const HE_SOCIALS = [
  { href: 'https://www.linkedin.com/company/wraptechinc/', label: 'LinkedIn', path: 'M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z M4 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4z' },
  { href: 'https://x.com/WrapTechInc', label: 'X / Twitter', path: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z' },
  { href: 'https://www.facebook.com/WrapTechInc', label: 'Facebook', path: 'M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z' },
  { href: 'https://www.instagram.com/wraptechinc/', label: 'Instagram', path: 'M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z M17.5 6.5h.01 M7.55 3h8.9A4.55 4.55 0 0 1 21 7.55v8.9A4.55 4.55 0 0 1 16.45 21H7.55A4.55 4.55 0 0 1 3 16.45V7.55A4.55 4.55 0 0 1 7.55 3z' },
  { href: 'https://www.youtube.com/channel/UCUAp9jPdZXjpAwcREtsHO8w', label: 'YouTube', path: 'M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z M9.75 15.02l5.75-3.02-5.75-3.02v6.04z' },
];

function Footer({ navigate }) {
  const L = (to, label, track) => <HELink to={to} navigate={navigate} track={track}>{label}</HELink>;
  const toTeam = e => {
    e.preventDefault();
    navigate('about');
    setTimeout(() => { const el = document.getElementById('team-section'); if (el) el.scrollIntoView({ behavior: 'smooth' }); }, 300);
  };
  return (
      <footer className="site-footer" id="footer">
        <div className="wrap">
          <div className="foot-grid">
            <div className="foot-brand">
              <div className="wordmark" role="img" aria-label="WRAP®"></div>
              <p>The world leader in Non-Lethal Response™ — protecting officers, subjects, and communities across 60+ countries.</p>
              <div className="foot-social">
                {HE_SOCIALS.map(({ href, label, path }) => (
                    <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label}>
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={path} /></svg>
                    </a>
                ))}
              </div>
            </div>
            <div>
              <h4>Explore</h4>
              <ul>
                <li>{L(['grants'], 'Grants')}</li>
                <li>{L(['use-cases'], 'Use Cases')}</li>
                <li>{L(HE_EXT.training, 'Training')}</li>
                <li>{L(['case-studies'], 'Real Stories')}</li>
                {window.WRAP_FLAGS && window.WRAP_FLAGS.wrapshieldEnabled && <li>{L(['wrapshield'], <span className="nb">WRAPShield™</span>)}</li>}
              </ul>
            </div>
            <div>
              <h4>Products</h4>
              <ul>
                <li>{L(['product', 'bolawrap-150'], 'BolaWrap 150®')}</li>
                <li>{L(['product', 'wrap-reality'], 'WRAP Reality™')}</li>
                <li>{L(['product', 'dfr-x'], 'C-UAS / DFR-X')}</li>
              </ul>
            </div>
            <div>
              <h4>Customers</h4>
              <ul>
                <li>{L(HE_EXT.training, 'Access LMS')}</li>
                <li>{L(HE_EXT.support, 'Support')}</li>
                <li>{L(HE_EXT.support, 'Downloads')}</li>
                <li>{L('https://www.wrap-tactics.com/', 'Training Portal')}</li>
                <li>{L(['contact'], 'Contact Sales', 'footer')}</li>
              </ul>
            </div>
            <div>
              <h4>Company</h4>
              <ul>
                <li>{L(['about'], 'About Us')}</li>
                <li><a href="#/about" onClick={toTeam}>Leadership</a></li>
                <li>{L('https://wraptechnologies.applytojob.com/', 'Careers')}</li>
                <li>{L('https://ir.wrap.com/', 'News & Press')}</li>
                <li>{L(HE_EXT.investors, 'Investor Relations')}</li>
                <li>{L(['contact'], 'Contact')}</li>
              </ul>
            </div>
          </div>
          <div className="foot-base">
            <span>© 2026 WRAP Technologies, Inc. All rights reserved.</span>
            {L(['legal', 'privacy'], 'Privacy Policy')}
            {L(['legal', 'terms'], 'Terms of Use')}
            {L(['legal', 'accessibility'], 'Accessibility')}
          </div>
        </div>
      </footer>
  );
}

function HomeEditorial({ navigate }) {
  const [playing, setPlaying] = useHEState(false);
  const A = 'assets/home/';
  const L = (to, label, cls, track) => <HELink className={cls} to={to} navigate={navigate} track={track}>{label}</HELink>;
  const contact = loc => L(['contact'], 'Contact Sales', 'pill gold', loc);
  const scrollTo = id => e => {
    e.preventDefault();
    const el = document.getElementById(id);
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (el) el.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
  };

  return (
      <>

        <main id="top">

          {/* 1. Hero */}
          <section className="hero" id="hero">
            <div className="hero-img" aria-hidden="true"></div>
            <span className="sr-only">Photo: a hand holding a green BolaWRAP 150 device</span>
            <div className="hero-copy">
              <h1><span>Operationalize</span><span>De-escalation</span><span>with Non-Lethal</span><span className="nb">Response™ Solutions</span></h1>
              <p className="sub-copy"><span className="nb">BolaWRAP® 150</span>, supported by training and certification, helps agencies turn de-escalation into practiced readiness.</p>
              <div className="pills">
                {contact('hero')}
                <a className="pill" href="#bolawrap" onClick={scrollTo('bolawrap')}>See It in Action</a>
              </div>
            </div>
          </section>

          {/* 2. BolaWRAP 150 */}
          <section className="sec" id="bolawrap">
            <div className="wrap">
              <h2 className="sr-only"><span className="nb">BolaWRAP® 150</span></h2>
              <div className={'banner video' + (playing ? ' playing' : '')} id="demoBanner">
                <div className="vid">
                  {playing ? (
                      <video className="art" src={A + 'bolawrap-overview.mp4'} poster={A + 'bolawrap-video-poster.webp'} controls autoPlay playsInline></video>
                  ) : (
                      <>
                        <img className="art" src={A + 'bolawrap-video-poster.webp'} width="1400" height="792" alt="BolaWRAP 150 title frame with the yellow device" />
                        <button type="button" className="playbtn" aria-label="Play the BolaWRAP 150 demonstration video" onClick={() => setPlaying(true)}></button>
                      </>
                  )}
                </div>
                <div className="overlay">
                  <h3 className="hl one-line">Advantage from a distance.</h3>
                  <p><span className="nb">BolaWRAP® 150</span> is a remote restraint tool that deploys a tether to encumber a person from a distance. It provides an advantage to officers on approach when verbal de-escalation alone has not resolved the encounter.</p>
                  <div className="pills">
                    {contact('bolawrap')}
                    {L(['product', 'bolawrap-150'], <>Explore <span className="nb">BolaWRAP® 150</span></>, 'pill')}
                  </div>
                </div>
              </div>
              <p className="cap-note">BolaWRAP® 150 Overview: features, controls and deployment basics.</p>
              <div className="cols3">
                <figure><img className="fig-img" src={A + 'benefit-distance-green.jpg'} width="1600" height="1068" loading="lazy" alt="BolaWRAP 150 in the foreground with its tether wrapped around a person's legs" /><figcaption><h3>Control from a Distance</h3><p>Temporarily restrains a subject from 10–25 feet away.</p></figcaption></figure>
                <figure><img className="fig-img" src={A + 'benefit-pain-compliance.jpg'} width="1536" height="1024" loading="lazy" style={{ objectPosition: '6% 50%' }} alt="Officers pinning a man face down on a car hood with his arm twisted behind his back" /><figcaption><h3>Not Dependent on Pain Compliance</h3><p>Uses a tether instead of electrical shock, strikes, or chemical irritants.</p></figcaption></figure>
                <figure><img className="fig-img" src={A + 'benefit-deescalation.jpg'} width="1440" height="810" loading="lazy" style={{ objectPosition: '55% 50%' }} alt="An officer talking calmly with a man while a second officer looks on" /><figcaption><h3>Supports De-escalation</h3><p>Helps officers gain control when verbal communication alone isn’t enough.</p></figcaption></figure>
              </div>
              <HECompareTable />
            </div>
          </section>

          {/* 4. LMS, Doctrine & Partners */}
          <section className="sec" id="training" style={{ paddingTop: 104 }}>
            <div className="halves">
              <div className="banner">
                <img className="art" src={A + 'training-team.jpg'} width="1500" height="1500" loading="lazy" alt="Two trainers moving in to support a volunteer whose legs are wrapped by the BolaWRAP tether" />
                <div className="overlay">
                  <h2 className="hl">Put the approach into practice</h2>
                  <p>Validated doctrine, a dedicated learning platform, and expert training partners, working as one.</p>
                  <div className="pills">{L(HE_EXT.training, 'Explore Training', 'pill')}</div>
                </div>
              </div>
              <div className="banner">
                <img className="art" src={A + 'training-instructor.jpg'} width="1333" height="2000" loading="lazy" style={{ objectPosition: '50% 45%' }} alt="A WRAP instructor in a plate carrier speaking in front of a WRAP banner" />
                <div className="overlay">
                  <span className="tag">Existing users</span>
                  <h2 className="hl">Already training with WRAP?</h2>
                  <p>Sign in to continue.</p>
                  <div className="pills">{L(HE_EXT.training, 'Access LMS', 'pill gold')}</div>
                </div>
              </div>
            </div>
            <div className="wrap">
              <div className="cols3 text3">
                <div><h3>Learning platform</h3><p>Courses and resources for agency personnel. <span className="nb">WRAP Tactics™</span> supports digital learning, certification management and agency training records.</p></div>
                <div><h3>Doctrine</h3><p>Written guidance that supports putting the approach into practice.</p></div>
                <div><h3>Training partners</h3><p>Partners help deliver and reinforce the approach. <span className="nb">WRAP Tactics™</span> uses digital and in-person learning platforms to support course delivery and training administration.</p></div>
              </div>
            </div>
          </section>

          {/* 6. WRAP Reality */}
          <section className="sec" id="reality">
            <div className="wrap">
              <h2 className="sr-only"><span className="nb">WRAP Reality™</span></h2>
              <div className="banner reality">
                <div className="art reality-art"><picture>
                  <source media="(prefers-reduced-motion: reduce)" srcSet={A + 'reality-computer-still.webp'} />
                  <img src={A + 'reality-computer.webp'} width="838" height="902" loading="lazy" alt="Animated WRAP Reality computer with the glowing WRAP Reality logo" />
                </picture></div>
                <div className="overlay">
                  <div className="reality-copy">
                    <h3 className="hl">Train the brain.<br />Build the response.</h3>
                    <p>Practice de-escalation, strengthen decision making, and build confidence under pressure with WRAP Reality™ immersive virtual reality training.</p>
                  </div>
                  <div className="pills">
                    {contact('reality')}
                    {L(['product', 'wrap-reality'], <>Explore <span className="nb">WRAP Reality™</span></>, 'pill')}
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* 7. Real Stories */}
          <section className="sec" id="stories">
            <div className="wrap">
              <div className="mark-wrap"><h2 className="mark">Real Stories</h2></div>
              <div className="cols3 story-row">
                {HE_STORIES.map(st => (
                    <figure key={st.title} className="story-card">
                      <HELink to={st.to} navigate={navigate} className="story-link">
                        <div className={'story-thumb' + (st.video ? ' is-video' : '')}>
                          <img src={st.img} alt="" loading="lazy" />
                          {st.video && <span className="story-play" aria-hidden="true"></span>}
                        </div>
                        <figcaption>
                          <span className="story-kicker">{st.kicker} · {st.source}</span>
                          <h3>{st.title}</h3>
                          <p>{st.summary}</p>
                          <span className="story-cta">{st.cta} <span aria-hidden="true">→</span>{typeof st.to === 'string' && <span className="sr-only"> (opens in a new tab)</span>}</span>
                        </figcaption>
                      </HELink>
                    </figure>
                ))}
              </div>
              <div className="pills story-actions">
                {contact('stories')}
                {L(['case-studies'], 'View Real Stories', 'pill')}
              </div>
            </div>
          </section>

          {/* 8. Bring it to your agency */}
          <section className="closer" id="agency">
            <h2 className="hl">Bring it to your agency</h2>
            <p>Talk with our team about your agency’s needs, product demonstrations, training, and certification.</p>
            <div className="pills" style={{ justifyContent: 'center' }}>{contact('agency')}</div>
            <p className="funding">{L(['grants'], 'Current funding resources', 'link')}</p>
          </section>

        </main>

        {/* 10. Footer */}
        <Footer navigate={navigate} />
      </>
  );
}

Object.assign(window, { HomeEditorial, HEHeader, HELink, Footer });