import { Network, CheckCircle, ArrowRight, Zap, Shield, Globe, Settings } from "lucide-react";
import { Button } from "@/components/ui/button";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { Link } from "react-router-dom";

const features = [
  "Gestion centralisée du réseau",
  "Optimisation du trafic en temps réel",
  "Basculement automatique",
  "Connexion multi-sites simplifiée",
  "Sécurité intégrée",
  "Monitoring 24/7",
  "Configuration à distance",
  "Rapports de performance"
];

const advantages = [
  {
    icon: Globe,
    title: "Multi-sites unifié",
    description: "Connectez tous vos sites avec une gestion centralisée et simplifiée."
  },
  {
    icon: Zap,
    title: "Performance optimale",
    description: "Routage intelligent du trafic pour des performances maximales."
  },
  {
    icon: Shield,
    title: "Sécurité intégrée",
    description: "Chiffrement et protection inclus pour toutes vos connexions."
  },
  {
    icon: Settings,
    title: "Flexibilité totale",
    description: "Évoluez facilement selon vos besoins sans changement d'infrastructure."
  }
];

const BusinessSdWan = () => {
  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">
            <Link to="/business" className="inline-flex items-center text-primary hover:underline mb-6">
              ← Retour aux solutions affaires
            </Link>
            <div className="w-20 h-20 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
              <Network className="h-10 w-10 text-primary" />
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
              <span className="text-primary">SD-WAN</span>
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
              Notre réseau virtuel sans pareil pour une connectivité intelligente. L'alternative moderne au WAN traditionnel.
            </p>
          </div>
        </div>
      </section>

      {/* Description */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <p className="text-lg text-muted-foreground mb-6">
              La solution SD-WAN fournit une alternative au réseau traditionnel WAN (MPLS). Grâce à notre service SD-WAN, vous dynamisez votre réseau d'affaires et assurez l'évolutivité de votre entreprise.
            </p>
          </div>
        </div>
      </section>

      {/* Advantages */}
      <section className="py-16 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
            {advantages.map((advantage, index) => (
              <div key={index} className="text-center">
                <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-lg font-semibold text-foreground mb-2">{advantage.title}</h3>
                <p className="text-muted-foreground text-sm">{advantage.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-3xl font-bold text-center text-foreground mb-8">
              Ce qui est inclus
            </h2>
            <div className="grid md:grid-cols-2 gap-4">
              {features.map((feature, index) => (
                <div key={index} className="flex items-center gap-3 bg-background p-4 rounded-lg border">
                  <CheckCircle className="h-5 w-5 text-primary flex-shrink-0" />
                  <span className="text-foreground">{feature}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <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 à moderniser votre réseau?
          </h2>
          <p className="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
            Découvrez comment SD-WAN peut transformer votre connectivité d'entreprise.
          </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">
                Demander une soumission
                <ArrowRight className="ml-2 h-5 w-5" />
              </a>
            </Button>
            <Button size="lg" variant="outline" className="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
              1-855-888-2746
            </Button>
          </div>
        </div>
      </section>

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

export default BusinessSdWan;
