// components/WrapShieldPage.jsx
// Dedicated WrapShield™ / Frenel TPiCore® page.
// All copy and figures are sourced from the WRAP × Frenel press release.
// Reuses global hooks/components from HomePage.jsx (useReveal, AnimatedCounter,
// Footer) and index.html (useMobile). Loaded AFTER HomePage.jsx so those globals
// exist; exposes WrapShieldPage + WrapShieldHighlight via Object.assign(window).

const { useEffect: useWSEffect, useState: useWSState } = React;

// Trademark helper — renders ™ / ® as a small superscript like the home hero.
function TM({ s }) {
  return <span style={{ fontSize: '0.4em', verticalAlign: 'super', marginLeft: 1 }}>{s}</span>;
}

// Small reusable check / cross cell for the comparison tables.
function Mark({ ok }) {
  return (
      <span style={{ color: ok ? 'var(--accent)' : 'var(--text-muted)', fontWeight: 800, marginRight: 8 }}>
      {ok ? '✓' : '✕'}
    </span>
  );
}

// ─── HERO ─────────────────────────────────────────────────────────────────────
function WSHero({ navigate, pauseAutoCycle }) {
  const isMobile = useMobile();
  return (
      <section style={{ background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
        <WrapShieldHeroBg />

        <div style={{
          position: 'relative', zIndex: 2, maxWidth: 1200, margin: '0 auto',
          padding: isMobile ? '128px 20px 56px' : '200px 48px 80px',
        }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 24, animation: 'fadeUp 0.7s ease both' }}>
            Counter-UAS Intelligence &amp; Response Platform
          </div>

          <h1 style={{
            fontFamily: 'Barlow Condensed', fontWeight: 900,
            fontSize: 'clamp(64px, 11vw, 168px)', lineHeight: 0.84,
            letterSpacing: '-0.02em', textTransform: 'uppercase', color: 'var(--text)',
            animation: 'fadeUp 0.8s ease both', animationDelay: '0.1s', marginBottom: 32,
          }}>
            Wrap<span style={{ color: 'var(--accent)' }}>Shield</span><TM s="™" />
          </h1>

          <div style={{
            display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '120px 1fr',
            alignItems: 'start', gap: 28, maxWidth: 720, marginBottom: 44,
            animation: 'fadeUp 0.8s ease both', animationDelay: '0.22s',
          }}>
            {!isMobile && <div style={{ height: 1, background: 'var(--accent)', marginTop: 14 }} />}
            <p style={{ fontFamily: 'DM Sans', fontSize: 19, lineHeight: 1.6, color: 'var(--text-sub)', margin: 0 }}>
              An integrated counter-UAS intelligence and response platform — with Frenel&rsquo;s
              TPiCore<TM s="®" /> polarimetric thermal AI as the machine perception layer at its core.
              Built to operate across the full sophistication spectrum of the modern drone threat.
            </p>
          </div>

          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', animation: 'fadeUp 0.8s ease both', animationDelay: '0.32s' }}>
            <button onClick={() => navigate('contact')} style={{ background: 'var(--accent)', color: '#000', border: 'none', cursor: 'pointer', padding: '15px 30px', 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 30px', borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 600, fontSize: 15 }}>
              View Products
            </button>
          </div>
        </div>

        {/* Stat strip */}
        <div style={{ position: 'relative', zIndex: 2, borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', background: 'var(--bg-2)' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)' }}>
            {[
              ['400m', 'Nano-drone detection, low angle'],
              ['500m', 'Deterministic drone-vs-bird'],
              ['< 2s', 'Detection to authorized response'],
              ['ZERO', 'RF dependency — passive sensing'],
            ].map(([v, l], i) => (
                <div key={i} style={{ padding: isMobile ? '24px 20px' : '32px 28px', borderRight: (!isMobile && i < 3) ? '1px solid var(--border)' : 'none', borderTop: (isMobile && i > 1) ? '1px solid var(--border)' : 'none' }}>
                  <AnimatedCounter value={v} style={{ display: 'block', fontFamily: 'Barlow Condensed', fontWeight: 800, fontSize: 'clamp(34px, 4vw, 48px)', color: 'var(--accent)', lineHeight: 1 }} />
                  <div style={{ fontSize: 12.5, color: 'var(--text-sub)', marginTop: 8, lineHeight: 1.4 }}>{l}</div>
                </div>
            ))}
          </div>
        </div>
        <HeroCycleDots currentPage="wrapshield" navigate={navigate} pauseAutoCycle={pauseAutoCycle} />
      </section>
  );
}

// ─── THE BLIND SPOT (Pain / Demand / Solution) ────────────────────────────────
function WSBlindSpot() {
  const ref = useReveal();
  const isMobile = useMobile();
  const cards = [
    {
      tag: 'The Pain',
      body: 'EO/IR is commoditized. RF-based systems are blind to the fastest-growing threat class: pre-programmed, fiber-optic, and electromagnetically silent drones — invisible to nearly everything the market has built.',
    },
    {
      tag: 'The Demand',
      body: 'Defense, border security, and critical infrastructure operators demand detection that works against the threats that matter — not just the threats that broadcast. 18,000+ law enforcement agencies. $1.2B+ annual DoD C-UAS spend.',
    },
    {
      tag: 'The Solution',
      body: 'TPiCore® reads the physics of matter — not RF signals. The polarimetric fingerprint of every physical object is as immutable as its molecular composition. It cannot be spoofed, jammed, or turned off.',
    },
  ];
  return (
      <section ref={ref} className="reveal" style={{ background: 'var(--bg)', padding: isMobile ? '72px 20px' : '120px 48px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 20 }}>A Changing Threat Environment</div>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(38px, 5vw, 64px)', lineHeight: 1, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 24, maxWidth: 900 }}>
            The defining threats of this decade don&rsquo;t broadcast.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--text-sub)', maxWidth: 760, marginBottom: 48 }}>
            The counter-UAS market is overwhelmingly built on RF sensing — effective against large drones that
            communicate and accept command-and-control over the air. Against the fastest-growing and most dangerous
            segment of the threat spectrum, those systems are blind. That blind spot is the operational condition under
            which every agency, installation, and infrastructure operator works today.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 16 }}>
            {cards.map((c, i) => (
                <div key={i} style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderTop: '3px solid var(--accent)', borderRadius: '0 0 8px 8px', padding: '26px 24px 30px' }}>
                  <div style={{ fontFamily: 'DM Sans', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 14 }}>{c.tag}</div>
                  <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--text-sub)', margin: 0 }}>{c.body}</p>
                </div>
            ))}
          </div>
        </div>
      </section>
  );
}

