const { useState, useEffect, useRef, useCallback } = React;

/* ============ Reveal helper ============ */
function useReveal(threshold = 0.15) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) {e.target.classList.add("is-in");io.unobserve(e.target);}
      }),
      { threshold }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}
window.useReveal = useReveal;

/* ============ Navbar ============ */
function Navbar({ onNav, onOpenProduct, onHome, active = "home" }) {
  const [scrolled, setScrolled] = useState(false);
  const [overHero, setOverHero] = useState(true);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 10);
      // 首頁首屏是免費試用區（深墨底），導覽列要走白字版；
      // 其餘分頁沒有 #home，量不到就回一般樣式。
      const first = document.getElementById("home");
      setOverHero(first ? first.getBoundingClientRect().bottom > 100 : false);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
    // 換分頁時 DOM 才剛換掉，要重新量一次
  }, [active]);

  const links = [
  { en: "PRODUCT", zh: "產品介紹", id: "product" },
  { en: "MAP", zh: "功能地圖", id: "funcmap" },
  { en: "PRICING", zh: "收費方案", id: "pricing" },
  { en: "TRUST", zh: "安全與信任", id: "security" },
  { en: "ABOUT", zh: "認識我們", id: "about" },
  { en: "CONTACT", zh: "聯絡我們", id: "contact" }];


  const cls = [
  "lx-nav",
  // 內頁沒有深色首屏可以襯底，導覽列直接走實心白底
  scrolled || active !== "home" ? "is-scrolled" : "",
  overHero && !scrolled ? "is-hero" : "",
  open ? "is-open" : ""].
  join(" ");

  return (
    <nav className={cls}>
      <div className="lx-nav-inner">
        <a href="#home" className="lx-nav-logo" onClick={(e) => {
          setOpen(false);
          if (onHome) onHome(e);
        }}>
          <img src="img/logo-luxor-cn.webp" alt="LUXOR 路克索數位" style={{ height: "53px" }} />
        </a>
        <ul className={`lx-nav-menu ${open ? "is-open" : ""}`}>
          {links.map((l) =>
          <li key={l.en}>
              <a href={`#${l.id}`}
            className={active === l.id ? "is-active" : ""}
            onClick={(e) => {
              setOpen(false);
              if (onNav) onNav(l.id, e);
            }}>
                <span className="lx-nav-en">{l.en}</span>
                <span>{l.zh}</span>
              </a>
            </li>
          )}
          {/* 手機版選單內的 CTA */}
          <li className="lx-nav-menu-cta-item">
            <a className="lx-nav-cta lx-nav-cta-mobile is-disabled" aria-disabled="true">
              登入
            </a>
          </li>
        </ul>
        <div className="lx-nav-right">
          <button
            className={`lx-hamburger ${open ? "is-open" : ""}`}
            onClick={() => setOpen(!open)}
            aria-label={open ? "關閉選單" : "開啟選單"}
            aria-expanded={open}>
            <span></span><span></span><span></span>
          </button>
          {/* 桌機版 CTA — 手機版隱藏，改放選單內 */}
          <a className="lx-nav-cta lx-nav-cta-desktop is-disabled" aria-disabled="true" style={{ paddingLeft: "20px", paddingRight: "20px", textAlign: "center" }}>
            登入
          </a>
        </div>
      </div>
    </nav>);

}
window.Navbar = Navbar;