import { ArrowRight, Search } from 'lucide-react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { ChangeRow } from '@/components/changes/change-row';
import { Sparkline, TimelineLanes } from '@/components/charts';
import { DataStrip, type StripItem, Ticker, type TickerItem } from '@/components/layout/terminal';
import { EntityBadge, OpennessBadge } from '@/components/ui/badges';
import { EntityLink } from '@/components/ui/entity';
import { LiveAgo } from '@/components/ui/live';
import { Container, Section } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmtDate, fmtDeltaPct, fmtInt, fmtParams, fmtScore, fmtTokens, fmtUsdPerM, hostOf, num } from '@/lib/format';
import { DESCRIPTION, EXAMPLE_QUERIES, eventTone, routes, signatureProducts, SITE_NAME, TAGLINE } from '@/lib/site';
import type { ChangeEvent, EntitySummary } from '@/lib/types';

export const metadata: Metadata = {
  title: { absolute: `${SITE_NAME} — ${TAGLINE}` },
  description: DESCRIPTION,
  alternates: { canonical: '/' },
};
export const revalidate = 60;

/** Fallback "How counted" texts — replaced by `stats.definitions` when the API provides them. */
const DEFINITIONS: Record<string, string> = {
  model: 'Entities typed “model” in the graph. After canonicalisation: canonical model releases only — artifacts (quantizations, conversions) and folded evaluation variants are excluded.',
  organization: 'Companies, labs, universities and other organizations (entity types company · organization · lab · university).',
  paper: 'Research papers ingested from arXiv and publisher feeds (one entity per paper, deduplicated by identifier).',
  dataset: 'Datasets known to the graph (Hugging Face and publisher pages).',
  benchmark_results: 'Live benchmark result rows (one per model × benchmark × metric × configuration). Superseded runs are closed, never deleted.',
  provider: 'API providers that serve models (each with its own model listing and prices).',
  prices_current: 'Price offers currently valid (USD per 1M tokens) across all providers — one live row per model × provider × provider model id.',
  documents: 'Source documents crawled by first-party connectors; every fact links back to one of them (snapshots are archived forever).',
};

const OPEN_EVENT_TYPES = new Set(['NEW_MODEL', 'RELEASE', 'VERSION_RELEASED']);

function occurredAt(e: ChangeEvent): string {
  return e.effective_at ?? e.observed_at;
}

function priceMove(e: ChangeEvent): { input: [number | null, number | null]; output: [number | null, number | null] } {
  const o = (e.old_value && typeof e.old_value === 'object' ? e.old_value : {}) as Record<string, unknown>;
  const n = (e.new_value && typeof e.new_value === 'object' ? e.new_value : {}) as Record<string, unknown>;
  return { input: [num(o.input_per_mtok), num(n.input_per_mtok)], output: [num(o.output_per_mtok), num(n.output_per_mtok)] };
}

/** Deterministic pseudo-random constellation for the graph teaser (decorative; the numbers beside it are real). */
function constellation(seed: number, n: number): { x: number; y: number; t: number; r: number }[] {
  let s = seed;
  const rnd = () => {
    s = (s * 1103515245 + 12345) & 0x7fffffff;
    return s / 0x7fffffff;
  };
  return Array.from({ length: n }, () => ({ x: 8 + rnd() * 304, y: 8 + rnd() * 144, t: Math.floor(rnd() * 6), r: 1.2 + rnd() * 2.2 }));
}
const NODE_TYPES = ['model', 'company', 'paper', 'provider', 'benchmark', 'hardware'];

