/* Cantinho Kids — App principal */

/* Variação escolhida no Claude Design: hero lado a lado, carrossel "espiada",
   paleta verde, títulos em Fredoka, doodles em intensidade média. */
const HERO_LAYOUT = 'lado';      // 'lado' | 'centro' | 'editorial'
const CAROUSEL    = 'peek';      // 'single' | 'peek' | 'mosaic'
const PALETTE     = 'verde';     // 'verde' | 'coral' | 'amarelo'
const TITLE_FONT  = "'Fredoka', sans-serif";
const DOODLE_OP   = 0.55;

function App() {
  const [drawer, setDrawer] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  useReveal();

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div className="lp"
         data-hero={HERO_LAYOUT}
         data-palette={PALETTE}
         data-carousel={CAROUSEL}
         style={{ '--title-font': TITLE_FONT, '--doodle-op': DOODLE_OP }}>

      <a className="skip" href="#inicio" onClick={(e) => { e.preventDefault(); scrollToId('inicio'); }}>Pular para o conteúdo</a>

      <Header onOpen={() => setDrawer(true)} scrolled={scrolled} />
      <Drawer open={drawer} onClose={() => setDrawer(false)} />

      <main id="conteudo">
        <Hero layout={HERO_LAYOUT} />
        <Pilares />
        <Carousel layout={CAROUSEL} />
        <Eventos />
        <Solicitacoes />
        <Onde />
      </main>
      <Footer />
    </div>
  );
}

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