<script setup lang="ts">
useSeoMeta({
  title: 'Connect Clouds - Connexions Cloud Directes | Wibx Tour',
  description: 'Connectez-vous directement aux plus grands fournisseurs cloud avec des liens Layer 2 privés et sécurisés'
})

const selectedProvider = ref('all')

const cloudProviders = [
  {
    id: 'aws',
    name: 'Amazon Web Services',
    logo: 'i-simple-icons-amazonaws',
    status: 'Direct Connect',
    statusColor: 'green',
    regions: ['EU-West-1', 'EU-Central-1', 'US-East-1', 'US-West-2', 'AP-Southeast-1'],
    services: ['EC2', 'S3', 'RDS', 'Lambda', 'VPC'],
    bandwidth: '50 Mbps - 100 Gbps',
    latency: '< 2ms',
    price: 'À partir de €149/mois'
  },
  {
    id: 'azure',
    name: 'Microsoft Azure',
    logo: 'i-simple-icons-microsoftazure',
    status: 'Partner',
    statusColor: 'blue',
    regions: ['West Europe', 'North Europe', 'East US', 'West US 2'],
    services: ['Virtual Machines', 'Storage', 'SQL Database', 'App Service'],
    bandwidth: '50 Mbps - 10 Gbps',
    latency: '< 3ms',
    price: 'À partir de €129/mois'
  },
  {
    id: 'gcp',
    name: 'Google Cloud Platform',
    logo: 'i-simple-icons-googlecloud',
    status: 'Direct Connect',
    statusColor: 'green',
    regions: ['europe-west1', 'europe-west3', 'us-central1', 'us-east1'],
    services: ['Compute Engine', 'Cloud Storage', 'BigQuery', 'Kubernetes Engine'],
    bandwidth: '50 Mbps - 100 Gbps',
    latency: '< 2ms',
    price: 'À partir de €159/mois'
  },
  {
    id: 'oracle',
    name: 'Oracle Cloud Infrastructure',
    logo: 'i-simple-icons-oracle',
    status: 'New',
    statusColor: 'orange',
    regions: ['eu-frankfurt-1', 'eu-amsterdam-1', 'us-phoenix-1'],
    services: ['Compute', 'Object Storage', 'Database', 'Networking'],
    bandwidth: '1 Gbps - 10 Gbps',
    latency: '< 5ms',
    price: 'À partir de €99/mois'
  },
  {
    id: 'ibm',
    name: 'IBM Cloud',
    logo: 'i-simple-icons-ibm',
    status: 'Partner',
    statusColor: 'blue',
    regions: ['eu-de', 'eu-gb', 'us-south', 'us-east'],
    services: ['Virtual Servers', 'Object Storage', 'Watson', 'Kubernetes'],
    bandwidth: '100 Mbps - 1 Gbps',
    latency: '< 4ms',
    price: 'À partir de €89/mois'
  },
  {
    id: 'alibaba',
    name: 'Alibaba Cloud',
    logo: 'i-simple-icons-alibabacloud',
    status: 'New',
    statusColor: 'orange',
    regions: ['eu-central-1', 'eu-west-1', 'us-west-1', 'ap-southeast-1'],
    services: ['ECS', 'OSS', 'RDS', 'Container Service'],
    bandwidth: '100 Mbps - 1 Gbps',
    latency: '< 6ms',
    price: 'À partir de €79/mois'
  }
]

const tabs = [
  { value: 'all', label: 'Tous les Clouds' },
  { value: 'aws', label: 'AWS' },
  { value: 'azure', label: 'Azure' },
  { value: 'gcp', label: 'Google Cloud' },
  { value: 'oracle', label: 'Oracle' },
  { value: 'ibm', label: 'IBM' },
  { value: 'alibaba', label: 'Alibaba' }
]

const filteredProviders = computed(() => {
  if (selectedProvider.value === 'all') {
    return cloudProviders
  }
  return cloudProviders.filter(provider => provider.id === selectedProvider.value)
})

const getStatusVariant = (color: string) => {
  switch (color) {
    case 'green': return 'solid'
    case 'orange': return 'outline'
    case 'blue': return 'subtle'
    default: return 'subtle'
  }
}
</script>

