/* global React */
const { useState, useEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

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

  const links = [
    { href: "#metodo", label: "Método OPV" },
    { href: "#jornada", label: "Jornada" },
    { href: "#para-quem", label: "Para quem" },
    { href: "#sede", label: "Sede" },
    { href: "#faq", label: "FAQ" },
  ];

  return (
    <header
      style={{
        position: "fixed",
        top: scrolled ? 16 : 22,
        left: "50%",
        transform: "translateX(-50%)",
        width: "calc(100% - 32px)",
        maxWidth: 1240,
        zIndex: 50,
        transition: "top 240ms cubic-bezier(0.2,0,0,1)",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 16,
          padding: "10px 12px 10px 22px",
          borderRadius: 999,
          background: scrolled
            ? "rgba(11,11,14,0.78)"
            : "rgba(11,11,14,0.55)",
          backdropFilter: "blur(14px) saturate(1.4)",
          WebkitBackdropFilter: "blur(14px) saturate(1.4)",
          border: "1px solid rgba(255,255,255,0.08)",
          boxShadow: scrolled
            ? "0 18px 40px rgba(0,0,0,0.35)"
            : "0 8px 24px rgba(0,0,0,0.25)",
          transition: "all 240ms cubic-bezier(0.2,0,0,1)",
        }}
      >
        {/* Brand */}
        <a
          href="#top"
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 10,
            textDecoration: "none",
          }}
        >
          <img
            src={(window.__resources && window.__resources.logoWhite) || "assets/logo-cabecalho-white.png"}
            alt="MaveUp"
            style={{ height: 22, display: "block" }}
          />
        </a>

        {/* Desktop nav */}
        <nav
          className="nav-desktop"
          style={{ display: "flex", alignItems: "center", gap: 6 }}
        >
          {links.map((l) => (
            <a
              key={l.href}
              href={l.href}
              style={{
                color: "rgba(255,255,255,0.78)",
                fontFamily: "var(--font-body)",
                fontSize: 14,
                fontWeight: 500,
                textDecoration: "none",
                padding: "8px 14px",
                borderRadius: 999,
                transition: "color 200ms, background 200ms",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.color = "#fff";
                e.currentTarget.style.background = "rgba(255,255,255,0.06)";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.color = "rgba(255,255,255,0.78)";
                e.currentTarget.style.background = "transparent";
              }}
            >
              {l.label}
            </a>
          ))}
        </nav>

        {/* CTA */}
        <a
          href="#diagnostico"
          className="btn btn-primary"
          style={{ padding: "11px 18px", fontSize: 14 }}
        >
          Diagnóstico
          <span className="arrow" aria-hidden="true">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7M9 7h8v8"/></svg>
          </span>
        </a>

        {/* Mobile toggle */}
        <button
          className="nav-toggle"
          aria-label="Abrir menu"
          onClick={() => setOpen((v) => !v)}
          style={{
            display: "none",
            background: "transparent",
            border: "1px solid rgba(255,255,255,0.18)",
            color: "#fff",
            width: 40, height: 40, borderRadius: 999, cursor: "pointer",
          }}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="4" y1="8" x2="20" y2="8"/><line x1="4" y1="16" x2="20" y2="16"/></svg>
        </button>
      </div>

      {/* Mobile drawer */}
      {open && (
        <div
          style={{
            marginTop: 10,
            background: "rgba(11,11,14,0.92)",
            border: "1px solid rgba(255,255,255,0.08)",
            borderRadius: 20,
            padding: 16,
            display: "flex",
            flexDirection: "column",
            gap: 4,
          }}
        >
          {links.map((l) => (
            <a
              key={l.href}
              href={l.href}
              onClick={() => setOpen(false)}
              style={{
                color: "#fff", textDecoration: "none",
                padding: "12px 14px", borderRadius: 12,
                fontSize: 15, fontWeight: 500,
              }}
            >
              {l.label}
            </a>
          ))}
        </div>
      )}

      <style>{`
        @media (max-width: 880px) {
          .nav-desktop { display: none !important; }
          .nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
        }
      `}</style>
    </header>
  );
}

window.Nav = Nav;