<script setup lang="ts">
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 { Check, Phone, PhoneCall, PhoneForwarded, Voicemail, ArrowRight, Globe, Shield } from "lucide-vue-next";

const phonePlans = [{
  name: "Ligne résidentielle",
  price: 10,
  originalPrice: 25,
  comboNote: "En combo",
  features: ["Appels illimités Canada/É.-U.", "Afficheur inclus", "Messagerie vocale par courriel", "Appel en attente", "Renvoi d'appel"],
  popular: true
}];
const features = [{
  icon: Globe,
  title: "Appels illimités",
  description: "Appelez partout au Canada et aux États-Unis sans frais supplémentaires."
}, {
  icon: PhoneCall,
  title: "Qualité voix HD",
  description: "Son cristallin grâce à notre technologie VoIP de dernière génération."
}, {
  icon: Voicemail,
  title: "Messagerie vocale",
  description: "Recevez vos messages vocaux par courriel ou consultez-les en ligne."
}, {
  icon: Shield,
  title: "Filtrage d'appels",
  description: "Bloquez les appels indésirables et les télévendeurs automatiquement."
}];
const includedFeatures = ["Afficheur", "Appel en attente", "Renvoi d'appel", "Conférence à 3", "Messagerie vocale", "Blocage d'appels", "Messages audio par courriel", "Sonnerie distinctive"];
</script>

<template>
  <div class="min-h-screen">
    <Header />
    <main class="">
      <!-- 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">Téléphonie IP</span>
            <h1 class="font-display text-4xl md:text-6xl font-bold mb-6">
              Téléphonie résidentielle <span class="text-gradient-targo">tout inclus</span>
            </h1>
            <p class="text-xl text-muted-foreground mb-8">
              Restez connecté avec vos proches grâce à une ligne résidentielle fiable et cristalline. La puissance de la technologie fibre au service de toutes vos conversations.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in" style="animation-delay: 0.2s; animation-fill-mode: both">
              <Button size="lg" class="gradient-targo glow-targo">
                S'abonner maintenant
                <ArrowRight class="w-5 h-5 ml-2" />
              </Button>
              <Button size="lg" variant="outline" class="border-primary text-primary">
                Transférer mon numéro
              </Button>
            </div>
          </div>

          <!-- Phone Plans Cards in Hero -->
          <div class="flex justify-center max-w-5xl mx-auto">
            <Card
              v-for="(plan, index) in phonePlans"
              :key="plan.name"
              :class="`relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-fade-in ${plan.popular ? 'border-primary shadow-lg ring-2 ring-primary/20' : ''} w-full max-w-md`"
              :style="{ animationDelay: `${0.3 + index * 0.15}s`, animationFillMode: 'both' }"
            >
              <div v-if="plan.popular" class="absolute top-4 right-4 px-3 py-1 gradient-targo text-primary-foreground text-xs font-medium rounded-full">
                Populaire
              </div>
              <CardContent class="p-8">
                <h3 class="font-display text-2xl font-bold mb-2">{{ plan.name }}</h3>
                <div class="flex items-baseline gap-1 mb-2">
                  <span class="font-display text-5xl font-bold text-primary">${{ Math.floor(plan.price) }}<sup class="text-2xl">.00</sup></span>
                  <span class="text-muted-foreground">/mois +tx</span>
                  <span v-if="plan.originalPrice" class="text-muted-foreground line-through text-lg ml-2">
                    ${{ plan.originalPrice.toFixed(2) }}
                  </span>
                </div>
                <p v-if="plan.comboNote" class="text-sm text-primary font-medium mb-4">{{ plan.comboNote }}</p>
                <div class="flex items-center gap-2 mb-6 p-3 bg-primary/10 rounded-lg mt-4">
                  <Phone class="w-5 h-5 text-primary" />
                  <span class="font-bold text-primary">{{ plan.name }}</span>
                </div>
                <ul class="space-y-3 mb-8">
                  <li v-for="feature in plan.features" :key="feature" class="flex items-center gap-3">
                    <div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                      <Check class="w-3 h-3 text-primary" />
                    </div>
                    <span class="text-sm text-muted-foreground">{{ feature }}</span>
                  </li>
                </ul>
                <Button
                  :class="`w-full ${plan.popular ? 'gradient-targo' : ''}`"
                  :variant="plan.popular ? 'default' : 'outline'"
                  as-child
                >
                  <a href="/#contact">Choisir ce forfait</a>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <!-- Stats -->
      <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">
                <Phone class="w-8 h-8" />
                <span class="font-display text-5xl font-bold">$10</span>
              </div>
              <p class="text-primary-foreground/80">avec combo Internet</p>
            </div>
            <div>
              <div class="flex items-center justify-center gap-2 mb-2">
                <PhoneForwarded class="w-8 h-8" />
                <span class="font-display text-5xl font-bold">Gratuit</span>
              </div>
              <p class="text-primary-foreground/80">transfert de numéro</p>
            </div>
            <div>
              <div class="flex items-center justify-center gap-2 mb-2">
                <Globe class="w-8 h-8" />
                <span class="font-display text-5xl font-bold">Illimité</span>
              </div>
              <p class="text-primary-foreground/80">Canada et États-Unis</p>
            </div>
          </div>
        </div>
      </section>



      <!-- Included 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">
              Fonctionnalités incluses
            </h2>
            <p class="text-muted-foreground text-lg">
              Toutes ces fonctionnalités sont incluses gratuitement avec chaque forfait.
            </p>
          </div>

          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
            <Card v-for="feature in includedFeatures" :key="feature" class="p-4">
              <CardContent class="p-0 flex items-center gap-3">
                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                  <Check class="w-4 h-4 text-primary" />
                </div>
                <span class="font-medium">{{ feature }}</span>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <!-- Features -->
      <section class="py-20">
        <div class="container">
          <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">
              Conservez votre numéro actuel
            </h2>
            <p class="text-xl mb-8 text-primary-foreground/90">
              Le transfert de votre numéro de téléphone est gratuit et s'effectue en quelques jours.
            </p>
            <Button size="lg" variant="secondary" class="text-primary font-semibold">
              Transférer mon numéro
              <ArrowRight class="w-5 h-5 ml-2" />
            </Button>
          </Card>
        </div>
      </section>
    </main>
    <Footer />
  </div>
</template>
