/* Stream Translations — main app */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "full",
  "headlineTone": "gothic",
  "density": "comfortable"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLangState] = useStateA(() => localStorage.getItem("st_lang") || "ja");
  const [scrollY, setScrollY] = useStateA(0);
  const [heroH, setHeroH] = useStateA(800);
  const contactRef = useRefA(null);

  const c = window.LP_CONTENT[lang];

  const setLang = (l) => { setLangState(l); localStorage.setItem("st_lang", l); };

  // scroll tracking for parallax + header
  useEffectA(() => {
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => { setScrollY(window.scrollY); raf = null; });
    };
    const onResize = () => setHeroH(window.innerHeight);
    onResize();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onResize);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onResize); };
  }, []);

  // apply typography + density tweaks to root
  useEffectA(() => {
    const root = document.documentElement.style;
    if (t.headlineTone === "mincho") {
      root.setProperty("--lp-headline-font", '"Noto Serif JP", serif');
      root.setProperty("--lp-headline-weight", "600");
    } else {
      root.setProperty("--lp-headline-font", '"Noto Sans JP", sans-serif');
      root.setProperty("--lp-headline-weight", "700");
    }
    if (t.density === "compact") {
      root.setProperty("--lp-section-pad", "84px");
      root.setProperty("--lp-gap-scale", "0.7");
    } else {
      root.setProperty("--lp-section-pad", "120px");
      root.setProperty("--lp-gap-scale", "1");
    }
  }, [t.headlineTone, t.density]);

  const scrolled = scrollY > 40;
  const overHero = scrollY < heroH - 90;
  const parallax = Math.min(scrollY * 0.35, heroH * 0.45);

  const onNav = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 64, behavior: "smooth" });
  };
  const onContact = () => {
    const el = contactRef.current;
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 50, behavior: "smooth" });
  };

  return (
    <React.Fragment>
      <Header c={c} lang={lang} setLang={setLang} scrolled={scrolled} overHero={overHero} onNav={onNav} onContact={onContact} />
      <main>
        <Hero c={c} variant={t.heroVariant} parallax={parallax} onContact={onContact} scrollLabel={lang === "ja" ? "SCROLL" : "SCROLL"} />
        <Problem c={c} />
        <Strengths c={c} />
        <Scope c={c} />
        <Work c={c} />
        <Process c={c} />
        <Faq c={c} />
        <Contact c={c} refEl={contactRef} />
      </main>
      <Footer c={c} onNav={onNav} onContact={onContact} />

      <TweaksPanel>
        <TweakSection label={lang === "ja" ? "ヒーロー" : "Hero"} />
        <TweakRadio
          label={lang === "ja" ? "見せ方" : "Treatment"}
          value={t.heroVariant}
          options={[
            { value: "full", label: lang === "ja" ? "全面写真" : "Full" },
            { value: "split", label: lang === "ja" ? "分割" : "Split" },
            { value: "navy", label: lang === "ja" ? "深いネイビー" : "Navy" },
          ]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
        <TweakSection label={lang === "ja" ? "見出しの書体" : "Headline type"} />
        <TweakRadio
          label={lang === "ja" ? "トーン" : "Tone"}
          value={t.headlineTone}
          options={[
            { value: "gothic", label: lang === "ja" ? "ゴシック" : "Sans" },
            { value: "mincho", label: lang === "ja" ? "明朝" : "Serif" },
          ]}
          onChange={(v) => setTweak("headlineTone", v)}
        />
        <TweakSection label={lang === "ja" ? "レイアウト" : "Layout"} />
        <TweakRadio
          label={lang === "ja" ? "密度" : "Density"}
          value={t.density}
          options={[
            { value: "comfortable", label: lang === "ja" ? "ゆったり" : "Comfortable" },
            { value: "compact", label: lang === "ja" ? "コンパクト" : "Compact" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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