// Memoria Aeterna — Tweaks panel app
// Mounted on every page. Reads/writes the same localStorage key as shared.js
// so changes apply immediately + persist across nav.

const { useState, useEffect, useRef } = React;

function MATweaksApp() {
  const defaults = window.__maTweakDefaults;
  const [t, setT] = useState(() => window.__maReadTweaks());

  function update(key, value) {
    const next = { ...t, [key]: value };
    setT(next);
    window.__maWriteTweaks(next);
    window.__maApplyTweaks();
  }

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakRadio
        label="Style"
        value={t.heroStyle}
        options={[
          { value: 'gamma', label: 'γ Landscape' },
          { value: 'alpha', label: 'α Object' },
          { value: 'beta',  label: 'β Type' },
        ]}
        onChange={(v) => update('heroStyle', v)}
      />

      <TweakSection label="Origin Story" />
      <TweakSelect
        label="Section II"
        value={t.originStory}
        options={[
          { value: 'A', label: 'A, The Pantheon Question' },
          { value: 'B', label: 'B, The Library Reader' },
          { value: 'C', label: 'C, The Engineer\u2019s Observation' },
          { value: 'D', label: 'D, The Time Letter' },
          { value: 'E', label: 'E, The Question Unasked' },
          { value: 'F', label: 'F, The Conversation Postponed' },
          { value: 'G', label: 'G, Something That Will Outlive Us' },
        ]}
        onChange={(v) => update('originStory', v)}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Font pair"
        value={t.fontPair}
        options={[
          { value: 'classical', label: 'Cinzel + EB Garamond' },
          { value: 'italian',   label: 'Cinzel + Cormorant' },
          { value: 'editorial', label: 'Cormorant SC + EB Garamond' },
          { value: 'cormorant', label: 'Cormorant SC + Cormorant' },
        ]}
        onChange={(v) => update('fontPair', v)}
      />

      <TweakSection label="Mood" />
      <TweakRadio
        label="Background"
        value={t.bgMode}
        options={[
          { value: 'alternating', label: 'Alt.' },
          { value: 'white', label: 'White' },
          { value: 'cream', label: 'Cream' },
        ]}
        onChange={(v) => update('bgMode', v)}
      />
      <TweakRadio
        label="Gold"
        value={t.goldIntensity}
        options={[
          { value: 'low',  label: 'Soft' },
          { value: 'mid',  label: 'Mid' },
          { value: 'high', label: 'Bold' },
        ]}
        onChange={(v) => update('goldIntensity', v)}
      />
    </TweaksPanel>
  );
}

// Wait until React + tweaks-panel.jsx are ready, then mount
(function mount() {
  const root = document.getElementById('tweaks-root');
  if (!root) return;
  ReactDOM.createRoot(root).render(<MATweaksApp />);
})();