const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Original",
  "density": "regular",
  "motion": true
}/*EDITMODE-END*/;

const PALETTES = {
  Original: {
    cream:    '#F0E5C9',
    'cream-2':'#E8DAB7',
    'cream-3':'#F7EFD9',
    ink:      '#1F1108',
    orange:   '#DD4926',
    matcha:   '#7A9B4E',
  },
  Tostado: {
    cream:    '#E8D6B3',
    'cream-2':'#D9C49A',
    'cream-3':'#F2E5C4',
    ink:      '#2A150A',
    orange:   '#C13F1F',
    matcha:   '#6B8F3F',
  },
  Frío: {
    cream:    '#EEEAE0',
    'cream-2':'#DDD6C5',
    'cream-3':'#F8F4E8',
    ink:      '#141414',
    orange:   '#EA5A38',
    matcha:   '#558A6F',
  },
  Noche: {
    cream:    '#2A1F18',
    'cream-2':'#3A2A1F',
    'cream-3':'#F0E5C9',
    ink:      '#F0E5C9',
    orange:   '#FF6B3D',
    matcha:   '#9CC062',
  },
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.Original;
  const root = document.documentElement;
  Object.entries(p).forEach(([k, v]) => root.style.setProperty('--' + k, v));
  // Derived
  if (name === 'Noche') {
    root.style.setProperty('--ink-soft', '#D6BFA0');
    document.body.style.color = p.ink;
  } else {
    root.style.setProperty('--ink-soft', '#3A2418');
    document.body.style.color = p.ink;
  }
}

function applyDensity(d) {
  const root = document.documentElement;
  if (d === 'compact')      root.style.setProperty('--sec-pad', '64px');
  else if (d === 'comfy')   root.style.setProperty('--sec-pad', '120px');
  else                      root.style.setProperty('--sec-pad', '96px');
}

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

  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  React.useEffect(() => { applyDensity(t.density); }, [t.density]);
  React.useEffect(() => {
    document.documentElement.style.setProperty(
      '--motion-state',
      t.motion ? 'running' : 'paused'
    );
    // Toggle animations off entirely if motion is off
    document.body.classList.toggle('no-motion', !t.motion);
  }, [t.motion]);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <Especialidad />
      <MenuSection />
      <Experiencias />
      <Reviews />
      <Visit />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Tema" />
        <TweakRadio
          label="Paleta"
          value={t.palette}
          options={['Original','Tostado','Frío','Noche']}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSection label="Diseño" />
        <TweakRadio
          label="Densidad"
          value={t.density}
          options={['compact','regular','comfy']}
          onChange={(v) => setTweak('density', v)}
        />
        <TweakToggle
          label="Animaciones"
          value={t.motion}
          onChange={(v) => setTweak('motion', v)}
        />
      </TweaksPanel>
    </>
  );
}

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