// app.jsx — single full-bleed Editorial landing.
// Tweaki: paleta + layout hero. Stosowane bezpośrednio do VariantEditorial.

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "left",
  "paletteMode": "default"
}/*EDITMODE-END*/;

// Override tylko kilku tokenów; reszta pozostaje z defaultu Editorial.
const PALETTE_MODES = {
  default: null,
  warm:     { bg: '#f1ead8', bgAlt: '#e2d8be', accent: '#a35327' },
  cool:     { bg: '#e9eaea', bgAlt: '#dadcdc', accent: '#3a4452' },
  contrast: { bg: '#f7f5f1', bgAlt: '#ebe8e1', accent: '#c4392f' },
};

function App() {
  const { isDesktop } = useBreakpoint();
  const [tweaks, setTweak] = useTweaks(TWEAKS_DEFAULTS);
  const override = PALETTE_MODES[tweaks.paletteMode] || null;

  return (
    <>
      <VariantEditorial heroLayout={tweaks.heroLayout} paletteOverride={override} />

      {isDesktop && (
      <TweaksPanel title="Tweaks">
        <TweakSection label="Layout hero">
          <TweakSelect
            label="Wariant"
            value={tweaks.heroLayout}
            onChange={(v) => setTweak('heroLayout', v)}
            options={[
              { value: 'left', label: 'Lewy (split z obrazem)' },
              { value: 'center', label: 'Wycentrowany' },
              { value: 'fullbleed', label: 'Full-bleed' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Paleta kolorów">
          <TweakRadio
            label="Tonacja"
            value={tweaks.paletteMode}
            onChange={(v) => setTweak('paletteMode', v)}
            options={[
              { value: 'default', label: 'Domyślna (kremowa + terakota)' },
              { value: 'warm', label: 'Ciepła (piasek + miód)' },
              { value: 'cool', label: 'Chłodna (kamień + grafit)' },
              { value: 'contrast', label: 'Kontrast (off-white + carmine)' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
Object.assign(window, { App });