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

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    { id: "app", label: "Início" },
    { id: "features", label: "Funcionalidades" },
    { id: "how", label: "Como funciona" },
    { id: "diferencial", label: "Diferencial" },
    { id: "future", label: "Futuro" },
    { id: "pricing", label: "Plano" },
  ];
  return (
    <div style={{ position: "fixed", top: 16, left: 0, right: 0, zIndex: 50, display: "flex", justifyContent: "center", padding: "0 16px", pointerEvents: "none" }}>
      <div style={{ width: "100%", maxWidth: 1280, position: "relative", pointerEvents: "auto" }}>
        <nav style={{
          height: 72,
          borderRadius: 999,
          background: scrolled ? "rgba(10,15,30,0.75)" : "rgba(10,15,30,0.55)",
          backdropFilter: "blur(24px) saturate(160%)",
          WebkitBackdropFilter: "blur(24px) saturate(160%)",
          border: "1px solid rgba(255,255,255,0.08)",
          boxShadow: scrolled
            ? "0 24px 60px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.10)"
            : "0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08)",
          display: "flex", alignItems: "center", padding: "0 12px 0 28px", gap: 8,
          transition: "all .45s cubic-bezier(0.16,1,0.3,1)",
        }}>
          <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10, paddingRight: 14, marginRight: 4, borderRight: "1px solid rgba(255,255,255,0.08)", flexShrink: 0 }}>
            <img src="assets/ata-logo.svg" alt="ATA" style={{ height: 24, filter: "brightness(0) invert(1)" }} />
          </a>
          <div className="nav-links" style={{ display: "flex", alignItems: "center", gap: 2, marginLeft: 6, flex: 1 }}>
            {links.map(l => (
              <a key={l.id} href={`#${l.id}`} style={{
                padding: "10px 16px", borderRadius: 999, color: "var(--ata-fg-muted)",
                fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 14,
                textDecoration: "none", transition: "all .3s cubic-bezier(0.16,1,0.3,1)",
              }}
              onMouseEnter={e => { e.currentTarget.style.background = "rgba(255,255,255,0.05)"; e.currentTarget.style.color = "var(--ata-fg)"; }}
              onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--ata-fg-muted)"; }}>
                {l.label}
              </a>
            ))}
          </div>
          <div className="nav-cta" style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 8 }}>
            <GlowButton size="md" href="#pricing" style={{ width: 140 }}>Assinar</GlowButton>
          </div>
          <button
            className="nav-burger"
            onClick={() => setOpen(o => !o)}
            aria-label={open ? "Fechar menu" : "Abrir menu"}
            style={{
              display: "none",
              marginLeft: "auto",
              background: open ? "rgba(91,127,255,0.12)" : "rgba(255,255,255,0.06)",
              border: "1px solid rgba(255,255,255,0.10)",
              borderRadius: 14, cursor: "pointer",
              color: "var(--ata-fg)", padding: "10px 12px",
              alignItems: "center", justifyContent: "center",
              transition: "all .3s",
            }}
          >
            <Icon name={open ? "x" : "menu"} size={20} stroke={1.75} />
          </button>
        </nav>

        {open && (
          <div style={{
            position: "absolute", top: "calc(100% + 8px)", left: 0, right: 0,
            background: "rgba(8,13,28,0.97)",
            backdropFilter: "blur(32px) saturate(180%)",
            WebkitBackdropFilter: "blur(32px) saturate(180%)",
            border: "1px solid rgba(255,255,255,0.08)",
            borderRadius: 24, overflow: "hidden",
            boxShadow: "0 24px 60px rgba(0,0,0,0.65)",
          }}>
            {links.map((l, i) => (
              <a
                key={l.id}
                href={`#${l.id}`}
                onClick={() => setOpen(false)}
                style={{
                  display: "flex", alignItems: "center",
                  padding: "16px 24px",
                  color: "var(--ata-fg-muted)",
                  fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 16,
                  textDecoration: "none",
                  borderBottom: i < links.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "none",
                  transition: "background .2s, color .2s",
                }}
                onMouseEnter={e => { e.currentTarget.style.background = "rgba(255,255,255,0.04)"; e.currentTarget.style.color = "var(--ata-fg)"; }}
                onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--ata-fg-muted)"; }}
              >
                {l.label}
              </a>
            ))}
            <div style={{ padding: "16px 24px" }} onClick={() => setOpen(false)}>
              <GlowButton size="md" href="#pricing" style={{ width: "100%" }}>Assinar agora</GlowButton>
            </div>
          </div>
        )}
      </div>

      <style>{`
        @media (max-width: 760px) {
          .nav-links { display: none !important; }
          .nav-cta  { display: none !important; }
          .nav-burger { display: flex !important; }
        }
        @media (min-width: 761px) {
          .nav-burger { display: none !important; }
        }
      `}</style>
    </div>
  );
}

window.Nav = Nav;