// EaglEye Product Page v5 — Final layout per brief
// Sections: Hero → Accuracy/Solver → Privacy → Catalogs → Screenshots → Competition → Pricing → CTA

// ═══════════════════════════════════════════════════════════
// SECTION 1 — HERO
// ═══════════════════════════════════════════════════════════
const S1Hero = () => (
  <section id="top" style={{
    position: 'relative', padding: '60px 48px 80px', overflow: 'hidden',
    background: 'radial-gradient(ellipse 80% 60% at 50% 40%, rgba(200,168,78,0.10), transparent 60%), linear-gradient(180deg, #0a0a08 0%, #14180e 60%, #1a2017 100%)',
  }}>
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.35, pointerEvents: 'none' }}>
      <defs><pattern id="hg" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.03)" strokeWidth="1"/></pattern></defs>
      <rect width="100%" height="100%" fill="url(#hg)" />
    </svg>

    <div style={{ position: 'relative', maxWidth: 1400, margin: '0 auto', width: '100%' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 32 }}>
            <svg width="22" height="14" 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: 13, letterSpacing: '0.18em', color: 'var(--gold)', fontWeight: 600 }}>MADE IN USA</span>
          </div>

          <h1 style={{ fontSize: 68, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, marginBottom: 24 }}>
            <span style={{ color: 'var(--gold)' }}>98,329</span> Verified Trajectories.<br/>
            <span style={{ color: 'var(--gold)' }}>Zero</span> Data Collected.
          </h1>

          <p style={{ fontSize: 20, lineHeight: 1.55, color: 'var(--bone-2)', maxWidth: 620, marginBottom: 32 }}>
            Independently verified against JBM Ballistics with <span style={{ color: 'var(--gold)' }}>{'< 0.02%'} mean error</span> and
            <span style={{ color: 'var(--gold)' }}> 100% pass rate</span>. No analytics, no tracking, no accounts.
            Your dope is accurate. Your data is yours.
          </p>

          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <AppStoreBadge comingSoon />
            <GooglePlayBadge comingSoon />
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <PhoneShot src="/assets/screens/rangecard-dark-hero.png" width={280} />
        </div>
      </div>
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// SECTION 2 — ACCURACY & SOLVER
// ═══════════════════════════════════════════════════════════

// 2A — Stats bar
const S2Stats = () => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, border: '1px solid var(--hair-2)', background: 'var(--ink-0)', marginBottom: 56 }}>
    {[
      ['98,329', 'VERIFIED TRAJECTORIES'],
      ['210', 'ENVIRONMENTAL CONDITIONS'],
      ['137', 'SIMULATED LOCATIONS'],
      ['< 0.02%', 'MEAN VELOCITY ERROR'],
      ['100%', 'PASS RATE'],
      ['1.4M+', 'DATA POINTS COMPARED'],
    ].map(([v, k], i) => (
      <div key={k} style={{ padding: '28px 16px', borderRight: i < 5 ? '1px solid var(--hair-2)' : 'none', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--f-display)', fontSize: 36, fontWeight: 800, letterSpacing: '-0.02em', color: i === 3 || i === 4 ? 'var(--gold)' : 'var(--bone)', lineHeight: 1, marginBottom: 10 }}>{v}</div>
        <div className="mono" style={{ fontSize: 12, letterSpacing: '0.14em', color: 'var(--bone-2)' }}>{k}</div>
      </div>
    ))}
  </div>
);

// 2B — Real-world proof
const S2Proof = () => (
  <div style={{ border: '1px solid var(--hair-2)', background: 'var(--ink-0)', padding: '32px 32px', marginBottom: 56 }}>
    <div className="mono" style={{ fontSize: 13, letterSpacing: '0.16em', color: 'var(--gold)', marginBottom: 8 }}>{'◉ WHAT < 0.02% LOOKS LIKE AT 1,000 YARDS'}</div>
    <div style={{ fontSize: 15, color: 'var(--bone-2)', marginBottom: 24 }}>6.5 Creedmoor — 140gr Hornady ELD-M, G7 BC 0.315, 2710 fps MV</div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }}>
      {[
        { m: 'REMAINING VELOCITY', jbm: '1,448.62 fps', ee: '1,448.58 fps', d: '0.04 fps' },
        { m: 'BULLET DROP', jbm: '-325.58"', ee: '-325.63"', d: '0.05"' },
        { m: 'TIME OF FLIGHT', jbm: '1.5148 sec', ee: '1.5150 sec', d: '0.2 ms' },
      ].map((r, i) => (
        <div key={r.m} style={{ padding: '20px 24px', borderRight: i < 2 ? '1px solid var(--hair)' : 'none' }}>
          <div className="mono" style={{ fontSize: 12, letterSpacing: '0.16em', color: 'var(--bone-2)', marginBottom: 14 }}>{r.m}</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
            <span className="mono" style={{ fontSize: 13, color: 'var(--bone-2)' }}>JBM</span>
            <span style={{ fontSize: 17, fontFamily: 'var(--f-mono)', color: 'var(--bone-2)' }}>{r.jbm}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
            <span className="mono" style={{ fontSize: 13, color: 'var(--gold)' }}>EAGLEYE</span>
            <span style={{ fontSize: 17, fontFamily: 'var(--f-mono)', color: 'var(--gold)', fontWeight: 600 }}>{r.ee}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 10, borderTop: '1px solid var(--hair)' }}>
            <span className="mono" style={{ fontSize: 13, color: 'var(--bone-2)' }}>DELTA</span>
            <span style={{ fontSize: 17, fontFamily: 'var(--f-mono)', color: 'var(--bone)' }}>{r.d}</span>
          </div>
        </div>
      ))}
    </div>
    <div style={{ marginTop: 18, fontSize: 15, color: 'var(--bone-2)', fontStyle: 'italic' }}>
      These numbers hold at sea level or 14,000 feet, in 130°F heat or -45°F cold, dead calm or 40 mph crosswind.
    </div>
  </div>
);

