<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, Tv, Play, Pause, Rewind, MonitorPlay, ArrowRight } from "lucide-vue-next";

const tvPlans = [
  {
    name: "Télé essentiel",
    channels: "40+",
    price: 20,
    features: ["40+ chaînes populaires", "Chaînes HD incluses", "Guide TV interactif", "1 récepteur inclus"],
    popular: false,
  },
  {
    name: "Télé familial",
    channels: "80+",
    price: 25,
    features: ["80+ chaînes variées", "Toutes les chaînes HD", "Enregistreur numérique", "2 récepteurs inclus", "Replay 7 jours"],
    popular: true,
  },
  {
    name: "Télé premium",
    channels: "150+",
    price: 45,
    features: ["150+ chaînes premium", "Chaînes spécialisées", "Sports et cinéma inclus", "3 récepteurs inclus", "Replay 30 jours", "VOD incluse"],
    popular: false,
  },
];

const features = [
  {
    icon: MonitorPlay,
    title: "Qualité HD/4K",
    description: "Image cristalline sur toutes vos chaînes préférées en haute définition.",
  },
  {
    icon: Pause,
    title: "Pause & reprise",
    description: "Mettez en pause le direct et reprenez quand vous le souhaitez.",
  },
  {
    icon: Rewind,
    title: "Replay 7/30 jours",
    description: "Revenez en arrière et regardez les émissions que vous avez manquées.",
  },
  {
    icon: Play,
    title: "Vidéo sur demande",
    description: "Accédez à un catalogue de films et séries à la demande.",
  },
];

const channelCategories = [
  { name: "Nouvelles", count: "12" },
  { name: "Sports", count: "15" },
  { name: "Divertissement", count: "25" },
  { name: "Films", count: "18" },
  { name: "Enfants", count: "10" },
  { name: "Documentaires", count: "8" },
];
</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">
            <span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
              Télévision HD
            </span>
            <h1 class="font-display text-4xl md:text-6xl font-bold mb-6">
              La télé allumée <span class="text-gradient-targo">par la fibre</span>
            </h1>
            <p class="text-xl text-muted-foreground mb-8">
              Vivez une expérience télévisuelle immersive avec la fibre ultra-rapide. Le meilleur du divertissement en haute définition pour propulser vos soirées en famille.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center mb-16 animate-fade-in" style="animation-delay: 0.2s; animation-fill-mode: both">
              <Button size="lg" class="gradient-targo glow-targo">
                Voir les forfaits
                <ArrowRight class="w-5 h-5 ml-2" />
              </Button>
              <Button size="lg" variant="outline" class="border-primary text-primary">
                Chaînes disponibles
              </Button>
            </div>
          </div>

          <!-- TV Plans Cards in Hero -->
          <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <Card
              v-for="(plan, index) in tvPlans"
              :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' : ''}`"
              :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 flex flex-col h-full">
                <h3 class="font-display text-2xl font-bold mb-2">{{ plan.name }}</h3>
                <div class="flex items-baseline gap-1 mb-6">
                  <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>
                </div>
                <div class="flex items-center gap-2 mb-6 p-3 bg-primary/10 rounded-lg">
                  <Tv class="w-5 h-5 text-primary" />
                  <span class="font-bold text-primary">{{ plan.channels }} chaînes</span>
                </div>
                <ul class="space-y-3 mb-8 flex-grow">
                  <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>
                <div class="mt-auto">
                  <Button
                    :class="`w-full ${plan.popular ? 'gradient-targo' : ''}`"
                    :variant="plan.popular ? 'default' : 'outline'"
                    as-child
                  >
                    <a href="/#contact">Choisir ce forfait</a>
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <!-- Channel Categories -->
      <section class="py-16 bg-primary text-primary-foreground">
        <div class="container">
          <div class="grid grid-cols-2 md:grid-cols-6 gap-6 text-center">
            <div v-for="category in channelCategories" :key="category.name">
              <span class="font-display text-4xl font-bold">{{ category.count }}</span>
              <p class="text-primary-foreground/80">{{ category.name }}</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">
              Fonctionnalités avancées
            </h2>
            <p class="text-muted-foreground text-lg">
              Plus qu'une simple télévision, une expérience interactive complète.
            </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>

      <!-- Combo offer -->
      <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">
              Économisez avec nos combos
            </h2>
            <p class="text-xl mb-8 text-primary-foreground/90">
              Combinez Internet + Télé + Téléphone et économisez jusqu'à 20% sur votre facture.
            </p>
            <Button size="lg" variant="secondary" class="text-primary font-semibold">
              Voir les combos
              <ArrowRight class="w-5 h-5 ml-2" />
            </Button>
          </Card>
        </div>
      </section>
    </main>
    <Footer />
  </div>
</template>
