/* global React, ReactDOM */
const { useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "hue": 250,
  "showRepMessage": true,
  "storyBannerSet": "default"
}/*EDITMODE-END*/;

const BANNER_SETS = {
  default: ["assets/story-04.png", "assets/story-05.png", "assets/story-08.png", "assets/story-01.png", "assets/story-02.png"],
  workshop: ["assets/story-01.png", "assets/story-02.png", "assets/story-03.png", "assets/story-04.png", "assets/story-05.png"],
  factory:  ["assets/story-05.png", "assets/story-06.png", "assets/story-07.png", "assets/story-08.png", "assets/story-04.png"],
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectApp(() => {
    document.body.classList.toggle("theme-light", t.theme === "light");
    document.documentElement.style.setProperty("--hue", String(t.hue));
  }, [t.theme, t.hue]);

  const banners = BANNER_SETS[t.storyBannerSet] || BANNER_SETS.default;

  return (
    <>
      <Hero showRepMessage={t.showRepMessage} />
      <ClassroomBridge />
      <Marquee />
      <RepMessage />
      <Challenge bannerSwap={banners} />
      <Value />
      <Audience />
      <Difference />
      <Offerings />
      <About />
      <Status />
      <Contact />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme}
          options={["dark","light"]}
          onChange={(v)=>setTweak("theme", v)} />
        <TweakSlider label="Accent Hue" value={t.hue} min={200} max={340} step={1} unit="°"
          onChange={(v)=>setTweak("hue", v)} />

        <TweakSection label="Hero" />
        <TweakToggle label="代表メッセージ表示" value={t.showRepMessage}
          onChange={(v)=>setTweak("showRepMessage", v)} />

        <TweakSection label="Story Banners" />
        <TweakSelect label="画像セット" value={t.storyBannerSet}
          options={[
            { value:"default", label:"おすすめ" },
            { value:"workshop", label:"工房 / ワークショップ" },
            { value:"factory", label:"工場 / 規模" },
          ]}
          onChange={(v)=>setTweak("storyBannerSet", v)} />
      </TweaksPanel>
    </>
  );
}

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