@extends('web.layouts.app')

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

@php
    function isYoutubeUrl($url)
    {
        return preg_match('/(youtube\.com|youtu\.be)/i', $url);
    }
@endphp

@section('content')
    <div class="container">
        <section class="about-section">
            <!-- Header Image -->
            <div class="about-header-image">
                <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0"
                    alt="La Isla Social Club" class="w-100 h-100">
            </div>
            <div class="row g-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 mb-4">
                        <h1 class="about-title">{{ $pageData->title }}</h1>
                        <p class="about-subtitle text-muted">Des concepts innovants pour découvrir les trésors de l'île
                            Maurice</p>

                        <!-- Article Text -->
                        <div class="about-article">
                            {!! $pageData->text !!}
                        </div>
                    </div>

                    <!-- Share Section -->
                    <div class="about-share">
                        <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>

                <!-- Sidebar -->
                <div class="col-12 col-md-5 col-lg-4 col-xl-4 col-xxl-3">
                    @if ($events->count() > 0)
                        <div class="about-sidebar">
                            <!-- Events Section -->
                            <div class="sidebar-section">
                                <h2 class="sidebar-title">Nos partenaires</h2>
                                <div class="sidebar-items">
                                    <div class="row g-3">
                                        @foreach ($partners as $partner)
                                            <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="{{ $partner->getFirstMediaUrl('partner_logo') }}"
                                                            alt="{{ $partner->name }}" class="w-100 h-100"
                                                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/event-finished.png') }}';">
                                                    </div>
                                                    <div class="sidebar-item-content flex-grow-1">
                                                        <h3 class="sidebar-item-title mb-2">{{ $partner->name }}</h3>
                                                        @if ($partner->website_url)
                                                            <a href="{{ $partner->website_url }}" target="_blank"
                                                                class="sidebar-item-link">>>
                                                                savoir plus</a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- 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
@push('web.scripts')
@endpush