// Pyramid AI — Home tweaks
// Hero variant selector

const { useEffect } = React;

const HOME_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const body = document.body;
  body.classList.remove("hero-v-split", "hero-v-centered", "hero-v-banner");
  body.classList.add("hero-v-" + t.heroVariant);
}

function HomeTweaks() {
  const [t, setTweak] = useTweaks(HOME_TWEAK_DEFAULTS);

  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero">
        <TweakRadio
          label="Variant"
          value={t.heroVariant}
          onChange={(v) => setTweak("heroVariant", v)}
          options={[
            { value: "split",    label: "Split" },
            { value: "centered", label: "Centered" },
            { value: "banner",   label: "Banner" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// Apply default class on first load before React mounts
applyTweaks(HOME_TWEAK_DEFAULTS);

const root = document.createElement("div");
root.id = "tweaks-root";
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<HomeTweaks />);