// Tweaks for landing.html — typography scale only (per user request)
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "typeset": "bold"
}/*EDITMODE-END*/;

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

  useEffect(() => {
    const root = document.querySelector(".root");
    if (!root) return;
    root.dataset.typeset = tweaks.typeset;
  }, [tweaks.typeset]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Typography scale">
        <TweakRadio
          value={tweaks.typeset}
          onChange={(v) => setTweak("typeset", v)}
          options={[
            { value: "bold", label: "Bold display" },
            { value: "calm", label: "Calm" },
          ]}
        />
        <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "#6B6B66", marginTop: 8, lineHeight: 1.5 }}>
          Hero/section headlines scale down ~22% in Calm mode.
        </div>
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<TweaksApp />);