import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Check, Tv, Play, Pause, Rewind, MonitorPlay, ArrowRight } from "lucide-react";

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" },
];

const Television = () => {
  return (
    <div className="min-h-screen">
      <Header />
      <main className="">
        {/* Hero Section */}
        <section className="pt-40 pb-20 bg-gradient-to-br from-secondary via-background to-secondary">
          <div className="container">
            <div className="max-w-3xl mx-auto text-center">
              <span className="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 className="font-display text-4xl md:text-6xl font-bold mb-6">
                La télé allumée <span className="text-gradient-targo">par la fibre</span>
              </h1>
              <p className="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 className="flex flex-col sm:flex-row gap-4 justify-center mb-16 animate-fade-in" style={{ animationDelay: '0.2s', animationFillMode: 'both' }}>
                <Button size="lg" className="gradient-targo glow-targo">
                  Voir les forfaits
                  <ArrowRight className="w-5 h-5 ml-2" />
                </Button>
                <Button size="lg" variant="outline" className="border-primary text-primary">
                  Chaînes disponibles
                </Button>
              </div>
            </div>

            {/* TV Plans Cards in Hero */}
            <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
              {tvPlans.map((plan, index) => (
                <Card
                  key={plan.name}
                  className={`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' }}
                >
                  {plan.popular && (
                    <div className="absolute top-4 right-4 px-3 py-1 gradient-targo text-primary-foreground text-xs font-medium rounded-full">
                      Populaire
                    </div>
                  )}
                  <CardContent className="p-8 flex flex-col h-full">
                    <h3 className="font-display text-2xl font-bold mb-2">{plan.name}</h3>
                    <div className="flex items-baseline gap-1 mb-6">
                      <span className="font-display text-5xl font-bold text-primary">
                        ${Math.floor(plan.price)}
                        <sup className="text-2xl">.00</sup>
                      </span>
                      <span className="text-muted-foreground">/mois +tx</span>
                    </div>
                    <div className="flex items-center gap-2 mb-6 p-3 bg-primary/10 rounded-lg">
                      <Tv className="w-5 h-5 text-primary" />
                      <span className="font-bold text-primary">{plan.channels} chaînes</span>
                    </div>
                    <ul className="space-y-3 mb-8 flex-grow">
                      {plan.features.map((feature) => (
                        <li key={feature} className="flex items-center gap-3">
                          <div className="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                            <Check className="w-3 h-3 text-primary" />
                          </div>
                          <span className="text-sm text-muted-foreground">{feature}</span>
                        </li>
                      ))}
                    </ul>
                    <div className="mt-auto">
                      <Button
                        className={`w-full ${plan.popular ? "gradient-targo" : ""}`}
                        variant={plan.popular ? "default" : "outline"}
                        asChild
                      >
                        <a href="/#contact">Choisir ce forfait</a>
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Channel Categories */}
        <section className="py-16 bg-primary text-primary-foreground">
          <div className="container">
            <div className="grid grid-cols-2 md:grid-cols-6 gap-6 text-center">
              {channelCategories.map((category) => (
                <div key={category.name}>
                  <span className="font-display text-4xl font-bold">{category.count}</span>
                  <p className="text-primary-foreground/80">{category.name}</p>
                </div>
              ))}
            </div>
          </div>
        </section>



        {/* Features */}
        <section className="py-20 bg-secondary/50">
          <div className="container">
            <div className="text-center max-w-2xl mx-auto mb-16">
              <h2 className="font-display text-4xl font-bold mb-4">
                Fonctionnalités avancées
              </h2>
              <p className="text-muted-foreground text-lg">
                Plus qu'une simple télévision, une expérience interactive complète.
              </p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
              {features.map((feature) => (
                <Card key={feature.title} className="text-center p-6">
                  <CardContent className="p-0">
                    <div className="w-16 h-16 mx-auto mb-4 rounded-2xl gradient-targo flex items-center justify-center">
                      <feature.icon className="w-8 h-8 text-primary-foreground" />
                    </div>
                    <h3 className="font-display text-xl font-bold mb-2">{feature.title}</h3>
                    <p className="text-muted-foreground text-sm">{feature.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Combo offer */}
        <section className="py-20">
          <div className="container">
            <Card className="gradient-targo p-12 text-center text-primary-foreground">
              <h2 className="font-display text-3xl md:text-4xl font-bold mb-4">
                Économisez avec nos combos
              </h2>
              <p className="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" className="text-primary font-semibold">
                Voir les combos
                <ArrowRight className="w-5 h-5 ml-2" />
              </Button>
            </Card>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default Television;
