import Link from 'next/link';
import type { SiteStats } from '@/lib/queries/site';
import { fmtNum, fmtRelative } from '@/lib/format';
import { HeroSearch } from '@/components/search/search-sheet';
import { StatStrip } from '@/components/ui/primitives';

const CHIPS = ['1999 Charizard PSA 10', 'Rolex Daytona 116500LN', 'LEGO 10179', 'Black Lotus Alpha', 'Super Mario 64 sealed', 'Amazing Spider-Man 300'];

export function Hero({ stats }: { stats: SiteStats }) {
  return (
    <section className="fade-up pt-6 sm:pt-12">
      <div className="mx-auto max-w-3xl text-center">
        <p className="t-label mb-3 flex items-center justify-center gap-2">
          <span className="live-dot inline-block h-1.5 w-1.5 rounded-full bg-gain" aria-hidden />
          Collectibles market intelligence
        </p>
        <h1 className="t-display text-fg">The Global Market for Collectibles</h1>
        <p className="mx-auto mt-3 max-w-xl text-[15px] leading-relaxed text-muted sm:text-base">Discover, price, track and analyze collectible assets across the world’s marketplaces and auction houses.</p>
        <div className="mt-6">
          <HeroSearch chips={CHIPS} />
        </div>
      </div>
      <StatStrip
        className="mx-auto mt-8 max-w-4xl"
        items={[
          { label: 'Tracked assets', value: fmtNum(stats.assets), href: '/explore' },
          { label: 'Indexed sales', value: fmtNum(stats.sales), href: '/sales' },
          { label: 'Price observations', value: fmtNum(stats.observations), href: '/explore?has=observations' },
          { label: 'Live listings', value: fmtNum(stats.activeListings), href: '/listings' },
          { label: 'Last update', value: stats.lastUpdateAt ? fmtRelative(stats.lastUpdateAt) : '—', sub: `${fmtNum(stats.sources)} sources · ${fmtNum(stats.connectors)} connectors` },
        ]}
      />
      <p className="mt-2 text-center text-[11px] text-subtle">
        Counts are live from the canonical tables · valuations carry confidence and sample size ·{' '}
        <Link href="/methodology" className="underline-offset-2 hover:text-fg hover:underline">
          methodology
        </Link>
      </p>
    </section>
  );
}