// site/nav.jsx — Navigation sticky top + mobile drawer
// Apparaît une fois qu'on a passé le hero.

function StickyNav() {
  const [visible, setVisible] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      const hero = document.getElementById("section-accueil");
      const h = hero ? hero.offsetHeight : 600;
      setVisible(window.scrollY > h * 0.6);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const sections = [
    { id: "section-programme", label: "Programme", suit: "♠" },
    { id: "section-lieu", label: "Le lieu", suit: "♦" },
    { id: "section-venir", label: "Venir", suit: "♣" },
    { id: "section-hebergements", label: "Hébergements", suit: "♥" },
    { id: "section-dress-code", label: "Dress code", suit: "♣" },
    { id: "section-app", label: "L'app invité", suit: "★" },
    { id: "section-faq", label: "FAQ", suit: "♠" },
    { id: "section-temoins", label: "Témoins", suit: "♦" },
  ];

  const go = (id) => {
    setOpen(false);
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <>
      <nav style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
        background: visible ? T.ink : "transparent",
        borderBottom: visible ? `1px solid rgba(255,255,255,0.08)` : "1px solid transparent",
        transition: "all .3s ease",
        transform: visible ? "translateY(0)" : "translateY(-100%)",
        opacity: visible ? 1 : 0,
        pointerEvents: visible ? "auto" : "none",
      }}>
        <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", height: 64 }}>
          {/* Brand */}
          <a href="#section-accueil" onClick={(e) => { e.preventDefault(); document.getElementById("section-accueil")?.scrollIntoView({ behavior: "smooth" }); }}
            style={{ textDecoration: "none", color: T.white, display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ fontFamily: T.bold, fontWeight: 700, fontSize: 18, letterSpacing: -0.5, color: T.white }}>
              E <span style={{ color: T.or, fontFamily: T.italic, fontStyle: "italic" }}>&amp;</span> A
            </span>
            <span style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 2, color: "rgba(255,255,255,0.55)", marginLeft: 4 }}>
              21 / 08 / 27
            </span>
          </a>

          {/* Desktop nav */}
          <div className="nav-desktop" style={{ display: "none", gap: 4 }}>
            {sections.map((s) => (
              <button key={s.id} onClick={() => go(s.id)} style={{
                background: "transparent", border: "none", cursor: "pointer",
                padding: "8px 12px", fontFamily: T.mono, fontSize: 10, letterSpacing: 2,
                color: "rgba(255,255,255,0.65)", textTransform: "uppercase",
                transition: "color .15s",
              }}
                onMouseEnter={(e) => e.currentTarget.style.color = T.or}
                onMouseLeave={(e) => e.currentTarget.style.color = "rgba(255,255,255,0.65)"}>
                {s.label}
              </button>
            ))}
            <button onClick={() => go("section-rsvp")} style={{
              marginLeft: 8, background: T.rouge, color: T.white, border: "none",
              padding: "10px 16px", fontFamily: T.mono, fontSize: 10, letterSpacing: 2,
              textTransform: "uppercase", fontWeight: 600, cursor: "pointer",
            }}>♥ RSVP</button>
            <span style={{ marginLeft: 8 }}><AppLinkNavButton /></span>
          </div>

          {/* Mobile burger */}
          <button onClick={() => setOpen(!open)} className="nav-mobile" style={{
            background: "transparent", border: "none", cursor: "pointer", padding: 8,
            display: "flex", flexDirection: "column", gap: 4,
          }}>
            <span style={{ width: 22, height: 1.5, background: T.white, transition: "all .2s", transform: open ? "rotate(45deg) translateY(4px)" : "" }} />
            <span style={{ width: 22, height: 1.5, background: T.white, opacity: open ? 0 : 1, transition: "all .2s" }} />
            <span style={{ width: 22, height: 1.5, background: T.white, transition: "all .2s", transform: open ? "rotate(-45deg) translateY(-4px)" : "" }} />
          </button>
        </div>

        {/* Mobile drawer */}
        {open && (
          <div style={{
            background: T.ink, borderTop: `1px solid rgba(255,255,255,0.1)`,
            padding: "12px 24px 24px", animation: "site-up .3s ease both",
          }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
              {sections.map((s) => (
                <button key={s.id} onClick={() => go(s.id)} style={{
                  background: "transparent", border: "none", cursor: "pointer",
                  padding: "12px 0", textAlign: "left",
                  fontFamily: T.bold, fontWeight: 600, fontSize: 17, color: T.white,
                  display: "flex", alignItems: "center", gap: 12,
                  borderBottom: `1px solid rgba(255,255,255,0.1)`,
                }}>
                  <span style={{ color: T.or, fontSize: 12, width: 12 }}>{s.suit}</span>
                  {s.label}
                </button>
              ))}
              <button onClick={() => go("section-rsvp")} style={{
                marginTop: 14, background: T.rouge, color: T.white, border: "none",
                padding: "14px 16px", fontFamily: T.mono, fontSize: 11, letterSpacing: 3,
                textTransform: "uppercase", fontWeight: 600, cursor: "pointer",
              }}>♥ Confirmer ma présence</button>
              <AppLinkNavButton mobile={true} />
            </div>
          </div>
        )}
      </nav>

      <style>{`
        @media (min-width: 1000px) {
          .nav-desktop { display: flex !important; }
          .nav-mobile { display: none !important; }
        }
      `}</style>
    </>
  );
}

Object.assign(window, { StickyNav });