/* Top nav — sticky, blurred, with mobile drawer + brand mega-menu */
const Nav = ({ current, go, scope = "tamak" }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [drawer, setDrawer] = React.useState(false);
  const [brandsOpen, setBrandsOpen] = React.useState(false);

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

  React.useEffect(() => {
    document.body.style.overflow = drawer ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [drawer]);

  const links = [
    { key: "home", label: "Group" },
    { key: "brands", label: "Brands", hasMenu: true },
    { key: "b2b", label: "B2B" },
    { key: "logo", label: "Logo" },
    { key: "careers", label: "Careers" },
    { key: "contact", label: "Contact" },
  ];

  const onNav = (k) => {
    if (k === "brands") { setBrandsOpen((o) => !o); return; }
    setBrandsOpen(false);
    setDrawer(false);
    go(k);
  };

  const isYadea = scope === "yadea";

  return (
    <>
      {/* Top utility strip */}
      <div style={{
        background: "var(--ink)",
        color: "var(--paper)",
        fontFamily: "var(--f-mono)",
        fontSize: 11,
        letterSpacing: "0.08em",
        textTransform: "uppercase",
      }}>
        <div className="shell-wide" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 32px" }}>
          <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
            <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--orange)" }} />
              Coromandel, Mauritius · +230 2330020 · tamak@tamak.com
            </span>
          </div>
          <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
            <span>EN</span>
            <span style={{ opacity: 0.4 }}>·</span>
            <span style={{ opacity: 0.6 }}>AR</span>
            <span style={{ opacity: 0.4 }}>·</span>
            <span style={{ opacity: 0.6 }}>FR</span>
          </div>
        </div>
      </div>

      <header
        style={{
          position: "sticky",
          top: 0,
          zIndex: 50,
          background: scrolled ? (isYadea ? "rgba(240,244,243,0.86)" : "rgba(244,239,230,0.86)") : "transparent",
          backdropFilter: scrolled ? "saturate(140%) blur(14px)" : "none",
          WebkitBackdropFilter: scrolled ? "saturate(140%) blur(14px)" : "none",
          borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
          transition: "all 0.35s ease",
        }}
      >
        <div className="shell-wide" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 32px" }}>
          {/* Logo */}
          <a
            href="#"
            onClick={(e) => { e.preventDefault(); onNav("home"); }}
            style={{ display: "inline-flex", alignItems: "center", gap: 10 }}
          >
            <Logo />
          </a>

          {/* Center nav (desktop) */}
          <nav style={{ display: "flex", gap: 4, alignItems: "center" }} className="nav-center">
            {links.map((l) => (
              <button
                key={l.key}
                onClick={() => onNav(l.key)}
                style={{
                  background: (l.key === "brands" && brandsOpen) || current === l.key ? "var(--ink)" : "transparent",
                  color: (l.key === "brands" && brandsOpen) || current === l.key ? "var(--paper)" : "var(--ink)",
                  border: "none",
                  padding: "10px 16px",
                  borderRadius: 999,
                  fontFamily: "var(--f-body)",
                  fontSize: 14,
                  fontWeight: 500,
                  letterSpacing: "-0.005em",
                  cursor: "pointer",
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 6,
                  transition: "all 0.2s ease",
                }}
              >
                {l.label}
                {l.hasMenu && (
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
                    <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </button>
            ))}
          </nav>

          {/* Right side */}
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <button className="btn btn-ghost btn-sm nav-find" onClick={() => onNav("contact")}>
              <Icon.Pin size={14} /> Find a store
            </button>
            <button
              className="nav-burger"
              onClick={() => setDrawer(true)}
              style={{
                display: "none",
                width: 40, height: 40,
                borderRadius: 999,
                border: "1px solid var(--line-strong)",
                background: "transparent",
                cursor: "pointer",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Icon.Menu />
            </button>
          </div>
        </div>

        {/* Brands mega-menu */}
        {brandsOpen && (
          <div
            style={{
              position: "absolute",
              top: "100%",
              left: 0,
              right: 0,
              background: "var(--paper-pure)",
              borderTop: "1px solid var(--line)",
              borderBottom: "1px solid var(--line)",
              boxShadow: "0 30px 60px -20px rgba(14,15,13,0.12)",
              animation: "fadeUp 0.25s ease both",
            }}
          >
            <div className="shell-wide" style={{ padding: "32px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
                <Eyebrow>The Tamak Portfolio — 8 brands across 4 categories</Eyebrow>
                <button
                  onClick={() => setBrandsOpen(false)}
                  style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--mute)", display: "inline-flex", alignItems: "center", gap: 6 }}
                >
                  Close <Icon.Close size={14} />
                </button>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
                {BRANDS.map((b) => (
                  <button
                    key={b.key}
                    onClick={() => { setBrandsOpen(false); go(b.key === "yadea" ? "yadea" : `brand-${b.key}`); }}
                    style={{
                      textAlign: "left",
                      background: b.color,
                      color: b.ink,
                      border: "none",
                      padding: "22px",
                      borderRadius: 16,
                      cursor: "pointer",
                      display: "flex",
                      flexDirection: "column",
                      gap: 28,
                      minHeight: 160,
                      justifyContent: "space-between",
                      transition: "transform 0.25s ease",
                    }}
                    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-3px)"; }}
                    onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}
                  >
                    <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.85 }}>
                      {b.category} · Since {b.since}
                    </div>
                    <div>
                      <div style={{ fontFamily: "var(--f-display)", fontSize: 28, letterSpacing: "-0.025em", fontWeight: 500, lineHeight: 1 }}>
                        {b.name}
                      </div>
                      <div style={{ fontSize: 13, opacity: 0.85, marginTop: 6 }}>{b.tagline}</div>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}
      </header>

      {/* Mobile drawer */}
      {drawer && (
        <div style={{
          position: "fixed", inset: 0, zIndex: 100, background: "var(--paper)",
          display: "flex", flexDirection: "column", padding: 24,
          animation: "fadeUp 0.3s ease both",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 32 }}>
            <Logo />
            <button onClick={() => setDrawer(false)} style={{ background: "transparent", border: "1px solid var(--line-strong)", width: 40, height: 40, borderRadius: 999, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
              <Icon.Close />
            </button>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {links.filter(l => l.key !== "brands").map(l => (
              <button key={l.key} onClick={() => onNav(l.key)} style={{ background: "transparent", border: "none", textAlign: "left", padding: "16px 0", fontFamily: "var(--f-display)", fontSize: 32, color: "var(--ink)", borderBottom: "1px solid var(--line)" }}>
                {l.label}
              </button>
            ))}
          </div>
          <div style={{ marginTop: 28 }}>
            <Eyebrow>Our brands</Eyebrow>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 12 }}>
              {BRANDS.map(b => (
                <button key={b.key} onClick={() => { setDrawer(false); go(b.key === "yadea" ? "yadea" : `brand-${b.key}`); }} style={{ background: b.color, color: b.ink, border: "none", padding: "14px", borderRadius: 12, fontFamily: "var(--f-display)", fontSize: 18, textAlign: "left" }}>
                  {b.name}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 920px) {
          .nav-center { display: none !important; }
          .nav-find { display: none !important; }
          .nav-burger { display: inline-flex !important; }
        }
      `}</style>
    </>
  );
};

const Logo = () => <window.TamakLogo size={42} variant="horizontal" />;

window.Nav = Nav;
window.Logo = Logo;