// Trident — Tweaks panel
const TRIDENT_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "Midnight",
  "accent": "#C2A263",
  "headlineFont": "Cormorant Garamond"
}/*EDITMODE-END*/;

const TRIDENT_DIRECTIONS = { "Midnight": "midnight", "Charcoal": "charcoal", "Ivory": "ivory" };
const TRIDENT_FONTS = ["Cormorant Garamond", "Marcellus", "Libre Caslon Text"];

function TridentTweaks() {
  const [t, setTweak] = useTweaks(TRIDENT_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.dataset.direction = TRIDENT_DIRECTIONS[t.direction] || "midnight";
    document.body.style.setProperty("--accent", t.accent);
    document.body.style.setProperty("--serif", '"' + t.headlineFont + '", serif');
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Direction" />
      <TweakRadio label="Palette" value={t.direction}
        options={Object.keys(TRIDENT_DIRECTIONS)}
        onChange={(v) => setTweak("direction", v)} />
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={t.accent}
        options={["#C2A263", "#A98F58", "#9FA6B2", "#6E8B83"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakSelect label="Headline face" value={t.headlineFont}
        options={TRIDENT_FONTS}
        onChange={(v) => setTweak("headlineFont", v)} />
    </TweaksPanel>
  );
}

(function mountTridentTweaks() {
  const host = document.createElement("div");
  document.body.appendChild(host);
  ReactDOM.createRoot(host).render(<TridentTweaks />);
})();