<script setup lang="ts">
import { ref } from "vue";
import { ArrowRight, Shield, Zap, Clock } from "lucide-vue-next";
import { Button } from "@/components/ui/button";
import heroFamily from "@/assets/hero-family-3d.png";
import AvailabilityDialog from "@/components/AvailabilityDialog.vue";

const availOpen = ref(false);
</script>

<template>
  <section id="accueil" class="relative pt-48 pb-24 md:pt-56 md:pb-40 overflow-hidden bg-white">
    <!-- Decorative background gradients -->
    <div class="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 class="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 class="container relative">
      <div class="grid lg:grid-cols-2 gap-12 items-center">
        <!-- Content -->
        <div class="space-y-10 relative z-10">
          <div
            v-motion
            :initial="{ opacity: 0, y: 20 }"
            :enter="{ opacity: 1, y: 0, transition: { duration: 600 } }"
            class="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 class="w-2 h-2 rounded-full bg-targo-green animate-pulse" />
            <span>Réseau 100% Fibre Optique Locale</span>
          </div>
          <div class="space-y-4">
            <h1
              v-motion
              :initial="{ opacity: 0, x: -30 }"
              :enter="{ opacity: 1, x: 0, transition: { duration: 800, delay: 200 } }"
              class="font-display text-6xl md:text-7xl lg:text-8xl font-black leading-[0.9] tracking-tighter text-foreground"
            >
              Le futur est
              <br />
              <span class="text-gradient-targo">branché ici.</span>
            </h1>

            <p
              v-motion
              :initial="{ opacity: 0 }"
              :enter="{ opacity: 1, transition: { duration: 1000, delay: 400 } }"
              class="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.
            </p>
          </div>

          <div
            v-motion
            :initial="{ opacity: 0, y: 30 }"
            :enter="{ opacity: 1, y: 0, transition: { duration: 600, delay: 600 } }"
            class="flex flex-col sm:flex-row gap-4"
          >
            <Button size="lg" class="gradient-targo text-lg px-8 py-7 glow-targo group h-16 sm:h-auto">
              Voir nos forfaits
              <ArrowRight class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
            </Button>
            <Button size="lg" variant="outline" @click="availOpen = true" class="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 v-model:open="availOpen" />
          </div>

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

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

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

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

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