// tweaks.jsx — Tweaks panel for Importron marketing page
// Mounts the starter <TweaksPanel> and applies accent / theme to the
// surrounding static HTML page via CSS variables + body classes.

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "indigo",
  "dark": false,
  "heroVariant": "flow",
  "tone": "sachlich",
  "showHeadlineAlt": false
}/*EDITMODE-END*/;

const ACCENTS = {
  indigo:    { name: 'Indigo',     base: '#2a4fde', hover: '#1f3fbf' },
  schiefer:  { name: 'Schiefer',   base: '#1f2937', hover: '#0f172a' },
  bildung:   { name: 'Bildung',    base: '#1f6f4a', hover: '#155a3a' },
  bordeaux:  { name: 'Bordeaux',   base: '#9b1c1c', hover: '#7f1313' }
};

function applyAccent(key) {
  const a = ACCENTS[key] || ACCENTS.indigo;
  document.documentElement.style.setProperty('--accent', a.base);
  document.documentElement.style.setProperty('--accent-hover', a.hover);
  return a;
}

function applyDark(on) {
  document.documentElement.classList.toggle('dark', on);
}

function applyHeroVariant(v) {
  document.documentElement.setAttribute('data-hero', v);
  document.querySelectorAll('[data-hero-visual]').forEach((el) => {
    el.style.display = el.dataset.heroVisual === v ? '' : 'none';
  });
}

function applyTone(v) {
  document.documentElement.setAttribute('data-tone', v);
  document.body.classList.toggle('tonality-direkt', v === 'direkt');
}

function persistTheme(t) {
  try {
    localStorage.setItem('importron_theme', JSON.stringify({
      dark: t.dark,
      accent: ACCENTS[t.accent]?.base,
      accentHover: ACCENTS[t.accent]?.hover,
      heroVariant: t.heroVariant,
      tone: t.tone
    }));
  } catch (e) {}
}

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

  useEffect(() => {
    applyAccent(t.accent);
    applyDark(t.dark);
    applyHeroVariant(t.heroVariant);
    applyTone(t.tone);
    persistTheme(t);
  }, [t.accent, t.dark, t.heroVariant, t.tone]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Farbwelt" />
      <TweakColor
        label="Akzent"
        value={ACCENTS[t.accent]?.base}
        options={Object.values(ACCENTS).map(a => a.base)}
        onChange={(v) => {
          const key = Object.keys(ACCENTS).find(k => ACCENTS[k].base === v) || 'indigo';
          setTweak('accent', key);
        }}
      />
      <TweakToggle
        label="Dark mode"
        value={t.dark}
        onChange={(v) => setTweak('dark', v)}
      />

      <TweakSection label="Hero" />
      <TweakRadio
        label="Visual"
        value={t.heroVariant}
        options={[
          { value: 'flow',  label: 'Flow' },
          { value: 'diff',  label: 'Diff' },
          { value: 'typo',  label: 'Typo' }
        ]}
        onChange={(v) => setTweak('heroVariant', v)}
      />

      <TweakSection label="Tonalität" />
      <TweakRadio
        label="Stil"
        value={t.tone}
        options={[
          { value: 'sachlich', label: 'Sachlich' },
          { value: 'direkt',   label: 'Direkter' }
        ]}
        onChange={(v) => setTweak('tone', v)}
      />
    </TweaksPanel>
  );
}

// Mount
const tweaksRoot = document.createElement('div');
tweaksRoot.id = 'tweaks-root';
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<ImportronTweaks />);