// app.jsx — メインアプリケーション + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "navy",
  "headingFont": "zen",
  "showUrgentBar": true,
  "heroLayout": "split"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.body.setAttribute("data-theme", t.theme);
    const fonts = {
      zen: '"Zen Kaku Gothic New", "Noto Sans JP", sans-serif',
      noto: '"Noto Sans JP", sans-serif',
      rounded: '"M PLUS Rounded 1c", "Zen Kaku Gothic New", sans-serif',
      serif: '"Noto Serif JP", "Yu Mincho", serif',
    };
    document.body.style.setProperty("--f-sans", fonts[t.headingFont] || fonts.zen);
  }, [t.theme, t.headingFont]);

  return (
    <>
      <Header tweaks={t} />
      <main>
        <Hero tweaks={t} />
        {t.showUrgentBar && <UrgentBar />}
        <ServiceSection />
        <ReasonSection />
        <FlowSection />
        <PriceSection />
        <CaseSection />
        <VoiceSection />
        <StaffSection />
        <FaqSection />
        <AreaSection />
        <ContactSection />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="カラーテーマ" />
        <TweakRadio label="メインカラー" value={t.theme}
          options={[
            { value: "navy", label: "藍" },
            { value: "bright", label: "青" },
            { value: "fresh", label: "水色" },
          ]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakSection label="タイポグラフィ" />
        <TweakSelect label="フォント" value={t.headingFont}
          options={[
            { value: "zen", label: "Zen角ゴシック（標準）" },
            { value: "noto", label: "Noto Sans JP" },
            { value: "rounded", label: "M+ Rounded（やわらか）" },
            { value: "serif", label: "Noto Serif JP（明朝）" },
          ]}
          onChange={(v) => setTweak("headingFont", v)} />
        <TweakSection label="レイアウト" />
        <TweakToggle label="緊急バーを表示" value={t.showUrgentBar} onChange={(v) => setTweak("showUrgentBar", v)} />
      </TweaksPanel>
    </>
  );
}

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