/* Best Phones Page — curated rankings */

const BestPhones = ({ setPage, initialCategory = 'overall' }) => {
  const [category, setCategory] = useState(initialCategory);

  useEffect(() => {
    setCategory(initialCategory);
  }, [initialCategory]);

  const categories = [
    { k: 'overall',   label: 'Overall',     desc: 'Best phones, period — by aggregate spec score.' },
    { k: 'camera',    label: 'Camera',      desc: 'Best for photo and video, ranked by DxOMark + editorial.' },
    { k: 'gaming',    label: 'Gaming',      desc: 'Highest sustained frame rates and thermal headroom.' },
    { k: 'battery',   label: 'Battery',     desc: 'Longest real-world endurance with fastest charging.' },
    { k: 'value',     label: 'Value',       desc: 'Best specs-per-dollar across the global market.' },
    { k: 'foldable',  label: 'Foldables',   desc: 'Best folding phones across book and clamshell formats.' },
    { k: 'small',     label: 'Small',       desc: 'Best phones under 6.2" — increasingly rare.' },
    { k: 'budget',    label: 'Under $500',  desc: 'Best phones you can buy outright for less than $500.' },
  ];

  const rankings = {
    overall: [
      { rank: 1, name: 'iPhone 16 Pro Max',      brand: 'Apple',    score: 91, price: '$1,199', pros: 'Video, sustained perf, ecosystem',     cons: 'Slow charging, 8 GB RAM', tag: 'Editor\'s pick' },
      { rank: 2, name: 'Galaxy S25 Ultra',       brand: 'Samsung',  score: 90, price: '$1,299', pros: 'Camera reach, S Pen, 5,000 mAh',       cons: 'Heavy, Bixby still here',  tag: 'Premium' },
      { rank: 3, name: 'Pixel 9 Pro XL',         brand: 'Google',   score: 88, price: '$1,099', pros: 'Photography, AI features, 7-yr updates', cons: 'Tensor G4 trails in benchmarks', tag: 'Best for AI' },
      { rank: 4, name: 'OnePlus 13',             brand: 'OnePlus',  score: 87, price: '$899',   pros: '100 W charging, 6,000 mAh, SD 8 Elite', cons: 'OxygenOS bloat outside CN', tag: 'Best value flagship' },
      { rank: 5, name: 'Xiaomi 15 Ultra',        brand: 'Xiaomi',   score: 87, price: '$1,499', pros: 'Periscope + 1" main, Leica tuning',    cons: 'HyperOS still uneven',     tag: 'Photo flagship' },
      { rank: 6, name: 'iPhone 16 Pro',          brand: 'Apple',    score: 87, price: '$999',   pros: 'Pro Max specs in compact body',        cons: 'Smaller battery',          tag: 'Best compact pro' },
      { rank: 7, name: 'Honor Magic 7 Pro',      brand: 'Honor',    score: 85, price: '$1,099', pros: 'Telephoto reach, 6,100 mAh',           cons: 'EU/US availability spotty', tag: '' },
      { rank: 8, name: 'Vivo X200 Pro',          brand: 'Vivo',     score: 85, price: '$1,099', pros: 'Zeiss APO telephoto, charging',        cons: 'Limited Western release',  tag: '' },
      { rank: 9, name: 'OPPO Find X8 Pro',       brand: 'OPPO',     score: 84, price: '$999',   pros: 'Dual periscope, IP69',                 cons: 'Software gestures quirky', tag: '' },
      { rank: 10, name: 'Galaxy S25+',           brand: 'Samsung',  score: 83, price: '$999',   pros: 'Smaller, lighter Ultra alternative',   cons: 'No S Pen, lower-tier cameras', tag: '' },
    ],
    camera: [
      { rank: 1, name: 'Xiaomi 15 Ultra',     brand: 'Xiaomi',  score: 95, price: '$1,499', pros: '1" main + 200 MP periscope', cons: 'No US availability', tag: 'Editor\'s pick' },
      { rank: 2, name: 'Pixel 9 Pro XL',      brand: 'Google',  score: 94, price: '$1,099', pros: 'Best computational, Real Tone', cons: 'Slow processing pipeline', tag: '' },
      { rank: 3, name: 'iPhone 16 Pro Max',   brand: 'Apple',   score: 92, price: '$1,199', pros: 'Best video, Log + ProRes', cons: 'No periscope > 5×', tag: '' },
      { rank: 4, name: 'Vivo X200 Pro',       brand: 'Vivo',    score: 92, price: '$1,099', pros: 'Zeiss APO 200mm telephoto', cons: 'Skin tones too warm', tag: '' },
      { rank: 5, name: 'Galaxy S25 Ultra',    brand: 'Samsung', score: 91, price: '$1,299', pros: '200 MP main, 10× hybrid',   cons: 'Over-sharpened defaults', tag: '' },
    ],
    gaming: [
      { rank: 1, name: 'iPhone 16 Pro Max',   brand: 'Apple',     score: 93, price: '$1,199', pros: 'A18 Pro thermal headroom, RT', cons: 'No active cooling', tag: 'Editor\'s pick' },
      { rank: 2, name: 'OnePlus 13',          brand: 'OnePlus',   score: 92, price: '$899',   pros: 'SD 8 Elite + cooling system',  cons: 'Battery hot at sustained 120 fps', tag: '' },
      { rank: 3, name: 'ROG Phone 9 Pro',     brand: 'Asus',      score: 92, price: '$1,199', pros: 'Active cooling, triggers',     cons: 'Gamer styling not for everyone', tag: 'Best dedicated' },
      { rank: 4, name: 'Galaxy S25 Ultra',    brand: 'Samsung',   score: 89, price: '$1,299', pros: 'Vapor chamber, ray tracing',   cons: 'Throttles below S25+ surprisingly', tag: '' },
      { rank: 5, name: 'RedMagic 10 Pro',     brand: 'Nubia',     score: 88, price: '$799',   pros: 'Internal fan, 7,050 mAh',      cons: 'Software rough outside CN', tag: '' },
    ],
    battery: [
      { rank: 1, name: 'RedMagic 10 Pro',     brand: 'Nubia',     score: 96, price: '$799',   pros: '7,050 mAh, 100 W charging',    cons: 'Heavy, gamer styling',     tag: 'Endurance king' },
      { rank: 2, name: 'OnePlus 13',          brand: 'OnePlus',   score: 93, price: '$899',   pros: '6,000 mAh + 100 W',            cons: 'Wireless is only 50 W',    tag: '' },
      { rank: 3, name: 'Honor Magic 7 Pro',   brand: 'Honor',     score: 91, price: '$1,099', pros: '6,100 mAh silicon-carbon',     cons: 'EU/US support patchy',     tag: '' },
      { rank: 4, name: 'Galaxy S25 Ultra',    brand: 'Samsung',   score: 88, price: '$1,299', pros: '5,000 mAh + 45 W',             cons: 'Charging slower than peers', tag: '' },
      { rank: 5, name: 'iPhone 16 Pro Max',   brand: 'Apple',     score: 85, price: '$1,199', pros: 'Best video playback hours',    cons: '27 W is class-trailing',   tag: '' },
    ],
    value: [
      { rank: 1, name: 'OnePlus 13R',         brand: 'OnePlus',   score: 84, price: '$599',   pros: 'SD 8 Gen 3, 6,000 mAh',        cons: 'Plastic frame',            tag: 'Editor\'s pick' },
      { rank: 2, name: 'Poco F7 Pro',         brand: 'Xiaomi',    score: 83, price: '$499',   pros: 'Flagship SoC at mid price',    cons: 'HyperOS bloatware',        tag: '' },
      { rank: 3, name: 'Pixel 9a',            brand: 'Google',    score: 82, price: '$499',   pros: 'Pixel camera + 7-year updates', cons: 'Tensor G4 sustained perf',  tag: 'Best for camera' },
      { rank: 4, name: 'Nothing Phone 3a Pro',brand: 'Nothing',    score: 80, price: '$459',   pros: 'Design, periscope at this price', cons: 'SD 7s Gen 3 not flagship', tag: '' },
      { rank: 5, name: 'iPhone 15',           brand: 'Apple',     score: 79, price: '$699',   pros: 'A16, USB-C, dynamic island',   cons: '60 Hz display in 2026',    tag: '' },
    ],
    foldable: [
      { rank: 1, name: 'Galaxy Z Fold6',          brand: 'Samsung',  score: 88, price: '$1,899', pros: 'Best display, S Pen support',   cons: 'Crease still visible',        tag: 'Editor\'s pick' },
      { rank: 2, name: 'Pixel 9 Pro Fold',        brand: 'Google',   score: 86, price: '$1,799', pros: 'Best book-style aspect ratio',  cons: 'Tensor G4 thermals on fold',  tag: '' },
      { rank: 3, name: 'OnePlus Open',            brand: 'OnePlus',  score: 85, price: '$1,699', pros: 'Lightest 7" fold, Hasselblad',  cons: 'No US carrier support',       tag: 'Best lightweight' },
      { rank: 4, name: 'Honor Magic V3',          brand: 'Honor',    score: 84, price: '$1,799', pros: 'Thinnest book fold (9.2 mm)',    cons: 'Software gestures clunky',    tag: '' },
      { rank: 5, name: 'Galaxy Z Flip6',          brand: 'Samsung',  score: 82, price: '$1,099', pros: 'Best cover screen UX',          cons: 'Battery weak on flips',       tag: 'Best flip' },
    ],
    small: [
      { rank: 1, name: 'iPhone 16 Pro',       brand: 'Apple',     score: 87, price: '$999',   pros: '6.3", Pro Max specs',           cons: 'Smaller battery',           tag: 'Editor\'s pick' },
      { rank: 2, name: 'Galaxy S25',          brand: 'Samsung',   score: 84, price: '$799',   pros: '6.2" flat display',             cons: 'Smaller battery, lower camera', tag: '' },
      { rank: 3, name: 'Asus Zenfone 12',     brand: 'Asus',      score: 82, price: '$799',   pros: '5.9" + gimbal stabilization',    cons: 'Limited availability',      tag: 'True small' },
      { rank: 4, name: 'Pixel 9',             brand: 'Google',    score: 81, price: '$799',   pros: 'Compact 6.3", Pixel camera',    cons: 'Tensor G4 thermals',         tag: '' },
    ],
    budget: [
      { rank: 1, name: 'Pixel 9a',            brand: 'Google',    score: 82, price: '$499', pros: 'Pixel camera, 7-yr updates',   cons: 'Plastic build',          tag: 'Editor\'s pick' },
      { rank: 2, name: 'Poco F7 Pro',         brand: 'Xiaomi',    score: 83, price: '$499', pros: 'Flagship SoC',                 cons: 'HyperOS rough',         tag: 'Best perf' },
      { rank: 3, name: 'Nothing Phone 3a Pro',brand: 'Nothing',   score: 80, price: '$459', pros: 'Glyph design, periscope',      cons: 'Mid SoC',                tag: '' },
      { rank: 4, name: 'Samsung Galaxy A55',  brand: 'Samsung',   score: 75, price: '$399', pros: '7 years of updates',           cons: 'Plastic, dimmer screen', tag: '' },
    ],
  };

  const current = rankings[category] || rankings.overall;
  const meta = categories.find((c) => c.k === category);
  const top = current[0];

  return (
    <main className="pb-32">
      {/* Hero */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-12 sm:pt-16">
        <SectionEyebrow>Best phones · May 2026</SectionEyebrow>
        <SectionTitle size="xxl" className="mt-3">
          The 50 phones<br />worth knowing about.
        </SectionTitle>
        <p className="mt-5 max-w-2xl text-[15px] sm:text-[16px] leading-relaxed text-ink-soft dark:text-d-muted">
          Updated weekly. Rankings combine SpecEagle aggregate scores (60%), benchmark medians (20%), and editorial review consensus (20%) — no paid placement, no affiliate tiebreakers.
        </p>

        <div className="mt-8 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"><IconRefresh size={11} /> Last refresh · 17 May 2026</span>
          <span className="opacity-40">·</span>
          <span>Next refresh in 4 days</span>
          <span className="opacity-40">·</span>
          <a href="#" onClick={(e) => e.preventDefault()} className="text-amber-brand dark:text-amber-warm hover:underline">Methodology</a>
        </div>
      </section>

      {/* Category nav */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-10">
        <div className="overflow-x-auto no-scrollbar -mx-4 px-4">
          <div className="flex items-center gap-2 pb-1 min-w-max">
            {categories.map((c) => (
              <button
                key={c.k}
                onClick={() => setCategory(c.k)}
                className={`px-3.5 py-2 rounded-full text-[12px] font-medium border whitespace-nowrap transition ${
                  category === c.k
                    ? 'bg-ink text-white border-ink dark:bg-white dark:text-ink dark:border-white'
                    : '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'
                }`}
              >
                {c.label}
              </button>
            ))}
          </div>
        </div>
        <div className="mt-3 text-[13px] text-ink-soft dark:text-d-muted">{meta.desc}</div>
      </section>

      {/* Editor's pick — large card */}
      <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-paper dark:bg-d-surface overflow-hidden">
          <div className="grid grid-cols-1 lg:grid-cols-12">
            <div className="lg:col-span-5 relative bg-paper-soft dark:bg-d-bg p-8 sm:p-10 flex items-center justify-center min-h-[280px]">
              <div className="pointer-events-none absolute top-4 right-4 opacity-[0.05] dark:opacity-[0.08] text-ink dark:text-white">
                <EagleMark size={160} />
              </div>
              <PhoneRender size="xl" tint="amber" />
              <div className="absolute top-6 left-6 inline-flex items-center gap-1.5 rounded-full bg-ink text-white dark:bg-amber-warm dark:text-ink px-2.5 py-1 text-[10px] font-mono uppercase tracking-[0.16em]">
                <IconStar size={11} /> Editor's pick · #{top.rank}
              </div>
            </div>
            <div className="lg:col-span-7 p-6 sm:p-10">
              <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-amber-brand dark:text-amber-warm">{top.brand}</div>
              <h2 className="mt-2 font-display font-bold tracking-tightest text-[32px] sm:text-[44px] leading-[0.98] text-ink dark:text-white">
                {top.name}
              </h2>
              <p className="mt-4 text-[15px] leading-relaxed text-ink-soft dark:text-d-muted max-w-2xl">
                Wins the {meta.label.toLowerCase()} category for the third consecutive update. {top.pros}. The trade-off: {top.cons.toLowerCase()}.
              </p>
              <div className="mt-6 flex items-center gap-6 flex-wrap">
                <div className="flex items-baseline gap-1">
                  <span className="num text-[40px] font-bold text-ink dark:text-white">{top.score}</span>
                  <span className="num text-[12px] text-ink-soft dark:text-d-muted">/ 100</span>
                </div>
                <div>
                  <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">{top.price}</div>
                </div>
              </div>
              <div className="mt-6 flex flex-wrap gap-2">
                <button onClick={() => setPage('phones')} className="px-4 py-2.5 rounded-xl bg-ink text-white dark:bg-white dark:text-ink text-[13px] font-medium inline-flex items-center gap-1.5">
                  Full review <IconArrowRight size={13} />
                </button>
                <button onClick={() => setPage('compare')} className="px-4 py-2.5 rounded-xl bg-amber-brand text-white dark:bg-amber-warm dark:text-ink text-[13px] font-medium inline-flex items-center gap-1.5">
                  <IconScale size={13} /> Compare with...
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Ranking list */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-12">
        <div className="flex items-end justify-between mb-5">
          <SectionTitle size="lg">The full ranking</SectionTitle>
          <div className="hidden sm:flex items-center gap-2 text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
            Sort by:
            <button className="text-ink dark:text-white inline-flex items-center gap-1">Score <IconChevronDown size={10} /></button>
          </div>
        </div>

        <div className="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 gap-3 px-5 py-2.5 bg-paper-soft dark:bg-d-bg/50 border-b border-line dark:border-d-border text-[10px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted">
            <div className="col-span-1">Rank</div>
            <div className="col-span-3">Phone</div>
            <div className="col-span-2">Best for</div>
            <div className="col-span-3">Watch out</div>
            <div className="col-span-1 text-right">Score</div>
            <div className="col-span-2 text-right">Price · Action</div>
          </div>
          {current.map((p, i) => (
            <div key={p.rank} className="grid grid-cols-1 md:grid-cols-12 gap-3 px-5 py-4 items-center border-b border-line dark:border-d-border last:border-b-0 hover:bg-paper-soft/60 dark:hover:bg-d-bg/40 transition">
              <div className="md:col-span-1 flex items-center gap-2">
                <span className="num text-[20px] font-bold text-ink dark:text-white">{String(p.rank).padStart(2, '0')}</span>
                {p.rank === 1 && <IconStar size={12} className="text-amber-brand dark:text-amber-warm" />}
              </div>
              <div className="md:col-span-3 flex items-center gap-3">
                <div className="hidden sm:block"><PhoneRender size="sm" tint={i % 2 ? 'amber' : 'neutral'} /></div>
                <div>
                  <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{p.brand}</div>
                  <button onClick={() => setPage('phones')} className="font-display font-semibold tracking-tighter2 text-[15px] text-ink dark:text-white text-left hover:text-amber-brand dark:hover:text-amber-warm">{p.name}</button>
                  {p.tag && (
                    <div className="mt-1 inline-flex items-center rounded-sm bg-amber-brand/10 dark:bg-amber-warm/10 text-amber-brand dark:text-amber-warm border border-amber-brand/20 dark:border-amber-warm/20 px-1.5 py-0.5 text-[9px] font-mono uppercase tracking-wider">
                      {p.tag}
                    </div>
                  )}
                </div>
              </div>
              <div className="md:col-span-2 text-[12.5px] text-ink dark:text-white">{p.pros}</div>
              <div className="md:col-span-3 text-[12.5px] text-ink-soft dark:text-d-muted">{p.cons}</div>
              <div className="md:col-span-1 md:text-right">
                <span className={`num text-[20px] font-bold ${p.score >= 90 ? 'text-amber-brand dark:text-amber-warm' : 'text-ink dark:text-white'}`}>{p.score}</span>
              </div>
              <div className="md:col-span-2 md:text-right flex md:flex-col items-start md:items-end gap-2">
                <span className="num text-[14px] font-semibold text-ink dark:text-white">{p.price}</span>
                <button onClick={() => setPage('phones')} className="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted hover:text-amber-brand dark:hover:text-amber-warm inline-flex items-center gap-1">
                  View <IconArrowRight size={11} />
                </button>
              </div>
            </div>
          ))}
        </div>

        {/* Show more */}
        <div className="mt-4 flex items-center justify-center">
          <button className="px-4 py-2.5 rounded-xl border border-line dark:border-d-border text-[13px] font-medium text-ink dark:text-white hover:border-amber-brand dark:hover:border-amber-warm">
            Show next 40 phones
          </button>
        </div>
      </section>

      {/* Methodology footnote */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-16">
        <div className="rounded-2xl border border-line dark:border-d-border bg-paper-soft dark:bg-d-surface p-6">
          <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted">Methodology · in brief</div>
          <p className="mt-3 text-[13.5px] leading-relaxed text-ink dark:text-white max-w-3xl">
            Each phone receives a 0–100 SpecEagle score derived from 14 weighted spec categories, normalized against the 2025–2026 flagship class. Benchmark medians (AnTuTu, Geekbench 6, 3DMark) contribute 20%; editorial review consensus from 23 trusted outlets contributes the final 20%. Rankings update every 14 days or within 24 hours of a major firmware revision. <a href="#" onClick={(e) => e.preventDefault()} className="text-amber-brand dark:text-amber-warm font-medium">Full methodology →</a>
          </p>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { BestPhones });
