// ============================================================
// APP — mount
// ============================================================

function App() {
  useCursor();
  const active = useActiveSection(["hero", "experience", "rooms", "collection", "events", "membership"]);

  const navTo = useCallback((id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  }, []);

  // Magnetic buttons
  useEffect(() => {
    const els = document.querySelectorAll("[data-magnetic]");
    const handlers = [];
    els.forEach((el) => {
      const onMove = (e) => {
        const r = el.getBoundingClientRect();
        const x = e.clientX - (r.left + r.width / 2);
        const y = e.clientY - (r.top + r.height / 2);
        el.style.transform = `translate(${x * 0.18}px, ${y * 0.22}px)`;
      };
      const onLeave = () => { el.style.transform = ""; };
      el.addEventListener("mousemove", onMove);
      el.addEventListener("mouseleave", onLeave);
      handlers.push([el, onMove, onLeave]);
    });
    return () => {
      handlers.forEach(([el, onMove, onLeave]) => {
        el.removeEventListener("mousemove", onMove);
        el.removeEventListener("mouseleave", onLeave);
      });
    };
  }, []);

  // Section word-reveal on scroll
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) en.target.classList.add("w-in");
      });
    }, { threshold: 0.25 });
    document.querySelectorAll("[data-word-reveal]").forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);

  // Scroll progress bar
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const pct = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100;
      const fill = document.getElementById("scrollFill");
      if (fill) fill.style.width = pct + "%";
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Live clock
  const [clock, setClock] = useState("");
  useEffect(() => {
    const tick = () => {
      const d = new Date();
      const hh = String(d.getHours()).padStart(2, "0");
      const mm = String(d.getMinutes()).padStart(2, "0");
      setClock(`${hh}:${mm} KST`);
    };
    tick();
    const t = setInterval(tick, 30000);
    return () => clearInterval(t);
  }, []);

  return (
    <>
      <div className="scroll-progress"><div className="fill" id="scrollFill"></div></div>
      <div className="house-status">
        <span><span className="live-dot"></span>영업 중</span>
        <span>청담 · {clock}</span>
        <span>룸 {6} / 6 가용</span>
      </div>
      <Nav active={active} onNav={navTo} />
      <Hero onReserve={() => navTo("membership")} />
      <Experience />
      <Rooms onReserve={() => navTo("membership")} />
      <Marquee />
      <Collection />
      <Events />
      <Membership />
      <Dossier />
      <Footer />
    </>
  );
}

function Marquee() {
  const items = ["NOIR", "Cheongdam", "전담 MD", "프라이빗 룸 6개", "보틀 서비스", "소개제 입장", "강남 최상급"];
  const row = <span>{items.map((t, i) => <span key={i}>{t}</span>)}</span>;
  return (
    <div className="marquee" aria-hidden>
      <div className="marquee-track">
        {row}{row}{row}
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);