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="assets/logo-full-color.webp" alt="LUXOR ルクソール株式会社" style={{ height: "38px" }} />
        </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" href={LX_LOGIN_URL} onClick={() => setOpen(false)}>
              ログイン
            </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>
          {/* PC 版 CTA — スマホ版では非表示にしてメニュー内へ */}
          <a className="lx-nav-cta lx-nav-cta-desktop" href={LX_LOGIN_URL} style={{ paddingLeft: "20px", paddingRight: "20px", textAlign: "center" }}>
            ログイン
          </a>
        </div>
      </div>
    </nav>);

}
window.Navbar = Navbar;