/* Perfect EMB — Tweaks panel */
const EMB_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "cards": "featured",
  "accent": "#C89A4B",
  "darkBg": "#08111F",
  "font": "Inter",
  "radius": 20,
  "density": "standard"
}/*EDITMODE-END*/;

const FONT_MAP = {
  "Inter": "'Inter',system-ui,sans-serif",
  "Jakarta": "'Plus Jakarta Sans',system-ui,sans-serif",
  "Manrope": "'Manrope',system-ui,sans-serif"
};
const DENSITY_MAP = { "Compact": 80, "Standard": 112, "Aéré": 148 };
const DENSITY_LABELS = { "compact": "Compact", "standard": "Standard", "aere": "Aéré" };

function EMBTweaks() {
  const [t, setTweak] = useTweaks(EMB_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    document.body.setAttribute('data-hero', t.hero);
    document.body.setAttribute('data-cards', t.cards);
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-light', `color-mix(in oklab, ${t.accent} 62%, white)`);
    root.style.setProperty('--dark-bg', t.darkBg);
    root.style.setProperty('--font', FONT_MAP[t.font] || FONT_MAP.Inter);
    root.style.setProperty('--radius', t.radius + 'px');
    root.style.setProperty('--radius-sm', Math.min(t.radius, 14) + 'px');
    const dkey = (t.density || 'standard');
    const dlabel = DENSITY_LABELS[dkey] || 'Standard';
    root.style.setProperty('--section-pad', (DENSITY_MAP[dlabel] || 112) + 'px');
  }, [t]);

  return (
    <TweaksPanel title="Tweaks · Perfect EMB">
      <TweakSection label="Variantes" />
      <TweakRadio label="Hero" value={t.hero}
        options={[{value:'split',label:'Split'},{value:'full',label:'Plein écran'},{value:'center',label:'Centré'}]}
        onChange={(v) => setTweak('hero', v)} />
      <TweakRadio label="Services" value={t.cards}
        options={[{value:'featured',label:'Spécialité'},{value:'equal',label:'Égales'},{value:'dark',label:'Sombres'}]}
        onChange={(v) => setTweak('cards', v)} />

      <TweakSection label="Identité" />
      <TweakColor label="Accent or" value={t.accent}
        options={['#C89A4B', '#B8862F', '#D4AF6A', '#A8842E', '#CBB26B']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakRadio label="Fond sombre" value={t.darkBg}
        options={[{value:'#08111F',label:'Bleu nuit'},{value:'#0B0B0D',label:'Noir'}]}
        onChange={(v) => setTweak('darkBg', v)} />
      <TweakRadio label="Police" value={t.font}
        options={['Inter', 'Jakarta', 'Manrope']}
        onChange={(v) => setTweak('font', v)} />

      <TweakSection label="Mise en page" />
      <TweakSlider label="Rayon des coins" value={t.radius} min={0} max={28} step={2} unit="px"
        onChange={(v) => setTweak('radius', v)} />
      <TweakRadio label="Densité" value={t.density}
        options={[{value:'compact',label:'Compact'},{value:'standard',label:'Standard'},{value:'aere',label:'Aéré'}]}
        onChange={(v) => setTweak('density', v)} />
    </TweaksPanel>
  );
}

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