/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headingFont": "mincho",
  "accent": "#C98682",
  "showFloatCards": true,
  "heroLayout": "split"
}/*EDITMODE-END*/;

const FONT_STACKS = {
  mincho: '"Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif',
  zen:    '"Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif',
  noto:   '"Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif'
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--font-heading', FONT_STACKS[tweaks.headingFont] || FONT_STACKS.mincho);
    root.style.setProperty('--accent', tweaks.accent);
    // Derive hover from accent (slightly darker via mix)
    root.style.setProperty('--accent-hover', tweaks.accent === '#C98682' ? '#A96F6B' : tweaks.accent);

    // Float cards toggle
    document.querySelectorAll('.hero__visual .float-card').forEach(el => {
      el.style.display = tweaks.showFloatCards ? '' : 'none';
    });

    // Hero layout
    const grid = document.querySelector('.hero .grid');
    if (grid) {
      if (tweaks.heroLayout === 'centered') {
        grid.style.gridTemplateColumns = '1fr';
        grid.style.maxWidth = '720px';
        grid.style.marginInline = 'auto';
        grid.style.textAlign = 'center';
        const visual = grid.querySelector('.hero__visual');
        if (visual) visual.style.display = 'none';
      } else {
        grid.style.gridTemplateColumns = '';
        grid.style.maxWidth = '';
        grid.style.marginInline = '';
        grid.style.textAlign = '';
        const visual = grid.querySelector('.hero__visual');
        if (visual) visual.style.display = '';
      }
    }
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Typography">
        <TweakRadio
          label="見出しフォント"
          value={tweaks.headingFont}
          options={[
            { value: 'mincho', label: '明朝（上品）' },
            { value: 'zen',    label: 'Zen角ゴ' },
            { value: 'noto',   label: 'Noto Sans' },
          ]}
          onChange={(v) => setTweak('headingFont', v)}
        />
      </TweakSection>

      <TweakSection title="Color">
        <TweakColor
          label="アクセント"
          value={tweaks.accent}
          options={['#C98682', '#B89890', '#C9A07E', '#A8A48F']}
          onChange={(v) => setTweak('accent', v)}
        />
      </TweakSection>

      <TweakSection title="Hero">
        <TweakRadio
          label="レイアウト"
          value={tweaks.heroLayout}
          options={[
            { value: 'split',    label: '左右2カラム' },
            { value: 'centered', label: '中央寄せ' },
          ]}
          onChange={(v) => setTweak('heroLayout', v)}
        />
        <TweakToggle
          label="フロートカード表示"
          value={tweaks.showFloatCards}
          onChange={(v) => setTweak('showFloatCards', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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