<template>
  <div>
    <!-- Hero Section -->
    <section class="aws-gradient text-white section-padding">
      <div class="container-custom text-center">
        <h1 class="text-5xl font-bold mb-6">
          {{ $t('services.title') }}
        </h1>
        <p class="text-xl text-white/90 max-w-3xl mx-auto">
          {{ $t('services.subtitle') }}
        </p>
      </div>
    </section>

    <!-- Services Grid -->
    <section class="section-padding bg-white">
      <div class="container-custom">
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div v-for="(service, key) in services" :key="key" class="card hover:shadow-aws transition-all duration-300 group">
            <div class="text-aws-orange text-5xl mb-6 group-hover:scale-110 transition-transform duration-300">
              <component :is="service.icon" />
            </div>
            <h3 class="text-2xl font-bold mb-4">{{ service.title }}</h3>
            <p class="text-gray-600 mb-6">{{ service.description }}</p>
            <ul class="space-y-2 text-sm text-gray-500">
              <li v-for="feature in service.features" :key="feature" class="flex items-center">
                <Check class="text-green-500 mr-2 flex-shrink-0" />
                <span>{{ feature }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="gradient-bg text-white section-padding">
      <div class="container-custom text-center">
        <h2 class="text-4xl font-bold mb-4">
          {{ $t('cta.title') || 'Ready to Get Started?' }}
        </h2>
        <p class="text-xl mb-8 text-white/90">
          {{ $t('cta.subtitle') || 'Contact us today to discuss your AWS needs.' }}
        </p>
        <button class="btn-secondary text-lg px-8 py-4">
          {{ $t('cta.button') || 'Contact Us' }}
        </button>
      </div>
    </section>
  </div>
</template>

<script setup>
import { Server, Database, Network, HardDrive, Check, Shield, Zap, Globe } from 'lucide-vue-next'

// i18n
const { t } = useI18n()

// SEO
useSeoMeta({
  title: () => t('seo.services.title'),
  description: () => t('seo.services.description')
})

// Services data
const services = computed(() => [
  {
    title: t('services.compute.title'),
    description: t('services.compute.description'),
    icon: Server,
    features: [
      'Scalable instances',
      'Auto-scaling groups',
      'Load balancing',
      '24/7 monitoring'
    ]
  },
  {
    title: t('services.storage.title'),
    description: t('services.storage.description'),
    icon: HardDrive,
    features: [
      'Unlimited storage',
      'Data encryption',
      'Cross-region replication',
      'Lifecycle management'
    ]
  },
  {
    title: t('services.database.title'),
    description: t('services.database.description'),
    icon: Database,
    features: [
      'Managed databases',
      'Automated backups',
      'Read replicas',
      'Performance monitoring'
    ]
  },
  {
    title: t('services.networking.title'),
    description: t('services.networking.description'),
    icon: Network,
    features: [
      'Private networks',
      'VPN connections',
      'Security groups',
      'Traffic routing'
    ]
  }
])
</script>
