<script setup lang="ts">
import { ref } from "vue";
import Header from "@/components/layout/Header.vue";
import Footer from "@/components/layout/Footer.vue";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Wifi, Zap, Shield, Clock, ArrowRight, Download, Upload } from "lucide-vue-next";
import AvailabilityDialog from "@/components/AvailabilityDialog.vue";

const features = [{
  icon: Zap,
  title: "100% fibre",
  description: "Connexion directe en fibre optique jusqu'à votre domicile, sans aucun compromis sur la qualité du signal."
}, {
  icon: Shield,
  title: "Connexion sécurisée",
  description: "Protection contre les attaques directes avec pare-feu intégré."
}, {
  icon: Clock,
  title: "Support 365",
  description: "Notre équipe technique locale est disponible pour vous assister par téléphone et par courriel."
}, {
  icon: Download,
  title: "Données illimitées",
  description: "Aucune limite de téléchargement. Visionnez, jouez et travaillez sans restriction."
}];

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

<template>
  <div class="min-h-screen">
    <Header />
    <main>
      <!-- Hero Section -->
      <section class="pt-40 pb-20 bg-gradient-to-br from-secondary via-background to-secondary">
        <div class="container">
          <div class="max-w-3xl mx-auto text-center mb-16">
            <span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4 animate-fade-in">
              Internet fibre à la maison
            </span>
            <h1 class="font-display text-4xl md:text-6xl font-bold mb-6 animate-fade-in" style="animation-delay: 0.1s">
              La meilleure connexion <span class="text-gradient-targo">à la vitesse de la lumière</span>
            </h1>
            <p class="text-xl text-muted-foreground mb-8 animate-fade-in" style="animation-delay: 0.2s">
              Connectez votre foyer à la vraie fibre. Performance et fiabilité garanties pour propulser vos communications, du télétravail au divertissement.
            </p>

            <!-- Key stats -->
            <div class="grid grid-cols-2 gap-6 max-w-md mx-auto mb-10 animate-fade-in" style="animation-delay: 0.3s">
              <div class="bg-card border border-border rounded-2xl p-6 text-center">
                <p class="text-sm text-muted-foreground mb-1">Vitesse jusqu'à</p>
                <p class="font-display text-4xl font-bold text-primary">
                  3.5 <span class="text-2xl">Gbps</span>
                </p>
              </div>
              <div class="bg-card border border-border rounded-2xl p-6 text-center">
                <p class="text-sm text-muted-foreground mb-1">Forfaits à partir de</p>
                <p class="font-display text-4xl font-bold text-primary leading-none">
                  <span class="relative">39<span class="text-lg align-top leading-none">,95$</span></span>
                  <span class="text-base font-normal text-muted-foreground ml-1">/mois</span>
                </p>
              </div>
            </div>

            <div class="flex justify-center animate-fade-in" style="animation-delay: 0.4s; animation-fill-mode: both">
              <Button size="lg" class="gradient-targo glow-targo text-lg px-10" @click="availabilityOpen = true">
                Vérifier ma disponibilité
                <ArrowRight class="w-5 h-5 ml-2" />
              </Button>
            </div>
          </div>
        </div>
      </section>

      <!-- Speed Showcase -->
      <section class="py-16 bg-primary text-primary-foreground">
        <div class="container">
          <div class="grid md:grid-cols-3 gap-8 text-center">
            <div>
              <div class="flex items-center justify-center gap-2 mb-2">
                <Download class="w-8 h-8" />
                <span class="font-display text-5xl font-bold">Fibre</span>
              </div>
              <p class="text-primary-foreground/80">100%</p>
            </div>
            <div>
              <div class="flex items-center justify-center gap-2 mb-2">
                <Upload class="w-8 h-8" />
                <span class="font-display text-5xl font-bold">Illimité</span>
              </div>
              <p class="text-primary-foreground/80">Transfert</p>
            </div>
            <div>
              <div class="flex items-center justify-center gap-2 mb-2">
                <Wifi class="w-8 h-8" />
                <span class="font-display text-5xl font-bold">WiFi</span>
              </div>
              <p class="text-primary-foreground/80">Inclus</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Features -->
      <section class="py-20 bg-secondary/50">
        <div class="container">
          <div class="text-center max-w-2xl mx-auto mb-16">
            <h2 class="font-display text-4xl font-bold mb-4">Pourquoi choisir TARGO?</h2>
            <p class="text-muted-foreground text-lg">
              Un réseau local, un service personnalisé, une qualité incomparable.
            </p>
          </div>
          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <Card v-for="feature in features" :key="feature.title" class="text-center p-6">
              <CardContent class="p-0">
                <div class="w-16 h-16 mx-auto mb-4 rounded-2xl gradient-targo flex items-center justify-center">
                  <component :is="feature.icon" class="w-8 h-8 text-primary-foreground" />
                </div>
                <h3 class="font-display text-xl font-bold mb-2">{{ feature.title }}</h3>
                <p class="text-muted-foreground text-sm">{{ feature.description }}</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <!-- CTA -->
      <section class="py-20">
        <div class="container">
          <Card class="gradient-targo p-12 text-center text-primary-foreground">
            <h2 class="font-display text-3xl md:text-4xl font-bold mb-4">Prêt à migrer à la fibre?</h2>
            <p class="text-xl mb-8 text-primary-foreground/90">
              Vérifiez la disponibilité à votre adresse en quelques secondes.
            </p>
            <Button size="lg" variant="secondary" class="text-primary font-semibold" @click="availabilityOpen = true">
              Vérifier mon adresse
              <ArrowRight class="w-5 h-5 ml-2" />
            </Button>
          </Card>
        </div>
      </section>
    </main>
    <Footer />

    <AvailabilityDialog v-model:open="availabilityOpen" />
  </div>
</template>
