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

function Nav({ onCTAClick }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const links = [
    { href: "#como-funciona", label: "Como funciona" },
    { href: "#simular", label: "Simular economia" },
    { href: "#prova", label: "Quem usa" },
    { href: "#minas", label: "Minas Gerais" },
    { href: "#faq", label: "Dúvidas" },
  ];

  // Portal renderizado fora do <nav> para evitar o bug do iOS Safari:
  // backdrop-filter no nav cria novo containing block para position:fixed,
  // fazendo drawer/overlay ficarem presos no contexto do nav.
  const drawerPortal = ReactDOM.createPortal(
    React.createElement(React.Fragment, null,
      React.createElement("div", {
        className: `nav-overlay${menuOpen ? " open" : ""}`,
        onClick: () => setMenuOpen(false)
      }),
      React.createElement("div", {
        className: `nav-drawer${menuOpen ? " open" : ""}`,
        "aria-hidden": !menuOpen
      },
        React.createElement("div", { className: "nav-drawer-inner" },
          links.map((l) =>
            React.createElement("a", {
              key: l.href,
              href: l.href,
              onClick: () => setMenuOpen(false)
            }, l.label)
          ),
          React.createElement("a", {
            className: "btn btn-wa",
            href: "https://wa.me/5531971425778",
            target: "_blank",
            rel: "noreferrer",
            onClick: () => setMenuOpen(false)
          }, "Falar no WhatsApp")
        )
      )
    ),
    document.body
  );

  return (
    <React.Fragment>
      <nav className="nav" style={{ boxShadow: scrolled ? "0 2px 14px rgba(13,58,24,0.06)" : "none" }}>
        <div className="container nav-inner">
          <a href="#top" className="nav-logo">
            <span className="nav-rep">Representante MG</span>
            <img src="assets/logo-color.png" alt="iGreen Energy" />
          </a>

          <div className="nav-links">
            {links.map((l) => (
              <a key={l.href} href={l.href}>{l.label}</a>
            ))}
          </div>

          <div className="nav-cta">
            <a className="btn btn-ghost" href="#simular">Simular</a>
            <button className="btn btn-accent" onClick={onCTAClick}>
              Cadastrar conta
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                <path d="M5 12h14M13 5l7 7-7 7" />
              </svg>
            </button>
            <button
              className={`nav-hamburger${menuOpen ? " open" : ""}`}
              aria-label={menuOpen ? "Fechar menu" : "Abrir menu"}
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen(v => !v)}
            >
              <span></span>
              <span></span>
              <span></span>
            </button>
          </div>
        </div>
      </nav>
      {drawerPortal}
    </React.Fragment>
  );
}

window.Nav = Nav;