/* SpecEagle — Comparison Page: iPhone 16 Pro Max vs Galaxy S25 Ultra */

const PHONE_A = {
  brand: 'Apple',
  model: 'iPhone 16 Pro Max',
  price: '$1,199',
  color: 'Desert Titanium',
};
const PHONE_B = {
  brand: 'Samsung',
  model: 'Galaxy S25 Ultra',
  price: '$1,299',
  color: 'Titanium Silverblue',
};

/* Spec data — realistic public values */
const SPEC_GROUPS = [
  {
    key: 'display', label: 'Display', icon: <IconEye size={14} />,
    rows: [
      { k: 'Size',          a: '6.9"',          b: '6.9"',          winner: 'tie' },
      { k: 'Resolution',    a: '2868 × 1320',    b: '3120 × 1440',    winner: 'b', delta: '+19% pixels' },
      { k: 'Pixel density', a: '460 ppi',         b: '505 ppi',         winner: 'b' },
      { k: 'Refresh rate',  a: '120 Hz LTPO',     b: '120 Hz LTPO',     winner: 'tie' },
      { k: 'Peak brightness', a: '2,000 nits',    b: '2,600 nits',      winner: 'b', delta: '+30%' },
      { k: 'Panel',         a: 'Super Retina XDR', b: 'Dynamic AMOLED 2X', winner: 'tie' },
      { k: 'Always-on',     a: 'Yes',             b: 'Yes',             winner: 'tie' },
    ],
  },
  {
    key: 'camera', label: 'Camera', icon: <IconCamera size={14} />,
    rows: [
      { k: 'Main',           a: '48 MP, f/1.78, OIS',           b: '200 MP, f/1.7, OIS',          winner: 'b' },
      { k: 'Ultrawide',      a: '48 MP, f/2.2, 120°',           b: '50 MP, f/1.9, 120°',          winner: 'b' },
      { k: 'Telephoto',      a: '12 MP, 5× optical',            b: '50 MP, 5× optical',           winner: 'b' },
      { k: 'Periscope',      a: '—',                            b: '10 MP, 3× optical',           winner: 'b' },
      { k: 'Selfie',         a: '12 MP, f/1.9',                 b: '12 MP, f/2.2',                winner: 'a' },
      { k: 'Max video',      a: '4K @ 120 fps Dolby Vision',   b: '8K @ 30 fps',                 winner: 'a', delta: 'Better HDR' },
      { k: 'OIS / EIS',      a: 'Sensor-shift OIS + cinematic stabilization', b: 'OIS + Super Steady', winner: 'a' },
    ],
  },
  {
    key: 'perf', label: 'Performance', icon: <IconBolt size={14} />,
    rows: [
      { k: 'Chipset',          a: 'Apple A18 Pro (3 nm)',       b: 'Snapdragon 8 Elite (3 nm)',   winner: 'tie' },
      { k: 'CPU cores',        a: '6 (2P + 4E)',                b: '8 (2P + 6P)',                 winner: 'b' },
      { k: 'GPU',              a: '6-core Apple GPU',           b: 'Adreno 830',                  winner: 'tie' },
      { k: 'RAM',              a: '8 GB',                       b: '12 GB',                       winner: 'b' },
      { k: 'Storage tiers',    a: '256 / 512 GB / 1 TB',        b: '256 / 512 GB / 1 TB',         winner: 'tie' },
      { k: 'AnTuTu v10',       a: '1,752,000',                  b: '2,640,000',                   winner: 'b', delta: '+51%' },
      { k: 'Sustained perf.',  a: '88%',                        b: '74%',                         winner: 'a', delta: '+19% thermal headroom' },
    ],
  },
  {
    key: 'battery', label: 'Battery & Charging', icon: <IconBattery size={14} />,
    rows: [
      { k: 'Capacity',         a: '4,685 mAh',                  b: '5,000 mAh',                   winner: 'b', delta: '+7%' },
      { k: 'Wired charging',   a: '27 W USB-C',                 b: '45 W USB-C',                  winner: 'b', delta: '+67%' },
      { k: 'Wireless',         a: '25 W MagSafe',               b: '15 W Qi2',                    winner: 'a' },
      { k: 'Reverse wireless', a: '—',                          b: '4.5 W',                       winner: 'b' },
      { k: 'Video playback',   a: '33 h',                       b: '31 h',                        winner: 'a' },
      { k: 'PCMark battery',   a: '14h 32m',                    b: '16h 04m',                     winner: 'b', delta: '+10%' },
    ],
  },
  {
    key: 'build', label: 'Build & Design', icon: <IconShield size={14} />,
    rows: [
      { k: 'Dimensions',       a: '163 × 77.6 × 8.3 mm',        b: '162.8 × 77.6 × 8.2 mm',       winner: 'tie' },
      { k: 'Weight',           a: '227 g',                      b: '218 g',                       winner: 'b' },
      { k: 'Frame',            a: 'Grade-5 Titanium',           b: 'Titanium Armor',              winner: 'tie' },
      { k: 'Front glass',      a: 'Ceramic Shield (2nd gen)',   b: 'Gorilla Armor 2',             winner: 'b' },
      { k: 'IP rating',        a: 'IP68 (6m / 30min)',          b: 'IP68 (1.5m / 30min)',         winner: 'a' },
      { k: 'Stylus',           a: '—',                          b: 'S Pen included',              winner: 'b' },
    ],
  },
  {
    key: 'software', label: 'Software & Updates', icon: <IconRefresh size={14} />,
    rows: [
      { k: 'OS at launch',     a: 'iOS 18',                     b: 'Android 15 / One UI 7',       winner: 'tie' },
      { k: 'Major OS updates', a: '6+ years',                   b: '7 years',                     winner: 'b' },
      { k: 'Security patches', a: '6+ years',                   b: '7 years',                     winner: 'b' },
      { k: 'On-device AI',     a: 'Apple Intelligence',         b: 'Galaxy AI',                   winner: 'tie' },
    ],
  },
  {
    key: 'connect', label: 'Connectivity',
    rows: [
      { k: '5G',               a: 'Sub-6 + mmWave',             b: 'Sub-6 + mmWave',              winner: 'tie' },
      { k: 'Wi-Fi',            a: 'Wi-Fi 7',                    b: 'Wi-Fi 7',                     winner: 'tie' },
      { k: 'Bluetooth',        a: '5.3',                        b: '5.4',                         winner: 'b' },
      { k: 'UWB',              a: 'U2 chip (2nd gen)',          b: 'UWB',                         winner: 'tie' },
      { k: 'USB',              a: 'USB-C, USB 3.2 (10 Gb/s)',   b: 'USB-C, USB 3.2 (10 Gb/s)',    winner: 'tie' },
      { k: 'Satellite',        a: 'Emergency SOS',              b: 'Emergency text',              winner: 'a' },
    ],
  },
  {
    key: 'audio', label: 'Audio',
    rows: [
      { k: 'Speakers',         a: 'Stereo (earpiece + bottom)', b: 'Stereo (earpiece + bottom)',  winner: 'tie' },
      { k: 'Spatial audio',    a: 'Dolby Atmos + Spatial',      b: 'Dolby Atmos',                 winner: 'a' },
      { k: 'Headphone jack',   a: '—',                          b: '—',                           winner: 'tie' },
    ],
  },
];

