@extends('layouts.app')

@section('title', 'Lumbini Province Taekwondo Association - Official Website')

@section('head')
<style>
    /* Hero is full-screen, navbar must start transparent */
    #navbar { background: transparent; }

    /* Upcoming Events vertical cards grid */
    .events-grid-vertical {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        margin-top: 20px;
    }
    @media (max-width: 768px) {
        .events-grid-vertical {
            grid-template-columns: 1fr;
        }
    }
    
    .event-card-vertical {
        display: flex;
        flex-direction: column;
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        box-shadow: var(--shadow-sm);
        transition: var(--transition);
        overflow: hidden;
        position: relative;
    }
    
    .event-card-vertical:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-md);
        border-top: 4px solid var(--red);
    }
    
    .event-card-vertical-img {
        width: 100%;
        height: 200px;
        background: #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    
    .event-card-vertical-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .event-card-vertical-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 5;
    }
    
    .event-card-vertical-date {
        position: absolute;
        bottom: -20px;
        left: 20px;
        background: linear-gradient(135deg, var(--blue), var(--blue-mid));
        border-radius: 10px;
        padding: 10px 14px;
        text-align: center;
        color: var(--white);
        box-shadow: var(--shadow-sm);
        z-index: 10;
        width: 80px;
    }
    
    .event-card-vertical-date .day {
        font-family: 'Oswald', sans-serif;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1;
    }
    
    .event-card-vertical-date .month {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.8;
        margin-top: 2px;
    }
    
    .event-card-vertical-body {
        padding: 35px 24px 24px 24px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    
    .event-card-vertical-body h3 {
        font-family: 'Oswald', sans-serif;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--blue);
        margin-bottom: 12px;
    }
    
    .event-card-vertical-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: auto;
    }
    
    .event-card-vertical-meta span {
        font-size: 0.8rem;
        color: var(--gray-700);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .event-card-vertical-meta i {
        color: var(--red);
        width: 16px;
    }
</style>
@endsection

@section('content')

<!-- ════════════════════════════════════════════════
     HERO
════════════════════════════════════════════════ -->
<section id="hero">
    <div class="hero-bg-pattern"></div>
    <div class="hero-glow-red"></div>
    <div class="hero-glow-blue"></div>

    <div class="container" style="padding-top:80px;">
        <div class="hero-content">
            <!-- Left -->
            <div class="hero-left">
                <div class="hero-eyebrow">
                    <i class="fas fa-star"></i>
                    Official Governing Body · Est. 2012 · Lumbini Province
                </div>
                <h1 class="hero-title">
                    Lumbini Province<br>
                    <span class="accent">Taekwondo</span><br>
                    <span class="accent-red">Association</span>
                </h1>
                <p class="hero-desc">
                    Uniting 12 districts of Lumbini Province under one flag — developing champions, promoting discipline, and advancing the martial art of Taekwondo across Nepal.
                </p>
                <div class="hero-buttons">
                    <a href="{{ route('register') }}" class="btn btn-primary">
                        <i class="fas fa-user-plus"></i> Join as Member
                    </a>
                    <a href="{{ route('about') }}" class="btn btn-outline">
                        <i class="fas fa-info-circle"></i> Learn More
                    </a>
                </div>
                <div class="hero-stats">
                    <div class="hero-stat">
                        <div class="hero-stat-num">{{ $counters['members'] }}+</div>
                        <div class="hero-stat-label">Active Members</div>
                    </div>
                    <div class="hero-stat">
                        <div class="hero-stat-num">{{ $counters['clubs'] }}</div>
                        <div class="hero-stat-label">Affiliated Clubs</div>
                    </div>
                    <div class="hero-stat">
                        <div class="hero-stat-num">{{ $counters['districts'] }}</div>
                        <div class="hero-stat-label">Districts</div>
                    </div>
                </div>
            </div>

            <!-- Right Visual -->
            <div class="hero-visual">
                <div class="hero-orbit-1"></div>
                <div class="hero-orbit-2"></div>
                <div class="hero-orbit-dot"></div>
                <div class="hero-emblem">
                    <div class="hero-emblem-inner">
                        <div class="hero-emblem-icon">🥋</div>
                        <div class="hero-emblem-tagline">LPTA Nepal</div>
                        <div style="color:rgba(255,255,255,.4);font-size:.72rem;margin-top:8px;letter-spacing:2px;">SINCE 2012</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="hero-scroll">
        <div class="hero-scroll-arrow"><i class="fas fa-chevron-down" style="color:rgba(255,255,255,.5);font-size:.75rem;"></i></div>
        <span>Scroll</span>
    </div>
</section>

<!-- ════════════════════════════════════════════════
     COUNTER STRIP
════════════════════════════════════════════════ -->
<section id="counters">
    <div class="container">
        <div class="counters-grid">
            <div class="counter-item">
                <div class="counter-icon">👥</div>
                <div class="counter-num" data-target="{{ $counters['members'] }}">0</div>
                <div class="counter-label">Members</div>
            </div>
            <div class="counter-item">
                <div class="counter-icon">🏟️</div>
                <div class="counter-num" data-target="{{ $counters['clubs'] }}">0</div>
                <div class="counter-label">Clubs</div>
            </div>
            <div class="counter-item">
                <div class="counter-icon">🎽</div>
                <div class="counter-num" data-target="{{ $counters['coaches'] }}">0</div>
                <div class="counter-label">Coaches</div>
            </div>
            <div class="counter-item">
                <div class="counter-icon">🏅</div>
                <div class="counter-num" data-target="{{ $counters['referees'] }}">0</div>
                <div class="counter-label">Referees</div>
            </div>
            <div class="counter-item">
                <div class="counter-icon">🥇</div>
                <div class="counter-num gold-num" data-target="{{ $counters['gold'] }}">0</div>
                <div class="counter-label">Gold Medals</div>
            </div>
            <div class="counter-item">
                <div class="counter-icon">🥈</div>
                <div class="counter-num silver-num" data-target="{{ $counters['silver'] }}">0</div>
                <div class="counter-label">Silver Medals</div>
            </div>
            <div class="counter-item">
                <div class="counter-icon">🥉</div>
                <div class="counter-num bronze-num" data-target="{{ $counters['bronze'] }}">0</div>
                <div class="counter-label">Bronze Medals</div>
            </div>
        </div>
    </div>
</section>

<!-- ════════════════════════════════════════════════
     FEATURED NEWS
════════════════════════════════════════════════ -->
<section id="news-section" class="section-pad">
    <div class="container">
        <div class="section-header" style="display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;">
            <div>
                <span class="section-label"><i class="fas fa-newspaper" style="margin-right:6px;"></i>Latest News</span>
                <h2 class="section-title">News & <span>Announcements</span></h2>
                <div class="divider"></div>
            </div>
            <a href="{{ route('news') }}" class="btn btn-blue">
                All News <i class="fas fa-arrow-right"></i>
            </a>
        </div>

        @if($featuredNews->count() > 0 || $latestNews->count() > 0)
        <div class="news-grid">
            {{-- Featured big card --}}
            @if($featuredNews->count() > 0)
            @php $featured = $featuredNews->first(); @endphp
            <div class="news-card">
                <div class="news-card-img tall">
                    <span style="font-size:5rem;">📰</span>
                    <div class="news-card-img-overlay"></div>
                    <div class="category-pill">Featured</div>
                </div>
                <div class="news-card-body">
                    <div class="news-card-meta">
                        <span><i class="fas fa-calendar"></i> {{ $featured->created_at->format('M d, Y') }}</span>
                        <span><i class="fas fa-eye"></i> {{ $featured->views }} views</span>
                    </div>
                    <a href="{{ route('news.show', $featured->slug) }}" class="news-card-title lg">
                        {{ $featured->title }}
                    </a>
                    <p class="news-card-excerpt">
                        {{ Str::limit($featured->content, 160) }}
                    </p>
                    <div class="news-card-footer">
                        <a href="{{ route('news.show', $featured->slug) }}" class="read-more">
                            Read More <i class="fas fa-arrow-right"></i>
                        </a>
                        <span class="news-views"><i class="fas fa-fire" style="color:var(--red);"></i> {{ $featured->views }}</span>
                    </div>
                </div>
            </div>
            @endif

            {{-- Side cards --}}
            @foreach($latestNews->take(2) as $news)
            <div class="news-card">
                <div class="news-card-img">
                    <span>📰</span>
                    <div class="news-card-img-overlay"></div>
                    <div class="category-pill">{{ $news->category->name ?? 'News' }}</div>
                </div>
                <div class="news-card-body">
                    <div class="news-card-meta">
                        <span><i class="fas fa-calendar"></i> {{ $news->created_at->format('M d, Y') }}</span>
                    </div>
                    <a href="{{ route('news.show', $news->slug) }}" class="news-card-title">
                        {{ $news->title }}
                    </a>
                    <p class="news-card-excerpt">{{ Str::limit($news->content, 100) }}</p>
                    <div class="news-card-footer">
                        <a href="{{ route('news.show', $news->slug) }}" class="read-more">
                            Read More <i class="fas fa-arrow-right"></i>
                        </a>
                        <span class="news-views"><i class="fas fa-eye"></i> {{ $news->views }}</span>
                    </div>
                </div>
            </div>
            @endforeach

            {{-- Fill remaining featured if latestNews < 2 --}}
            @foreach($featuredNews->skip(1)->take(2 - $latestNews->take(2)->count()) as $news)
            <div class="news-card">
                <div class="news-card-img">
                    <span>📰</span>
                    <div class="news-card-img-overlay"></div>
                    <div class="category-pill">Featured</div>
                </div>
                <div class="news-card-body">
                    <div class="news-card-meta">
                        <span><i class="fas fa-calendar"></i> {{ $news->created_at->format('M d, Y') }}</span>
                    </div>
                    <a href="{{ route('news.show', $news->slug) }}" class="news-card-title">{{ $news->title }}</a>
                    <p class="news-card-excerpt">{{ Str::limit($news->content, 100) }}</p>
                    <div class="news-card-footer">
                        <a href="{{ route('news.show', $news->slug) }}" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div style="text-align:center;padding:60px;color:var(--gray-500);">
            <i class="fas fa-newspaper" style="font-size:3rem;opacity:.3;"></i>
            <p style="margin-top:16px;">No news published yet.</p>
        </div>
        @endif
    </div>
</section>

<!-- ════════════════════════════════════════════════
     UPCOMING EVENTS
════════════════════════════════════════════════ -->
<section id="events-section" class="section-pad">
    <div class="container">
        <div class="section-header" style="display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;">
            <div>
                <span class="section-label"><i class="fas fa-calendar-alt" style="margin-right:6px;"></i>Schedule</span>
                <h2 class="section-title">Upcoming <span>Events</span></h2>
                <div class="divider"></div>
            </div>
            <a href="{{ route('events') }}" class="btn btn-blue">
                All Events <i class="fas fa-arrow-right"></i>
            </a>
        </div>

        @if($upcomingEvents->count() > 0)
        <div class="events-grid-vertical">
            @foreach($upcomingEvents as $event)
            <div class="event-card-vertical">
                <div class="event-card-vertical-img">
                    @if($event->image && file_exists(public_path($event->image)))
                        <img src="{{ asset($event->image) }}" alt="{{ $event->title }}">
                    @else
                        <div style="background: linear-gradient(135deg, var(--blue), var(--blue-mid)); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">🥋</div>
                    @endif
                    
                    <div class="event-card-vertical-badge">
                        @if($event->registration_status === 'open')
                            <span class="reg-open"><i class="fas fa-circle" style="font-size:.5rem;vertical-align:middle;margin-right:4px;"></i> Open</span>
                        @else
                            <span class="reg-closed"><i class="fas fa-lock" style="font-size:.7rem;margin-right:4px;"></i> Closed</span>
                        @endif
                    </div>
                    
                    <div class="event-card-vertical-date">
                        <div class="day">{{ $event->start_date->format('d') }}</div>
                        <div class="month">{{ $event->start_date->format('M Y') }}</div>
                    </div>
                </div>
                <div class="event-card-vertical-body">
                    <h3>{{ $event->title }}</h3>
                    <div class="event-card-vertical-meta">
                        <span><i class="fas fa-map-marker-alt"></i> {{ $event->venue }}</span>
                        <span><i class="fas fa-calendar-check"></i> {{ $event->start_date->format('d M') }} – {{ $event->end_date->format('d M, Y') }}</span>
                        <span><i class="fas fa-clock"></i> {{ $event->start_date->format('h:i A') }} – {{ $event->end_date->format('h:i A') }}</span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div style="text-align:center;padding:60px;color:var(--gray-500);">
            <i class="fas fa-calendar-times" style="font-size:3rem;opacity:.3;"></i>
            <p style="margin-top:16px;">No upcoming events scheduled.</p>
        </div>
        @endif
    </div>
</section>

<!-- ════════════════════════════════════════════════
     ACHIEVEMENTS
════════════════════════════════════════════════ -->
<section id="achievements-section" class="section-pad">
    <div class="container">
        <div class="section-header centered text-center">
            <span class="section-label"><i class="fas fa-trophy" style="margin-right:6px;"></i>Hall of Fame</span>
            <h2 class="section-title">Our <span style="color:var(--gold-light);">Achievements</span></h2>
            <div class="divider"></div>
            <p class="section-subtitle" style="color:rgba(255,255,255,.6);">Athletes of Lumbini Province have made Nepal proud on national and international stages.</p>
        </div>

        @if($counters['gold'] > 0 || $counters['silver'] > 0 || $counters['bronze'] > 0)
        <!-- Medal tally strip -->
        <div style="display:flex;justify-content:center;gap:32px;margin-bottom:48px;flex-wrap:wrap;">
            <div style="text-align:center;background:rgba(255,255,255,.07);border-radius:12px;padding:24px 40px;border:1px solid rgba(255,255,255,.1);">
                <div style="font-size:2.5rem;margin-bottom:8px;">🥇</div>
                <div style="font-family:'Oswald',sans-serif;font-size:2.5rem;font-weight:700;color:#f0c040;">{{ $counters['gold'] }}</div>
                <div style="font-size:.75rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;">Gold</div>
            </div>
            <div style="text-align:center;background:rgba(255,255,255,.07);border-radius:12px;padding:24px 40px;border:1px solid rgba(255,255,255,.1);">
                <div style="font-size:2.5rem;margin-bottom:8px;">🥈</div>
                <div style="font-family:'Oswald',sans-serif;font-size:2.5rem;font-weight:700;color:#c0c8d0;">{{ $counters['silver'] }}</div>
                <div style="font-size:.75rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;">Silver</div>
            </div>
            <div style="text-align:center;background:rgba(255,255,255,.07);border-radius:12px;padding:24px 40px;border:1px solid rgba(255,255,255,.1);">
                <div style="font-size:2.5rem;margin-bottom:8px;">🥉</div>
                <div style="font-family:'Oswald',sans-serif;font-size:2.5rem;font-weight:700;color:#cd7f32;">{{ $counters['bronze'] }}</div>
                <div style="font-size:.75rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;">Bronze</div>
            </div>
        </div>
        @endif

        @if(isset($achievements) && $achievements->count() > 0)
            @php $showAch = $achievements ?? collect([]); @endphp
        @else
            @php
            $showAch = collect([
                (object)['title'=>'Gold Medal in 9th National Games','medal_type'=>'gold','player_name'=>'Roshan Shrestha','achievement_date'=>'2024-10-18','type'=>'national','description'=>'Won Gold in the Flyweight (under 54kg) sparring division.'],
                (object)['title'=>'Silver Medal in National Poomsae Championship','medal_type'=>'silver','player_name'=>'Saraswati Adhikari','achievement_date'=>'2025-03-22','type'=>'national','description'=>'Scored 7.65 points in individual female under-18 Poomsae.'],
                (object)['title'=>'Bronze Medal in South Asian TKD Championship','medal_type'=>'bronze','player_name'=>'Anil Thapa','achievement_date'=>'2024-12-05','type'=>'international','description'=>'Represented Nepal in the 68kg Sparring category.'],
            ]);
            @endphp
        @endif

        <div class="achievements-grid">
            @foreach($showAch->take(3) as $ach)
            <div class="achievement-card">
                <div class="achievement-medal">
                    @if($ach->medal_type === 'gold') 🥇
                    @elseif($ach->medal_type === 'silver') 🥈
                    @elseif($ach->medal_type === 'bronze') 🥉
                    @else 🏅
                    @endif
                </div>
                <div class="achievement-title">{{ $ach->title }}</div>
                <div class="achievement-player"><i class="fas fa-user" style="color:rgba(255,255,255,.4);margin-right:5px;"></i> {{ $ach->player_name }}</div>
                <div class="achievement-date"><i class="fas fa-calendar" style="margin-right:4px;"></i>
                    {{ is_string($ach->achievement_date) ? \Carbon\Carbon::parse($ach->achievement_date)->format('M d, Y') : $ach->achievement_date->format('M d, Y') }}
                </div>
                <span class="achievement-type {{ $ach->type === 'international' ? 'intl' : 'nat' }}">
                    {{ ucfirst($ach->type) }}
                </span>
            </div>
            @endforeach
        </div>

        <div style="text-align:center;margin-top:44px;position:relative;z-index:1;">
            <a href="{{ route('achievements') }}" class="btn" style="background:rgba(255,255,255,.1);color:var(--white);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);">
                View All Achievements <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>

<!-- ════════════════════════════════════════════════
     COACHES & REFEREES
════════════════════════════════════════════════ -->
<section id="people-section" class="section-pad">
    <div class="container">
        <div class="section-header" style="display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:32px;">
            <div>
                <span class="section-label"><i class="fas fa-users" style="margin-right:6px;"></i>Our Team</span>
                <h2 class="section-title">Coaches & <span>Referees</span></h2>
                <div class="divider"></div>
            </div>
        </div>

        <div class="people-tabs">
            <button class="people-tab active" onclick="switchTab('coaches', this)">
                <i class="fas fa-dumbbell" style="margin-right:6px;"></i> Coaches
            </button>
            <button class="people-tab" onclick="switchTab('referees', this)">
                <i class="fas fa-gavel" style="margin-right:6px;"></i> Referees
            </button>
        </div>

        <!-- Coaches Tab -->
        <div id="tab-coaches" class="tab-content active">
            <div class="people-grid">
                @forelse($coaches as $coach)
                <div class="people-card">
                    @if($coach->photo)
                        <img src="{{ asset($coach->photo) }}" alt="{{ $coach->name }}" style="width: 100%; aspect-ratio: 1; object-fit: cover; display: block;">
                    @else
                        <div class="people-avatar">{{ substr($coach->name, 0, 1) }}</div>
                    @endif
                    <div class="people-info">
                        <div class="people-name">{{ $coach->name }}</div>
                        <div class="people-role">{{ $coach->qualification }}</div>
                        @if($coach->specialization)
                        <div class="people-detail"><i class="fas fa-star"></i> {{ $coach->specialization }}</div>
                        @endif
                        @if($coach->experience_years)
                        <div class="people-detail"><i class="fas fa-clock"></i> {{ $coach->experience_years }} Years Experience</div>
                        @endif
                        @if($coach->club)
                        <div class="people-detail"><i class="fas fa-building"></i> {{ $coach->club->name }}</div>
                        @endif
                    </div>
                </div>
                @empty
                <div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--gray-500);">No coaches found.</div>
                @endforelse
            </div>
            <div style="margin-top:32px;">
                <a href="{{ route('coaches') }}" class="btn btn-blue"><i class="fas fa-users"></i> All Coaches</a>
            </div>
        </div>

        <!-- Referees Tab -->
        <div id="tab-referees" class="tab-content">
            <div class="people-grid">
                @forelse($referees as $ref)
                <div class="people-card">
                    @if($ref->photo)
                        <img src="{{ asset($ref->photo) }}" alt="{{ $ref->name }}" style="width: 100%; aspect-ratio: 1; object-fit: cover; display: block;">
                    @else
                        <div class="people-avatar" style="background:linear-gradient(135deg,#c0392b,#e74c3c);">{{ substr($ref->name, 0, 1) }}</div>
                    @endif
                    <div class="people-info">
                        <div class="people-name">{{ $ref->name }}</div>
                        <div class="people-role">{{ $ref->certification_level }}</div>
                        <div class="people-detail"><i class="fas fa-clock"></i> {{ $ref->experience_years }} Yrs Experience</div>
                        @if($ref->email)
                        <div class="people-detail"><i class="fas fa-envelope"></i> {{ $ref->email }}</div>
                        @endif
                    </div>
                </div>
                @empty
                <div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--gray-500);">No referees found.</div>
                @endforelse
            </div>
            <div style="margin-top:32px;">
                <a href="{{ route('referees') }}" class="btn btn-blue"><i class="fas fa-gavel"></i> All Referees</a>
            </div>
        </div>
    </div>
