// EaglEye Product Page v5 — Mobile layout
// Reflowed from v5-part1 + v5-part2 for 390px screens

// ═══════════════════════════════════════════════════════════
// MOBILE HERO
// ═══════════════════════════════════════════════════════════
const M5Hero = () => (
  <section id="top" style={{
    position: 'relative', padding: '40px 20px 56px', overflow: 'hidden',
    background: 'radial-gradient(ellipse 100% 70% at 50% 30%, rgba(200,168,78,0.12), transparent 60%), linear-gradient(180deg, #0a0a08 0%, #14180e 50%, #1a2017 100%)',
  }}>
    <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 24 }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', border: '1px solid var(--gold)', background: 'rgba(200,168,78,0.08)', borderRadius: 999 }}>
        <svg width="16" height="10" viewBox="0 0 22 14" style={{ display: 'block', border: '1px solid rgba(255,255,255,0.18)' }}>
          <rect width="22" height="14" fill="#b22234"/><rect y="1.08" width="22" height="1.08" fill="#fff"/><rect y="3.23" width="22" height="1.08" fill="#fff"/><rect y="5.38" width="22" height="1.08" fill="#fff"/><rect y="7.54" width="22" height="1.08" fill="#fff"/><rect y="9.69" width="22" height="1.08" fill="#fff"/><rect y="11.85" width="22" height="1.08" fill="#fff"/><rect width="9" height="7.54" fill="#3c3b6e"/>
        </svg>
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--gold)', fontWeight: 600 }}>MADE IN USA</span>
      </div>
    </div>

    <h1 style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 0.95, marginBottom: 20 }}>
      <span style={{ color: 'var(--gold)' }}>98,329</span> Verified Trajectories. <span style={{ color: 'var(--gold)' }}>Zero</span> Data Collected.
    </h1>
    <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--bone-2)', marginBottom: 28 }}>
      Verified against JBM Ballistics. <span style={{ color: 'var(--gold)' }}>{'< 0.02%'} mean error. 100% pass rate.</span> No analytics, no tracking, no accounts.
    </p>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 32 }}>
      <AppStoreBadge comingSoon compact />
      <GooglePlayBadge comingSoon compact />
    </div>
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <PhoneShot src="/assets/screens/rangecard-dark-hero.png" width={220} />
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// MOBILE ACCURACY
// ═══════════════════════════════════════════════════════════
const M5Accuracy = () => (
  <section id="precision" style={{
    padding: '56px 20px',
    background: 'linear-gradient(180deg, #0a0a08 0%, #0e120c 50%, #0a0a08 100%)',
    borderTop: '1px solid var(--hair)',
  }}>
    <div className="mono" style={{ fontSize: 12, letterSpacing: '0.2em', color: 'var(--gold)', marginBottom: 16 }}>◉ ACCURACY & SOLVER</div>
    <h2 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 24 }}>
      The proof.<br/><span style={{ color: 'var(--gold)' }}>And the physics.</span>
    </h2>

    {/* Stats 3x2 */}
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--hair-2)', background: 'var(--ink-0)', marginBottom: 24 }}>
      {[
        ['98,329', 'TRAJECTORIES'], ['210', 'CONDITIONS'], ['137', 'LOCATIONS'],
        ['< 0.02%', 'MEAN ERROR'], ['100%', 'PASS RATE'], ['1.4M+', 'DATA POINTS'],
      ].map(([v, k], i) => (
        <div key={k} style={{ padding: '14px 8px', borderRight: i % 3 < 2 ? '1px solid var(--hair-2)' : 'none', borderBottom: i < 3 ? '1px solid var(--hair-2)' : 'none', textAlign: 'center' }}>
          <div style={{ fontFamily: 'var(--f-display)', fontSize: 22, fontWeight: 800, color: i === 3 || i === 4 ? 'var(--gold)' : 'var(--bone)', lineHeight: 1, marginBottom: 4 }}>{v}</div>
          <div className="mono" style={{ fontSize: 8, letterSpacing: '0.12em', color: 'var(--bone-2)' }}>{k}</div>
        </div>
      ))}
    </div>

    {/* Practical example */}
    <div style={{ border: '1px solid var(--hair-2)', background: 'var(--ink-0)', padding: '16px', marginBottom: 24 }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--gold)', marginBottom: 12 }}>◉ 6.5 CREEDMOOR · 1,000 YD</div>
      {[
        { m: 'VELOCITY', jbm: '1,448.62', ee: '1,448.58', d: '0.04 fps' },
        { m: 'DROP', jbm: '-325.58"', ee: '-325.63"', d: '0.05"' },
        { m: 'TOF', jbm: '1.5148s', ee: '1.5150s', d: '0.2 ms' },
      ].map(r => (
        <div key={r.m} style={{ display: 'grid', gridTemplateColumns: '0.8fr 0.7fr 0.7fr 0.7fr', padding: '8px 0', borderBottom: '1px solid var(--hair)', fontSize: 12, fontFamily: 'var(--f-mono)' }}>
          <span style={{ color: 'var(--bone-2)' }}>{r.m}</span>
          <span style={{ color: 'var(--bone-2)' }}>{r.jbm}</span>
          <span style={{ color: 'var(--gold)', fontWeight: 600 }}>{r.ee}</span>
          <span style={{ color: 'var(--bone)' }}>{r.d}</span>
        </div>
      ))}
    </div>

    {/* Physics cards — single column */}
    <div id="features" className="mono" style={{ fontSize: 12, letterSpacing: '0.18em', color: 'var(--gold)', marginBottom: 12 }}>◉ THE PHYSICS</div>
    <div style={{ display: 'grid', gap: 1, background: 'rgba(200,168,78,0.2)', marginBottom: 24 }}>
      {[
        ['3-DOF Point-Mass Solver', 'Sub-millisecond precision. Professional-grade trajectory engine.'],
        ['G1 & G7 Drag', 'Smooth, artifact-free drag through the transonic region.'],
        ['Coriolis & Spin Drift', 'Horizontal and vertical deflection from GPS latitude. Left and right twist.'],
        ['Barrel MV Correction', '113 calibers with SAAMI reference barrel lengths.'],
        ['Suppressor Modeling', '49 calibers (baffled and flow-through). MV offset + automatic POI shift.'],
        ['MV & BC Truing', 'Match to real-world impacts at known range. Persists on the load.'],
        ['Angle Compensation', "Rifleman's rule with corrected range and gravity."],
        ['Real-Time Weather', 'Phone barometer + GPS altitude. Live weather pulled automatically.'],
        ['12-Position Wind Clock', 'Compass-relative when heading is captured.'],
      ].map(([t, d]) => (
        <div key={t} style={{ padding: '16px 14px', background: '#2B3320' }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--gold)', marginBottom: 4 }}>{t}</div>
          <div style={{ fontSize: 13, color: 'var(--bone-2)', lineHeight: 1.5 }}>{d}</div>
        </div>
      ))}
    </div>

    {/* Category table */}
    <div className="mono" style={{ fontSize: 12, letterSpacing: '0.18em', color: 'var(--gold)', marginBottom: 12 }}>◉ BY CATEGORY</div>
    <div style={{ border: '1px solid var(--hair-2)', background: 'var(--ink-0)', marginBottom: 24 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 0.5fr 0.6fr', padding: '10px 14px', borderBottom: '1px solid var(--hair)', background: 'var(--ink-2)' }}>
        {['CATEGORY', 'LOADS', 'MEAN ERR'].map(h => (
          <div key={h} className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--bone-2)' }}>{h}</div>
        ))}
      </div>
      {[
        { c: 'All loads', l: 466, m: '< 0.02%', hl: false },
        { c: 'Rifle', l: 384, m: '< 0.01%', hl: false },
        { c: 'G7 model', l: 211, m: '< 0.01%', hl: true },
        { c: 'G1 model', l: 258, m: '< 0.03%', hl: false },
        { c: 'Handgun', l: 43, m: '< 0.06%', hl: false },
        { c: 'Rimfire', l: 30, m: '< 0.09%', hl: false },
      ].map((r, i, a) => (
        <div key={r.c} style={{ display: 'grid', gridTemplateColumns: '1fr 0.5fr 0.6fr', padding: '10px 14px', borderBottom: i === a.length - 1 ? 'none' : '1px solid var(--hair)', background: r.hl ? 'rgba(200,168,78,0.06)' : 'transparent', fontFamily: 'var(--f-mono)', fontSize: 13 }}>
          <span style={{ color: 'var(--bone)' }}>{r.c}</span>
          <span style={{ color: 'var(--bone-2)' }}>{r.l}</span>
          <span style={{ color: 'var(--gold)', fontWeight: 600 }}>{r.m}</span>
        </div>
      ))}
    </div>

    {/* Methodology */}
    <div style={{ padding: '14px', background: 'var(--ink-2)', border: '1px solid var(--hair)', fontSize: 13, lineHeight: 1.6, color: 'var(--bone-2)' }}>
      <span className="mono" style={{ color: 'var(--gold)', fontSize: 11, letterSpacing: '0.16em' }}>◉ METHODOLOGY — </span>
      Every factory load tested under 210 environmental configs. Pass criteria: avg velocity error below 0.5%, max below 1.0%. Worst category average: below 0.09%. Every solver change is verified against the full test suite before release.
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// MOBILE PRIVACY
// ═══════════════════════════════════════════════════════════
const M5Privacy = () => (
  <section id="privacy" style={{ padding: '56px 20px', background: '#2B3320', borderTop: '1px solid var(--hair)' }}>
    <div className="mono" style={{ fontSize: 12, letterSpacing: '0.2em', color: 'var(--gold)', marginBottom: 16 }}>◉ PRIVACY</div>
    <h2 style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 24 }}>
      Your Data Stays on Your Device. <span style={{ color: 'var(--gold)' }}>Period.</span>
    </h2>

    <div style={{ padding: '20px 16px', background: 'var(--ink-0)', border: '1px solid var(--hair-2)', marginBottom: 16 }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--gold)', marginBottom: 14 }}>WHAT WE DON'T DO</div>
      {['No analytics', 'No crash reporting', 'No ad identifiers', 'No user accounts', 'No cloud sync', 'No background location', 'No camera/mic/contacts', 'No cookies', 'No push notifications'].map(item => (
        <div key={item} style={{ display: 'flex', gap: 8, marginBottom: 8, fontSize: 14, color: 'var(--bone)' }}>
          <span style={{ color: 'var(--gold)', flexShrink: 0 }}>✕</span> {item}
        </div>
      ))}
    </div>

    <div style={{ padding: '20px 16px', background: 'var(--ink-2)', border: '1px solid var(--hair)', marginBottom: 16 }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--bone-2)', marginBottom: 14 }}>WHAT WE DO</div>
      {[
        ['GPS location', 'Only on "Fetch Weather" — ephemeral, never stored'],
        ['Feedback form', 'Optional — sends message + device info'],
        ['Local storage', 'Everything stays in your app sandbox'],
      ].map(([t, d]) => (
        <div key={t} style={{ marginBottom: 12, paddingBottom: 10, borderBottom: '1px solid var(--hair)' }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--bone)' }}>{t}</div>
          <div style={{ fontSize: 13, color: 'var(--bone-2)', marginTop: 2 }}>{d}</div>
        </div>
      ))}
    </div>

    <div style={{ padding: '16px', background: 'var(--ink-0)', border: '1px solid var(--gold)', textAlign: 'center' }}>
      <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--gold)', marginBottom: 6 }}>Two network endpoints.</div>
      <div style={{ fontSize: 14, color: 'var(--bone-2)' }}>Weather + optional feedback. Nothing else leaves your phone.</div>
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// MOBILE CATALOGS
// ═══════════════════════════════════════════════════════════
const M5Catalogs = () => (
  <section id="catalog" style={{ padding: '56px 20px', background: 'linear-gradient(180deg, #14180e 0%, #0a0a08 50%, #14180e 100%)', borderTop: '1px solid var(--hair)' }}>
    <div className="mono" style={{ fontSize: 12, letterSpacing: '0.2em', color: 'var(--gold)', marginBottom: 16 }}>◉ CATALOGS</div>
    <h2 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 24 }}>
      <span style={{ color: 'var(--gold)' }}>482</span> Factory Loads. Ready to Shoot.
    </h2>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--hair-2)', marginBottom: 24 }}>
      {[['482', 'Ammo Loads'], ['253', 'Calibers'], ['236', 'Scopes'], ['229', 'Mounts']].map(([n, t], i) => (
        <div key={t} style={{ padding: '18px 14px', borderRight: i % 2 === 0 ? '1px solid var(--hair-2)' : 'none', borderBottom: i < 2 ? '1px solid var(--hair-2)' : 'none', background: 'var(--ink-0)' }}>
          <div style={{ fontSize: 32, fontFamily: 'var(--f-display)', fontWeight: 800, color: 'var(--gold)', lineHeight: 1 }}>{n}</div>
          <div style={{ fontSize: 13, color: 'var(--bone-2)', marginTop: 6 }}>{t}</div>
        </div>
      ))}
    </div>
    <div style={{ fontSize: 15, color: 'var(--bone-2)', lineHeight: 1.55, marginBottom: 24 }}>
      Pull a factory load, select your scope and mount — build a complete profile in under a minute.
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// MOBILE SCREENSHOTS
// ═══════════════════════════════════════════════════════════
const M5Screenshots = () => {
  const shots = [
    { src: 'assets/screens/solver-weather.png', t: 'Solver' },
    { src: 'assets/screens/rifle-edit.png', t: 'Armory' },
    { src: 'assets/screens/dopecard-dark.png', t: 'Dope Card' },
    { src: 'assets/screens/catalog-browse.png', t: 'Catalog' },
    { src: 'assets/screens/export-dopecard.png', t: 'PDF Export' },
    { src: 'assets/screens/settings.png', t: 'Themes' },
  ];
  return (
    <section id="themes" style={{ padding: '56px 20px', background: '#2B3320', borderTop: '1px solid var(--hair)' }}>
      <div className="mono" style={{ fontSize: 12, letterSpacing: '0.2em', color: 'var(--gold)', marginBottom: 16 }}>◉ SEE IT IN ACTION</div>
      <h2 style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 32, color: 'var(--gold)' }}>Every screen earns its place.</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 32, alignItems: 'center' }}>
        {shots.map(s => (
          <div key={s.t} style={{ textAlign: 'center' }}>
            <PhoneShot src={s.src} width={220} />
            <div style={{ fontSize: 17, fontFamily: 'var(--f-display)', fontWeight: 600, marginTop: 16, color: 'var(--gold)' }}>{s.t}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════
// MOBILE COMPETITION
// ═══════════════════════════════════════════════════════════
const M5Competition = () => (
  <section id="compare" style={{ padding: '56px 20px', background: 'linear-gradient(180deg, #0a0a08 0%, #0e120c 50%, #0a0a08 100%)', borderTop: '1px solid var(--hair)' }}>
    <div className="mono" style={{ fontSize: 12, letterSpacing: '0.2em', color: 'var(--gold)', marginBottom: 16 }}>◉ VERIFICATION TRANSPARENCY</div>
    <h2 style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 24 }}>
      No other app <span style={{ color: 'var(--gold)' }}>publishes this data.</span>
    </h2>
    <div style={{ border: '1px solid var(--hair-2)', background: 'var(--ink-0)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', padding: '12px 14px', borderBottom: '1px solid var(--hair)', background: 'var(--ink-2)' }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--bone-2)' }}>METRIC</div>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--gold)' }}>EAGLEYE</div>
      </div>
      {[
        ['Verified scenarios', '98,329'],
        ['Conditions tested', '210'],
        ['Simulated locations', '137'],
        ['Mean error', '< 0.02%'],
        ['Pass rate', '100%'],
        ['Methodology', 'Published'],
        ['Analytics', 'None'],
        ['Accounts required', 'No'],
      ].map(([m, v], i, arr) => (
        <div key={m} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', padding: '12px 14px', borderBottom: i === arr.length - 1 ? 'none' : '1px solid var(--hair)', fontSize: 14, fontFamily: 'var(--f-mono)' }}>
          <span style={{ color: 'var(--bone)' }}>{m}</span>
          <span style={{ color: 'var(--gold)', fontWeight: 600 }}>{v}</span>
        </div>
      ))}
    </div>
    <div style={{ marginTop: 16, fontSize: 15, fontWeight: 700, color: 'var(--gold)', textAlign: 'center' }}>
      Accurate. Private. Published.
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// MOBILE PRICING
// ═══════════════════════════════════════════════════════════
const M5Pricing = () => (
  <section id="pricing" style={{ padding: '56px 20px', background: '#2B3320', borderTop: '1px solid var(--hair)', scrollMarginTop: 60 }}>
    <div style={{ textAlign: 'center', marginBottom: 28 }}>
      <div className="mono" style={{ fontSize: 12, letterSpacing: '0.2em', color: 'var(--gold)', marginBottom: 12 }}>◉ PRICING</div>
      <h2 style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--gold)' }}>One Price. Forever.</h2>
    </div>
    <div style={{ border: '1px solid var(--hair-2)' }}>
      <div style={{ padding: '24px 16px', background: 'var(--ink-0)' }}>
        <div className="mono" style={{ fontSize: 12, letterSpacing: '0.16em', color: 'var(--bone-2)', marginBottom: 6 }}>FREE</div>
        <div style={{ fontSize: 28, fontFamily: 'var(--f-display)', fontWeight: 800, color: 'var(--bone)', marginBottom: 14 }}>$0</div>
        {['2 profiles', '800 yd max', 'G1 only', '3 & 9 wind', '2 themes'].map(i => (
          <div key={i} style={{ fontSize: 13, color: 'var(--bone-2)', marginBottom: 6 }}>— {i}</div>
        ))}
      </div>
      <div style={{ padding: '24px 16px', background: 'var(--ink-0)', borderTop: '2px solid var(--gold)' }}>
        <div className="mono" style={{ fontSize: 12, letterSpacing: '0.16em', color: 'var(--gold)', marginBottom: 6 }}>PRO</div>
        <div style={{ fontSize: 28, fontFamily: 'var(--f-display)', fontWeight: 800, color: 'var(--gold)', marginBottom: 14 }}>$19.99 <span style={{ fontSize: 14, fontWeight: 400, color: 'var(--bone-2)' }}>one-time</span></div>
        {['Unlimited profiles', '1500+ yd range', 'G7 drag', 'All 12 wind', 'Coriolis + spin drift', 'MV/BC truing', 'PDF/CSV export', 'Angle comp', 'All 5 themes'].map(i => (
          <div key={i} style={{ fontSize: 13, color: 'var(--bone)', marginBottom: 6 }}><span style={{ color: 'var(--gold)' }}>✓</span> {i}</div>
        ))}
      </div>
    </div>
    <div style={{ marginTop: 16, textAlign: 'center', fontSize: 14, color: 'var(--bone-2)' }}>
      No subscriptions. No renewals. No ads.
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// MOBILE CTA
// ═══════════════════════════════════════════════════════════
const M5CTA = () => (
  <section style={{ padding: '56px 20px', background: 'radial-gradient(ellipse 80% 70% at 50% 50%, #1a2017 0%, #0a0a08 70%, #000 100%)', borderTop: '1px solid var(--hair)', textAlign: 'center' }}>
    <h2 style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 20, color: 'var(--gold)' }}>
      Download EaglEye
    </h2>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, maxWidth: 360 }}>
      <AppStoreBadge comingSoon compact />
      <GooglePlayBadge comingSoon compact />
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// MOBILE NAV (reuse from variation4-mobile)
// ═══════════════════════════════════════════════════════════
const M5Nav = () => {
  const [open, setOpen] = React.useState(false);
  const links = [
    { label: 'Features', href: '#features' },
    { label: 'Precision', href: '#precision' },
    { label: 'Themes', href: '#themes' },
    { label: 'Privacy', href: '#privacy' },
    { label: 'Catalog', href: '#catalog' },
    { label: 'Pricing', href: '#pricing' },
    { label: 'Support', href: 'mailto:hello@gadsden.io' },
  ];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 30,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 18px', borderBottom: '1px solid var(--hair)',
      background: 'rgba(7,9,12,0.92)', backdropFilter: 'blur(10px)',
    }}>
      <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'var(--bone)' }}>
        <EEIcon size={32} />
        <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
          <span style={{ fontFamily: 'var(--f-display)', fontWeight: 800, letterSpacing: '-0.01em', fontSize: 22 }}>
            EaglEye<span style={{ color: 'var(--gold)' }}>.</span>
          </span>
          <span className="mono" style={{ fontSize: 9, letterSpacing: '0.3em', color: 'var(--tan)', marginTop: 3 }}>BALLISTICS</span>
        </div>
      </a>
      <button onClick={() => setOpen(!open)} aria-label="Menu" style={{
        width: 40, height: 40, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        background: 'transparent', border: '1px solid var(--hair-2)', borderRadius: 4, cursor: 'pointer', color: 'var(--bone)',
      }}>
        {open ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18"/></svg>
              : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>}
      </button>
      {open && (
        <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, background: 'var(--ink-0)', borderBottom: '1px solid var(--hair)', padding: '14px 18px 20px' }}>
          {links.map(l => (
            <a key={l.label} href={l.href} onClick={() => setOpen(false)} style={{ display: 'block', padding: '12px 4px', fontSize: 17, color: 'var(--bone)', textDecoration: 'none', borderBottom: '1px solid var(--hair)' }}>{l.label}</a>
          ))}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 18 }}>
            <a href="https://x.com/EaglEyeDope" target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 38, height: 38, color: 'var(--bone-2)', border: '1px solid var(--hair-2)', borderRadius: 3, textDecoration: 'none' }}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            </a>
            <a href="#pricing" onClick={() => setOpen(false)} className="ee-btn" style={{ flex: 1, justifyContent: 'center', padding: '12px 16px', fontSize: 15 }}>Download</a>
          </div>
        </div>
      )}
    </nav>
  );
};

