const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "A",
  "accent": "gold",
  "showSimulator": true
}/*EDITMODE-END*/;

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

  // Apply accent palette to CSS vars
  useEffect(() => {
    const root = document.documentElement;
    if (tweaks.accent === "gold") {
      root.style.setProperty("--gold", "#B8935A");
      root.style.setProperty("--gold-light", "#D4B788");
      root.style.setProperty("--gold-deep", "#8E6F40");
    } else if (tweaks.accent === "sakura") {
      root.style.setProperty("--gold", "#C68A8A");
      root.style.setProperty("--gold-light", "#E0B5B5");
      root.style.setProperty("--gold-deep", "#9C6363");
    } else if (tweaks.accent === "matcha") {
      root.style.setProperty("--gold", "#7A8B5C");
      root.style.setProperty("--gold-light", "#A4B384");
      root.style.setProperty("--gold-deep", "#5A6843");
    }
  }, [tweaks.accent]);

  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero variant={tweaks.heroVariant} />
        <Worries />
        <Strengths />
        {tweaks.showSimulator && <Simulator />}
        <Flow />
        <Pricing />
        <Voice />
        <Faq />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="ヒーロー">
          <TweakRadio
            label="レイアウト"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { value: "A", label: "A 横並び" },
              { value: "B", label: "B 中央" },
              { value: "C", label: "C 縦書" },
            ]}
          />
        </TweakSection>
        <TweakSection title="配色">
          <TweakRadio
            label="アクセント"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "gold", label: "金茶" },
              { value: "sakura", label: "桜" },
              { value: "matcha", label: "抹茶" },
            ]}
          />
        </TweakSection>
        <TweakSection title="セクション">
          <TweakToggle
            label="受給診断シミュレーター"
            checked={tweaks.showSimulator}
            onChange={(v) => setTweak("showSimulator", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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