<script setup lang="ts">
useSeoMeta({
  title: 'Services Layer 2 - Connexions Privées Sécurisées | Wibx Tour',
  description: 'Déployez des connexions Layer 2 privées en quelques minutes avec SLA garanti et monitoring 24/7'
})

const steps = [
  {
    title: 'Sélectionner les Points de Connexion',
    description: 'Choisissez vos points de départ et d\'arrivée parmi nos 150+ data centers'
  },
  {
    title: 'Configurer la Bande Passante',
    description: 'Définissez votre bande passante de 1 Mbps à 100 Gbps'
  },
  {
    title: 'Validation et Déploiement',
    description: 'Validation automatique et provisionnement en moins de 5 minutes'
  },
  {
    title: 'Monitoring et Gestion',
    description: 'Surveillance continue avec alertes et reporting en temps réel'
  }
]

const technicalSpecs = [
  {
    title: 'VLAN Configuration',
    content: 'Configurez vos VLANs avec une granularité complète. Support des VLAN ID de 2 à 4094, avec possibilité de Q-in-Q pour les architectures complexes.'
  },
  {
    title: 'Access Ports Requis',
    content: 'Chaque connexion Layer 2 nécessite un Access Port dans chaque data center. Ports disponibles : 1GE, 10GE, 40GE, 100GE avec connecteurs optiques et cuivre.'
  },
  {
    title: 'Redondance et Résilience',
    content: 'Options de redondance active/passive ou active/active. Basculement automatique en moins de 50ms avec BGP ou LACP.'
  },
  {
    title: 'Qualité de Service (QoS)',
    content: 'Gestion avancée de la QoS avec classification du trafic, limitation de bande passante et priorisation des paquets.'
  }
]

const pricingPlans = [
  {
    name: 'Starter',
    bandwidth: '1-100 Mbps',
    price: '€29',
    features: [
      'Connexion Layer 2 basique',
      'Monitoring standard',
      'Support par email',
      'SLA 99.5%'
    ]
  },
  {
    name: 'Professional',
    bandwidth: '100 Mbps - 1 Gbps',
    price: '€199',
    features: [
      'Connexion Layer 2 avancée',
      'Monitoring en temps réel',
      'Support prioritaire 24/7',
      'SLA 99.9%',
      'Redondance optionnelle'
    ],
    popular: true
  },
  {
    name: 'Enterprise',
    bandwidth: '1-100 Gbps',
    price: 'Sur mesure',
    features: [
      'Connexions Layer 2 multiples',
      'Monitoring avancé + alertes',
      'Support dédié',
      'SLA 99.99%',
      'Redondance incluse',
      'QoS avancée'
    ]
  }
]
</script>

