/* SpecEagle — Homepage */

const Homepage = ({ setPage }) => {
  const { t } = useLang();
  const [compareOpen, setCompareOpen] = useState(false);

  /* ---- Hero ---- */
  const Hero = () => (
    <section className="relative overflow-hidden">
      {/* faint eagle watermark */}
      <div className="pointer-events-none absolute top-6 right-4 sm:right-10 lg:right-20 opacity-[0.04] dark:opacity-[0.06] text-ink dark:text-white">
        <EagleMark size={360} />
      </div>
      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-16 sm:pt-24 pb-12">
        <div className="max-w-3xl">
          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-line dark:border-d-border bg-paper-soft dark:bg-d-surface px-2.5 py-1">
            <span className="relative flex h-1.5 w-1.5">
              <span className="absolute inset-0 rounded-full bg-amber-brand dark:bg-amber-warm animate-ping opacity-50" />
              <span className="relative rounded-full h-1.5 w-1.5 bg-amber-brand dark:bg-amber-warm" />
            </span>
            <span className="text-[11px] font-mono uppercase tracking-[0.14em] text-ink-soft dark:text-d-muted">
              AI Verdict engine · live
            </span>
          </div>
          <h1 className="font-display font-bold tracking-tightest text-ink dark:text-white text-[42px] sm:text-[64px] lg:text-[78px] leading-[0.95]">
            {t('hero.title1')}
            <br />
            <span className="text-amber-brand dark:text-amber-warm">{t('hero.title2')}</span>
          </h1>
          <p className="mt-5 max-w-xl text-[15px] sm:text-[17px] leading-relaxed text-ink-soft dark:text-d-muted">
            {t('hero.subtitle')}
          </p>

          {/* Search */}
          <div className="mt-8 max-w-2xl">
            <div className="group relative flex items-center rounded-2xl border-2 border-ink dark:border-white bg-paper dark:bg-d-surface focus-within:border-amber-brand dark:focus-within:border-amber-warm transition">
              <span className="pl-4 pr-2 text-ink dark:text-white">
                <IconSearch size={20} />
              </span>
              <input
                placeholder={t('hero.search')}
                className="flex-1 min-w-0 bg-transparent py-4 pr-3 text-[15px] sm:text-[17px] outline-none placeholder:text-ink-soft/70 dark:placeholder:text-d-muted/70"
              />
              <kbd className="hidden sm:flex items-center mr-2 px-2 py-1 rounded-md bg-paper-soft dark:bg-d-bg text-[11px] font-mono text-ink-soft dark:text-d-muted border border-line dark:border-d-border">/</kbd>
              <button className="m-1.5 px-4 py-2.5 rounded-xl bg-ink text-white dark:bg-white dark:text-ink text-[13px] font-medium flex items-center gap-1.5">
                {t('hero.searchBtn')}
                <IconArrowRight size={14} />
              </button>
            </div>

            {/* Secondary CTA reveal */}
            <div className="mt-3">
              {!compareOpen ? (
                <button
                  onClick={() => setCompareOpen(true)}
                  className="text-[13px] text-ink-soft dark:text-d-muted hover:text-amber-brand dark:hover:text-amber-warm inline-flex items-center gap-1.5"
                >
                  <IconScale size={14} />
                  {t('hero.orCompare')}
                  <IconArrowRight size={12} />
                </button>
              ) : (
                <div className="mt-2 flex flex-col sm:flex-row gap-2">
                  <div className="flex-1 flex items-center gap-2 rounded-xl border border-line dark:border-d-border bg-paper dark:bg-d-surface px-3 py-2.5">
                    <span className="text-[10px] font-mono uppercase tracking-wider text-amber-brand dark:text-amber-warm">A</span>
                    <input
                      autoFocus
                      defaultValue="iPhone 16 Pro Max"
                      className="flex-1 min-w-0 bg-transparent text-[14px] outline-none"
                    />
                  </div>
                  <span className="self-center font-mono text-[11px] text-ink-soft dark:text-d-muted">vs</span>
                  <div className="flex-1 flex items-center gap-2 rounded-xl border border-line dark:border-d-border bg-paper dark:bg-d-surface px-3 py-2.5">
                    <span className="text-[10px] font-mono uppercase tracking-wider text-amber-brand dark:text-amber-warm">B</span>
                    <input
                      defaultValue="Galaxy S25 Ultra"
                      className="flex-1 min-w-0 bg-transparent text-[14px] outline-none"
                    />
                  </div>
                  <button className="px-4 py-2.5 rounded-xl bg-amber-brand text-white text-[13px] font-medium inline-flex items-center justify-center gap-1.5">
                    Get verdict <IconArrowRight size={14} />
                  </button>
                </div>
              )}
            </div>

            {/* trust microcopy */}
            <div className="mt-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-[11px] font-mono uppercase tracking-[0.12em] text-ink-soft dark:text-d-muted">
              <span><span className="text-ink dark:text-white">12,847</span> {t('hero.trust.phones')}</span>
              <span className="opacity-40">·</span>
              <span><span className="text-ink dark:text-white">124</span> {t('hero.trust.brands')}</span>
              <span className="opacity-40">·</span>
              <span>{t('hero.trust.ai')}</span>
              <span className="opacity-40">·</span>
              <span>{t('hero.trust.daily')}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );

  /* ---- AI Verdict feature strip ---- */
  const verdicts = [
    {
      a: 'iPhone 16 Pro Max', b: 'Galaxy S25 Ultra',
      tagline: 'iPhone 16 Pro Max wins for video, but Galaxy S25 Ultra dominates raw performance.',
      tags: ['Camera', 'Performance', 'Battery'],
      conf: 'High confidence',
    },
    {
      a: 'Pixel 9 Pro', b: 'iPhone 16 Pro',
      tagline: 'Pixel 9 Pro takes the photography crown; iPhone 16 Pro leads on sustained gaming.',
      tags: ['Camera', 'AI features', 'Gaming'],
      conf: 'High confidence',
    },
    {
      a: 'OnePlus 13', b: 'Xiaomi 15 Ultra',
      tagline: 'Xiaomi 15 Ultra is the value flagship; OnePlus 13 charges twice as fast.',
      tags: ['Charging', 'Display', 'Value'],
      conf: 'Medium confidence',
    },
  ];

  const VerdictStrip = () => (
    <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-8">
      <div className="flex items-end justify-between mb-5">
        <div>
          <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-amber-brand dark:text-amber-warm mb-1.5">{t('ai.eyebrow')}</div>
          <h2 className="font-display font-semibold tracking-tighter2 text-[24px] sm:text-[28px] text-ink dark:text-white">
            {t('ai.heading')}
          </h2>
        </div>
        <a href="#" onClick={(e) => { e.preventDefault(); setPage('compare'); }} className="hidden sm:inline-flex items-center gap-1 text-[13px] font-medium text-ink dark:text-white">
          All verdicts <IconArrowRight size={14} />
        </a>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {verdicts.map((v, i) => (
          <article key={i} className="group relative rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface p-5 hover:border-amber-brand/50 dark:hover:border-amber-warm/40 transition">
            <div className="absolute top-3 right-3 inline-flex items-center gap-1 rounded-full bg-amber-brand/[0.08] dark:bg-amber-warm/[0.1] text-amber-brand dark:text-amber-warm px-2 py-0.5 text-[10px] font-mono uppercase tracking-wider">
              <IconSparkle size={10} /> AI Verdict
            </div>

            <div className="flex items-end gap-2">
              <PhoneRender size="sm" />
              <div className="pb-3 text-[10px] font-mono text-ink-soft dark:text-d-muted">vs</div>
              <PhoneRender size="sm" tint="amber" />
            </div>

            <div className="mt-4 flex items-center gap-1.5 text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
              <span className="text-ink dark:text-white">{v.a}</span>
              <span className="opacity-50">vs</span>
              <span className="text-ink dark:text-white">{v.b}</span>
            </div>

            <p className="mt-2 font-display font-semibold tracking-tighter2 text-ink dark:text-white text-[16px] leading-snug text-wrap-pretty">
              {v.tagline}
            </p>

            <div className="mt-4 flex flex-wrap gap-1.5">
              {v.tags.map((t) => <Chip key={t}>{t}</Chip>)}
            </div>

            <div className="mt-5 pt-4 border-t border-line dark:border-d-border flex items-center justify-between">
              <span className="text-[11px] font-mono text-ink-soft dark:text-d-muted">{v.conf}</span>
              <a href="#" onClick={(e) => { e.preventDefault(); setPage('compare'); }} 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">
                See full comparison <IconArrowRight size={13} />
              </a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );

  /* ---- Trending comparisons ---- */
  const trending = [
    { a: 'iPhone 16 Pro Max', b: 'Galaxy S25 Ultra', micro: 'Toss-up — gap closes for the first time since 2022.' },
    { a: 'Pixel 9 Pro', b: 'iPhone 16 Pro', micro: 'Google\'s AI tools justify the price gap.' },
    { a: 'OnePlus 13', b: 'Xiaomi 15 Ultra', micro: 'Two value flagships, fundamentally different bets.' },
    { a: 'iPhone 16', b: 'iPhone 15 Pro', micro: 'A18 in the standard model upends the lineup.' },
    { a: 'Galaxy Z Fold6', b: 'Pixel 9 Pro Fold', micro: 'Hinge wins it for Samsung — barely.' },
    { a: 'Nothing Phone 3', b: 'Pixel 9a', micro: 'Glyph or mid-range Pixel: both punch up.' },
  ];

  const TrendingGrid = () => (
    <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-20">
      <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">
            Trending this week
          </h2>
          <div className="mt-1 flex items-center gap-2 text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
            <span className="flex items-center gap-1"><IconRefresh size={11} /> Last updated 2h ago</span>
            <span className="opacity-40">·</span>
            <span>Based on 1.4M searches</span>
          </div>
        </div>
        <a href="#" onClick={(e) => { e.preventDefault(); setPage('compare'); }} className="hidden sm:inline-flex items-center gap-1 text-[13px] font-medium text-ink dark:text-white">
          All comparisons <IconArrowRight size={14} />
        </a>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-px bg-line dark:bg-d-border rounded-2xl border border-line dark:border-d-border overflow-hidden">
        {trending.map((c, i) => (
          <a
            href="#"
            onClick={(e) => e.preventDefault()}
            key={i}
            className="group bg-paper dark:bg-d-surface p-5 hover:bg-paper-soft dark:hover:bg-d-bg transition"
          >
            <div className="flex items-center gap-3">
              <span className="text-[10px] font-mono text-ink-soft dark:text-d-muted">#{String(i + 1).padStart(2, '0')}</span>
              <div className="flex-1 h-px bg-line dark:bg-d-border" />
              <span className="text-[10px] font-mono text-win">↑ {[12,8,21,3,5,17][i]}%</span>
            </div>
            <div className="mt-4 flex items-end gap-2">
              <PhoneRender size="sm" />
              <div className="pb-3 text-[10px] font-mono text-ink-soft dark:text-d-muted">vs</div>
              <PhoneRender size="sm" tint="amber" />
            </div>
            <div className="mt-4">
              <div className="font-display font-semibold tracking-tighter2 text-ink dark:text-white text-[15px] leading-tight">
                {c.a} <span className="text-ink-soft dark:text-d-muted font-normal">vs</span> {c.b}
              </div>
              <p className="mt-1.5 text-[13px] text-ink-soft dark:text-d-muted leading-snug">{c.micro}</p>
            </div>
            <div className="mt-3 inline-flex items-center gap-1 text-[12px] font-medium text-ink dark:text-white group-hover:text-amber-brand dark:group-hover:text-amber-warm">
              Compare <IconArrowRight size={13} />
            </div>
          </a>
        ))}
      </div>
    </section>
  );

  /* ---- Browse by brand ---- */
  const brands = ['Apple', 'Samsung', 'Xiaomi', 'OPPO', 'Vivo', 'OnePlus', 'Realme', 'Honor', 'Google', 'Sony'];
  const BrandStrip = () => (
    <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-20">
      <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">
          Browse by brand
        </h2>
        <a href="#" onClick={(e) => { e.preventDefault(); setPage('brands'); }} className="text-[13px] font-medium text-ink dark:text-white inline-flex items-center gap-1">
          All 124 brands <IconArrowRight size={14} />
        </a>
      </div>
      <div className="grid grid-cols-2 sm:grid-cols-5 gap-3">
        {brands.map((b) => <BrandLogo key={b} name={b} onClick={() => setPage(`brand.${b.toLowerCase().replace(/\s+/g, '')}`)} />)}
      </div>
    </section>
  );

  /* ---- Latest releases ---- */
  const releases = [
    { name: 'iPhone 16 Pro Max', date: 'Sep 2025', spec: '6.9" · A18 Pro · 4685 mAh', price: '$1,199' },
    { name: 'Galaxy S25 Ultra', date: 'Feb 2025', spec: '6.9" · SD 8 Elite · 5000 mAh', price: '$1,299' },
    { name: 'Pixel 9 Pro XL', date: 'Aug 2025', spec: '6.8" · Tensor G4 · 5060 mAh', price: '$1,099' },
    { name: 'Xiaomi 15 Ultra', date: 'Mar 2025', spec: '6.73" · SD 8 Elite · 6000 mAh', price: '$1,499' },
    { name: 'OnePlus 13', date: 'Jan 2025', spec: '6.82" · SD 8 Elite · 6000 mAh', price: '$899' },
    { name: 'Nothing Phone 3', date: 'Jul 2025', spec: '6.7" · SD 8s Gen 3 · 5150 mAh', price: '$799' },
    { name: 'Honor Magic 7 Pro', date: 'Jan 2025', spec: '6.8" · SD 8 Elite · 5850 mAh', price: '$1,099' },
  ];

  const LatestReleases = () => (
    <section className="mt-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <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">
              Latest releases
            </h2>
            <div className="mt-1 text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
              42 phones launched in the last 30 days
            </div>
          </div>
          <a href="#" onClick={(e) => e.preventDefault()} className="hidden sm:inline-flex items-center gap-1 text-[13px] font-medium text-ink dark:text-white">
            All new releases <IconArrowRight size={14} />
          </a>
        </div>
      </div>

      <div className="overflow-x-auto no-scrollbar">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex gap-3 pb-3 snap-x snap-mandatory">
            {releases.map((r, i) => (
              <a
                href="#"
                onClick={(e) => e.preventDefault()}
                key={i}
                className="group snap-start shrink-0 w-[240px] rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface p-4 hover:border-amber-brand/50 dark:hover:border-amber-warm/40 transition"
              >
                <div className="flex justify-center py-3">
                  <PhoneRender size="md" />
                </div>
                <div className="flex items-center justify-between text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
                  <span className="inline-flex items-center gap-1"><IconCalendar size={10} /> {r.date}</span>
                  <span className="text-amber-brand dark:text-amber-warm">NEW</span>
                </div>
                <div className="mt-2 font-display font-semibold tracking-tighter2 text-ink dark:text-white text-[15px]">
                  {r.name}
                </div>
                <div className="mt-1 num text-[12px] text-ink-soft dark:text-d-muted">{r.spec}</div>
                <div className="mt-3 pt-3 border-t border-line dark:border-d-border flex items-center justify-between">
                  <span className="num text-[14px] font-semibold text-ink dark:text-white">{r.price}</span>
                  <span className="inline-flex items-center gap-1 text-[12px] font-medium text-ink dark:text-white group-hover:text-amber-brand dark:group-hover:text-amber-warm">
                    View <IconArrowRight size={12} />
                  </span>
                </div>
              </a>
            ))}
            <div className="shrink-0 w-[240px] rounded-2xl border border-dashed border-line dark:border-d-border flex items-center justify-center text-[13px] font-medium text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white">
              <a href="#" onClick={(e) => e.preventDefault()} className="inline-flex items-center gap-1.5">
                View all <IconArrowRight size={14} />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );

  /* ---- Why SpecEagle ---- */
  const why = [
    { icon: <IconEye size={18} />, h: 'AI Verdicts', d: 'Natural-language buying advice for every phone pair, sourced from spec data and 23+ reviews.' },
    { icon: <IconGlobe size={18} />, h: '30 Languages', d: 'Specs and verdicts in Bahasa Indonesia, Español, Português, Hindi, and 26 more.' },
    { icon: <IconBolt size={18} />, h: 'Lightning Fast', d: 'Sub-second page loads. No ad-bleed, no popups, no tracker bloat. Ever.' },
    { icon: <IconRefresh size={18} />, h: 'Always Current', d: 'Spec database updated within 24 hours of any phone launch worldwide.' },
  ];

  const WhyStrip = () => (
    <section className="mt-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="rounded-3xl border border-line dark:border-d-border bg-paper dark:bg-d-surface overflow-hidden">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-line dark:divide-d-border">
            {why.map((w, i) => (
              <div key={i} className="p-6 sm:p-7">
                <div className="flex items-center gap-2 text-amber-brand dark:text-amber-warm">
                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-amber-brand/[0.08] dark:bg-amber-warm/[0.1]">{w.icon}</span>
                  <span className="text-[10px] font-mono uppercase tracking-[0.16em]">0{i + 1}</span>
                </div>
                <h3 className="mt-4 font-display font-semibold tracking-tighter2 text-ink dark:text-white text-[18px]">{w.h}</h3>
                <p className="mt-1.5 text-[13px] leading-relaxed text-ink-soft dark:text-d-muted">{w.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );

  return (
    <main className="pb-32">
      <Hero />
      <VerdictStrip />
      <TrendingGrid />
      <BrandStrip />
      <LatestReleases />
      <WhyStrip />
    </main>
  );
};

Object.assign(window, { Homepage });