const NAV_ITEMS = [
  { href: "#sobre", label: "Sobre" },
  { href: "#atuacao", label: "Atuação" },
  { href: "#beneficios", label: "Benefícios" },
  { href: "#juridico", label: "Jurídico" },
  { href: "#parcerias", label: "Parcerias" },
  { href: "#conquistas", label: "Conquistas" },
  { href: "#contato", label: "Contato" },
];

const WHATSAPP_URL = "https://wa.me/551431021374?text=Ol%C3%A1%2C%20gostaria%20de%20informa%C3%A7%C3%B5es%20sobre%20o%20S.A.T.E.";

const Nav = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <header className="nav">
        <div className="container nav-inner">
          <a href="#top" className="nav-logo" aria-label="S.A.T.E. — Início">
            <img src="assets/favicon.png" alt="Logo S.A.T.E." />
            <span>
              <span className="sate-mark">S.A.T.E.</span>
              <span className="sate-sub">Bauru e Região</span>
            </span>
          </a>

          <nav className="nav-links" aria-label="Menu principal">
            {NAV_ITEMS.map((i) => (
              <a key={i.href} href={i.href}>{i.label}</a>
            ))}
          </nav>

          <a className="nav-cta" href={WHATSAPP_URL} target="_blank" rel="noopener">
            <Icon name="whatsapp" size={16} />
            Fale no WhatsApp
          </a>

          <button className="nav-burger" aria-label="Abrir menu" onClick={() => setOpen(!open)}>
            <Icon name={open ? "close" : "menu"} />
          </button>
        </div>
      </header>

      <div className={`mobile-menu ${open ? "open" : ""}`}>
        {NAV_ITEMS.map((i) => (
          <a key={i.href} href={i.href} onClick={() => setOpen(false)}>{i.label}</a>
        ))}
        <a href={WHATSAPP_URL} target="_blank" rel="noopener" style={{ color: "#25D366", fontWeight: 700 }}>
          Fale no WhatsApp →
        </a>
      </div>
    </>
  );
};

const WhatsappFab = () => (
  <a className="fab-whatsapp" href={WHATSAPP_URL} target="_blank" rel="noopener" aria-label="Contato via WhatsApp">
    <Icon name="whatsapp" size={28} />
    <span className="fab-tooltip">Fale conosco pelo WhatsApp</span>
  </a>
);

Object.assign(window, { Nav, WhatsappFab, NAV_ITEMS, WHATSAPP_URL });