const { useState: usePState } = React;

const PRODUCTS = [
  {
    id: 'bolawrap-150',
    name: 'BolaWrap 150®',
    category: 'Tool',
    tagColor: '#FFB505',
    tag: 'FLAGSHIP',
    img: 'assets/product-bolawrap.avif',
    heroImg: 'assets/bolawrap-hero.avif',
    tagline: 'Pain-Free Restraint. Early Intervention.',
    headline: 'A New Tool for the Critical Moment Before Escalation.',
    desc: 'The BolaWrap 150® is a belt-carried, pain-free restraint tool designed for early intervention. It creates a moment to move, gain control, and resolve safely — without strikes, shocks, or pain compliance.',
    features: [
      'Disrupts subjects through sight, sound, and sensation — evoking a human startle response',
      'Remotely restrains, distracts, and compromises subject balance',
      'Increases chances of control without pain or injury',
      'Initiate from a distance while preserving tactical advantage',
      'Bright light and loud acoustic signature safely disrupts altered psychological states',
      'Capture evidence compliance with integrated body cams',
      'Track record of zero reported fatalities',
    ],
    howItWorks: [
      { step: 1, title: 'Distract and Disorient',         desc: 'Deploy from distance — sight, sound, and sensation disrupt the subject\'s decision cycle.' },
      { step: 2, title: 'Interrupt the Decision Cycle',   desc: 'The startle response creates a critical window of compliance before escalation.' },
      { step: 3, title: 'Create Time and Space',          desc: 'Officers gain distance and decision space without closing the gap.' },
      { step: 4, title: 'Move In with Confidence',        desc: 'Approach with tactical advantage intact and control established.' },
      { step: 5, title: 'Lawful Hands-On Control',        desc: 'Apply proactive handcuffing and lawful best-practice techniques safely.' },
      { step: 6, title: 'Transition if Necessary',        desc: 'Maintain full ability to transition to other force options if required.' },
    ],
    stats: [
      { val: 'ZERO', label: 'Reported fatalities' },
      { val: '1,000+', label: 'Agencies deployed' },
      { val: '62', label: 'Countries' },
    ],
  },
  {
    id: 'wrap-reality',
    name: 'WRAP Reality',
    category: 'Training / Policy',
    tagColor: '#FFB505',
    img: 'assets/product-wrap-reality.webp',
    heroImg: 'assets/wrap-reality-hero.webp',
    tagline: 'Train the Brain. Build the Response.',
    headline: 'Immersive VR Training for Lawful Decision-Making Under Stress.',
    desc: 'WRAP Reality is immersive virtual reality training that reinforces lawful decision-making under stress — the dry fire for practical de-escalation and use-of-force decision-making.',
    features: [
      'Virtual Reality to "train the brain" on non-lethal response techniques',
      'IADLEST/POST certification pathways that meet in-service opportunities',
      'Human factors and decision-making certifications',
      'Short burst-training lessons — learn and certify at your own pace',
      'Does NOT replace existing defensive tactics programs',
      'Trains NLR-specific, lawful, hands-on best practices',
      'Proficiency tracking with latest VR scenarios',
    ],
    stats: [
      { val: '50%+', label: 'Skill degradation\navoided with reinforcement' },
      { val: '30 days', label: 'Agency onboarding\ntimeline' },
    ],
  },
  {
    id: 'wrap-tactics',
    name: 'WRAP Tactics',
    category: 'Training / Policy',
    tagColor: '#FFB505',
    img: 'assets/product-wrap-tactics-v2.png',
    heroImg: 'assets/wrap-tactics-hero.png',
    extraImg: 'assets/wrap-tactics-2.png',
    tagline: 'Policy-Aligned. Always Current.',
    headline: 'Digital Training That Goes Beyond the Classroom.',
    desc: 'WRAP Tactics provides policy-aligned digital training ensuring consistency beyond the classroom. Re-certifications are obtained digitally, reducing traditional scheduling and logistical burdens.',
    features: [
      'Policy-aligned digital training platform',
      'Digital re-certifications — no scheduling or logistical burdens',
      'Instructor kit with blue devices, timers, drills, and training aids',
      'Scenario-based learning with proficiency tracking',
      'IADLEST/POST certification pathways',
      'Reinforces skills between in-person sessions',
    ],
    stats: [
      { val: '100%', label: 'Digital\ncertification pathway' },
      { val: '30 days', label: 'Up and running\nfor most agencies' },
    ],
  },
  {
    id: 'wrap-vision',
    name: 'WRAP Vision',
    category: 'Technology / Policy',
    tagColor: '#FFB505',
    img: 'assets/product-wrap-vision.png',
    heroImg: 'assets/wrap-vision-hero.avif',
    tagline: 'Accountability. Evidence. Compliance.',
    headline: 'Body-Worn Cameras Integrated with the NLR System.',
    desc: 'WRAP Vision provides body-worn cameras and evidence management supporting accountability and review. Seamlessly integrated into the NLR system to capture evidence compliance in real-time.',
    features: [
      'Integrated body-worn camera system',
      'Evidence management and review platform',
      'Supports accountability and public transparency',
      'Seamlessly integrated with NLR deployment workflows',
      'Capture evidence compliance in real-time',
      'Policy-aligned documentation and reporting',
    ],
    stats: [
      { val: '100%', label: 'Integrated evidence\ncapture' },
    ],
  },
  {
    id: 'dfr-x',
    name: 'C-UAS / DFR-X',
    category: 'R&D',
    tagColor: '#FFB505',
    img: 'assets/product-dfrx.webp',
    heroImg: 'assets/dfr-x-hero.webp',
    tagline: 'Extending NLR Beyond the Officer.',
    headline: 'Transforming Drones into Active Life-Saving Tools.',
    desc: 'The DFR-X extends the reach of the NLR system beyond the officer\'s immediate position. C-UAS R&D transforms drones from passive observers into active life-saving tools — the future of non-lethal response.',
    features: [
      'Transforms drones from passive observers to active tools',
      'Extends NLR system reach beyond officer position',
      'Counter-UAS (C-UAS) research and development',
      'Drone First Responder (DFR) capabilities',
      'Active life-saving intervention from the air',
    ],
    stats: [
      { val: 'R&D', label: 'Active development\nprogram' },
    ],
  },
];

