import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { Server, Database, Shield, Zap, HardDrive, RefreshCw, Phone, ArrowRight, CheckCircle2 } from "lucide-react";

const features = [
  "Migration en direct sans interruption",
  "Haute disponibilité des clusters",
  "Stockage CEPH ou ZFS intégré",
  "Interface utilisateur Web intuitive",
  "Conteneurs Linux (LXC) inclus",
  "Hyperviseur KVM performant",
  "Reprise après sinistre intégrée",
  "Support entreprise disponible",
];

const advantages = [
  {
    icon: Server,
    title: "Environnement Virtuel Complet",
    description: "Proxmox VE combine calcul, réseau et stockage dans une seule solution open source pour la virtualisation d'entreprise.",
  },
  {
    icon: Database,
    title: "Sauvegarde entreprise",
    description: "Solution de sauvegarde avec déduplication incrémentielle, réduisant la charge réseau et économisant l'espace de stockage.",
  },
  {
    icon: Shield,
    title: "Sécurité Renforcée",
    description: "Cryptage fort et méthodes garantissant l'intégrité des données pour des sauvegardes sécurisées même sur des cibles distantes.",
  },
  {
    icon: Zap,
    title: "Performance optimale",
    description: "Virtualisez les charges de travail les plus exigeantes Windows et Linux avec une évolutivité dynamique selon vos besoins.",
  },
];

const solutions = [
  {
    icon: HardDrive,
    title: "Virtualisation",
    description: "Plateforme de gestion de serveur complète pour virtualiser votre infrastructure informatique.",
  },
  {
    icon: Database,
    title: "Sauvegarde",
    description: "Sauvegarde et restauration de machines virtuelles, conteneurs et hôtes physiques.",
  },
  {
    icon: Shield,
    title: "Sécurité Courriel",
    description: "Protection avancée pour vos communications d'entreprise avec filtrage intelligent.",
  },
  {
    icon: RefreshCw,
    title: "Formations",
    description: "Maîtrisez les concepts et composants avec nos formations pratiques certifiées.",
  },
];

const BusinessVirtualisation = () => {
  return (
    <div className="min-h-screen bg-background">
      <Header />
      
      {/* Hero Section */}
      <section className="pt-32 pb-20 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">
            <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
              <Server className="h-4 w-4" />
              Virtualisation d'Entreprise
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
              Virtualisation <span className="text-primary">Open Source</span>
            </h1>
            <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
              Calcul, réseau et stockage dans une seule solution. Construisez un centre de données ouvert et évolutif 
              avec nos solutions de virtualisation.
            </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 démonstration
                  <ArrowRight className="ml-2 h-5 w-5" />
                </a>
              </Button>
              <Button size="lg" variant="outline" className="text-lg px-8 border-border text-foreground hover:bg-accent">
                <Phone className="mr-2 h-5 w-5" />
                1-855-888-2746
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Solutions */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              Nos Solutions de Virtualisation
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Une suite complète d'outils pour votre infrastructure virtuelle
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
            {solutions.map((solution, index) => (
              <Card key={index} className="text-center hover:shadow-lg transition-shadow border-2 hover:border-primary/50">
                <CardContent className="pt-8 pb-6">
                  <div className="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-6">
                    <solution.icon className="h-8 w-8 text-primary" />
                  </div>
                  <h3 className="text-lg font-semibold mb-3">{solution.title}</h3>
                  <p className="text-sm text-muted-foreground">{solution.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Advantages */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              Pourquoi Choisir Nos Solutions
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Flexibilité maximale et fonctionnalités de classe entreprise
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            {advantages.map((advantage, index) => (
              <Card key={index} className="hover:shadow-lg transition-shadow">
                <CardContent className="p-8">
                  <div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
                    <advantage.icon className="h-7 w-7 text-primary" />
                  </div>
                  <h3 className="text-xl font-semibold mb-3">{advantage.title}</h3>
                  <p className="text-muted-foreground">{advantage.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6">
                  Fonctionnalités Avancées
                </h2>
                <p className="text-lg text-muted-foreground mb-8">
                  En combinant deux technologies de virtualisation sur une même plateforme, nous offrons une flexibilité maximale 
                  à votre environnement de production.
                </p>
                <div className="grid sm:grid-cols-2 gap-4">
                  {features.map((feature, index) => (
                    <div key={index} className="flex items-center gap-3">
                      <CheckCircle2 className="h-5 w-5 text-primary flex-shrink-0" />
                      <span className="text-foreground">{feature}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div className="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 text-center">
                <Server className="h-24 w-24 text-primary mx-auto mb-6" />
                <h3 className="text-2xl font-bold mb-2">100% Open Source</h3>
                <p className="text-muted-foreground">Sans coûts de licence, avec support entreprise disponible</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 bg-primary text-primary-foreground">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            Prêt à Virtualiser Votre Infrastructure?
          </h2>
          <p className="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
            Contactez nos experts pour une démonstration gratuite et découvrez comment optimiser vos ressources.
          </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 démonstration</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">
              <Phone className="mr-2 h-5 w-5" />
              1-855-888-2746
            </Button>
          </div>
        </div>
      </section>

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

export default BusinessVirtualisation;
