@extends('layouts.app')

@section('title', 'Home - Empowering African Athletes')

@section('meta')
<meta name="description" content="ATC Global Sports Tours - Professional sports event management, international tours, and talent showcase programs for African athletes.">
<meta name="keywords" content="sports tours, african athletes, tournaments, sports events, talent showcase">
@endsection

@section('content')

{{-- Hero Section --}}
<section class="hero-section">
    <div class="hero-overlay"></div>
    <div class="container position-relative">
        <div class="row align-items-center min-vh-100 py-5">
            <div class="col-lg-6">
                <div class="hero-badge mb-4">
                    <i class="fas fa-star"></i>
                    <span>Africa's Leading Sports Tour Company</span>
                </div>
                
                <h1 class="hero-title mb-4">
                    Empowering <span class="text-gradient">African Athletes</span><br>
                    to Reach Global Heights
                </h1>
                
                <p class="hero-subtitle mb-5">
                    Professional sports event management, international tours, and talent showcase programs connecting African athletes with global opportunities.
                </p>
                
                <div class="hero-actions mb-5">
                    <a href="{{ route('events.index') }}" class="btn btn-primary btn-lg me-3">
                        <span>Explore Events</span>
                        <i class="fas fa-arrow-right ms-2"></i>
                    </a>
                    <a href="#about" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-play me-2"></i>
                        <span>Watch Video</span>
                    </a>
                </div>
                
                {{-- Stats --}}
                <div class="row hero-stats">
                    <div class="col-4">
                        <div class="stat-item">
                            <div class="stat-number">500+</div>
                            <div class="stat-label">Athletes Trained</div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="stat-item">
                            <div class="stat-number">50+</div>
                            <div class="stat-label">Events Hosted</div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="stat-item">
                            <div class="stat-number">15+</div>
                            <div class="stat-label">Countries</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6 d-none d-lg-block">
                <div class="hero-visual">
                    <div class="hero-image-wrapper">
                        <i class="fas fa-trophy hero-icon"></i>
                        <div class="hero-text">
                            <p class="mb-3">Your Gateway to</p>
                            <h3 class="text-gradient">International Excellence</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Featured Events Section --}}
<section class="section-events bg-light">
    <div class="container py-5">
        <div class="section-header text-center mb-5">
            <h2 class="section-title">Upcoming <span class="text-gradient">Events</span></h2>
            <p class="section-subtitle">Join world-class tournaments, showcases, and training programs</p>
        </div>
        
        {{-- Event Tabs --}}
        <ul class="nav nav-pills justify-content-center mb-5" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#upcoming" type="button">
                    Upcoming
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#ongoing" type="button">
                    Ongoing
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#past" type="button">
                    Past
                </button>
            </li>
        </ul>
        
        {{-- Events Grid --}}
        <div class="tab-content">
            <div class="tab-pane fade show active" id="upcoming">
                <div class="row g-4">
                    @forelse($upcomingEvents as $event)
                    <div class="col-md-6 col-lg-4">
                        <div class="event-card">
                            @if($event->is_featured)
                            <div class="event-badge">
                                <i class="fas fa-star"></i> Featured
                            </div>
                            @endif
                            
                            <div class="event-image">
                                @if($event->featured_image)
                                <img src="{{ asset('storage/' . $event->featured_image) }}" alt="{{ $event->name }}">
                                @else
                                <div class="event-image-placeholder">
                                    <i class="fas fa-trophy"></i>
                                </div>
                                @endif
                            </div>
                            
                            <div class="event-body">
                                <span class="event-sport">{{ ucfirst($event->sport) }}</span>
                                
                                <h3 class="event-title">
                                    <a href="{{ route('events.show', $event->slug) }}">{{ $event->name }}</a>
                                </h3>
                                
                                <div class="event-meta">
                                    <div class="meta-item">
                                        <i class="far fa-calendar"></i>
                                        <span>{{ $event->start_date->format('M d-d, Y') }}</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-map-marker-alt"></i>
                                        <span>{{ $event->venue_city }}, {{ $event->venue_country }}</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-users"></i>
                                        <span>{{ $event->bookings_count }} registered</span>
                                    </div>
                                </div>
                                
                                <div class="event-footer">
                                    <div class="event-price">
                                        <small>Starting from</small>
                                        <strong>${{ $event->min_price }}</strong>
                                    </div>
                                    <a href="{{ route('events.show', $event->slug) }}" class="btn btn-primary btn-sm">
                                        Register <i class="fas fa-chevron-right ms-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12">
                        <div class="alert alert-info text-center">
                            <i class="fas fa-info-circle me-2"></i>
                            No upcoming events at this time. Check back soon!
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
        
        <div class="text-center mt-5">
            <a href="{{ route('events.index') }}" class="btn btn-outline-primary btn-lg">
                View All Events
            </a>
        </div>
    </div>
</section>

