@php
    $sections = [
        'overview' => ['title' => 'About Us', 'icon' => 'bi-info-circle'],
        'vision-mission' => ['title' => 'Vision & Mission', 'icon' => 'bi-bullseye'],
        'message-from-founder' => ['title' => 'Message from Founder', 'icon' => 'bi-chat-quote'],
        'history' => ['title' => 'History', 'icon' => 'bi-clock-history'],
    ];
    $current = $sections[$section] ?? $sections['overview'];
@endphp

<x-app-layout>
    <main class="flex-grow">
        <section class="position-relative py-5 overflow-hidden about-hero">
            <div class="position-absolute w-100 h-100 top-0 start-0 about-hero-bg"></div>
            <div class="position-absolute rounded-circle about-hero-circle about-hero-circle-1"></div>
            <div class="position-absolute rounded-circle about-hero-circle about-hero-circle-2"></div>
            <div class="container position-relative" style="z-index: 2;">
                <div class="d-inline-block px-3 py-1 rounded-pill mb-3 about-hero-badge">
                    <i class="bi {{ $current['icon'] }} me-1"></i>
                    <span class="small fw-medium">{{ $current['title'] }}</span>
                </div>
                <h1 class="text-dark mb-3 fw-bold about-hero-title">{{ $current['title'] }}</h1>
                <p class="text-secondary fs-5 opacity-75" style="max-width: 560px;">
                    @switch($section)
                        @case('vision-mission')
                            Our goals and purpose that drive us forward
                            @break
                        @case('message-from-founder')
                            A word from the heart of our club's founder
                            @break
                        @case('history')
                            The story of Life Football Club
                            @break
                        @default
                            Discover who we are and what we stand for
                    @endswitch
                </p>
            </div>
        </section>

        {{-- Sidebar nav + content --}}
        <section class="py-5 bg-white">
            <div class="container">
                <div class="row g-4">
                    <aside class="col-lg-3">
                        <nav class="about-sidebar sticky-top">
                            <div class="list-group list-group-flush rounded-3 border shadow-sm">
                                @foreach($sections as $slug => $item)
                                    <a href="{{ $slug === 'overview' ? route('about') : route('about.section', $slug) }}"
                                       class="list-group-item list-group-item-action d-flex align-items-center gap-2 {{ $section === $slug ? 'active' : '' }}">
                                        <i class="bi {{ $item['icon'] }}"></i>
                                        <span>{{ $item['title'] }}</span>
                                    </a>
                                @endforeach
                            </div>
                        </nav>
                    </aside>
                    <div class="col-lg-9">
                        <div class="about-content card border-0 shadow-sm rounded-3 p-4 p-lg-5">
                            @switch($section)
                                @case('vision-mission')
                                    <div class="about-vision-mission">
                                        <div class="vision-block mb-5">
                                            <h4 class="about-block-title mb-3">The Vision</h4>
                                            <blockquote class="about-blockquote m-0">
                                                <p class="text-secondary fs-5 lh-lg mb-0">To empower and develop high-quality football players and leaders for the province of Sihanoukville and the Kingdom of Cambodia.</p>
                                            </blockquote>
                                        </div>
                                        <div class="mission-block">
                                            <h4 class="about-block-title mb-3">The Mission</h4>
                                            <blockquote class="about-blockquote m-0">
                                                <p class="text-secondary fs-5 lh-lg mb-0">To nurture and equip each individual's highest potential in football, character, talents, passions, and attitude through quality development, training, and education.</p>
                                            </blockquote>
                                        </div>
                                    </div>
                                    @break
                                @case('message-from-founder')
                                    <div class="about-founder-profile mb-5 d-flex flex-column flex-md-row align-items-center gap-4">
                                        <div class="about-founder-photo rounded-3 overflow-hidden flex-shrink-0 position-relative" style="width: 140px; height: 180px; background: linear-gradient(135deg, #e0f7ff 0%, #bae6fd 100%);">
                                            <img src="{{ asset('images/about/founder.png') }}" alt="Rev. Dr. David Koo" class="w-100 h-100" style="object-fit: cover;" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('d-none');" onload="this.nextElementSibling.classList.add('d-none');">
                                            <i class="bi bi-person-fill text-muted d-none position-absolute top-50 start-50 translate-middle" style="font-size: 3rem;"></i>
                                        </div>
                                        <div class="text-center text-md-start">
                                            <h5 class="fw-bold text-dark mb-1">Rev. Dr. David Koo (Kyen Hoe)</h5>
                                            <p class="text-secondary small mb-0">Founder, Life Football Club</p>
                                        </div>
                                    </div>
                                    <div class="about-founder-message">
                                        <p class="text-secondary lh-lg mb-4">Life Football Club was established to develop Cambodian football talent with the truth and love of God, so that our players can love their teammates and opponents as themselves, respect their coaches and community as the Bible teaches, and contribute to the growth of football culture and the prosperity of Sihanoukville and Cambodia.</p>
                                        <p class="text-secondary lh-lg mb-4">As a club rooted in Christian values, we know our success depends on our humble obedience to God, who has called us to build this club. Life Football Club exists to provide quality football development for Cambodian youth, combining sport with character-building and education.</p>
                                        <p class="text-secondary lh-lg mb-4">Everything we do is designed to develop Christ-centered athletes with values and skills essential to impact tomorrow's Cambodia and the world of football.</p>
                                        <p class="text-secondary lh-lg mb-4">As our club grows, so does the need for our visionary mission. The demand for qualified coaches, modern facilities, and youth programs will be met little by little with the help of our prayers, donors, sponsors, and supporters so everything done in Life Football Club will prove God's work within us.</p>
                                        <p class="text-secondary lh-lg mb-4">Please keep paying attention to our growth and constant development.</p>
                                        <p class="text-secondary lh-lg mb-4">May the Lord's grace and peace be with you all.</p>
                                        <p class="text-dark fw-semibold mb-1">From Life Football Club,</p>
                                        <p class="text-secondary mb-0">Rev. Dr. David Koo (Kyen Hoe)</p>
                                    </div>
                                    @break
                                @case('history')
                                    <div class="about-history">
                                        <p class="text-secondary mb-4 lh-lg">In association with Life University, Life Football Club is a professional football team representing Sihanoukville, Cambodia. Founded with a mission to enhance football and sports culture, the club holds the distinction of being the <strong>first professional football club</strong> in Preah Sihanouk Province.</p>
                                        <p class="text-secondary mb-4 lh-lg">Established in 2006, Life University has championed educational development in Cambodia, integrating football as a vital part of its identity and commitment to Sihanoukville's athletic growth. Life Football Club has established a loyal fanbase, achieving the <strong>largest attendance record of 3,782 fans</strong> at Life Stadium on September 25, 2023.</p>
                                        <p class="text-secondary mb-5 lh-lg">The club recently became champions of Cambodian League 2 in the 2023–2024 season, securing promotion to the Cambodian Premier League (CPL) for the 2024–2025 season. Competing now at the top level of Cambodian football, Life FC represents Sihanoukville with pride, setting high standards in every endeavor. The club's long-term goals include expanding fan engagement, strengthening governance, and developing grassroots programs. Plans for a new youth academy and grassroots teams for U13, U15, and U8 in 2024 aim to foster young talent, while infrastructure upgrades, including expanding Life Stadium's seating capacity, support the club's growth.</p>
                                        <p class="text-secondary mb-0 lh-lg">Life FC is committed to sustainability, women's football, community impact through the <em>Live Life with Love</em> program, and environmental initiatives. These efforts align with its core values of respect, teamwork, and transparency, as the club builds its legacy in the Cambodian Premier League.</p>
                                        <div class="about-slide-card about-slide-card--tall rounded-3 overflow-hidden shadow my-5" style="border: 4px solid rgba(116, 199, 254, 0.3);">
                                            <div id="aboutHistoryCarousel" class="carousel slide h-100" data-bs-ride="carousel" data-bs-interval="4000" data-bs-pause="false">
                                                <div class="carousel-inner h-100">
                                                    @foreach(range(1, 6) as $i)
                                                        <div class="carousel-item {{ $i === 1 ? 'active' : '' }} h-100">
                                                            <img src="{{ asset("images/history-slides/history-{$i}.png") }}" class="d-block w-100 about-carousel-img" alt="Life FC History">
                                                        </div>
                                                    @endforeach
                                                </div>
                                                <div class="carousel-indicators">
                                                    @foreach(range(1, 6) as $i)
                                                        <button type="button" data-bs-target="#aboutHistoryCarousel" data-bs-slide-to="{{ $i - 1 }}" class="{{ $i === 1 ? 'active' : '' }}" aria-label="Slide {{ $i }}"></button>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        <hr class="my-5 about-milestones-hr">
                                        <h5 class="about-milestones-title fw-semibold mb-4">Key Milestones</h5>
                                        <div class="row g-3">
                                            <div class="col-12 col-md-6">
                                                <div class="about-milestone-card p-4 rounded-3 h-100">
                                                    <div class="d-flex align-items-start gap-3">
                                                        <div class="about-milestone-icon flex-shrink-0"><i class="bi bi-trophy-fill"></i></div>
                                                        <div>
                                                            <h6 class="fw-semibold text-dark mb-2">Promotion to CPL League 2</h6>
                                                            <p class="text-secondary small mb-0">Season 2023–2024</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-6">
                                                <div class="about-milestone-card p-4 rounded-3 h-100">
                                                    <div class="d-flex align-items-start gap-3">
                                                        <div class="about-milestone-icon flex-shrink-0"><i class="bi bi-star-fill"></i></div>
                                                        <div>
                                                            <h6 class="fw-semibold text-dark mb-2">Life FC in the CPL League 2</h6>
                                                            <p class="text-secondary small mb-0">Season 2023–2024</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-6">
                                                <div class="about-milestone-card p-4 rounded-3 h-100">
                                                    <div class="d-flex align-items-start gap-3">
                                                        <div class="about-milestone-icon flex-shrink-0"><i class="bi bi-flag-fill"></i></div>
                                                        <div>
                                                            <h6 class="fw-semibold text-dark mb-2">Life FC in the CPL</h6>
                                                            <p class="text-secondary small mb-0">Season 2024–2025</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @break
                                @default
                                    <div class="about-overview">
                                        <p class="text-secondary mb-4 lh-lg fs-5">Founded with a vision to inspire and unite, Life Football Club has become a symbol of excellence in the world of football. Our commitment to developing talent and fostering team spirit has led us to numerous victories.</p>
                                        <p class="text-secondary mb-4 lh-lg">We pride ourselves on our strong community values, dedication to the sport, and the unwavering support of our fans. Together, we continue to write our story on and off the pitch.</p>
                                        <div class="about-slide-card about-slide-card--tall rounded-3 overflow-hidden shadow mb-5" style="border: 4px solid rgba(116, 199, 254, 0.3);">
                                            <div id="aboutPageCarousel" class="carousel slide h-100" data-bs-ride="carousel" data-bs-interval="4000" data-bs-pause="false">
                                                <div class="carousel-inner h-100">
                                                    @foreach(range(1, 8) as $i)
                                                        <div class="carousel-item {{ $i === 1 ? 'active' : '' }} h-100">
                                                            <img src="{{ asset("images/about-slides/slide-{$i}.png") }}" class="d-block w-100 about-carousel-img" alt="Life FC">
                                                        </div>
                                                    @endforeach
                                                </div>
                                                <div class="carousel-indicators">
                                                    @foreach(range(1, 8) as $i)
                                                        <button type="button" data-bs-target="#aboutPageCarousel" data-bs-slide-to="{{ $i - 1 }}" class="{{ $i === 1 ? 'active' : '' }}" aria-label="Slide {{ $i }}"></button>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row g-3 mb-4">
                                            <div class="col-6 col-md-3">
                                                <div class="about-stat-card text-center p-4 rounded-3">
                                                    <div class="about-stat-number fw-bold mb-1">3,782</div>
                                                    <div class="text-secondary small">Record Attendance</div>
                                                </div>
                                            </div>
                                            <div class="col-6 col-md-3">
                                                <div class="about-stat-card text-center p-4 rounded-3">
                                                    <div class="about-stat-number fw-bold mb-1">2024</div>
                                                    <div class="text-secondary small">CPL Debut</div>
                                                </div>
                                            </div>
                                            <div class="col-6 col-md-3">
                                                <div class="about-stat-card text-center p-4 rounded-3">
                                                    <div class="about-stat-number fw-bold mb-1">2006</div>
                                                    <div class="text-secondary small">Life University</div>
                                                </div>
                                            </div>
                                            <div class="col-6 col-md-3">
                                                <div class="about-stat-card text-center p-4 rounded-3">
                                                    <div class="about-stat-number fw-bold mb-1">{{ \App\Models\Players::count() }}</div>
                                                    <div class="text-secondary small">Players</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="about-cta p-4 rounded-3">
                                            <p class="mb-0 text-dark small"><i class="bi bi-arrow-right-circle me-2"></i>Explore our <a href="{{ route('about.section', 'history') }}">History</a>, <a href="{{ route('about.section', 'vision-mission') }}">Vision & Mission</a>, and more in the menu.</p>
                                        </div>
                                    </div>
                            @endswitch
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <style>
        .about-hero { min-height: 220px; }
        .about-hero-bg { background: linear-gradient(135deg, #e0f7ff 0%, #bae6fd 40%, #7dd3fc 100%); }
        .about-hero-circle { width: 280px; height: 280px; filter: blur(70px); pointer-events: none; }
        .about-hero-circle-1 { top: -60px; right: -40px; background: rgba(116, 199, 254, 0.2); }
        .about-hero-circle-2 { bottom: -80px; left: -60px; background: rgba(2, 132, 199, 0.1); }
        .about-hero-badge { background: rgba(255,255,255,0.95); color: #0284c7; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .about-hero-title { font-size: 1.9rem; letter-spacing: -0.02em; }
        .about-sidebar .list-group-item { border: none; }
        .about-sidebar .list-group-item.active { background: linear-gradient(135deg, #74c7fe, #0284c7); color: white; }
        .about-sidebar .list-group-item:not(.active):hover { background: #e0f7ff; }
        .about-content .about-us { margin-top: 1rem; }
        .about-block-title { color: #0284c7; font-weight: 600; font-size: 1.1rem; }
        .about-blockquote { border-left: 4px solid #74c7fe; padding-left: 1.25rem; background: linear-gradient(90deg, rgba(116, 199, 254, 0.08) 0%, transparent 100%); padding: 1rem 1.25rem; border-radius: 0 0.5rem 0.5rem 0; }
        .about-milestones-title { color: #0284c7; }
        .about-milestones-hr { border-color: rgba(116, 199, 254, 0.4); }
        .about-milestone-card { background: linear-gradient(135deg, rgba(116, 199, 254, 0.08) 0%, rgba(2, 132, 199, 0.06) 100%); border: 1px solid rgba(2, 132, 199, 0.2); transition: transform 0.2s, box-shadow 0.2s; }
        .about-milestone-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2); border-color: rgba(2, 132, 199, 0.35); }
        .about-milestone-icon { width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, #74c7fe, #0284c7); color: white; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
        .about-stat-card { background: linear-gradient(135deg, #f0f9ff 0%, #e0f7ff 100%); border: 1px solid rgba(116, 199, 254, 0.25); transition: all 0.2s; }
        .about-stat-card:hover { background: linear-gradient(135deg, #e0f7ff 0%, #bae6fd 100%); box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12); }
        .about-stat-number { color: #0284c7; font-size: 1.5rem; }
        .about-cta { background: #f0f9ff; border: 1px dashed rgba(2, 132, 199, 0.3); }
        .about-cta a { color: #0284c7; font-weight: 600; text-decoration: none; }
        .about-cta a:hover { color: #0369a1; text-decoration: underline; }
        .about-founder-message { max-width: 720px; }
        .about-slide-card--tall { min-height: 460px; }
        @media (min-width: 992px) {
            .about-slide-card--tall { min-height: 520px; }
        }
        .about-slide-card--tall .carousel-inner {
            min-height: 420px;
        }
        @media (min-width: 992px) {
            .about-slide-card--tall .carousel-inner { min-height: 480px; }
        }
        .about-slide-card .about-carousel-img {
            width: 100%;
            min-height: 420px;
            object-fit: cover;
            object-position: center;
        }
        @media (min-width: 992px) {
            .about-slide-card .about-carousel-img { min-height: 480px; }
        }
        .about-slide-card .carousel-indicators { margin-bottom: 0.75rem; }
        .about-slide-card .carousel-indicators button { background-color: rgba(2, 132, 199, 0.5); }
        .about-slide-card .carousel-indicators button.active { background-color: #0284c7; }
    </style>
</x-app-layout>