import { ArticleLayer } from "@/components/article/article-layer";
import { ArticleProvider } from "@/components/article/article-provider";
import { ArticleScript } from "@/components/article/article-script";
import { JsonLd } from "@/components/seo/json-ld";
import { Header } from "@/components/site/header";
import { TileRail } from "@/components/site/tile-rail";
import { personJsonLd } from "@/lib/seo";
import { site } from "@/lib/site";

export default function HomePage() {
  return (
    <>
      <JsonLd data={personJsonLd()} />

      {/* Before any of the markup §4c styles: on a direct /#work/<id> load
          it sets [data-article] pre-paint, so the open state is the first
          frame rather than a flash of the closed one. */}
      <ArticleScript />

      {/* The provider is page-level, not layout-level: /404 has no tiles
          and no panel, and the context has to wrap both consumers — the
          rail's TileLinks and the panel's CloseButton. */}
      <ArticleProvider>
        {/* First in the tree for tab order, and a sibling of <Header> on
            purpose: .skip-link is z-100, which would be capped inside the
            header's own z-10 stacking context. */}
        {/* .cloud-hide too: without it a keyboard user in cloud mode can tab to
            a skip link that throws focus into an inert, invisible <main>. */}
        <a href="#main" className="cloud-hide skip-link">
          Skip to content
        </a>

      {/* The first screen, as one column: chrome, tagline, then the rail at
          mt-auto. This is what makes the rail sit on the bottom edge at every
          viewport height — the middle, where the WebGL model reads, takes up
          the slack rather than the tiles growing or a spacer being guessed at.

          min-h-dvh, never h-dvh: when the three do not fit (stacked at narrow
          widths, or a very short window) the column grows and the page scrolls
          instead of crushing the tiles.

          The height belongs *here* and not on <main>. <main> alone at min-h-dvh
          sits below the 80px header, so the two sum to 100dvh + 80 and produce
          a scrollbar over nothing; with the header inside the column that
          cannot happen. And no position/z-index on this div — plain flex forms
          no stacking context, so the header's z-10 and main's z-[1] keep
          resolving against the fixed canvas exactly as before. */}
        <div className="flex min-h-dvh flex-col">
          <Header />

          {/* Same content column as the header and the rail, so the tagline
              hangs off the logo's left edge and both sit on the first tile's;
              pt-2 is the comp's 8px gap. */}
          <main
            id="main"
            tabIndex={-1}
            className="page-measure relative z-[1] pt-2 outline-none"
          >
            {/* text-display is the fluid 24→32px rung, and it carries the comp's
                30/24 line-height as its paired modifier — so only the weight has
                to be restated against @layer base's 700.

                The measure is em, not px: at 24px, 15.833em is 380px exactly (the
                comp), and because it is relative to this element's own font-size
                it grows in lockstep with the clamp. A fixed 380px box would have
                reflowed the tagline from three lines to four as the type scaled;
                in em the line count holds across the whole range.

                .article-hide: the panel takes the tagline's ground, so the
                tagline steps aside — same fade as cloud mode, keyed to
                [data-article] (§4c). */}
            <h1 className="article-hide cloud-hide reveal max-w-[15.833em] text-display font-normal text-fg [--reveal-delay:280ms] [--reveal-from:12px]">
              {site.tagline}
            </h1>
          </main>

          <TileRail />
        </div>

        {/* After the column: DOM order puts the panel's tab stops after the
            rail's. Closed, it renders nothing visible (display:none). */}
        <ArticleLayer />
      </ArticleProvider>
    </>
  );
}