// Main App — composes all sections + Tweaks panel

const HERO_HEADLINES = {
  conduzir: {
    lead: 'Um espaço para quem deseja conduzir',
    tail: 'experiências que transformam vidas.',
  },
  serra: {
    lead: 'Onde a serra acolhe',
    tail: 'o que precisa florescer.',
  },
  direto: {
    lead: 'Estrutura completa',
    tail: 'para retiros e formações em Gramado.',
  },
  templo: {
    lead: 'Mais que um espaço.',
    tail: 'Um templo para experiências profundas.',
  },
};

const PALETTES = {
  noite:    ['#0e1322', '#1a2138', '#d4b896', '#f4ede0'],
  floresta: ['#101a16', '#1f2c25', '#c9b888', '#f1ece0'],
  terra:    ['#1a120c', '#2a1f17', '#d8a878', '#f4ebde'],
  claro:    ['#f4ede0', '#ebe1cc', '#8a6a3a', '#1a1410'],
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "noite",
  "headline": "conduzir",
  "heroLayout": "full",
  "density": "regular"
}/*EDITMODE-END*/;

function applyPalette(name) {
  const data = JSON.parse(document.getElementById('palettes').textContent);
  const p = data[name] || data.noite;
  const root = document.documentElement.style;
  root.setProperty('--bg', p.bg);
  root.setProperty('--bg-2', p.bg2);
  root.setProperty('--card', p.card);
  root.setProperty('--line', p.line);
  root.setProperty('--ink', p.ink);
  root.setProperty('--muted', p.muted);
  root.setProperty('--gold', p.gold);
  root.setProperty('--gold-deep', p.goldDeep);
  root.setProperty('--accent', p.accent);
}

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

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

  React.useEffect(() => {
    document.body.setAttribute('data-density', t.density);
  }, [t.density]);

  const WHATSAPP = '+55 54 9498-3000';
  const INSTAGRAM = 'https://www.instagram.com/espacolunars/';

  // Pick logo color treatment based on palette background
  const logoVariant = t.palette === 'claro' ? 'dark' : 'gold';

  return (
    <>
      <Navbar logoVariant={logoVariant}/>

      <main>
        <Hero
          headline={HERO_HEADLINES[t.headline] || HERO_HEADLINES.conduzir}
          layout={t.heroLayout}
        />
        <PorqueLuna/>
        <Estrutura/>
        <Galeria/>
        <ParaQuem/>
        <ComoFunciona/>
        <Depoimentos/>
        {/* Calendario ocultado — sem agenda funcional no momento */}
        {/* <Calendario/> */}
        <FAQ/>
        <Contato whatsapp={WHATSAPP} instagram={INSTAGRAM}/>
      </main>

      <Footer whatsapp={WHATSAPP} instagram={INSTAGRAM} logoVariant={logoVariant}/>

      <FloatingWhatsApp phone={WHATSAPP}/>

      <TweaksPanel title="Tweaks · Espaço Luna">
        <TweakSection label="Identidade visual">
          <TweakColor
            label="Paleta"
            value={t.palette}
            options={[
              { value: 'noite',    label: 'Lunar Noite',  colors: PALETTES.noite },
              { value: 'floresta', label: 'Floresta',     colors: PALETTES.floresta },
              { value: 'terra',    label: 'Terra',        colors: PALETTES.terra },
              { value: 'claro',    label: 'Areia',        colors: PALETTES.claro },
            ].map(p => p.colors)}
            onChange={(palette) => {
              // figure out which key matches
              const key = Object.keys(PALETTES).find(k =>
                JSON.stringify(PALETTES[k]) === JSON.stringify(palette)
              );
              if (key) setTweak('palette', key);
            }}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakSelect
            label="Frase principal"
            value={t.headline}
            options={[
              { value: 'conduzir', label: 'Conduzir experiências (original)' },
              { value: 'serra',    label: 'Onde a serra acolhe...' },
              { value: 'direto',   label: 'Estrutura completa (direto)' },
              { value: 'templo',   label: 'Um templo (mais místico)' },
            ]}
            onChange={(v) => setTweak('headline', v)}
          />
          <TweakRadio
            label="Layout"
            value={t.heroLayout}
            options={[
              { value: 'full',  label: 'Foto cheia' },
              { value: 'split', label: 'Texto + foto' },
            ]}
            onChange={(v) => setTweak('heroLayout', v)}
          />
        </TweakSection>

        <TweakSection label="Composição">
          <TweakRadio
            label="Densidade"
            value={t.density}
            options={[
              { value: 'compact',  label: 'Compacto' },
              { value: 'regular',  label: 'Padrão' },
              { value: 'spacious', label: 'Espaçoso' },
            ]}
            onChange={(v) => setTweak('density', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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