// app.jsx — main app shell, routing, tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "signature",
  "density": "regular",
  "fontPair": "editorial",
  "palette": "terracotta",
  "dark": false
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  root.setAttribute('data-density', t.density);
  root.setAttribute('data-fontpair', t.fontPair);
  root.setAttribute('data-palette', t.palette);
  root.setAttribute('data-mode', t.dark ? 'dark' : 'light');
}

const PALETTES = {
  // Terracotta — paleta-mãe Humanāre (real). Cream + queimado + ocre + tinta profunda.
  terracotta: { bg:'#F4ECE0', paper:'#EADDC9', soft:'#E3C7A6', line:'#D4B898', clay:'#B5784A', terracotta:'#A04D2E', terracottaSoft:'#C2683E', lime:'#C9994C', limeDeep:'#A8803A', ink:'#1F1815', inkSoft:'#5C4A3E', inkMute:'#8E7763' },
  // Cream profundo — variação mais delicada (linho, papelaria fina)
  earth:      { bg:'#F8F1E4', paper:'#EFE3CD', soft:'#DCC9A7', line:'#C8B89C', clay:'#A88B6E', terracotta:'#B5562E', terracottaSoft:'#C77550', lime:'#C9994C', limeDeep:'#A8803A', ink:'#28221C', inkSoft:'#5C5147', inkMute:'#8A7E6E' },
  // Floresta — alternativa institucional
  forest:     { bg:'#F0EDE2', paper:'#DBD7C5', soft:'#B8BBA0', line:'#9AA081', clay:'#5E6B47', terracotta:'#2C3D14', terracottaSoft:'#4F6B22', lime:'#C9994C', limeDeep:'#A8803A', ink:'#181C10', inkSoft:'#3D4A2C', inkMute:'#6B7560' },
  // Noir — alto contraste editorial
  noir:       { bg:'#F1ECE4', paper:'#E2DCD0', soft:'#CFC6B6', line:'#B5AB99', clay:'#7A6E5C', terracotta:'#A04D2E', terracottaSoft:'#C2683E', lime:'#C9994C', limeDeep:'#A8803A', ink:'#0F0C08', inkSoft:'#403930', inkMute:'#867A6C' },
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.earth;
  const r = document.documentElement;
  r.style.setProperty('--bg', p.bg);
  r.style.setProperty('--paper', p.paper);
  r.style.setProperty('--soft', p.soft);
  r.style.setProperty('--line', p.line);
  r.style.setProperty('--clay', p.clay);
  r.style.setProperty('--terracotta', p.terracotta);
  r.style.setProperty('--terracotta-soft', p.terracottaSoft);
  r.style.setProperty('--lime', p.lime);
  r.style.setProperty('--lime-deep', p.limeDeep);
  r.style.setProperty('--ink', p.ink);
  r.style.setProperty('--ink-soft', p.inkSoft);
  r.style.setProperty('--ink-mute', p.inkMute);
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState(() => {
    const h = window.location.hash.replace('#', '');
    return ['home','sobre','palestras','conteudo','contato'].includes(h) ? h : 'home';
  });

  // sync hash with route
  React.useEffect(() => {
    if (route !== 'home') window.location.hash = route;
    else if (window.location.hash) window.history.replaceState(null, '', window.location.pathname);
  }, [route]);

  // listen to back/forward
  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace('#', '');
      setRoute(['home','sobre','palestras','conteudo','contato'].includes(h) ? h : 'home');
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // apply tweaks
  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks.density, tweaks.fontPair, tweaks.dark]);
  React.useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette, tweaks.dark]);

  let page;
  if (route === 'sobre') page = <SobrePage />;
  else if (route === 'palestras') page = <PalestrasPage setRoute={setRoute} />;
  else if (route === 'conteudo') page = <ConteudoPage />;
  else if (route === 'contato') page = <ContatoPage />;
  else page = <Home heroVariant={tweaks.heroVariant} setRoute={setRoute} />;

  return (
    <>
      <Nav route={route} setRoute={setRoute} />
      {page}
      <Footer setRoute={setRoute} />

      <TweaksPanel title="Tweaks — Humanāre">
        <TweakSection label="Layout" />
        <TweakSelect label="Hero (home)" value={tweaks.heroVariant}
          options={[
            { value: 'signature',  label: '★ Signature · carta de chegada' },
            { value: 'cover',      label: 'Cover Story · capa de revista' },
            { value: 'stage',      label: 'Stage · cinematográfico escuro' },
            { value: 'triptych',   label: 'Triptych · três painéis' },
            { value: 'split',      label: 'Split editorial' },
            { value: 'manifesto',  label: 'Full-bleed manifesto' },
            { value: 'asymmetric', label: 'Asymmetric bold' },
          ]}
          onChange={(v) => { setTweak('heroVariant', v); setRoute('home'); window.scrollTo({top:0,behavior:'instant'}); }} />
        <TweakRadio label="Densidade" value={tweaks.density}
          options={['compact', 'regular', 'spacious']}
          onChange={(v) => setTweak('density', v)} />

        <TweakSection label="Marca" />
        <TweakSelect label="Paleta" value={tweaks.palette}
          options={[
            { value: 'terracotta', label: '★ Terracota · marca Humanāre' },
            { value: 'earth',      label: 'Earth · cream delicado' },
            { value: 'forest',     label: 'Forest · verde institucional' },
            { value: 'noir',       label: 'Noir · alto contraste' },
          ]}
          onChange={(v) => setTweak('palette', v)} />
        <TweakToggle label="Modo escuro" value={tweaks.dark}
          onChange={(v) => setTweak('dark', v)} />

        <TweakSection label="Tipografia" />
        <TweakSelect label="Par de fontes" value={tweaks.fontPair}
          options={[
            { value: 'editorial', label: 'Editorial · Cormorant + Manrope' },
            { value: 'modern',    label: 'Moderno · DM Serif + Manrope' },
            { value: 'sans',      label: 'Sans · Sora + Sora' },
          ]}
          onChange={(v) => setTweak('fontPair', v)} />

        <TweakSection label="Navegação" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginTop: 6 }}>
          {[['home','Início'],['sobre','Sobre'],['palestras','Palestras'],['conteudo','Conteúdo'],['contato','Contato']].map(([k,l]) => (
            <button key={k}
              onClick={() => { setRoute(k); window.scrollTo({top:0,behavior:'instant'}); }}
              style={{
                fontFamily: 'var(--font-mono)', fontSize: '0.62rem',
                letterSpacing: '0.16em', textTransform: 'uppercase',
                padding: '8px 10px', border: '1px solid var(--line)',
                background: route === k ? 'var(--ink)' : 'transparent',
                color: route === k ? 'var(--bg)' : 'var(--ink-soft)',
                cursor: 'pointer', borderRadius: 6,
              }}>{l}</button>
          ))}
        </div>
      </TweaksPanel>
    </>
  );
}

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