<template>
  <UDashboardPanel id="connect-clouds">
    <template #header>
      <UDashboardNavbar title="Connect Clouds">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right>
          <UButton size="sm" class="mr-2">
            Demander un Devis
          </UButton>
          <UButton to="/services/layer2" variant="outline" size="sm">
            En Savoir Plus
          </UButton>
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left>
          <UBadge variant="subtle" size="lg">
            Connexions Cloud Directes - Layer 2 Privés et Sécurisés
          </UBadge>
        </template>
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="space-y-12">
        <!-- Header Section -->
        <div class="bg-primary/10 rounded-lg p-8 text-center mb-8">
          <h1 class="text-3xl font-bold mb-4">
            Connexions <span class="text-primary">Cloud</span> Directes
          </h1>
          <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            Connectez-vous aux plus grands fournisseurs cloud avec des liens Layer 2 privés, sécurisés et performants
          </p>
        </div>

        <!-- Statistiques -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
          <div class="text-center space-y-4">
            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto">
              <UIcon name="i-lucide-cloud" class="w-8 h-8 text-primary" />
            </div>
            <div>
              <div class="text-3xl font-bold text-primary mb-1">
                {{ cloudProviders.length }}+
              </div>
              <div class="text-sm font-medium text-gray-600 dark:text-gray-400">
                Fournisseurs cloud
              </div>
            </div>
          </div>

          <div class="text-center space-y-4">
            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto">
              <UIcon name="i-lucide-globe" class="w-8 h-8 text-primary" />
            </div>
            <div>
              <div class="text-3xl font-bold text-primary mb-1">
                50+
              </div>
              <div class="text-sm font-medium text-gray-600 dark:text-gray-400">
                Régions mondiales
              </div>
            </div>
          </div>

          <div class="text-center space-y-4">
            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto">
              <UIcon name="i-lucide-zap" class="w-8 h-8 text-primary" />
            </div>
            <div>
              <div class="text-3xl font-bold text-primary mb-1">
                &lt; 2ms
              </div>
              <div class="text-sm font-medium text-gray-600 dark:text-gray-400">
                Latence ultra-faible
              </div>
            </div>
          </div>

          <div class="text-center space-y-4">
            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto">
              <UIcon name="i-lucide-shield-check" class="w-8 h-8 text-primary" />
            </div>
            <div>
              <div class="text-3xl font-bold text-primary mb-1">
                100%
              </div>
              <div class="text-sm font-medium text-gray-600 dark:text-gray-400">
                Connexions privées
              </div>
            </div>
          </div>
        </div>

        <!-- Filters -->
        <div>
          <UTabs v-model="selectedProvider" :items="tabs" class="w-full" />
        </div>

        <!-- Cloud Providers Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <UCard
            v-for="provider in filteredProviders"
            :key="provider.id"
            class="hover:shadow-lg transition-shadow duration-300"
          >
            <template #header>
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-4">
                  <UIcon :name="provider.logo" size="48" />
                  <div>
                    <h3 class="text-lg font-semibold">
                      {{ provider.name }}
                    </h3>
                    <UBadge
                      :variant="getStatusVariant(provider.statusColor)"
                      :color="provider.statusColor"
                      size="sm"
                      class="mt-1"
                    >
                      {{ provider.status }}
                    </UBadge>
                  </div>
                </div>
              </div>
            </template>

            <div class="space-y-4">
              <!-- Régions -->
              <div>
                <h4 class="font-medium text-sm text-gray-600 dark:text-gray-400 mb-2">
                  Régions Disponibles
                </h4>
                <div class="flex flex-wrap gap-1">
                  <UBadge
                    v-for="region in provider.regions"
                    :key="region"
                    variant="soft"
                    size="sm"
                  >
                    {{ region }}
                  </UBadge>
                </div>
              </div>

              <!-- Services -->
              <div>
                <h4 class="font-medium text-sm text-gray-600 dark:text-gray-400 mb-2">
                  Services Principaux
                </h4>
                <div class="flex flex-wrap gap-1">
                  <UBadge
                    v-for="service in provider.services"
                    :key="service"
                    variant="outline"
                    size="sm"
                  >
                    {{ service }}
                  </UBadge>
                </div>
              </div>

              <!-- Spécifications -->
              <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span class="text-gray-600 dark:text-gray-400">Bande Passante:</span>
                  <p class="font-medium">
                    {{ provider.bandwidth }}
                  </p>
                </div>
                <div>
                  <span class="text-gray-600 dark:text-gray-400">Latence:</span>
                  <p class="font-medium">
                    {{ provider.latency }}
                  </p>
                </div>
              </div>

              <!-- Prix -->
              <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
                <p class="text-lg font-semibold text-primary">
                  {{ provider.price }}
                </p>
              </div>
            </div>

            <template #footer>
              <div class="flex gap-2">
                <UButton block>
                  Configurer
                </UButton>
                <UButton variant="outline" square>
                  <UIcon name="i-lucide-info" />
                </UButton>
              </div>
            </template>
          </UCard>
        </div>

        <!-- Avantages -->
        <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8">
          <h2 class="text-2xl font-bold mb-8 text-center">
            Pourquoi Choisir Nos Connexions Cloud ?
          </h2>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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-globe" size="24" class="text-blue-600 dark:text-blue-400" />
              </div>
              <h3 class="font-semibold mb-2">
                Couverture Mondiale
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Accédez à 50+ régions cloud depuis nos data centers
              </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-dollar-sign" size="24" class="text-green-600 dark:text-green-400" />
              </div>
              <h3 class="font-semibold mb-2">
                Réduction des Coûts
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Jusqu'à 70% d'économies sur les frais de transfert
              </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-gauge" size="24" class="text-purple-600 dark:text-purple-400" />
              </div>
              <h3 class="font-semibold mb-2">
                Performances Optimisées
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Latence réduite et bande passante garantie
              </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-shield-check" size="24" class="text-orange-600 dark:text-orange-400" />
              </div>
              <h3 class="font-semibold mb-2">
                Sécurité Renforcée
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Connexions privées isolées d'Internet
              </p>
            </div>
          </div>
        </div>

        <!-- Call to Action -->
        <div class="text-center bg-primary text-white rounded-lg p-8">
          <h2 class="text-2xl font-bold mb-4">
            Prêt à Connecter Votre Cloud ?
          </h2>
          <p class="text-lg mb-8 opacity-90">
            Configurez votre première connexion cloud en quelques minutes
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <UButton size="lg" variant="outline" color="white">
              Commencer Maintenant
            </UButton>
            <UButton to="/resources/api-docs" size="lg" variant="ghost" color="white">
              Documentation API
            </UButton>
          </div>
        </div>
      </div>
    </template>
  </UDashboardPanel>
</template> 