/* Main app */

const App = () => {
  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);

  // Reveal on scroll
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.08, rootMargin: '0px 0px -60px 0px' });
    document.querySelectorAll('[data-reveal]').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [tweaks.modulesVariant, tweaks.showROI, tweaks.showIntegrations, tweaks.showVideoTestimonials]);

  // Apply tweaks (hue, font)
  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  // Preload optional fonts for tweaks
  React.useEffect(() => {
    const link = document.createElement('link');
    link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@300..800&family=Manrope:wght@300..800&display=swap';
    link.rel = 'stylesheet';
    document.head.appendChild(link);
  }, []);

  const ModulesSection = {
    v1: ModulesV1,
    v2: ModulesV2,
    v3: ModulesV3,
  }[tweaks.modulesVariant] || ModulesV1;

  return (
    <TweaksContext.Provider value={tweaks}>
      <Header/>
      <Hero heroCopy={tweaks.heroCopy}/>
      <StatsStrip/>
      <FeaturesGrid/>
      <ModulesSection/>
      {tweaks.showROI && <ROICalculator/>}
      {tweaks.showIntegrations && <IntegrationsGrid/>}
      {tweaks.showVideoTestimonials && <VideoTestimonials/>}
      <Pricing/>
      <FAQ/>
      <CTAFinal/>
      <Footer/>
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks}/>
    </TweaksContext.Provider>
  );
};

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