Artista-Filmcamp/src/components/SiteHeader.tsx

"use client";

import { LazyMotion, domAnimation, m } from "motion/react";
import { useEffect, useRef, useState } from "react";
import { NAV_ITEMS } from "@/content/site";

export function SiteHeader() {
  const [active, setActive] = useState<string | null>(null);
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const menuButton = useRef<HTMLButtonElement>(null);
  const firstLink = useRef<HTMLAnchorElement>(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Markiert den Abschnitt, der gerade die Bildschirmmitte kreuzt.
  useEffect(() => {
    const sections = NAV_ITEMS.map((item) => document.getElementById(item.id)).filter(Boolean) as HTMLElement[];
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) if (entry.isIntersecting) setActive(entry.target.id);
      },
      { rootMargin: "-45% 0px -50% 0px" },
    );
    sections.forEach((s) => observer.observe(s));
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (!menuOpen) return;
    firstLink.current?.focus();
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setMenuOpen(false);
        menuButton.current?.focus();
      }
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [menuOpen]);

  return (
    <header
      className={`sticky top-0 z-40 transition-colors duration-300 ${scrolled ? "bg-plaster/92 shadow-[0_1px_0_var(--color-line)] backdrop-blur" : "bg-transparent"}`}
    >
      <a href="#inhalt" className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-3 focus:z-50 focus:bg-paper focus:px-3 focus:py-2">
        Zum Inhalt springen
      </a>
      <div className="container-edge flex h-16 items-center justify-between gap-6">
        <a href="#top" className="display text-xl tracking-tight" aria-label="ARTISTA Modelcamp 2027, zum Seitenanfang">
          ARTISTA <span className="font-sans text-sm text-stone">Modelcamp 2027</span>
        </a>
        <LazyMotion features={domAnimation}>
          <nav aria-label="Abschnitte" className="hidden lg:block">
            <ul className="flex items-center gap-6 text-[0.9375rem]">
              {NAV_ITEMS.map((item) => (
                <li key={item.id} className="relative">
                  <a
                    href={`#${item.id}`}
                    aria-current={active === item.id ? "location" : undefined}
                    className="block py-2 text-ink/80 hover:text-ink aria-[current]:text-ink"
                  >
                    {item.label}
                  </a>
                  {active === item.id && (
                    <m.span layoutId="nav-indicator" className="absolute inset-x-0 -bottom-0.5 h-px bg-rosso" transition={{ type: "spring", stiffness: 380, damping: 34 }} />
                  )}
                </li>
              ))}
            </ul>
          </nav>
        </LazyMotion>
        <div className="flex items-center gap-3">
          <a href="#preis" className="btn btn-primary hidden min-h-10 px-5 py-2 text-sm sm:inline-flex">
            Platz buchen
          </a>
          <button
            ref={menuButton}
            type="button"
            className="inline-flex h-11 items-center rounded-full border border-ink/30 px-4 text-sm font-semibold lg:hidden"
            aria-expanded={menuOpen}
            aria-controls="mobile-menu"
            onClick={() => setMenuOpen((v) => !v)}
          >
            {menuOpen ? "Schließen" : "Menü"}
          </button>
        </div>
      </div>
      {menuOpen && (
        <nav id="mobile-menu" aria-label="Abschnitte" className="border-t border-line bg-plaster lg:hidden">
          <ul className="container-edge py-4">
            {NAV_ITEMS.map((item, index) => (
              <li key={item.id}>
                <a
                  ref={index === 0 ? firstLink : undefined}
                  href={`#${item.id}`}
                  onClick={() => setMenuOpen(false)}
                  className="display block border-b border-line/70 py-3 text-2xl"
                >
                  {item.label}
                </a>
              </li>
            ))}
          </ul>
        </nav>
      )}
    </header>
  );
}