// ─── WHY FRENEL — PHYSICS-BASED MACHINE PERCEPTION ─────────────────────────────
function WSWhyFrenel() {
  const ref = useReveal();
  const isMobile = useMobile();
  return (
      <section ref={ref} className="reveal" style={{ background: 'var(--bg-2)', padding: isMobile ? '72px 20px' : '120px 48px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 72, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 20 }}>Why Frenel</div>
            <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 28 }}>
              Physics-Based<br />Machine Perception
            </h2>
            <p style={{ fontSize: 16.5, lineHeight: 1.7, color: 'var(--text-sub)', marginBottom: 18 }}>
              Every thermal camera ever built captures one dimension of infrared data: intensity. Frenel&rsquo;s
              TPiCore<TM s="®" /> breaks that constraint. Its Division of Focal Plane (DoFP) architecture
              simultaneously captures and processes the polarization component of thermal radiation — data standard
              cameras are physically blind to.
            </p>
            <p style={{ fontSize: 16.5, lineHeight: 1.7, color: 'var(--text-sub)' }}>
              By exploiting the unique polarimetric fingerprint every material projects, TPiCore<TM s="®" /> reconstructs
              a second, richer layer of intelligence about every object in the scene — its texture, composition, and
              physical properties. It runs in real time on NVIDIA Jetson Orin edge hardware, with zero RF dependency,
              and as a passive sensor it emits no signal of its own.
            </p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 26 }}>
              {['2024 SPIE Prism Award', 'NVIDIA Inception Member', 'Edge AI · Jetson Orin'].map((b, i) => (
                  <span key={i} style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-sub)', background: 'var(--accent-dim)', border: '1px solid rgba(255,181,5,0.25)', padding: '7px 13px', borderRadius: 3 }}>{b}</span>
              ))}
            </div>
          </div>

          {/* Before / after demo */}
          <div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                ['assets/wrapshield-cars-thermal.webp', 'Standard thermal'],
                ['assets/wrapshield-cars-enhanced.webp', 'WrapShield™ TPiCore®'],
              ].map(([src, label], i) => (
                  <figure key={i} style={{ margin: 0, border: `1px solid ${i === 1 ? 'rgba(255,181,5,0.4)' : 'var(--border)'}`, borderRadius: 6, overflow: 'hidden', background: 'var(--bg-3)' }}>
                    <img src={src} alt={label} loading="lazy" decoding="async" style={{ width: '100%', height: 'auto', display: 'block' }} />
                    <figcaption style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: i === 1 ? 'var(--accent)' : 'var(--text-muted)', padding: '8px 10px', textAlign: 'center' }}>{label}</figcaption>
                  </figure>
              ))}
            </div>
            <p style={{ fontSize: 12.5, color: 'var(--text-muted)', marginTop: 12, textAlign: 'center', lineHeight: 1.5 }}>
              Frenel polarimetric image processing renders material-level detail invisible to a standard thermal sensor.
            </p>
          </div>
        </div>
      </section>
  );
}

