/* =====================================================================
   自由IT同盟 — Landing page Tweaks
   Maps panel state → #lp-root CSS vars / data-* attributes
   ===================================================================== */

const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor } = window;

const LP_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#4f46e5",
  "motif": "none",
  "glow": true,
  "mark": true,
  "cards": "plain"
}/*EDITMODE-END*/;

// accent hex → derive ink/soft/line via oklch-ish tints in CSS using color-mix on the hex
function applyAccent(root, hex) {
  root.style.setProperty('--acc', hex);
  root.style.setProperty('--acc-ink', `color-mix(in oklch, ${hex} 82%, black)`);
  root.style.setProperty('--acc-soft', `color-mix(in oklch, ${hex} 12%, white)`);
  root.style.setProperty('--acc-line', `color-mix(in oklch, ${hex} 32%, white)`);
}

function LandingTweaks() {
  const [t, setTweak] = useTweaks(LP_DEFAULTS);
  const root = document.getElementById('lp-root');

  React.useEffect(() => {
    if (!root) return;
    applyAccent(root, t.accent);
    root.dataset.motif = t.motif;
    root.dataset.glow = t.glow ? 'on' : 'off';
    root.dataset.mark = t.mark ? 'on' : 'off';
    root.dataset.cards = t.cards;
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="アクセント" />
      <TweakColor label="カラー" value={t.accent}
        options={['#4f46e5', '#0d9488', '#db2777', '#ea580c', '#2563eb']}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="背景モチーフ" />
      <TweakRadio label="パターン" value={t.motif}
        options={['none', 'dots', 'grid']}
        onChange={(v) => setTweak('motif', v)} />
      <TweakToggle label="グロー（光彩）" value={t.glow}
        onChange={(v) => setTweak('glow', v)} />

      <TweakSection label="見出し / カード" />
      <TweakToggle label="ロゴマークを表示" value={t.mark}
        onChange={(v) => setTweak('mark', v)} />
      <TweakRadio label="カード質感" value={t.cards}
        options={['plain', 'tinted']}
        onChange={(v) => setTweak('cards', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<LandingTweaks />);