export default async function HomePage() {
  const [stats, daily, frontier, majors, priceIndex, open, openFallback, benchmarks, papers, timeline, recent] = await Promise.all([
    safe(api.stats()),
    safe(api.changesDaily()),
    safe(api.frontier()),
    safe(api.changes({ importance_min: 3, limit: 8 })),
    safe(api.priceIndex(30)),
    safe(api.open(30, 8)),
    safe(api.models({ openness: 'open-weights', sort: 'release', limit: 8 })),
    safe(api.benchmarks()),
    safe(api.papers({ sort: 'published', limit: 6 })),
    safe(api.timeline({ category: 'model', limit: 400 })),
    safe(api.changes({ importance_min: 2, limit: 30 })),
  ]);

  const ent = stats?.entities ?? {};
  const orgs = stats ? (num(ent.company) ?? 0) + (num(ent.organization) ?? 0) + (num(ent.lab) ?? 0) + (num(ent.university) ?? 0) : null;
  const defs = { ...DEFINITIONS, ...(stats?.definitions ?? {}) };
  const live24 = num(stats?.change_events_live_24h);
  const strip: StripItem[] | null = stats
    ? [
        { label: 'Models', value: fmtInt(ent.model), href: routes.models(), definition: defs.model },
        { label: 'Organizations', value: fmtInt(orgs), href: routes.companies(), definition: defs.organization },
        { label: 'Papers', value: fmtInt(ent.paper), href: routes.papers(), definition: defs.paper },
        { label: 'Datasets', value: fmtInt(ent.dataset), href: routes.datasets(), definition: defs.dataset },
        { label: 'Benchmark results', value: fmtInt(stats.benchmark_results), href: routes.benchmarks(), definition: defs.benchmark_results },
        { label: 'Providers', value: fmtInt(ent.provider), href: routes.providers(), definition: defs.provider },
        { label: 'Current prices', value: fmtInt(stats.prices_current), href: routes.prices(), definition: defs.prices_current },
        { label: 'Source documents', value: fmtInt(stats.documents), href: routes.sources(), definition: defs.documents, hint: `${fmtInt(stats.sources)} sources` },
      ]
    : null;

  // ---- today
  const today = daily?.date ?? new Date().toISOString().slice(0, 10);
  const sections = (daily?.sections ?? []).filter((s) => s.items.length > 0).slice(0, 6);
  const todayTotal = num(daily?.total) ?? Object.values(daily?.counts ?? {}).reduce<number>((n, v) => n + (num(v) ?? 0), 0);

  // ---- frontier moves
  const frontierMoves: ChangeEvent[] = frontier?.recent_frontier_movements?.length ? frontier.recent_frontier_movements.slice(0, 6) : (majors?.items ?? []).slice(0, 6);
  const frontierLive = !!frontier?.recent_frontier_movements?.length;

  // ---- prices
  const movers = (priceIndex?.movers ?? []).filter((e) => e.event_type === 'PRICE_CHANGED').slice(0, 7);
  const medianSeries = (priceIndex?.series ?? []).map((p) => num(p.median_input)).filter((v): v is number => v !== null);
  const medianLast = medianSeries.length ? (medianSeries[medianSeries.length - 1] as number) : null;

  // ---- open models
  const openItems: EntitySummary[] = open?.items?.length ? open.items.slice(0, 8) : (openFallback?.items ?? []).slice(0, 8);
  const openLive = !!open?.items?.length;

  // ---- benchmarks
  const leaders = (benchmarks?.items ?? [])
    .filter((b) => b.top && (num(b.result_count) ?? 0) > 0)
    .sort((a, b) => (num(b.model_count) ?? 0) - (num(a.model_count) ?? 0))
    .slice(0, 6);

  // ---- release timeline (last 12 months, NEW_MODEL / RELEASE, importance ≥ 2), lanes = top organizations
  const since = Date.now() - 365 * 86400000;
  const releaseEvents = (timeline?.items ?? [])
    .flatMap((m) => m.events)
    .filter((e) => OPEN_EVENT_TYPES.has(e.event_type) && e.importance >= 2 && e.entity && new Date(occurredAt(e)).getTime() >= since);
  const orgCount = new Map<string, number>();
  for (const e of releaseEvents) orgCount.set(e.entity?.organization?.name ?? 'Other', (orgCount.get(e.entity?.organization?.name ?? 'Other') ?? 0) + 1);
  const topOrgs = [...orgCount.entries()]
    .filter(([k]) => k !== 'Other')
    .sort((a, b) => b[1] - a[1])
    .slice(0, 7)
    .map(([k]) => k);
  const lanes = [...topOrgs.map((k, i) => ({ key: k, label: k, color: `var(--series-${(i % 8) + 1})` })), ...(orgCount.size > topOrgs.length ? [{ key: 'Other', label: 'Other', color: 'var(--ink-3)' }] : [])];
  const laneEvents = releaseEvents.map((e) => {
    const org = e.entity?.organization?.name ?? 'Other';
    return { id: e.id, lane: topOrgs.includes(org) ? org : 'Other', at: occurredAt(e), importance: e.importance, label: e.entity?.name ?? e.summary, sub: e.summary, href: e.entity ? routes.entity(e.entity) : undefined };
  });

  // ---- ticker
  const ticker: TickerItem[] = (recent?.items ?? []).slice(0, 24).map((e) => ({ id: e.id, tone: eventTone(e.event_type), href: e.entity ? routes.entity(e.entity) : routes.changes(), label: e.summary.length > 90 ? `${e.summary.slice(0, 89)}…` : e.summary, meta: fmtDate(occurredAt(e)) }));

  const nodes = constellation(20260912, 42);

  return (
    <>
      {/* ------------------------------------------------------------------------------------------------ hero (compact) */}
      <div className="relative overflow-hidden border-b border-rule">
        <div className="grid-bg pointer-events-none absolute inset-0" aria-hidden />
        <Container className="relative py-8 md:py-12">
          <p className="eyebrow">The temporal knowledge graph of the AI ecosystem</p>
          <div className="mt-2 grid gap-6 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-end">
            <div>
              <h1 className="display text-[34px] md:text-[52px]">Explore the AI ecosystem.</h1>
              <p className="mt-3 max-w-2xl text-[15px] leading-relaxed text-ink-2 md:text-base">
                Not a directory — a continuously reconstructed, source-attributed, historical map of models, organizations, research, providers and prices, benchmarks, hardware and datasets.
              </p>
            </div>
            <p className="max-w-md text-sm leading-relaxed text-ink-2 lg:justify-self-end lg:text-right">
              Every number here answers: <span className="text-ink">who said it, when, where, and how it was extracted.</span>
            </p>
          </div>
          <form action="/search" method="get" role="search" className="mt-5 flex max-w-2xl items-stretch border border-rule-strong bg-surface focus-within:border-accent">
            <label htmlFor="home-q" className="sr-only">Search</label>
            <span className="flex items-center pl-3 text-ink-3"><Search className="size-5" aria-hidden /></span>
            <input id="home-q" name="q" type="search" placeholder="Ask anything: “open models over 100B released in 2026”, “cheapest 1M context”…" className="h-12 min-w-0 flex-1 bg-transparent px-3 text-[16px] text-ink placeholder:text-ink-3 focus:outline-none" autoComplete="off" />
            <button type="submit" className="flex items-center gap-1.5 bg-ink px-4 text-sm font-medium text-canvas hover:opacity-90 md:px-5">
              Search <ArrowRight className="hidden size-4 md:block" aria-hidden />
            </button>
          </form>
          <ul className="mt-2.5 flex flex-wrap gap-2">
            {EXAMPLE_QUERIES.map((q) => (
              <li key={q}>
                <Link href={routes.search(q)} className="inline-block border border-rule px-2.5 py-1 text-xs text-ink-2 hover:border-rule-strong hover:text-ink">
                  {q}
                </Link>
              </li>
            ))}
            <li className="text-xs text-ink-3 self-center">
              or press <kbd className="mono border border-rule px-1">⌘K</kbd>
            </li>
          </ul>
        </Container>
      </div>

      <Container>
        {/* ------------------------------------------------------------------------------------------------ live strip */}
        <div className="pt-5">
          <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
            <p className="eyebrow flex items-center gap-2">
              Live ecosystem
              {stats && (
                <span className="flex items-center gap-1.5 text-[11px] font-normal normal-case tracking-normal text-ink-3">
                  <span className="dot pulse" aria-hidden /> computed <LiveAgo at={stats.computed_at} />
                  {live24 !== null && <span>· {fmtInt(live24)} live events / 24 h</span>}
                </span>
              )}
            </p>
            <Link href={routes.methodology()} className="text-xs text-ink-3 hover:text-ink">
              How counts are computed →
            </Link>
          </div>
          {strip ? <DataStrip items={strip} /> : <Unavailable what="Live counters" reason="The API did not answer. Counters are never cached or hardcoded." />}
        </div>
        {ticker.length > 0 && <Ticker items={ticker} className="mt-3" label="Recent" />}

        {/* ------------------------------------------------------------------------------------------------ editorial grid */}
        <div className="grid gap-x-12 lg:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)]">
          <div className="min-w-0">
            {/* today */}
            <Section eyebrow={`Today in AI · ${fmtDate(today)}`} title="What changed" action={{ href: routes.changesDay(today), label: 'Daily digest' }} lede={daily ? `${fmtInt(todayTotal)} events recorded today across ${sections.length} ${sections.length === 1 ? 'section' : 'sections'}.` : undefined}>
              {sections.length ? (
                <div className="space-y-6">
                  {sections.map((s) => (
                    <div key={s.category}>
                      <p className="eyebrow mb-1 flex items-baseline justify-between">
                        <span>{s.label}</span>
                        <span className="tnum font-normal">{fmtInt(num(s.total) ?? num(daily?.counts?.[s.category]) ?? s.items.length)}</span>
                      </p>
                      <ul className="border-t border-rule">
                        {s.items.slice(0, 5).map((e) => (
                          <ChangeRow key={e.id} e={e} dense />
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              ) : daily ? (
                <p className="border-y border-rule py-8 text-center text-sm text-ink-3">No material events recorded today yet. The change engine only emits events when a source states a material change.</p>
              ) : (
                <Unavailable what="Daily digest" />
              )}
              <p className="mt-4 text-xs text-ink-3">
                {daily?.backfill_excluded !== undefined ? (
                  <>
                    {fmtInt(daily.backfill_excluded)} historical backfill events are excluded — see the <Link href={routes.timeline()} className="link">Timeline</Link>.
                  </>
                ) : (
                  <>
                    Digest keyed on observation time; historical backfill is shown on the <Link href={routes.timeline()} className="link">Timeline</Link> by effective date.
                  </>
                )}
              </p>
            </Section>

            {/* frontier moves */}
            <Section eyebrow="Frontier moves" title={frontierLive ? 'Leadership changes' : 'Major events'} lede={frontierLive ? 'A model took or lost the lead on a benchmark family.' : 'Latest importance-3 events — the frontier feed appears once leaderboard trust levels are computed.'} action={{ href: routes.frontier(), label: 'Frontier' }}>
              {frontierMoves.length ? (
                <ul className="border-t border-rule">
                  {frontierMoves.map((e) => (
                    <ChangeRow key={e.id} e={e} dense />
                  ))}
                </ul>
              ) : majors ? (
                <p className="border-y border-rule py-6 text-center text-sm text-ink-3">No major events recorded yet.</p>
              ) : (
                <Unavailable what="Frontier moves" compact />
              )}
            </Section>

            {/* benchmark leaders */}
            <Section eyebrow="Benchmark leaders" title="Who leads, on what" action={{ href: routes.benchmarks(), label: 'All benchmarks' }}>
              {leaders.length ? (
                <ul className="grid border-t border-rule sm:grid-cols-2">
                  {leaders.map((b) => (
                    <li key={b.id} className="row-y grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 border-b border-rule sm:odd:pr-6 sm:even:pl-6">
                      <div className="min-w-0">
                        <p className="truncate text-sm">
                          <EntityLink e={b} className="font-medium" />
                          {typeof b.attributes?.metric === 'string' && <span className="ml-1.5 text-xs text-ink-3">{b.attributes.metric}</span>}
                        </p>
                        <p className="mt-0.5 truncate text-xs text-ink-2">
                          leader <EntityLink e={b.top!.model} className="text-ink" />
                          {b.top!.model.organization && <span className="text-ink-3"> · {b.top!.model.organization.name}</span>}
                        </p>
                        <p className="tnum mt-0.5 text-[11px] text-ink-3">
                          {fmtInt(b.result_count)} results · {fmtInt(b.model_count)} models
                          {typeof b.attributes?.trust_level === 'string' ? <> · trust {b.attributes.trust_level}</> : <> · trust —</>}
                        </p>
                      </div>
                      <p className="tnum self-center text-lg font-semibold text-type-benchmark">{fmtScore(b.top!.score)}</p>
                    </li>
                  ))}
                </ul>
              ) : benchmarks ? (
                <p className="border-y border-rule py-6 text-center text-sm text-ink-3">No benchmark results ingested yet.</p>
              ) : (
                <Unavailable what="Benchmarks" compact />
              )}
            </Section>
          </div>

          <div className="min-w-0">
            {/* price moves */}
            <Section eyebrow="Price moves" title="USD per 1M tokens" action={{ href: routes.prices(), label: 'Price index' }}>
              <div className="flex items-end justify-between gap-4 border-b border-rule pb-3">
                <div>
                  <p className="eyebrow">Median input · 30 d</p>
                  {medianSeries.length >= 2 ? (
                    <Sparkline values={medianSeries} variant="trend" width={140} height={32} stroke="var(--accent-2)" invert format={(v) => fmtUsdPerM(v)} title="Median input price, last 30 days" />
                  ) : (
                    <p className="mt-1 text-xs text-ink-3">{medianLast !== null ? `${fmtUsdPerM(medianLast)} today · ` : ''}needs ≥ 2 daily snapshots to draw</p>
                  )}
                </div>
                <p className="tnum text-right text-xs text-ink-3">
                  {stats ? <>{fmtInt(stats.prices_current)} live offers</> : null}
                  <br />
                  {priceIndex?.series?.length ? <>{fmtInt(priceIndex.series[priceIndex.series.length - 1]?.models)} models priced</> : null}
                </p>
              </div>
              {movers.length ? (
                <ul>
                  {movers.map((e) => {
                    const m = priceMove(e);
                    const dIn = fmtDeltaPct(m.input[0], m.input[1]);
                    const dOut = fmtDeltaPct(m.output[0], m.output[1]);
                    const provider = hostOf(e.source_url);
                    return (
                      <li key={e.id} className="row-y grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 border-b border-rule text-sm">
                        <div className="min-w-0">
                          {e.entity ? <EntityLink e={e.entity} className="truncate font-medium" /> : <span>{e.summary}</span>}
                          <p className="truncate text-xs text-ink-3">
                            {provider ?? e.connector_name} · {fmtDate(occurredAt(e))}
                          </p>
                        </div>
                        <div className="tnum text-right text-xs">
                          <p>
                            <span className="text-ink-3">in </span>
                            <span className="font-medium text-accent-2">{fmtUsdPerM(m.input[1])}</span>
                            {dIn && <span className={m.input[1]! < m.input[0]! ? 'ml-1 text-positive' : 'ml-1 text-danger'}>{dIn}</span>}
                          </p>
                          <p>
                            <span className="text-ink-3">out </span>
                            <span className="font-medium text-accent-2">{fmtUsdPerM(m.output[1])}</span>
                            {dOut && <span className={m.output[1]! < m.output[0]! ? 'ml-1 text-positive' : 'ml-1 text-danger'}>{dOut}</span>}
                          </p>
                        </div>
                      </li>
                    );
                  })}
                </ul>
              ) : priceIndex ? (
                <p className="py-6 text-center text-sm text-ink-3">No price changes recorded in the window.</p>
              ) : (
                <Unavailable what="Price moves" compact className="mt-3" />
              )}
            </Section>

            {/* open models */}
            <Section eyebrow={openLive ? 'New open models · 30 d' : 'Open models · latest releases'} title="Open weights" action={{ href: routes.open(), label: 'Open model frontier' }}>
              {openItems.length ? (
                <ul className="border-t border-rule">
                  {openItems.map((m) => {
                    const a = m.attributes ?? {};
                    return (
                      <li key={m.id} className="row-y grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 border-b border-rule text-sm">
                        <div className="min-w-0">
                          <p className="truncate">
                            <EntityLink e={m} className="font-medium" />
                            {m.organization && <span className="text-xs text-ink-3"> · {m.organization.name}</span>}
                          </p>
                          <p className="tnum truncate text-xs text-ink-3">
                            {num(a.parameter_count) !== null && <>{fmtParams(a.parameter_count)} params · </>}
                            {num(a.context_length) !== null && <>{fmtTokens(a.context_length)} ctx · </>}
                            {typeof a.license === 'string' ? a.license : 'license —'}
                          </p>
                        </div>
                        <div className="text-right">
                          <p className="tnum text-xs text-ink-2">{typeof a.release_date === 'string' ? fmtDate(a.release_date) : '—'}</p>
                          <OpennessBadge openness={typeof a.openness === 'string' ? a.openness : 'open-weights'} className="mt-0.5" />
                        </div>
                      </li>
                    );
                  })}
                </ul>
              ) : openFallback || open ? (
                <p className="border-y border-rule py-6 text-center text-sm text-ink-3">No open-weight releases recorded in the window.</p>
              ) : (
                <Unavailable what="Open models" compact />
              )}
            </Section>

            {/* research */}
            <Section eyebrow="Research" title="Latest papers" action={{ href: routes.papers(), label: 'Research' }}>
              {papers?.items?.length ? (
                <ul className="border-t border-rule">
                  {papers.items.slice(0, 6).map((p) => {
                    const a = p.attributes ?? {};
                    const authors = Array.isArray(a.authors) ? (a.authors as string[]) : [];
                    return (
                      <li key={p.id} className="row-y border-b border-rule text-sm">
                        <EntityLink e={p} className="line-clamp-2 font-medium leading-snug" />
                        <p className="tnum mt-0.5 truncate text-xs text-ink-3">
                          {typeof a.published_at === 'string' && <>{fmtDate(a.published_at)} · </>}
                          {authors.length > 0 && <>{authors.slice(0, 2).join(', ')}{authors.length > 2 ? ` +${authors.length - 2}` : ''} · </>}
                          {typeof a.arxiv_id === 'string' && <span className="mono">arXiv {a.arxiv_id}</span>}
                          {typeof a.primary_category === 'string' && <> · {a.primary_category}</>}
                        </p>
                      </li>
                    );
                  })}
                </ul>
              ) : papers ? (
                <p className="border-y border-rule py-6 text-center text-sm text-ink-3">No papers ingested yet.</p>
              ) : (
                <Unavailable what="Research" compact />
              )}
            </Section>
          </div>
        </div>

        {/* ------------------------------------------------------------------------------------------------ release timeline */}
        <Section eyebrow="Model release timeline · 12 months" title="Releases by organization" lede="New models and releases of importance ≥ 2, by effective date when the source states one. Hover a dot; drag to read a range." action={{ href: routes.timeline({ category: 'model' }), label: 'Full timeline' }}>
          {laneEvents.length >= 2 && lanes.length ? (
            <TimelineLanes lanes={lanes} events={laneEvents} from={new Date(since)} to={new Date()} brushable title="Model releases by organization, last 12 months" />
          ) : timeline ? (
            <p className="border-y border-rule py-6 text-center text-sm text-ink-3">Not enough dated release events in the last 12 months to draw a timeline.</p>
          ) : (
            <Unavailable what="Timeline" compact />
          )}
        </Section>

        {/* ------------------------------------------------------------------------------------------------ graph teaser */}
        <Section eyebrow="Ecosystem graph" title="Every entity, every relation" action={{ href: routes.graph(), label: 'Explore the graph' }}>
          <div className="grid items-center gap-6 md:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
            <div className="text-sm text-ink-2">
              <p className="tnum text-2xl font-semibold tracking-tight text-ink">
                {stats ? fmtInt(stats.entities_total) : '—'} <span className="text-base font-normal text-ink-3">entities</span> · {stats ? fmtInt(stats.relations) : '—'} <span className="text-base font-normal text-ink-3">relations</span>
              </p>
              <p className="mt-2 leading-relaxed">Organizations develop models, providers serve them, papers describe them, benchmarks evaluate them, hardware runs them. Start from any entity and follow the edges — lineage, ownership, availability — with the source of every relation.</p>
              <p className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs">
                <Link href={routes.graph()} className="link">Knowledge graph →</Link>
                <Link href={routes.families()} className="link">Model families →</Link>
                <Link href={routes.compare()} className="link">Compare →</Link>
              </p>
            </div>
            <Link href={routes.graph()} className="block border border-rule bg-surface/40 hover:border-rule-strong" aria-label="Open the knowledge graph">
              <svg viewBox="0 0 320 160" className="block h-auto w-full" aria-hidden>
                {nodes.map((n, i) =>
                  nodes.slice(i + 1, i + 3).map((m, j) => (
                    <line key={`${i}-${j}`} x1={n.x} y1={n.y} x2={m.x} y2={m.y} stroke="var(--rule-strong)" strokeWidth={0.6} opacity={0.7} />
                  )),
                )}
                {nodes.map((n, i) => (
                  <circle key={i} cx={n.x} cy={n.y} r={n.r} fill={`var(--type-${NODE_TYPES[n.t]})`} opacity={0.9} />
                ))}
              </svg>
              <p className="flex flex-wrap gap-x-3 gap-y-1 border-t border-rule px-3 py-1.5">
                {NODE_TYPES.map((t) => (
                  <EntityBadge key={t} type={t} small />
                ))}
              </p>
            </Link>
          </div>
        </Section>

        {/* ------------------------------------------------------------------------------------------------ signature products */}
        <Section eyebrow="Signature products" title="Twelve ways to read the atlas" hairline>
          <ul className="grid grid-cols-2 border-l border-t border-rule sm:grid-cols-3 lg:grid-cols-6">
            {signatureProducts.map((p) => (
              <li key={p.label} className="border-b border-r border-rule">
                <Link href={p.href} className="block h-full px-3 py-3 hover:bg-surface-2">
                  <p className="text-sm font-medium text-ink">{p.label}</p>
                  {p.hint && <p className="mt-0.5 text-xs leading-snug text-ink-3">{p.hint}</p>}
                </Link>
              </li>
            ))}
          </ul>
        </Section>
      </Container>
    </>
  );
}