import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ImageIcon } from 'lucide-react';

export default function StickyMobileCTA() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const scrolled = window.scrollY > 400;
      const bottom = Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight - 600;
      setIsVisible(scrolled && !bottom);
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ y: 100, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: 100, opacity: 0 }}
          transition={{ type: "spring", stiffness: 260, damping: 20 }}
          className="fixed bottom-4 left-4 right-4 z-[100] md:hidden"
        >
          <a
            href="#oferta"
            onClick={() => {
              if (typeof window !== 'undefined' && 'fbq' in window) {
                (window as any).fbq('track', 'InitiateCheckout');
              }
            }}
            className="w-full h-14 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-lg flex items-center justify-center gap-2 shadow-[0_10px_40px_-10px_rgba(236,72,153,0.8)] border border-white/20 active:scale-95 transition-transform"
          >
            Kit Festa · 30 Imagens por R$19,99 <ImageIcon className="w-5 h-5" />
          </a>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
