<script lang="ts">
 import { onMount } from 'svelte';
import { animate, stagger, inView } from 'motion';
	import { goto } from '$app/navigation';

onMount(() => {
  // Hero section animations
  const heroTextAnimation = {
    initial: { opacity: 0, y: 50 },
    animate: { 
      opacity: 1, 
      y: 0,
      duration: 0.8,
      delay: 0.2,
      easing: [0.17, 0.55, 0.55, 1] // Smooth easing curve instead of spring
    }
  };

  const heroImageAnimation = {
    initial: { opacity: 0, scale: 0.9 },
    animate: {
      opacity: 1,
      scale: 1,
      duration: 1.2,
      easing: 'ease-out'
    }
  };

  // Initialize hero animations
  animate('.hero-text', heroTextAnimation.initial);
  animate('.hero-text', heroTextAnimation.animate);
  animate('.hero-image', heroImageAnimation.initial);
  animate('.hero-image', heroImageAnimation.animate);

  // Feature cards animation
  const featureCardAnimation = {
    initial: { opacity: 0, y: 30 },
    animate: {
      opacity: 1,
      y: 0,
      duration: 0.6,
      easing: 'ease-out'
    }
  };

  // Setup intersection observer for feature grid
  inView('.feature-grid', (info: any) => {
    const cards = info.target.querySelectorAll('.feature-card');
    
    cards.forEach((card: any, index: any) => {
      animate(card,
        featureCardAnimation.initial,
        {
          ...featureCardAnimation.animate,
          delay: index * 0.15 // Manual stagger implementation
        }
      );
    });
  }, {
    amount: 0.2 // Trigger when 20% of element is visible
  });

  // CTA section animation
  const ctaAnimation = {
    initial: { opacity: 0, scale: 0.95 },
    animate: {
      opacity: 1,
      scale: 1,
      duration: 0.8,
      easing: 'ease-out'
    }
  };

  inView('.cta-section', (info: any) => {
    animate(info.target, ctaAnimation.initial);
    animate(info.target, ctaAnimation.animate);
  }, {
    amount: 0.3 // Trigger when 30% of element is visible
  });
});
</script>

<svelte:head>
  <title>Boundless | Travel with Soul</title>
  <meta name="description" content="Where strangers become allies and journeys create magic. Travel Together, Stay Boundless." />
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
</svelte:head>

