/* Crux LP — Tweaks island.
   A small React root that only renders the Tweaks panel and applies
   its values to the vanilla LP via body attribute + CSS variables. */

const CRUX_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "accent": ["#2563eb", "#1d4ed8", "#eaf1ff"],
  "displayFont": "Zen Kaku Gothic New"
}/*EDITMODE-END*/;

function CruxTweaks() {
  const [t, setTweak] = useTweaks(CRUX_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.setAttribute("data-hero", t.hero);
  }, [t.hero]);

  React.useEffect(() => {
    const [main, dark, tint] = t.accent;
    const r = document.documentElement.style;
    r.setProperty("--blue", main);
    r.setProperty("--blue-600", main);
    r.setProperty("--blue-500", main);
    r.setProperty("--blue-700", dark);
    r.setProperty("--blue-tint", tint);
    r.setProperty("--app-blue", main);
  }, [t.accent]);

  React.useEffect(() => {
    document.documentElement.style.setProperty(
      "--font-display",
      `"${t.displayFont}", "Noto Sans JP", system-ui, sans-serif`
    );
  }, [t.displayFont]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="ヒーロー" />
      <TweakRadio
        label="レイアウト"
        value={t.hero}
        options={[
          { value: "split", label: "左右分割" },
          { value: "center", label: "中央" },
          { value: "showcase", label: "ショーケース" }
        ]}
        onChange={(v) => setTweak("hero", v)}
      />
      <TweakSection label="ブランド" />
      <TweakColor
        label="アクセント"
        value={t.accent}
        options={[
          ["#2563eb", "#1d4ed8", "#eaf1ff"],
          ["#4f46e5", "#4338ca", "#ecebff"],
          ["#0d9488", "#0f766e", "#e2f6f2"],
          ["#e2562b", "#c8453c", "#fdede7"]
        ]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSelect
        label="見出しフォント"
        value={t.displayFont}
        options={["Zen Kaku Gothic New", "Noto Sans JP", "M PLUS Rounded 1c"]}
        onChange={(v) => setTweak("displayFont", v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const el = document.getElementById("tweaks-root");
  if (el) ReactDOM.createRoot(el).render(<CruxTweaks />);
})();