@extends('layouts.app')

@section('title', 'Welcome to BloodFinder')

@section('content')
<style>
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
  }
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
  }
  @keyframes scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes slide-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-float { animation: float 3s ease-in-out infinite; }
  .animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }
  .animate-scale-in { animation: scale-in 0.6s ease-out; }
  .animate-slide-up { animation: slide-up 0.6s ease-out; }
  html { scroll-behavior: smooth; }
</style>

<div class="min-h-screen">
  <!-- Hero Section - iOS Style -->
  <section class="relative overflow-hidden" style="background: linear-gradient(135deg, #FF3B30 0%, #FF2D55 50%, #FF6B6B 100%); min-height: 90vh; display: flex; align-items: center;">
    <!-- Animated Background Pattern -->
    <div class="absolute inset-0 opacity-10">
      <div class="absolute top-20 left-10 w-72 h-72 bg-white rounded-full mix-blend-multiply filter blur-3xl animate-pulse-slow"></div>
      <div class="absolute bottom-20 right-10 w-96 h-96 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div>
    </div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 py-20">
      <div class="grid lg:grid-cols-2 gap-12 items-center">
        <!-- Left Content -->
        <div class="text-center lg:text-left animate-scale-in">
          <!-- Badge -->
          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-8" style="background: rgba(255,255,255,0.25); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.3);">
            <span class="text-2xl">🩸</span>
            <span class="text-white text-sm font-semibold tracking-wide">Save Lives Together</span>
          </div>
          
          <!-- Main Heading -->
          <h1 class="text-6xl lg:text-7xl xl:text-8xl font-black mb-6 text-white" style="letter-spacing: -0.04em; line-height: 0.95;">
            Every<br>
            <span style="background: linear-gradient(135deg, #FFF 0%, rgba(255,255,255,0.7) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Drop</span><br>
            Counts
          </h1>
          
          <!-- Subtitle -->
          <p class="text-xl lg:text-2xl text-white mb-10 leading-relaxed" style="opacity: 0.95; font-weight: 500;">
            Connect with verified blood donors instantly.<br class="hidden sm:block">
            Join our community of lifesavers today.
          </p>
          
          <!-- CTA Buttons -->
          <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
            <a href="{{ route('register') }}" class="ios-button group px-10 py-5 text-lg font-bold rounded-2xl transition-all duration-300" style="background: white; color: #FF3B30; box-shadow: 0 20px 40px rgba(0,0,0,0.3); border: none;">
              <svg class="w-6 h-6 inline mr-2 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
              </svg>
              Become a Donor
            </a>
            <a href="{{ route('search.index') }}" class="ios-button group px-10 py-5 text-lg font-bold rounded-2xl transition-all duration-300" style="background: rgba(255,255,255,0.15); color: white; border: 2px solid rgba(255,255,255,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);">
              <svg class="w-6 h-6 inline mr-2 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
              </svg>
              Find Donors Now
            </a>
          </div>
        </div>
        
        <!-- Right Illustration -->
        <div class="hidden lg:flex items-center justify-center" style="animation: scale-in 0.8s ease-out 0.2s both;">
          <div class="relative w-full h-[500px] flex items-center justify-center">
            <!-- Outer Ring -->
            <div class="absolute w-96 h-96 rounded-full animate-pulse-slow" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(30px);"></div>
            <!-- Middle Ring -->
            <div class="absolute w-80 h-80 rounded-full animate-pulse-slow" style="background: rgba(255,255,255,0.15); backdrop-filter: blur(20px); animation-delay: 0.5s;"></div>
            <!-- Inner Ring -->
            <div class="absolute w-64 h-64 rounded-full animate-pulse-slow" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); animation-delay: 1s;"></div>
            <!-- Heart Icon -->
            <div class="relative z-10 animate-float">
              <svg class="w-40 h-40 text-white drop-shadow-2xl" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Stats Section - iOS Cards -->
  <section class="py-12 sm:py-16 lg:py-20" style="background: #F2F2F7;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
        <div class="ios-card p-6 sm:p-8 text-center group hover:scale-105 transition-all duration-300" style="animation: slide-up 0.6s ease-out;">
          <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-3 sm:mb-4 rounded-2xl flex items-center justify-center" style="background: linear-gradient(135deg, #FF3B30, #FF6B6B);">
            <svg class="w-6 h-6 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
            </svg>
          </div>
          <div class="text-4xl sm:text-5xl font-black mb-2" style="color: #FF3B30; letter-spacing: -0.04em;">1000+</div>
          <div class="text-xs sm:text-sm font-semibold uppercase tracking-wider" style="color: #8E8E93;">Active Donors</div>
        </div>
        
        <div class="ios-card p-6 sm:p-8 text-center group hover:scale-105 transition-all duration-300" style="animation: slide-up 0.6s ease-out 0.1s both;">
          <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-3 sm:mb-4 rounded-2xl flex items-center justify-center" style="background: linear-gradient(135deg, #34C759, #5DD97C);">
            <svg class="w-6 h-6 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
            </svg>
          </div>
          <div class="text-4xl sm:text-5xl font-black mb-2" style="color: #34C759; letter-spacing: -0.04em;">500+</div>
          <div class="text-xs sm:text-sm font-semibold uppercase tracking-wider" style="color: #8E8E93;">Lives Saved</div>
        </div>
        
        <div class="ios-card p-6 sm:p-8 text-center group hover:scale-105 transition-all duration-300" style="animation: slide-up 0.6s ease-out 0.2s both;">
          <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-3 sm:mb-4 rounded-2xl flex items-center justify-center" style="background: linear-gradient(135deg, #007AFF, #5AC8FA);">
            <svg class="w-6 h-6 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
            </svg>
          </div>
          <div class="text-4xl sm:text-5xl font-black mb-2" style="color: #007AFF; letter-spacing: -0.04em;">24/7</div>
          <div class="text-xs sm:text-sm font-semibold uppercase tracking-wider" style="color: #8E8E93;">Availability</div>
        </div>
        
        <div class="ios-card p-6 sm:p-8 text-center group hover:scale-105 transition-all duration-300" style="animation: slide-up 0.6s ease-out 0.3s both;">
          <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-3 sm:mb-4 rounded-2xl flex items-center justify-center" style="background: linear-gradient(135deg, #FF9500, #FFCC00);">
            <svg class="w-6 h-6 sm:w-8 sm:h-8 text-white" 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"/>
            </svg>
          </div>
          <div class="text-4xl sm:text-5xl font-black mb-2" style="color: #FF9500; letter-spacing: -0.04em;">64</div>
          <div class="text-xs sm:text-sm font-semibold uppercase tracking-wider" style="color: #8E8E93;">Districts</div>
        </div>
      </div>
    </div>
  </section>

  <!-- Features Section -->
  <section class="py-24" style="background: #F2F2F7;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Section Header -->
      <div class="text-center mb-20 animate-slide-up">
        <h2 class="text-5xl lg:text-6xl font-black mb-6" style="color: #1C1C1E; letter-spacing: -0.04em;">
          Why Choose<br class="sm:hidden"> BloodFinder?
        </h2>
        <p class="text-xl lg:text-2xl" style="color: #8E8E93; font-weight: 500;">
          Fast, reliable, and easy blood donor search
        </p>
      </div>
      
      <!-- Features Grid -->
      <div class="grid md:grid-cols-3 gap-8">
        <!-- Feature 1 -->
        <div class="ios-card p-10 group hover:scale-105 transition-all duration-300" style="animation: slide-up 0.6s ease-out;">
          <div class="w-20 h-20 mb-6 rounded-3xl flex items-center justify-center" style="background: linear-gradient(135deg, #FF3B30, #FF6B6B);">
            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
          </div>
          <h3 class="text-2xl font-bold mb-4" style="color: #1C1C1E;">Quick Search</h3>
          <p class="text-lg leading-relaxed" style="color: #8E8E93;">
            Find blood donors in your city within seconds. Filter by blood group and location instantly.
          </p>
        </div>

        <!-- Feature 2 -->
        <div class="ios-card p-10 group hover:scale-105 transition-all duration-300" style="animation: slide-up 0.6s ease-out 0.1s both;">
          <div class="w-20 h-20 mb-6 rounded-3xl flex items-center justify-center" style="background: linear-gradient(135deg, #34C759, #5DD97C);">
            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
            </svg>
          </div>
          <h3 class="text-2xl font-bold mb-4" style="color: #1C1C1E;">Verified Donors</h3>
          <p class="text-lg leading-relaxed" style="color: #8E8E93;">
            All donors are verified with complete information and donation history for your safety.
          </p>
        </div>

        <!-- Feature 3 -->
        <div class="ios-card p-10 group hover:scale-105 transition-all duration-300" style="animation: slide-up 0.6s ease-out 0.2s both;">
          <div class="w-20 h-20 mb-6 rounded-3xl flex items-center justify-center" style="background: linear-gradient(135deg, #007AFF, #5AC8FA);">
            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
          </div>
          <h3 class="text-2xl font-bold mb-4" style="color: #1C1C1E;">24/7 Access</h3>
          <p class="text-lg leading-relaxed" style="color: #8E8E93;">
            Access our platform anytime, anywhere. Emergency? We're here round the clock.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- How It Works Section -->
  <section class="py-24" style="background: linear-gradient(180deg, #F2F2F7 0%, #FFFFFF 100%);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Section Header -->
      <div class="text-center mb-20 animate-slide-up">
        <h2 class="text-5xl lg:text-6xl font-black mb-6" style="color: #1C1C1E; letter-spacing: -0.04em;">
          How It Works
        </h2>
        <p class="text-xl lg:text-2xl" style="color: #8E8E93; font-weight: 500;">
          Three simple steps to save a life
        </p>
      </div>

      <!-- Steps Grid -->
      <div class="grid md:grid-cols-3 gap-12">
        <!-- Step 1 -->
        <div class="text-center" style="animation: slide-up 0.6s ease-out;">
          <div class="relative inline-block mb-8">
            <div class="w-28 h-28 rounded-3xl flex items-center justify-center mx-auto text-white text-4xl font-black shadow-2xl" style="background: linear-gradient(135deg, #FF3B30, #FF6B6B);">
              1
            </div>
            <div class="absolute -top-2 -right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-lg">
              <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
            </div>
          </div>
          <h3 class="text-2xl font-bold mb-4" style="color: #1C1C1E;">Register</h3>
          <p class="text-lg leading-relaxed" style="color: #8E8E93;">
            Create your free account with basic information and blood group details in minutes.
          </p>
        </div>

        <!-- Step 2 -->
        <div class="text-center" style="animation: slide-up 0.6s ease-out 0.1s both;">
          <div class="relative inline-block mb-8">
            <div class="w-28 h-28 rounded-3xl flex items-center justify-center mx-auto text-white text-4xl font-black shadow-2xl" style="background: linear-gradient(135deg, #007AFF, #5AC8FA);">
              2
            </div>
            <div class="absolute -top-2 -right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-lg">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" style="color: #007AFF;">
                <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/>
              </svg>
            </div>
          </div>
          <h3 class="text-2xl font-bold mb-4" style="color: #1C1C1E;">Search</h3>
          <p class="text-lg leading-relaxed" style="color: #8E8E93;">
            Search for donors by blood group and location when you need blood urgently.
          </p>
        </div>

        <!-- Step 3 -->
        <div class="text-center" style="animation: slide-up 0.6s ease-out 0.2s both;">
          <div class="relative inline-block mb-8">
            <div class="w-28 h-28 rounded-3xl flex items-center justify-center mx-auto text-white text-4xl font-black shadow-2xl" style="background: linear-gradient(135deg, #34C759, #5DD97C);">
              3
            </div>
            <div class="absolute -top-2 -right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-lg">
              <svg class="w-5 h-5 text-pink-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
              </svg>
            </div>
          </div>
          <h3 class="text-2xl font-bold mb-4" style="color: #1C1C1E;">Connect</h3>
          <p class="text-lg leading-relaxed" style="color: #8E8E93;">
            Contact donors directly and save lives. It's that simple and rewarding!
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="py-32 relative overflow-hidden" style="background: linear-gradient(135deg, #FF3B30 0%, #FF2D55 50%, #FF6B6B 100%);">
    <!-- Animated Background -->
    <div class="absolute inset-0 opacity-20">
      <div class="absolute top-10 left-10 w-72 h-72 bg-white rounded-full mix-blend-overlay filter blur-3xl animate-pulse-slow"></div>
      <div class="absolute bottom-10 right-10 w-96 h-96 bg-pink-300 rounded-full mix-blend-overlay filter blur-3xl animate-pulse-slow" style="animation-delay: 1.5s;"></div>
    </div>
    
    <div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8 relative z-10">
      <div class="animate-scale-in">
        <div class="inline-block p-3 rounded-full mb-8" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(20px);">
          <svg class="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
          </svg>
        </div>
        <h2 class="text-5xl lg:text-6xl font-black mb-6 text-white" style="letter-spacing: -0.04em;">
          Ready to Make<br>a Difference?
        </h2>
        <p class="text-xl lg:text-2xl mb-12 text-white opacity-95 font-medium">
          Join thousands of donors saving lives every day
        </p>
        <a href="{{ route('register') }}" class="ios-button inline-block px-12 py-6 text-xl font-bold rounded-2xl transition-all duration-300 shadow-2xl hover:scale-105" style="background: white; color: #FF3B30;">
          <svg class="w-6 h-6 inline mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"/>
          </svg>
          Register as a Donor Now
        </a>
      </div>
    </div>
  </section>

  <!-- Announcements Section -->
  @if($announcements->count() > 0)
  <section class="py-24" style="background: linear-gradient(180deg, #FFF9F0 0%, #FFE8CC 100%);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Section Header -->
      <div class="flex items-center justify-center gap-4 mb-16 animate-slide-up">
        <div class="w-16 h-16 rounded-2xl flex items-center justify-center" style="background: linear-gradient(135deg, #FF9500, #FFCC00);">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"/>
          </svg>
        </div>
        <h2 class="text-4xl lg:text-5xl font-black" style="color: #1C1C1E; letter-spacing: -0.04em;">Latest Announcements</h2>
      </div>
      
      <!-- Announcements Grid -->
      <div class="grid md:grid-cols-3 gap-6 lg:gap-8">
        @foreach($announcements as $announcement)
          <div class="ios-card p-8 hover:scale-105 transition-all duration-300" style="animation: slide-up 0.6s ease-out; border-left: 4px solid #FF9500;">
            <div class="flex items-start gap-3 mb-4">
              <div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #FF9500, #FFCC00);">
                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                </svg>
              </div>
              <div class="flex-1">
                <h3 class="text-xl font-bold mb-2" style="color: #1C1C1E;">{{ $announcement->title }}</h3>
              </div>
            </div>
            <p class="text-base leading-relaxed mb-4" style="color: #8E8E93;">
              {{ Str::limit($announcement->content, 120) }}
            </p>
            <div class="flex items-center gap-2 text-sm font-medium" style="color: #FF9500;">
              <svg class="w-4 h-4" 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"/>
              </svg>
              {{ $announcement->created_at->format('M d, Y') }}
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif
</div>

@endsection