// Main app — wires everything together
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0B71A1",
  "heroVariant": "split",
  "ensinosLayout": "cards",
  "showTopbar": true,
  "showWA": true,
  "animations": true,
  "sectionPad": 110
}/*EDITMODE-END*/;

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

  // Apply tweaks as CSS variables on root
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--abc-blue', t.accent);
    r.style.setProperty('--abc-section-pad', t.sectionPad + 'px');
  }, [t.accent, t.sectionPad]);

  // Reveal on scroll
  React.useEffect(() => {
    if (!t.animations) {
      document.querySelectorAll('.reveal').forEach((el) => el.classList.add('in'));
      return;
    }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, [t.animations]);

  return (
    <>
      {t.showTopbar && <Topbar />}
      <Header />
      <main>
        <Hero />
        <div className="reveal"><Ensinos layout={t.ensinosLayout} /></div>
        <div className="reveal"><VerticalVideos /></div>
        <div className="reveal"><Enrollment /></div>
        <div className="reveal"><WhyAbaco /></div>
        <div className="reveal"><Extracurriculares /></div>
        <div className="reveal"><Pinterest /></div>
        <div className="reveal"><Projetos /></div>
        <div className="reveal"><Institucional /></div>
        <div className="reveal"><Instagram /></div>
        <div className="reveal"><Depoimentos /></div>
        <div className="reveal"><Newsletter /></div>
        <div className="reveal"><Unidades /></div>
      </main>
      <Footer />
      {t.showWA && <WhatsAppFAB />}
      <AbacoTweaks t={t} setTweak={setTweak} />
    </>
  );
};

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