/* News Page — featured article + recent index */

const News = ({ setPage }) => {
  const [tab, setTab] = useState('latest');

  const tabs = [
    { k: 'latest',  label: 'Latest' },
    { k: 'launches',label: 'Launches' },
    { k: 'leaks',   label: 'Leaks & rumors' },
    { k: 'reviews', label: 'First impressions' },
    { k: 'industry',label: 'Industry' },
  ];

  const featured = {
    eyebrow: 'Hands-on · Galaxy S26 Ultra prototype',
    title: 'Samsung\'s S26 Ultra prototype walks back the S Pen, doubles down on titanium.',
    summary: 'A leaked engineering sample seen at a regional distributor briefing shows Samsung quietly making the most controversial trade of the Ultra line\'s history — and the case it builds for doing so is more convincing than expected.',
    author: 'Tara Lim',
    role: 'Senior reporter, devices',
    date: 'May 18, 2026',
    read: '7 min read',
    tag: 'EXCLUSIVE',
  };

  const articles = [
    { tag: 'launch',     title: 'Xiaomi 16 Pro launches with 1" main sensor and Leica APO telephoto', summary: 'The headline upgrade is a second-gen 1-inch sensor jointly developed with Sony, but the real story is the new pixel-binning pipeline.', author: 'Wira Putra',    read: '4 min', date: '18 May 2026' },
    { tag: 'leak',       title: 'iPhone 17 Air leak: 5.5 mm at the thinnest point, single-camera back',   summary: 'New CAD drawings show Apple is committing to the thin-and-light bet for the late-2026 lineup expansion.',                                                  author: 'David Chen',    read: '3 min', date: '17 May 2026' },
    { tag: 'industry',   title: 'EU finalizes universal battery-swap standard for 2027 phones',           summary: 'After two years of consultation, the EU Council adopted the Removable Battery Directive — and it has real teeth this time.',                                  author: 'Sara Müller',   read: '6 min', date: '17 May 2026' },
    { tag: 'hands-on',   title: 'Honor Magic 8 Pro hands-on: silicon-carbon batteries hit 7,500 mAh',     summary: 'Three weeks with the engineering sample says the trade-offs are smaller than expected — but charging is the surprise standout.',                                author: 'Linh Tran',     read: '8 min', date: '16 May 2026' },
    { tag: 'review',     title: 'Pixel 9a long-term review: the quiet best-value phone of the year',     summary: 'Six months in. Real-world camera performance, thermal behavior, and what those Pixel updates actually delivered.',                                              author: 'Jamal Hassan',  read: '12 min', date: '16 May 2026' },
    { tag: 'industry',   title: 'TSMC begins risk production on N2 — what it means for 2027 phones',     summary: 'The 2-nanometer node moves from research to risk production. Here\'s the realistic timeline for when 2 nm chips ship in phones.',                              author: 'David Chen',    read: '5 min', date: '15 May 2026' },
    { tag: 'launch',     title: 'OnePlus 13T announced as a 6.3" flagship with full 13 specs',           summary: 'A smaller form factor with no spec compromises — except battery, which drops to a still-class-leading 5,500 mAh.',                                              author: 'Wira Putra',    read: '4 min', date: '15 May 2026' },
    { tag: 'leak',       title: 'Galaxy Z Fold7 prototype crease "essentially invisible" in new tests',  summary: 'Korean trade publication ETNews reports the next-gen hinge has tested at sub-0.1 mm crease depth in lab conditions.',                                            author: 'Tara Lim',      read: '3 min', date: '14 May 2026' },
  ];

  const tagColors = {
    launch:   'bg-amber-brand/10 dark:bg-amber-warm/10 text-amber-brand dark:text-amber-warm border-amber-brand/20 dark:border-amber-warm/20',
    leak:     'bg-navy/10 dark:bg-white/10 text-navy dark:text-white border-navy/20 dark:border-white/20',
    industry: 'bg-paper-soft dark:bg-d-bg text-ink dark:text-white border-line dark:border-d-border',
    review:   'bg-win/10 text-win dark:text-win-dark border-win/20',
    'hands-on': 'bg-amber-brand/10 dark:bg-amber-warm/10 text-amber-brand dark:text-amber-warm border-amber-brand/20 dark:border-amber-warm/20',
  };

  return (
    <main className="pb-32">
      {/* Hero / featured article */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-10 sm:pt-14">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
          <div className="lg:col-span-7">
            <div className="flex items-center gap-2 mb-4">
              <span className="inline-flex items-center gap-1 rounded-sm bg-ink text-white dark:bg-amber-warm dark:text-ink px-1.5 py-0.5 text-[10px] font-mono uppercase tracking-[0.16em]">
                {featured.tag}
              </span>
              <span className="text-[11px] font-mono uppercase tracking-[0.16em] text-amber-brand dark:text-amber-warm">{featured.eyebrow}</span>
            </div>
            <h1 className="font-display font-bold tracking-tightest text-ink dark:text-white text-[32px] sm:text-[48px] lg:text-[56px] leading-[0.98]">
              {featured.title}
            </h1>
            <p className="mt-5 text-[15px] sm:text-[17px] leading-relaxed text-ink-soft dark:text-d-muted max-w-2xl text-wrap-pretty">
              {featured.summary}
            </p>
            <div className="mt-6 flex items-center gap-4 text-[12px]">
              <div className="flex items-center gap-2">
                <div className="h-8 w-8 rounded-full bg-amber-brand/20 dark:bg-amber-warm/20 flex items-center justify-center text-amber-brand dark:text-amber-warm font-display font-bold text-[12px]">
                  {featured.author.split(' ').map((s) => s[0]).join('')}
                </div>
                <div>
                  <div className="font-medium text-ink dark:text-white">{featured.author}</div>
                  <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{featured.role}</div>
                </div>
              </div>
              <span className="text-line dark:text-d-border">|</span>
              <span className="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{featured.date} · {featured.read}</span>
            </div>
            <div className="mt-6 flex 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">
                Read story <IconArrowRight size={14} />
              </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>
            </div>
          </div>

          {/* Hero render */}
          <div className="lg:col-span-5">
            <div className="rounded-3xl border border-line dark:border-d-border bg-paper-soft dark:bg-d-surface aspect-[4/5] relative overflow-hidden render-stripe">
              <div className="absolute inset-0 flex items-center justify-center">
                <PhoneRender size="xl" tint="amber" />
              </div>
              <div className="absolute top-4 right-4 inline-flex items-center gap-1.5 rounded-full bg-ink/80 dark:bg-d-bg/80 text-white backdrop-blur px-2.5 py-1 text-[10px] font-mono uppercase tracking-wider">
                <IconCamera size={11} /> Engineering sample
              </div>
              <div className="absolute bottom-4 left-4 right-4 text-[10px] font-mono uppercase tracking-wider text-white/80 bg-ink/40 backdrop-blur px-2.5 py-1.5 rounded">
                [Lead photo · 8.4mp · field-shot · 2026-05-15]
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Tabs */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-12 border-b border-line dark:border-d-border">
        <div className="flex items-center gap-6 overflow-x-auto no-scrollbar">
          {tabs.map((t) => {
            const active = tab === t.k;
            return (
              <button
                key={t.k}
                onClick={() => setTab(t.k)}
                className={`relative pb-3 text-[14px] font-medium whitespace-nowrap transition ${
                  active ? 'text-ink dark:text-white' : 'text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white'
                }`}
              >
                {t.label}
                {active && <span className="absolute left-0 right-0 -bottom-px h-0.5 bg-amber-brand dark:bg-amber-warm" />}
              </button>
            );
          })}
          <div className="ml-auto pb-3 flex items-center gap-2 text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
            <IconRefresh size={11} /> 12 new today
          </div>
        </div>
      </section>

      {/* Article grid */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-8 grid grid-cols-1 lg:grid-cols-12 gap-8">
        {/* Main column — articles */}
        <div className="lg:col-span-8 space-y-px bg-line dark:bg-d-border rounded-2xl border border-line dark:border-d-border overflow-hidden">
          {articles.slice(0, 6).map((a, i) => (
            <article key={i} className="bg-paper dark:bg-d-surface p-5 sm:p-6 hover:bg-paper-soft dark:hover:bg-d-bg transition cursor-pointer group">
              <div className="grid grid-cols-1 sm:grid-cols-12 gap-4 items-start">
                <div className="hidden sm:block sm:col-span-3">
                  <div className="render-stripe rounded-lg border border-line dark:border-d-border h-28 w-full bg-paper-soft dark:bg-d-bg flex items-center justify-center">
                    <PhoneRender size="sm" tint={i % 3 === 0 ? 'amber' : i % 3 === 1 ? 'navy' : 'neutral'} />
                  </div>
                </div>
                <div className="sm:col-span-9">
                  <div className="flex items-center gap-2 mb-2">
                    <span className={`inline-flex items-center rounded-sm border px-1.5 py-0.5 text-[10px] font-mono uppercase tracking-wider ${tagColors[a.tag] || tagColors.industry}`}>
                      {a.tag}
                    </span>
                    <span className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{a.date} · {a.read}</span>
                  </div>
                  <h3 className="font-display font-bold tracking-tighter2 text-ink dark:text-white text-[18px] sm:text-[20px] leading-snug group-hover:text-amber-brand dark:group-hover:text-amber-warm transition">
                    {a.title}
                  </h3>
                  <p className="mt-2 text-[13.5px] leading-relaxed text-ink-soft dark:text-d-muted max-w-2xl">
                    {a.summary}
                  </p>
                  <div className="mt-3 flex items-center justify-between">
                    <div className="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">By {a.author}</div>
                    <span className="text-[12px] font-medium text-ink dark:text-white inline-flex items-center gap-1 group-hover:text-amber-brand dark:group-hover:text-amber-warm">
                      Read <IconArrowRight size={11} />
                    </span>
                  </div>
                </div>
              </div>
            </article>
          ))}

          <div className="bg-paper dark:bg-d-surface p-5 flex items-center justify-center">
            <button className="px-4 py-2 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">
              Load older stories
            </button>
          </div>
        </div>

        {/* Right rail */}
        <aside className="lg:col-span-4 space-y-6">
          {/* Most read */}
          <div className="rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface p-5">
            <div className="flex items-center gap-2 mb-4">
              <IconTrendUp size={14} className="text-amber-brand dark:text-amber-warm" />
              <span className="text-[11px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted">Most read this week</span>
            </div>
            <ol className="space-y-4">
              {articles.slice(0, 5).map((a, i) => (
                <li key={i} className="flex gap-3 group cursor-pointer">
                  <span className="num text-[24px] font-bold leading-none text-amber-brand dark:text-amber-warm shrink-0">{String(i + 1).padStart(2, '0')}</span>
                  <div className="flex-1 min-w-0">
                    <div className="text-[13px] font-display font-semibold tracking-tighter2 text-ink dark:text-white leading-snug group-hover:text-amber-brand dark:group-hover:text-amber-warm transition line-clamp-3">
                      {a.title}
                    </div>
                    <div className="mt-1 text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{a.date}</div>
                  </div>
                </li>
              ))}
            </ol>
          </div>

          {/* Newsletter */}
          <div className="rounded-2xl border-2 border-ink dark:border-amber-warm bg-paper dark:bg-d-surface p-5 relative overflow-hidden">
            <div className="pointer-events-none absolute -top-4 -right-4 opacity-10 text-ink dark:text-white">
              <EagleMark size={110} />
            </div>
            <div className="relative">
              <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-amber-brand dark:text-amber-warm">The Brief</div>
              <h3 className="mt-1 font-display font-bold tracking-tightest text-[22px] text-ink dark:text-white leading-tight">
                The phone news that matters, weekly.
              </h3>
              <p className="mt-2 text-[12.5px] leading-relaxed text-ink-soft dark:text-d-muted">
                5-minute Friday digest. 142,000 readers. No fluff, no carrier promos.
              </p>
              <div className="mt-4 flex items-center gap-2 rounded-lg border border-line dark:border-d-border bg-paper-soft dark:bg-d-bg px-3 py-2">
                <input placeholder="you@email.com" className="flex-1 min-w-0 bg-transparent text-[13px] outline-none" />
                <button className="px-2.5 py-1 rounded-md bg-ink text-white dark:bg-white dark:text-ink text-[12px] font-medium">Subscribe</button>
              </div>
              <div className="mt-3 flex items-center gap-2 text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
                <span>● Free</span>
                <span>● Unsubscribe any time</span>
              </div>
            </div>
          </div>

          {/* Compare prompt */}
          <button onClick={() => setPage('compare')} className="w-full rounded-2xl border border-line dark:border-d-border bg-paper-soft dark:bg-d-surface p-5 text-left hover:border-amber-brand/40 dark:hover:border-amber-warm/40 transition group">
            <IconScale size={20} className="text-amber-brand dark:text-amber-warm" />
            <div className="mt-3 font-display font-semibold tracking-tighter2 text-[16px] text-ink dark:text-white leading-snug">
              Reading about a phone? Get the verdict.
            </div>
            <div className="mt-1 text-[12.5px] text-ink-soft dark:text-d-muted">
              Compare any two phones and read the AI verdict in 30 seconds.
            </div>
            <div className="mt-3 text-[12px] font-medium text-ink dark:text-white group-hover:text-amber-brand dark:group-hover:text-amber-warm inline-flex items-center gap-1">
              Open compare <IconArrowRight size={11} />
            </div>
          </button>
        </aside>
      </section>
    </main>
  );
};

Object.assign(window, { News });