{{-- About Section --}}
<section id="about" class="section-about py-5">
    <div class="container py-5">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <div class="about-badge mb-3">
                    <span>About ATC Global Sports Tours</span>
                </div>
                
                <h2 class="section-title mb-4">
                    Building Bridges Between <span class="text-gradient">African Talent</span> and Global Opportunities
                </h2>
                
                <p class="lead mb-4">
                    ATC Global Sports Tours Ltd is dedicated to discovering, developing, and promoting African athletic talent on the world stage.
                </p>
                
                <div class="features-list mb-4">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-bullseye"></i>
                        </div>
                        <div class="feature-text">
                            <h5>Professional Event Management</h5>
                            <p>World-class organization and execution</p>
                        </div>
                    </div>
                    
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-globe"></i>
                        </div>
                        <div class="feature-text">
                            <h5>International Exposure</h5>
                            <p>Connect with scouts and opportunities worldwide</p>
                        </div>
                    </div>
                    
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-award"></i>
                        </div>
                        <div class="feature-text">
                            <h5>Talent Development</h5>
                            <p>Comprehensive training and skills programs</p>
                        </div>
                    </div>
                    
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="feature-text">
                            <h5>Safe & Secure</h5>
                            <p>Professionally managed events with your safety first</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="row g-3">
                    <div class="col-6">
                        <div class="value-card">
                            <h3>Mission</h3>
                            <p>Provide world-class sports development opportunities</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="value-card">
                            <h3>Vision</h3>
                            <p>Africa's premier sports talent development organization</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="value-card">
                            <h3>Values</h3>
                            <p>Excellence, Integrity, Opportunity, Development</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="value-card">
                            <h3>Impact</h3>
                            <p>Transforming lives through sports excellence</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Services Section --}}
<section class="section-services bg-light py-5">
    <div class="container py-5">
        <div class="section-header text-center mb-5">
            <h2 class="section-title">Our <span class="text-gradient">Services</span></h2>
            <p class="section-subtitle">Comprehensive sports development solutions for African athletes</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-trophy"></i>
                    </div>
                    <h4>Tournaments</h4>
                    <p>Professional multi-sport tournaments with international standards</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-globe"></i>
                    </div>
                    <h4>International Tours</h4>
                    <p>Exposure programs connecting athletes with global opportunities</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <h4>Training Camps</h4>
                    <p>Skills development and intensive training programs</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-award"></i>
                    </div>
                    <h4>Talent Showcases</h4>
                    <p>Platform for athletes to display skills to scouts and coaches</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- CTA Section --}}
<section class="section-cta py-5">
    <div class="container py-5">
        <div class="cta-card text-center">
            <h2 class="mb-4">Ready to Take Your Game to the Next Level?</h2>
            <p class="lead mb-5">Join thousands of athletes who have transformed their careers through our programs</p>
            
            <div class="cta-actions">
                <a href="{{ route('register') }}" class="btn btn-light btn-lg me-3">
                    Register as Athlete
                </a>
                <a href="{{ route('pages.show', 'sponsorship') }}" class="btn btn-outline-light btn-lg">
                    Become a Partner
                </a>
            </div>
        </div>
    </div>
</section>

@endsection

@push('styles')
<style>
/* Hero Section */
.hero-section {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #064e3b 100%);
    color: white;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(20, 184, 166, 0.1) 0%, transparent 50%);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #10b981;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.2;
}

.text-gradient {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
}

.hero-actions .btn {
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
}

.hero-stats .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #10b981;
}

.hero-stats .stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
}

.hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image-wrapper {
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(20, 184, 166, 0.2) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 3rem;
    text-align: center;
    backdrop-filter: blur(10px);
}

.hero-icon {
    font-size: 8rem;
    color: rgba(16, 185, 129, 0.4);
    margin-bottom: 1.5rem;
}

/* Event Cards */
.event-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

.event-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 1;
}

.event-image {
    height: 200px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(20, 184, 166, 0.2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-image-placeholder i {
    font-size: 5rem;
    color: rgba(16, 185, 129, 0.3);
}

.event-body {
    padding: 1.5rem;
}

.event-sport {
    display: inline-block;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.event-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.event-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.3s;
}

.event-title a:hover {
    color: #10b981;
}

.event-meta {
    margin-bottom: 1.5rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.meta-item i {
    color: #10b981;
    width: 16px;
}

.event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.event-price strong {
    display: block;
    font-size: 1.5rem;
    color: #10b981;
}

.event-price small {
    font-size: 0.75rem;
    color: #64748b;
}

/* Services */
.service-card {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    border-color: #10b981;
}

.service-icon {
    width: 64px;
    height: 64px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    background: rgba(16, 185, 129, 0.2);
    transform: scale(1.1);
}

.service-icon i {
    font-size: 2rem;
    color: #10b981;
}

.service-card h4 {
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Value Cards */
.value-card {
    background: linear-gradient(135deg, #0f172a 0%, #064e3b 100%);
    padding: 2rem;
    border-radius: 1rem;
    color: white;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.value-card h3 {
    color: #10b981;
    margin-bottom: 1rem;
}

/* CTA Section */
.section-cta {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    color: white;
}

.cta-card {
    padding: 3rem;
}

.cta-card h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
}
</style>
@endpush