// nav.jsx — liquid-bar top navigation with sliding active pill + scroll transition
// exposes: LiquidBar, Logo

function Logo({ size = 30, withWord = true }) {
  return (
    <div role="img" aria-label="COOLCASE" style={{
      width: size, height: size, borderRadius: "50%",
      backgroundImage: "url(assets/logo-coolcase.png)",
      backgroundSize: "var(--logo-zoom, 100%)",
      backgroundPosition: "var(--logo-x, 50%) var(--logo-y, 50%)",
      backgroundRepeat: "no-repeat",
      boxShadow: "0 6px 22px rgba(139,92,255,0.55), 0 0 0 2px rgba(255,255,255,0.16)",
    }}/>
  );
}

function LiquidBar({ section, onNav, cartCount, onCart }) {
  const items = [
    { id: "home", label: "Coolcaséate" },
    { id: "designs", label: "Prediseñadas" },
    { id: "accessories", label: "Accesorios" },
    { id: "offers", label: "Ofertas" },
    { id: "community", label: "Comunidad" },
  ];
  const navRef = React.useRef(null);
  const itemRefs = React.useRef({});
  const [pill, setPill] = React.useState({ left: 0, width: 0, opacity: 0 });
  const [scrolled, setScrolled] = React.useState(false);

  const activeId = section === "editor" ? "home" : section;

  const movePill = React.useCallback(() => {
    const el = itemRefs.current[activeId];
    const nav = navRef.current;
    if (el && nav) {
      const er = el.getBoundingClientRect();
      const nr = nav.getBoundingClientRect();
      setPill({ left: er.left - nr.left, width: er.width, opacity: 1 });
    }
  }, [activeId]);

  React.useLayoutEffect(() => { movePill(); }, [movePill]);
  React.useEffect(() => {
    const onResize = () => movePill();
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [movePill]);

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

  return (
    <div style={{
      position: "fixed", top: scrolled ? 12 : 20, left: "50%", transform: "translateX(-50%)",
      zIndex: 100, width: "min(1200px, calc(100% - 32px))",
      display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14,
      transition: "top 0.4s cubic-bezier(0.2,0.8,0.2,1)",
      pointerEvents: "none",
    }}>
      {/* logo — free, no panel */}
      <button onClick={() => onNav("home")} style={{ background: "none", border: "none", cursor: "pointer", padding: 0, flexShrink: 0, pointerEvents: "auto", lineHeight: 0 }}>
        <Logo size={scrolled ? 56 : 66} />
      </button>

      {/* nav items — its own glass pill */}
      <div className="glass" style={{
        borderRadius: 999, padding: "7px 9px", pointerEvents: "auto",
        background: scrolled ? "rgba(20,16,46,0.66)" : "var(--glass-bg)",
        boxShadow: scrolled ? "0 16px 44px -16px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.12)" : "var(--shadow-glass)",
        transition: "background 0.4s ease, box-shadow 0.4s ease",
      }}>
        <div ref={navRef} style={{ position: "relative", display: "flex", alignItems: "center", gap: 2 }}>
          {/* sliding liquid pill */}
          <div style={{
            position: "absolute", top: 0, bottom: 0, left: pill.left, width: pill.width, opacity: pill.opacity,
            background: "var(--grad-neon)", borderRadius: 999,
            boxShadow: "0 6px 22px -6px rgba(255,61,240,0.6), inset 0 1px 0 rgba(255,255,255,0.45)",
            transition: "left 0.42s cubic-bezier(0.34,1.4,0.5,1), width 0.42s cubic-bezier(0.34,1.4,0.5,1), opacity 0.3s ease",
            zIndex: 0,
          }}/>
          {items.map((it) => {
            const active = it.id === activeId;
            return (
              <button key={it.id} ref={(el) => (itemRefs.current[it.id] = el)}
                onClick={() => onNav(it.id)}
                style={{
                  position: "relative", zIndex: 1, background: "none", border: "none", cursor: "pointer",
                  fontFamily: "var(--font-ui)", fontWeight: active ? 700 : 500,
                  fontSize: 14.5, color: active ? "#fff" : "var(--ink-70)",
                  padding: "10px 17px", borderRadius: 999, whiteSpace: "nowrap",
                  transition: "color 0.3s ease",
                }}
                onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = "#fff"; }}
                onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = "var(--ink-70)"; }}
              >{it.label}</button>
            );
          })}
        </div>
      </div>

      {/* cart — its own glass circle */}
      <button className="btn glass" onClick={onCart} style={{
        position: "relative", flexShrink: 0, pointerEvents: "auto",
        background: scrolled ? "rgba(20,16,46,0.66)" : "var(--glass-bg)",
        color: "var(--ink)", width: 50, height: 50, padding: 0, justifyContent: "center", borderRadius: "50%",
        boxShadow: scrolled ? "0 16px 44px -16px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.12)" : "var(--shadow-glass)",
      }} title="Carro">
        <Icon name="cart" size={22} />
        {cartCount > 0 && (
          <span style={{ position: "absolute", top: -2, right: -2, minWidth: 20, height: 20, padding: "0 5px", borderRadius: 999, background: "var(--neon-magenta)", color: "#fff", fontSize: 11, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 0 10px rgba(255,61,240,0.7)" }}>{cartCount}</span>
        )}
      </button>
    </div>
  );
}

Object.assign(window, { LiquidBar, Logo });