</section>

<!-- ════════════════════════════════════════════════
     DISTRICTS
════════════════════════════════════════════════ -->
<section id="districts-section" class="section-pad">
    <div class="container">
        <div class="section-header centered text-center">
            <span class="section-label"><i class="fas fa-map" style="margin-right:6px;"></i>Coverage</span>
            <h2 class="section-title">12 Districts of <span>Lumbini Province</span></h2>
            <div class="divider"></div>
            <p class="section-subtitle">LPTA unites all 12 districts of Lumbini Province under a single, unified Taekwondo federation.</p>
        </div>

        <div class="districts-grid">
            @php
            $districtIcons = ['🏙️','🌳','🌄','⛰️','🏔️','🌿','🌊','🏞️','🗻','🌾','🏡','🌲'];
            @endphp
            @foreach($districts as $i => $dist)
            <div class="district-card" onclick="window.location.href='{{ route('tree') }}#district-{{ $dist->id }}'">
                <div class="district-icon">{{ $districtIcons[$i % count($districtIcons)] }}</div>
                <div class="district-name">{{ $dist->name }}</div>
                <div class="district-meta">Lumbini Province</div>
            </div>
            @endforeach
        </div>

        <div style="text-align:center;margin-top:44px;">
            <a href="{{ route('tree') }}" class="btn btn-blue">
                <i class="fas fa-sitemap"></i> View Member Directory
            </a>
        </div>
    </div>
