Navbar Fullscreen

"use client";

import { useEffect, useId, useState } from "react";
import { cn } from "@/lib/utils";

export interface NavbarFullscreenProps {
  brand?: string;
  brandHref?: string;
  links?: { label: string; href: string; note?: string }[];
  contact?: { email: string; social: { label: string; href: string }[] };
  className?: string;
}

function FrameMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 24 24" className={cn("size-6 shrink-0", className)}>
      <rect x="1" y="1" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" />
      <path d="M7 1v22M1 7h22" stroke="currentColor" strokeWidth="2" />
      <rect x="15" y="15" width="4" height="4" fill="var(--da-accent)" />
    </svg>
  );
}

/** Minimal bar (logo + “Menu”) that opens a full-screen ink overlay with giant stacked links sliding up line by line, mono notes and contact details; Escape closes and scroll is locked. */
export function NavbarFullscreen({
  brand = "Frame",
  brandHref = "/",
  links = [
    { label: "Templates", href: "#templates", note: "48" },
    { label: "Showcase", href: "#showcase", note: "New" },
    { label: "Pricing", href: "#pricing" },
    { label: "Journal", href: "#journal" },
  ],
  contact = {
    email: "hello@frame.studio",
    social: [
      { label: "Instagram", href: "#ig" },
      { label: "Are.na", href: "#arena" },
      { label: "LinkedIn", href: "#li" },
    ],
  },
  className,
}: NavbarFullscreenProps) {
  const [open, setOpen] = useState(false);
  const id = useId();
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [open]);
  return (
    <header className={cn("relative bg-da-bg text-da-fg", className)}>
      <div className="da-container flex h-16 items-center justify-between">
        <a href={brandHref} className="da-focus flex items-center gap-2.5 rounded-da-sm font-da-display text-lg font-semibold tracking-da-display">
          <FrameMark />
          {brand}
        </a>
        <button
          type="button"
          aria-expanded={open}
          aria-controls={id}
          onClick={() => setOpen(true)}
          className="da-focus flex items-center gap-3 rounded-da-sm font-da-mono text-xs tracking-da-label uppercase"
        >
          Menu
          <span aria-hidden className="grid w-6 gap-1.5">
            <span className="h-px bg-current" />
            <span className="h-px bg-current" />
          </span>
        </button>
      </div>
      {open && (
        <div
          id={id}
          role="dialog"
          aria-modal="true"
          aria-label="Menu"
          className="fixed inset-0 z-50 flex flex-col bg-da-fg text-da-bg transition-opacity duration-(--da-duration) starting:opacity-0"
        >
          <div className="da-container flex h-16 w-full items-center justify-between">
            <span className="font-da-display text-lg font-semibold tracking-da-display">{brand}</span>
            <button type="button" autoFocus onClick={() => setOpen(false)} className="da-focus rounded-da-sm font-da-mono text-xs tracking-da-label uppercase">
              Close
            </button>
          </div>
          <nav aria-label="Main" className="da-container flex w-full flex-1 flex-col justify-center">
            <ul className="border-t border-current/20">
              {links.map((l, i) => (
                <li key={l.href} className="overflow-hidden border-b border-current/20">
                  <a
                    href={l.href}
                    onClick={() => setOpen(false)}
                    className="group da-focus flex items-baseline justify-between py-3 font-da-display text-[clamp(2.5rem,9vw,6rem)] leading-none font-medium tracking-da-display transition-[translate,opacity] duration-(--da-duration-slow) ease-da starting:translate-y-full starting:opacity-0 motion-reduce:transition-none"
                    style={{ transitionDelay: `${80 + i * 60}ms` }}
                  >
                    <span className="transition-transform duration-(--da-duration) group-hover:translate-x-3">{l.label}</span>
                    {l.note && <span className="font-da-mono text-sm font-normal tracking-normal opacity-70">{l.note}</span>}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
          <div className="da-container flex w-full flex-wrap justify-between gap-4 py-8 font-da-mono text-xs tracking-da-label uppercase opacity-80">
            <a href={`mailto:${contact.email}`} className="da-focus rounded-da-sm hover:underline">
              {contact.email}
            </a>
            <ul className="flex gap-5">
              {contact.social.map((s) => (
                <li key={s.label}>
                  <a href={s.href} className="da-focus rounded-da-sm hover:underline">
                    {s.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>
      )}
    </header>
  );
}

export default NavbarFullscreen;