---
import BaseLayout from '../layouts/BaseLayout.astro';
import HeroCarousel from '../components/HeroCarousel.jsx';
import HomeGallery from '../components/HomeGallery.astro';
---

<BaseLayout>
  <HeroCarousel client:load />

  <!-- About Section -->
  <section class="section about-section" data-animate-on-scroll="fade-in">
    <div class="container">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
        <div class="relative">
          <div class="absolute inset-0 bg-gradient-to-br from-kente-gold-500 to-ankara-red-500 rounded-2xl transform rotate-2"></div>
          <div class="relative bg-white p-2 rounded-2xl shadow-xl transform -rotate-1">
            <img src="/images/whoAreWe.webp" alt="About Omoluabi Association" class="w-full h-80 object-cover rounded-xl" />
            <div class="absolute -top-4 -right-4 bg-nigerian-green-500 text-white px-4 py-2 rounded-full font-bold shadow-lg animate-bounce-gentle">Est. 2018</div>
          </div>
        </div>

        <div>
          <h2 class="font-headline text-4xl font-bold text-nigerian-green-700 mb-4 flex items-center gap-3">
            <div class="w-2 h-10 bg-gradient-to-b from-nigerian-green-500 to-kente-gold-500 rounded-full"></div>
            About Us
          </h2>
          
          <h3 class="text-2xl font-semibold text-kente-gold-600 mb-4 flex items-center gap-2">
            <span class="text-3xl">🌟</span>
            WHO ARE WE?
          </h3>
          
          <div class="text-gray-700 leading-relaxed text-lg mb-6">
            <p class="mb-4">
              The <strong class="text-nigerian-green-600">Omoluabi Association</strong> in the Royal Kingdom of The Netherlands (OAN) is a pan-Yoruba Association with well-bred, selective, like-minded individuals of enviable character as our members.
            </p>
            <p class="mb-4">
              Our association extends beyond Yorubas or Nigerians only – we welcome culturally motivated Netherlanders who share our values and vision for community building.
            </p>
            <p>
              Our association is a non profit, non religious, non partisan, non ethnic and socio cultural organization that focuses on showcasing the Yoruba cultural heritages, norms, values and traditions to the western world, most especially in Holland.
            </p>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
            <div class="bg-white p-4 rounded-lg shadow-md text-center">
              <div class="text-2xl font-bold text-nigerian-green-600">2018</div>
              <div class="text-sm text-gray-600">Established</div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md text-center">
              <div class="text-2xl font-bold text-kente-gold-600">500+</div>
              <div class="text-sm text-gray-600">Members</div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md text-center">
              <div class="text-2xl font-bold text-ankara-red-600">50+</div>
              <div class="text-sm text-gray-600">Events</div>
            </div>
          </div>

          <div class="flex flex-wrap gap-2">
            <span class="badge badge-lg bg-nigerian-green-100 text-nigerian-green-700">Non-Profit</span>
            <span class="badge badge-lg bg-kente-gold-100 text-kente-gold-700">Cultural Heritage</span>
            <span class="badge badge-lg bg-ankara-red-100 text-ankara-red-700">Community Focus</span>
            <span class="badge badge-lg bg-adire-blue-100 text-adire-blue-700">Inclusive</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Events Section -->
  <section class="section bg-gray-50" data-animate-on-scroll="fade-in">
    <div class="container">
      <div class="text-center mb-12">
        <h2 class="font-headline text-4xl font-bold text-nigerian-green-700 mb-4">
          Upcoming <span class="text-kente-gold-700">Events</span>
        </h2>
        <p class="text-lg text-gray-600 max-w-2xl mx-auto">
          Join us in celebrating our rich cultural heritage and building stronger community bonds.
        </p>
        <div class="w-24 h-1 bg-gradient-to-r from-nigerian-green-500 to-kente-gold-500 mx-auto rounded-full mt-6"></div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Example Event Card 1 -->
        <article class="card bg-white shadow-xl rounded-xl overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
          <figure class="relative h-56 w-full overflow-hidden">
            <img src="/images/hero1.jpg" alt="Cultural Night" class="w-full h-full object-cover" />
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
            <span class="absolute bottom-3 left-3 badge badge-secondary bg-kente-gold-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Cultural</span>
            <span class="absolute top-3 right-3 bg-white/90 text-nigerian-green-700 px-3 py-1 rounded-full text-sm font-semibold">Dec 15, 2024</span>
          </figure>
          <div class="card-body p-6">
            <h3 class="card-title text-xl font-bold text-nigerian-green-700 mb-2">Omoluabi Cultural Night</h3>
            <p class="text-gray-700 leading-relaxed text-sm mb-4">
              Experience the richness of Yoruba culture with music, dance, and traditional cuisine.
            </p>
            <div class="flex items-center justify-between text-sm text-gray-500">
              <div class="flex items-center gap-1">
                <svg class="w-4 h-4 text-nigerian-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
                <span>Amsterdam</span>
              </div>
              <a href="/events" class="inline-flex items-center text-kente-gold-600 hover:text-kente-gold-800 font-semibold transition-colors duration-200">
                Details
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
              </a>
            </div>
          </div>
        </article>

        <!-- Example Event Card 2 -->
        <article class="card bg-white shadow-xl rounded-xl overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
          <figure class="relative h-56 w-full overflow-hidden">
            <img src="/images/hero2.jpg" alt="Women Ambassador" class="w-full h-full object-cover" />
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
            <span class="absolute bottom-3 left-3 badge badge-secondary bg-adire-blue-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Community</span>
            <span class="absolute top-3 right-3 bg-white/90 text-nigerian-green-700 px-3 py-1 rounded-full text-sm font-semibold">Jan 20, 2025</span>
          </figure>
          <div class="card-body p-6">
            <h3 class="card-title text-xl font-bold text-nigerian-green-700 mb-2">Women Ambassador Program</h3>
            <p class="text-gray-700 leading-relaxed text-sm mb-4">
              Empowering Nigerian women in the Netherlands through leadership and community building.
            </p>
            <div class="flex items-center justify-between text-sm text-gray-500">
              <div class="flex items-center gap-1">
                <svg class="w-4 h-4 text-nigerian-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
                <span>Rotterdam</span>
              </div>
              <a href="/events" class="inline-flex items-center text-kente-gold-600 hover:text-kente-gold-800 font-semibold transition-colors duration-200">
                Details
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
              </a>
            </div>
          </div>
        </article>

        <!-- Example Event Card 3 -->
        <article class="card bg-white shadow-xl rounded-xl overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
          <figure class="relative h-56 w-full overflow-hidden">
            <img src="/images/hero3.jpg" alt="COVID Relief" class="w-full h-full object-cover" />
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
            <span class="absolute bottom-3 left-3 badge badge-secondary bg-ankara-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Charity</span>
            <span class="absolute top-3 right-3 bg-white/90 text-nigerian-green-700 px-3 py-1 rounded-full text-sm font-semibold">Feb 10, 2025</span>
          </figure>
          <div class="card-body p-6">
            <h3 class="card-title text-xl font-bold text-nigerian-green-700 mb-2">COVID-19 Relief Initiative</h3>
            <p class="text-gray-700 leading-relaxed text-sm mb-4">
              Providing support and resources to families affected by the pandemic in Nigeria.
            </p>
            <div class="flex items-center justify-between text-sm text-gray-500">
              <div class="flex items-center gap-1">
                <svg class="w-4 h-4 text-nigerian-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
                <span>Online Event</span>
              </div>
              <a href="/events" class="inline-flex items-center text-kente-gold-600 hover:text-kente-gold-800 font-semibold transition-colors duration-200">
                Details
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
              </a>
            </div>
          </div>
        </article>
      </div>

      <div class="text-center mt-12">
        <a href="/events" class="inline-flex items-center px-8 py-3 bg-gradient-to-r from-nigerian-green-500 to-kente-gold-500 text-white rounded-lg shadow-lg hover:shadow-xl hover:from-nigerian-green-600 hover:to-kente-gold-600 transition-all duration-200 font-medium">
          View All Events
          <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
          </svg>
        </a>
      </div>
    </div>
  </section>

  <!-- Donation Section -->
  <section class="section brand-surface text-white text-center relative overflow-hidden" data-animate-on-scroll="fade-in">
    <div class="absolute top-10 left-10 w-32 h-32 bg-white/10 rounded-full animate-float"></div>
    <div class="absolute bottom-10 right-10 w-24 h-24 bg-white/10 rounded-full animate-float animation-delay-1s"></div>
    
    <div class="container relative z-10">
      <div class="flex items-center justify-center gap-3 mb-4">
        <span class="text-5xl">❤️</span>
        <h3 class="text-2xl font-bold">Support Our Mission</h3>
        <div class="flex gap-1 text-kente-gold-300">
          <span>★</span><span>★</span><span>★</span>
        </div>
      </div>
      
      <h2 class="font-headline text-5xl font-bold mb-6 leading-tight">
        Support Our <span class="text-kente-gold-200">Community Programs</span>
      </h2>
      
      <p class="text-lg opacity-90 leading-relaxed max-w-3xl mx-auto mb-8">
        Your generous contribution helps us preserve Nigerian culture, support community members, and create lasting impact in the Netherlands.
      </p>
      
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-10 max-w-md mx-auto">
        <div class="bg-white/20 backdrop-blur-sm p-4 rounded-lg text-center">
          <div class="text-3xl font-bold">€50K+</div>
          <div class="text-sm opacity-90">Raised This Year</div>
        </div>
        <div class="bg-white/20 backdrop-blur-sm p-4 rounded-lg text-center">
          <div class="text-3xl font-bold">200+</div>
          <div class="text-sm opacity-90">Families Helped</div>
        </div>
      </div>
      
      <a href="/donate" class="btn btn-lg bg-white text-ankara-red-600 hover:bg-gray-100 shadow-xl hover:shadow-2xl">
        ❤️ Donate now
      </a>
    </div>
  </section>

  <!-- Gallery Section -->
  <HomeGallery />
</BaseLayout>