import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { Mail, FileText, Users, Cloud, Shield, Phone, ArrowRight, CheckCircle2, Star } from "lucide-react";

const plans = [
  {
    name: "Microsoft 365 Business Basic",
    price: "8,10",
    description: "Idéal pour les entreprises qui ont besoin d'un service de courriel professionnel, d'une solution de stockage ainsi que des outils de collaboration.",
    features: ["Exchange", "OneDrive", "SharePoint", "Teams"],
    webOnly: true,
    popular: false,
  },
  {
    name: "Microsoft 365 Apps for Business",
    price: "11,70",
    description: "Idéal pour les entreprises qui ont besoin des logiciels Office, solution de stockage et de partage de fichiers en ligne.",
    features: ["Word", "Excel", "PowerPoint", "OneNote", "OneDrive", "Access (PC)"],
    webOnly: false,
    popular: false,
  },
  {
    name: "Microsoft 365 Business Premium",
    price: "29,80",
    description: "Solution complète: courriel professionnel, logiciels Office, stockage, partage de fichiers et outils de collaboration.",
    features: ["Word", "Excel", "PowerPoint", "OneNote", "Exchange", "OneDrive", "SharePoint", "Teams", "Access (PC)"],
    webOnly: false,
    popular: true,
  },
];

const advantages = [
  {
    icon: Mail,
    title: "Courriels professionnels",
    description: "Adresses courriel personnalisées avec votre nom de domaine. Boîte aux lettres de 50 Go et protection avancée contre les menaces.",
  },
  {
    icon: Cloud,
    title: "Stockage cloud",
    description: "1 To de stockage OneDrive par utilisateur. Accédez à vos fichiers de n'importe où, sur n'importe quel appareil.",
  },
  {
    icon: Users,
    title: "Collaboration Teams",
    description: "Réunions vidéo, messagerie instantanée et partage de fichiers. Travaillez ensemble efficacement, où que vous soyez.",
  },
  {
    icon: Shield,
    title: "Sécurité Avancée",
    description: "Protection contre les menaces, chiffrement des données et conformité aux normes de l'industrie.",
  },
];

const BusinessMicrosoft365 = () => {
  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">
              <Mail className="h-4 w-4" />
              Microsoft 365
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
              Experts en Solutions <span className="text-primary">Microsoft 365</span>
            </h1>
            <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
              Solutions complètes et intégrées conçues pour les TPE et PME. 
              Choisissez la suite de productivité adaptée à votre activité.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="text-lg px-8">
                Voir les forfaits
                <ArrowRight className="ml-2 h-5 w-5" />
              </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>

      {/* Plans */}
      <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 Forfaits Microsoft 365
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Prix de volume offert - Abonnement annuel
            </p>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {plans.map((plan, index) => (
              <Card key={index} className={`relative hover:shadow-lg transition-shadow ${plan.popular ? 'border-primary border-2' : ''}`}>
                {plan.popular && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                    <span className="bg-primary text-primary-foreground text-sm font-medium px-4 py-1 rounded-full flex items-center gap-1">
                      <Star className="h-3 w-3" /> Populaire
                    </span>
                  </div>
                )}
                <CardHeader className="text-center pb-4">
                  <CardTitle className="text-xl mb-2">{plan.name}</CardTitle>
                  <div className="flex items-baseline justify-center gap-1">
                    <span className="text-4xl font-bold text-primary">{plan.price}$</span>
                    <span className="text-muted-foreground">/utilisateur/mois</span>
                  </div>
                  {plan.webOnly && (
                    <span className="text-sm text-muted-foreground">(Version web et mobile uniquement)</span>
                  )}
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground mb-6">{plan.description}</p>
                  <div className="space-y-3 mb-6">
                    {plan.features.map((feature, idx) => (
                      <div key={idx} className="flex items-center gap-2">
                        <CheckCircle2 className="h-4 w-4 text-primary flex-shrink-0" />
                        <span className="text-sm">{feature}</span>
                      </div>
                    ))}
                  </div>
                  <Button className="w-full" variant={plan.popular ? "default" : "outline"}>
                    Informations | Abonnement
                  </Button>
                </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 Microsoft 365?
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Des outils puissants pour soutenir votre 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>

      {/* Apps Grid */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6">
              Applications Incluses
            </h2>
            <p className="text-lg text-muted-foreground mb-12">
              Créez, partagez et collaborez en tout lieu, sur tout appareil
            </p>
            <div className="grid grid-cols-3 md:grid-cols-6 gap-8">
              {['Word', 'Excel', 'PowerPoint', 'Outlook', 'Teams', 'OneDrive'].map((app, index) => (
                <div key={index} className="flex flex-col items-center gap-3">
                  <div className="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center">
                    <FileText className="h-8 w-8 text-primary" />
                  </div>
                  <span className="font-medium text-sm">{app}</span>
                </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 à Moderniser Votre Entreprise?
          </h2>
          <p className="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
            Contactez-nous pour un accompagnement personnalisé dans le choix et la mise en place de votre solution Microsoft 365.
          </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 un accompagnement</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 BusinessMicrosoft365;