// ─── VERIFIED FIELD PERFORMANCE TABLE ──────────────────────────────────────────
function WSPerformanceTable() {
  const ref = useReveal();
  const isMobile = useMobile();
  const rows = [
    ['Nano-drone detection', false, 'Confirmed at 400m, low angle'],
    ['Drone vs. bird classification', false, 'Deterministic at 500m'],
    ['RF-silent / pre-programmed drones', false, 'Physics-based — no signal required'],
    ['Tracking through clutter', false, 'Continuous 500–750m, below treeline'],
    ['Camouflage penetration', false, 'Man-made objects in vegetation'],
    ['Maritime human detection', false, 'Person in water, between breaking waves'],
    ['IED / roadside object detection', false, 'From a moving vehicle'],
    ['Material ID (metal/plastic/glass)', false, 'Compositional differential classification'],
    ['Spoofing / jamming resistance', false, 'Zero — physics cannot be spoofed'],
    ['AI processing', false, 'Full TPiCore® edge AI — field-deployable'],
  ];
  return (
      <section ref={ref} className="reveal" style={{ background: 'var(--bg)', padding: isMobile ? '72px 20px' : '120px 48px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 20 }}>Verified Field Performance</div>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(34px, 4.5vw, 58px)', lineHeight: 1, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 24 }}>
            TPiCore<TM s="®" /> vs. Standard Thermal
          </h2>
          <p style={{ fontSize: 15.5, lineHeight: 1.7, color: 'var(--text-sub)', maxWidth: 720, marginBottom: 40 }}>
            Capabilities verified in real-world field testing — including drone detection footage from February 2026,
            ground gimbal evaluations, maritime scenarios, and driving situational-awareness trials.
          </p>

          <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1.2fr 1fr' : '1.4fr 0.7fr 1.3fr', background: 'var(--bg-3)', borderBottom: '1px solid var(--border-strong)' }}>
              <div style={{ padding: '14px 18px', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-sub)' }}>Capability</div>
              {!isMobile && <div style={{ padding: '14px 18px', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Standard</div>}
              <div style={{ padding: '14px 18px', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent)' }}>WrapShield™</div>
            </div>
            {rows.map(([cap, , result], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: isMobile ? '1.2fr 1fr' : '1.4fr 0.7fr 1.3fr', borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none', background: i % 2 ? 'var(--card-bg)' : 'transparent' }}>
                  <div style={{ padding: '16px 18px', fontSize: 14, color: 'var(--text)', display: 'flex', alignItems: 'center' }}>{cap}</div>
                  {!isMobile && <div style={{ padding: '16px 18px', fontSize: 13.5, color: 'var(--text-muted)', display: 'flex', alignItems: 'center' }}><Mark ok={false} />Challenged</div>}
                  <div style={{ padding: '16px 18px', fontSize: 13.5, color: 'var(--text-sub)', display: 'flex', alignItems: 'center' }}><Mark ok={true} />{result}</div>
                </div>
            ))}
          </div>
        </div>
      </section>
  );
}

// ─── SEEING THE UNSEEN (feature image) ─────────────────────────────────────────
function WSUnseen() {
  const ref = useReveal();
  const isMobile = useMobile();
  return (
      <section ref={ref} className="reveal" style={{ background: 'var(--bg-2)', padding: isMobile ? '72px 20px' : '120px 48px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 36 : 72, alignItems: 'center' }}>
          <figure style={{ margin: 0, order: isMobile ? 2 : 1, border: '1px solid rgba(255,181,5,0.4)', borderRadius: 8, overflow: 'hidden', background: 'var(--bg-3)' }}>
            <img src="assets/wrapshield-veg-enhanced.webp" alt="TPiCore® detecting a suspected metal object hidden in vegetation" loading="lazy" decoding="async" style={{ width: '100%', height: 'auto', display: 'block' }} />
            <figcaption style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--accent)', padding: '10px', textAlign: 'center' }}>Frenel enhanced — suspected metal object, 98%</figcaption>
          </figure>
          <div style={{ order: isMobile ? 1 : 2 }}>
            <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 20 }}>Seeing the Unseen</div>
            <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(34px, 4.5vw, 58px)', lineHeight: 1, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 26 }}>
              A different kind of sensor output
            </h2>
            <p style={{ fontSize: 16.5, lineHeight: 1.7, color: 'var(--text-sub)', marginBottom: 18 }}>
              The result isn&rsquo;t a better image — it&rsquo;s a fundamentally different kind of sensor output.
              Anomalies are detected and classified by what physics says they are, not by how they look in a given
              light condition.
            </p>
            <p style={{ fontSize: 16.5, lineHeight: 1.7, color: 'var(--text-sub)' }}>
              Because TPiCore<TM s="®" /> identifies objects by the polarimetric signature of their materials rather
              than by any emission, it is designed to detect and help classify low- and no-RF systems — and to
              distinguish them from background clutter.
            </p>
          </div>
        </div>
      </section>
  );
}

// ─── WRAPSHIELD VS RF MARKET STANDARD ──────────────────────────────────────────
function WSVsRF() {
  const ref = useReveal();
  const isMobile = useMobile();
  const rows = [
    ['Detection method', 'RF signal listening', 'Polarimetric physics — material composition'],
    ['Defeats RF-silent drones', 'No — blind to pre-programmed / fiber-optic', 'Yes — no signal required for detection'],
    ['Sensor modality', 'Single: RF, optical, or thermal', 'Multi-layer: polarimetric + thermal + AI'],
    ['AI processing', 'Cloud-dependent or limited edge', 'Full TPiCore® edge AI — field-deployable'],
    ['Spoofing / jamming risk', 'High — signal can be suppressed/faked', 'Zero — physics cannot be spoofed'],
    ['Market exclusivity (US / NATO)', 'Open market — multiple vendors', 'Exclusive WRAP license — no equivalent'],
  ];
  return (
      <section ref={ref} className="reveal" style={{ background: 'var(--bg)', padding: isMobile ? '72px 20px' : '120px 48px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 20 }}>Against the Market Standard</div>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(34px, 4.5vw, 58px)', lineHeight: 1, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 40 }}>
            WrapShield<TM s="™" /> vs. RF-Based Detection
          </h2>

          <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : '1fr 1.1fr 1.1fr', background: 'var(--bg-3)', borderBottom: '1px solid var(--border-strong)' }}>
              <div style={{ padding: '14px 18px', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-sub)' }}>Capability</div>
              <div style={{ padding: '14px 18px', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>RF-Based</div>
              <div style={{ padding: '14px 18px', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent)' }}>WrapShield™</div>
            </div>
            {rows.map(([cap, rf, ws], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : '1fr 1.1fr 1.1fr', borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none', background: i % 2 ? 'var(--card-bg)' : 'transparent' }}>
                  {!isMobile && <div style={{ padding: '16px 18px', fontSize: 13.5, fontWeight: 600, color: 'var(--text)', display: 'flex', alignItems: 'center' }}>{cap}</div>}
                  <div style={{ padding: '16px 18px', fontSize: 13, color: 'var(--text-muted)', display: 'flex', alignItems: 'center' }}>{isMobile && <strong style={{ display: 'block' }}>{cap}: </strong>}{rf}</div>
                  <div style={{ padding: '16px 18px', fontSize: 13, color: 'var(--text-sub)', display: 'flex', alignItems: 'center' }}><Mark ok={true} />{ws}</div>
                </div>
            ))}
          </div>
        </div>
      </section>
  );
}

// ─── PLATFORM, NOT A PRODUCT ───────────────────────────────────────────────────
function WSPlatform() {
  const ref = useReveal();
  const isMobile = useMobile();
  const chain = [
    ['Detect', 'Physics-based polarimetric sensing through Frenel TPiCore® — the machine perception core.'],
    ['Classify', 'TPiCore® feeds the AI classification engine data no RF-dependent competitor can access.'],
    ['Respond', 'A tiered non-lethal response layer — BolaWrap®, MERLIN-Interdictor DFR-X, and future platforms.'],
  ];
  return (
      <section ref={ref} className="reveal" style={{ background: 'var(--bg-2)', padding: isMobile ? '72px 20px' : '120px 48px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 20 }}>An Integrated Intelligence Platform</div>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(36px, 4.5vw, 64px)', lineHeight: 1, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 24, maxWidth: 900 }}>
            A platform-level answer to a platform-level problem
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--text-sub)', maxWidth: 760, marginBottom: 48 }}>
            WrapShield<TM s="™" /> is an integrated architecture — from physics-based polarimetric detection, through
            AI classification, to tiered non-lethal response — that moves from detection to authorized response in
            under two seconds, faster than any human escalation protocol can follow.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 16 }}>
            {chain.map(([step, body], i) => (
                <div key={i} style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 8, padding: '28px 24px 32px' }}>
                  <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 800, fontSize: 16, color: 'var(--accent)', marginBottom: 6 }}>0{i + 1}</div>
                  <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 800, fontSize: 30, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 12 }}>{step}</div>
                  <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--text-sub)', margin: 0 }}>{body}</p>
                </div>
            ))}
          </div>
        </div>
      </section>
  );
}

