<script lang="ts">
  const values = [
    {
      title: 'Expertise',
      description: 'Deep knowledge of Microsoft 365 ecosystem and best practices.',
      icon: '🎯'
    },
    {
      title: 'Reliability',
      description: 'Consistent, dependable support when you need it most.',
      icon: '⭐'
    },
    {
      title: 'Innovation',
      description: 'Staying ahead of the curve with the latest cloud technologies.',
      icon: '💡'
    }
  ];
</script>

<section class="py-20 bg-white">
  <div class="container mx-auto px-4">
    <div class="max-w-4xl mx-auto">
      <h2 class="text-3xl md:text-4xl font-heading font-bold text-center text-primary mb-8">
        About Us
      </h2>
      <p class="text-lg text-text/80 text-center mb-12">
        We're a team of dedicated IT professionals passionate about helping freelancers and small businesses
        thrive in the digital age. With years of experience in Microsoft 365 migrations and support,
        we understand the unique challenges faced by small teams and provide tailored solutions to meet
        your specific needs.
      </p>
      
      <div class="grid md:grid-cols-3 gap-8 mt-16">
        {#each values as value}
          <div class="text-center">
            <div class="text-4xl mb-4">{value.icon}</div>
            <h3 class="text-xl font-heading font-semibold text-primary mb-3">
              {value.title}
            </h3>
            <p class="text-text/80">
              {value.description}
            </p>
          </div>
        {/each}
      </div>
    </div>
  </div>
</section> 