/* Phone Detail Page — single-phone view */

const PhoneDetail = ({ setPage }) => {
  const [gallery, setGallery] = useState(0);
  const [openSpec, setOpenSpec] = useState({ display: true, camera: true, perf: false, battery: false, build: false, software: false, connect: false, audio: false });
  const [reviewTab, setReviewTab] = useState('pros');

  const phone = {
    brand: 'Apple',
    model: 'iPhone 16 Pro Max',
    tagline: 'The most refined Pro Max yet — and the one to beat for video.',
    released: 'Sep 2025',
    price: '$1,199',
    score: 91,
    colors: ['Desert Titanium', 'Black Titanium', 'White Titanium', 'Natural Titanium'],
    activeColor: 0,
  };

  const quickSpecs = [
    { k: 'Display',  v: '6.9" LTPO OLED' },
    { k: 'Chipset',  v: 'Apple A18 Pro' },
    { k: 'Memory',   v: '8 GB · 256 GB' },
    { k: 'Main cam', v: '48 MP · f/1.78' },
    { k: 'Battery',  v: '4,685 mAh' },
    { k: 'Weight',   v: '227 g' },
  ];

  const subscores = [
    { k: 'Display',     v: 94 },
    { k: 'Camera',      v: 92 },
    { k: 'Performance', v: 96 },
    { k: 'Battery',     v: 86 },
    { k: 'Build',       v: 95 },
    { k: 'Value',       v: 80 },
  ];

  const SPECS = [
    {
      key: 'display', label: 'Display', icon: <IconEye size={14} />,
      rows: [
        ['Type',          'LTPO Super Retina XDR OLED, 120 Hz, HDR10, Dolby Vision'],
        ['Size',          '6.9 inches (~91.9% screen-to-body ratio)'],
        ['Resolution',    '2,868 × 1,320 px (460 ppi)'],
        ['Peak brightness', '2,000 nits HBM · 2,000 nits peak'],
        ['Protection',    'Ceramic Shield, 2nd-gen'],
        ['Always-on',     'Yes, with dimmed clock + widgets'],
      ],
    },
    {
      key: 'camera', label: 'Camera', icon: <IconCamera size={14} />,
      rows: [
        ['Main',       '48 MP, f/1.78, 24mm, sensor-shift OIS, dual pixel PDAF'],
        ['Ultrawide',  '48 MP, f/2.2, 120° FoV'],
        ['Telephoto',  '12 MP, f/2.8, 5× optical, OIS'],
        ['Selfie',     '12 MP, f/1.9, autofocus'],
        ['Video',      '4K @ 24/30/60/120 fps · Dolby Vision · ProRes'],
        ['Features',   'Photographic Styles · Cinematic mode · Smart HDR 5'],
      ],
    },
    {
      key: 'perf', label: 'Performance', icon: <IconBolt size={14} />,
      rows: [
        ['Chipset',  'Apple A18 Pro (3 nm, 2nd gen TSMC N3E)'],
        ['CPU',      '6 cores (2 × 4.05 GHz P + 4 × 2.42 GHz E)'],
        ['GPU',      'Apple GPU (6-core, hardware-accelerated ray tracing)'],
        ['NPU',      '16-core Neural Engine, 35 TOPS'],
        ['RAM',      '8 GB LPDDR5X'],
        ['Storage',  '256 GB / 512 GB / 1 TB NVMe'],
      ],
    },
    {
      key: 'battery', label: 'Battery & Charging', icon: <IconBattery size={14} />,
      rows: [
        ['Capacity',     '4,685 mAh, Li-Ion, non-removable'],
        ['Wired',        '27 W USB-C PD 3.0'],
        ['Wireless',     '25 W MagSafe · 15 W Qi2'],
        ['Video playback', '33 hours (Apple claim)'],
        ['PCMark',       '14 h 32 m'],
      ],
    },
    {
      key: 'build', label: 'Build & Design', icon: <IconShield size={14} />,
      rows: [
        ['Dimensions', '163 × 77.6 × 8.3 mm'],
        ['Weight',     '227 g'],
        ['Frame',      'Grade-5 Titanium with bead-blasted finish'],
        ['Back',       'Textured matte glass'],
        ['IP rating',  'IP68 (6 m for 30 min)'],
      ],
    },
    {
      key: 'software', label: 'Software & Updates', icon: <IconRefresh size={14} />,
      rows: [
        ['OS at launch',     'iOS 18'],
        ['Major OS updates', '6+ years (Apple track record)'],
        ['On-device AI',     'Apple Intelligence (Genmoji, Writing Tools, Image Playground)'],
      ],
    },
    {
      key: 'connect', label: 'Connectivity',
      rows: [
        ['5G',   'Sub-6 + mmWave'],
        ['Wi-Fi','Wi-Fi 7 (802.11be)'],
        ['BT',   'Bluetooth 5.3'],
        ['UWB',  'Apple U2 chip (2nd gen)'],
        ['USB',  'USB-C, USB 3.2 Gen 2 (10 Gb/s)'],
      ],
    },
    {
      key: 'audio', label: 'Audio',
      rows: [
        ['Speakers',     'Stereo (earpiece + bottom-firing)'],
        ['Spatial audio','Dolby Atmos · Personalized Spatial Audio'],
      ],
    },
  ];

  const pros = [
    'Best-in-class video stabilization and Dolby Vision capture.',
    'Sustained gaming performance ahead of every Android peer.',
    'Six-plus years of major OS updates with day-one global rollout.',
    'Compact for a 6.9" device — titanium frame keeps weight reasonable.',
  ];
  const cons = [
    '27 W wired charging trails Android peers by a wide margin.',
    'Only 8 GB RAM — competitors ship 12 GB at the same tier.',
    'No periscope telephoto; 5× optical reach is the ceiling.',
    'Starting price stayed flat — no cheaper entry point.',
  ];

  const similar = [
    { name: 'iPhone 16 Pro', spec: '6.3" · A18 Pro · 4500 mAh', price: '$999', score: 90 },
    { name: 'iPhone 15 Pro Max', spec: '6.7" · A17 Pro · 4422 mAh', price: '$899', score: 87 },
    { name: 'Galaxy S25 Ultra', spec: '6.9" · SD 8 Elite · 5000 mAh', price: '$1,299', score: 89 },
    { name: 'Pixel 9 Pro XL',   spec: '6.8" · Tensor G4 · 5060 mAh', price: '$1,099', score: 88 },
  ];

  const benchmarks = [
    { name: 'AnTuTu v10',         a: 1752000, avg: 1620000, fmt: (n) => n.toLocaleString() },
    { name: 'Geekbench 6 Single', a: 3402,    avg: 2900,    fmt: (n) => n.toLocaleString() },
    { name: 'Geekbench 6 Multi',  a: 8420,    avg: 8100,    fmt: (n) => n.toLocaleString() },
    { name: '3DMark Solar Bay',   a: 70.2,    avg: 62.0,    fmt: (n) => n.toFixed(1) + ' fps' },
  ];

  /* ---- Sections ---- */
  return (
    <main className="pb-32">
      {/* Breadcrumb */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-6 flex items-center gap-1.5 text-[11px] font-mono uppercase tracking-[0.14em] text-ink-soft dark:text-d-muted">
        <button onClick={() => setPage('home')} className="hover:text-ink dark:hover:text-white">Home</button>
        <IconChevronRight size={10} />
        <button onClick={() => setPage('brand.apple')} className="hover:text-ink dark:hover:text-white">Apple</button>
        <IconChevronRight size={10} />
        <span className="text-ink dark:text-white">iPhone 16 Pro Max</span>
      </div>

      {/* Hero row */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-4">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
          {/* Gallery */}
          <div className="lg:col-span-6">
            <div className="rounded-3xl border border-line dark:border-d-border bg-paper dark:bg-d-surface p-6 sm:p-10 relative overflow-hidden">
              <div className="pointer-events-none absolute -top-8 -right-6 opacity-[0.04] dark:opacity-[0.06] text-ink dark:text-white">
                <EagleMark size={260} />
              </div>
              <div className="relative flex items-center justify-center min-h-[300px] sm:min-h-[400px]">
                <PhoneRender size="xl" tint={['amber', 'navy', 'neutral', 'neutral'][gallery]} />
              </div>
              <div className="mt-4 flex items-center justify-between">
                <div className="flex gap-2">
                  {[0, 1, 2, 3].map((i) => (
                    <button
                      key={i}
                      onClick={() => setGallery(i)}
                      className={`h-14 w-10 rounded-md border render-stripe ${
                        gallery === i
                          ? 'border-amber-brand dark:border-amber-warm'
                          : 'border-line dark:border-d-border opacity-50 hover:opacity-100'
                      }`}
                      aria-label={`View ${i + 1}`}
                    />
                  ))}
                </div>
                <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
                  {String(gallery + 1).padStart(2, '0')} / 04
                </div>
              </div>
            </div>
          </div>

          {/* Info */}
          <div className="lg:col-span-6">
            <div className="flex items-center gap-2 mb-3">
              <span className="text-[11px] font-mono uppercase tracking-[0.16em] text-amber-brand dark:text-amber-warm">{phone.brand}</span>
              <span className="text-[10px] font-mono text-ink-soft dark:text-d-muted">·</span>
              <span className="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">Flagship · Released {phone.released}</span>
            </div>
            <h1 className="font-display font-bold tracking-tightest text-ink dark:text-white text-[36px] sm:text-[48px] lg:text-[56px] leading-[0.98]">
              {phone.model}
            </h1>
            <p className="mt-4 text-[15px] sm:text-[16px] leading-relaxed text-ink-soft dark:text-d-muted max-w-xl text-wrap-pretty">
              {phone.tagline}
            </p>

            {/* Score + price */}
            <div className="mt-6 flex items-center gap-6 flex-wrap">
              <div className="flex items-baseline gap-1">
                <span className="num text-[44px] font-bold text-ink dark:text-white">{phone.score}</span>
                <span className="num text-[14px] text-ink-soft dark:text-d-muted">/ 100</span>
                <span className="ml-2 inline-flex items-center gap-1 rounded-full 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-2 py-0.5 text-[10px] font-mono uppercase tracking-wider">
                  <IconSparkle size={9} /> SpecEagle score
                </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-[24px] font-semibold text-ink dark:text-white">{phone.price}</div>
              </div>
            </div>

            {/* Color row */}
            <div className="mt-6">
              <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted mb-2">
                Color · {phone.colors[phone.activeColor]}
              </div>
              <div className="flex items-center gap-2">
                {[
                  '#9B8161', // desert titanium
                  '#3A3A3C',
                  '#F3F0E8',
                  '#83796A',
                ].map((c, i) => (
                  <button
                    key={i}
                    onClick={() => phone.activeColor = i}
                    className={`h-7 w-7 rounded-full border-2 ${i === phone.activeColor ? 'border-ink dark:border-white' : 'border-line dark:border-d-border'}`}
                    style={{ background: c }}
                    aria-label={phone.colors[i]}
                  />
                ))}
              </div>
            </div>

            {/* Action buttons */}
            <div className="mt-6 flex flex-wrap gap-2">
              <button className="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-ink text-white dark:bg-white dark:text-ink text-[13px] font-medium">
                Buy from $1,199 <IconArrowUpRight size={14} />
              </button>
              <button onClick={() => setPage('compare')} className="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-amber-brand text-white dark:bg-amber-warm dark:text-ink text-[13px] font-medium">
                <IconScale size={14} /> Compare
              </button>
              <button className="inline-flex items-center gap-1.5 px-3 py-2.5 rounded-xl border border-line dark:border-d-border text-ink dark:text-white text-[13px] font-medium">
                <IconBookmark size={14} /> Save
              </button>
              <button className="inline-flex items-center gap-1.5 px-3 py-2.5 rounded-xl border border-line dark:border-d-border text-ink dark:text-white text-[13px] font-medium">
                <IconShare size={14} />
              </button>
            </div>

            {/* Quick specs grid */}
            <div className="mt-8 grid grid-cols-2 sm:grid-cols-3 gap-x-6 gap-y-4 pt-6 border-t border-line dark:border-d-border">
              {quickSpecs.map((s) => <SmallStat key={s.k} {...s} />)}
            </div>
          </div>
        </div>
      </section>

      {/* AI Verdict snapshot — single phone version */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-16">
        <div className="rounded-3xl bg-ink dark:bg-d-surface text-white p-6 sm:p-8 relative overflow-hidden border border-ink dark:border-amber-warm">
          <div className="pointer-events-none absolute -top-6 -right-6 opacity-[0.06]">
            <EagleMark size={220} />
          </div>
          <div className="relative grid grid-cols-1 lg:grid-cols-12 gap-8">
            <div className="lg:col-span-7">
              <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 Snapshot
              </span>
              <h2 className="mt-4 font-display font-bold tracking-tightest text-[28px] sm:text-[36px] leading-[1]">
                A precision tool for the Apple-ecosystem buyer who still wants the best video on a phone.
              </h2>
              <p className="mt-4 text-[14px] leading-relaxed text-white/85 max-w-2xl text-wrap-pretty">
                Two generations of bigger sensors, refined haptics, and titanium have made the Pro Max what it should have been at launch in 2023. The A18 Pro pulls ahead on sustained loads; Apple Intelligence covers the AI-feature gap on paper. The two real weak points — charging speed and entry pricing — are the same ones you'd have flagged a year ago.
              </p>
            </div>
            <div className="lg:col-span-5">
              <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-white/50 mb-3">Subscores · 0–100</div>
              <div className="space-y-2.5">
                {subscores.map((s) => (
                  <div key={s.k}>
                    <div className="flex items-center justify-between mb-1 text-[12px]">
                      <span className="text-white/80">{s.k}</span>
                      <span className="num text-white">{s.v}</span>
                    </div>
                    <div className="h-1 rounded-full bg-white/10 overflow-hidden">
                      <div className={`h-full ${s.v >= 90 ? 'bg-amber-warm' : 'bg-white/70'}`} style={{ width: `${s.v}%` }} />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Pros/cons tabs */}
          <div className="relative mt-8 pt-6 border-t border-white/10">
            <div className="flex items-center gap-2 mb-4">
              <button
                onClick={() => setReviewTab('pros')}
                className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium border transition ${
                  reviewTab === 'pros'
                    ? 'bg-win/15 text-win-dark border-win/30'
                    : 'bg-white/5 text-white/60 border-white/15'
                }`}
              >
                <IconCheck size={12} /> Pros
              </button>
              <button
                onClick={() => setReviewTab('cons')}
                className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium border transition ${
                  reviewTab === 'cons'
                    ? 'bg-amber-warm/15 text-amber-warm border-amber-warm/30'
                    : 'bg-white/5 text-white/60 border-white/15'
                }`}
              >
                <IconX size={12} /> Cons
              </button>
              <button
                onClick={() => setPage('compare')}
                className="ml-auto inline-flex items-center gap-1 text-[12px] font-medium text-white/80 hover:text-white"
              >
                Compare vs S25 Ultra <IconArrowRight size={12} />
              </button>
            </div>
            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2.5">
              {(reviewTab === 'pros' ? pros : cons).map((t, i) => (
                <li key={i} className="flex items-start gap-2 text-[13.5px] text-white/85">
                  <span className={`mt-1 ${reviewTab === 'pros' ? 'text-win-dark' : 'text-amber-warm'}`}>
                    {reviewTab === 'pros' ? <IconCheck size={12} /> : <IconMinus size={12} />}
                  </span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* Full spec breakdown */}
      <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">
          <SectionTitle>Full specifications</SectionTitle>
          <button className="text-[12px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white inline-flex items-center gap-1">
            Expand all <IconChevronDown size={11} />
          </button>
        </div>
        <div className="space-y-3">
          {SPECS.map((g) => {
            const isOpen = openSpec[g.key];
            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={() => setOpenSpec((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="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{g.rows.length} fields</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">
                    {g.rows.map(([k, v], 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-1 md:gap-0">
                        <div className="md:col-span-4 text-[12px] text-ink-soft dark:text-d-muted md:pr-4">{k}</div>
                        <div className="md:col-span-8 num text-[13px] text-ink dark:text-white">{v}</div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </section>

      {/* Benchmarks vs class average */}
      <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>
            <SectionTitle>Benchmarks</SectionTitle>
            <div className="mt-1 text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
              vs 2025 flagship class average · median of 12 runs
            </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 = Math.max(b.a, b.avg);
              const pctThis = (b.a / max) * 100;
              const pctAvg = (b.avg / max) * 100;
              const delta = ((b.a - b.avg) / b.avg) * 100;
              return (
                <div key={i}>
                  <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">
                      Δ class avg <span className={delta > 0 ? 'text-win dark:text-win-dark' : 'text-amber-brand dark:text-amber-warm'}>{delta > 0 ? '+' : ''}{delta.toFixed(1)}%</span>
                    </div>
                  </div>
                  {[
                    { v: b.a, pct: pctThis, side: 'This',  accent: true },
                    { v: b.avg, pct: pctAvg, side: 'Class avg', accent: false },
                  ].map((row, j) => (
                    <div key={j} className="flex items-center gap-3 mb-1.5 last:mb-0">
                      <div className="w-20 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.accent ? 'bg-amber-brand dark:bg-amber-warm' : 'bg-ink/40 dark:bg-white/25'}`} style={{ width: `${row.pct}%` }} />
                      </div>
                      <div className="w-28 sm:w-36 text-right num text-[12px] text-ink dark:text-white">{b.fmt(row.v)}</div>
                    </div>
                  ))}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Reviews aggregator */}
      <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">
          <SectionTitle>Critics summary</SectionTitle>
          <span className="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">23 reviews aggregated</span>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {[
            { src: 'The Verge',         score: 9.0, quote: 'The most refined Pro Max yet — and the strongest argument for staying in the Apple ecosystem.', author: 'Allison Johnson' },
            { src: 'Wired',             score: 8.5, quote: 'Battery life and titanium build sell themselves; the question is whether Apple Intelligence will deliver the rest.', author: 'Julian Chokkattu' },
            { src: 'MKBHD',             score: 8.8, quote: 'Video shooters get the upgrade they\'ve been waiting for. Everyone else gets an incremental Pro Max.', author: 'Marques Brownlee' },
          ].map((r, i) => (
            <article key={i} 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-3">
                <div className="font-display font-semibold tracking-tighter2 text-[15px] text-ink dark:text-white">{r.src}</div>
                <ScorePill value={r.score} label="/10" tone="outline" />
              </div>
              <p className="text-[13.5px] leading-relaxed text-ink dark:text-white text-wrap-pretty">"{r.quote}"</p>
              <div className="mt-4 pt-4 border-t border-line dark:border-d-border flex items-center justify-between">
                <div className="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{r.author}</div>
                <a href="#" onClick={(e) => e.preventDefault()} className="text-[11px] font-mono uppercase tracking-wider text-ink dark:text-white hover:text-amber-brand dark:hover:text-amber-warm inline-flex items-center gap-1">
                  Read <IconArrowUpRight size={11} />
                </a>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* Similar phones */}
      <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">
          <SectionTitle>Similar phones</SectionTitle>
          <button onClick={() => setPage('compare')} className="text-[13px] font-medium text-ink dark:text-white inline-flex items-center gap-1">
            Compare side-by-side <IconScale size={13} />
          </button>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {similar.map((p, i) => (
            <button
              key={i}
              onClick={() => setPage('phones')}
              className="group text-left rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface p-4 hover:border-amber-brand/40 dark:hover:border-amber-warm/40 transition"
            >
              <div className="flex justify-center py-2">
                <PhoneRender size="md" tint={i % 2 ? 'amber' : 'neutral'} />
              </div>
              <div className="mt-2 flex items-center justify-between">
                <ScorePill value={p.score} label="" tone="outline" />
                <span className="num text-[13px] font-semibold text-ink dark:text-white">{p.price}</span>
              </div>
              <div className="mt-2 font-display font-semibold tracking-tighter2 text-[14px] text-ink dark:text-white">{p.name}</div>
              <div className="num text-[11px] text-ink-soft dark:text-d-muted">{p.spec}</div>
            </button>
          ))}
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { PhoneDetail });