</section>

<!-- ════════════════════════════════════════════════
     GALLERY
════════════════════════════════════════════════ -->
<section id="gallery-section" class="section-pad">
    <div class="container">
        <div class="section-header centered text-center">
            <span class="section-label"><i class="fas fa-images" style="margin-right:6px;"></i>Gallery</span>
            <h2 class="section-title" style="color:var(--white);">Photo <span style="color:var(--gold-light);">Gallery</span></h2>
            <div class="divider"></div>
        </div>
    </div>

    @if($recentPhotos->count() > 0)
    <div class="gallery-grid" style="max-width:1200px;margin:0 auto;padding:0 24px;">
        @foreach($recentPhotos->take(8) as $photo)
        @php
            $linkUrl = $photo->file_path ? asset($photo->file_path) : '#';
        @endphp
        <a href="{{ $linkUrl }}" class="gallery-item glightbox" data-gallery="home-gallery" style="background:linear-gradient({{ rand(0,360) }}deg, #1a2e5a, #c0392b); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #eee;">
            @if($photo->file_path && file_exists(public_path($photo->file_path)))
                <img src="{{ asset($photo->file_path) }}" style="width: 100%; height: 100%; object-fit: cover;">
            @else
                <span>📷</span>
            @endif
            <div class="gallery-overlay"><i class="fas fa-expand"></i></div>
        </a>
        @endforeach
    </div>
    @else
    <!-- Demo gallery grid -->
    <div class="gallery-grid" style="max-width:1200px;margin:0 auto;padding:0 24px;">
        @php
        $galleryEmojis = ['🥋','🏆','🎯','⚡','🔥','💪','🥇','🎽'];
        $galleryColors = [
            '135deg, #1a2e5a, #c0392b',
            '135deg, #c0392b, #d4a017',
            '135deg, #0d1f45, #2e4fa0',
            '135deg, #1a2e5a, #27ae60',
            '135deg, #c0392b, #1a2e5a',
            '135deg, #d4a017, #c0392b',
            '135deg, #2e4fa0, #1a2e5a',
            '135deg, #c0392b, #0d1f45',
        ];
        @endphp
        @for($i = 0; $i < 8; $i++)
        <div class="gallery-item" style="background:linear-gradient({{ $galleryColors[$i] }});">
            <span>{{ $galleryEmojis[$i] }}</span>
            <div class="gallery-overlay"><i class="fas fa-expand"></i></div>
        </div>
        @endfor
    </div>
    @endif

    <div style="text-align:center;margin-top:44px;">
        <a href="{{ route('gallery') }}" class="btn" style="background:rgba(255,255,255,.1);color:var(--white);border:1px solid rgba(255,255,255,.2);">
            <i class="fas fa-images"></i> Browse Full Gallery
        </a>
    </div>
