
const { useState: useUCState, useEffect: useUCEffect, useRef: useUCRef } = React;

function useUCReveal() {
  const ref = useUCRef(null);
  useUCEffect(() => {
    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;
}

// All icons use var(--accent) for uniformity
const Icons = {
  badge: (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
      <circle cx="22" cy="22" r="20" stroke="var(--accent)" strokeWidth="1.5"/>
      <path d="M22 11l2.8 7.8H33l-6.7 4.9 2.8 7.8L22 26.6l-7.1 4.9 2.8-7.8L11 18.8h8.2L22 11z" fill="var(--accent)" opacity="0.85"/>
    </svg>
  ),
  cell: (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
      <rect x="8" y="8" width="28" height="28" rx="2" stroke="var(--accent)" strokeWidth="1.5"/>
      <line x1="16" y1="8" x2="16" y2="36" stroke="var(--accent)" strokeWidth="1.5" opacity="0.5"/>
      <line x1="28" y1="8" x2="28" y2="36" stroke="var(--accent)" strokeWidth="1.5" opacity="0.5"/>
      <line x1="8" y1="22" x2="36" y2="22" stroke="var(--accent)" strokeWidth="1.5"/>
      <circle cx="22" cy="22" r="4" fill="var(--accent)" opacity="0.8"/>
    </svg>
  ),
  shield: (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
      <path d="M22 6L9 11v11c0 8 5.8 15.5 13 17.4C29.2 37.5 35 30 35 22V11L22 6z" stroke="var(--accent)" strokeWidth="1.5" fill="none"/>
      <path d="M16 22l4 4 8-8" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  heart: (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
      <path d="M22 34S9 26 9 17a7 7 0 0113-3.5A7 7 0 0135 17c0 9-13 17-13 17z" stroke="var(--accent)" strokeWidth="1.5" fill="none"/>
      <path d="M22 20v-5M19.5 17.5h5" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  globe: (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
      <circle cx="22" cy="22" r="14" stroke="var(--accent)" strokeWidth="1.5"/>
      <ellipse cx="22" cy="22" rx="6" ry="14" stroke="var(--accent)" strokeWidth="1.5"/>
      <line x1="8" y1="22" x2="36" y2="22" stroke="var(--accent)" strokeWidth="1.5"/>
      <line x1="11" y1="15" x2="33" y2="15" stroke="var(--accent)" strokeWidth="1" opacity="0.5"/>
      <line x1="11" y1="29" x2="33" y2="29" stroke="var(--accent)" strokeWidth="1" opacity="0.5"/>
    </svg>
  ),
  campus: (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
      <rect x="10" y="20" width="24" height="16" rx="1" stroke="var(--accent)" strokeWidth="1.5"/>
      <path d="M7 22L22 11l15 11" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round"/>
      <rect x="18" y="28" width="8" height="8" rx="1" stroke="var(--accent)" strokeWidth="1.5"/>
      <line x1="22" y1="8" x2="22" y2="11" stroke="var(--accent)" strokeWidth="1.5"/>
    </svg>
  ),
};

const USE_CASES = [
  {
    id: 'law-enforcement',
    title: 'Law Enforcement',
    subtitle: 'Municipal & State Police',
    icon: Icons.badge,
    headline: 'A Defensible Path Forward for Every Patrol Officer.',
    desc: 'Law enforcement officers face an increasingly complex landscape — changing policies, heightened public scrutiny, and encounters that can escalate without warning. The WRAP® NLR System gives patrol officers a lawful, pain-free tool to act decisively before force escalates, with a track record of zero reported fatalities.',
    challenges: [
      'De-escalation failures with non-compliant subjects',
      'Behavioral health and mental health crisis calls',
      'Policy scrutiny before, during, and after force use',
      'Officer and subject injury during physical confrontations',
      'Post-incident legal exposure and litigation',
    ],
    solutions: [
      { name: 'BolaWrap 150®', desc: 'Remote restraint with zero reported fatalities — belt-carried and always available.' },
      { name: 'WRAP Reality', desc: 'VR scenario training for lawful decision-making under stress.' },
      { name: 'WRAP Tactics', desc: 'Digital policy-aligned certification that keeps skills sharp.' },
      { name: 'WRAP Vision', desc: 'Body-worn cameras and evidence management for accountability.' },
    ],
    quote: 'NLR gives officers a defensible path forward — a safe, lawful, and effective way to control encounters without unnecessary escalation.',
  },
  {
    id: 'corrections',
    title: 'Corrections',
    subtitle: 'Jails, Prisons & Detention Facilities',
    icon: Icons.cell,
    headline: 'Control Without Contact. Safety Without Escalation.',
    desc: 'Corrections officers operate in high-stakes, enclosed environments where de-escalation options are limited and physical confrontations carry serious consequences. The WRAP® NLR System provides a low-risk option to gain control of non-compliant inmates without strikes, pain compliance, or the liability of traditional tools.',
    challenges: [
      'Limited space and escape routes during confrontations',
      'High rates of officer and inmate injuries during cell extractions',
      'Behavioral health population requiring non-violent intervention',
      'Documentation requirements for use-of-force incidents',
      'Staff retention impact from on-the-job injuries',
    ],
    solutions: [
      { name: 'BolaWrap 150®', desc: 'Remotely restrain and distract subjects in enclosed environments.' },
      { name: 'WRAP Tactics', desc: 'Certify staff quickly with digital burst training — no scheduling burden.' },
      { name: 'WRAP Reality', desc: 'Scenario-based VR training for correctional facility encounters.' },
      { name: 'WRAP Vision', desc: 'Evidence capture for compliance and post-incident review.' },
    ],
    quote: 'In corrections, every option matters. NLR creates a moment of control — the pause between a situation and a use of force.',
  },
  {
    id: 'defense-military',
    title: 'Defense / Military',
    subtitle: 'Military Police & Force Protection',
    icon: Icons.shield,
    headline: 'Non-Lethal Response for the World\'s Most Demanding Environments.',
    desc: 'Military and defense personnel operate in environments where the rules of engagement demand precision, restraint, and accountability. The WRAP® NLR System and C-UAS / DFR-X extend non-lethal response capabilities beyond traditional deployments — including drone-first-responder integration for active force protection missions.',
    challenges: [
      'Rules of engagement requiring non-lethal options before escalation',
      'Crowd and perimeter control in high-risk environments',
      'Detainee handling and compliance during operations',
      'Counter-UAS threats in contested airspace',
      'Force protection at forward operating bases and embassies',
    ],
    solutions: [
      { name: 'BolaWrap 150®', desc: 'Non-lethal subject restraint aligned with restrictive rules of engagement.' },
      { name: 'C-UAS / DFR-X', desc: 'Active drone-first-responder extending NLR beyond the operator\'s position.' },
      { name: 'WRAP Reality', desc: 'Immersive scenario training for high-stress operational environments.' },
      { name: 'WRAP Tactics', desc: 'Policy-aligned certification that travels with the mission.' },
    ],
    quote: 'From base security to active operations, WRAP extends the reach of non-lethal response — on the ground and in the air.',
  },
  {
    id: 'crisis-response',
    title: 'Mental Health & Crisis Response',
    subtitle: 'Behavioral Health & CIT Teams',
    icon: Icons.heart,
    headline: 'A Better Response for the Most Vulnerable Encounters.',
    desc: 'Mental health and behavioral health crises represent a growing share of law enforcement calls — and some of the highest-risk encounters for both officers and individuals. The WRAP® NLR System was purpose-built to preserve decision space, avoid pain compliance, and create a safer path to resolution.',
    challenges: [
      'Altered psychological states that don\'t respond to verbal commands',
      'Escalating agitation that can turn physical without warning',
      'Traditional tools like OC spray and tasers can worsen mental health crises',
      'Community and family scrutiny of outcomes in mental health calls',
      'Officer hesitation due to fear of disproportionate response',
    ],
    solutions: [
      { name: 'BolaWrap 150®', desc: 'Sensory disruption that works even in altered psychological states — no pain, no injury.' },
      { name: 'WRAP Reality', desc: 'VR training specifically for behavioral health crisis scenarios.' },
      { name: 'WRAP Tactics', desc: 'Policy frameworks designed for lawful, defensible mental health response.' },
      { name: 'WRAP Vision', desc: 'Document every encounter for review, accountability, and community transparency.' },
    ],
    quote: 'For the most complex calls, NLR creates time and space — the difference between a safe resolution and an avoidable tragedy.',
  },
  {
    id: 'border-federal',
    title: 'Border & Federal Agencies',
    subtitle: 'CBP, DHS & Federal Law Enforcement',
    icon: Icons.globe,
    headline: 'Scalable Non-Lethal Response for Federal Operations.',
    desc: 'Federal law enforcement and border security agencies face unique challenges — high encounter volumes, diverse threat profiles, and intense congressional and public scrutiny. The WRAP® NLR System delivers a scalable, policy-compliant solution that can be deployed across large agencies with full certification and training infrastructure.',
    challenges: [
      'High-volume encounters across large geographic areas',
      'Diverse subject profiles requiring adaptable response options',
      'Federal policy requirements and oversight standards',
      'Training consistency across distributed personnel',
      'Accountability and documentation for federal reporting requirements',
    ],
    solutions: [
      { name: 'BolaWrap 150®', desc: 'Standardized non-lethal tool deployable across all field personnel.' },
      { name: 'WRAP Tactics', desc: 'Digital recertification at scale — no scheduling burden across large agencies.' },
      { name: 'WRAP Vision', desc: 'Federal-grade evidence management and compliance documentation.' },
      { name: 'C-UAS / DFR-X', desc: 'Extended NLR capabilities for border surveillance and response.' },
    ],
    quote: 'WRAP\'s 36-month implementation model gets large agencies up and running fast — with full policy, training, and technology support.',
  },
  {
    id: 'campus-safety',
    title: 'Campus & University Safety',
    subtitle: 'Campus Police & Public Safety',
    icon: Icons.campus,
    headline: 'Protecting Students, Faculty, and Officers on Campus.',
    desc: 'Campus public safety officers operate in a uniquely visible, community-sensitive environment where every use-of-force decision is subject to intense scrutiny. The WRAP® NLR System gives campus officers a defensible, pain-free tool that reduces injury risk for all parties — and demonstrates a commitment to community safety.',
    challenges: [
      'High visibility incidents with immediate social media and media exposure',
      'Mental health calls representing a large share of campus incidents',
      'Community and administration sensitivity to use-of-force outcomes',
      'Limited training budgets and scheduling flexibility',
      'Officers often responding alone without backup',
    ],
    solutions: [
      { name: 'BolaWrap 150®', desc: 'A pain-free early intervention tool for solo officers in visible environments.' },
      { name: 'WRAP Tactics', desc: 'Flexible digital training that fits campus schedules and limited budgets.' },
      { name: 'WRAP Reality', desc: 'Campus-relevant scenario training for mental health and behavioral incidents.' },
      { name: 'WRAP Vision', desc: 'Body-worn cameras that support transparency and community trust.' },
    ],
    quote: 'On campus, trust is everything. NLR gives officers the tools to act decisively — and the record to defend every decision.',
  },
];

// ─── USE CASE CARD ────────────────────────────────────────────────────────────
function UCCard({ uc, onClick }) {
  const [hover, setHover] = useUCState(false);
  return (
    <div
      onClick={() => onClick(uc.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.4)' : 'var(--border)'}`,
        cursor: 'pointer', transition: 'all 0.22s ease',
        transform: hover ? 'translateY(-3px)' : 'none',
        display: 'flex', flexDirection: 'column',
        boxShadow: hover ? '0 16px 48px rgba(0,0,0,0.3)' : 'none',
      }}
    >
      <div style={{ height: 3, background: hover ? 'var(--accent)' : 'var(--border)', transition: 'background 0.2s' }} />
      <div style={{ padding: '32px 28px 36px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ marginBottom: 20 }}>{uc.icon}</div>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 10 }}>{uc.subtitle}</div>
        <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 800, fontSize: 28, color: 'var(--text)', lineHeight: 1, marginBottom: 14, textTransform: 'uppercase' }}>{uc.title}</div>
        <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--text-sub)', flex: 1, marginBottom: 24 }}>{uc.desc.substring(0, 150)}...</p>
        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent)' }}>Learn More →</div>
      </div>
    </div>
  );
}

// ─── USE CASE DETAIL ─────────────────────────────────────────────────────────
function UCDetail({ ucId, navigate }) {
  const uc = USE_CASES.find(u => u.id === ucId) || USE_CASES[0];

  return (
    <main style={{ paddingTop: 72 }}>
      {/* Hero */}
      <section style={{ background: 'var(--bg)', padding: '80px 48px', borderBottom: '1px solid var(--border)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'linear-gradient(to right, var(--accent), transparent)' }} />
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <button onClick={() => navigate('use-cases')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', fontSize: 13, fontFamily: 'DM Sans', padding: 0, marginBottom: 36 }}>← All Use Cases</button>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
            <div>
              <div style={{ marginBottom: 20 }}>{uc.icon}</div>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 12 }}>{uc.subtitle}</div>
              <h1 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(48px, 7vw, 88px)', textTransform: 'uppercase', color: 'var(--text)', lineHeight: 0.9, marginBottom: 24 }}>{uc.title}</h1>
              <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--text-sub)', marginBottom: 36 }}>{uc.desc}</p>
              <div style={{ display: 'flex', gap: 12 }}>
                <button onClick={() => navigate('contact')} style={{ background: 'var(--accent)', color: '#000', border: 'none', cursor: 'pointer', padding: '13px 28px', borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 700, fontSize: 14 }}>Contact Sales</button>
                <button onClick={() => navigate('products')} style={{ background: 'transparent', color: 'var(--text)', border: '1px solid var(--border-strong)', cursor: 'pointer', padding: '13px 28px', borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 500, fontSize: 14 }}>View Products</button>
              </div>
            </div>
            <div style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 8, padding: '40px' }}>
              <div style={{ fontStyle: 'italic', fontSize: 17, lineHeight: 1.75, color: 'var(--text-sub)', borderLeft: '3px solid var(--accent)', paddingLeft: 20, marginBottom: 32 }}>"{uc.quote}"</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                {[
                  { icon: '🛡', label: 'Zero reported fatalities' },
                  { icon: '⚡', label: 'Pain-free intervention' },
                  { icon: '📋', label: 'Legally defensible' },
                  { icon: '🎯', label: 'Early de-escalation' },
                ].map((b, i) => (
                  <div key={i} style={{ background: 'var(--bg-2)', borderRadius: 6, padding: '14px 16px', border: '1px solid var(--border)' }}>
                    <div style={{ fontSize: 20, marginBottom: 6 }}>{b.icon}</div>
                    <div style={{ fontSize: 12, color: 'var(--text-sub)', lineHeight: 1.4 }}>{b.label}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Challenges + Solutions */}
      <section style={{ background: 'var(--bg-2)', padding: '80px 48px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>The Challenge</div>
            <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 48, textTransform: 'uppercase', color: 'var(--text)', lineHeight: 1, marginBottom: 32 }}>What Officers Face</h2>
            {uc.challenges.map((c, i) => (
              <div key={i} style={{ display: 'flex', gap: 16, padding: '16px 0', borderBottom: '1px solid var(--border)' }}>
                <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--accent-dim)', border: '1px solid rgba(255,181,5,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--accent)' }}>{i + 1}</span>
                </div>
                <span style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-sub)' }}>{c}</span>
              </div>
            ))}
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>The Solution</div>
            <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 48, textTransform: 'uppercase', color: 'var(--text)', lineHeight: 1, marginBottom: 32 }}>WRAP® NLR System</h2>
            {uc.solutions.map((s, i) => (
              <div key={i} style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderLeft: '3px solid var(--accent)', borderRadius: '0 6px 6px 0', padding: '18px 22px', marginBottom: 12 }}>
                <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 18, color: 'var(--text)', marginBottom: 6 }}>{s.name}</div>
                <div style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-sub)' }}>{s.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Other use cases */}
      <section style={{ background: 'var(--bg)', padding: '80px 48px', borderTop: '1px solid var(--border)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 36 }}>
            <h3 style={{ fontFamily: 'Barlow Condensed', fontWeight: 800, fontSize: 36, textTransform: 'uppercase', color: 'var(--text)' }}>Other Use Cases</h3>
            <button onClick={() => navigate('use-cases')} 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(3, 1fr)', gap: 16 }}>
            {USE_CASES.filter(u => u.id !== ucId).slice(0, 3).map(u => (
              <div key={u.id} onClick={() => navigate('use-case', u.id)}
                style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 6, padding: '22px 22px 26px', cursor: 'pointer', transition: 'border-color 0.2s' }}
                onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(255,181,5,0.4)'}
                onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}
              >
                <div style={{ marginBottom: 12 }}>{u.icon}</div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8 }}>{u.subtitle}</div>
                <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 22, color: 'var(--text)', textTransform: 'uppercase', marginBottom: 8 }}>{u.title}</div>
                <div style={{ fontSize: 13, color: 'var(--text-sub)', lineHeight: 1.5 }}>{u.headline}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

