<script lang="ts">
  const services = [
    {
      title: 'Microsoft 365 Migrations',
      description: 'Smooth transition to Microsoft 365 with minimal downtime and comprehensive data migration.',
      icon: '🔄'
    },
    {
      title: 'Cloud Email & File Support',
      description: 'Expert management of Exchange Online and SharePoint, ensuring seamless collaboration.',
      icon: '📧'
    },
    {
      title: 'Security Configuration & Compliance',
      description: 'Robust security setup and compliance management to protect your business data.',
      icon: '🔒'
    },
    {
      title: 'Remote IT Helpdesk',
      description: '24/7 remote support for all your Microsoft 365 and general IT needs.',
      icon: '💻'
    },
    {
      title: 'Personalized Training & Onboarding',
      description: 'Custom training programs to help your team maximize productivity with Microsoft 365.',
      icon: '🎓'
    }
  ];
</script>

<section class="py-20 bg-white">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl md:text-4xl font-heading font-bold text-center text-primary mb-12">
      Our Services
    </h2>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      {#each services as service}
        <div class="bg-surface p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200">
          <div class="text-4xl mb-4">{service.icon}</div>
          <h3 class="text-xl font-heading font-semibold text-primary mb-3">
            {service.title}
          </h3>
          <p class="text-text/80">
            {service.description}
          </p>
        </div>
      {/each}
    </div>
  </div>
</section> 