<div class="font-[Space+Grotesk] bg-base-100 overflow-hidden">
  <!-- Navigation -->
  <nav class="navbar bg-base-100/90 backdrop-blur-sm sticky top-0 z-50 shadow-sm px-4 md:px-8">
    <div class="flex-1">
      <a class="btn btn-ghost text-xl gap-2 hover:-translate-y-1 transition-transform">
        <span class="text-3xl">🌍</span>
        <span class="font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
          Boundless
        </span>
      </a>
    </div>
    <div class="flex-none">
      <ul class="menu menu-horizontal px-1 gap-4 hidden md:flex">
        <li>
          <a class="font-medium hover:text-primary transition-colors">
            How it works
          </a>
        </li>
        <li>
          <a class="font-medium hover:text-primary transition-colors">
            Stories
          </a>
        </li>
        <li>
          <button on:click={() => {goto('/onboarding')}} class="btn btn-primary btn-sm hover:scale-105 transition-transform">
            Join Beta
          </button>
        </li>
      </ul>
      <div class="dropdown dropdown-end md:hidden">
        <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
        </div>
        <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
          <li><a>How it works</a></li>
          <li><a>Stories</a></li>
          <li><button on:click={() => {goto('/onboarding')}}>Join Beta</button></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <section class="hero min-h-[90vh] relative">
    <div class="absolute inset-0 bg-gradient-to-br from-primary/10 to-secondary/10 -skew-y-3 scale-125 opacity-50"></div>
    <div class="hero-content flex-col lg:flex-row-reverse gap-8 lg:gap-16 relative z-10 px-4 md:px-8">
      <div class="hero-image">
        <div class="mask-parallelogram relative group">
          <img 
            src="src\lib\assets\h.png" 
            class="w-full max-w-2xl rounded-2xl shadow-2xl transform hover:rotate-1 transition-[transform] duration-300"
            alt="Happy travelers"
          />
          <div class="absolute inset-0 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-2xl"></div>
        </div>
      </div>
      <div class="hero-text text-center lg:text-left">
        <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">
          Find Your 
          <span class="relative inline-block">
            <span class="bg-gradient-to-r from-primary to-accent text-transparent bg-clip-text">
              Wander Tribe
            </span>
            <div class="absolute -bottom-2 left-0 w-full h-2 bg-primary/20 -skew-x-12"></div>
          </span>
        </h1>
        <p class="text-lg md:text-xl mb-8 opacity-90 leading-relaxed">
          Where strangers become allies and every journey leaves the world kinder.
        </p>
        <div class="flex flex-col md:flex-row gap-4 justify-center lg:justify-start">
          <button on:click={() => {goto('/onboarding')}} class="btn btn-primary px-8 gap-2 hover:scale-[1.02] transition-transform">
            <span class="text-xl">✨</span>
            Start Your Journey
          </button>
          <button class="btn btn-outline btn-secondary px-8 group">
            How It Works
            <span class="group-hover:translate-x-1 transition-transform">→</span>
          </button>
        </div>
      </div>
    </div>
  </section>

  <!-- Features Grid -->
  <div class="container mx-auto px-4 py-16 md:py-24">
    <div class="feature-grid grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
      <div class="feature-card card bg-base-100 p-8 border border-base-300/20 hover:border-primary/20 transition-all transform hover:-translate-y-2">
        <div class="text-6xl mb-6 animate-pulse">🗺️</div>
        <h3 class="text-2xl font-bold mb-4">Community Routes</h3>
        <p class="text-gray-500">Follow trails blazed by fellow wanderers</p>
      </div>
      
      <div class="feature-card card bg-base-100 p-8 border border-base-300/20 hover:border-primary/20 transition-all transform hover:-translate-y-2">
        <div class="text-6xl mb-6 animate-pulse">🔮</div>
        <h3 class="text-2xl font-bold mb-4">Magic Detours</h3>
        <p class="text-gray-500">Algorithm-curated serendipity</p>
      </div>
      
      <div class="feature-card card bg-base-100 p-8 border border-base-300/20 hover:border-primary/20 transition-all transform hover:-translate-y-2">
        <div class="text-6xl mb-6 animate-pulse">❤️</div>
        <h3 class="text-2xl font-bold mb-4">Impact Legacy</h3>
        <p class="text-gray-500">Travel that gives back</p>
      </div>
    </div>
  </div>

  <!-- CTA Section -->
  <div class="cta-section bg-gradient-to-br from-primary to-secondary text-primary-content py-16 md:py-24">
    <div class="text-center max-w-2xl mx-auto px-4">
      <h2 class="text-3xl md:text-4xl font-bold mb-8 leading-tight">
        Ready to Travel<br>
        <span class="text-4xl md:text-5xl font-black">Like You Mean It?</span>
      </h2>
      <button on:click={() => {goto('/onboarding')}} class="btn btn-accent btn-lg gap-2 transform hover:scale-105 transition-transform">
        🚀 Claim Beta Spot
      </button>
    </div>
  </div>

  <!-- Footer -->
  <footer class="footer items-center p-8 bg-neutral text-neutral-content">
    <!-- ... (keep previous footer content) ... -->
  </footer>
</div>

<style global>
  :root {
    --font-family: 'Space Grotesk', system-ui;
  }

  body {
    font-family: var(--font-family);
  }

  .mask-parallelogram {
    mask-image: linear-gradient(to bottom right, transparent 2%, black 15%);
    -webkit-mask-image: linear-gradient(to bottom right, transparent 2%, black 15%);
  }

  @keyframes gradient-pulse {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .animate-gradient-pulse {
    background-size: 200% auto;
    animation: gradient-pulse 8s ease infinite;
  }
</style>