import type { Metadata } from "next";
import Link from "next/link";
import { LogoMark } from "@/components/brand/logo";
import { Page, PageHeader, Section } from "@/components/ui/card";
import { routes } from "@/lib/routes";

export const metadata: Metadata = {
  title: "About",
  description: "What DataCenterIndex is, how it is built, who makes it and where the data comes from.",
  alternates: { canonical: "/about" },
};

const LICENSES = [
  { name: "PeeringDB", what: "Facilities, internet exchanges, networks and their presence.", license: "PeeringDB data licence (CC0-like, attribution requested)", url: "https://www.peeringdb.com" },
  { name: "OpenStreetMap", what: "Building footprints, addresses and coordinates for geocoding.", license: "© OpenStreetMap contributors — ODbL 1.0", url: "https://www.openstreetmap.org/copyright" },
  { name: "Wikidata", what: "Operator identities, aliases, parent companies, external identifiers.", license: "CC0 1.0", url: "https://www.wikidata.org" },
  { name: "World Bank", what: "Country population, GDP and electricity indicators.", license: "CC BY 4.0", url: "https://data.worldbank.org" },
  { name: "Operator and government sources", what: "Facility pages, press releases, planning filings, utility and regulator publications.", license: "Facts only; each value links to its source page and licence recorded per source.", url: routes.sources() },
];

export default function AboutPage() {
  return (
    <Page className="max-w-[880px]">
      <PageHeader eyebrow="About" title="An index, not a directory." description="DataCenterIndex is the structured, versioned graph of the world's data center infrastructure — and its history." />

      <div className="prose-dci flex flex-col gap-8 text-[14.5px] leading-relaxed text-ink-2">
        <Section title="What it is">
          <p>
            Facilities, campuses, operators, cloud regions, metros, countries, projects, internet exchanges, power and connectivity, linked into one graph. Every field — a capacity in MW, an opening date, a coordinate, a status — carries its provenance: the source, the URL, when it was first and last observed, how it was extracted, and a confidence level. When a source changes, the change is detected, versioned and published to the{" "}
            <Link href={routes.live()} className="text-ink underline decoration-hair-2 hover:text-accent">
              live feed
            </Link>
            .
          </p>
          <p className="mt-3">
            We never invent data. Totals are lower bounds computed from known figures only; estimates are flagged ≈; city-level coordinates are labelled as such and drawn as hollow rings on the map.
          </p>
        </Section>

        <Section title="How it is built">
          <p>
            A homemade connector platform follows a fixed pipeline: discover → fetch → archive → extract → normalize → reconcile → validate → version → detect changes → publish. Crawling is polite and legal: robots.txt is respected, hosts are rate-limited, unchanged pages are never refetched, no paywall or CAPTCHA is bypassed. Entity resolution merges records across sources only above a strict similarity threshold; ambiguous matches are reviewed by a human.
          </p>
          <p className="mt-3">
            <Link href={routes.methodology()} className="text-ink underline decoration-hair-2 hover:text-accent">
              Read the methodology
            </Link>{" "}
            for confidence scoring, ranking rules and coverage caveats, or browse the{" "}
            <Link href={routes.sources()} className="text-ink underline decoration-hair-2 hover:text-accent">
              source registry
            </Link>
            .
          </p>
        </Section>

        <Section title="Data attribution and licences">
          <ul className="divide-y divide-hair">
            {LICENSES.map((l) => (
              <li key={l.name} className="grid gap-1 py-3 sm:grid-cols-[160px_minmax(0,1fr)] sm:gap-4">
                <a href={l.url} target="_blank" rel="noopener noreferrer" className="font-medium text-ink hover:text-accent">
                  {l.name}
                </a>
                <div>
                  <div>{l.what}</div>
                  <div className="mt-0.5 text-[12.5px] text-ink-3">{l.license}</div>
                </div>
              </li>
            ))}
          </ul>
          <p className="mt-3 text-[12.5px] text-ink-3">Map tiles: OpenFreeMap · © OpenMapTiles · © OpenStreetMap contributors.</p>
        </Section>

        <Section title="Who makes it">
          <div className="flex items-start gap-4">
            <LogoMark size={40} className="mt-1 text-ink" />
            <div>
              <p>
                Built and maintained by <span className="font-medium text-ink">Simon-Pierre Boucher</span>. Questions, corrections, data partnerships or API access:{" "}
                <a href="mailto:contact@spboucher.ai" className="text-ink underline decoration-hair-2 hover:text-accent">
                  contact@spboucher.ai
                </a>
                .
              </p>
              <p className="mt-2">
                Hosted on{" "}
                <a href="https://www.maclustr.io" target="_blank" rel="noopener noreferrer" className="text-ink underline decoration-hair-2 hover:text-accent">
                  MacLustr (www.maclustr.io)
                </a>
                , a distributed Apple-silicon compute cluster, with dedicated servers for the data and crawl tiers.
              </p>
              <p className="mt-2 text-[12.5px] text-ink-3">
                Public API: <Link href={routes.apiDocs()} className="underline decoration-hair-2 hover:text-ink">/api/v1/docs</Link> — same envelope, same provenance as the site.
              </p>
            </div>
          </div>
        </Section>
      </div>
    </Page>
  );
}