// Top navigation with real Biolife logo + responsive mobile menu.

function TopNav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [openMobile, setOpenMobile] = React.useState(false);

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

  // Close mobile menu when clicking a link
  React.useEffect(() => {
    if (!openMobile) return;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = ""; };
  }, [openMobile]);

  const links = [
    { href: "#empresa",        label: "A empresa" },
    { href: "#especialidades", label: "Especialidades" },
    { href: "#atuacao",        label: "Atuação" },
    { href: "#estrutura",      label: "Estrutura" },
    { href: "#contato",        label: "Contato" },
  ];

  return (
    <>
      <header
        data-screen-label="Nav"
        style={{
          position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
          background: scrolled ? "rgba(255,255,255,0.92)" : "rgba(255,255,255,0.6)",
          backdropFilter: "saturate(180%) blur(14px)",
          WebkitBackdropFilter: "saturate(180%) blur(14px)",
          borderBottom: scrolled ? "1px solid var(--c-line)" : "1px solid transparent",
          transition: "background .2s, border-color .2s",
        }}>
        <div className="container" style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "14px 40px",
        }}>
          <a href="#topo" style={{ display: "flex", alignItems: "center" }}>
            <img src="assets/logo-biolife.png" alt="Biolife Produtos Médicos"
              style={{ height: 54, width: "auto", display: "block" }}/>
          </a>

          {/* Desktop nav */}
          <nav className="nav-desktop" style={{ display: "flex", alignItems: "center", gap: 4 }}>
            {links.map(l => (
              <a key={l.href} href={l.href}
                style={{
                  padding: "10px 16px",
                  fontSize: 14,
                  fontWeight: 500,
                  color: "var(--c-ink)",
                  borderRadius: 999,
                  whiteSpace: "nowrap",
                  transition: "background .15s, color .15s",
                }}
                onMouseEnter={e => { e.currentTarget.style.background = "var(--c-blue-soft)"; e.currentTarget.style.color = "var(--c-blue-deep)"; }}
                onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--c-ink)"; }}
              >{l.label}</a>
            ))}
            <a href="#contato" className="btn btn-primary" style={{ marginLeft: 14, padding: "10px 20px", fontSize: 13 }}>
              Fale conosco <span className="arrow">→</span>
            </a>
          </nav>

          {/* Mobile hamburger button */}
          <button
            className="nav-mobile-btn"
            onClick={() => setOpenMobile(v => !v)}
            aria-label="Abrir menu"
            style={{
              display: "none",
              width: 44, height: 44,
              alignItems: "center", justifyContent: "center",
              background: "transparent",
              border: "1px solid var(--c-line)",
              borderRadius: 999,
              padding: 0,
              cursor: "pointer",
            }}>
            <svg width="20" height="14" viewBox="0 0 20 14" fill="none" style={{ display: "block" }}>
              {openMobile ? (
                <g stroke="var(--c-navy)" strokeWidth="1.8" strokeLinecap="round">
                  <line x1="3" y1="2" x2="17" y2="12"/>
                  <line x1="17" y1="2" x2="3" y2="12"/>
                </g>
              ) : (
                <g stroke="var(--c-navy)" strokeWidth="1.8" strokeLinecap="round">
                  <line x1="2" y1="2"  x2="18" y2="2"/>
                  <line x1="2" y1="7"  x2="18" y2="7"/>
                  <line x1="2" y1="12" x2="18" y2="12"/>
                </g>
              )}
            </svg>
          </button>
        </div>
      </header>

      {/* Mobile menu overlay */}
      {openMobile && (
        <div
          onClick={() => setOpenMobile(false)}
          style={{
            position: "fixed",
            top: 84, left: 0, right: 0, bottom: 0,
            background: "rgba(255,255,255,0.98)",
            backdropFilter: "blur(14px)",
            WebkitBackdropFilter: "blur(14px)",
            zIndex: 99,
            padding: "30px 24px",
            overflowY: "auto",
            animation: "fadeIn .18s ease",
          }}>
          <nav style={{
            display: "flex", flexDirection: "column", gap: 4,
            maxWidth: 480, margin: "0 auto",
          }}>
            {links.map(l => (
              <a key={l.href} href={l.href}
                onClick={() => setOpenMobile(false)}
                style={{
                  padding: "18px 20px",
                  fontSize: 20,
                  fontFamily: "var(--font-serif)",
                  color: "var(--c-navy)",
                  borderBottom: "1px solid var(--c-line)",
                  transition: "background .15s",
                }}
              >{l.label}</a>
            ))}
            <a href="#contato"
              onClick={() => setOpenMobile(false)}
              className="btn btn-primary"
              style={{
                marginTop: 28, padding: "16px",
                justifyContent: "center", fontSize: 15,
              }}>
              Fale conosco <span className="arrow">→</span>
            </a>
          </nav>
        </div>
      )}
    </>
  );
}

Object.assign(window, { TopNav });