import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { MessageCircle, Route } from "lucide-react";
import { Button } from "@/components/ui/button";

const CTASection = () => {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <section className="relative section-padding overflow-hidden" ref={ref}>
      <div className="absolute inset-0 gradient-primary opacity-90" />
      <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23000%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')] opacity-30" />
      
      {/* Road animation */}
      <div className="absolute bottom-0 left-0 right-0 h-16 overflow-hidden opacity-10">
        <motion.div
          animate={{ x: ["-50%", "0%"] }}
          transition={{ repeat: Infinity, duration: 3, ease: "linear" }}
          className="absolute bottom-6 left-0 w-[200%] h-[2px]"
          style={{ backgroundImage: "repeating-linear-gradient(90deg, white, white 40px, transparent 40px, transparent 80px)" }}
        />
      </div>

      <div className="container mx-auto relative z-10 text-center">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
        >
          <motion.div
            initial={{ scale: 0 }}
            animate={inView ? { scale: 1 } : {}}
            transition={{ duration: 0.5, type: "spring" }}
            className="w-20 h-20 rounded-full bg-primary-foreground/10 flex items-center justify-center mx-auto mb-8"
          >
            <Route className="w-10 h-10 text-primary-foreground" />
          </motion.div>

          <h2 className="font-display text-4xl md:text-5xl lg:text-6xl font-bold tracking-wider text-primary-foreground mb-6">
            QUER FAZER PARTE?
          </h2>
          <p className="text-lg md:text-xl text-primary-foreground/80 mb-8 max-w-2xl mx-auto">
            Gostou do ITAROTA79? Venha acelerar com a gente e faça parte dessa irmandade.
            A estrada está esperando por você.
          </p>
          <a href="https://docs.google.com/forms/d/e/1FAIpQLSeDhmum1QRAj56HDdkw2w1ZtA7ulZOoXht5fbfPTaSbWGsu9A/viewform" target="_blank" rel="noopener noreferrer">
            <Button
              size="lg"
              className="bg-secondary text-secondary-foreground hover:bg-secondary/90 font-display tracking-wider text-base px-10 py-6 gap-2 shadow-2xl"
            >
              <MessageCircle className="w-5 h-5" />
              Falar no WhatsApp
            </Button>
          </a>
        </motion.div>
      </div>
    </section>
  );
};

export default CTASection;