<script lang="ts">
  import { onMount } from 'svelte';
  // import '@lottiefiles/lottie-player'; // No longer needed

  let isVisible = false;

  onMount(() => {
    isVisible = true;
  });
</script>

<section class="relative min-h-[80vh] bg-surface flex items-center">
  <div class="container mx-auto px-4 py-16 md:py-24">
    <div class="grid md:grid-cols-2 gap-12 items-center">
      <div class="space-y-6" class:fade-in={isVisible}>
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-heading font-bold text-primary leading-tight">
          Empowering Freelancers & Small Teams with Expert Microsoft 365 Support
        </h1>
        <p class="text-xl text-text/80">
          Seamless migrations, reliable support, and productivity-focused solutions.
        </p>
        <button class="bg-primary hover:bg-link-hover text-white px-8 py-4 rounded-lg text-lg font-semibold transition-colors duration-200">
          Schedule a Free Consultation
        </button>
      </div>
      <div class="relative h-[400px] md:h-[500px] flex items-center justify-center" class:fade-in={isVisible}>
        <img 
          src="/Images/67008E55-91DC-49D3-B9B4-BE1383D713A5.png" 
          alt="Cloud support illustration" 
          class="max-h-full max-w-full object-contain"
        />
      </div>
    </div>
  </div>
</section>

<style>
  .fade-in {
    animation: fadeIn 1s ease-out forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style> 