// App entry — wires routing + tweaks + i18n

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "warm",
  "typeface": "classic",
  "density": "default",
  "lang": "pt"
}/*EDITMODE-END*/;

function App() {
  const [page, setPage] = React.useState('home');
  const [tourId, setTourId] = React.useState(TOURS[0].id);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLangState] = React.useState(() => {
    try { return localStorage.getItem('bra-lang') || tweaks.lang || 'pt'; } catch (e) { return tweaks.lang || 'pt'; }
  });

  const setLang = (next) => {
    setLangState(next);
    try { localStorage.setItem('bra-lang', next); } catch (e) {}
    setTweak('lang', next);
  };

  React.useEffect(() => {
    document.body.dataset.theme = tweaks.theme;
    document.body.dataset.typeface = tweaks.typeface;
    document.body.dataset.density = tweaks.density;
  }, [tweaks.theme, tweaks.typeface, tweaks.density]);

  React.useEffect(() => {
    const map = { pt: 'pt-BR', en: 'en', es: 'es' };
    document.documentElement.lang = map[lang] || 'pt-BR';
  }, [lang]);

  const t = LANGS[lang] || LANGS.pt;

  const go = (p, id) => {
    if (p === 'tour' && id) setTourId(id);
    setPage(p);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  let content;
  switch (page) {
    case 'tours': content = <ToursPage go={go} />; break;
    case 'tour': content = <TourPage tourId={tourId} go={go} />; break;
    case 'precos': content = <PrecosPage go={go} />; break;
    case 'ingressos': content = <IngressosPage />; break;
    case 'sobre': content = <SobrePage go={go} />; break;
    case 'contato': content = <ContatoPage />; break;
    default: content = <HomePage go={go} />;
  }

  return (
    <LangContext.Provider value={{ lang, setLang, t }}>
      <div data-screen-label={`Página · ${page}`}>
        <Nav page={page} go={go} />
        {content}
        <Footer go={go} />

        <TweaksPanel title="Tweaks">
          <TweakSection title="Idioma / Language">
            <TweakRadio
              label="Idioma"
              value={lang}
              onChange={setLang}
              options={[
                { value: 'pt', label: 'PT' },
                { value: 'en', label: 'EN' },
                { value: 'es', label: 'ES' },
              ]}
            />
          </TweakSection>
          <TweakSection title="Paleta">
            <TweakRadio
              label="Tema"
              value={tweaks.theme}
              onChange={(v) => setTweak('theme', v)}
              options={[
                { value: 'warm', label: 'Areia' },
                { value: 'cream', label: 'Creme' },
                { value: 'midnight', label: 'Noite' },
              ]}
            />
          </TweakSection>
          <TweakSection title="Tipografia">
            <TweakRadio
              label="Estilo"
              value={tweaks.typeface}
              onChange={(v) => setTweak('typeface', v)}
              options={[
                { value: 'classic', label: 'Editorial' },
                { value: 'modern', label: 'Sans' },
              ]}
            />
          </TweakSection>
          <TweakSection title="Densidade">
            <TweakRadio
              label="Espaçamento"
              value={tweaks.density}
              onChange={(v) => setTweak('density', v)}
              options={[
                { value: 'compact', label: 'Compacto' },
                { value: 'default', label: 'Padrão' },
                { value: 'spacious', label: 'Amplo' },
              ]}
            />
          </TweakSection>
        </TweaksPanel>
      </div>
    </LangContext.Provider>
  );
}

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