// =====================================================================
// LiveSpark LP — useLang hook + LangToggle UI
// 言語切替ロジックは window.setLpLang / lp:langchange イベントで実装済み
// =====================================================================

const useLang = () => {
  const [lang, setLang] = React.useState(window.LP_LANG || "ja");
  React.useEffect(() => {
    const onChange = (e) => setLang(e.detail.lang);
    window.addEventListener("lp:langchange", onChange);
    return () => window.removeEventListener("lp:langchange", onChange);
  }, []);
  // 現在言語のコンテンツを返す
  const C = window.LP_CONTENT_BY_LANG[lang];
  return { lang, C, setLang: window.setLpLang };
};

const LangToggle = () => {
  const { lang, setLang } = useLang();
  return (
    <div className="lang-toggle" role="group" aria-label="Language">
      <button
        type="button"
        className={`lang-toggle-btn ${lang === "ja" ? "active" : ""}`}
        aria-pressed={lang === "ja"}
        onClick={() => setLang("ja")}
      >
        JA
      </button>
      <span className="lang-toggle-divider" aria-hidden="true">/</span>
      <button
        type="button"
        className={`lang-toggle-btn ${lang === "en" ? "active" : ""}`}
        aria-pressed={lang === "en"}
        onClick={() => setLang("en")}
      >
        EN
      </button>
    </div>
  );
};

Object.assign(window, { useLang, LangToggle });