
const { useEffect: useHPEffect, useRef: useHPRef, useState: useHPState } = React;

function useReveal() {
  const ref = useHPRef(null);
  useHPEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { el.classList.add('visible'); obs.disconnect(); }
    }, { threshold: 0.08 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return ref;
}

// Parallax — binds window scroll offset to an element style.
function useParallax(factor = 0.3) {
  const ref = useHPRef(null);
  useHPEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        const y = window.scrollY;
        el.style.transform = `translate3d(0, ${y * factor}px, 0)`;
        raf = 0;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [factor]);
  return ref;
}

// Counts up when it enters viewport. Supports values like "55%", "1,000+", "ZERO", "62", "R&D".
function AnimatedCounter({ value, duration = 1400, style }) {
  const ref = useHPRef(null);
  const [display, setDisplay] = useHPState(value);
  useHPEffect(() => {
    const el = ref.current;
    if (!el) return;
    const num = String(value).match(/[\d,]+/);
    if (!num) { setDisplay(value); return; }
    const target = parseInt(num[0].replace(/,/g, ''), 10);
    if (isNaN(target) || target === 0) { setDisplay(value); return; }
    const prefix = String(value).slice(0, String(value).indexOf(num[0]));
    const suffix = String(value).slice(String(value).indexOf(num[0]) + num[0].length);
    const fmt = n => prefix + (num[0].includes(',') ? n.toLocaleString() : String(n)) + suffix;
    setDisplay(fmt(0));
    const obs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      obs.disconnect();
      const start = performance.now();
      const tick = now => {
        const t = Math.min(1, (now - start) / duration);
        const eased = 1 - Math.pow(1 - t, 3);
        setDisplay(fmt(Math.round(target * eased)));
        if (t < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [value, duration]);
  return <span ref={ref} style={style}>{display}</span>;
}

// Image that fades + slides in when it enters the viewport.
function RevealImage({ src, alt, style, ...rest }) {
  const ref = useHPRef(null);
  useHPEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { el.style.opacity = '1'; el.style.transform = 'translateY(0) scale(1)'; obs.disconnect(); }
    }, { threshold: 0.1 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <img ref={ref} src={src} alt={alt} style={{
      opacity: 0, transform: 'translateY(24px) scale(1.02)',
      transition: 'opacity 0.9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1)',
      ...style,
    }} {...rest} />
  );
}

function ImgPlaceholder({ label, style = {} }) {
  return (
    <div style={{
      background: 'repeating-linear-gradient(135deg, var(--bg-3) 0px, var(--bg-3) 14px, var(--bg-2) 14px, var(--bg-2) 28px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      border: '1px solid var(--border)', ...style,
    }}>
      <span style={{ fontFamily: 'monospace', color: 'var(--text-muted)', fontSize: 11, textAlign: 'center', padding: '16px', lineHeight: 1.6, whiteSpace: 'pre-line' }}>{label}</span>
    </div>
  );
}

// ─── HERO ────────────────────────────────────────────────────────────────────
function HeroSection({ navigate, heroLayout }) {
  const layout = heroLayout || 'editorial';
  const bgRef = useParallax(0.25);

  // Shared bits
  const Eyebrow = () => (
    <div style={{
      fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600,
      letterSpacing: '0.14em', color: 'var(--accent)',
      textTransform: 'uppercase', marginBottom: 28,
      animation: 'fadeUp 0.7s ease both', animationDelay: '0.1s',
    }}>
      The Only Complete NLR System — Exclusively from WRAP®
    </div>
  );
  const CTAs = ({ centered }) => (
    <div style={{
      display: 'flex', gap: 14, flexWrap: 'wrap',
      justifyContent: centered ? 'center' : 'flex-start',
      animation: 'fadeUp 0.8s ease both', animationDelay: '0.44s',
      marginBottom: 80,
    }}>
      <button onClick={() => navigate('contact')} style={{
        background: 'var(--accent)', color: '#000', border: 'none', cursor: 'pointer',
        padding: '15px 36px', borderRadius: 4,
        fontFamily: 'DM Sans', fontWeight: 700, fontSize: 15,
      }}>Contact Sales</button>
      <button onClick={() => navigate('products')} style={{
        background: 'transparent', color: 'var(--text)',
        border: '1px solid var(--border-strong)', cursor: 'pointer',
        padding: '15px 36px', borderRadius: 4,
        fontFamily: 'DM Sans', fontWeight: 500, fontSize: 15,
      }}>Explore Products</button>
    </div>
  );
  const StatsStrip = () => (
    <div style={{
      position: 'relative', zIndex: 2,
      maxWidth: 1200, width: '100%', margin: '0 auto',
      padding: '40px 48px 56px',
      borderTop: '1px solid var(--border)',
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
      animation: 'fadeIn 1s ease both', animationDelay: '0.6s',
    }}>
      {[
        { val: '55%',    label: 'Reduction in injuries\nwith the WRAP® NLR System' },
        { val: 'ZERO',   label: 'Reported fatalities' },
        { val: '1,000+', label: 'Agencies deployed\nacross 62 countries' },
      ].map((s, i) => (
        <div key={i} style={{
          borderLeft: i > 0 ? '1px solid var(--border)' : 'none',
          paddingLeft: i > 0 ? 48 : 0,
        }}>
          <AnimatedCounter value={s.val} style={{ display: 'block', fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 56, color: 'var(--accent)', lineHeight: 1, marginBottom: 10 }} />
          <div style={{ fontFamily: 'DM Sans', fontSize: 13, color: 'var(--text-sub)', lineHeight: 1.55, whiteSpace: 'pre-line' }}>{s.label}</div>
        </div>
      ))}
    </div>
  );

  // ───── EDITORIAL / TYPE-FIRST ─────
  if (layout === 'editorial') {
    return (
      <section style={{ background: 'var(--bg)', position: 'relative', overflow: 'hidden', minHeight: '100vh' }}>
        {/* Giant ghost type behind everything */}
        <div aria-hidden="true" style={{
          position: 'absolute', left: '-2vw', top: '42vh',
          fontFamily: 'Barlow Condensed', fontWeight: 900,
          fontSize: 'clamp(240px, 38vw, 560px)',
          lineHeight: 0.78, letterSpacing: '-0.04em',
          color: 'rgba(255,181,5,0.045)',
          textTransform: 'uppercase', whiteSpace: 'nowrap',
          pointerEvents: 'none', userSelect: 'none', zIndex: 0,
          animation: 'fadeIn 1.4s ease both',
        }}>NON-LETHAL</div>

        {/* Parallax hero image, clipped on right side */}
        <div style={{
          position: 'absolute', top: 0, right: 0, bottom: 0,
          width: '48%', overflow: 'hidden', zIndex: 1, pointerEvents: 'none',
        }}>
          <div ref={bgRef} style={{
            position: 'absolute', inset: '-10% -5%',
            backgroundImage: 'url(assets/hero-bolawrap.webp)',
            backgroundSize: 'cover',
            backgroundPosition: 'center right',
            backgroundRepeat: 'no-repeat',
            opacity: 0.75, willChange: 'transform',
          }} />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(to right, var(--bg) 0%, transparent 25%, transparent 70%, rgba(6,12,28,0.6) 100%)',
          }} />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(to bottom, transparent 60%, var(--bg) 100%)',
          }} />
        </div>

        {/* Left rail — vertical meta */}
        <div style={{
          position: 'absolute', left: 48, top: 180, bottom: 120,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          zIndex: 3, pointerEvents: 'none',
        }}>
          <div style={{
            writingMode: 'vertical-rl', transform: 'rotate(180deg)',
            fontFamily: 'DM Sans', fontSize: 10, fontWeight: 700,
            letterSpacing: '0.3em', color: 'var(--text-muted)', textTransform: 'uppercase',
          }}>WRAP / SYS-001 / FIELD-READY</div>
          <div style={{
            writingMode: 'vertical-rl', transform: 'rotate(180deg)',
            fontFamily: 'DM Sans', fontSize: 10, fontWeight: 700,
            letterSpacing: '0.3em', color: 'var(--text-muted)', textTransform: 'uppercase',
          }}>Est. 2015 · 62 Countries</div>
        </div>

        {/* Content — editorial grid */}
        <div style={{
          position: 'relative', zIndex: 2,
          maxWidth: 1200, margin: '0 auto',
          padding: '180px 48px 40px 120px',
        }}>
          <Eyebrow />
          <h1 style={{
            fontFamily: 'Barlow Condensed', fontWeight: 900,
            fontSize: 'clamp(80px, 12vw, 180px)',
            lineHeight: 0.82, letterSpacing: '-0.02em',
            textTransform: 'uppercase', color: 'var(--text)',
            animation: 'fadeUp 0.9s ease both', animationDelay: '0.2s',
            marginBottom: 28,
          }}>
            <span style={{ display: 'block' }}>Non-Lethal</span>
            <span style={{ display: 'block', color: 'var(--accent)' }}>Response<span style={{ fontSize: '0.4em', verticalAlign: 'super', marginLeft: 4 }}>™</span></span>
          </h1>

          {/* Rule + subtext */}
          <div style={{
            display: 'grid', gridTemplateColumns: '120px 1fr',
            alignItems: 'start', gap: 28, maxWidth: 640,
            animation: 'fadeUp 0.8s ease both', animationDelay: '0.32s',
            marginBottom: 44,
          }}>
            <div style={{ height: 1, background: 'var(--accent)', marginTop: 14 }} />
            <p style={{
              fontFamily: 'DM Sans', fontSize: 18, lineHeight: 1.65,
              color: 'var(--text-sub)', margin: 0,
            }}>
              Integrating tools, training, and policy in a complete, legal response system that may reduce the use of force, injuries, and lawsuits.
            </p>
          </div>

          <CTAs centered={false} />
        </div>

        <StatsStrip />
      </section>
    );
  }

  // ───── FULL-BLEED / CENTERED ─────
  if (layout === 'centered') {
    return (
      <section style={{ background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
        <div ref={bgRef} style={{
          position: 'absolute', inset: '-10% 0',
          backgroundImage: 'url(assets/hero-bolawrap.webp)',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
          opacity: 0.45, willChange: 'transform',
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(to bottom, rgba(6,12,28,0.7) 0%, rgba(6,12,28,0.55) 50%, rgba(6,12,28,0.98) 100%)',
        }} />
        <div style={{
          position: 'relative', zIndex: 2,
          maxWidth: 1100, margin: '0 auto',
          padding: '200px 48px 40px',
          textAlign: 'center',
        }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow /></div>
          <h1 style={{
            fontFamily: 'Barlow Condensed', fontWeight: 900,
            fontSize: 'clamp(72px, 10vw, 148px)',
            lineHeight: 0.9, letterSpacing: '-0.01em',
            textTransform: 'uppercase', color: 'var(--text)',
            animation: 'fadeUp 0.8s ease both', animationDelay: '0.2s',
            marginBottom: 36,
          }}>
            Non-Lethal<br />
            <span style={{ color: 'var(--accent)' }}>Response™</span>
          </h1>
          <p style={{
            fontFamily: 'DM Sans', fontSize: 18, lineHeight: 1.65,
            color: 'var(--text-sub)',
            maxWidth: 520,
            margin: '0 auto 44px',
            animation: 'fadeUp 0.8s ease both', animationDelay: '0.32s',
          }}>
            Integrating tools, training, and policy in a complete, legal response system that may reduce the use of force, injuries, and lawsuits.
          </p>
          <CTAs centered={true} />
        </div>
        <StatsStrip />
      </section>
    );
  }

  // ───── SPLIT (original spec) ─────
  return (
    <section style={{ background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
      <div ref={bgRef} style={{
        position: 'absolute', inset: '-10% 0',
        backgroundImage: 'url(assets/hero-bolawrap.webp)',
        backgroundSize: 'cover',
        backgroundPosition: 'center right',
        backgroundRepeat: 'no-repeat',
        opacity: 0.55, willChange: 'transform',
      }} />
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'linear-gradient(to right, rgba(9,9,11,0.95) 40%, rgba(9,9,11,0.4) 100%)',
      }} />
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'linear-gradient(to bottom, transparent 60%, rgba(9,9,11,0.98) 100%)',
      }} />
      <div style={{
        position: 'relative', zIndex: 2,
        maxWidth: 1200, margin: '0 auto',
        padding: '180px 48px 0',
        textAlign: 'left',
      }}>
        <Eyebrow />
        <h1 style={{
          fontFamily: 'Barlow Condensed', fontWeight: 900,
          fontSize: 'clamp(72px, 10vw, 148px)',
          lineHeight: 0.9, letterSpacing: '-0.01em',
          textTransform: 'uppercase', color: 'var(--text)',
          animation: 'fadeUp 0.8s ease both', animationDelay: '0.2s',
          marginBottom: 36,
        }}>
          Non-Lethal<br />
          <span style={{ color: 'var(--accent)' }}>Response™</span>
        </h1>
        <p style={{
          fontFamily: 'DM Sans', fontSize: 18, lineHeight: 1.65,
          color: 'var(--text-sub)',
          maxWidth: 480,
          margin: '0 0 44px',
          animation: 'fadeUp 0.8s ease both', animationDelay: '0.32s',
        }}>
          Integrating tools, training, and policy in a complete, legal response system that may reduce the use of force, injuries, and lawsuits.
        </p>
        <CTAs centered={false} />
      </div>
      <StatsStrip />
    </section>
  );
}