// ─── PRODUCTS LIST ────────────────────────────────────────────────────────────
function ProductsListPage({ navigate }) {
  const [activeFilter, setActiveFilter] = usePState('All');
  const categories = ['All', 'Tool', 'Training', 'Technology', 'Policy', 'R&D'];

  const filterMap = {
    'All':        p => true,
    'Tool':       p => ['bolawrap-150', 'dfr-x'].includes(p.id),
    'Training':   p => ['wrap-reality', 'wrap-tactics'].includes(p.id),
    'Technology': p => ['wrap-vision', 'dfr-x'].includes(p.id),
    'Policy':     p => ['wrap-reality', 'wrap-tactics', 'wrap-vision'].includes(p.id),
    'R&D':        p => p.id === 'dfr-x',
  };

  const filtered = PRODUCTS.filter(filterMap[activeFilter] || (() => true));

  return (
    <main style={{ paddingTop: 72 }}>
      <section style={{ background: 'var(--bg)', padding: '80px 48px 0' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 16 }}>System Only</div>
          <h1 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(56px, 9vw, 112px)', textTransform: 'uppercase', color: 'var(--text)', lineHeight: 0.9, marginBottom: 24 }}>
            Products
          </h1>
          <p style={{ fontSize: 18, color: 'var(--text-sub)', maxWidth: 560, lineHeight: 1.65, paddingBottom: 56, borderBottom: '1px solid var(--border)' }}>
            Tools, training, and technology — exclusively available through WRAP®. Not just another tool. A system designed to help minimize risk.
          </p>
          {/* Filter */}
          <div style={{ display: 'flex', gap: 8, padding: '32px 0' }}>
            {categories.map(cat => (
              <button
                key={cat}
                onClick={() => setActiveFilter(cat)}
                style={{
                  background: activeFilter === cat ? 'var(--accent)' : 'transparent',
                  color: activeFilter === cat ? '#000' : 'var(--text-sub)',
                  border: '1px solid ' + (activeFilter === cat ? 'transparent' : 'var(--border-strong)'),
                  padding: '8px 22px', borderRadius: 20,
                  fontFamily: 'DM Sans', fontWeight: activeFilter === cat ? 700 : 500, fontSize: 13,
                  cursor: 'pointer', transition: 'all 0.2s',
                }}
              >{cat}</button>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--bg)', padding: '20px 48px 120px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {filtered.map(p => <ProductCardFull key={p.id} product={p} navigate={navigate} />)}
          </div>
        </div>
      </section>
      <Footer navigate={navigate} />
    </main>
  );
}

function ProductCardFull({ product, navigate }) {
  const [hover, setHover] = usePState(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: 'all 0.2s',
        transform: hover ? 'translateY(-3px)' : 'none',
      }}
    >
      <div style={{ aspectRatio: '16/9', overflow: 'hidden', 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: '22px 24px 28px' }}>
        <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, background: 'var(--accent-dim)', color: 'var(--accent)', padding: '2px 7px', borderRadius: 2, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{product.tag}</span>}
        </div>
        <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 26, color: 'var(--text)', margin: '0 0 6px', letterSpacing: '0.01em' }}>{product.name}</div>
        <div style={{ fontSize: 14, color: 'var(--text-sub)', marginBottom: 14 }}>{product.tagline}</div>
        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent)' }}>Learn More →</div>
      </div>
    </div>
  );
}