</section>

<!-- ════════════════════════════════════════════════
     CTA BANNER
════════════════════════════════════════════════ -->
<section id="cta-section">
    <div class="container">
        <div class="cta-inner">
            <div style="font-size:3rem;margin-bottom:16px;">🥋</div>
            <h2 class="cta-title">Ready to Begin Your Taekwondo Journey?</h2>
            <p class="cta-desc">Join over {{ $counters['members'] }}+ registered athletes across Lumbini Province. Register today and get your official LPTA membership card.</p>
            <div class="cta-buttons">
                <a href="{{ route('register') }}" class="btn btn-white">
                    <i class="fas fa-user-plus"></i> Register as Member
                </a>
                <a href="{{ route('verify', 'LPTA-00001') }}" class="btn btn-outline">
                    <i class="fas fa-search"></i> Verify Membership
                </a>
                <a href="{{ route('contact') }}" class="btn btn-outline">
                    <i class="fas fa-envelope"></i> Contact Us
                </a>
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')
<script>
// ─── Navbar transparent on hero ────────────────────────
const homeNavbar = document.getElementById('navbar');
function updateNav() {
    if (homeNavbar) {
        if (window.scrollY > 60) {
            homeNavbar.classList.add('scrolled');
        } else {
            homeNavbar.classList.remove('scrolled');
        }
    }
}
window.addEventListener('scroll', updateNav);
updateNav();

