@extends('web.layouts.app')

@push('web.styles')
    @vite('resources/css/web/page/about.css')
@endpush

@section('content')
    <div class="container">
        <section class="about-section">
            <!-- Header Image -->
            <div class="banner-image-1">
                <a href="#" target="_blank" rel="noopener noreferrer">
                    <img src="{{ asset('assets/images/event-poster.jpg') }}" alt="Les Artistes" class="w-100 h-auto">
                </a>
            </div>
            <div class="row g-3 g-md-4">
                <!-- Main Content Area -->
                <div class="col-12 col-md-7 col-lg-8 col-xl-8 col-xxl-9">

                    <!-- Title and Subtitle -->
                    <div class="about-content popcorn-content">
                        <div class="ps-0 ps-xxl-3">
                            <div
                                class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center about-title-share mb-0">
                                <h1 class="dreamers-title">LES ARTISTES DE LA ISLA SOCIAL CLUB </h1>
                            </div>

                            <p class="about-subtitle dreamers-subtitle dreamers-subtitle-2 mb-2">Des concepts innovants pour
                                découvrir les trésors de l'île Maurice</p>
                            <!-- Article Text -->
                            <div class="about-article">
                                <p>
                                    Brian Lamoureux, habitant de Port-Louis et amoureux de cette ville en "constante
                                    évolution", a encore des étoiles dans les yeux. L'artiste mauricien revient sur son
                                    premier mur, peint en 2015, au cœur d'un Port-Louis en ébullition, électrisé par la
                                    première édition du festival Porlwi by Light. Aujourd'hui, le grand festival de la
                                    capitale mauricienne a disparu... mais pas l'un de ses premiers murs.
                                </p>
                            </div>
                            <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center">
                                <div></div>

                                <div class="about-share mt-0">
                                    <div class="d-flex align-items-center gap-3">
                                        <p class="share-label mb-0 pt-2">PARTAGEZ CETTE PAGE</p>
                                        <button id="shareBtn" class="share-button border-0 bg-transparent"
                                            aria-label="Share this page">
                                            <img src="{{ asset('assets/images/share.png') }}" alt="Share Icon"
                                                class="w-100 h-100">
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Artist Grid (handled by Livewire) -->
                        <div>
                            @livewire('web.artist')
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-12 col-md-5 col-lg-4 col-xl-4 col-xxl-3">
                    <!-- Events Section -->
                    @if ($allCategories->count() > 0)
                        <div class="about-sidebar">
                            <div class="sidebar-section">
                                <h2 class="sidebar-title">NOS EVENEMENTS</h2>
                                <div class="sidebar-items">
                                    <div class="row g-3">
                                        @foreach ($allCategories as $category)
                                            <div class="col-6 col-md-12 col-lg-12">
                                                <div class="sidebar-item d-flex gap-3">
                                                    <div class="sidebar-item-image flex-shrink-0">
                                                        <img src="{{ $category->hasMedia('event_category_image') ? $category->getFirstMediaUrl('event_category_image') : asset('assets/images/placeholder/event-finished.png') }}"
                                                            alt="{{ $category->name }}"
                                                            class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/event-upcoming.png') }}';">
                                                    </div>
                                                    <div class="sidebar-item-content flex-grow-1">
                                                        <h3 class="sidebar-item-title mb-2">{{ $category->name }}</h3>
                                                        <a href="{{ route('web.event.category', $category->slug) }}"
                                                            class="sidebar-item-link">>> Voir la fiche</a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Events Section -->
                    <div class="about-sidebar">
                        <div class="sidebar-section">
                            <h2 class="sidebar-title">LA ISLA TV</h2>
                            <div class="sidebar-items">
                                <div class="row g-3">
                                    <div class="col-6 col-md-12 col-lg-12">
                                        <div class="sidebar-item d-flex gap-3">
                                            <div class="sidebar-item-image flex-shrink-0">
                                                <img src="{{ asset('assets/images/la-isla-tv/patrimoine.jpg') }}"
                                                    alt="LIVE DAN PATRIMOINE"
                                                    class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/la-isla-tv/patrimoine.jpg') }}';">
                                            </div>
                                            <div class="sidebar-item-content flex-grow-1">
                                                <h3 class="sidebar-item-title mb-2">LIVE DAN PATRIMOINE</h3>
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGsE51NWMBPS8wKgptwoOPK0&si=AONxMipWneJ06Tc8"
                                                    target="_blank" class="sidebar-item-link">>>
                                                    Voir
                                                    les vidéos</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-12 col-lg-12">
                                        <div class="sidebar-item d-flex gap-3">
                                            <div class="sidebar-item-image flex-shrink-0">
                                                <img src="{{ asset('assets/images/la-isla-tv/moris.jpg') }}"
                                                    alt="WE LOVE MORIS"
                                                    class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/la-isla-tv/moris.jpg') }}';">
                                            </div>
                                            <div class="sidebar-item-content flex-grow-1">
                                                <h3 class="sidebar-item-title mb-2">WE LOVE MORIS</h3>
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGsfhLwSRCxOUn8aHC5phmFl&si=i4p4NjAsSAv93UuO"
                                                    target="_blank" class="sidebar-item-link">>>
                                                    Voir
                                                    les vidéos</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-12 col-lg-12">
                                        <div class="sidebar-item d-flex gap-3">
                                            <div class="sidebar-item-image flex-shrink-0">
                                                <img src="{{ asset('assets/images/la-isla-tv/2068.jpg') }}"
                                                    alt="LA ISLA 2068"
                                                    class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/la-isla-tv/2068.jpg') }}';">
                                            </div>
                                            <div class="sidebar-item-content flex-grow-1">
                                                <h3 class="sidebar-item-title mb-2">LA ISLA 2068</h3>
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGu-Yy2aYXj7wxflQkBrZb0m&si=P4XZhW_Jl470stsQ"
                                                    target="_blank" class="sidebar-item-link">>>
                                                    Voir
                                                    les vidéos</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-12 col-lg-12">
                                        <div class="sidebar-item d-flex gap-3">
                                            <div class="sidebar-item-image flex-shrink-0">
                                                <img src="{{ asset('assets/images/la-isla-tv/semaine.jpg') }}"
                                                    alt="LE SON DE LA SEMAINE"
                                                    class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/la-isla-tv/semaine.jpg') }}';">
                                            </div>
                                            <div class="sidebar-item-content flex-grow-1">
                                                <h3 class="sidebar-item-title mb-2">LE SON DE LA SEMAINE</h3>
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGtWAqCTWo3KilqwfhE0dfTL&si=ZyXU3Me-ZZMZfNtP"
                                                    target="_blank" class="sidebar-item-link">>>
                                                    Voir
                                                    les vidéos</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Subscribe Bar -->
                    <div class="sidebar-subscribe">
                        <div class="d-flex align-items-center justify-content-between p-3">
                            <div class="d-flex align-items-center gap-3">
                                <div class="subscribe-icon-wrapper">
                                    <i class="bi bi-youtube text-white"></i>
                                </div>
                                <div>
                                    <div class="subscribe-title">LA ISLA TV</div>
                                    <div class="subscribe-count">11,200 subscribers</div>
                                </div>
                            </div>
                            <a href="{{ $general->youtube_link }}" target="_blank" class="subscribe-btn">SUBSCRIBE</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection