import { LogoLink } from "@/components/article/logo-link";
import { CloudToggle } from "@/components/cloud/cloud-toggle";
import { LinkedInIcon, LogoMark } from "@/components/icons";
import { ThemeToggle } from "@/components/theme/theme-toggle";
import { Button } from "@/components/ui/button";
import { site } from "@/lib/site";

/**
 * Site header — Figma nodes 81:303 / 79:253. A 48px row on the content column
 * (--content-inset, §4 of globals.css): logo left, three 48×48 icon buttons
 * right (node 81:287). The column is the comp's — the logo glyph on x=264 and
 * the cluster's right edge on 1464 at 1728 — and it is the same 1200px measure
 * the tile row uses, so the chrome lines up with the tiles beneath it rather
 * than hanging off the viewport corner. With a study open it hands that column
 * back to --page-inset (globals.css §4c).
 *
 * The distance from the *top* is still --page-inset. Static in the flow rather
 * than fixed or sticky: the buttons' default state is transparent, so a pinned
 * header would let content scroll straight through it; and static makes the
 * comp's vertical rhythm fall out for free — 32 top + 48 row + the page's 8px
 * = the tagline's 88px in node 81:306.
 *
 * Server Component. Only <ThemeToggle /> and <CloudToggle /> ship JavaScript.
 */
export function Header() {
  const linkedin = site.socials[0];

  return (
    // z-10 clears the fixed WebGL canvas at z-0 — an unpositioned element
    // would otherwise paint below it.
    <header className="page-measure relative z-10 pt-[var(--page-inset)]">
      <div className="flex h-12 items-center justify-between">
        {/* The mark rides --text-display, the same fluid rung as the tagline
            below it (24 → 32px), so the two stay the same size at every width
            instead of drifting apart as the type grows.

            The box stays a fixed 48 — the tap target, and a stable disc for
            the cursor to lock onto, matching the buttons opposite. So the
            negative margin that pulls that padded box back and lands the
            *glyph* on the column's left edge — the first tile's, node 81:252's
            x=264 — has to go fluid too: it is just the half difference, -12px
            at 24 and -8px at 32.

            No .article-hide: with a study open the logo stays lit and becomes
            the fourth door out of it, which is why it is a client leaf. */}
        <LogoLink
          aria-label={`${site.name} — home`}
          className="cloud-hide cloud-rise reveal ml-[calc((var(--text-display)_-_3rem)/2)] inline-flex size-12 items-center justify-center rounded-md text-fg outline-none focus-visible:ring-2 focus-visible:ring-fg/40"
        >
          <LogoMark className="size-[var(--text-display)]" />
        </LogoLink>

        {/* Not a <nav>: three actions, only one of which is navigation. Each
            button's 48px box ends on the column's right edge — the last tile's,
            node 81:287's 1304 + 160 = 1464 — so at rest the right edge reads
            16px further in than the left glyph; that asymmetry is the comp's,
            not a bug.

            .cloud-hide goes on the leaves, never on this wrapper: the row has
            to keep all three boxes so the cloud button holds its slot when the
            other two fade (nodes 81:287 / 87:276 put it in the same place in
            both states), and a wrapper below opacity 1 would form a backdrop
            root over the whole cluster. .cloud-rise adds the 8px retract into
            the top edge that the tagline and the tiles do not get. */}
        <div className="flex items-center gap-2">
          <Button
            asChild
            variant="ghost"
            size="icon"
            className="cloud-hide cloud-rise reveal [--reveal-delay:80ms]"
          >
            <a
              href={linkedin.href}
              target="_blank"
              rel="me noreferrer"
              aria-label={`${site.name} on LinkedIn (opens in a new tab)`}
            >
              <LinkedInIcon />
            </a>
          </Button>
          <ThemeToggle className="cloud-hide cloud-rise reveal [--reveal-delay:140ms]" />
          <CloudToggle className="reveal [--reveal-delay:200ms]" />
        </div>
      </div>
    </header>
  );
}