/* メインアプリ + Tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "ink",
  "headingFont": "serif",
  "showSeal": true,
  "compactSpacing": false
}/*EDITMODE-END*/;

const themePresets = {
  ink:    { ink: "#0E2A4A", ink2: "#173658", gold: "#B5895A", paper: "#F5F1EA", paper2: "#ECE5D8", line: "#d9cfbf" },
  forest: { ink: "#1F3A2E", ink2: "#2a4a3c", gold: "#A88A4A", paper: "#F2EFE6", paper2: "#E8E3D5", line: "#d3cab7" },
  charcoal:{ ink: "#1C1C1E", ink2: "#2a2a2c", gold: "#C9A063", paper: "#F4F1ED", paper2: "#EAE6DE", line: "#d8d2c5" },
  burgundy:{ ink: "#4A1F2A", ink2: "#5e2934", gold: "#B5895A", paper: "#F5EFE9", paper2: "#EBE2D8", line: "#d9cdbe" },
};

function applyTheme(t) {
  const p = themePresets[t.theme] || themePresets.ink;
  const r = document.documentElement;
  r.style.setProperty("--ink", p.ink);
  r.style.setProperty("--ink-2", p.ink2);
  r.style.setProperty("--gold", p.gold);
  r.style.setProperty("--paper", p.paper);
  r.style.setProperty("--paper-2", p.paper2);
  r.style.setProperty("--line", p.line);
  r.style.setProperty("--serif", t.headingFont === "sans"
    ? '"Noto Sans JP", sans-serif'
    : '"Noto Serif JP", "Yu Mincho", serif');
  document.body.classList.toggle("compact", t.compactSpacing);
  document.body.classList.toggle("hide-seal", !t.showSeal);
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { applyTheme(tweaks); }, [tweaks]);

  return (
    <React.Fragment>
      <Header />
      <Hero />
      <Strengths />
      <Flow />
      <Collab />
      <Pricing />
      <Licenses />
      <Related />
      <Voices />
      <FAQ />
      <CTASection />
      <Contact />
      <Footer />
      <FloatingCTA />
      <TweaksPanel title="Tweaks">
        <TweakSection title="カラーテーマ">
          <TweakSelect label="プリセット" value={tweaks.theme} onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "ink", label: "Ink Blue（標準）" },
              { value: "forest", label: "Forest Green" },
              { value: "charcoal", label: "Charcoal" },
              { value: "burgundy", label: "Burgundy" },
            ]} />
        </TweakSection>
        <TweakSection title="タイポグラフィ">
          <TweakRadio label="見出しフォント" value={tweaks.headingFont} onChange={(v) => setTweak("headingFont", v)}
            options={[{ value: "serif", label: "明朝" }, { value: "sans", label: "ゴシック" }]} />
        </TweakSection>
        <TweakSection title="表示オプション">
          <TweakToggle label="ヒーローの認証印を表示" value={tweaks.showSeal} onChange={(v) => setTweak("showSeal", v)} />
          <TweakToggle label="コンパクト余白" value={tweaks.compactSpacing} onChange={(v) => setTweak("compactSpacing", v)} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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