/* Benchmarks */
const BENCHMARKS = [
  { name: 'AnTuTu v10',         unit: '',     a: 1752000, b: 2640000, fmt: (n) => n.toLocaleString() },
  { name: 'Geekbench 6 — Single', unit: '',  a: 3402,    b: 3120,    fmt: (n) => n.toLocaleString() },
  { name: 'Geekbench 6 — Multi',  unit: '',  a: 8420,    b: 10220,   fmt: (n) => n.toLocaleString() },
  { name: '3DMark Solar Bay',     unit: 'fps', a: 70.2,  b: 86.4,    fmt: (n) => n.toFixed(1) },
  { name: 'DxOMark Camera',       unit: '',  a: 158,     b: 161,     fmt: (n) => String(n) },
];

const ComparisonPage = ({ setPage }) => {
  const [open, setOpen] = useState({ display: true, camera: true, perf: true, battery: true, build: false, software: false, connect: false, audio: false });
  const [activeCase, setActiveCase] = useState('photo');
  const [region, setRegion] = useState('US');
  const [sliderPos, setSliderPos] = useState(50);

  const cases = [
    { k: 'photo',   label: 'Photography', icon: <IconCamera size={13} />,    winner: PHONE_B.model, reason: 'A 200 MP main + dedicated periscope wins for reach, detail, and zoom flexibility.' },
    { k: 'gaming',  label: 'Gaming',      icon: <IconGamepad size={13} />,   winner: PHONE_A.model, reason: 'Better thermal headroom keeps sustained frame rates high in extended sessions.' },
    { k: 'battery', label: 'Battery life', icon: <IconBattery size={13} />,  winner: PHONE_B.model, reason: '5,000 mAh + 45 W wired charging — top up in half the time, longer between charges.' },
    { k: 'daily',   label: 'Daily driver', icon: <IconBriefcase size={13} />, winner: 'Tie',         reason: 'Both are class-leading; pick the OS ecosystem you\'re already in.' },
  ];

  /* ---- A. Header ---- */
  const ComparisonHeader = () => (
    <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-8 sm:pt-12">
      {/* Breadcrumb */}
      <div className="flex items-center gap-1.5 text-[11px] font-mono uppercase tracking-[0.14em] text-ink-soft dark:text-d-muted mb-5">
        <a href="#" onClick={(e) => e.preventDefault()} className="hover:text-ink dark:hover:text-white">Compare</a>
        <IconChevronRight size={10} />
        <span className="text-ink dark:text-white">Flagship · 2025</span>
      </div>

      <div className="flex items-start justify-between gap-4 mb-6">
        <div>
          <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-amber-brand dark:text-amber-warm mb-2">Phone vs Phone · Comparison</div>
          <h1 className="font-display font-bold tracking-tightest text-ink dark:text-white text-[32px] sm:text-[44px] lg:text-[56px] leading-[0.98]">
            {PHONE_A.model}
            <span className="block sm:inline">
              <span className="mx-2 sm:mx-3 text-amber-brand dark:text-amber-warm font-display font-light">vs</span>
              {PHONE_B.model}
            </span>
          </h1>
        </div>
        <div className="hidden sm:flex items-center gap-1 shrink-0">
          <button className="p-2 rounded-lg border border-line dark:border-d-border bg-paper dark:bg-d-surface text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white" aria-label="Share"><IconShare size={15} /></button>
          <button className="p-2 rounded-lg border border-line dark:border-d-border bg-paper dark:bg-d-surface text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white" aria-label="Save"><IconBookmark size={15} /></button>
          <button className="p-2 rounded-lg border border-line dark:border-d-border bg-paper dark:bg-d-surface text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white" aria-label="Print"><IconPrinter size={15} /></button>
        </div>
      </div>

      {/* Two column header with center separator */}
      <div className="relative grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-0 rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface overflow-hidden">
        {[
          { p: PHONE_A, tint: 'navy', side: 'A' },
          { p: PHONE_B, tint: 'amber', side: 'B' },
        ].map(({ p, tint, side }, i) => (
          <div key={side} className={`p-6 sm:p-8 ${i === 0 ? 'md:border-r border-line dark:border-d-border' : ''} relative`}>
            <div className="flex items-start justify-between mb-4">
              <div>
                <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted">Side {side}</div>
                <div className="mt-1 text-[12px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{p.brand}</div>
                <div className="font-display font-bold tracking-tighter2 text-ink dark:text-white text-[22px] leading-tight">{p.model}</div>
                <div className="mt-1 text-[12px] text-ink-soft dark:text-d-muted">{p.color}</div>
              </div>
              <div className="text-right">
                <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">From</div>
                <div className="num text-[22px] font-semibold text-ink dark:text-white">{p.price}</div>
              </div>
            </div>
            <div className="flex justify-center py-2">
              <PhoneRender size="lg" tint={tint} />
            </div>
            <div className="mt-4 flex gap-2">
              <button className={`flex-1 px-3 py-2 rounded-lg text-[13px] font-medium inline-flex items-center justify-center gap-1.5 ${i === 0 ? 'bg-ink text-white dark:bg-white dark:text-ink' : 'bg-amber-brand text-white dark:bg-amber-warm dark:text-ink'}`}>
                Buy <IconArrowUpRight size={13} />
              </button>
              <button className="px-3 py-2 rounded-lg text-[13px] font-medium border border-line dark:border-d-border text-ink dark:text-white hover:bg-paper-soft dark:hover:bg-d-bg">
                Full specs
              </button>
            </div>
          </div>
        ))}
        {/* center VS badge */}
        <div className="hidden md:flex absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 items-center justify-center w-14 h-14 rounded-full bg-paper dark:bg-d-bg border border-line dark:border-d-border shadow-sm">
          <div className="flex flex-col items-center">
            <EagleMark size={16} className="text-amber-brand dark:text-amber-warm" />
            <span className="font-display font-bold text-[10px] tracking-wider text-ink dark:text-white">VS</span>
          </div>
        </div>
      </div>
    </section>
  );

  /* ---- B. AI Verdict (hero) ---- */
  const VerdictCard = () => {
    const active = cases.find((c) => c.k === activeCase);
    return (
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-8">
        <div className="rounded-3xl border-2 border-ink dark:border-amber-warm bg-ink dark:bg-d-surface text-white p-6 sm:p-8 relative overflow-hidden">
          {/* watermark eagle */}
          <div className="pointer-events-none absolute -top-6 -right-6 opacity-[0.06]">
            <EagleMark size={240} />
          </div>

          {/* Top row: badge + confidence */}
          <div className="flex flex-wrap items-center justify-between gap-3 mb-6">
            <div className="flex items-center gap-2">
              <span className="inline-flex items-center gap-1.5 rounded-full bg-amber-warm/15 text-amber-warm border border-amber-warm/30 px-2.5 py-1 text-[10px] font-mono uppercase tracking-[0.16em]">
                <IconSparkle size={11} /> AI Verdict
              </span>
              <span className="text-[10px] font-mono uppercase tracking-wider text-white/50">v3.2 · generated 18 May 2026</span>
            </div>
            <div className="flex items-center gap-2 text-[11px] font-mono text-white/60">
              <span className="inline-flex items-center gap-1">
                <span className="flex h-1.5 w-1.5 rounded-full bg-win-dark" />
                High confidence
              </span>
              <span className="opacity-40">·</span>
              <span>14 spec categories</span>
              <span className="opacity-40">·</span>
              <span>6 benchmarks</span>
              <span className="opacity-40">·</span>
              <span>23 reviews</span>
            </div>
          </div>

          {/* Winner overall */}
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
            <div className="lg:col-span-7">
              <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-amber-warm mb-2">Winner overall</div>
              <h2 className="font-display font-bold tracking-tightest text-[32px] sm:text-[44px] leading-[0.98]">
                {PHONE_A.model}
              </h2>
              <p className="mt-4 text-[16px] sm:text-[17px] leading-relaxed text-white/85 max-w-2xl text-wrap-pretty">
                The {PHONE_A.model} edges ahead on video, software longevity in practice, and sustained-load gaming.
                The {PHONE_B.model} is the better hardware bet — more pixels, more pixels-per-photo, more battery — but verdicts get decided at the margins, and the margins favor Apple this year.
              </p>
            </div>

            {/* score summary */}
            <div className="lg:col-span-5">
              <div className="rounded-2xl bg-white/[0.05] border border-white/10 p-5">
                <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-white/50 mb-3">Spec score · 0–100</div>
                {[
                  { label: PHONE_A.model, v: 91, color: 'bg-white' },
                  { label: PHONE_B.model, v: 89, color: 'bg-amber-warm' },
                ].map((r) => (
                  <div key={r.label} className="mb-3 last:mb-0">
                    <div className="flex items-center justify-between mb-1.5">
                      <span className="text-[12px] text-white/80">{r.label}</span>
                      <span className="num text-[14px] font-semibold text-white">{r.v}</span>
                    </div>
                    <div className="h-1.5 rounded-full bg-white/10 overflow-hidden">
                      <div className={`h-full ${r.color}`} style={{ width: `${r.v}%` }} />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Use case tabs */}
          <div className="mt-8 pt-6 border-t border-white/10">
            <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-white/50 mb-3">Verdict by use case</div>
            <div className="flex flex-wrap gap-2 mb-5">
              {cases.map((c) => (
                <button
                  key={c.k}
                  onClick={() => setActiveCase(c.k)}
                  className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[12px] font-medium border transition ${
                    activeCase === c.k
                      ? 'bg-amber-warm text-ink border-amber-warm'
                      : 'bg-white/[0.04] text-white/80 border-white/15 hover:border-white/30'
                  }`}
                >
                  {c.icon}
                  {c.label}
                </button>
              ))}
            </div>
            <div className="rounded-xl bg-white/[0.04] border border-white/10 p-4 flex items-start gap-4">
              <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-white/50 pt-1">Winner</div>
              <div className="flex-1">
                <div className="font-display font-semibold text-amber-warm text-[18px] leading-tight">{active.winner}</div>
                <p className="mt-1 text-[13px] leading-relaxed text-white/80 text-wrap-pretty">{active.reason}</p>
              </div>
            </div>
          </div>

          {/* Buy if... columns */}
          <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="rounded-xl bg-white/[0.04] border border-white/10 p-5">
              <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-white/50 mb-1">Buy</div>
              <div className="font-display font-semibold text-white text-[16px]">{PHONE_A.model} if…</div>
              <ul className="mt-3 space-y-2 text-[13px] text-white/85">
                {[
                  'You shoot Dolby Vision video or edit in Final Cut on the same device.',
                  'You\'re deep in the Apple ecosystem (Watch, Mac, AirPods, iMessage).',
                  'Sustained gaming performance matters more than peak benchmark scores.',
                ].map((t, i) => (
                  <li key={i} className="flex items-start gap-2">
                    <span className="mt-1.5 text-amber-warm"><IconCheck size={12} /></span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="rounded-xl bg-white/[0.04] border border-white/10 p-5">
              <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-white/50 mb-1">Buy</div>
              <div className="font-display font-semibold text-white text-[16px]">{PHONE_B.model} if…</div>
              <ul className="mt-3 space-y-2 text-[13px] text-white/85">
                {[
                  'You want the best telephoto and zoom range on any phone.',
                  'You use the S Pen for notes, markup, or precision editing.',
                  'Faster charging and a larger battery are non-negotiable.',
                ].map((t, i) => (
                  <li key={i} className="flex items-start gap-2">
                    <span className="mt-1.5 text-amber-warm"><IconCheck size={12} /></span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div className="mt-5 text-[11px] text-white/40 leading-relaxed">
            Verdict generated by SpecEagle AI from verified spec data, public benchmark datasets (Geekbench, AnTuTu, 3DMark), and 23 first-party reviews. Last updated 18 May 2026 · <a href="#" onClick={(e) => e.preventDefault()} className="underline hover:text-white/70">methodology</a>
          </div>
        </div>
      </section>
    );
  };

  /* ---- C. Spec category breakdowns ---- */
  const SpecBreakdown = () => (
    <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-16">
      <div className="flex items-end justify-between mb-5">
        <h2 className="font-display font-semibold tracking-tighter2 text-[24px] sm:text-[28px] text-ink dark:text-white">
          Spec-by-spec breakdown
        </h2>
        <div className="hidden sm:flex items-center gap-3 text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
          <span className="inline-flex items-center gap-1.5"><span className="h-2 w-2 rounded-sm bg-win" /> Winner</span>
          <span className="inline-flex items-center gap-1.5"><span className="h-2 w-2 rounded-sm bg-line dark:bg-d-border" /> Tie</span>
        </div>
      </div>

      <div className="space-y-3">
        {SPEC_GROUPS.map((g) => {
          const isOpen = open[g.key];
          const aWins = g.rows.filter((r) => r.winner === 'a').length;
          const bWins = g.rows.filter((r) => r.winner === 'b').length;
          return (
            <div key={g.key} className="rounded-xl border border-line dark:border-d-border bg-paper dark:bg-d-surface overflow-hidden">
              <button
                onClick={() => setOpen((o) => ({ ...o, [g.key]: !o[g.key] }))}
                className="w-full px-5 py-4 flex items-center gap-3 hover:bg-paper-soft dark:hover:bg-d-bg transition"
              >
                <span className="flex items-center justify-center w-7 h-7 rounded-md bg-amber-brand/[0.08] dark:bg-amber-warm/[0.1] text-amber-brand dark:text-amber-warm">
                  {g.icon || <IconChevronRight size={13} />}
                </span>
                <span className="font-display font-semibold tracking-tighter2 text-ink dark:text-white text-[16px] flex-1 text-left">
                  {g.label}
                </span>
                <span className="hidden sm:flex items-center gap-3 text-[11px] font-mono uppercase tracking-wider">
                  <span className={`${aWins > bWins ? 'text-ink dark:text-white' : 'text-ink-soft dark:text-d-muted'}`}>A · {aWins}</span>
                  <span className="text-ink-soft dark:text-d-muted">/</span>
                  <span className={`${bWins > aWins ? 'text-amber-brand dark:text-amber-warm' : 'text-ink-soft dark:text-d-muted'}`}>B · {bWins}</span>
                </span>
                <span className="text-ink-soft dark:text-d-muted">
                  {isOpen ? <IconMinus size={14} /> : <IconPlus size={14} />}
                </span>
              </button>

              {isOpen && (
                <div className="border-t border-line dark:border-d-border">
                  {/* column header */}
                  <div className="hidden md:grid grid-cols-12 px-5 py-2.5 text-[10px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted border-b border-line dark:border-d-border bg-paper-soft/50 dark:bg-d-bg/50">
                    <div className="col-span-4">Attribute</div>
                    <div className="col-span-4">A · {PHONE_A.model}</div>
                    <div className="col-span-4">B · {PHONE_B.model}</div>
                  </div>
                  {g.rows.map((r, i) => (
                    <div key={i} className="grid grid-cols-1 md:grid-cols-12 px-5 py-3 border-b border-line dark:border-d-border last:border-b-0 gap-2 md:gap-0 items-center">
                      <div className="md:col-span-4 text-[12px] text-ink-soft dark:text-d-muted md:pr-4">
                        {r.k}
                      </div>
                      <SpecCell value={r.a} won={r.winner === 'a'} delta={r.winner === 'a' ? r.delta : null} side="A" />
                      <SpecCell value={r.b} won={r.winner === 'b'} delta={r.winner === 'b' ? r.delta : null} side="B" />
                    </div>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );

  /* ---- D. Benchmark visualizer ---- */
  const BenchmarkSection = () => {
    const maxes = BENCHMARKS.map((b) => Math.max(b.a, b.b));
    return (
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-16">
        <div className="flex items-end justify-between mb-5">
          <div>
            <h2 className="font-display font-semibold tracking-tighter2 text-[24px] sm:text-[28px] text-ink dark:text-white">
              Benchmarks
            </h2>
            <div className="mt-1 text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
              Median of 12 runs · 25°C ambient · stock firmware
            </div>
          </div>
        </div>

        <div className="rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface p-5 sm:p-7">
          <div className="space-y-6">
            {BENCHMARKS.map((b, i) => {
              const max = maxes[i];
              const aPct = (b.a / max) * 100;
              const bPct = (b.b / max) * 100;
              const aWins = b.a > b.b;
              const delta = Math.abs(((b.b - b.a) / b.a) * 100);
              return (
                <div key={b.name}>
                  <div className="flex items-baseline justify-between mb-2">
                    <div className="text-[13px] font-medium text-ink dark:text-white">{b.name}</div>
                    <div className="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
                      Δ <span className={aWins ? 'text-ink dark:text-white' : 'text-amber-brand dark:text-amber-warm'}>{delta.toFixed(1)}%</span>
                    </div>
                  </div>
                  {[
                    { v: b.a, pct: aPct, side: 'A', label: PHONE_A.model, wins: aWins },
                    { v: b.b, pct: bPct, side: 'B', label: PHONE_B.model, wins: !aWins },
                  ].map((row) => (
                    <div key={row.side} className="flex items-center gap-3 mb-1.5 last:mb-0">
                      <div className="w-8 text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{row.side}</div>
                      <div className="flex-1 relative h-2.5 bg-paper-soft dark:bg-d-bg rounded-sm overflow-hidden">
                        <div
                          className={`h-full ${row.wins ? 'bg-amber-brand dark:bg-amber-warm' : 'bg-ink/40 dark:bg-white/30'}`}
                          style={{ width: `${row.pct}%` }}
                        />
                      </div>
                      <div className="w-28 sm:w-32 text-right num text-[12px] tabular-nums text-ink dark:text-white">
                        {b.fmt(row.v)}{b.unit && <span className="text-ink-soft dark:text-d-muted ml-0.5">{b.unit}</span>}
                      </div>
                    </div>
                  ))}
                </div>
              );
            })}
          </div>

          <div className="mt-6 pt-5 border-t border-line dark:border-d-border flex items-center justify-between flex-wrap gap-2 text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
            <span>Sources: Geekbench Browser, AnTuTu Database, UL Solutions, DxOMark</span>
            <a href="#" onClick={(e) => e.preventDefault()} className="text-ink dark:text-white inline-flex items-center gap-1">Methodology <IconArrowRight size={11} /></a>
          </div>
        </div>
      </section>
    );
  };

  /* ---- E. Camera samples ---- */
  const CameraSamples = () => (
    <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-16">
      <div className="flex items-end justify-between mb-5">
        <h2 className="font-display font-semibold tracking-tighter2 text-[24px] sm:text-[28px] text-ink dark:text-white">
          Camera samples
        </h2>
        <div className="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
          Drag the slider · raw 100% crops
        </div>
      </div>

      {/* Big interactive comparison */}
      <div className="rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface overflow-hidden">
        <div className="relative aspect-[16/9] select-none">
          {/* B side full */}
          <div className="absolute inset-0 bg-gradient-to-br from-amber-brand/20 via-amber-brand/5 to-navy/40 dark:from-amber-warm/25 dark:via-amber-warm/5 dark:to-d-bg render-stripe" />
          <div className="absolute bottom-3 right-3 text-[10px] font-mono uppercase tracking-wider text-white/90 bg-ink/60 backdrop-blur px-2 py-1 rounded">B · {PHONE_B.model}</div>

          {/* A side, clipped */}
          <div
            className="absolute inset-0 overflow-hidden"
            style={{ clipPath: `inset(0 ${100 - sliderPos}% 0 0)` }}
          >
            <div className="absolute inset-0 bg-gradient-to-br from-navy/40 via-ink/10 to-amber-brand/10 dark:from-d-bg dark:via-white/5 dark:to-amber-warm/15 render-stripe" />
            <div className="absolute bottom-3 left-3 text-[10px] font-mono uppercase tracking-wider text-white/90 bg-ink/60 backdrop-blur px-2 py-1 rounded">A · {PHONE_A.model}</div>
          </div>

          {/* Caption placeholders */}
          <div className="absolute top-3 left-3 text-[10px] font-mono uppercase tracking-wider text-white/80 bg-ink/40 backdrop-blur px-2 py-1 rounded">
            [Sample 01 · Low-light · ISO 3200 · 1/30s]
          </div>

          {/* Divider + handle */}
          <div className="absolute inset-y-0" style={{ left: `${sliderPos}%` }}>
            <div className="w-px h-full bg-white/80 dark:bg-white" />
            <div className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 h-9 w-9 rounded-full bg-white border-2 border-ink shadow-md flex items-center justify-center">
              <IconChevronLeft size={12} className="text-ink" />
              <IconChevronRight size={12} className="text-ink -ml-1" />
            </div>
          </div>

          {/* Hidden input for slider */}
          <input
            type="range"
            min="0"
            max="100"
            value={sliderPos}
            onChange={(e) => setSliderPos(Number(e.target.value))}
            className="absolute inset-0 w-full h-full opacity-0 cursor-ew-resize"
            aria-label="Comparison slider"
          />
        </div>

        <div className="grid grid-cols-3 sm:grid-cols-4 divide-x divide-line dark:divide-d-border border-t border-line dark:border-d-border">
          {[
            { label: 'Low-light', detail: 'f/1.78 · 1/30s' },
            { label: 'Daylight', detail: 'f/1.7 · 1/2000s' },
            { label: 'Portrait', detail: '5× telephoto' },
            { label: '5× Zoom', detail: '120mm equiv.' },
          ].map((s, i) => (
            <button
              key={i}
              className={`p-3 flex flex-col items-start gap-1 text-left hover:bg-paper-soft dark:hover:bg-d-bg ${i === 0 ? 'bg-paper-soft dark:bg-d-bg' : ''}`}
            >
              <div className="text-[12px] font-medium text-ink dark:text-white">Sample {String(i + 1).padStart(2, '0')} · {s.label}</div>
              <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{s.detail}</div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );

  /* ---- F. Price & where to buy ---- */
  const regions = ['Global', 'US', 'ID', 'IN', 'EU'];
  const priceTable = {
    US: [
      { store: 'Apple Store',    a: '$1,199', b: null },
      { store: 'Samsung.com',    a: null,     b: '$1,299' },
      { store: 'Amazon',         a: '$1,179', b: '$1,249', badge: 'Lowest' },
      { store: 'Best Buy',       a: '$1,199', b: '$1,279' },
      { store: 'B&H Photo',      a: '$1,189', b: '$1,269' },
    ],
    Global: [
      { store: 'Apple Store',    a: '$1,199', b: null },
      { store: 'Samsung.com',    a: null,     b: '$1,299' },
      { store: 'Amazon',         a: '$1,179', b: '$1,249', badge: 'Lowest' },
    ],
    ID: [
      { store: 'iBox',           a: 'Rp 21,9 jt', b: null },
      { store: 'Samsung ID',     a: null,     b: 'Rp 23,9 jt' },
      { store: 'Tokopedia',      a: 'Rp 21,1 jt', b: 'Rp 22,8 jt', badge: 'Lowest' },
      { store: 'Shopee',         a: 'Rp 21,3 jt', b: 'Rp 23,0 jt' },
    ],
    IN: [
      { store: 'Apple India',    a: '₹1,44,900', b: null },
      { store: 'Samsung.in',     a: null,     b: '₹1,29,999' },
      { store: 'Amazon.in',      a: '₹1,42,500', b: '₹1,24,999', badge: 'Lowest' },
    ],
    EU: [
      { store: 'Apple EU',       a: '€1,479', b: null },
      { store: 'Samsung EU',     a: null,     b: '€1,499' },
      { store: 'Amazon DE',      a: '€1,439', b: '€1,449', badge: 'Lowest' },
    ],
  };

  const PriceSection = () => (
    <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-16">
      <div className="flex items-end justify-between mb-5">
        <h2 className="font-display font-semibold tracking-tighter2 text-[24px] sm:text-[28px] text-ink dark:text-white">
          Price & where to buy
        </h2>
        <div className="flex items-center gap-0.5 rounded-full border border-line dark:border-d-border bg-paper dark:bg-d-surface p-0.5">
          {regions.map((r) => (
            <button
              key={r}
              onClick={() => setRegion(r)}
              className={`px-2.5 py-1 text-[11px] font-mono uppercase tracking-wider rounded-full ${
                region === r
                  ? 'bg-ink text-white dark:bg-white dark:text-ink'
                  : 'text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white'
              }`}
            >{r}</button>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
        {/* Sparkline cards */}
        {[PHONE_A, PHONE_B].map((p, i) => (
          <div key={p.model} className="rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface p-5">
            <div className="flex items-center justify-between mb-1">
              <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">Side {i === 0 ? 'A' : 'B'} · 90-day price</div>
              <span className={`text-[10px] font-mono uppercase tracking-wider ${i === 0 ? 'text-win' : 'text-amber-brand dark:text-amber-warm'}`}>
                {i === 0 ? '↓ $20' : '↓ $50'}
              </span>
            </div>
            <div className="font-display font-semibold text-ink dark:text-white text-[16px]">{p.model}</div>
            <div className="mt-3 num text-[28px] font-semibold text-ink dark:text-white">{i === 0 ? '$1,179' : '$1,249'}</div>
            <div className="text-[12px] text-ink-soft dark:text-d-muted">vs MSRP {p.price}</div>

            {/* sparkline */}
            <div className="mt-4 h-16">
              <Sparkline accent={i === 0} />
            </div>
          </div>
        ))}

        {/* Currency converter / regional note */}
        <div className="rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface p-5">
          <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">Affiliate disclosure</div>
          <p className="mt-2 text-[13px] leading-relaxed text-ink dark:text-white">
            Prices update every 6 hours from 14 partner stores. SpecEagle earns a small commission on qualifying purchases — never on verdicts.
          </p>
          <a href="#" onClick={(e) => e.preventDefault()} className="mt-3 inline-flex items-center gap-1 text-[12px] font-medium text-amber-brand dark:text-amber-warm">
            How affiliate pricing works <IconArrowRight size={12} />
          </a>
        </div>
      </div>

      {/* Store rows */}
      <div className="mt-4 rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface overflow-hidden">
        <div className="hidden md:grid grid-cols-12 px-5 py-2.5 text-[10px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted border-b border-line dark:border-d-border bg-paper-soft/50 dark:bg-d-bg/50">
          <div className="col-span-4">Store</div>
          <div className="col-span-3">A · {PHONE_A.model}</div>
          <div className="col-span-3">B · {PHONE_B.model}</div>
          <div className="col-span-2 text-right">Action</div>
        </div>
        {(priceTable[region] || priceTable.US).map((row, i) => (
          <div key={i} className="grid grid-cols-1 md:grid-cols-12 px-5 py-3 items-center border-b border-line dark:border-d-border last:border-b-0">
            <div className="md:col-span-4 flex items-center gap-2 text-[14px] font-medium text-ink dark:text-white">
              {row.store}
              {row.badge && <span className="text-[10px] font-mono uppercase tracking-wider text-win bg-win/10 border border-win/20 px-1.5 py-0.5 rounded">{row.badge}</span>}
            </div>
            <div className="md:col-span-3 num text-[13px] text-ink dark:text-white">{row.a || <span className="text-ink-soft/50 dark:text-d-muted/50">—</span>}</div>
            <div className="md:col-span-3 num text-[13px] text-ink dark:text-white">{row.b || <span className="text-ink-soft/50 dark:text-d-muted/50">—</span>}</div>
            <div className="md:col-span-2 md:text-right">
              <a href="#" onClick={(e) => e.preventDefault()} className="inline-flex items-center gap-1 text-[12px] font-medium text-ink dark:text-white hover:text-amber-brand dark:hover:text-amber-warm">
                Go <IconArrowUpRight size={12} />
              </a>
            </div>
          </div>
        ))}
      </div>
    </section>
  );

  /* ---- G. Related comparisons ---- */
  const related = [
    'iPhone 16 Pro Max vs Pixel 9 Pro XL',
    'Galaxy S25 Ultra vs OnePlus 13',
    'iPhone 16 Pro Max vs iPhone 15 Pro Max',
    'Galaxy S25 Ultra vs Xiaomi 15 Ultra',
    'iPhone 16 Pro Max vs Galaxy Z Fold6',
    'Galaxy S25 Ultra vs Honor Magic 7 Pro',
  ];
  const RelatedSection = () => (
    <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-16">
      <div className="flex items-end justify-between mb-4">
        <h2 className="font-display font-semibold tracking-tighter2 text-[20px] sm:text-[22px] text-ink dark:text-white">
          Also compare
        </h2>
      </div>
      <div className="flex flex-wrap gap-2">
        {related.map((r) => (
          <a key={r} href="#" onClick={(e) => e.preventDefault()} className="inline-flex items-center gap-1.5 rounded-full border border-line dark:border-d-border bg-paper dark:bg-d-surface px-3.5 py-1.5 text-[12px] text-ink dark:text-white hover:border-amber-brand/50 dark:hover:border-amber-warm/40">
            {r}
            <IconArrowRight size={11} />
          </a>
        ))}
      </div>
    </section>
  );

  return (
    <main className="pb-32">
      <ComparisonHeader />
      <VerdictCard />
      <SpecBreakdown />
      <BenchmarkSection />
      <CameraSamples />
      <PriceSection />
      <RelatedSection />
    </main>
  );
};

/* ---- Spec cell ---- */
const SpecCell = ({ value, won, delta, side }) => (
  <div className={`md:col-span-4 flex items-center gap-2 md:pr-4`}>
    <span className="md:hidden text-[10px] font-mono uppercase tracking-wider text-ink-soft/70 dark:text-d-muted/70 w-4">{side}</span>
    <span className={`num text-[13px] ${won ? 'text-ink dark:text-white font-semibold' : 'text-ink-soft dark:text-d-muted'}`}>
      {value}
    </span>
    {won && (
      <span className="inline-flex items-center gap-1 rounded-sm bg-win/10 text-win dark:text-win-dark px-1.5 py-0.5 text-[10px] font-mono">
        <IconCheck size={10} />
        {delta || 'Winner'}
      </span>
    )}
  </div>
);

/* ---- Sparkline ---- */
const Sparkline = ({ accent }) => {
  // hand-shaped data points
  const data = accent
    ? [100, 102, 99, 101, 98, 100, 97, 96, 98, 95, 94, 95, 93, 92, 94, 92, 90]
    : [100, 99, 100, 98, 97, 99, 98, 96, 94, 95, 93, 92, 91, 90, 92, 89, 87];
  const max = Math.max(...data);
  const min = Math.min(...data);
  const w = 100;
  const h = 100;
  const stepX = w / (data.length - 1);
  const points = data.map((v, i) => {
    const x = i * stepX;
    const y = h - ((v - min) / (max - min)) * h;
    return `${x},${y}`;
  }).join(' ');
  const fillPoints = `0,${h} ${points} ${w},${h}`;
  const stroke = accent ? '#0A0A0A' : '#C8842B';
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" className="w-full h-full">
      <polygon points={fillPoints} className={accent ? 'fill-ink/10 dark:fill-white/10' : 'fill-amber-brand/15 dark:fill-amber-warm/20'} />
      <polyline points={points} fill="none" stroke={stroke} strokeWidth="1.5" className={accent ? 'stroke-ink dark:stroke-white' : 'stroke-amber-brand dark:stroke-amber-warm'} />
    </svg>
  );
};

Object.assign(window, { ComparisonPage });