// ─── EXCLUSIVE LICENSE + THREE VERTICALS ───────────────────────────────────────
function WSExclusive() {
  const ref = useReveal();
  const isMobile = useMobile();
  return (
      <section ref={ref} className="reveal" style={{ background: 'var(--bg)', padding: isMobile ? '72px 20px' : '120px 48px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ background: 'var(--card-bg)', border: '1px solid var(--border-strong)', borderLeft: '3px solid var(--accent)', borderRadius: '0 8px 8px 0', padding: isMobile ? '32px 24px' : '48px 56px', marginBottom: 56 }}>
            <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>Exclusive US &amp; NATO License</div>
            <p style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 'clamp(24px, 3vw, 36px)', lineHeight: 1.2, color: 'var(--text)', margin: 0, maxWidth: 940 }}>
              Through a strategic equity stake in Frenel Imaging and an exclusive license and distribution agreement,
              WRAP holds sole commercial rights to the TPiCore<TM s="®" /> platform across the United States and NATO
              member markets.
            </p>
          </div>

          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 20 }}>One Procurement Inflection Point</div>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 40, maxWidth: 880 }}>
            Three converging customer verticals
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 16 }}>
            {[
              ['Domestic Law Enforcement', '18,000+ agencies seeking detection that works against the threats that matter, with proportionate, non-lethal response.'],
              ['US & Allied Military', 'Homeland security, border security, and defense installations confronting RF-silent and autonomous unmanned systems.'],
              ['Critical Infrastructure', 'Ports, utilities, transportation systems, and global corporations securing facilities and perimeters.'],
            ].map(([t, d], i) => (
                <div key={i} style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 8, padding: '26px 24px 30px' }}>
                  <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 22, color: 'var(--text)', marginBottom: 12 }}>{t}</div>
                  <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--text-sub)', margin: 0 }}>{d}</p>
                </div>
            ))}
          </div>
        </div>
      </section>
  );
}