// ─── CHALLENGE ───────────────────────────────────────────────────────────────
function ChallengeSection() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--bg-2)', padding: '120px 48px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 20 }}>The Problem</div>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(40px, 5vw, 68px)', lineHeight: 1, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 32 }}>
            Policing Is Hard<br />and Unpredictable.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--text-sub)', marginBottom: 20 }}>
            Verbal skills alone are not enough. De-escalation is effective when it works — but it's not enough on its own. Officers need low-risk, low force options when verbal communications fail.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--text-sub)' }}>
            It's not just about the threat. Lethal outcomes may stem from the ineffectiveness of traditional lower force options that come before it. Policies are changing — force is under higher levels of scrutiny.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            { label: 'When de-escalation fails', desc: 'Distance collapses to split-second decision making. Officers face fewer options and higher consequences.' },
            { label: 'Changing policy landscape', desc: 'Force is increasingly restricted and under scrutiny. Officers need a defensible, lawful path forward.' },
            { label: 'Forced close-contact risk', desc: 'Officers are pushed into close-contact situations that frequently result in injury — to either party.' },
          ].map((item, i) => (
            <div key={i} style={{
              background: 'var(--card-bg)', border: '1px solid var(--border)',
              borderRadius: 6, padding: '24px 28px',
            }}>
              <div style={{ fontFamily: 'DM Sans', fontWeight: 600, fontSize: 15, color: 'var(--text)', marginBottom: 7 }}>{item.label}</div>
              <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-sub)' }}>{item.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── SYSTEM ───────────────────────────────────────────────────────────────────
function SystemSection({ navigate }) {
  const ref = useReveal();
  const pillars = [
    {
      num: '01', label: 'Tools',
      challenge: '"Less-Lethal" Is Not The Same As Non-Lethal',
      desc: 'Track record of zero reported fatalities.',
      products: [
        { name: 'BolaWrap 150®', id: 'bolawrap-150' },
        { name: 'C-UAS / DFR-X', id: 'dfr-x' },
        { name: 'WRAP Vision', id: 'wrap-vision' },
      ],
    },
    {
      num: '02', label: 'Training',
      challenge: 'Skills Degrade Over 50% Within Six Months Without Reinforcement',
      desc: 'Burst training approach — not "death by PowerPoint." Short lessons with VR reinforcement.',
      products: [
        { name: 'WRAP Tactics', id: 'wrap-tactics' },
        { name: 'WRAP Reality', id: 'wrap-reality' },
      ],
    },
    {
      num: '03', label: 'Policy',
      challenge: 'Policy Scrutiny Begins Well Before Force Is Applied',
      desc: 'Built within constitutional use-of-force standards. Designed for defensible, lawful deployment.',
      products: [
        { name: 'WRAP Tactics', id: 'wrap-tactics' },
        { name: 'WRAP Reality', id: 'wrap-reality' },
        { name: 'WRAP Vision', id: 'wrap-vision' },
      ],
    },
  ];
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--bg)', padding: '120px 48px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: 60 }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 16 }}>The Response</div>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(38px, 5vw, 64px)', lineHeight: 1, textTransform: 'uppercase', color: 'var(--text)', maxWidth: 680 }}>
            The WRAP® Non-Lethal<br />Response™ System
          </h2>
          <p style={{ marginTop: 20, fontSize: 17, lineHeight: 1.7, color: 'var(--text-sub)', maxWidth: 520 }}>
            Not just another tool. A system designed to help minimize risk — exclusively available through WRAP®.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2, alignItems: 'stretch' }}>
          {pillars.map((p, i) => (
            <div key={i} style={{ background: 'var(--card-bg)', padding: '40px 36px', borderTop: '3px solid var(--accent)', display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 80, color: 'rgba(255,255,255,0.05)', lineHeight: 1, marginBottom: 12 }}>{p.num}</div>
              <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 800, fontSize: 34, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 16, letterSpacing: '0.02em' }}>{p.label}</div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 10 }}>Challenge:</div>
              <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-sub)', marginBottom: 16, minHeight: 42 }}>{p.challenge}</p>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--text)', minHeight: 104 }}>{p.desc}</p>
              <div style={{ borderTop: '1px solid var(--border)', paddingTop: 20, marginTop: 28 }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 12 }}>Products</div>
                {p.products.map(prod => (
                  <div key={prod.id}
                    onClick={() => navigate('product', prod.id)}
                    style={{ fontSize: 14, fontWeight: 500, color: 'var(--accent)', marginBottom: 6, cursor: 'pointer' }}
                  >{prod.name} →</div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PRODUCTS PREVIEW ────────────────────────────────────────────────────────
function ProductsPreview({ navigate }) {
  const ref = useReveal();
  const products = [
    { id: 'bolawrap-150', name: 'BolaWrap 150®', category: 'Tool',                   tag: 'FLAGSHIP', tagColor: 'var(--accent)', img: 'assets/product-bolawrap.avif',       desc: 'Belt-carried, pain-free restraint tool for early intervention. Creates a moment to gain control without strikes, shocks, or pain.' },
    { id: 'wrap-reality', name: 'WRAP Reality',  category: 'Training / Policy',          tagColor: 'var(--accent)', img: 'assets/product-wrap-reality.webp',  desc: 'Immersive VR training that reinforces lawful decision-making under stress — the dry fire for de-escalation.' },
    { id: 'wrap-tactics', name: 'WRAP Tactics',  category: 'Training / Policy',          tagColor: 'var(--accent)', img: 'assets/product-wrap-tactics-v2.png', desc: 'Policy-aligned digital training for consistency beyond the classroom. Digital re-certifications, no scheduling burden.' },
    { id: 'wrap-vision',  name: 'WRAP Vision',   category: 'Technology / Policy',        tagColor: 'var(--accent)', img: 'assets/product-wrap-vision.png',    desc: 'Body-worn cameras and evidence management supporting accountability and compliance review.' },
    { id: 'dfr-x',        name: 'C-UAS / DFR-X', category: 'R&D',                       tagColor: 'var(--accent)', img: 'assets/product-dfrx.webp',           desc: 'Transforms drones from passive observers into active life-saving tools — extending NLR beyond the officer.' },
  ];

  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--bg-2)', padding: '120px 48px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56 }}>
          <div>
            <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 14 }}>System Only</div>
            <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(38px, 5vw, 60px)', lineHeight: 1, textTransform: 'uppercase', color: 'var(--text)' }}>
              The Only Complete<br />NLR System
            </h2>
          </div>
          <button onClick={() => navigate('products')} style={{
            background: 'transparent', border: '1px solid var(--border-strong)',
            color: 'var(--text)', cursor: 'pointer', padding: '11px 24px',
            borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 500, fontSize: 14,
          }}>View All Products</button>
        </div>

        {/* Featured row */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr', gap: 16, marginBottom: 16 }}>
          {products.slice(0, 3).map((p, i) => (
            <PCard key={p.id} product={p} navigate={navigate} featured={i === 0} />
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {products.slice(3).map(p => (
            <PCard key={p.id} product={p} navigate={navigate} />
          ))}
        </div>
      </div>
    </section>
  );
}

function PCard({ product, navigate, featured }) {
  const [hover, setHover] = useHPState(false);
  return (
    <div
      onClick={() => navigate('product', product.id)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--card-bg)', borderRadius: 8, overflow: 'hidden',
        border: `1px solid ${hover ? 'rgba(255,181,5,0.28)' : 'var(--border)'}`,
        cursor: 'pointer', transition: 'border-color 0.2s, transform 0.2s',
        transform: hover ? 'translateY(-3px)' : 'none',
      }}
    >
      <div style={{ aspectRatio: featured ? '3/2' : '16/9', overflow: 'hidden', border: 'none', borderBottom: '1px solid var(--border)', background: 'var(--bg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src={product.img} alt={product.name} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
      </div>
      <div style={{ padding: '20px 22px 26px' }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 10 }}>
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: product.tagColor }}>{product.category}</span>
          {product.tag && <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', background: 'var(--accent-dim)', color: 'var(--accent)', padding: '2px 7px', borderRadius: 2, textTransform: 'uppercase' }}>{product.tag}</span>}
        </div>
        <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: featured ? 26 : 22, color: 'var(--text)', marginBottom: 8, letterSpacing: '0.01em' }}>{product.name}</div>
        <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-sub)', marginBottom: 14 }}>{product.desc}</p>
        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent)' }}>Learn More →</div>
      </div>
    </div>
  );
}

