import { useState } from "react";
import { Wifi, ArrowRight, Shield, Zap, Clock } from "lucide-react";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import heroFamily from "@/assets/hero-family-3d.png";
import { AvailabilityDialog } from "@/components/AvailabilityDialog";

const Hero = () => {
  const [availOpen, setAvailOpen] = useState(false);
  return <section id="accueil" className="relative pt-48 pb-24 md:pt-56 md:pb-40 overflow-hidden bg-white">
    {/* Decorative background gradients */}
    <div className="absolute top-0 left-1/4 w-[600px] h-[600px] bg-targo-green/5 rounded-full blur-[120px] -translate-y-1/2 pointer-events-none" />
    <div className="absolute bottom-0 right-0 w-[800px] h-[800px] bg-targo-green/5 rounded-full blur-[150px] translate-y-1/2 translate-x-1/2 pointer-events-none" />



    <div className="container relative">
      <div className="grid lg:grid-cols-2 gap-12 items-center">
        {/* Content */}
        <div className="space-y-10 relative z-10">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="inline-flex items-center gap-3 px-4 py-2 bg-targo-green/10 rounded-full text-targo-green-dark font-bold text-xs uppercase tracking-widest"
          >
            <div className="w-2 h-2 rounded-full bg-targo-green animate-pulse" />
            <span>Réseau 100% Fibre Optique Locale</span>
          </motion.div>
          <div className="space-y-4">
            <motion.h1
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="font-display text-6xl md:text-7xl lg:text-8xl font-black leading-[0.9] tracking-tighter text-foreground"
            >
              Le futur est
              <br />
              <span className="text-gradient-targo">branché ici.</span>
            </motion.h1>

            <motion.p
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 1, delay: 0.4 }}
              className="text-xl text-muted-foreground max-w-lg leading-relaxed font-sans"
            >
              Vitesse Gigabit, fiabilité absolue et service régional.
              Découvrez la puissance de la fibre optique de nouvelle génération.
            </motion.p>
          </div>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.6 }}
            className="flex flex-col sm:flex-row gap-4"
          >
            <Button size="lg" className="gradient-targo text-lg px-8 py-7 glow-targo group h-16 sm:h-auto">
              Voir nos forfaits
              <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
            </Button>
            <Button size="lg" variant="outline" onClick={() => setAvailOpen(true)} className="text-lg px-8 py-7 border-2 border-border text-foreground hover:border-targo-green hover:text-targo-green hover:bg-targo-green/5 h-16 sm:h-auto transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
              Vérifier la disponibilité
            </Button>
            <AvailabilityDialog open={availOpen} onOpenChange={setAvailOpen} />
          </motion.div>

          {/* Trust indicators */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 1, delay: 0.8 }}
            className="grid grid-cols-3 gap-8 pt-8 border-t border-border"
          >
            <div className="space-y-1">
              <div className="font-display text-4xl font-black text-foreground">20+</div>
              <div className="text-[10px] uppercase font-bold tracking-widest text-muted-foreground">Années d'expertise</div>
            </div>
            <div className="space-y-1">
              <div className="font-display text-4xl font-black text-foreground">10k+</div>
              <div className="text-[10px] uppercase font-bold tracking-widest text-muted-foreground">Clients satisfaits</div>
            </div>
            <div className="space-y-1">
              <div className="font-display text-4xl font-black text-foreground">7j/7</div>
              <div className="text-[10px] uppercase font-bold tracking-widest text-muted-foreground">Support Local</div>
            </div>
          </motion.div>
        </div>

        {/* Visual */}
        <div className="relative hidden lg:block">
          <motion.div
            initial={{ opacity: 0, scale: 0.9, x: 50 }}
            animate={{ opacity: 1, scale: 1, x: 0 }}
            transition={{ duration: 1, delay: 0.3 }}
            className="relative w-full max-w-xl mx-auto"
          >
            <div className="relative">
              <img src={heroFamily} alt="Famille heureuse profitant de la télévision et d'Internet" className="w-full h-auto object-cover" />
            </div>

            {/* Floating Elements (Glassmorphism) */}
            <motion.div
              animate={{ y: [0, -10, 0] }}
              transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
              className="absolute -top-6 -left-6 glass-card px-6 py-4 rounded-3xl z-20"
            >
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-targo-green/20 flex items-center justify-center">
                  <Zap className="w-5 h-5 text-targo-green" />
                </div>
                <div>
                  <div className="text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Vitesse</div>
                  <div className="font-display font-black text-foreground">Gigabit+</div>
                </div>
              </div>
            </motion.div>

            <motion.div
              animate={{ y: [0, 10, 0] }}
              transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
              className="absolute top-1/2 -right-10 glass-card px-6 py-4 rounded-3xl z-20"
            >
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-targo-green/20 flex items-center justify-center">
                  <Shield className="w-5 h-5 text-targo-green" />
                </div>
                <div>
                  <div className="text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Réseau</div>
                  <div className="font-display font-black text-foreground">Sécurisé</div>
                </div>
              </div>
            </motion.div>

            <motion.div
              animate={{ x: [0, 5, 0] }}
              transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
              className="absolute -bottom-6 left-1/4 glass-card px-6 py-4 rounded-3xl z-20"
            >
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-targo-green/20 flex items-center justify-center">
                  <Clock className="w-5 h-5 text-targo-green" />
                </div>
                <div className="flex items-center gap-2">
                  <div className="text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Support</div>
                  <div className="font-display font-black text-foreground">Local 7j/7</div>
                </div>
              </div>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </div>
  </section>;
};
export default Hero;