/* DBE Tweaks panel */
const DBE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "boutique",
  "palette": "ink",
  "typeset": "default",
  "density": "default",
  "mode": "light"
}/*EDITMODE-END*/;

const DBE_PALETTES = {
  ink:      ['#f3f5f8', '#15355f', '#1f4a82', '#b8c4d0'],
  brass:    ['#f1ece1', '#15355f', '#a48556', '#b8c4d0'],
  forest:   ['#eaeee9', '#14342a', '#3a6b54', '#6e8398'],
  charcoal: ['#ecedef', '#0d1f33', '#6e8398', '#b8c4d0']
};

function DBETweaks() {
  const [t, setTweak] = useTweaks(DBE_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const body = document.body;
    body.setAttribute('data-variant', t.variant);
    body.setAttribute('data-palette', t.palette);
    body.setAttribute('data-typeset', t.typeset);
    body.setAttribute('data-density', t.density);
    body.setAttribute('data-mode', t.mode);
    const hero = document.querySelector('.hero');
    if (hero) hero.setAttribute('data-variant', t.variant);
  }, [t]);

  const currentPaletteArr = DBE_PALETTES[t.palette] || DBE_PALETTES.ink;
  const setPalette = (arr) => {
    const name = Object.keys(DBE_PALETTES).find(
      (k) => JSON.stringify(DBE_PALETTES[k]) === JSON.stringify(arr)
    );
    if (name) setTweak('palette', name);
  };

  return (
    <TweaksPanel title="Tweaks · DBE">
      <TweakSection label="Hero variant" />
      <TweakRadio
        label="Hero"
        value={t.variant}
        onChange={(v) => setTweak('variant', v)}
        options={[
          { value: 'boutique',  label: 'Boutique' },
          { value: 'tech',      label: 'Maritime' },
          { value: 'franchise', label: 'Editorial' }
        ]}
      />

      <TweakSection label="Color palette" />
      <TweakColor
        label="Palette"
        value={currentPaletteArr}
        onChange={setPalette}
        options={Object.values(DBE_PALETTES)}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Type pairing"
        value={t.typeset}
        onChange={(v) => setTweak('typeset', v)}
        options={[
          { value: 'default', label: 'Cormorant · Manrope (default)' },
          { value: 'grand',   label: 'Cinzel · Manrope (formal)' },
          { value: 'modern',  label: 'Manrope · Manrope (modern)' }
        ]}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Density"
        value={t.density}
        onChange={(v) => setTweak('density', v)}
        options={[
          { value: 'compact',  label: 'Compact' },
          { value: 'default',  label: 'Default' },
          { value: 'spacious', label: 'Roomy' }
        ]}
      />

      <TweakRadio
        label="Mode"
        value={t.mode}
        onChange={(v) => setTweak('mode', v)}
        options={[
          { value: 'light', label: 'Light' },
          { value: 'dark',  label: 'Dark' }
        ]}
      />
    </TweaksPanel>
  );
}

const dbeRoot = ReactDOM.createRoot(document.getElementById('tweaks-root'));
dbeRoot.render(<DBETweaks />);