// 2C — Solver physics cards
const S2Physics = () => {
  const cards = [
    { t: '3-DOF Point-Mass Solver', d: 'Sub-millisecond trajectory integration from muzzle to target. Professional-grade solver used by competitive and tactical shooters.' },
    { t: 'G1 & G7 Drag Models', d: 'Smooth, artifact-free drag calculation through the transonic region where most solvers break down.' },
    { t: 'Standard Atmosphere Model', d: 'Full atmosphere from sea level through the tropopause. Density altitude and pressure altitude for any shooting location.' },
    { t: 'Zero-Day vs Firing-Day', d: 'Separate atmosphere for zero and current conditions. Cold bore zero holds when you change altitude.' },
    { t: 'Coriolis & Earth Rotation', d: 'Horizontal and vertical deflection from GPS latitude. Matters at 1,000+ yards.' },
    { t: 'Spin Drift', d: 'Spin drift correction for left-hand and right-hand twist barrels.' },
    { t: 'Barrel-Length MV Correction', d: 'Barrel-length velocity correction for 113 calibers with SAAMI reference barrel lengths.' },
    { t: 'Suppressor Modeling', d: 'MV offset for 49 calibers (baffled and flow-through). Automatic POI shift correction.' },
    { t: 'MV & BC Truing', d: 'Match your solver to real-world impacts at known range. Trued values persist and override in all future solves.' },
    { t: 'Shooting Angle Compensation', d: "Rifleman's rule with corrected range and gravity for uphill/downhill shots." },
    { t: 'Real-Time Weather', d: 'GPS-based atmospheric data. Phone barometer for local station pressure. Live weather pulled automatically.' },
    { t: 'Wind Clock System', d: 'Full 12-position clock. Compass-relative conversion when heading is captured.' },
  ];
  return (
    <div id="features" style={{ marginBottom: 56 }}>
      <div className="mono" style={{ fontSize: 13, letterSpacing: '0.2em', color: 'var(--gold)', marginBottom: 18 }}>◉ THE PHYSICS BEHIND THE ACCURACY</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(200,168,78,0.2)' }}>
        {cards.map(c => (
          <div key={c.t} style={{ padding: '28px 24px', background: '#2B3320', transition: 'background 0.2s' }}
            onMouseEnter={e => e.currentTarget.style.background = '#3a4429'}
            onMouseLeave={e => e.currentTarget.style.background = '#2B3320'}>
            <h3 style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em', marginBottom: 10, color: 'var(--gold)' }}>{c.t}</h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--bone-2)', margin: 0 }}>{c.d}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

// 2D — Accuracy by category
const S2Category = () => {
  const cats = [
    { cat: 'All loads', loads: 466, mean: '< 0.02%', worst: '< 0.08%' },
    { cat: 'Rifle', loads: 384, mean: '< 0.01%', worst: '< 0.08%' },
    { cat: 'Handgun', loads: 43, mean: '< 0.06%', worst: '< 0.07%' },
    { cat: 'Rimfire', loads: 30, mean: '< 0.09%', worst: '< 0.08%' },
    { cat: 'Shotgun slug', loads: 12, mean: '< 0.09%', worst: '< 0.08%' },
    { cat: 'G7 drag model', loads: 211, mean: '< 0.01%', worst: '< 0.01%', highlight: true },
    { cat: 'G1 drag model', loads: 258, mean: '< 0.03%', worst: '< 0.08%' },
  ];
  return (
    <div style={{ marginBottom: 56 }}>
      <div className="mono" style={{ fontSize: 13, letterSpacing: '0.2em', color: 'var(--gold)', marginBottom: 18 }}>◉ VERIFIED ACROSS EVERY CATEGORY</div>
      <div style={{ border: '1px solid var(--hair-2)', background: 'var(--ink-0)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.6fr 0.8fr 0.8fr', padding: '14px 24px', borderBottom: '1px solid var(--hair)', background: 'var(--ink-2)' }}>
          {['CATEGORY', 'LOADS', 'MEAN ERROR', 'WORST ERROR'].map(h => (
            <div key={h} className="mono" style={{ fontSize: 12, letterSpacing: '0.12em', color: 'var(--bone-2)' }}>{h}</div>
          ))}
        </div>
        {cats.map((r, i) => (
          <div key={r.cat} style={{
            display: 'grid', gridTemplateColumns: '1.4fr 0.6fr 0.8fr 0.8fr',
            padding: '15px 24px', borderBottom: i === cats.length - 1 ? 'none' : '1px solid var(--hair)',
            fontSize: 16, fontFamily: 'var(--f-mono)',
            background: r.highlight ? 'rgba(200,168,78,0.06)' : 'transparent',
          }}>
            <span style={{ color: i === 0 ? 'var(--gold)' : 'var(--bone)' }}>{r.cat}</span>
            <span style={{ color: 'var(--bone-2)' }}>{r.loads}</span>
            <span style={{ color: 'var(--gold)', fontWeight: 600 }}>{r.mean}</span>
            <span style={{ color: 'var(--bone-2)' }}>{r.worst}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 12, fontSize: 14, color: 'var(--bone-2)' }}>
        466 of 482 catalog loads produce enough trajectory points for JBM comparison. All 482 are in the app.
      </div>
    </div>
  );
};

// 2E — Environmental coverage
const S2Environment = () => {
  const bars = [
    { label: 'TEMPERATURE', min: '-45°F', max: '+130°F', pct: 100 },
    { label: 'ALTITUDE', min: 'Sea level', max: '14,000 ft', pct: 100 },
    { label: 'HUMIDITY', min: '0%', max: '100%', pct: 100 },
    { label: 'WIND SPEED', min: '0 mph', max: '40 mph', pct: 100 },
    { label: 'WIND DIRECTION', min: '0°', max: '360°', pct: 100 },
    { label: 'PRESSURE', min: '27.50" Hg', max: '31.00" Hg', pct: 100 },
  ];
  const regions = [
    { r: 'United States', n: 85 }, { r: 'Europe', n: 19 }, { r: 'Canada', n: 10 },
    { r: 'Middle East', n: 8 }, { r: 'Africa', n: 8 }, { r: 'Asia/Pacific', n: 6 },
    { r: 'South America', n: 5 }, { r: 'Polar/Extreme', n: 5 },
  ];

  return (
    <div style={{ marginBottom: 56 }}>
      <div className="mono" style={{ fontSize: 13, letterSpacing: '0.2em', color: 'var(--gold)', marginBottom: 18 }}>◉ TESTED EVERYWHERE YOU SHOOT</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
        <div>
          {bars.map(b => (
            <div key={b.label} style={{ marginBottom: 18 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                <span className="mono" style={{ fontSize: 12, letterSpacing: '0.14em', color: 'var(--bone-2)' }}>{b.label}</span>
                <span className="mono" style={{ fontSize: 12, color: 'var(--bone-2)' }}>{b.min} — {b.max}</span>
              </div>
              <div style={{ height: 6, background: 'var(--ink-2)', borderRadius: 3, overflow: 'hidden' }}>
                <div style={{ width: `${b.pct}%`, height: '100%', background: 'var(--gold)', borderRadius: 3 }} />
              </div>
            </div>
          ))}
        </div>
        <div>
          <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--bone)', marginBottom: 18 }}>137 Simulated Locations · 6 Continents</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {regions.map(r => (
              <div key={r.r} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--ink-2)', border: '1px solid var(--hair)' }}>
                <span style={{ fontSize: 14, color: 'var(--bone-2)' }}>{r.r}</span>
                <span style={{ fontSize: 14, fontFamily: 'var(--f-mono)', color: 'var(--gold)', fontWeight: 600 }}>{r.n}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// 2F — Methodology
const S2Method = () => (
  <div style={{ padding: '24px 28px', background: 'var(--ink-2)', border: '1px solid var(--hair-2)', fontSize: 15, lineHeight: 1.65, color: 'var(--bone-2)' }}>
    <div className="mono" style={{ fontSize: 13, letterSpacing: '0.2em', color: 'var(--gold)', marginBottom: 12 }}>◉ METHODOLOGY</div>
    Every factory load was submitted to JBM Ballistics under 210 environmental configurations. Pass criteria: average velocity error below 0.5%, maximum single-point error below 1.0%. Every scenario passes with substantial margin — worst category average is below 0.09%. Every solver change is verified against the full test suite before release.
  </div>
);

// Section 2 wrapper
const S2Accuracy = () => (
  <section id="precision" style={{
    padding: '120px 48px',
    background: 'linear-gradient(180deg, #0a0a08 0%, #0e120c 50%, #0a0a08 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 }}>◉ ACCURACY & SOLVER VERIFICATION</div>
      <h2 style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1, marginBottom: 48 }}>
        The proof.<br/><span style={{ color: 'var(--gold)' }}>And the physics that produce it.</span>
      </h2>
      <S2Stats />
      <S2Proof />
      <S2Physics />
      <S2Category />
      <S2Environment />
      <S2Method />
    </div>
  </section>
);

window.S1Hero = S1Hero;
window.S2Accuracy = S2Accuracy;
