import { Wifi, Tv, Phone, ArrowRight, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";

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 Services = () => {
  return (
    <section id="services" className="py-24 md:py-40 bg-gradient-to-br from-secondary via-background to-secondary relative overflow-hidden">
      {/* Decorative background gradients */}
      <div className="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 className="container">
        {/* Section header */}
        <div className="text-center max-w-2xl mx-auto mb-16">
          <motion.span
            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4"
          >
            Nos solutions fibre
          </motion.span>
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="font-display text-4xl md:text-5xl font-bold mb-6"
          >
            Des forfaits pour <span className="text-gradient-targo">tous les besoins</span>
          </motion.h2>
          <motion.p
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="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.
          </motion.p>
        </div>

        {/* Service cards */}
        <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {services.map((service, index) => (
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1 }}
              key={service.title}
            >
              <Card className={`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" : ""
              }`}>
                {service.popular && (
                  <div className="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 className="p-8 flex flex-col h-full">
                  <div className={`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'
                  }`}>
                    <service.icon className="w-7 h-7" />
                  </div>
                  
                  <h3 className="font-display text-2xl font-bold mb-2">{service.title}</h3>
                  <p className="text-muted-foreground text-sm mb-6 min-h-[40px]">{service.description}</p>

                  <div className="flex items-baseline gap-1">
                    <span className="font-display text-5xl font-bold text-primary">
                      ${Math.floor(service.price)}
                      <sup className="text-2xl">.{((service.price % 1) * 100).toFixed(0).padStart(2, '0')}</sup>
                    </span>
                    <span className="text-muted-foreground text-sm">{service.unit}</span>
                  </div>
                  <p className="text-sm text-muted-foreground mb-4">à partir de</p>

                  <ul className="space-y-3 mb-8 flex-grow mt-4">
                    {service.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 
                      asChild
                      className={`w-full ${service.popular ? 'gradient-targo' : ''}`} 
                      variant={service.popular ? 'default' : 'outline'}
                    >
                      <Link to={service.link}>
                        Voir les détails
                        <ArrowRight className="w-4 h-4 ml-2" />
                      </Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>

        {/* Note */}
        <p className="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>
  );
};

export default Services;