// ─── Count-up animation ─────────────────────────────────
function animateCounter(el) {
    const target = parseInt(el.dataset.target);
    const duration = 2000;
    const start = performance.now();
    function step(now) {
        const elapsed = now - start;
        const progress = Math.min(elapsed / duration, 1);
        const eased = 1 - Math.pow(1 - progress, 3);
        el.textContent = Math.floor(eased * target);
        if (progress < 1) requestAnimationFrame(step);
        else el.textContent = target;
    }
    requestAnimationFrame(step);
}

const observer = new IntersectionObserver((entries) => {
    entries.forEach(e => {
        if (e.isIntersecting) {
            document.querySelectorAll('#counters .counter-num').forEach(animateCounter);
            observer.disconnect();
        }
    });
}, { threshold: 0.3 });

const countersSection = document.getElementById('counters');
if (countersSection) observer.observe(countersSection);

// ─── Tabs ───────────────────────────────────────────────
function switchTab(name, btn) {
    document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.people-tab').forEach(b => b.classList.remove('active'));
    document.getElementById('tab-' + name).classList.add('active');
    btn.classList.add('active');
}

// ─── Smooth scroll for anchor links ────────────────────
document.querySelectorAll('a[href^="#"]').forEach(a => {
    a.addEventListener('click', e => {
        e.preventDefault();
        document.querySelector(a.getAttribute('href'))?.scrollIntoView({ behavior: 'smooth' });
    });
});
</script>
@endsection