/* global React, ReactDOM, Header, PromoBar, Footer, Hero, ManifestoStrip, ComoFunciona, NaCaixa, Pilares, Planos, Depoimentos, Pesquisa, GrupoUau, Conselho, FAQ, Newsletter */
const { useState: useAppState, useEffect: useAppEffect } = React;

const APP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cream",
  "heroStyle": "split",
  "showStats": true
}/*EDITMODE-END*/;

function applyPalette(palette) {
  const root = document.documentElement;
  if (palette === 'cream') {
    root.style.setProperty('--page-bg', 'var(--essencia)');
  } else if (palette === 'peach') {
    root.style.setProperty('--page-bg', '#FBEFE7');
  } else if (palette === 'sopro') {
    root.style.setProperty('--page-bg', 'var(--sopro)');
  }
}

function LandingApp() {
  const tweaks = window.useTweaks
    ? window.useTweaks(APP_TWEAK_DEFAULTS)
    : [APP_TWEAK_DEFAULTS, () => {}];
  const [t, setTweak] = tweaks;

  useAppEffect(() => { applyPalette(t.palette); }, [t.palette]);

  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakRadio = window.TweakRadio;
  const TweakToggle = window.TweakToggle;

  return (
    <>
      <PromoBar />
      <Header active="inicio" />
      <main>
        <Hero style={t.heroStyle} />
        <ManifestoStrip />
        <ComoFunciona />
        <NaCaixa />
        <Pilares />
        <Planos />
        <Depoimentos />
        <Pesquisa showStats={t.showStats} />
        <GrupoUau />
        <Conselho />
        <FAQ />
        <Newsletter />
      </main>
      <Footer />

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Paleta">
            <TweakRadio
              label="Fundo"
              value={t.palette}
              options={[
                { value: 'cream', label: 'Essência' },
                { value: 'peach', label: 'Acolh.' },
                { value: 'sopro', label: 'Sopro' },
              ]}
              onChange={v => setTweak('palette', v)}
            />
          </TweakSection>
          <TweakSection label="Hero">
            <TweakRadio
              label="Layout"
              value={t.heroStyle}
              options={[
                { value: 'split', label: 'Split' },
                { value: 'editorial', label: 'Editor.' },
                { value: 'fullbleed', label: 'Full' },
              ]}
              onChange={v => setTweak('heroStyle', v)}
            />
          </TweakSection>
          <TweakSection label="Conteúdo">
            <TweakToggle
              label="Mostrar dados estatísticos"
              value={t.showStats}
              onChange={v => setTweak('showStats', v)}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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