// ─── WHY IT MATTERS ───────────────────────────────────────────────────────────
function WhySection() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--bg)', padding: '120px 48px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 20 }}>Why It Matters</div>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(36px, 4vw, 54px)', lineHeight: 1.05, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 24 }}>
            Designed to Increase the Probability of Controlling the Encounter Before It Escalates.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--text-sub)', marginBottom: 32 }}>
            This is not about replacing force. This is about improving how control is achieved in encounters officers face every day.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {['Behavioral Health Crises', 'Resisting Subjects', 'Non-Compliant Subjects', 'Ambiguous Threats', 'Rapidly Evolving Situations'].map(c => (
              <div key={c} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--accent)', flexShrink: 0 }} />
                <span style={{ fontSize: 15, color: 'var(--text-sub)' }}>{c}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
          {[
            { val: '55%',    label: 'Reduction in injuries\nwith WRAP® NLR' },
            { val: '0',      label: 'Reported fatalities' },
            { val: '1,000+', label: 'Agencies actively\nusing the system' },
            { val: '62',     label: 'Countries with\ndeployed agencies' },
          ].map((s, i) => (
            <div key={i} style={{ background: 'var(--card-bg)', padding: '32px 24px', border: '1px solid var(--border)' }}>
              <AnimatedCounter value={s.val} style={{ display: 'block', fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 48, color: 'var(--accent)', lineHeight: 1, marginBottom: 10 }} />
              <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--text-sub)', whiteSpace: 'pre-line' }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── NLR IS / IS NOT ─────────────────────────────────────────────────────────
function NLRSection() {
  const ref = useReveal();
  const rows = [
    ['Lawful under constitutional standards', 'Anti-lethal force'],
    ['Preserves full lethal-force authority when justified', 'A replacement for lawful lethal response'],
    ['A proactive option once lawful authority exists to act', 'Encouraging hesitation, passivity, or retreat'],
    ['A system integrating tools, tactics, and training', 'A standalone product without training'],
    ['Designed to reduce the probabilities of escalation & injury', 'Designed for optics over officer safety'],
    ['Designed to expand lawful options for officers in the field', 'Changing constitutional use-of-force standards'],
  ];
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--bg-2)', padding: '120px 48px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: 52 }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 16 }}>Clarity on NLR</div>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(38px, 5vw, 62px)', textTransform: 'uppercase', color: 'var(--text)', lineHeight: 1 }}>NLR Is — And Is Not.</h2>
          <p style={{ marginTop: 16, fontSize: 16, color: 'var(--text-sub)', maxWidth: 520, lineHeight: 1.65 }}>Understanding what Non-Lethal Response™ stands for — and what it doesn't — is essential for effective deployment and public communication.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
          {[
            { heading: '✓  NLR Is', color: 'var(--accent)', borderColor: 'var(--accent)', col: 0 },
            { heading: '✗  NLR Is Not', color: 'var(--text-muted)', borderColor: 'var(--border-strong)', col: 1 },
          ].map(({ heading, color, borderColor, col }) => (
            <div key={col} style={{ background: 'var(--card-bg)', padding: '36px', borderTop: `3px solid ${borderColor}` }}>
              <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 17, letterSpacing: '0.08em', color, textTransform: 'uppercase', marginBottom: 28 }}>{heading}</div>
              {rows.map(([is, isNot], i) => (
                <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '14px 0', borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none' }}>
                  <span style={{ color, fontWeight: 700, flexShrink: 0 }}>{col === 0 ? '✓' : '✗'}</span>
                  <span style={{ fontSize: 14, lineHeight: 1.55, color: col === 0 ? 'var(--text)' : 'var(--text-muted)' }}>{col === 0 ? is : isNot}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PROGRAM ─────────────────────────────────────────────────────────────────
function ProgramSection({ navigate }) {
  const ref = useReveal();
  const steps = [
    { n: 1, title: 'Instructor Certification & Onboarding', desc: 'Fast, easy, and digital. Most agencies up and running within 30 days.' },
    { n: 2, title: 'Ongoing Training & Recertification', desc: 'Law-enforcement only resources. Skill reinforcement through continuous "doing a little, a lot."' },
    { n: 3, title: 'Online Learning Management', desc: 'Resource library, scenario-based training, proficiency tracking with latest VR scenarios.' },
    { n: 4, title: 'Policy Integration Support', desc: 'Subject matter experts supporting policy adoption, alignment, and implementation.' },
    { n: 5, title: 'Hands-On Best Practices', desc: 'Aligned with real-world deployment. Best practices to supplement existing DT programs.' },
  ];
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--bg)', padding: '120px 48px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
        <div>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 20 }}>The Program</div>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(36px, 4vw, 54px)', lineHeight: 1.05, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 24 }}>
            Delivered as a Program,<br />Not Just a Product.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--text-sub)', marginBottom: 36 }}>
            WRAP® delivers NLR as a complete operational program. Many agencies have been up and running within 30 days thanks to digital onboarding and fast in-person certification.
          </p>
          <div style={{ background: 'var(--accent-dim)', border: '1px solid rgba(255,181,5,0.18)', borderRadius: 8, padding: '24px 28px', marginBottom: 36 }}>
            <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 20, color: 'var(--accent)', marginBottom: 8 }}>36-Month Implementation Model</div>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-sub)' }}>Non-Lethal Response™ is that response — a safe, lawful, and effective way to control encounters without unnecessary escalation.</p>
          </div>
          <button onClick={() => navigate('contact')} style={{
            background: 'var(--accent)', color: '#000', border: 'none', cursor: 'pointer',
            padding: '14px 32px', borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 700, fontSize: 15,
          }}>Schedule a Conversation</button>
        </div>
        <div>
          {steps.map((s, i) => (
            <div key={i} style={{
              display: 'flex', gap: 24, padding: '24px 0',
              borderBottom: i < steps.length - 1 ? '1px solid var(--border)' : 'none',
            }}>
              <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 44, color: 'var(--accent)', lineHeight: 1, flexShrink: 0, width: 48, paddingTop: 2 }}>{s.n}</div>
              <div>
                <div style={{ fontFamily: 'DM Sans', fontWeight: 600, fontSize: 15, color: 'var(--text)', marginBottom: 6 }}>{s.title}</div>
                <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-sub)' }}>{s.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CTA BAND ─────────────────────────────────────────────────────────────────
