<script lang="ts">
  import { onMount } from 'svelte';

  let visible = $state(false);

  onMount(() => {
    setTimeout(() => {
      visible = true;
    }, 100);
  });
</script>

<section class="relative min-h-[80vh] flex items-center justify-center overflow-hidden">
  <!-- Background gradient -->
  <div class="absolute inset-0 bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50"></div>

  <!-- Subtle grid pattern -->
  <div
    class="absolute inset-0 opacity-[0.03]"
    style:background-image="url('data:image/svg+xml,%3Csvg width=%2760%27 height=%2760%27 viewBox=%270 0 60 60%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg fill=%27%23000%27%3E%3Cpath d=%27M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')"
  ></div>

  <!-- Floating shapes -->
  <div class="absolute top-20 left-10 w-72 h-72 bg-primary-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
  <div class="absolute bottom-20 right-10 w-72 h-72 bg-indigo-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse" style="animation-delay: 1s;"></div>

  <div
    class="relative z-10 text-center px-6 max-w-4xl mx-auto transition-all duration-1000 {visible
      ? 'opacity-100 translate-y-0'
      : 'opacity-0 translate-y-8'}"
  >
    <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
      <span class="text-gray-900">Build with </span>
      <span class="gradient-text">AI</span>
    </h1>

    <p class="text-xl md:text-2xl text-gray-600 font-light max-w-2xl mx-auto mb-10 leading-relaxed">
      Data science guides, interactive tools, and insights to accelerate your journey.
    </p>

    <div class="flex flex-wrap justify-center gap-4">
      <a
        href="/guides/"
        class="px-8 py-3 bg-primary-600 text-white rounded-full font-medium hover:bg-primary-700 transition-all shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30"
      >
        Explore Guides
      </a>
      <a
        href="/tools/"
        class="px-8 py-3 bg-white text-gray-700 rounded-full font-medium hover:bg-gray-50 transition-all border border-gray-200 shadow-sm"
      >
        Try Tools
      </a>
    </div>
  </div>
</section>
