import { motion } from "framer-motion";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Route, ChevronDown } from "lucide-react";
import heroBg from "@/assets/hero-bg.jpg";
import logo from "@/assets/logo_branca.png";

const HeroSection = () => {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0">
        <motion.img
          initial={{ scale: 1.1 }}
          animate={{ scale: 1 }}
          transition={{ duration: 8, ease: "easeOut" }}
          src={heroBg}
          alt="Motociclistas na estrada ao pôr do sol"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-secondary/80 via-secondary/50 to-secondary" />
        <div className="absolute inset-0 bg-gradient-to-r from-secondary/70 to-transparent" />
      </div>

      {/* Animated road lines decoration */}
      <div className="absolute bottom-0 left-0 right-0 h-32 overflow-hidden opacity-20">
        <motion.div
          animate={{ x: ["-100%", "0%"] }}
          transition={{ repeat: Infinity, duration: 4, ease: "linear" }}
          className="absolute bottom-16 left-0 w-[200%] h-[2px]"
          style={{ backgroundImage: "repeating-linear-gradient(90deg, hsl(25 95% 50%), hsl(25 95% 50%) 60px, transparent 60px, transparent 120px)" }}
        />
      </div>

      {/* Floating particles */}
      {[...Array(5)].map((_, i) => (
        <motion.div
          key={i}
          className="absolute w-1 h-1 rounded-full bg-primary/30"
          initial={{ x: Math.random() * 100 + "%", y: "100%" }}
          animate={{ y: "-10%", opacity: [0, 1, 0] }}
          transition={{ repeat: Infinity, duration: 4 + i * 1.5, delay: i * 0.8, ease: "easeOut" }}
        />
      ))}

      {/* Content */}
      <div className="relative z-10 container mx-auto px-4 text-center">
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ duration: 0.6, delay: 0.2, type: "spring" }}
            // className="w-50 h-50 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-6"
            className="flex items-center justify-center  mx-auto"
          >
             <img src={logo} alt="Logo do ITAROTA79" width={220} />
          </motion.div>

          <h1 className="font-display text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-wider text-primary-foreground mb-2">
            ITAROTA<span className="text-primary">79</span>
          </h1>
          <motion.div
            initial={{ width: 0 }}
            animate={{ width: "8rem" }}
            transition={{ duration: 0.8, delay: 0.5 }}
            className="h-1 bg-primary mx-auto mb-4"
          />
          <p className="font-display text-lg md:text-xl tracking-[0.3em] text-primary-foreground/80 mb-6 uppercase">
            Viagens de Moto 
          </p>
        </motion.div>

        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.3 }}
          className="text-xl md:text-2xl lg:text-3xl font-display text-primary-foreground/90 mb-4 max-w-3xl mx-auto text-balance"
        >
          Mais que um clube, uma <span className="text-primary font-bold">irmandade</span> na estrada
        </motion.p>

        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.8, delay: 0.5 }}
          className="text-base md:text-lg text-primary-foreground/60 mb-10 max-w-xl mx-auto"
        >
          Aventura, liberdade e companheirismo sobre duas rodas. Venha acelerar com a gente.
        </motion.p>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.7 }}
          className="flex flex-col sm:flex-row gap-4 justify-center"
        >
          <a href="https://docs.google.com/forms/d/e/1FAIpQLSeDhmum1QRAj56HDdkw2w1ZtA7ulZOoXht5fbfPTaSbWGsu9A/viewform" target="_blank" rel="noopener noreferrer">
            <Button size="lg" className="font-display tracking-wider text-base px-8 py-6 animate-pulse-glow">
              Entrar no Clube
            </Button>
          </a>
          <Link to="/galeria">
            <Button
              size="lg"
              variant="outline"
              className="font-display  tracking-wider text-base px-8 py-6 border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10 text-black"
            >
              Ver Galeria
            </Button>
          </Link>
        </motion.div>
      </div>

      {/* Scroll indicator */}
      <motion.div
        animate={{ y: [0, 10, 0] }}
        transition={{ repeat: Infinity, duration: 2 }}
        className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2"
      >
        <span className="text-xs text-primary-foreground/40 font-display tracking-widest uppercase">Role para baixo</span>
        <ChevronDown className="w-5 h-5 text-primary" />
      </motion.div>
    </section>
  );
};

export default HeroSection;