// Mobile footer
const M5Footer = () => (
  <footer style={{ background: 'var(--ink-0)', padding: '40px 20px 28px', borderTop: '1px solid var(--hair)' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
      <EEIcon size={36} />
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
        <span style={{ fontFamily: 'var(--f-display)', fontWeight: 800, fontSize: 22 }}>EaglEye<span style={{ color: 'var(--gold)' }}>.</span></span>
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.35em', color: 'var(--tan)', marginTop: 4 }}>BALLISTICS</span>
      </div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
      {[
        { h: 'Legal', l: [{ label: 'Privacy Policy', href: '/privacy' }, { label: 'EULA', href: '/eula' }] },
        { h: 'Contact', l: [{ label: 'hello@gadsden.io', href: 'mailto:hello@gadsden.io' }, { label: '@EaglEyeDope', href: 'https://x.com/EaglEyeDope', ext: true }] },
      ].map(col => (
        <div key={col.h}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>{col.h}</div>
          {col.l.map(i => (
            <a key={i.label} href={i.href} target={i.ext ? '_blank' : undefined} rel={i.ext ? 'noopener' : undefined} style={{ display: 'block', fontSize: 14, color: col.h === 'Contact' ? 'var(--gold)' : 'var(--bone-2)', marginBottom: 8, fontFamily: col.h === 'Contact' ? 'var(--f-mono)' : 'inherit', textDecoration: 'none' }}>{i.label}</a>
          ))}
        </div>
      ))}
    </div>
    <div style={{ paddingTop: 20, borderTop: '1px solid var(--hair)' }}>
      <div className="mono" style={{ fontSize: 11, color: 'var(--bone-2)', letterSpacing: '0.06em' }}>© 2026 GADSDEN LLC · NO ANALYTICS · NO TRACKING</div>
    </div>
  </footer>
);

// ═══════════════════════════════════════════════════════════
// MOBILE PAGE WRAPPER
// ═══════════════════════════════════════════════════════════
const Variation5Mobile = () => (
  <div className="ee-scope" style={{ width: '100%', background: '#0a0a08' }}>
    <M5Nav />
    <M5Hero />
    <M5Accuracy />
    <M5Privacy />
    <M5Catalogs />
    <M5Screenshots />
    <M5Competition />
    <M5Pricing />
    <M5CTA />
    <M5Footer />
  </div>
);

window.Variation5Mobile = Variation5Mobile;