// ─── ABOUT FRENEL ──────────────────────────────────────────────────────────────
function WSAboutFrenel() {
  const ref = useReveal();
  const isMobile = useMobile();
  return (
      <section ref={ref} className="reveal" style={{ background: 'var(--bg-2)', padding: isMobile ? '72px 20px' : '110px 48px' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 20 }}>About Frenel Imaging</div>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--text-sub)', marginBottom: 28 }}>
            Frenel Imaging Ltd. is an advanced sensing technology company specializing in polarimetric thermal imaging
            for defense, security, and precision sensing. Its Division of Focal Plane (DoFP) architecture delivers
            simultaneous multi-channel polarimetric and thermal data at the pixel level — enabling material
            discrimination, anomaly detection, and object classification where conventional sensors fail. Frenel is a
            recipient of the 2024 SPIE Prism Award and a member of the NVIDIA Inception Program.
          </p>
          <a href="https://www.frenel.ai/" target="_blank" rel="noopener noreferrer" style={{ fontSize: 14, fontWeight: 600, color: 'var(--accent)', textDecoration: 'none' }}>
            frenel.ai →
          </a>
        </div>
      </section>
  );
}

// ─── CTA BAND ──────────────────────────────────────────────────────────────────
function WSCTABand({ navigate }) {
  const isMobile = useMobile();
  return (
      <section style={{ background: 'var(--bg)', padding: isMobile ? '64px 20px' : '100px 48px' }}>
        <div style={{ maxWidth: 1000, margin: '0 auto', background: 'var(--card-bg)', border: '1px solid var(--border-strong)', borderRadius: 12, padding: isMobile ? '40px 28px' : '64px 64px', textAlign: 'center' }}>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 18 }}>
            Detect the threats that don&rsquo;t broadcast
          </h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.7, color: 'var(--text-sub)', maxWidth: 620, margin: '0 auto 32px' }}>
            Talk to our team about WrapShield<TM s="™" /> deployments for defense, border security, and critical
            infrastructure.
          </p>
          <button onClick={() => navigate('contact')} style={{ background: 'var(--accent)', color: '#000', border: 'none', cursor: 'pointer', padding: '16px 36px', borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 700, fontSize: 15 }}>
            Contact Sales
          </button>
        </div>
        {/* Forward-looking / source note */}
        <div style={{ maxWidth: 1000, margin: '36px auto 0', textAlign: 'center' }}>
          <p style={{ fontSize: 11.5, lineHeight: 1.6, color: 'var(--text-muted)' }}>
            Performance claims reflect WRAP and Frenel field testing as described in the companies&rsquo; announcement.
            This page contains forward-looking statements; actual results may differ materially. See WRAP&rsquo;s SEC
            filings for risk factors. TPiCore<TM s="®" /> is a registered trademark of Frenel Imaging Ltd.
            WrapShield<TM s="™" /> and BolaWrap<TM s="®" /> are trademarks of WRAP Technologies, Inc.
          </p>
        </div>
      </section>
  );
}

