// app.jsx — Root app with router, tweaks, palette
const { useState, useEffect, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "navy",
  "menuStyle": "hamburger",
  "animIntensity": "medium",
  "heroPhrase": "Lo que no se cuenta, no termina de irse."
}/*EDITMODE-END*/;

const PALETTES = {
  navy: {
    '--bg-0': '#0c0f14', '--bg-1': '#131820', '--bg-2': '#1a212b', '--bg-3': '#232b38',
    '--ink': '#e7e9ee', '--ink-soft': '#b6bdcb', '--ink-mute': '#7c8597', '--ink-faint': '#4d5564',
    '--accent': '#8b9bb4', '--accent-warm': '#c9b89a',
    '--line': 'rgba(139, 155, 180, 0.14)', '--line-strong': 'rgba(139, 155, 180, 0.28)',
  },
  charcoal: {
    '--bg-0': '#0a0a0c', '--bg-1': '#121214', '--bg-2': '#1a1a1d', '--bg-3': '#22222a',
    '--ink': '#ebe9e3', '--ink-soft': '#bdbab1', '--ink-mute': '#827e74', '--ink-faint': '#544f47',
    '--accent': '#c9a96a', '--accent-warm': '#c9a96a',
    '--line': 'rgba(201, 169, 106, 0.14)', '--line-strong': 'rgba(201, 169, 106, 0.30)',
  },
  oxblood: {
    '--bg-0': '#100c0a', '--bg-1': '#181210', '--bg-2': '#1f1815', '--bg-3': '#2a201c',
    '--ink': '#ece4dd', '--ink-soft': '#c0b4a8', '--ink-mute': '#857669', '--ink-faint': '#55483e',
    '--accent': '#a8552e', '--accent-warm': '#c98a6a',
    '--line': 'rgba(168, 85, 46, 0.18)', '--line-strong': 'rgba(168, 85, 46, 0.36)',
  },
  bone: {
    '--bg-0': '#0a0a0a', '--bg-1': '#111111', '--bg-2': '#171717', '--bg-3': '#1f1f1f',
    '--ink': '#e8e2d4', '--ink-soft': '#bcb7ab', '--ink-mute': '#857f74', '--ink-faint': '#56514a',
    '--accent': '#e8e2d4', '--accent-warm': '#c9b89a',
    '--line': 'rgba(232, 226, 212, 0.10)', '--line-strong': 'rgba(232, 226, 212, 0.22)',
  },
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.navy;
  const root = document.documentElement;
  Object.entries(p).forEach(([k, v]) => root.style.setProperty(k, v));
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { path } = useRoute();
  useReveal();
  useDocTitle();

  useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  useEffect(() => {
    document.body.setAttribute('data-anim',
      t.animIntensity === 'low' ? 'subtle' :
      t.animIntensity === 'high' ? 'cinematic' : 'medium');
  }, [t.animIntensity]);

  // Route resolution
  let page;
  if (path === '/') page = <HomePage heroPhrase={t.heroPhrase} />;
  else if (path === '/sobre') page = <SobrePage />;
  else if (path === '/obra') page = <ObraPage />;
  else if (path === '/obra/literatura') page = <LiteraturaPage />;
  else if (path === '/obra/cine') page = <CinePage />;
  else if (path === '/obra/teatro') page = <TeatroPage />;
  else if (path === '/prensa' || path === '/medios') page = <MediosPage />;
  else if (path === '/contacto') page = <ContactoPage />;
  else if (path.startsWith('/libro/')) {
    const slug = path.replace('/libro/', '');
    page = <LibroPage slug={slug} />;
  }
  else if (path.startsWith('/cine/')) {
    const slug = path.replace('/cine/', '');
    page = <CineDetailPage slug={slug} />;
  }
  else if (path === '/legal/aviso')      page = <AvisoLegalPage />;
  else if (path === '/legal/privacidad') page = <PrivacidadPage />;
  else if (path === '/legal/cookies')    page = <CookiesPage />;
  else page = <NotFoundPage />;

  return (
    <>
      <Nav menuStyle={t.menuStyle} />
      <main>{page}</main>
      <Footer />
      <CookieBanner />

      <TweaksPanel>
        <TweakSection label="Identidad visual" />
        <TweakColor
          label="Paleta"
          value={
            t.palette === 'navy' ? '#0c0f14' :
            t.palette === 'charcoal' ? '#0a0a0c' :
            t.palette === 'oxblood' ? '#100c0a' :
            '#0a0a0a'
          }
          options={['#0c0f14', '#0a0a0c', '#100c0a', '#0a0a0a']}
          onChange={(v) => {
            const name = v === '#0c0f14' ? 'navy' : v === '#0a0a0c' ? 'charcoal' : v === '#100c0a' ? 'oxblood' : 'bone';
            setTweak('palette', name);
          }}
        />
        <div className="mono" style={{ fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(41,38,27,.55)', marginTop: -4 }}>
          {t.palette === 'navy' && 'Navy · acento steel'}
          {t.palette === 'charcoal' && 'Charcoal · acento dorado'}
          {t.palette === 'oxblood' && 'Oxblood · acento cobre'}
          {t.palette === 'bone' && 'Bone · acento hueso'}
        </div>

        <TweakSection label="Navegación" />
        <TweakRadio
          label="Menú"
          value={t.menuStyle}
          options={['hamburger', 'minimal']}
          onChange={(v) => setTweak('menuStyle', v)}
        />
        <div className="mono" style={{ fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(41,38,27,.55)' }}>
          {t.menuStyle === 'hamburger' && 'Solo hamburguesa + overlay cinemático'}
          {t.menuStyle === 'minimal' && 'Nav inline en desktop + hamburguesa en móvil'}
        </div>

        <TweakSection label="Animaciones" />
        <TweakRadio
          label="Intensidad"
          value={t.animIntensity}
          options={['low', 'medium', 'high']}
          onChange={(v) => setTweak('animIntensity', v)}
        />

        <TweakSection label="Hero" />
        <TweakText
          label="Frase"
          value={t.heroPhrase}
          onChange={(v) => setTweak('heroPhrase', v)}
        />
      </TweaksPanel>
    </>
  );
}

function Root() {
  return (
    <LangProvider>
      <CountryProvider>
        <RouteProvider>
          <App />
        </RouteProvider>
      </CountryProvider>
    </LangProvider>
  );
}

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