"use client";

/**
 * Sticky header.
 * - Condenses (smaller, blurred, bordered) after the hero via scroll listener.
 * - Top scroll-progress bar reads the --scroll-progress CSS var fed by Lenis.
 * - Mobile: accessible disclosure menu (real <button aria-expanded>, Esc to
 *   close, focus returns to the toggle, body scroll locked while open).
 */
import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import Magnetic from "./Magnetic";
import { SITE } from "../content";

const NAV = [
  { href: "#services", label: "Services" },
  { href: "#work", label: "Work" },
  { href: "#process", label: "About" },
  { href: "#faq", label: "FAQ" },
];

export default function SiteHeader() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const toggleRef = useRef<HTMLButtonElement>(null);

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

  useEffect(() => {
    if (!open) return;
    document.body.style.overflow = "hidden";
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setOpen(false);
        toggleRef.current?.focus();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);

  return (
    <header className={`site-head ${scrolled ? "is-scrolled" : ""}`}>
      <div className="progress-bar" aria-hidden="true" />
      <div className="site-head__inner">
        <Link href="#main" className="brand" aria-label={`${SITE.name} — home`}>
          <span className="brand__mark" aria-hidden="true">
            <span className="brand__dot" />
          </span>
          <span className="brand__name">Feedback&nbsp;Studios</span>
        </Link>

        <nav className="site-nav" aria-label="Primary">
          <ul>
            {NAV.map((n) => (
              <li key={n.href}>
                <a href={n.href} data-cursor="">
                  {n.label}
                </a>
              </li>
            ))}
          </ul>
        </nav>

        <div className="site-head__cta">
          <Magnetic strength={0.5}>
            <Link href={SITE.booking} className="btn btn--accent btn--sm" data-cursor="Let's talk">
              Get a growth audit
            </Link>
          </Magnetic>
        </div>

        <button
          ref={toggleRef}
          className={`burger ${open ? "is-open" : ""}`}
          aria-expanded={open}
          aria-controls="mobile-menu"
          aria-label={open ? "Close menu" : "Open menu"}
          onClick={() => setOpen((v) => !v)}
        >
          <span /><span /><span />
        </button>
      </div>

      <div id="mobile-menu" className={`mobile-menu ${open ? "is-open" : ""}`} hidden={!open}>
        <nav aria-label="Mobile">
          <ul>
            {NAV.map((n) => (
              <li key={n.href}>
                <a href={n.href} onClick={() => setOpen(false)}>
                  {n.label}
                </a>
              </li>
            ))}
            <li>
              <Link
                href={SITE.booking}
                className="btn btn--accent"
                onClick={() => setOpen(false)}
              >
                Get a growth audit
              </Link>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
}