<template>
  <UDashboardPanel id="layer2">
    <template #header>
      <UDashboardNavbar title="Services Layer 2">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right>
          <UButton size="sm" class="mr-2">
            Créer une Connexion
          </UButton>
          <UButton to="#demo" variant="outline" size="sm">
            Voir la Démo
          </UButton>
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left>
          <UBadge variant="subtle" size="lg">
            Connexions Layer 2 Privées - Déploiement Instantané
          </UBadge>
        </template>
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="space-y-12">
        <!-- Hero Section -->
        <UHero>
          <template #description>
            Créez des connexions réseau privées et sécurisées entre vos infrastructures,
            clouds et data centers en quelques minutes avec notre plateforme automatisée.
          </template>
        </UHero>

        <!-- SLA Alert -->
        <UAlert
          icon="i-lucide-clock"
          title="Temps de Déploiement"
          description="Provisionnement automatique en moins de 5 minutes avec SLA 99.9% de disponibilité"
          color="green"
          variant="soft"
        />

        <!-- Étapes de Provisionnement -->
        <div>
          <h2 class="text-2xl font-bold mb-2">Comment ça Marche</h2>
          <p class="text-gray-600 dark:text-gray-400 mb-8">
            Un processus simple en 4 étapes pour déployer vos connexions Layer 2
          </p>
          <USteps :items="steps" />
        </div>

        <!-- Video Demo -->
        <div id="demo" class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
          <h2 class="text-2xl font-bold mb-2">Démo d'Utilisation</h2>
          <p class="text-gray-600 dark:text-gray-400 mb-8">
            Découvrez comment créer votre première connexion Layer 2 en 2 minutes
          </p>

          <div class="aspect-video bg-gray-200 dark:bg-gray-800 rounded-lg flex items-center justify-center">
            <div class="text-center">
              <UIcon name="i-lucide-play-circle" size="64" class="text-primary mb-4" />
              <p class="text-lg font-medium">Démo Vidéo</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">
                Cliquez pour voir le processus de création d'une connexion Layer 2
              </p>
            </div>
          </div>
        </div>

        <!-- Détails Techniques -->
        <div>
          <h2 class="text-2xl font-bold mb-2">Spécifications Techniques</h2>
          <p class="text-gray-600 dark:text-gray-400 mb-8">
            Configurations avancées pour répondre à tous vos besoins réseau
          </p>
          <UAccordion :items="technicalSpecs" />
        </div>

        <!-- Tarification -->
        <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
          <h2 class="text-2xl font-bold mb-2">Plans et Tarification</h2>
          <p class="text-gray-600 dark:text-gray-400 mb-8">
            Choisissez le plan qui correspond à vos besoins
          </p>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <UCard
              v-for="plan in pricingPlans"
              :key="plan.name"
              :class="plan.popular ? 'ring-2 ring-primary' : ''"
              class="relative"
            >
              <template #header>
                <div class="text-center">
                  <UBadge v-if="plan.popular" class="mb-4" variant="solid">
                    Populaire
                  </UBadge>
                  <h3 class="text-xl font-bold mb-2">{{ plan.name }}</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    {{ plan.bandwidth }}
                  </p>
                  <div class="flex items-baseline justify-center">
                    <span class="text-3xl font-bold">{{ plan.price }}</span>
                    <span v-if="plan.price !== 'Sur mesure'" class="text-sm text-gray-600 dark:text-gray-400 ml-1">
                      /mois
                    </span>
                  </div>
                </div>
              </template>

              <div class="space-y-3">
                <div
                  v-for="feature in plan.features"
                  :key="feature"
                  class="flex items-center gap-2"
                >
                  <UIcon name="i-lucide-check" class="text-green-500" />
                  <span class="text-sm">{{ feature }}</span>
                </div>
              </div>

              <template #footer>
                <UButton
                  :variant="plan.popular ? 'solid' : 'outline'"
                  block
                  class="mt-6"
                >
                  {{ plan.price === 'Sur mesure' ? 'Nous Contacter' : 'Commencer' }}
                </UButton>
              </template>
            </UCard>
          </div>
        </div>

        <!-- Avantages -->
        <div>
          <h2 class="text-2xl font-bold mb-8 text-center">
            Pourquoi Choisir Nos Services Layer 2 ?
          </h2>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="text-center">
              <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-shield" size="24" class="text-blue-600 dark:text-blue-400" />
              </div>
              <h3 class="font-semibold mb-2">Sécurité Maximale</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Connexions privées isolées du trafic internet public
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-gauge" size="24" class="text-green-600 dark:text-green-400" />
              </div>
              <h3 class="font-semibold mb-2">Performances Optimales</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Latence ultra-faible et bande passante garantie
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-settings" size="24" class="text-purple-600 dark:text-purple-400" />
              </div>
              <h3 class="font-semibold mb-2">Flexibilité Totale</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Modifiez votre bande passante à la demande
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-orange-100 dark:bg-orange-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-clock" size="24" class="text-orange-600 dark:text-orange-400" />
              </div>
              <h3 class="font-semibold mb-2">Déploiement Rapide</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Provisionnement automatique en quelques minutes
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-activity" size="24" class="text-red-600 dark:text-red-400" />
              </div>
              <h3 class="font-semibold mb-2">Monitoring Avancé</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Surveillance en temps réel avec alertes proactives
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-teal-100 dark:bg-teal-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-headphones" size="24" class="text-teal-600 dark:text-teal-400" />
              </div>
              <h3 class="font-semibold mb-2">Support Expert</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Équipe technique disponible 24/7 pour vous assister
              </p>
            </div>
          </div>
        </div>
      </div>
    </template>
  </UDashboardPanel>
</template> 