"use client";

/**
 * SiteHeader — fixed top nav. Compacts (adds a glass backdrop) once you scroll
 * past the hero, and includes a mobile menu toggle. The wordmark is real text
 * ("feedback studios") with the brand mark inline.
 */

import { useEffect, useRef, useState } from "react";
import PillMark from "./PillMark";

const links = [
  { href: "#ventaja", label: "Ventaja" },
  { href: "#servicios", label: "Servicios" },
  { href: "#sectores", label: "Sectores" },
  { href: "#paquetes", label: "Paquetes" },
];

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

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

  // Close the mobile menu on Escape.
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <header
      ref={headerRef}
      className={`site-header${scrolled ? " is-scrolled" : ""}${open ? " is-open" : ""}`}
    >
      <div className="site-header__inner">
        <a className="brand hoverable" href="#top" aria-label="Feedback Studios, inicio">
          <PillMark className="brand__mark" title="Feedback Studios" />
          <span className="brand__word">
            feedback<span className="brand__word-2">studios</span>
          </span>
        </a>

        <nav className="site-nav" aria-label="Principal">
          <ul>
            {links.map((l) => (
              <li key={l.href}>
                <a className="hoverable" href={l.href} onClick={() => setOpen(false)}>
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
          <a className="btn btn--sm btn--primary hoverable" href="#contacto" onClick={() => setOpen(false)}>
            <span>Hablemos</span>
          </a>
        </nav>

        <button
          type="button"
          className="site-header__toggle hoverable"
          aria-expanded={open}
          aria-label={open ? "Cerrar menú" : "Abrir menú"}
          onClick={() => setOpen((v) => !v)}
        >
          <span />
          <span />
        </button>
      </div>
    </header>
  );
}