// Editor Eye LP — App root + Tweaks panel

const { useState, useEffect } = React;

function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const lang = tweaks.lang;
  const setLang = (l) => setTweak("lang", l);
  const t = window.I18N[lang];

  // Apply font-stack to root
  useEffect(() => {
    const stacks = {
      inter: '"Inter", "Noto Sans JP", system-ui, sans-serif',
      geist: '"Geist", "Inter", "Noto Sans JP", system-ui, sans-serif',
      grotesk: '"Space Grotesk", "Inter", "Noto Sans JP", system-ui, sans-serif',
      dmsans: '"DM Sans", "Inter", "Noto Sans JP", system-ui, sans-serif',
      ibmplex: '"IBM Plex Sans", "Inter", "Noto Sans JP", system-ui, sans-serif'
    };
    document.documentElement.style.setProperty("--font-sans", stacks[tweaks.fontStack] || stacks.inter);
    document.documentElement.style.setProperty("--font-display", stacks[tweaks.fontStack] || stacks.inter);
  }, [tweaks.fontStack]);

  // Tone (color theme)
  useEffect(() => {
    document.body.dataset.tone = tweaks.tone === "default" ? "" : tweaks.tone;
  }, [tweaks.tone]);

  // Unified style (A / B / default)
  useEffect(() => {
    document.body.dataset.unify = tweaks.unifyStyle || "default";
  }, [tweaks.unifyStyle]);

  // Reveal-on-scroll: stagger via .reveal -> .is-in
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window) || !els.length) {
      els.forEach(el => el.classList.add("is-in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-in");
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [tweaks.lang, tweaks.fontStack, tweaks.tone, tweaks.showArchInHero]);

  return (
    <>
      <Nav lang={lang} setLang={setLang} t={t} />
      <main>
        <Hero t={t} lang={lang} showArch={tweaks.showArchInHero} />
        <VillainSolution t={t} />
        <OutcomeStory t={t} lang={lang} />
        <PlanCards t={t} lang={lang} />
        <ServiceCatalog t={t} lang={lang} />
        <FAQ t={t} lang={lang} />
        <GenerativeAudioSection t={t} lang={lang} />
        <ContextEfficiencySection t={t} lang={lang} />
        <GenerativeSpriteSection t={t} lang={lang} />
        <CoreValueSection t={t} lang={lang} />
        <Pricing t={t} lang={lang} />
        <FinalCTA t={t} />
      </main>
      <Footer t={t} lang={lang} />

      <TweaksPanel title="Tweaks">
        <TweakSection title={lang === "ja" ? "言語" : "Language"}>
          <TweakRadio label={lang === "ja" ? "言語" : "Language"} value={tweaks.lang} onChange={v => setTweak("lang", v)}
            options={[{value:"ja",label:"日本語"},{value:"en",label:"English"}]} />
        </TweakSection>

        <TweakSection title={lang === "ja" ? "見た目" : "Look & Feel"}>
          <TweakSelect label={lang === "ja" ? "フォント" : "Font"} value={tweaks.fontStack} onChange={v => setTweak("fontStack", v)}
            options={[
              {value:"inter",label:"Inter (default)"},
              {value:"geist",label:"Geist"},
              {value:"grotesk",label:"Space Grotesk"},
              {value:"dmsans",label:"DM Sans"},
              {value:"ibmplex",label:"IBM Plex Sans"}
            ]} />
          <TweakRadio label={lang === "ja" ? "トーン" : "Tone"} value={tweaks.tone} onChange={v => setTweak("tone", v)}
            options={[
              {value:"default",label:lang==="ja"?"爽やか":"Default"},
              {value:"dev",label:lang==="ja"?"開発者":"Dev"},
              {value:"game",label:lang==="ja"?"ゲーム":"Game"}
            ]} />
        </TweakSection>

        <TweakSection title={lang === "ja" ? "ヒーロー" : "Hero"}>
          <TweakToggle label={lang === "ja" ? "アーキテクチャ図を表示" : "Show arch diagram"} value={tweaks.showArchInHero} onChange={v => setTweak("showArchInHero", v)} />
        </TweakSection>

        <TweakSection title={lang === "ja" ? "統合スタイル" : "Unified style"}>
          <TweakRadio label={lang === "ja" ? "方向" : "Direction"} value={tweaks.unifyStyle} onChange={v => setTweak("unifyStyle", v)}
            options={[
              {value:"default",label:lang==="ja"?"標準":"Default"},
              {value:"A",label:lang==="ja"?"A: ライト統一":"A: Light"},
              {value:"B",label:lang==="ja"?"B: ダーク統一":"B: Dark"}
            ]} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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