<script setup lang="ts">
import { Wifi, Tv, Phone, ArrowRight, Check } from "lucide-vue-next";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { RouterLink } from "vue-router";

const services = [{
  icon: Wifi,
  title: "Internet",
  description: "La meilleure connexion sur la fibre",
  price: 39.95,
  unit: "/mois",
  features: ["Vitesse jusqu'à 1.5 Gbps", "Données illimitées", "WiFi et support inclus"],
  popular: true,
  link: "/internet"
}, {
  icon: Tv,
  title: "Télévision",
  description: "La télé allumée par la fibre",
  price: 25,
  unit: "/mois +tx",
  features: ["80+ chaînes HD", "Récepteur fourni", "Enregistrement numérique"],
  popular: false,
  link: "/television"
}, {
  icon: Phone,
  title: "Téléphone",
  description: "Ligne résidentielle, tout inclus",
  price: 10,
  unit: "/mois +tx",
  features: ["Appels illimités", "Canada et États-Unis", "Afficheur inclus"],
  popular: false,
  link: "/telephone"
}];

const centsOf = (price: number) => ((price % 1) * 100).toFixed(0).padStart(2, "0");
</script>

<template>
  <section id="services" class="py-24 md:py-40 bg-gradient-to-br from-secondary via-background to-secondary relative overflow-hidden">
    <!-- Decorative background gradients -->
    <div class="absolute top-1/2 left-0 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] -translate-x-1/2 pointer-events-none" />

    <div class="container">
      <!-- Section header -->
      <div class="text-center max-w-2xl mx-auto mb-16">
        <span
          v-motion
          :initial="{ opacity: 0, y: 10 }"
          :visible-once="{ opacity: 1, y: 0 }"
          class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4"
        >
          Nos solutions fibre
        </span>
        <h2
          v-motion
          :initial="{ opacity: 0, y: 20 }"
          :visible-once="{ opacity: 1, y: 0, transition: { delay: 100 } }"
          class="font-display text-4xl md:text-5xl font-bold mb-6"
        >
          Des forfaits pour <span class="text-gradient-targo">tous les besoins</span>
        </h2>
        <p
          v-motion
          :initial="{ opacity: 0 }"
          :visible-once="{ opacity: 1, transition: { delay: 200 } }"
          class="text-muted-foreground text-lg leading-relaxed"
        >
          Internet haute vitesse, télévision HD et téléphonie résidentielle.
          Le tout alimenté par notre réseau 100% fibre optique régional.
        </p>
      </div>

      <!-- Service cards -->
      <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        <div
          v-for="(service, index) in services"
          :key="service.title"
          v-motion
          :initial="{ opacity: 0, y: 30 }"
          :visible-once="{ opacity: 1, y: 0, transition: { delay: index * 100 } }"
        >
          <Card :class="`relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 ${
            service.popular ? 'border-primary shadow-lg ring-2 ring-primary/20' : ''
          }`">
            <div v-if="service.popular" class="absolute top-4 right-4 z-10 px-3 py-1 gradient-targo text-primary-foreground text-xs font-medium rounded-full">
              Populaire
            </div>

            <CardContent class="p-8 flex flex-col h-full">
              <div :class="`w-14 h-14 rounded-2xl flex items-center justify-center mb-6 ${
                service.popular ? 'gradient-targo text-primary-foreground' : 'bg-primary/10 text-primary'
              }`">
                <component :is="service.icon" class="w-7 h-7" />
              </div>

              <h3 class="font-display text-2xl font-bold mb-2">{{ service.title }}</h3>
              <p class="text-muted-foreground text-sm mb-6 min-h-[40px]">{{ service.description }}</p>

              <div class="flex items-baseline gap-1">
                <span class="font-display text-5xl font-bold text-primary">${{ Math.floor(service.price) }}<sup class="text-2xl">.{{ centsOf(service.price) }}</sup></span>
                <span class="text-muted-foreground text-sm">{{ service.unit }}</span>
              </div>
              <p class="text-sm text-muted-foreground mb-4">à partir de</p>

              <ul class="space-y-3 mb-8 flex-grow mt-4">
                <li v-for="feature in service.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>

              <div class="mt-auto">
                <Button
                  as-child
                  :class="`w-full ${service.popular ? 'gradient-targo' : ''}`"
                  :variant="service.popular ? 'default' : 'outline'"
                >
                  <RouterLink :to="service.link">
                    Voir les détails
                    <ArrowRight class="w-4 h-4 ml-2" />
                  </RouterLink>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

      <!-- Note -->
      <p class="text-center text-sm text-muted-foreground mt-12 max-w-2xl mx-auto">
        Les technologies et promotions disponibles varient parfois entre deux voisins.
        Contactez-nous pour évaluer votre situation et obtenir le meilleur forfait pour vous.
      </p>
    </div>
  </section>
</template>