function CTABand({ navigate }) {
  const ref = useReveal();
  return (
    <section style={{ background: 'var(--accent)', padding: '96px 48px', textAlign: 'center' }}>
      <div style={{ maxWidth: 680, margin: '0 auto' }}>
        <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(48px, 7vw, 88px)', lineHeight: 0.92, textTransform: 'uppercase', color: '#060c1c', marginBottom: 24 }}>
          It's Time to Use the WRAP® NLR System.
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(6,12,28,0.65)', marginBottom: 44 }}>
          A safe, lawful, and effective way to control encounters without unnecessary escalation — and without compromising officer safety.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button onClick={() => navigate('contact')} style={{
            background: '#060c1c', color: '#fff', border: 'none', cursor: 'pointer',
            padding: '16px 40px', borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 700, fontSize: 16,
          }}>Contact Sales</button>
          <button onClick={() => navigate('products')} style={{
            background: 'transparent', color: '#060c1c',
            border: '2px solid rgba(6,12,28,0.35)', cursor: 'pointer',
            padding: '16px 40px', borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 500, fontSize: 16,
          }}>Explore Products</button>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function Footer({ navigate }) {
  const scrollToTeam = () => {
    navigate('about');
    setTimeout(() => {
      const el = document.getElementById('team-section');
      if (el) el.scrollIntoView({ behavior: 'smooth' });
    }, 300);
  };

  return (
    <footer style={{ background: 'var(--bg-2)', padding: '80px 48px 36px', borderTop: '1px solid var(--border)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr', gap: 48, marginBottom: 64 }}>
          <div>
            <img src="assets/wrap-logo-white.svg" alt="WRAP" style={{ height: 22, marginBottom: 24 }} />
            <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: 260 }}>
              The world leader in Non-Lethal Response™ — protecting officers, subjects, and communities across 62 countries.
            </p>
          </div>

          {/* Use Cases */}
          <div>
            <div style={{ fontFamily: 'DM Sans', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 20 }}>Use Cases</div>
            {[
              { label: 'Law Enforcement',     action: () => navigate('use-case', 'law-enforcement') },
              { label: 'Corrections',          action: () => navigate('use-case', 'corrections') },
              { label: 'Defense / Military',   action: () => navigate('use-case', 'defense-military') },
              { label: 'Crisis Response',      action: () => navigate('use-case', 'crisis-response') },
              { label: 'Border & Federal',     action: () => navigate('use-case', 'border-federal') },
              { label: 'Campus Safety',        action: () => navigate('use-case', 'campus-safety') },
            ].map(({ label, action }) => (
              <div key={label} style={{ marginBottom: 11 }}>
                <button onClick={action} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontSize: 14, color: 'var(--text-sub)', textAlign: 'left', transition: 'color 0.2s', fontFamily: 'DM Sans' }}
                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-sub)'}>{label}</button>
              </div>
            ))}
          </div>

          {/* Products */}
          <div>
            <div style={{ fontFamily: 'DM Sans', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 20 }}>Products</div>
            {[
              { label: 'BolaWrap 150®',  action: () => navigate('product', 'bolawrap-150') },
              { label: 'WRAP Reality',   action: () => navigate('product', 'wrap-reality') },
              { label: 'WRAP Tactics',   action: () => navigate('product', 'wrap-tactics') },
              { label: 'WRAP Vision',    action: () => navigate('product', 'wrap-vision') },
              { label: 'C-UAS / DFR-X', action: () => navigate('product', 'dfr-x') },
            ].map(({ label, action }) => (
              <div key={label} style={{ marginBottom: 11 }}>
                <button onClick={action} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontSize: 14, color: 'var(--text-sub)', textAlign: 'left', transition: 'color 0.2s', fontFamily: 'DM Sans' }}
                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-sub)'}>{label}</button>
              </div>
            ))}
          </div>

          {/* Company */}
          <div>
            <div style={{ fontFamily: 'DM Sans', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 20 }}>Company</div>
            {[
              { label: 'About Us',    action: () => navigate('about') },
              { label: 'Leadership',  action: scrollToTeam },
              { label: 'Careers',     href: 'https://wraptechnologies.applytojob.com/' },
              { label: 'News & Press',action: () => window.open('https://ir.wrap.com/', '_blank') },
              { label: 'Contact',     action: () => navigate('contact') },
            ].map(({ label, action, href }) => (
              <div key={label} style={{ marginBottom: 11 }}>
                {href ? (
                  <a href={href} target="_blank" rel="noopener noreferrer" style={{ fontSize: 14, color: 'var(--text-sub)', textDecoration: 'none', transition: 'color 0.2s', fontFamily: 'DM Sans' }}
                    onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
                    onMouseLeave={e => e.currentTarget.style.color = 'var(--text-sub)'}>{label}</a>
                ) : (
                  <button onClick={action} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontSize: 14, color: 'var(--text-sub)', textAlign: 'left', transition: 'color 0.2s', fontFamily: 'DM Sans' }}
                    onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
                    onMouseLeave={e => e.currentTarget.style.color = 'var(--text-sub)'}>{label}</button>
                )}
              </div>
            ))}
          </div>

          {/* Resources */}
          <div>
            <div style={{ fontFamily: 'DM Sans', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 20 }}>Resources</div>
            {[
              { label: 'Investor Relations', href: 'https://ir.wrap.com/' },
              { label: 'Training Portal',    href: 'https://www.wrap-tactics.com/' },
            ].map(({ label, action, href }) => (
              <div key={label} style={{ marginBottom: 11 }}>
                {href ? (
                  <a href={href} target="_blank" rel="noopener noreferrer" style={{ fontSize: 14, color: 'var(--text-sub)', textDecoration: 'none', transition: 'color 0.2s', fontFamily: 'DM Sans' }}
                    onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
                    onMouseLeave={e => e.currentTarget.style.color = 'var(--text-sub)'}>{label}</a>
                ) : (
                  <button onClick={action} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontSize: 14, color: 'var(--text-sub)', textAlign: 'left', transition: 'color 0.2s', fontFamily: 'DM Sans' }}
                    onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
                    onMouseLeave={e => e.currentTarget.style.color = 'var(--text-sub)'}>{label}</button>
                )}
              </div>
            ))}
          </div>
        </div>
        <div style={{ borderTop: '1px solid var(--border)', paddingTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>© 2026 WRAP Technologies, Inc. All rights reserved.</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            {[
              { href: 'https://www.linkedin.com/company/wraptechnologies', 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/wraptechnologies', 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' },
            ].map(({ href, label, path }) => (
              <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label}
                style={{ color: 'var(--text-muted)', transition: 'color 0.2s', display: 'flex' }}
                onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
                onMouseLeave={e => e.currentTarget.style.color = 'var(--text-muted)'}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d={path} />
                </svg>
              </a>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
            {[['privacy','Privacy Policy'],['terms','Terms of Use'],['accessibility','Accessibility']].map(([doc, label]) => (
              <button key={doc} onClick={() => navigate('legal', doc)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontSize: 13, color: 'var(--text-muted)', fontFamily: 'DM Sans', transition: 'color 0.2s' }}
                onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
                onMouseLeave={e => e.currentTarget.style.color = 'var(--text-muted)'}>{label}</button>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── PAGE ─────────────────────────────────────────────────────────────────────
function HomePage({ navigate, tweaks }) {
  return (
    <main>
      <HeroSection navigate={navigate} heroLayout={tweaks.heroLayout} />
      <ChallengeSection />
      <SystemSection navigate={navigate} />
      <ProductsPreview navigate={navigate} />
      <WhySection />
      <NLRSection />
      <ProgramSection navigate={navigate} />
      <CTABand navigate={navigate} />
      <Footer navigate={navigate} />
    </main>
  );
}

Object.assign(window, { HomePage, Footer, ImgPlaceholder, useReveal, useParallax, AnimatedCounter, RevealImage });
