// nav.jsx — sticky top navigation
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["Inicio", "#inicio"],
    ["Áreas legales", "#areas"],
    ["Preguntas frecuentes", "#preguntas"],
    ["Contacto", "#contacto"],
  ];

  return (
    <header className={`fixed inset-x-0 top-0 z-40 transition-all duration-300 ${scrolled ? "bg-paper/95 backdrop-blur-md shadow-[0_1px_0_rgba(58,46,42,0.10)]" : "bg-transparent"}`}>
      <div className="mx-auto flex h-[86px] max-w-7xl items-center justify-between px-6 lg:px-10">
        {/* Wordmark */}
        <a href="#inicio" className="group flex items-center gap-4">
          <span className="flex h-[52px] w-[52px] items-center justify-center rounded-sm bg-espresso text-bronzelt shadow-[0_8px_20px_-10px_rgba(14,74,94,0.7)] ring-1 ring-bronze/40 transition-transform duration-200 group-hover:scale-105">
            <span className="block h-7 w-7"><Icon name="scale" stroke={1.5} /></span>
          </span>
          <span className="leading-none">
            <span className="block whitespace-nowrap font-roman text-[23px] tracking-[0.11em] text-ink">PAULA ROJAS ROJAS</span>
            <span className="mt-1.5 flex items-center gap-2 font-body text-[11px] font-bold uppercase tracking-[0.32em] text-bronze">
              Abogada
              <span className="h-[3px] w-[3px] rounded-full bg-bronze"></span>
              Talca
            </span>
          </span>
        </a>

        {/* Desktop links */}
        <nav className="hidden items-center gap-9 lg:flex">
          {links.map(([label, href]) => (
            <a key={href} href={href}
               className="relative font-body text-[14px] font-semibold tracking-wide text-ink/75 transition-colors hover:text-ink after:absolute after:-bottom-1.5 after:left-0 after:h-px after:w-0 after:bg-bronze after:transition-all hover:after:w-full">
              {label}
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-3">
          <a href={`tel:${TEL}`} className="hidden items-center gap-2 font-body text-[14px] font-semibold text-ink/80 transition-colors hover:text-bronze xl:flex">
            <span className="block h-4 w-4 text-bronze"><Icon name="phone" /></span>
            +56 9 9291 9059
          </a>
          <a href={WA_AGENDAR} target="_blank" rel="noopener"
             className="hidden whitespace-nowrap items-center gap-2 rounded-sm bg-bronze px-5 py-2.5 font-body text-[13.5px] font-semibold tracking-wide text-white transition-all hover:brightness-95 sm:inline-flex">
            Agendar consulta
          </a>
          {/* Mobile toggle */}
          <button onClick={() => setOpen(!open)} aria-label="Menú"
                  className="flex h-10 w-10 items-center justify-center rounded-sm border border-ink/15 text-ink lg:hidden">
            <div className="space-y-[5px]">
              <span className={`block h-px w-5 bg-current transition-transform ${open ? "translate-y-[6px] rotate-45" : ""}`}></span>
              <span className={`block h-px w-5 bg-current transition-opacity ${open ? "opacity-0" : ""}`}></span>
              <span className={`block h-px w-5 bg-current transition-transform ${open ? "-translate-y-[6px] -rotate-45" : ""}`}></span>
            </div>
          </button>
        </div>
      </div>

      {/* Mobile menu */}
      <div className={`overflow-hidden border-t border-ink/10 bg-paper/98 backdrop-blur-md transition-all duration-300 lg:hidden ${open ? "max-h-96" : "max-h-0"}`}>
        <nav className="flex flex-col gap-1 px-6 py-4">
          {links.map(([label, href]) => (
            <a key={href} href={href} onClick={() => setOpen(false)}
               className="border-b border-ink/8 py-3 font-body text-[15px] font-semibold text-ink/80">{label}</a>
          ))}
          <a href={WA_AGENDAR} target="_blank" rel="noopener"
             className="mt-3 inline-flex items-center justify-center rounded-sm bg-bronze px-5 py-3 font-body text-[14px] font-semibold text-white">Agendar consulta</a>
        </nav>
      </div>
    </header>
  );
}
Object.assign(window, { Nav });