// ─── PRODUCT DETAIL ──────────────────────────────────────────────────────────
function ProductDetailPage({ productId, navigate }) {
  const product = PRODUCTS.find(p => p.id === productId) || PRODUCTS[0];
  const catColor = product.tagColor;

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

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: catColor, textTransform: 'uppercase', marginBottom: 16 }}>{product.category}</div>
              <h1 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(48px, 7vw, 88px)', textTransform: 'uppercase', color: 'var(--text)', lineHeight: 0.92, marginBottom: 18 }}>{product.name}</h1>
              <p style={{ fontFamily: 'Barlow Condensed', fontWeight: 600, fontSize: 22, color: catColor, marginBottom: 24, letterSpacing: '0.02em' }}>{product.tagline}</p>
              <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--text-sub)', marginBottom: 40 }}>{product.desc}</p>
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <button onClick={() => navigate('contact')} style={{
                  background: 'var(--accent)', color: '#000', border: 'none', cursor: 'pointer',
                  padding: '13px 30px', borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 700, fontSize: 14,
                }}>Request Info</button>
              </div>
            </div>
            <div style={{
              aspectRatio: '4/3', borderRadius: 8, overflow: 'hidden',
              border: '1px solid var(--border)', background: 'var(--bg-3)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <img src={product.heroImg || product.img} alt={product.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </section>

      {/* Stats */}
      {product.stats && product.stats.length > 0 && (
        <section style={{ background: 'var(--bg-2)', padding: '0 48px' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', gap: 2 }}>
            {product.stats.map((s, i) => (
              <div key={i} style={{ flex: 1, background: 'var(--card-bg)', padding: '36px 28px', borderTop: '3px solid var(--accent)' }}>
                <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 48, color: 'var(--accent)', lineHeight: 1, marginBottom: 10 }}>{s.val}</div>
                <div style={{ fontSize: 13, color: 'var(--text-sub)', lineHeight: 1.5, whiteSpace: 'pre-line' }}>{s.label}</div>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* Features */}
      <section style={{ background: 'var(--bg)', padding: '100px 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 }}>Capabilities</div>
            <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 52, textTransform: 'uppercase', color: 'var(--text)', lineHeight: 1, marginBottom: 40 }}>What It Does</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              {product.features.map((f, i) => (
                <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', padding: '16px 0', borderBottom: '1px solid var(--border)' }}>
                  <div style={{ width: 20, height: 20, borderRadius: '50%', background: catColor, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                    <svg width="10" height="8" viewBox="0 0 10 8"><path d="M1 4l2.5 2.5 5.5-5.5" stroke="#000" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </div>
                  <span style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text)' }}>{f}</span>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 20 }}>Visual Overview</div>
            {product.extraImg ? (
              <div style={{ borderRadius: 8, overflow: 'hidden', border: '1px solid var(--border)', background: 'var(--bg-3)' }}>
                <img src={product.extraImg} alt={product.name + ' screenshot'} style={{ width: '100%', display: 'block', objectFit: 'cover' }} />
              </div>
            ) : (
              <div style={{ aspectRatio: '3/4', borderRadius: 8, overflow: 'hidden', border: '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>
        </div>
      </section>

      {/* How It Works (BolaWrap specific) */}
      {product.howItWorks && (
        <section style={{ background: 'var(--bg-2)', padding: '100px 48px' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto' }}>
            <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 16 }}>Deployment Sequence</div>
            <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 56, textTransform: 'uppercase', color: 'var(--text)', lineHeight: 1, marginBottom: 56 }}>How It Works</h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 }}>
              {product.howItWorks.map((step, i) => (
                <div key={i} style={{
                  background: 'var(--card-bg)', padding: '32px 28px',
                  borderTop: `2px solid ${i === 0 ? catColor : 'var(--border)'}`,
                }}>
                  <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 64, color: 'rgba(255,255,255,0.05)', lineHeight: 1, marginBottom: 16 }}>0{step.step}</div>
                  <div style={{ fontFamily: 'DM Sans', fontWeight: 600, fontSize: 16, color: 'var(--text)', marginBottom: 10 }}>{step.title}</div>
                  <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-sub)' }}>{step.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

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

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

// ─── ROUTER ───────────────────────────────────────────────────────────────────
function ProductsPage({ navigate, productId }) {
  if (productId) return <ProductDetailPage productId={productId} navigate={navigate} />;
  return <ProductsListPage navigate={navigate} />;
}

Object.assign(window, { ProductsPage, PRODUCTS });