// Sticky top navigation. Hairline below on scroll past hero.
function TopNav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  const links = [
    ["Estudio", "#estudio"],
    ["Equipo", "#equipo"],
    ["Áreas", "#practica"],
    ["Contacto", "#contacto"],
    ["FAQ", "#faq"],
  ];

  return (
    <header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        background: scrolled ? "rgba(250, 250, 247, 0.85)" : "transparent",
        backdropFilter: scrolled ? "blur(12px)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(12px)" : "none",
        boxShadow: scrolled ? "0 1px 0 var(--line)" : "none",
        transition: "background 250ms var(--ease-std), box-shadow 250ms var(--ease-std)",
      }}
    >
      <div
        style={{
          maxWidth: "var(--container-max)",
          margin: "0 auto",
          padding: "18px var(--container-pad)",
          display: "flex",
          alignItems: "center",
          gap: "2rem",
        }}
      >
        <a
          href="#top"
          aria-label="Riveros | Torres & Cía. — Inicio"
          style={{ color: "var(--ink)", textDecoration: "none", display: "inline-flex" }}
        >
          <img src="assets/logo.svg" alt="" style={{ height: 26, width: "auto", display: "block" }} />
        </a>

        <nav
          style={{
            display: "flex",
            alignItems: "center",
            gap: "2.25rem",
            marginLeft: "auto",
          }}
          className="rt-desktop-nav"
        >
          {links.map(([label, href]) => (
            <a
              key={href}
              href={href}
              style={{
                fontFamily: "var(--font-ui)",
                fontSize: 14,
                fontWeight: 500,
                color: "var(--ink)",
                textDecoration: "none",
                letterSpacing: "0.005em",
              }}
              onMouseEnter={(e) => (e.currentTarget.style.color = "var(--accent)")}
              onMouseLeave={(e) => (e.currentTarget.style.color = "var(--ink)")}
            >
              {label}
            </a>
          ))}

          <a
            href="#contacto"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "8px 16px",
              border: "1px solid var(--accent)",
              color: "var(--accent)",
              borderRadius: 999,
              fontFamily: "var(--font-ui)",
              fontSize: 13,
              fontWeight: 500,
              textDecoration: "none",
              transition: "background 250ms var(--ease-std)",
            }}
            onMouseEnter={(e) => (e.currentTarget.style.background = "var(--accent-tint)")}
            onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
          >
            <MessageCircle width={14} height={14} />
            WhatsApp
          </a>
        </nav>

        <button
          aria-label="Abrir menú"
          onClick={() => setOpen((v) => !v)}
          className="rt-mobile-toggle"
          style={{
            marginLeft: "auto",
            background: "transparent",
            border: 0,
            color: "var(--ink)",
            display: "none",
            cursor: "pointer",
          }}
        >
          <Menu width={22} height={22} />
        </button>
      </div>

      {open && (
        <div
          className="rt-mobile-panel"
          style={{
            borderTop: "1px solid var(--line)",
            padding: "12px var(--container-pad) 20px",
            background: "var(--bg-base)",
          }}
        >
          {links.map(([label, href]) => (
            <a
              key={href}
              href={href}
              onClick={() => setOpen(false)}
              style={{
                display: "block",
                padding: "10px 0",
                fontFamily: "var(--font-display)",
                fontSize: 20,
                color: "var(--ink)",
                textDecoration: "none",
                borderBottom: "1px solid var(--line)",
              }}
            >
              {label}
            </a>
          ))}
        </div>
      )}
    </header>
  );
}

Object.assign(window, { TopNav });