import {
  Building2,
  Phone,
  Wifi,
  Shield,
  Cloud,
  Server,
  Users,
  CheckCircle,
  ArrowRight,
  Headphones,
  Network,
  Link2,
  Laptop,
  GlobeLock,
  Settings,
  Radio,
  Signal,
  Cable,
  Mail,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { Link } from "react-router-dom";

const businessServices = [
  {
    icon: Server,
    title: "Internet affaires",
    description: "Connexion fibre optique à la vitesse de vos besoins d'affaires",
    features: [
      "Fibre optique jusqu'à 100 Gbit/s",
      "IP statique incluse",
      "Garantie de disponibilité 99.99%",
      "Relève sans fil disponible",
      "Installation gratuite",
      "Contrat flexible",
    ],
    link: "/business/internet",
  },
  {
    icon: Network,
    title: "SD-WAN",
    description: "Notre réseau virtuel pour connectivité intelligente",
    features: [
      "Gestion centralisée du réseau",
      "Connexion multi-sites simplifiée",
      "Optimisation du trafic en temps réel",
      "Basculement automatique sans changement d'adresse IP",
      "Sécurité intégrée",
      "Surveillance réseau 24/7",
    ],
    link: "/business/sd-wan",
  },
  {
    icon: Phone,
    title: "Téléphonie infonuagique",
    description: "Solution VoIP évoluée et efficace",
    features: [
      "Appels illimités Canada/USA",
      "Postes physiques et/ou applications mobiles",
      "Système PBX hébergé",
      "Réceptionniste virtuelle",
      "Routage d'appels intelligent",
      "Messagerie vocale par courriel avec transcription",
      "Textos intégrés",
    ],
    link: "/business/telephonie",
  },
  {
    icon: Radio,
    title: "Liaisons SIP",
    description: "La téléphonie d'aujourd'hui - voix et données unifiées",
    features: [
      "Lignes SIP en cascade",
      "Qualité voix HD",
      "Portabilité des numéros",
      "Facturation par canal",
      "Redondance automatique",
      "Compatible avec vos équipements",
    ],
    link: "/business/sip",
  },
  {
    icon: Building2,
    title: "Internet multilogement",
    description: "Solutions Internet gérées pour immeubles à logements et RPA",
    features: [
      "Augmentez la valeur de votre immeuble",
      "Revenus récurrents garantis",
      "Installation clé en main",
      "Support technique pour locataires",
      "Surveillance en temps réel",
      "Tarification gelée",
    ],
    link: "/business/multilogement",
  },
  {
    icon: Cloud,
    title: "Services cloud",
    description: "L'innovation sans concessions - connexion vers les fournisseurs infonuagiques",
    features: [
      "Connexion directe AWS, Azure, GCP",
      "Latence minimale garantie",
      "Bande passante dédiée",
      "Sécurité de niveau entreprise",
      "Évolutivité à la demande",
      "Support expert inclus",
    ],
    link: "/business/cloud",
  },
  {
    icon: GlobeLock,
    title: "Passerelle VPN",
    description: "Rapprochez vos succursales éloignées et vos télétravailleurs",
    features: [
      "Connexion sécurisée permanente",
      "Accès télétravail simplifié",
      "Chiffrement de bout en bout",
      "Multi-sites illimités",
      "Configuration clé en main",
      "Monitoring en temps réel",
    ],
    link: "/business/vpn",
  },
  {
    icon: Shield,
    title: "Sécurité & protection DDoS",
    description: "Protégez vos affaires contre les menaces externes",
    features: [
      "Protection DDoS avancée",
      "Pare-feu nouvelle génération",
      "Détection d'intrusion",
      "Caméras HD intelligentes",
      "Surveillance 24/7",
      "Réponse aux incidents",
    ],
    link: "/business/securite",
  },
  {
    icon: Settings,
    title: "Services gérés",
    description: "L'extension de votre équipe TI - solutions sur mesure",
    features: [
      "Gestion complète de vos TI",
      "Maintenance proactive",
      "Mises à jour automatiques",
      "Support prioritaire 24/7",
      "Rapports mensuels détaillés",
      "Conseils stratégiques",
    ],
    link: "/business/services-geres",
  },
  {
    icon: Signal,
    title: "Amplification cellulaire",
    description: "Améliorez la couverture cellulaire dans vos bâtiments",
    features: [
      "Couverture intérieure optimale",
      "Compatible tous opérateurs",
      "Installation professionnelle",
      "Support technique inclus",
    ],
    link: "/business/amplification-cellulaire",
  },
  {
    icon: Server,
    title: "Virtualisation",
    description: "Infrastructure virtuelle haute performance avec Proxmox",
    features: [
      "Serveurs virtuels à la demande",
      "Haute disponibilité",
      "Sauvegarde automatique",
      "Évolutivité instantanée",
    ],
    link: "/business/virtualisation",
  },
  {
    icon: Link2,
    title: "Réseaux inter-sites",
    description: "Connectez vos succursales avec des liaisons point-à-point",
    features: ["Connexion fibre dédiée", "Latence minimale", "Bande passante garantie", "Sécurité de bout en bout"],
    link: "/business/reseau-inter-sites",
  },
  {
    icon: Wifi,
    title: "WiFi commercial",
    description: "Solutions WiFi professionnelles pour entreprises",
    features: ["Couverture complète", "Gestion centralisée", "Portail captif", "Analyse du trafic"],
    link: "/business/wifi",
  },
  {
    icon: Cable,
    title: "Câblage structuré",
    description: "Infrastructure réseau filaire professionnelle",
    features: [
      "Câblage fibre et cuivre",
      "Certification des liens",
      "Documentation complète",
      "Garantie de performance",
    ],
    link: "/business/cablage",
  },
  {
    icon: Mail,
    title: "Microsoft 365",
    description: "Productivité et collaboration dans le cloud",
    features: ["Courriels professionnels", "Suite Office complète", "Collaboration Teams", "Stockage OneDrive"],
    link: "/business/microsoft-365",
  },
];

const advantages = [
  {
    icon: Cloud,
    title: "Tout-en-un",
    description: "Internet, téléphonie et sécurité unifiés sur une seule facture",
  },
  {
    icon: Users,
    title: "Support dédié",
    description: "Une équipe d'experts disponible 24/7 pour votre entreprise",
  },
  {
    icon: Headphones,
    title: "Clé en main",
    description: "Installation, configuration et formation incluses",
  },
];

const Business = () => {
  return (
    <div className="min-h-screen bg-background">
      <Header />

      {/* Hero Section */}
      <section className="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <span className="inline-block px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium mb-6">
              Solutions affaires
            </span>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
              Des solutions adaptées à vos <span className="text-primary">besoins d'affaires</span>
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
              Leader en télécommunications : Internet, téléphonie IP et réseaux depuis 2005.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="text-lg px-8" asChild>
                <a href="/#contact">
                  Demander une soumission
                  <ArrowRight className="ml-2 h-5 w-5" />
                </a>
              </Button>
              <Button size="lg" variant="outline" className="text-lg px-8">
                1-855-888-2746
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">Nos solutions pour entreprises</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Des technologies de pointe pour optimiser la productivité de votre entreprise
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {businessServices.map((service, index) => (
              <Card
                key={index}
                className="group hover:shadow-xl transition-all duration-300 border-2 hover:border-primary/50"
              >
                <CardHeader>
                  <div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
                    <service.icon className="h-7 w-7 text-primary" />
                  </div>
                  <CardTitle className="text-2xl">{service.title}</CardTitle>
                  <CardDescription className="text-base">{service.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-3 mb-6">
                    {service.features.map((feature, idx) => (
                      <li key={idx} className="flex items-center gap-3">
                        <CheckCircle className="h-5 w-5 text-primary flex-shrink-0" />
                        <span className="text-muted-foreground">{feature}</span>
                      </li>
                    ))}
                  </ul>
                  <Link to={service.link}>
                    <Button className="w-full group-hover:bg-primary/90">
                      En savoir plus
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Advantages Section */}
      <section className="py-16 bg-muted/50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">Pourquoi choisir TARGO affaires?</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {advantages.map((advantage, index) => (
              <div key={index} className="text-center p-6">
                <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <advantage.icon className="h-8 w-8 text-primary" />
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-2">{advantage.title}</h3>
                <p className="text-muted-foreground">{advantage.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 md:py-24 bg-primary text-primary-foreground">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Prêt à optimiser vos communications?</h2>
          <p className="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
            Nos experts analysent vos besoins et vous proposent une solution personnalisée. Économisez jusqu'à 40% sur
            vos frais de télécommunication.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" variant="secondary" className="text-lg px-8" asChild>
              <a href="/#contact">Soumission gratuite</a>
            </Button>
            <Button
              size="lg"
              className="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary"
              asChild
            >
              <a href="/#contact">Nous contacter</a>
            </Button>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default Business;
