import { ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { LazyGlobe } from '@/components/globe/lazy-globe';
import { Container } from '@/components/ui/section';
import { fmtInt } from '@/lib/format';
import { routes } from '@/lib/site';
import type { HomePayload } from '@/lib/types';
import { SearchButton } from './search-button';

function Count({ label, value, href }: { label: string; value: string; href: string }) {
  return (
    <Link href={href} className="group min-w-0 py-3 pr-4 md:py-0">
      <p className="tnum display text-2xl text-ink md:text-[2rem]">{value}</p>
      <p className="mt-1 text-2xs uppercase tracking-[0.12em] text-ink-3 group-hover:text-ink-2">{label}</p>
    </Link>
  );
}

/** Hero: statement + live counts (from /stats/home, never hardcoded) + CTAs, with the compact globe island beside/below. */
export function HomeHero({ home }: { home: HomePayload | null }) {
  const s = home?.stats;
  const counts: [string, string, string][] = [
    ['Active satellites', fmtInt(s?.active_satellites), routes.satellites('status=ACTIVE')],
    ['Objects on orbit', fmtInt(s?.objects_on_orbit), routes.satellites('on_orbit=true')],
    ['Launches catalogued', fmtInt(home?.launches.total), routes.launches()],
    ['Active operators', fmtInt(s?.active_operators), routes.operators()],
    ['Countries', fmtInt(s?.active_countries), routes.countries()],
  ];
  return (
    <section className="relative overflow-hidden border-b border-rule">
      <div className="grid-bg pointer-events-none absolute inset-0" aria-hidden />
      <Container wide className="relative">
        <div className="grid items-center gap-4 lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)] lg:gap-8">
          <div className="pb-4 pt-10 md:pt-14 lg:py-20">
            <p className="eyebrow flex items-center gap-2">
              <span className="dot pulse text-active" aria-hidden /> Satellite Index · live catalogue
            </p>
            <h1 className="display mt-4 max-w-[14ch] text-[2.5rem] text-ink sm:text-5xl md:text-6xl lg:text-[4.25rem]">
              The world&rsquo;s orbital infrastructure, mapped and indexed.
            </h1>
            <p className="mt-5 max-w-xl text-[15px] leading-relaxed text-ink-2 md:text-lg">
              Every satellite, constellation, operator, launch, debris object and reentry in Earth orbit — one canonical, source-attributed
              database with live SGP4 positions, orbital history and a transparent methodology.
            </p>
            <div className="mt-7 flex flex-wrap items-center gap-3">
              <Link href={routes.explore()} className="inline-flex h-12 items-center justify-center gap-2 rounded-md bg-accent px-5 text-sm font-semibold text-accent-ink hover:brightness-110">
                Explore orbit <ArrowRight className="size-4" aria-hidden />
              </Link>
              <SearchButton />
            </div>
            <dl className="mt-9 grid grid-cols-2 gap-x-4 gap-y-2 border-y border-rule py-2 sm:grid-cols-3 md:mt-12 md:grid-cols-5 md:gap-6 md:border-0 md:py-0">
              {counts.map(([label, value, href]) => (
                <div key={label} className="[&:nth-child(5)]:col-span-2 sm:[&:nth-child(5)]:col-span-1 md:border-l md:border-rule md:pl-4 md:first:border-0 md:first:pl-0">
                  <Count label={label} value={value} href={href} />
                </div>
              ))}
            </dl>
            {!home && <p className="mt-2 text-xs text-warn">Live statistics unavailable — the catalogue API did not respond.</p>}
          </div>
          <div className="relative -mx-4 h-[46vh] min-h-[300px] md:mx-0 md:h-[520px] lg:h-[680px]">
            <LazyGlobe variant="hero" />
          </div>
        </div>
      </Container>
    </section>
  );
}