import Link from "next/link";
import { ArchiveGrowthChart } from "./components/ArchiveGrowthChart";
import { FamilyStats } from "./components/FamilyStats";
import { ArchiveCards } from "./components/ArchiveCards";
import { loadSummary } from "./lib/summary";
import { currentHomepage } from "./lib/homepage";

// The project's front page. It says what Archilyzer is, shows what it has
// built, and offers the download.
//
// Every number is computed at build time from the operator's corpus (the
// summary's `official` block and `monthly` series) and hidden when absent — see
// loadSummary(). A build with no data renders the words and the links only.
//
// Copy rules, kept deliberately: short declarative sentences, no eyebrow over
// every band, no subtitles under the headings or the cards, headings in Title
// Case (the hub shelf matches). The page has two headings after
// the H1 and both name what is under them.

const CONTAINER = "w-full max-w-6xl mx-auto px-5 sm:px-6";

export default function Home() {
  const summary = loadSummary();
  const official = summary?.official ?? null;
  const hours = official?.hoursArchived ?? summary?.totals.hoursArchived ?? null;
  const sites = summary?.sites ?? [];
  const months = summary?.monthly ?? [];
  // The hero links the hub. It was withheld on 2026-09-25 until the hub was
  // polished (release 9 slices C1, C1b, C2), re-enabled the same evening, and
  // withheld AGAIN on 2026-09-26 on the operator's word ("hide the hub again for
  // now"). The hub stays deployed and reachable by URL; only this link is off.
  // The URL comes from homepage.json (the hub's own build reads it too).
  const HUB_LINK_ENABLED = false;
  const hubUrl = HUB_LINK_ENABLED ? (currentHomepage().siteUrl ?? null) : null;

  return (
    <>
      {/* ── Hero: the claim, the two ways in, then the evidence ───────────── */}
      <section className={`${CONTAINER} pt-12 pb-14 sm:pt-16 sm:pb-20`}>
        <div className="flex flex-col gap-6">
          <h1
            className="reveal font-display text-[1.75rem] leading-[1.12] font-semibold tracking-[-0.01em] text-[var(--foreground)] sm:text-[2.25rem] lg:text-[2.625rem]"
            style={{ "--d": "60ms" } as React.CSSProperties}
          >
            {hours ? (
              <>
                <span className="tabular font-medium">
                  {hours.toLocaleString()}
                </span>{" "}
                hours of speech, searchable to the second.
              </>
            ) : (
              <>Every word a channel said, searchable to the second.</>
            )}
          </h1>

          <p
            className="reveal max-w-2xl text-[1.0625rem] leading-relaxed text-[var(--muted-foreground)]"
            style={{ "--d": "140ms" } as React.CSSProperties}
          >
            Download a channel&rsquo;s back catalogue, transcribe it on your own
            hardware, publish a static site you host yourself.
          </p>

          <div
            className="reveal flex flex-wrap items-center gap-x-8 gap-y-4"
            style={{ "--d": "200ms" } as React.CSSProperties}
          >
            <Link
              href="/downloads/"
              className="inline-flex items-center gap-2 bg-[var(--foreground)] px-6 py-3 font-mono text-xs uppercase tracking-[0.16em] text-[var(--background)] rounded-[var(--radius)] hover:bg-[var(--brand)] hover:text-[var(--brand-ink)] transition-colors"
            >
              Download the source
            </Link>
            <Link
              href="/docs/install/"
              className="font-mono text-xs uppercase tracking-[0.16em] text-[var(--muted-foreground)] underline decoration-[var(--border-strong)] underline-offset-[6px] hover:text-[var(--foreground)] transition-colors"
            >
              Read the setup guide →
            </Link>
            {hubUrl && (
              <a
                href={hubUrl}
                className="inline-flex items-center gap-2 border border-[var(--border-strong)] px-6 py-3 font-mono text-xs uppercase tracking-[0.16em] text-[var(--foreground)] rounded-[var(--radius)] hover:border-[var(--brand)] hover:text-[var(--brand)] transition-colors"
              >
                Search all archives
              </a>
            )}
          </div>

          {months.length > 0 && sites.length > 0 && (
            <div
              className="reveal mt-6"
              style={{ "--d": "280ms" } as React.CSSProperties}
            >
              <ArchiveGrowthChart months={months} sites={sites} />
            </div>
          )}
        </div>
      </section>

      {/* ── The family's numbers ─────────────────────────────────────────── */}
      {official && official.sites > 0 && (
        <section className={`${CONTAINER} pb-14 sm:pb-20`}>
          <FamilyStats
            official={official}
            generatedAt={summary?.generatedAt ?? null}
          />
        </section>
      )}

      {/* ── Official Instances ───────────────────────────────────────────── */}
      {/* `#instances` is where every archive's header links (common/lib/
          project.ts INSTANCES_URL); `scroll-mt` is the sticky header's height
          (the bar, and below md the nav's rule under it), so the section's top
          edge lands just under it. With no sites the section is absent and the
          link lands on the top of the page. */}
      {sites.length > 0 && (
        <section id="instances" className="scroll-mt-24 md:scroll-mt-14 border-t border-[var(--border)]">
          <div className={`${CONTAINER} py-14 sm:py-20`}>
            <h2 className="mb-8 font-display text-2xl font-semibold text-[var(--foreground)]">
              Official Instances
            </h2>
            <ArchiveCards sites={sites} />
          </div>
        </section>
      )}

      {/* ── What It Does ─────────────────────────────────────────────────── */}
      {/* Three short paragraphs, not three titled panels: without titles,
          three one-sentence items read as prose, not as a feature grid. */}
      <section className="border-t border-[var(--border)]">
        <div className={`${CONTAINER} py-14 sm:py-20`}>
          <h2 className="font-display text-2xl font-semibold text-[var(--foreground)]">
            What It Does
          </h2>
          <div className="mt-6 flex max-w-2xl flex-col gap-4 text-[1.0625rem] leading-relaxed text-[var(--muted-foreground)]">
            <p>
              Archilyzer downloads a channel&rsquo;s videos and keeps up with
              new uploads. It uses the platform&rsquo;s captions where they
              exist and transcribes the audio on your machine where they
              don&rsquo;t.
            </p>
            <p>
              The result is a static site of plain HTML and JSON that any file
              host can serve. Search covers every transcript and opens the video
              at the second the words were said.
            </p>
            <p>
              It is a program you run, not a service. There is no account and
              nothing phones home.{" "}
              <Link
                href="/docs/"
                className="text-[var(--foreground)] underline decoration-[var(--border-strong)] underline-offset-4 hover:decoration-[var(--foreground)]"
              >
                The docs
              </Link>{" "}
              cover setup and deployment.
            </p>
          </div>
        </div>
      </section>
    </>
  );
}