/* app.jsx — ルート + Tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#14224a",
  "accentColor": "#2563eb",
  "fontJp": "noto",
  "cardRadius": 8,
  "btnRadius": 6
}/*EDITMODE-END*/;

const FONT_MAP = {
  noto:    '"Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif',
  zen:     '"Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif',
  shippori:'"Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif',
};

const applyTweaks = (t) => {
  const r = document.documentElement;
  r.style.setProperty("--primary", t.primaryColor);
  r.style.setProperty("--primary-2", t.accentColor);
  r.style.setProperty("--accent", t.accentColor);
  r.style.setProperty("--card-radius", `${t.cardRadius}px`);
  r.style.setProperty("--btn-radius", `${t.btnRadius}px`);
  r.style.setProperty("--font-jp", FONT_MAP[t.fontJp] || FONT_MAP.noto);
};

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  return (
    <>
      <Header />
      <main>
        <Hero />
        <Services />
        <Reasons />
        <Flow />
        <FAQ />
        <FinalCTA />
        <ContactForm />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="カラー" />
        <TweakColor label="プライマリ"
          value={tweaks.primaryColor}
          onChange={(v) => setTweak("primaryColor", v)} />
        <TweakColor label="アクセント"
          value={tweaks.accentColor}
          onChange={(v) => setTweak("accentColor", v)} />
        <TweakSection label="タイポグラフィ" />
        <TweakSelect label="日本語フォント"
          value={tweaks.fontJp}
          onChange={(v) => setTweak("fontJp", v)}
          options={[
            { value: "noto", label: "Noto Sans JP" },
            { value: "zen", label: "Zen Kaku Gothic" },
            { value: "shippori", label: "Shippori Mincho" },
          ]} />
        <TweakSection label="形状" />
        <TweakSlider label="カード角丸"
          value={tweaks.cardRadius} min={0} max={24} step={1}
          onChange={(v) => setTweak("cardRadius", v)} />
        <TweakSlider label="ボタン角丸"
          value={tweaks.btnRadius} min={0} max={24} step={1}
          onChange={(v) => setTweak("btnRadius", v)} />
      </TweaksPanel>
    </>
  );
};

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