@extends('layouts.app')
@section('content')

<!-- Page Preloader -->
<div id="page-preloader">
    <img src="{{ asset('assets/img/logo/logo.png') }}" alt="Logo" class="preloader-logo">
    <div class="preloader-spinner"></div>
</div>

<div id="magic-cursor">
    <div id="ball"></div>
</div>

<main>
    <!-- Section Slider (toujours affichée) -->
    <div class="it-hero-2-area">
        <div class="slider">
            @foreach($sliders as $index => $slider)
            <div class="slide {{ $index == 0 ? 'active' : '' }}">
                <div class="it-hero-2-overlay fix gray-bg z-index-1" 
                    data-background="{{ $slider->imageSrc }}">
                    <div class="container">
                        <div class="row align-items-center">
                            <!-- Texte -->
                            <div class="col-xl-6 col-lg-6">
                                <div class="it-hero-2-content">
                                    <h4 class="it-hero-3-subtitle it-split-in-right">
                                        <span>{{ $slider->{'soustitre_'.app()->getLocale()} ?? $slider->soustitre_ar }}</span>
                                    </h4>
                                    <h1 class="it-hero-2-title it-split-in-right">
                                        {{ $slider->{'titre_'.app()->getLocale()} ?? $slider->titre_ar }}
                                    </h1>
                                    <div class="it-hero-2-text wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                                        <p class="mb-30"><br/></p>
                                    </div>
                                    <div class="it-hero-btn d-sm-flex align-items-center">
                                        <!-- Bouton 1 -->
                                        @if($slider->titre_bouton_ar && $slider->lien_bouton_ar)
                                        <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay=".8">
                                            <a href="{{ $slider->lien_bouton_ar }}" 
                                                class="it-btn-orange mr-30 wow itfadeUp" 
                                                data-wow-duration=".9s" data-wow-delay=".7s">
                                                <span>
                                                    <span class="text-1">{{ $slider->{'titre_bouton_'.app()->getLocale()} ?? $slider->titre_bouton_ar}}</span>
                                                    <span class="text-2">{{ $slider->{'titre_bouton_'.app()->getLocale()} ?? $slider->titre_bouton_ar}}</span>
                                                </span>
                                                <i>
                                                    <svg width="12" height="13" viewBox="0 0 12 13" fill="none">
                                                        <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                    </svg>
                                                </i>
                                            </a>
                                        </div>
                                        @endif
                                        <!-- Bouton 2 -->
                                        @if($slider->titre_bouton2_ar && $slider->lien_bouton2_ar)
                                        <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay="1">
                                            <a href="{{ $slider->lien_bouton2_ar }}" 
                                                class="it-btn-border wow itfadeUp" 
                                                data-wow-duration=".9s" data-wow-delay=".9s">
                                                <span>
                                                    <span class="text-1">{{ $slider->{'titre_bouton2_'.app()->getLocale()} ?? $slider->titre_bouton2_ar}}</span>
                                                    <span class="text-2">{{ $slider->{'titre_bouton2_'.app()->getLocale()} ?? $slider->titre_bouton2_ar}}</span>
                                                </span>
                                                <i>
                                                    <svg width="12" height="13" viewBox="0 0 12 13" fill="none">
                                                        <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                    </svg>
                                                </i>
                                            </a>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <!-- Formulaire -->
                            <div class="col-xl-6 col-lg-6">
                                <div class="it-contact-form-box z-index-1 p-relative wow img-anim-top" 
                                    data-wow-duration="1.5s" data-wow-delay="0.1">
                                    <h4 class="it-contact-form-title mb-10" style="color:#FFFFFF;">{{ __('site.search_title') }}</h4>
                                    <form action="{{ route('search') }}">
                                        <div class="it-contact-input-wrap">
                                            <div class="row gx-30">
                                                <div class="col-sm-12 mb-20">
                                                    <div class="it-contact-input-box">
                                                        <input required class="ph" type="text" name="q" placeholder="{{ __('site.search_placeholder') }}" style="color:#FFFFFF;">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="it-contact-btn">
                                                <button type="submit" class="it-btn-orange">
                                                    <span>
                                                        <span class="text-1">{{ __('site.search_button') }}</span>
                                                        <span class="text-2">{{ __('site.search_button') }}</span>
                                                    </span>
                                                    <i>
                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none">
                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white"/>
                                                        </svg>
                                                    </i>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                    <img class="it-contact-shape-1" src="assets/img/shape/contact-1-1.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Boucle sur les sections statiques configurées -->
    @foreach($staticSections as $section)
        @switch($section->section_key)
            @case('about')
                <!-- Section About -->
                <div class="it-about-2-area p-relative pt-95 pb-45" id="section-{{ $section->section_key }}">
                    <img class="it-about-2-shape-1" src="assets/img/shape/about-2-1.png" alt="">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-xl-6 col-lg-6 order-1 order-lg-0">
                                <div class="it-about-2-thumb p-relative">
                                    <img src="assets/img/about/ministere.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 order-0 order-lg-1">
                                <div class="it-about-2-right">
                                    <div class="it-section-title-box mb-20">
                                        <span class="it-section-subtitle">{{ __('site.about_subtitle') }}</span>
                                        <h4 class="it-section-title it-split-in-right mb-0">
                                            {{ $section->{'title_'.app()->getLocale()} ?? $section->title_ar }}
                                        </h4>
                                    </div>
                                    <div class="it-about-2-text">
                                        <p class="mb-30">{!! __('site.about_text') !!}</p>
                                    </div>
                                    <div class="row">
                                        <div class="col-xxl-6 col-xl-7 col-lg-6 col-md-6">
                                            <div class="it-about-2-btn">
                                                <a href="{{ url('page/2') }}" class="it-btn-orange">
                                                    <span>
                                                        <span class="text-1">{{ __('site.about_read_more') }}</span>
                                                        <span class="text-2">{{ __('site.about_read_more') }}</span>
                                                    </span>
                                                    <i>
                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                        </svg>
                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                        </svg>
                                                    </i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @break

            @case('news')
                <!-- Section News -->
                <div class="it-blog-area pt-45 pb-45 news-section" style="background:ghostwhite;" id="section-{{ $section->section_key }}">
                    <div class="container">
                        <div class="it-blog-top-wrap pb-65">
                            <div class="row align-items-end">
                                <div class="col-xl-5 col-lg-6">
                                    <div class="it-section-title-box">
                                        <span class="it-section-subtitle">{{ __('site.news_subtitle') }}</span>
                                        <h4 class="it-section-title mb-0 it-split-in-right">
                                            {{ $section->{'title_'.app()->getLocale()} ?? $section->title_ar }}
                                        </h4>
                                    </div>
                                </div>
                                <div class="col-xl-7 col-lg-6">
                                    <div class="it-blog-top-right d-flex justify-content-lg-end wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".3s">
                                        <div>
                                            <div class="it-blog-btn">
                                                <a href="{{ route('news.index') }}" class="it-btn-orange">
                                                    <span>
                                                        <span class="text-1">{{ __('site.news_more') }}</span>
                                                        <span class="text-2">{{ __('site.news_more') }}</span>
                                                    </span>
                                                    <i>
                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                        </svg>
                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                        </svg>
                                                    </i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @php
                            function youtube_id($url) {
                                if (!$url) return null;
                                if (preg_match('/(?:youtu\.be\/|v=|embed\/)([A-Za-z0-9_\-]+)/', $url, $m)) {
                                    return $m[1];
                                }
                                return null;
                            }
                        @endphp

                        <div class="row gx-35">
                            @forelse($sectionsData['news']->chunk(2) as $chunk)
                                @foreach($chunk as $item)
                                    @php
                                        $dateSource = $item->date ?? $item->created_at;
                                        $date = \Carbon\Carbon::parse($dateSource)->format('Y.m.d');
                                        $youtubeId = youtube_id($item->youtube_url);
                                    @endphp

                                    <div class="col-xl-6 col-lg-6 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".3s">
                                        <div class="it-blog-item white-bg mb-35">
                                            <div class="row gx-0">
                                                <div class="col-md-6">
                                                    <div class="it-blog-thumb" style="position: relative;">
                                                        <a href="">
                                                            @if($youtubeId)
                                                                <div class="video-container">
                                                                    <iframe src="https://www.youtube.com/embed/{{ $youtubeId }}" 
                                                                            title="{{ $item->title }}" 
                                                                            frameborder="0" 
                                                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                                                            allowfullscreen>
                                                                    </iframe>
                                                                </div>
                                                            @elseif(!empty($item->image))
                                                       <img class="w-100 rounded" src="{{ $item->imageSrc }}" alt="{{ trans_field($item, 'title') ?? trans_field($item, 'titre') }}">

                                                      <img class="w-100 rounded" src="{{ $item->imageSrc }}" alt="{{ trans_field($item, 'title') ?? trans_field($item, 'titre') }}">
													@endif
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="it-blog-content d-md-flex justify-content-center align-items-center">
                                                        <div>
                                                            <div class="it-blog-meta mb-30">
                                                                <span>
                                                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                                                        <path d="M0.468788 13.1562H2.81253V14.5625C2.81253 14.8213 3.02241 15.0312 3.28128 15.0312H15.5313C15.7901 15.0312 16 14.8213 16 14.5625V2.375C16 2.11612 15.7901 1.90625 15.5313 1.90625H13.1875V1.4375C13.1875 1.17862 12.9776 0.96875 12.7188 0.96875C12.4599 0.96875 12.25 1.17862 12.25 1.4375V1.90625H9.87502V1.4375C9.87502 1.17862 9.66514 0.96875 9.40627 0.96875C9.1474 0.96875 8.93752 1.17862 8.93752 1.4375V1.90625H6.59378V1.4375C6.59378 1.17862 6.3839 0.96875 6.12503 0.96875C5.86615 0.96875 5.65628 1.17862 5.65628 1.4375V1.90625H3.28128C3.02241 1.90625 2.81253 2.11612 2.81253 2.375V5.18749C2.81253 8.64217 1.37676 11.2999 0.168695 12.3274C0.0170703 12.4537 -0.0391483 12.6615 0.0280078 12.8471C0.0952264 13.0326 0.271414 13.1562 0.468788 13.1562Z" fill="#E03B3B"/>
                                                                    </svg>
                                                                    {{ $date }}
                                                                </span>
                                                            </div>
                                                            <h4 class="it-blog-title mb-25">
                                                                <a class="border-line-black news-title" href="">
                                                                    {{ trans_field($item, 'title') ?? trans_field($item, 'title') }}
                                                                </a>
                                                            </h4>
                                                            <p class="truncate-resume">{{ trans_field($item, 'resume') ?? '' }}</p>
                                                            <div class="it-blog-btn text-center">
                                                                <a href="{{ route('news.show', $item->slug) }}" class="it-btn-orange">
                                                                    <span>
                                                                        <span class="text-1">{{ __('site.read_more') }}</span>
                                                                        <span class="text-2">{{ __('site.read_more') }}</span>
                                                                    </span>
                                                                    <i>
                                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                                        </svg>
                                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                                        </svg>
                                                                    </i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @empty
                                <div class="col-12">
                                    <p>{{ __('site.no_news') }}</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
                @break

            @case('services')
                <!-- Section Services -->
                <div class="it-about-3-area p-relative pt-95 pb-45" id="section-{{ $section->section_key }}">
                    <img class="it-about-shape-1" src="assets/img/shape/about-1-1.png" alt="">
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="it-section-title-box text-center mb-65">
                                    <span class="it-section-subtitle">{{ __('site.services_subtitle') }}</span>
                                    <h4 class="it-section-title it-split-in-right mb-0" style="TEXT-ALIGN: center;">
                                        {{ $section->{'title_'.app()->getLocale()} ?? $section->title_ar }}
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="row gx-35">
                            <div class="services-container">
                                <a href="{{ route('concours.available') }}" class="service-box">
                                    <div class="title-icon-wrapper">
                                        <span class="service-icon"><i class="ri-file-list-line"></i></span>
                                        {{ __('site.services_competitions') }}
                                    </div>
                                    <span class="service-link">{{ __('site.services_apply_more') }}</span>
                                </a>

                                <a href="{{ url('page/49') }}" class="service-box">
                                    <div class="title-icon-wrapper">
                                        <span class="service-icon"><i class="ri-graduation-cap-line"></i></span>
                                        {{ __('site.services_training') }}
                                    </div>
                                    <span class="service-link">{{ __('site.services_apply_more') }}</span>
                                </a>

                                <a href="{{ url('page/62') }}" class="service-box">
                                    <div class="title-icon-wrapper">
                                        <span class="service-icon"><i class="ri-map-pin-line"></i></span>
                                        {{ __('site.services_regional') }}
                                    </div>
                                    <span class="service-link">{{ __('site.services_apply_more') }}</span>
                                </a>

                                <a href="{{ url('page/57') }}" class="service-box">
                                    <div class="title-icon-wrapper">
                                        <span class="service-icon"><i class="ri-book-line"></i></span>
                                        {{ __('site.services_library') }}
                                    </div>
                                    <span class="service-link">{{ __('site.services_apply_more') }}</span>
                                </a>

                                <a href="{{ url('page/50') }}" class="service-box">
                                    <div class="title-icon-wrapper">
                                        <span class="service-icon"><i class="ri-funds-line"></i></span>
                                        {{ __('site.services_projects') }}
                                    </div>
                                    <span class="service-link">{{ __('site.services_apply_more') }}</span>
                                </a>

                                <a href="{{ url('page/50') }}" class="service-box">
                                    <div class="title-icon-wrapper">
                                        <span class="service-icon"><i class="ri-community-line"></i></span>
                                        {{ __('site.service_association_funding_title') }}
                                    </div>
                                    <span class="service-link">{{ __('site.services_apply_more') }}</span>
                                </a>

                                <a href="{{ url('page/50') }}" class="service-box">
                                    <div class="title-icon-wrapper">
                                        <span class="service-icon"><i class="ri-trophy-line"></i></span>
                                        {{ __('site.service_events_title') }}
                                    </div>
                                    <span class="service-link">{{ __('site.services_apply_more') }}</span>
                                </a>

                                <a href="/gouvernorats" class="service-box">
                                    <div class="title-icon-wrapper">
                                        <span class="service-icon"><i class="ri-calendar-check-line"></i></span>
                                        {{ __('site.youth_centers_title') }}
                                    </div>
                                    <span class="service-link">{{ __('site.services_apply_more') }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @break

            @case('projects')
                <!-- Section Projects -->
                <div class="it-project-area it-project-style-2 z-index-1 pb-95 pt-45" id="section-{{ $section->section_key }}">
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="it-section-title-box text-center mb-65">
                                    <span class="it-section-subtitle">{{ __('site.services_projects') }}</span>
                                    <h4 class="it-section-title it-split-in-right mb-0" style="text-align: center;">
                                        {{ $section->{'title_'.app()->getLocale()} ?? $section->title_ar }}
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="it-project-wrapper p-relative">
                                    <div class="swiper-container it-project-5-active">
                                        <div class="swiper-wrapper">
                                            <!-- Projet 1 -->
                                            <div class="swiper-slide">
                                                <div class="it-project-item">
                                                    <div class="it-project-thumb">
                                                        <img class="w-100" src="assets/img/project/1.jpg" alt="">
                                                    </div>
                                                    <div class="it-project-2-content d-flex justify-content-between">
                                                        <div>
                                                            <h4 class="it-project-2-title">
                                                                @auth
                                                                    <a href="{{ route('salle-sport.index2') }}" class="border-line-white">
                                                                        {{ __('site.project_1') }}
                                                                    </a>
                                                                @endauth
                                                                @guest
                                                                    <a href="{{ route('login', ['redirectTo' => route('salle-sport.index2')]) }}" class="border-line-white">
                                                                        {{ __('site.project_1') }}
                                                                    </a>
                                                                @endguest
                                                            </h4>
                                                        </div>
                                                        <div class="it-project-arrow">
                                                            @auth
                                                                <a href="{{ route('salle-sport.index2') }}">
                                                            @endauth
                                                            @guest
                                                                <a href="{{ route('login', ['redirectTo' => route('salle-sport.index2')]) }}">
                                                            @endguest
                                                                <svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M11.103 0.952468C11.03 0.405028 10.527 0.0204122 9.97959 0.0934039L1.05854 1.28288C0.511097 1.35587 0.126481 1.85883 0.199473 2.40627C0.272465 2.95371 0.775425 3.33833 1.32287 3.26533L9.25269 2.20802L10.31 10.1378C10.383 10.6853 10.8859 11.0699 11.4334 10.9969C11.9808 10.9239 12.3654 10.421 12.2925 9.87352L11.103 0.952468ZM1.79436 13.6075L10.9061 1.69208L9.31739 0.477182L0.205642 12.3925L1.79436 13.6075Z" fill="white"/>
                                                                </svg>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Projet 2 -->
                                            <div class="swiper-slide">
                                                <div class="it-project-item">
                                                    <div class="it-project-thumb">
                                                        <img class="w-100" src="assets/img/project/2.jpg" alt="">
                                                    </div>
                                                    <div class="it-project-2-content d-flex justify-content-between">
                                                        <div>
                                                            <h4 class="it-project-2-title">
                                                                @auth
                                                                    <a href="{{ route('jeune_enfant.index') }}" class="border-line-white">
                                                                        {{ __('site.project_2') }}
                                                                    </a>
                                                                @endauth
                                                                @guest
                                                                    <a href="{{ route('login', ['redirectTo' => route('jeune_enfant.index')]) }}" class="border-line-white">
                                                                        {{ __('site.project_2') }}
                                                                    </a>
                                                                @endguest
                                                            </h4>
                                                        </div>
                                                        <div class="it-project-arrow">
                                                            @auth
                                                                <a href="{{ route('jeune_enfant.index') }}">
                                                            @endauth
                                                            @guest
                                                                <a href="{{ route('login', ['redirectTo' => route('jeune_enfant.index')]) }}">
                                                            @endguest
                                                                <svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M11.103 0.952468C11.03 0.405028 10.527 0.0204122 9.97959 0.0934039L1.05854 1.28288C0.511097 1.35587 0.126481 1.85883 0.199473 2.40627C0.272465 2.95371 0.775425 3.33833 1.32287 3.26533L9.25269 2.20802L10.31 10.1378C10.383 10.6853 10.8859 11.0699 11.4334 10.9969C11.9808 10.9239 12.3654 10.421 12.2925 9.87352L11.103 0.952468ZM1.79436 13.6075L10.9061 1.69208L9.31739 0.477182L0.205642 12.3925L1.79436 13.6075Z" fill="white"/>
                                                                </svg>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Projet 3 -->
                                            <div class="swiper-slide">
                                                <div class="it-project-item">
                                                    <div class="it-project-thumb">
                                                        <img class="w-100" src="assets/img/project/3.jpg" alt="">
                                                    </div>
                                                    <div class="it-project-2-content d-flex justify-content-between">
                                                        <div>
                                                            <h4 class="it-project-2-title">
                                                                @auth
                                                                    <a href="{{ route('jeunesse.index') }}" class="border-line-white">
                                                                        {{ __('site.project_3') }}
                                                                    </a>
                                                                @endauth
                                                                @guest
                                                                    <a href="{{ route('login', ['redirectTo' => route('jeunesse.index')]) }}" class="border-line-white">
                                                                        {{ __('site.project_3') }}
                                                                    </a>
                                                                @endguest
                                                            </h4>
                                                        </div>
                                                        <div class="it-project-arrow">
                                                            @auth
                                                                <a href="{{ route('jeunesse.index') }}">
                                                            @endauth
                                                            @guest
                                                                <a href="{{ route('login', ['redirectTo' => route('jeunesse.index')]) }}">
                                                            @endguest
                                                                <svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M11.103 0.952468C11.03 0.405028 10.527 0.0204122 9.97959 0.0934039L1.05854 1.28288C0.511097 1.35587 0.126481 1.85883 0.199473 2.40627C0.272465 2.95371 0.775425 3.33833 1.32287 3.26533L9.25269 2.20802L10.31 10.1378C10.383 10.6853 10.8859 11.0699 11.4334 10.9969C11.9808 10.9239 12.3654 10.421 12.2925 9.87352L11.103 0.952468ZM1.79436 13.6075L10.9061 1.69208L9.31739 0.477182L0.205642 12.3925L1.79436 13.6075Z" fill="white"/>
                                                                </svg>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Projet 4 -->
                                            <div class="swiper-slide">
                                                <div class="it-project-item">
                                                    <div class="it-project-thumb">
                                                        <img class="w-100" src="assets/img/project/4.jpg" alt="">
                                                    </div>
                                                    <div class="it-project-2-content d-flex justify-content-between">
                                                        <div>
                                                            <h4 class="it-project-2-title">
                                                                @auth
                                                                    <a href="{{ route('jeunesse2.index') }}" class="border-line-white">
                                                                        {{ __('site.project_4') }}
                                                                    </a>
                                                                @endauth
                                                                @guest
                                                                    <a href="{{ route('login', ['redirectTo' => route('jeunesse2.index')]) }}" class="border-line-white">
                                                                        {{ __('site.project_4') }}
                                                                    </a>
                                                                @endguest
                                                            </h4>
                                                        </div>
                                                        <div class="it-project-arrow">
                                                            @auth
                                                                <a href="{{ route('jeunesse2.index') }}">
                                                            @endauth
                                                            @guest
                                                                <a href="{{ route('login', ['redirectTo' => route('jeunesse2.index')]) }}">
                                                            @endguest
                                                                <svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M11.103 0.952468C11.03 0.405028 10.527 0.0204122 9.97959 0.0934039L1.05854 1.28288C0.511097 1.35587 0.126481 1.85883 0.199473 2.40627C0.272465 2.95371 0.775425 3.33833 1.32287 3.26533L9.25269 2.20802L10.31 10.1378C10.383 10.6853 10.8859 11.0699 11.4334 10.9969C11.9808 10.9239 12.3654 10.421 12.2925 9.87352L11.103 0.952468ZM1.79436 13.6075L10.9061 1.69208L9.31739 0.477182L0.205642 12.3925L1.79436 13.6075Z" fill="white"/>
                                                                </svg>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Projet 5 -->
                                            <div class="swiper-slide">
                                                <div class="it-project-item">
                                                    <div class="it-project-thumb">
                                                        <img class="w-100" src="assets/img/project/5.jpg" alt="">
                                                    </div>
                                                    <div class="it-project-2-content d-flex justify-content-between">
                                                        <div>
                                                            <h4 class="it-project-2-title">
                                                                @auth
                                                                    <a href="{{ route('formation.index') }}" class="border-line-white">
                                                                        {{ __('site.project_5') }}
                                                                    </a>
                                                                @endauth
                                                                @guest
                                                                    <a href="{{ route('login', ['redirectTo' => route('formation.index')]) }}" class="border-line-white">
                                                                        {{ __('site.project_5') }}
                                                                    </a>
                                                                @endguest
                                                            </h4>
                                                        </div>
                                                        <div class="it-project-arrow">
                                                            @auth
                                                                <a href="{{ route('formation.index') }}">
                                                            @endauth
                                                            @guest
                                                                <a href="{{ route('login', ['redirectTo' => route('formation.index')]) }}">
                                                            @endguest
                                                                <svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M11.103 0.952468C11.03 0.405028 10.527 0.0204122 9.97959 0.0934039L1.05854 1.28288C0.511097 1.35587 0.126481 1.85883 0.199473 2.40627C0.272465 2.95371 0.775425 3.33833 1.32287 3.26533L9.25269 2.20802L10.31 10.1378C10.383 10.6853 10.8859 11.0699 11.4334 10.9969C11.9808 10.9239 12.3654 10.421 12.2925 9.87352L11.103 0.952468ZM1.79436 13.6075L10.9061 1.69208L9.31739 0.477182L0.205642 12.3925L1.79436 13.6075Z" fill="white"/>
                                                                </svg>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Navigation swiper -->
                                    <div class="mt-50">
                                        <div class="row gx-0 align-items-center">
                                            <div class="col-lg-4 col-md-4 col-5">
                                                <div class="it-project-arrow-wrap">
                                                    <button class="arrow-prev">
                                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M0.292892 7.29289C-0.0976315 7.68342 -0.0976315 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM16 7H0.999999V9H16V7Z" fill="currentcolor"/>
                                                        </svg>
                                                    </button>
                                                    <button class="arrow-next">
                                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M15.7071 8.70711C16.0976 8.31658 16.0976 7.68342 15.7071 7.29289L9.34315 0.928932C8.95262 0.538408 8.31946 0.538408 7.92893 0.928932C7.53841 1.31946 7.53841 1.95262 7.92893 2.34315L13.5858 8L7.92893 13.6569C7.53841 14.0474 7.53841 14.6805 7.92893 15.0711C8.31946 15.4616 8.95262 15.4616 9.34315 15.0711L15.7071 8.70711ZM0 9H15V7H0V9Z" fill="currentcolor"/>
                                                        </svg>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-5">
                                                <div class="it-project-dots"></div>
                                            </div>
                                            <div class="col-lg-1 col-md-1 col-2">
                                                <div class="text-center">
                                                    <div class="swiper-fraction"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @break

            @case('trophies')
                <!-- Section Trophies -->
                <div class="it-blog-area it-blog-style-2 pt-95 pb-45" style="background:ghostwhite;" id="section-{{ $section->section_key }}">
                    <div class="container">
                        <div class="row gx-35">
                            <div class="col-xl-4">
                                <div class="it-blog-3-left">
                                    <div class="it-section-title-box mb-15">
                                        <span class="it-section-subtitle">{{ __('site.trophies_subtitle') }}</span>
                                        <h4 class="it-section-title it-split-in-right mb-0">
                                            {{ $section->{'title_'.app()->getLocale()} ?? $section->title_ar }}
                                        </h4>
                                    </div>
                                    <div class="it-blog-btn pb-10 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                                        <a href="{{ route('trophees.index') }}" class="it-btn-orange">
                                            <span>
                                                <span class="text-1">{{ __('site.trophies_browse') }}</span>
                                                <span class="text-2">{{ __('site.trophies_browse') }}</span>
												
												
                                            </span>
                                            <i>
                                                <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                </svg>
                                                <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                </svg>
                                            </i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-8">
                                @foreach($sectionsData['trophies'] as $item)
                                    <div class="it-blog-item mb-4">
                                        <div class="row align-items-center">
                                            <div class="col-lg-9 col-md-10">
                                                <div class="it-blog-item-left d-flex align-items-center">
                                                    <div class="it-blog-thumb" style="width: 300px; height: 170px; overflow: hidden; border-radius: 8px;">
                                                        @if(!empty($item->image))
<img src="{{ $item->imageSrc }}"
                                   alt="{{ trans_field($item, 'titre') ?? $item->title ?? __('site.no_image_alt') }}" style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
                            <img class="w-100 rounded" src="{{ $item->imageSrc }}"
                                  alt="{{ trans_field($item, 'titre') ?? $item->title ?? __('site.no_image_alt') }}" style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
                                                        @elseif(!empty($item->youtube_url))
                                                            @php
                                                                preg_match('/(youtu\.be\/|v=)([A-Za-z0-9_\-]+)/', $item->youtube_url, $matches);
                                                                $youtubeId = $matches[2] ?? null;
                                                            @endphp
                                                            @if($youtubeId)
                                                                <div class="ratio ratio-16x9">
                                                                    <iframe src="https://www.youtube.com/embed/{{ $youtubeId }}" title="YouTube video" allowfullscreen style="max-width:300px; height:auto;"></iframe>
                                                                </div>
                                                            @endif
                                                        @else
                                                            <img class="w-100 rounded" src="{{ asset('assets/img/no-image.jpg') }}" alt="Pas d'image disponible">
                                                        @endif
                                                    </div>

                                                    <!-- Titre et date -->
                                                    <div class="it-blog-content ms-3">
                                                        <div class="it-blog-meta mb-2">
                                                            <span class="text-muted">
                                                                <i class="fa fa-calendar text-danger me-1"></i>
                                                                {{ \Carbon\Carbon::parse($item->date)->format('Y.m.d') }}
                                                            </span>
                                                        </div>

                                                        <h4 class="it-blog-title mb-0">
                                                            <a class="border-line-black text-dark fw-bold" href="#">
                                                                {{ trans_field($item, 'title') }}
                                                            </a>
                                                        </h4>

                                                        <p class="d-block mb-3" style="color:#555; font-size:15px;">{{ trans_field($item, 'resume') }}</p>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Flèche -->
                                            <div class="col-lg-3 col-md-2 pb-10 text-center">
                                                <a href="{{ route('trophees.show', $item->slug) }}" class="it-btn-orange">
                                                    <span>
                                                        <span class="text-1">{{ __('site.read_more') }}</span>
                                                        <span class="text-2">{{ __('site.read_more') }}</span>
                                                    </span>
                                                    <i>
                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                        </svg>
                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                        </svg>
                                                    </i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                @break

            @case('universities')
                <!-- Section Universities -->
                <div class="it-brand-area" id="section-{{ $section->section_key }}">
                    <div class="container">
                        <div class="it-brand-ptb">
                            <div class="col-xl-12">
                                <div class="it-section-title-box text-center mb-65">
                                    <span class="it-section-subtitle">{{ __('site.sport_universities') }}</span>
                                    <h4 class="it-section-title it-split-in-right mb-0" style="TEXT-ALIGN: center;">
                                        {{ $section->{'title_'.app()->getLocale()} ?? $section->title_ar }}
                                    </h4>
                                </div>
                            </div>
                            
                            <div class="col-xl-12 col-lg-12 col-md-11">
                                <div class="swiper-container it-brand-active">
                                    <div class="swiper-wrapper slider-transtion d-flex align-items-center">
                                        @php
                                            $logosToShow = 18;
                                            $hasFederations = isset($sectionsData['universities']) && $sectionsData['universities']->count() > 0;
                                            
                                            if($hasFederations) {
                                                $federationsToShow = $sectionsData['universities'];
                                                foreach($federationsToShow as $federation) {
                                                    if($federation->logoSrc) {
                                        @endphp
                                                        <div class="swiper-slide">
                                                            <div class="it-brand-item">
                                                                <a href="{{ $federation->site_web ?: '#' }}" {{ $federation->site_web ? 'target="_blank"' : '' }}>
                                                                    <img src="{{ $federation->logoSrc }}" alt="{{ $federation->nom_ar }}" style="max-width: 150px; max-height: 100px; object-fit: contain;">
                                                                </a>
                                                            </div>
                                                        </div>
                                        @php
                                                    }
                                                }
                                                
                                                $currentCount = $federationsToShow->count();
                                                if($currentCount < $logosToShow) {
                                                    for($i = 1; $i <= ($logosToShow - $currentCount); $i++) {
                                        @endphp
                                                        <div class="swiper-slide">
                                                            <div class="it-brand-item">
                                                                <a href="#">
                                                                    <img src="{{ asset('assets/img/brand/' . $i . '.jpg') }}" alt="">
                                                                </a>
                                                            </div>
                                                        </div>
                                        @php
                                                    }
                                                }
                                            } else {
                                                for($i = 1; $i <= $logosToShow; $i++) {
                                        @endphp
                                                    <div class="swiper-slide">
                                                        <div class="it-brand-item">
                                                            <a href="#">
                                                                <img src="{{ asset('assets/img/brand/' . $i . '.jpg') }}" alt="">
                                                            </a>
                                                        </div>
                                                    </div>
                                        @php
                                                }
                                            }
                                        @endphp
                                    </div>
                                </div>
                            </div>
                            
                            <div class="it-about-2-btn d-flex justify-content-center pb-65">
                                <a href="{{ route('federation.public.list') }}" class="it-btn-orange">
                                    <span>
                                        <span class="text-1">{{ __('site.show_all') }}</span>
                                        <span class="text-2">{{ __('site.show_all') }}</span>
                                    </span>
                                    <i>
                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                        </svg>
                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                        </svg>
                                    </i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @break

            @case('youth_centers')
                <!-- Section Youth Centers -->
                <div class="it-project-3-area pt-65 pb-45" style="background:ghostwhite;" id="section-{{ $section->section_key }}">
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="it-section-title-box text-center mb-65">
                                    <span class="it-section-subtitle">{{ __('site.youth_centers_title') }}</span>
                                    <h4 class="it-section-title it-split-in-right mb-0" style="TEXT-ALIGN: center;">
                                        {{ $section->{'title_'.app()->getLocale()} ?? $section->title_ar }}
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="it-project-3-wrapper p-relative">
                                    <div class="swiper-container it-project-3-active">
                                        <div class="swiper-wrapper">
                                            @foreach($sectionsData['youth_centers'] as $auberge)
                                                <div class="swiper-slide">
                                                    <div class="luxury-room-card p-relative">
                                                        <div class="room-thumb">
                                                            @php 
                                                                $src = $auberge->gouvernoratImageSrc ?? $auberge->imageSrc ?? null;
                                                                
                                                                if ($auberge->gouvernoratImageSrc && $auberge->gouvernorat) {
                                                                    $altText = trans_field($auberge->gouvernorat, 'nom') ?? 
                                                                              ($auberge->gouvernorat->nom_ar ?? 
                                                                               $auberge->gouvernorat->nom_fr ?? 
                                                                               $auberge->gouvernorat->nom_en ?? '');
                                                                } else {
                                                                    $altText = trans_field($auberge, 'nom') ?? 
                                                                              ($auberge->nom_ar ?? 
                                                                               $auberge->nom_fr ?? 
                                                                               $auberge->nom_en ?? '');
                                                                }
                                                            @endphp

                                                            @if($src)
                                                                <img src="{{ $src }}" alt="{{ $altText }}" style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
                                                            @else
                                                                <img src="{{ asset('assets/img/no-image.jpg') }}" alt="{{ __('site.no_image_alt') }}" style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
                                                            @endif
                                                        </div>
                                                        <div class="room-content">
                                                            <h4 class="room-title">
                                                                <a href="">{{ trans_field($auberge, 'nom') }}</a>
                                                            </h4>

                                                            <!-- Capacité -->
                                                            <div class="room-meta">
                                                                @if($auberge->nb_chambres > 0)
                                                                    <span><i class="fas fa-bed"></i>{{ trans_choice('site.auberge_capacity_beds', $auberge->nb_chambres, ['count' => $auberge->nb_chambres]) }}</span>
                                                                @endif
                                                                @if($auberge->capacite_tentes > 0)
                                                                    <span><i class="fas fa-campground"></i>{{ trans_choice('site.auberge_capacity_tents', $auberge->capacite_tentes, ['count' => $auberge->capacite_tentes]) }}</span>
                                                                @endif
                                                            </div>

                                                            <!-- Services -->
                                                            <div class="room-features">
                                                                @if($auberge->services_auberge->isNotEmpty())
                                                                    @foreach($auberge->services_auberge as $service)
                                                                        <div class="feature">
                                                                            <i class="fas fa-check"></i>
                                                                            <span>{{ $service->{'nom_'.app()->getLocale()} ?? $service->nom_ar }}</span>
                                                                        </div>
                                                                    @endforeach
                                                                @else
                                                                    <div class="feature"><span>-</span></div>
                                                                @endif
                                                            </div>

                                                            <!-- Contact -->
                                                            <div class="room-contact">
                                                                @if($auberge->contact_tel)
                                                                    <i class="fas fa-phone"></i> {{ $auberge->contact_tel }}
                                                                @endif
                                                                @if($auberge->adresse)
                                                                    <i class="fas fa-map-marker-alt"></i> {{ $auberge->adresse }}
                                                                @endif
                                                            </div>

                                                            <div class="it-blog-btn">
                                                                <a href="{{ route('auberge.show', $auberge->id) }}" class="it-btn-orange">
                                                                    <span>
                                                                        <span class="text-1">{{ __('site.book_now') }}</span>
                                                                        <span class="text-2">{{ __('site.book_now') }}</span>
                                                                    </span>
                                                                    <i>
                                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                                        </svg>
                                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                                        </svg>
                                                                    </i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="it-project-arrow-wrap d-none d-xl-block">
                                    <button class="arrow-prev">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M0.292892 7.29289C-0.0976315 7.68342 -0.0976315 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM16 7H0.999999V9H16V7Z" fill="currentcolor"/>
                                        </svg>
                                    </button>
                                    <button class="arrow-next">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M15.7071 8.70711C16.0976 8.31658 16.0976 7.68342 15.7071 7.29289L9.34315 0.928932C8.95262 0.538408 8.31946 0.538408 7.92893 0.928932C7.53841 1.31946 7.53841 1.95262 7.92893 2.34315L13.5858 8L7.92893 13.6569C7.53841 14.0474 7.53841 14.6805 7.92893 15.0711C8.31946 15.4616 8.95262 15.4616 9.34315 15.0711L15.7071 8.70711ZM0 9H15V7H0V9Z" fill="currentcolor"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="it-about-2-btn d-flex justify-content-end pb-65">
                                    <a href="/gouvernorats" class="it-btn-orange">
                                        <span>
                                            <span class="text-1">{{ __('site.show_all') }}</span>
                                            <span class="text-2">{{ __('site.show_all') }}</span>
                                        </span>
                                        <i>
                                            <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                            </svg>
                                            <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                            </svg>
                                        </i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @break

            @case('contact')
                <!-- Section Contact -->
                <div class="it-contact-area z-index-1 pt-130 pb-130" data-background="assets/img/shape/contact-1-2.jpg" id="section-{{ $section->section_key }}">
                    <img class="it-contact-shape-2" src="assets/img/shape/choose-1-1.png" alt="">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-xl-6 col-lg-6">
                                <div class="it-contact-left">
                                    <div class="it-section-title-box mb-20">
                                        <span class="it-section-subtitle">{{ __('site.contact_subtitle') }}</span>
                                    </div>
                                    <p class="mb-30 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".3s">
                                        {{ __('site.contact_description') }}
                                    </p>
                                    <div class="it-contact-list-wrap">
                                        <div class="row">
                                            <div class="col-lg-5 col-md-5 col-sm-6">
                                                <div class="it-contact-list-box wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                                                    <div class="it-contact-list mb-40">
                                                        <span>{{ __('site.contact_phone') }}</span>
                                                        <a class="border-line-white" href="tel:71841433">71.841.433</a>
                                                    </div>
                                                    <div class="it-contact-list">
                                                        <span>{{ __('site.contact_email') }}</span>
                                                        <a class="border-line-white" href="mailto:mjsep@mjs.tn">mjsep@mjs.tn</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-sm-6 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".7s">
                                                <div class="it-contact-list-box">
                                                    <div>
                                                        <div class="it-contact-list mb-40">
                                                            <span>{{ __('site.contact_address') }}</span>
                                                            <a class="border-line-white" href="#">
                                                                {{ __('site.contact_address_full') }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-lg-6">
                                <div class="it-contact-form-box z-index-1 p-relative">
                                    <h4 class="it-contact-form-title it-split-in-right mb-10">
                                        {{ $section->{'title_'.app()->getLocale()} ?? $section->title_ar }}
                                    </h4>
                                    <p>{{ __('site.contact_form_paragraph') }}</p>
                                    
                                    @if(session('contact_success'))
                                        <div class="alert alert-success mb-3">{{ session('contact_success') }}</div>
                                    @endif

                                    @if ($errors->any())
                                        <div class="alert alert-danger mb-3">
                                            <ul class="mb-0">
                                                @foreach ($errors->all() as $err)
                                                    <li>{{ $err }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                    <form id="contactForm" action="{{ route('contact.submit') }}" method="POST">
                                        @csrf
                                        <div class="it-contact-input-wrap">
                                            <div class="row gx-30">
                                                <div class="col-sm-6 mb-20">
                                                    <div class="it-contact-input-box">
                                                        <input type="text" name="name" placeholder="{{ __('site.contact_placeholder_name') }}" value="{{ old('name') }}" required>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 mb-20">
                                                    <div class="it-contact-input-box">
                                                        <input type="email" name="email" placeholder="{{ __('site.contact_placeholder_email') }}" value="{{ old('email') }}" required>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 mb-20">
                                                    <div class="it-contact-input-box">
                                                        <input type="text" name="phone" placeholder="{{ __('site.contact_placeholder_phone') }}" value="{{ old('phone') }}">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 mb-20">
                                                    <div class="it-contact-input-box">
                                                        <div class="postbox__select">
                                                            <select name="subject" required>
                                                                <option selected disabled>{{ __('site.contact_subject') }}</option>
                                                                <option value="inquiry">{{ __('site.contact_option_inquiry') }}</option>
                                                                <option value="note">{{ __('site.contact_option_note') }}</option>
                                                                <option value="complaint">{{ __('site.contact_option_complaint') }}</option>
                                                                <option value="suggestion">{{ __('site.contact_option_suggestion') }}</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 mb-40">
                                                    <div class="it-contact-input-box">
                                                        <textarea name="message" placeholder="{{ __('site.contact_message_placeholder') }}" required>{{ old('message') }}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="it-contact-btn">
                                                <button type="submit" class="it-btn-orange">
                                                    <span>
                                                        <span class="text-1">{{ __('site.contact_send') }}</span>
                                                        <span class="text-2">{{ __('site.contact_send') }}</span>
                                                    </span>
                                                    <i>
                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                        </svg>
                                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                        </svg>
                                                    </i>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                    <img class="it-contact-shape-1" src="assets/img/shape/contact-1-1.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @break
        @endswitch
    @endforeach
</main>

<style>
    .it-blog-thumb {
        position: relative;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        border-radius: 8px;
        overflow: hidden;
    }

    .video-container {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        border-radius: 8px;
        overflow: hidden;
        background: #000;
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .it-blog-thumb img {
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
        display: block;
    }
</style>

<script>
    // Script pour égaliser la hauteur des cartes news
    document.addEventListener("DOMContentLoaded", function() {
        const section = document.querySelector('.news-section');
        if (!section) return;

        const items = section.querySelectorAll('.it-blog-content');
        const MAX_HEIGHT = 500;

        function setHeights() {
            let maxHeight = 0;
            items.forEach(el => el.style.height = 'auto');
            items.forEach(el => {
                const height = el.offsetHeight;
                if(height > maxHeight) maxHeight = height;
            });
            const finalHeight = Math.min(maxHeight, MAX_HEIGHT);
            items.forEach(el => el.style.height = finalHeight + 'px');
        }

        setHeights();
        window.addEventListener('resize', setHeights);
    });

    // Script pour égaliser la hauteur des cartes auberges
    document.addEventListener("DOMContentLoaded", function() {
        function setEqualHeights() {
            const cards = document.querySelectorAll('.luxury-room-card');
            let maxHeight = 0;
            cards.forEach(card => card.style.height = 'auto');
            cards.forEach(card => {
                const h = card.offsetHeight;
                if(h > maxHeight) maxHeight = h;
            });
            cards.forEach(card => card.style.height = maxHeight + 'px');
        }

        setEqualHeights();
        window.addEventListener('resize', setEqualHeights);
    });

    // Script pour le scroll smooth
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if(target){
                target.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
</script>
@endsection