// ─── USE CASES LIST PAGE ──────────────────────────────────────────────────────
function UseCasesPage({ navigate, ucId }) {
  if (ucId) return <UCDetail ucId={ucId} navigate={navigate} />;

  return (
    <main style={{ paddingTop: 72 }}>
      <section style={{ background: 'var(--bg)', padding: '80px 48px 60px', borderBottom: '1px solid var(--border)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 16, fontFamily: 'DM Sans' }}>Who We Serve</div>
          <h1 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(56px, 9vw, 112px)', textTransform: 'uppercase', color: 'var(--text)', lineHeight: 0.9, marginBottom: 24 }}>Use Cases</h1>
          <p style={{ fontSize: 18, color: 'var(--text-sub)', maxWidth: 560, lineHeight: 1.65, fontFamily: 'DM Sans' }}>
            The WRAP® Non-Lethal Response™ System is deployed across a wide range of agencies and environments — wherever officers need a safe, lawful, and effective way to control encounters.
          </p>
        </div>
      </section>

      <section style={{ background: 'var(--bg)', padding: '60px 48px 120px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {USE_CASES.map(uc => <UCCard key={uc.id} uc={uc} onClick={id => navigate('use-case', id)} />)}
        </div>
      </section>

      <section style={{ background: 'var(--accent)', padding: '80px 48px', textAlign: 'center' }}>
        <div style={{ maxWidth: 640, margin: '0 auto' }}>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(40px, 6vw, 72px)', textTransform: 'uppercase', color: '#060c1c', lineHeight: 0.92, marginBottom: 20 }}>
            Ready to Bring NLR to Your Agency?
          </h2>
          <p style={{ fontSize: 17, color: 'rgba(6,12,28,0.65)', marginBottom: 36, lineHeight: 1.6, fontFamily: 'DM Sans' }}>Most agencies are up and running within 30 days.</p>
          <button onClick={() => navigate('contact')} style={{ background: '#060c1c', color: '#fff', border: 'none', cursor: 'pointer', padding: '15px 40px', borderRadius: 4, fontFamily: 'DM Sans', fontWeight: 700, fontSize: 16 }}>Contact Sales</button>
        </div>
      </section>

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

Object.assign(window, { UseCasesPage });
