<script setup lang="ts">
import { Settings, CheckCircle, ArrowRight, Users, Shield, Zap, Clock, HeadphonesIcon, Wrench } from "lucide-vue-next";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import Header from "@/components/layout/Header.vue";
import Footer from "@/components/layout/Footer.vue";
import { RouterLink } from "vue-router";

const managedServices = [
  {
    title: "SD-WAN",
    description: "La solution SD-WAN fournit une alternative au réseau traditionnel WAN. Dynamisez votre réseau d'affaires et assurez l'évolutivité de votre entreprise.",
    link: "/business/sd-wan"
  },
  {
    title: "Sécurité Nuagique",
    description: "Nos solutions de sécurité intelligentes et sur mesure vous protègent des menaces externes, sans nuire à la performance de vos infrastructures TI.",
    link: "/business/securite"
  },
  {
    title: "Réseau local",
    description: "Transférez l'entièreté ou une partie de la responsabilité de votre infrastructure de réseau local pour vous concentrer sur ce qui importe réellement.",
    link: "/business/services-geres"
  },
  {
    title: "Solutions sans-fil",
    description: "Conception de solutions Wi-Fi, 5G, LTE intra-immeuble et liens inter-bâtiment sans fil avec accompagnement personnalisé.",
    link: "/business/services-geres"
  },
  {
    title: "Communications en nuage",
    description: "Au bureau, sur la route ou à la maison, notre service de communications en nuage répond à tous vos besoins de communications et de collaboration.",
    link: "/business/telephonie"
  }
];

const advantages = [
  {
    icon: Zap,
    title: "Optimisez les performances",
    description: "Des solutions sur mesure et gérées bout à bout pour maximiser votre réseau."
  },
  {
    icon: Shield,
    title: "Simplifiez et réduisez vos coûts",
    description: "Payez simplement pour ce dont vous avez besoin, sans investissements hasardeux."
  },
  {
    icon: Users,
    title: "Équipe d'experts",
    description: "Accès à des ressources qualifiées dans toutes les spécialités à une fraction du prix."
  },
  {
    icon: Clock,
    title: "Gestion sans tracas",
    description: "On s'occupe de faire affaire avec les fournisseurs de matériel et logiciels pour vous."
  }
];

const includedFeatures = [
  "Gestion complète de vos TI",
  "Maintenance proactive",
  "Mises à jour automatiques",
  "Support prioritaire 24/7",
  "Rapports mensuels détaillés",
  "Conseils stratégiques",
  "Monitoring en temps réel",
  "Intervention rapide"
];
</script>

<template>
  <div class="min-h-screen bg-background">
    <Header />

    <!-- Hero Section -->
    <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto text-center">
          <RouterLink to="/business" class="inline-flex items-center text-primary hover:underline mb-6">
            ← Retour aux solutions affaires
          </RouterLink>
          <div class="w-20 h-20 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <Settings class="h-10 w-10 text-primary" />
          </div>
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
            Services <span class="text-primary">Gérés</span>
          </h1>
          <p class="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
            L'extension de votre équipe TI. Des solutions sur mesure, sans les aléas de la gestion.
          </p>
        </div>
      </div>
    </section>

    <!-- Equation Section -->
    <section class="py-16 bg-muted/30">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
          <h2 class="text-2xl md:text-3xl font-bold text-center text-foreground mb-8">
            Pourquoi les services gérés?
          </h2>
          <div class="grid md:grid-cols-4 gap-4 items-center text-center">
            <div class="bg-background p-6 rounded-xl border">
              <Wrench class="h-8 w-8 text-primary mx-auto mb-3" />
              <p class="font-medium">Solutions sur mesures</p>
            </div>
            <div class="text-3xl font-bold text-primary hidden md:block">+</div>
            <div class="bg-background p-6 rounded-xl border">
              <Users class="h-8 w-8 text-primary mx-auto mb-3" />
              <p class="font-medium">Ressources qualifiées</p>
            </div>
            <div class="text-3xl font-bold text-primary hidden md:block">+</div>
          </div>
          <div class="grid md:grid-cols-3 gap-4 items-center text-center mt-4">
            <div class="bg-background p-6 rounded-xl border">
              <Clock class="h-8 w-8 text-primary mx-auto mb-3" />
              <p class="font-medium">Flexibilité et visibilité</p>
            </div>
            <div class="text-3xl font-bold text-primary">=</div>
            <div class="bg-primary p-6 rounded-xl text-primary-foreground">
              <HeadphonesIcon class="h-8 w-8 mx-auto mb-3" />
              <p class="font-bold text-lg">Tranquillité d'esprit</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Description -->
    <section class="py-16">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center">
          <p class="text-lg text-muted-foreground mb-6">
            Grâce à nos services gérés, vous maximisez le potentiel de vos ressources internes pour qu'elles puissent se consacrer pleinement à la recherche, à l'innovation et aux projets à valeur ajoutée.
          </p>
          <p class="text-lg text-foreground font-medium">
            Laissez votre équipe TI se consacrer pleinement aux activités stratégiques de l'entreprise, pendant que nous gérons votre connectivité et la maintenance de votre infrastructure réseau.
          </p>
        </div>
      </div>
    </section>

    <!-- Services List -->
    <section class="py-16 bg-muted/30">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl md:text-4xl font-bold text-center text-foreground mb-12">
          Nos services gérés
        </h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
          <Card v-for="(service, index) in managedServices" :key="index" class="group hover:shadow-lg transition-all duration-300 hover:border-primary/50">
            <CardContent class="p-6">
              <h3 class="text-xl font-semibold text-foreground mb-3">{{ service.title }}</h3>
              <p class="text-muted-foreground mb-4">{{ service.description }}</p>
              <RouterLink :to="service.link" class="text-primary hover:underline inline-flex items-center">
                En savoir plus <ArrowRight class="ml-1 h-4 w-4" />
              </RouterLink>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>

    <!-- Advantages -->
    <section class="py-16">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl md:text-4xl font-bold text-center text-foreground mb-12">
          Les avantages
        </h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
          <div v-for="(advantage, index) in advantages" :key="index" class="text-center">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
              <component :is="advantage.icon" class="h-8 w-8 text-primary" />
            </div>
            <h3 class="text-lg font-semibold text-foreground mb-2">{{ advantage.title }}</h3>
            <p class="text-muted-foreground text-sm">{{ advantage.description }}</p>
          </div>
        </div>
      </div>
    </section>

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

    <!-- CTA -->
    <section class="py-16 md:py-24 bg-primary text-primary-foreground">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">
          Prêt à simplifier votre gestion TI?
        </h2>
        <p class="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
          Nos experts analysent vos besoins et vous proposent une solution personnalisée.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
            <a href="/#contact">
              Demander une soumission
              <ArrowRight class="ml-2 h-5 w-5" />
            </a>
          </Button>
          <Button size="lg" variant="outline" class="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>
</template>
