// EaglEye Product Page v5 — Part 2
// Sections 3-8: Privacy, Catalogs, Screenshots, Competition, Pricing, CTA

// ═══════════════════════════════════════════════════════════
// SECTION 3 — PRIVACY
// ═══════════════════════════════════════════════════════════
const S3Privacy = () => (
  <section id="privacy" style={{
    padding: '120px 48px',
    background: '#2B3320',
    borderTop: '1px solid var(--hair)',
  }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div className="mono" style={{ fontSize: 13, letterSpacing: '0.22em', color: 'var(--gold)', marginBottom: 22 }}>◉ PRIVACY</div>
      <h2 style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1, marginBottom: 48 }}>
        Your Data Stays on Your Device.<br/><span style={{ color: 'var(--gold)' }}>Period.</span>
      </h2>

      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, marginBottom: 48 }}>
        {/* DON'T column */}
        <div style={{ padding: '32px 28px', background: 'var(--ink-0)', border: '1px solid var(--hair-2)' }}>
          <div className="mono" style={{ fontSize: 13, letterSpacing: '0.18em', color: 'var(--gold)', marginBottom: 20 }}>WHAT WE DON'T DO</div>
          {[
            'No analytics or telemetry',
            'No crash reporting',
            'No advertising identifiers (IDFA, IDFV, Android Ad ID)',
            'No user accounts, emails, or passwords',
            'No cloud sync or backup',
            'No background location',
            'No camera, microphone, contacts, photos, or health data',
            'No cookies or web tracking',
            'No push notifications',
          ].map(item => (
            <div key={item} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 12 }}>
              <span style={{ color: 'var(--gold)', fontSize: 14, marginTop: 2, flexShrink: 0 }}>✕</span>
              <span style={{ fontSize: 16, color: 'var(--bone)', lineHeight: 1.5 }}>{item}</span>
            </div>
          ))}
        </div>

        {/* DO column */}
        <div style={{ padding: '32px 28px', background: 'var(--ink-2)', border: '1px solid var(--hair)' }}>
          <div className="mono" style={{ fontSize: 13, letterSpacing: '0.18em', color: 'var(--bone-2)', marginBottom: 20 }}>WHAT WE DO</div>
          {[
            { t: 'GPS location', d: 'Only when you tap "Fetch Weather" — ephemeral, never stored, sent only to Open-Meteo' },
            { t: 'Optional feedback form', d: 'Sends your message + device model + OS version + app version' },
            { t: 'Local storage', d: 'All profiles, dope cards, and settings stored locally in your app sandbox' },
          ].map(item => (
            <div key={item.t} style={{ marginBottom: 20, paddingBottom: 16, borderBottom: '1px solid var(--hair)' }}>
              <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--bone)', marginBottom: 4 }}>{item.t}</div>
              <div style={{ fontSize: 14, color: 'var(--bone-2)', lineHeight: 1.55 }}>{item.d}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '24px 28px', background: 'var(--ink-0)', border: '1px solid var(--gold)', textAlign: 'center' }}>
        <div style={{ fontSize: 20, fontWeight: 700, fontFamily: 'var(--f-display)', color: 'var(--gold)', marginBottom: 8 }}>
          Two network endpoints.
        </div>
        <div style={{ fontSize: 16, color: 'var(--bone-2)' }}>
          Weather data from Open-Meteo and an optional feedback form. Nothing else leaves your phone. Ever.
        </div>
        <a href="/privacy" style={{ display: 'inline-block', marginTop: 16, fontSize: 14, color: 'var(--gold)', fontFamily: 'var(--f-mono)', textDecoration: 'none', borderBottom: '1px solid var(--gold)' }}>
          Full privacy policy →
        </a>
      </div>
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// SECTION 4 — CATALOGS
// ═══════════════════════════════════════════════════════════
const S4Catalogs = () => {
  const ammo = ['Aguila', 'Alpha Munitions', 'Barnes', 'Barrett', 'Berger', 'Black Hills', 'CCI', 'CheyTac', 'Eley', 'Federal', 'Hornady', 'Lapua', 'Norma', 'Nosler', 'Peterson Cartridge', 'PPU', 'Remington', 'RWS', 'Sako', 'SBR Ammunition', 'Sellier & Bellot', 'Sierra', 'Sig Sauer', 'SK', 'Speer', 'Weatherby', 'Winchester', 'Wolf'];
  const scopes = ['Athlon', 'Burris', 'Bushnell', 'Elcan', 'Element Optics', 'Hawke', 'Hensoldt', 'IOR Valdada', 'Kahles', 'Leupold', 'March', 'Maven', 'Meopta', 'Minox', 'Nightforce', 'Primary Arms', 'Schmidt & Bender', 'Sig Sauer', 'Steiner', 'Swampfox', 'Swarovski', 'Tangent Theta', 'Tract', 'Trijicon', 'US Optics', 'Vortex', 'Zeiss', 'Zero Compromise'];
  const mounts = ['ADM', 'Aero Precision', 'Area 419', 'Badger Ordnance', 'Bobro', 'ERA-TAC', 'Geissele', 'Hawkins Precision', "Knight's Armament", 'LaRue', 'Leupold', 'MDT', 'Masterpiece Arms', 'Midwest Industries', 'Nightforce', 'Reptilia', 'Scalarworks', 'Seekins', 'Spuhr', 'TPS', 'Unity Tactical', 'Vortex', 'Warne'];

  const BrandList = ({ title, count, names }) => (
    <div style={{ marginBottom: 28 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 12 }}>
        <span className="mono" style={{ fontSize: 13, letterSpacing: '0.16em', color: 'var(--gold)' }}>{title}</span>
        <span className="mono" style={{ fontSize: 13, letterSpacing: '0.12em', color: 'var(--bone-2)' }}>{count} BRANDS</span>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 16px' }}>
        {names.map(n => <span key={n} style={{ fontSize: 15, color: 'var(--bone)', lineHeight: 1.8 }}>{n}</span>)}
      </div>
    </div>
  );

  return (
    <section id="catalog" style={{
      padding: '120px 48px',
      background: 'linear-gradient(180deg, #14180e 0%, #0a0a08 50%, #14180e 100%)',
      borderTop: '1px solid var(--hair)',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div className="mono" style={{ fontSize: 13, letterSpacing: '0.22em', color: 'var(--gold)', marginBottom: 22 }}>◉ CATALOGS</div>
        <h2 style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1, marginBottom: 48 }}>
          <span style={{ color: 'var(--gold)' }}>482</span> Factory Loads. Ready to Shoot.
        </h2>

        {/* Stat blocks */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--hair-2)', marginBottom: 48 }}>
          {[
            ['482', 'Factory Ammo Loads', '28 manufacturers'],
            ['253', 'Calibers', '115 with factory ammo'],
            ['236', 'Scopes', '28 manufacturers'],
            ['229', 'Mounts', '23 manufacturers'],
          ].map(([n, t, sub], i) => (
            <div key={t} style={{ padding: '28px 24px', borderRight: i < 3 ? '1px solid var(--hair-2)' : 'none', background: 'var(--ink-0)' }}>
              <div style={{ fontSize: 48, fontFamily: 'var(--f-display)', fontWeight: 800, color: 'var(--gold)', letterSpacing: '-0.03em', lineHeight: 1 }}>{n}</div>
              <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--bone)', marginTop: 12 }}>{t}</div>
              <div style={{ fontSize: 14, color: 'var(--bone-2)', marginTop: 4 }}>{sub}</div>
            </div>
          ))}
        </div>

        <BrandList title="AMMUNITION" count="28" names={ammo} />
        <BrandList title="OPTICS" count="28" names={scopes} />
        <BrandList title="MOUNTS" count="23" names={mounts} />

        {/* Supporting details */}
        <div style={{ marginTop: 32, padding: '20px 24px', background: 'var(--ink-2)', border: '1px solid var(--hair)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              ['113', 'calibers with barrel-length MV correction and SAAMI reference lengths'],
              ['49', 'calibers with suppressor MV offset data (baffled and flow-through)'],
              ['98', 'caliber twist profiles for default twist rate suggestions'],
            ].map(([n, d]) => (
              <div key={d}>
                <span style={{ fontSize: 28, fontFamily: 'var(--f-display)', fontWeight: 800, color: 'var(--gold)' }}>{n}</span>
                <div style={{ fontSize: 14, color: 'var(--bone-2)', marginTop: 6, lineHeight: 1.55 }}>{d}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 20, fontSize: 16, color: 'var(--bone-2)', lineHeight: 1.55 }}>
          Pull a factory load, select your scope and mount, build a complete profile in under a minute. Pre-validated BC, MV, and turret data.
        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════
// SECTION 5 — SCREENSHOTS
// ═══════════════════════════════════════════════════════════
const S5Screenshots = () => {
  const shots = [
    { src: 'assets/screens/solver-weather.png', t: 'Solver', d: 'Full ballistic solution with live atmospherics.' },
    { src: 'assets/screens/rifle-edit.png', t: 'Armory', d: 'Rifle, scope, ammo — every field that drives the solve.' },
    { src: 'assets/screens/rangecard-light-gallery.png', t: 'Range Card', d: 'Full dope card with holds, wind, velocity, and TOF out to 1,600 yards.' },
    { src: 'assets/screens/catalog-browse.png', t: 'Factory Catalog', d: '482 loads across 28 manufacturers, ready to import.' },
    { src: 'assets/screens/export-dopecard.png', t: 'PDF Export', d: 'Export your range card as PDF or CSV and take it to the field.' },
    { src: 'assets/screens/settings.png', t: 'Themes', d: 'Dark, OLED, Daylight, Patriotic Dark & Light.' },
  ];
  return (
    <section id="themes" style={{
      padding: '120px 48px',
      background: '#2B3320',
      borderTop: '1px solid var(--hair)',
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div className="mono" style={{ fontSize: 13, letterSpacing: '0.22em', color: 'var(--gold)', marginBottom: 22 }}>◉ SEE IT IN ACTION</div>
        <h2 style={{ fontSize: 48, fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1, marginBottom: 56, color: 'var(--gold)' }}>
          Every screen earns its place.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48, justifyItems: 'center' }}>
          {shots.map(s => (
            <div key={s.t} style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', maxWidth: 320 }}>
              <PhoneShot src={s.src} width={240} />
              <div style={{ fontSize: 20, fontFamily: 'var(--f-display)', fontWeight: 600, marginTop: 24, color: 'var(--gold)' }}>{s.t}</div>
              <div style={{ fontSize: 15, color: 'var(--bone-2)', marginTop: 8, lineHeight: 1.55 }}>{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════
// SECTION 6 — COMPETITIVE COMPARISON
// ═══════════════════════════════════════════════════════════
const S6Competition = () => (
  <section id="compare" style={{
    padding: '120px 48px',
    background: 'linear-gradient(180deg, #0a0a08 0%, #0e120c 50%, #0a0a08 100%)',
    borderTop: '1px solid var(--hair)',
  }}>
    <div style={{ maxWidth: 1000, margin: '0 auto' }}>
      <div className="mono" style={{ fontSize: 13, letterSpacing: '0.22em', color: 'var(--gold)', marginBottom: 22 }}>◉ VERIFICATION TRANSPARENCY</div>
      <h2 style={{ fontSize: 48, fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1, marginBottom: 16 }}>
        No Other Ballistic Calculator<br/><span style={{ color: 'var(--gold)' }}>Publishes This Data.</span>
      </h2>
      <p style={{ fontSize: 18, color: 'var(--bone-2)', marginBottom: 48, lineHeight: 1.55 }}>
        Most apps ask you to trust the math on faith. We prove it.
      </p>

      <div style={{ border: '1px solid var(--hair-2)', background: 'var(--ink-0)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', borderBottom: '1px solid var(--hair)', background: 'var(--ink-2)' }}>
          <div style={{ padding: '16px 24px' }}>
            <span className="mono" style={{ fontSize: 12, letterSpacing: '0.14em', color: 'var(--bone-2)' }}>WHAT EAGLEYE PUBLISHES</span>
          </div>
          <div style={{ padding: '16px 24px', borderLeft: '1px solid var(--hair)' }}>
            <span className="mono" style={{ fontSize: 12, letterSpacing: '0.14em', color: 'var(--gold)' }}>VALUE</span>
          </div>
        </div>
        {[
          ['Verified trajectory scenarios', '98,329'],
          ['Environmental conditions tested', '210'],
          ['Simulated real-world locations', '137 across 6 continents'],
          ['Mean velocity error', '< 0.02%'],
          ['Pass rate', '100%'],
          ['Individual data points compared', '1.4M+'],
          ['Verification methodology', 'Published and reproducible'],
          ['Analytics / tracking', 'None — by design'],
          ['User accounts required', 'No'],
          ['Data leaving device', 'Weather (ephemeral) + optional feedback only'],
        ].map(([metric, val], i, arr) => (
          <div key={metric} style={{
            display: 'grid', gridTemplateColumns: '1.6fr 1fr',
            borderBottom: i === arr.length - 1 ? 'none' : '1px solid var(--hair)',
          }}>
            <div style={{ padding: '15px 24px', fontSize: 16, color: 'var(--bone)' }}>{metric}</div>
            <div style={{ padding: '15px 24px', borderLeft: '1px solid var(--hair)', fontSize: 16, fontFamily: 'var(--f-mono)', color: 'var(--gold)', fontWeight: 600 }}>{val}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 32, textAlign: 'center', fontSize: 20, fontWeight: 700, fontFamily: 'var(--f-display)', color: 'var(--gold)' }}>
        Accurate. Private. Published.
      </div>
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// SECTION 7 — PRICING
// ═══════════════════════════════════════════════════════════
const S7Pricing = () => (
  <section id="pricing" style={{
    padding: '120px 48px',
    background: '#2B3320',
    borderTop: '1px solid var(--hair)',
    scrollMarginTop: 20,
  }}>
    <div style={{ maxWidth: 1000, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <div className="mono" style={{ fontSize: 13, letterSpacing: '0.22em', color: 'var(--gold)', marginBottom: 16 }}>◉ PRICING</div>
        <h2 style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1, color: 'var(--gold)' }}>
          One Price. Everything Unlocked. Forever.
        </h2>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 0, border: '1px solid var(--hair-2)' }}>
        {/* Free column */}
        <div style={{ padding: '36px 32px', background: 'var(--ink-0)' }}>
          <div className="mono" style={{ fontSize: 14, letterSpacing: '0.18em', color: 'var(--bone-2)', marginBottom: 8 }}>FREE</div>
          <div style={{ fontSize: 36, fontFamily: 'var(--f-display)', fontWeight: 800, color: 'var(--bone)', marginBottom: 24 }}>$0</div>
          {[
            '2 rifle profiles',
            '5 ammo loads',
            '5 catalog imports',
            'Max range 800 yards',
            'G1 drag model',
            '3 & 9 o\'clock wind only',
            'Dark + Daylight themes',
          ].map(item => (
            <div key={item} style={{ display: 'flex', gap: 10, marginBottom: 10 }}>
              <span style={{ color: 'var(--bone-2)', fontSize: 14 }}>—</span>
              <span style={{ fontSize: 15, color: 'var(--bone-2)', lineHeight: 1.5 }}>{item}</span>
            </div>
          ))}
        </div>

        {/* Pro column */}
        <div style={{ padding: '36px 32px', background: 'var(--ink-0)', borderLeft: '2px solid var(--gold)' }}>
          <div className="mono" style={{ fontSize: 14, letterSpacing: '0.18em', color: 'var(--gold)', marginBottom: 8 }}>PRO</div>
          <div style={{ fontSize: 36, fontFamily: 'var(--f-display)', fontWeight: 800, color: 'var(--gold)', marginBottom: 24 }}>
            $19.99 <span style={{ fontSize: 16, fontWeight: 400, color: 'var(--bone-2)' }}>one-time</span>
          </div>
          {[
            'Unlimited profiles and imports',
            'Extended range (1500+ yards)',
            'G7 drag model',
            'All 12 wind directions',
            'Coriolis and spin drift',
            'MV/BC truing',
            'PDF/CSV export',
            'Angle compensation',
            'All 5 themes',
          ].map(item => (
            <div key={item} style={{ display: 'flex', gap: 10, marginBottom: 10 }}>
              <span style={{ color: 'var(--gold)', fontSize: 14 }}>✓</span>
              <span style={{ fontSize: 15, color: 'var(--bone)', lineHeight: 1.5 }}>{item}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 24, textAlign: 'center', fontSize: 18, color: 'var(--bone-2)' }}>
        No subscriptions. No renewals. No ads. Pay once, own it forever.
      </div>
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// SECTION 8 — CTA
// ═══════════════════════════════════════════════════════════
const S8CTA = () => (
  <section style={{
    padding: '100px 48px',
    background: 'radial-gradient(ellipse 60% 80% at 50% 50%, #1a2017 0%, #0a0a08 70%, #000 100%)',
    borderTop: '1px solid var(--hair)',
    textAlign: 'center',
    position: 'relative', overflow: 'hidden',
  }}>
    <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', opacity: 0.08 }}>
      <Reticle size={600} color="var(--gold)" stroke={1} />
    </div>
    <div style={{ position: 'relative', maxWidth: 600, margin: '0 auto' }}>
      <h2 style={{ fontSize: 48, fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1, marginBottom: 24, color: 'var(--gold)' }}>
        Download EaglEye Ballistics
      </h2>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
        <AppStoreBadge comingSoon />
        <GooglePlayBadge comingSoon />
      </div>
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// PAGE WRAPPER
// ═══════════════════════════════════════════════════════════
const Variation5 = () => (
  <div className="ee-scope" style={{ width: '100%', background: '#0a0a08' }}>
    <EENav active="Features" />
    <S1Hero />
    <S2Accuracy />
    <S3Privacy />
    <S4Catalogs />
    <S5Screenshots />
    <S6Competition />
    <S7Pricing />
    <S8CTA />
    <EEFooter />
  </div>
);

window.S3Privacy = S3Privacy;
window.S4Catalogs = S4Catalogs;
window.S5Screenshots = S5Screenshots;
window.S6Competition = S6Competition;
window.S7Pricing = S7Pricing;
window.S8CTA = S8CTA;
window.Variation5 = Variation5;