/* ===== AION App ===== */
const { useState, useEffect } = React;

function App() {
  const [tw, set] = useTweaks(window.__TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', tw.accent || '#ffc000');
  }, [tw.accent]);

  // Scroll reveal
  useEffect(() => {
    const GRID = '.test-grid > *, .services-grid > *, .results-grid > *, .team-grid > *, .about-stats > *, .form-steps > *';
    const SOLO = '.eyebrow, .section-title, .section-sub, .form-urgency, .final-cta-head, .final-cta-sub, .test-head, .hero-badge';

    document.querySelectorAll(GRID).forEach(el => {
      const idx = Array.from(el.parentElement.children).indexOf(el);
      el.style.transitionDelay = `${idx * 0.1}s`;
      el.setAttribute('data-reveal', '');
    });
    document.querySelectorAll(SOLO).forEach(el => el.setAttribute('data-reveal', ''));

    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('is-visible'); obs.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -32px 0px' });

    document.querySelectorAll('[data-reveal]').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <Hero tweaks={tw} />
      {tw.showMarquee && <Marquee />}
      <FormSection />
      <Testimonials />
      <About />
      <Method />
      <Services />
      <Results />
      <Team />
      <FAQ />
      <FinalCTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand">
          <TweakColor
            label="Accent color"
            value={tw.accent}
            onChange={(v) => set('accent', v)}
            options={['#ffc000', '#ffd633', '#ff9500', '#ffea00']}
          />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakSelect
            label="Headline angle"
            value={tw.headlinePunch}
            onChange={(v) => set('headlinePunch', v)}
            options={[
              { value: 'latam', label: 'Só com restaurante' },
              { value: 'growth', label: 'Engrenagem que cresce' },
              { value: 'direct', label: 'Vendendo mais' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Sections">
          <TweakToggle
            label="Stats marquee"
            value={tw.showMarquee}
            onChange={(v) => set('showMarquee', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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