// portfolio-tweaks.jsx — Tweaks panel for Khadija's portfolio.
// Applies live changes to the static page via CSS variables + body data-attrs.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "accent": ["#E2552E", "#B23E1C", "#C9763E"],
  "round": 22,
  "lang": "en"
}/*EDITMODE-END*/;

const ACCENTS = [
  ["#E2552E", "#B23E1C", "#C9763E"], // terracotta coral (default)
  ["#E0894A", "#B5631F", "#D2A65E"], // warm ochre
  ["#D6604B", "#A8392B", "#C97A57"], // clay red
  ["#C9755B", "#9A4F38", "#D9A07E"], // soft rust
  ["#5C8A6E", "#3E6750", "#8FB39B"]  // sage (alt warm-cool)
];

function applyTweaks(t) {
  const b = document.body;
  b.setAttribute('data-hero', t.hero);
  b.setAttribute('data-lang', t.lang);
  document.documentElement.lang = t.lang;
  document.querySelectorAll('.lang-toggle button').forEach(btn =>
    btn.classList.toggle('active', btn.dataset.setlang === t.lang));

  const root = document.documentElement.style;
  const [a, aink, a2] = t.accent;
  root.setProperty('--accent', a);
  root.setProperty('--accent-ink', aink);
  root.setProperty('--accent-2', a2);

  const r = t.round;
  root.setProperty('--radius-sm', (r * 0.64) + 'px');
  root.setProperty('--radius', r + 'px');
  root.setProperty('--radius-lg', (r * 1.36) + 'px');
  root.setProperty('--radius-xl', (r * 1.82) + 'px');
}

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

  React.useEffect(() => { applyTweaks(t); }, [t]);

  // keep nav language buttons in sync with the panel
  React.useEffect(() => {
    const handler = (e) => {
      const lang = e.target.closest('[data-setlang]');
      if (lang) setTweak('lang', lang.dataset.setlang);
    };
    document.querySelector('.lang-toggle').addEventListener('click', handler);
    return () => document.querySelector('.lang-toggle')?.removeEventListener('click', handler);
  }, []);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero layout" />
      <TweakRadio
        label="Style"
        value={t.hero}
        options={[
          { value: 'split', label: 'Split' },
          { value: 'centered', label: 'Centered' },
          { value: 'overlap', label: 'Editorial' }
        ]}
        onChange={(v) => setTweak('hero', v)}
      />

      <TweakSection label="Colour" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={ACCENTS}
        onChange={(v) => setTweak('accent', v)}
      />

      <TweakSection label="Feel" />
      <TweakSlider
        label="Corner softness"
        value={t.round}
        min={6} max={34} step={2} unit="px"
        onChange={(v) => setTweak('round', v)}
      />

      <TweakSection label="Language" />
      <TweakRadio
        label="Site language"
        value={t.lang}
        options={[{ value: 'en', label: 'English' }, { value: 'fr', label: 'Français' }]}
        onChange={(v) => setTweak('lang', v)}
      />
    </TweaksPanel>
  );
}

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