const navStyles = {
  wrap: {
    position: "fixed", top: 0, left: 0, right: 0, zIndex: 40,
    padding: "10px 40px",
    background: "rgba(0, 0, 0, 0.55)",
    backdropFilter: "blur(14px)",
    WebkitBackdropFilter: "blur(14px)",
    borderBottom: "1px solid rgba(255,255,255,0.06)",
    transition: "padding 0.3s ease"
  },
  inner: { maxWidth: 1280, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 },
  brand: { display: "flex", alignItems: "center", gap: 10, fontFamily: "'Outfit', sans-serif", fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em" },
  brandMark: {
    width: 36, height: 36, borderRadius: "50%",
    background: "#7e0320",
    display: "grid", placeItems: "center", color: "#fbf8f2"
  },
  links: { display: "flex", alignItems: "center", gap: 32, fontSize: 15, color: "rgba(255,255,255,0.8)", fontWeight: 400 },
  link: { cursor: "pointer", transition: "color 0.2s" },
  cta: {
    display: "inline-flex", alignItems: "center", gap: 8,
    padding: "11px 20px",
    background: "var(--warm-900)", color: "var(--cream-50)",
    borderRadius: 999, fontSize: 14, fontWeight: 500,
    transition: "transform 0.2s, background 0.2s"
  },
  menuBtn: {
    width: 44, height: 44, borderRadius: "50%",
    background: "var(--warm-700)", display: "none", placeItems: "center"
  }
};

const Nav = ({ onWhatsApp }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

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

  const items = [
    { label: "Sobre a Diana", href: "#sobre" },
    { label: "O Método", href: "#servicos" },
    { label: "Como funciona", href: "#processo" },
    { label: "Depoimentos", href: "#depoimentos" },
    { label: "Dúvidas", href: "#faq" }
  ];

  return (
    <>
      <nav style={{ ...navStyles.wrap, padding: scrolled ? "8px 40px" : "10px 40px" }}>
        <div style={navStyles.inner}>
          <a href="#top" style={navStyles.brand}>
            <span style={navStyles.brandMark}>
              <IconLeaf size={18} />
            </span>
            <span>Diana Vicente</span>
          </a>
          <div className="nav-links" style={navStyles.links}>
            {items.map(it => (
              <a key={it.href} href={it.href} style={navStyles.link}
                onMouseEnter={e => e.currentTarget.style.color = "var(--sage-700)"}
                onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.8)"}>
                {it.label}
              </a>
            ))}
          </div>
          <button className="nav-menu-btn" style={navStyles.menuBtn} onClick={() => setMobileOpen(true)}>
            <IconMenu />
          </button>
        </div>
      </nav>

      {mobileOpen && (
        <div style={{
          position: "fixed", inset: 0, zIndex: 60, background: "var(--warm-900)",
          padding: 32, display: "flex", flexDirection: "column", gap: 24
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span style={navStyles.brand}>
              <span style={navStyles.brandMark}><IconBody size={18} /></span>
              Diana Vicente
            </span>
            <button style={navStyles.menuBtn} onClick={() => setMobileOpen(false)}>
              <IconClose />
            </button>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 24 }}>
            {items.map(it => (
              <a key={it.href} href={it.href} onClick={() => setMobileOpen(false)}
                style={{
                  fontFamily: "'Outfit', sans-serif", fontSize: 32,
                  minHeight: 52, display: "flex", alignItems: "center",
                  padding: "6px 0", color: "var(--cream-50)"
                }}>
                {it.label}
              </a>
            ))}
          </div>
          <button style={{ ...navStyles.cta, justifyContent: "center", padding: "16px 20px", fontSize: 16, background: "#e8324a" }}
            onClick={() => { onWhatsApp(); setMobileOpen(false); }}>
            Quero começar agora
          </button>
        </div>
      )}

      <style>{`
        @media (max-width: 860px) {
          .nav-links { display: none !important; }
          .nav-cta { display: none !important; }
          .nav-menu-btn { display: grid !important; }
        }
      `}</style>
    </>
  );
};

Object.assign(window, { Nav });