// ---- app root + tweaks ----
const { useState: aS, useEffect: aE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "森 × アンバー",
  "headingFont": "明朝"
}/*EDITMODE-END*/;

const THEMES = {
  "森 × アンバー": { green:"#1f5f4e", greenDeep:"#143f34", greenSoft:"#6f9a7e", amber:"#cf8a32", amberSoft:"#e6b25f", paper:"#fbf8f0", paper2:"#f3ebda", cream:"#efe5d0" },
  "トロピカル":   { green:"#1f6b5a", greenDeep:"#10463a", greenSoft:"#5fae93", amber:"#e0883a", amberSoft:"#f0b265", paper:"#fffdf7", paper2:"#f6ecd8", cream:"#f1e3c9" },
  "アース":       { green:"#33452f", greenDeep:"#1f2c1d", greenSoft:"#7d9173", amber:"#a8763f", amberSoft:"#c69a62", paper:"#faf7f1", paper2:"#efe7d8", cream:"#e6dcc7" },
};
const HEADING_FONTS = {
  "明朝":   "'Shippori Mincho', serif",
  "ゴシック": "'Zen Kaku Gothic New', sans-serif",
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [menuOpen, setMenuOpen] = aS(false);

  aE(() => {
    const th = THEMES[t.theme] || THEMES["森 × アンバー"];
    const r = document.documentElement.style;
    r.setProperty("--green", th.green);
    r.setProperty("--green-deep", th.greenDeep);
    r.setProperty("--green-soft", th.greenSoft);
    r.setProperty("--amber", th.amber);
    r.setProperty("--amber-soft", th.amberSoft);
    r.setProperty("--paper", th.paper);
    r.setProperty("--paper-2", th.paper2);
    r.setProperty("--cream", th.cream);
  }, [t.theme]);

  aE(() => {
    document.documentElement.style.setProperty("--font-serif", HEADING_FONTS[t.headingFont] || HEADING_FONTS["明朝"]);
  }, [t.headingFont]);

  aE(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
  }, [menuOpen]);

  return (
    <>
      <Nav menuOpen={menuOpen} onOpenMenu={() => setMenuOpen((v) => !v)} />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
      <main>
        <Hero />
        <Strip />
        <About />
        <Taste />
        <HowToEat />
        <Farm />
        <Varieties />
        <Commitment />
        <Gallery />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="配色テーマ" />
        <TweakSelect label="テーマ" value={t.theme}
          options={Object.keys(THEMES)}
          onChange={(v) => setTweak("theme", v)} />
        <TweakSection label="見出しの書体" />
        <TweakRadio label="フォント" value={t.headingFont}
          options={Object.keys(HEADING_FONTS)}
          onChange={(v) => setTweak("headingFont", v)} />
      </TweaksPanel>
    </>
  );
}

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