// ─── HOME-PAGE HIGHLIGHT BAND (exported for HomePage.jsx) ───────────────────────
function WrapShieldHighlight({ navigate }) {
  const ref = useReveal();
  const isMobile = useMobile();
  return (
      <section ref={ref} className="reveal" style={{ background: 'var(--bg-2)', padding: isMobile ? '72px 20px' : '110px 48px', borderTop: '1px solid var(--border)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 36 : 64, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
              <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', background: 'var(--accent)', color: '#000', padding: '3px 8px', borderRadius: 2 }}>New</span>
              <span style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)' }}>Counter-UAS</span>
            </div>
            <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(40px, 5vw, 68px)', lineHeight: 0.92, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 24 }}>
              Wrap<span style={{ color: 'var(--accent)' }}>Shield</span><TM s="™" />
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--text-sub)', marginBottom: 28, maxWidth: 520 }}>
              An integrated counter-UAS intelligence and response platform powered by Frenel&rsquo;s exclusive
              TPiCore<TM s="®" /> polarimetric thermal AI — detecting the RF-silent drones that every signal-based
              system is blind to.
            </p>
            <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', marginBottom: 30 }}>
              {[['400m', 'Nano-drone'], ['ZERO', 'RF needed'], ['< 2s', 'To response']].map(([v, l], i) => (
                  <div key={i}>
                    <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 800, fontSize: 34, color: 'var(--accent)', lineHeight: 1 }}>{v}</div>
                    <div style={{ fontSize: 12, color: 'var(--text-sub)', marginTop: 4 }}>{l}</div>
                  </div>
              ))}
            </div>
            <button onClick={() => navigate('wrapshield')} style={{ background: 'var(--accent)', color: '#000', border: 'none', cursor: 'pointer', padding: '14px 28px', borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 700, fontSize: 15 }}>
              Explore WrapShield →
            </button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {[
              ['assets/wrapshield-cars-thermal.webp', 'Standard thermal'],
              ['assets/wrapshield-cars-enhanced.webp', 'WrapShield™'],
            ].map(([src, label], i) => (
                <figure key={i} style={{ margin: 0, border: `1px solid ${i === 1 ? 'rgba(255,181,5,0.4)' : 'var(--border)'}`, borderRadius: 6, overflow: 'hidden', background: 'var(--bg-3)' }}>
                  <img src={src} alt={label} loading="lazy" decoding="async" style={{ width: '100%', height: 'auto', display: 'block' }} />
                  <figcaption style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: i === 1 ? 'var(--accent)' : 'var(--text-muted)', padding: '7px 8px', textAlign: 'center' }}>{label}</figcaption>
                </figure>
            ))}
          </div>
        </div>
      </section>
  );
}

// ─── PAGE ──────────────────────────────────────────────────────────────────────
function WrapShieldPage({ navigate, pauseAutoCycle }) {
  useWSEffect(() => { document.title = 'WrapShield™ — WRAP® Counter-UAS Platform'; }, []);
  return (
      <main>
        <WSHero navigate={navigate} pauseAutoCycle={pauseAutoCycle} />
        <WSBlindSpot />
        <WSWhyFrenel />
        <WSPerformanceTable />
        <WSUnseen />
        <WSVsRF />
        <WSPlatform />
        <WSExclusive />
        <WSAboutFrenel />
        <WSCTABand navigate={navigate} />
        <Footer navigate={navigate} />
      </main>
  );
}

Object.assign(window, { WrapShieldPage, WrapShieldHighlight });