import { useEffect } from 'react';
import { motion, useScroll, useSpring } from 'framer-motion';
import Navbar from '../components/Navbar';
import Hero from '../components/Hero';
import VideoDemonstration from '../components/VideoDemonstration';
import Problem from '../components/Problem';
import HowItWorks from '../components/HowItWorks';
import Benefits from '../components/Benefits';
import Gallery from '../components/Gallery';
import Offer from '../components/Offer';
import FAQ from '../components/FAQ';
import CTA from '../components/CTA';
import Footer from '../components/Footer';
import Results from '../components/Results';
import StickyMobileCTA from '../components/StickyMobileCTA';
import { useUTMForwarder } from '../hooks/useUTMForwarder';

export default function LandingPage() {
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001
  });

  // Ativa o repasse automático de UTMs para links de checkout
  useUTMForwarder();

  useEffect(() => {
    // Fire ViewContent parameter for Meta Pixel
    if (typeof window !== 'undefined' && 'fbq' in window) {
      (window as any).fbq('track', 'ViewContent');
    }
  }, []);

  return (
    <div className="min-h-screen bg-pink-50 text-indigo-900 selection:bg-pink-300 selection:text-indigo-950 font-sans overflow-x-hidden">
      <motion.div
        className="fixed top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-pink-400 via-violet-400 to-amber-400 origin-left z-50"
        style={{ scaleX }}
      />
      <Navbar />
      <main>
        <Hero />
        <VideoDemonstration />
        <Problem />
        <HowItWorks />
        <Benefits />
        <Gallery />
        <Results />
        <Offer />
        <FAQ />
        <CTA />
      </main>
      <Footer />
      <StickyMobileCTA />
    </div>
  );
}