@extends('layouts.app')

@push('vendor-styles')
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/swiper-bundle.min.css') }}">
    <link rel="preload" as="image" href="{{ asset('assets/images/banner-home.webp') }}" type="image/webp" fetchpriority="high">
@endpush

@push('vendor-scripts')
    <script src="{{ asset('assets/js/vendor/swiper-bundle.min.js') }}" defer></script>
@endpush

@section('title', 'SFER Formations | Société scientifique de formation en rééducation')

@section('meta_description', 'SFER - Société scientifique de formation en rééducation. Formations professionnelles certifiantes pour kinésithérapeutes, ergothérapeutes et professionnels de la rééducation. Excellence pédagogique et expertise reconnue.')


@section('content')

<!-- Hero Banner -->
@if(isset($push) && $push->count() > 0)
<div class="hero-banner hero-style-1">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="banner-content">
                    <!-- <h1 class="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Get <span class="color-secondary">2500+</span> <br>Best Online Courses From EduBlink</h1> -->

                    @if($push->translate()->title)
                    <h1 class="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">
                        {!! nl2br(e($push->translate()->title)) !!}
                    </h1>
                    @else
                    <h1 class="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">
                        Excellence en Formation Rééducation
                    </h1>
                    @endif

                    <p data-sal-delay="200" data-sal="slide-up" data-sal-duration="1000">{{ __('home.hero_intro') }}</p>
                    <div class="banner-btn" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
                        <a href="{{ route('trainings.index') }}" class="edu-btn">{{ __('home.our_trainings') }} <i class="icon-4"></i></a>
                    </div>
                    <!-- <ul class="shape-group">
                        <li class="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <img data-depth="2" src="{{ asset('assets/images/about/shape-13.png') }}" alt="Shape">
                        </li>
                    </ul> -->
                </div>
            </div>
            <div class="col-lg-6">
                <div class="banner-thumbnail">
                    <div class="thumbnail" data-sal-delay="500" data-sal="slide-left" data-sal-duration="1000">
                        <x-picture
                            src="{{ asset('assets/images/banner-home.png') }}"
                            :alt="$push->translate()->title ?? 'SFER Formations'"
                            fetchpriority="high"
                            width="535"
                            height="605"
                        />
                    </div>
                    <!-- <div class="instructor-info" data-sal-delay="600" data-sal="slide-up" data-sal-duration="1000">
                                <div class="inner">
                                    <h5 class="title">Instrunctor</h5>
                                    <div class="media">
                                        <div class="thumb">
                                            <img src="assets/images/banner/author-1.png" alt="Images">
                                        </div>
                                        <div class="content">
                                            <span>200+</span> Instactors
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                    <!-- <ul class="shape-group">
                        <li class="shape-1" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <img data-depth="1.5" src="{{ asset('assets/images/about/shape-15.png') }}" alt="Shape">
                        </li>
                        <li class="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <img data-depth="-1.5" src="{{ asset('assets/images/cta/shape-10.png') }}" alt="Shape">
                        </li>
                        <li class="shape-3 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <span data-depth="3" class="circle-shape"></span>
                        </li>
                        <li class="shape-4" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <img data-depth="-1" src="{{ asset('assets/images/cta/shape-08.png') }}" alt="Shape">
                        </li>
                        <li class="shape-5 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <img data-depth="1.5" src="{{ asset('assets/images/about/shape-13.png') }}" alt="Shape">
                        </li>
                        <li class="shape-6 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <img data-depth="-2" src="{{ asset('assets/images/about/shape-18.png') }}" alt="Shape">
                        </li>
                    </ul> -->
                </div>
            </div>
        </div>
    </div>
    <div class="shape-7">
        <img src="{{ asset('assets/images/about/h-1-shape-01.png') }}" alt="Shape">
    </div>
</div>
@endif

<div class="features-area-2">
            <div class="container">
                <div class="features-grid-wrap">
                    <div class="features-box features-style-2 edublink-svg-animate">
                        <div class="icon">
                            <img class="svgInject" src="{{ asset('assets/images/animated-svg-icons/pro-q-kine-agrement.svg') }}" alt="animated icon" loading="lazy" width="48" height="48">
                        </div>
                        <div class="content">
                            <h5 class="title">{{ __('home.feature_proqkine') }}</h5>
                        </div>
                    </div>
                    <div class="features-box features-style-2 edublink-svg-animate">
                        <div class="icon">
                            <img class="svgInject" src="{{ asset('assets/images/animated-svg-icons/agrement-cheques-formations.svg') }}" alt="animated icon" loading="lazy" width="48" height="48">
                        </div>
                        <div class="content">
                            <h5 class="title">{{ __('home.feature_cheques') }}</h5>
                        </div>
                    </div>
                    <div class="features-box features-style-2 edublink-svg-animate">
                        <div class="icon certificate">
                            <img class="svgInject" src="{{ asset('assets/images/animated-svg-icons/certificate.svg') }}" alt="animated icon" loading="lazy" width="48" height="48">
                        </div>
                        <div class="content">
                            <h5 class="title">{{ __('home.feature_qpp') }}</h5>
                        </div>
                    </div>
                    <div class="features-box features-style-2 edublink-svg-animate">
                        <div class="icon">
                            <img class="svgInject" src="{{ asset('assets/images/animated-svg-icons/evidence-based-practice.svg') }}" alt="animated icon" loading="lazy" width="48" height="48">
                        </div>
                        <div class="content">
                            <h5 class="title">{{ __('home.feature_ebp') }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<!-- Présentation SFER (vidéo + texte) -->
<div class="sfer-presentation-area">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6" data-sal-delay="100" data-sal="slide-right" data-sal-duration="800">
                <div class="sfer-presentation-video" id="sfer-presentation-video">
                    <video class="sfer-presentation-video-el"
                           poster="{{ asset('storage/videos/posters/SFERPresentation.jpg') }}"
                           data-src="{{ asset('storage/videos/SFERPresentation.mp4') }}"
                           playsinline
                           muted
                           controlslist="nodownload">
                    </video>
                    <button type="button" class="sfer-presentation-play" aria-label="{{ __('Lire la vidéo de présentation') }}">
                        <i class="icon-18"></i>
                    </button>
                </div>
            </div>
            <div class="col-lg-6 d-flex align-items-center" data-sal-delay="150" data-sal="slide-left" data-sal-duration="800">
                <div class="sfer-presentation-content">
                    <h2 class="title">{{ __('home.presentation_title') }}</h2>
                    <span class="shape-line"><i class="icon-19"></i></span>
                    <p class="mb-0">{{ __('home.presentation_text') }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Top Categories -->
@isset($categories)
@if($categories->isNotEmpty())
<div class="edu-categorie-area categorie-area-2 edu-section-gap">
    <div class="container">
        <div class="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
            <h2 class="title">{{ __('Catégories de formations') }}</h2>
            <span class="shape-line"><i class="icon-19"></i></span>
            <p>{{ __('Découvrez nos formations par domaine de spécialisation') }}</p>
        </div>

        <div class="row g-5">
            @php
            $colorStyles = ['color-primary-style', 'color-secondary-style', 'color-extra01-style', 'color-tertiary-style', 'color-extra02-style', 'color-extra03-style', 'color-extra04-style', 'color-extra05-style', 'color-extra06-style'];
            $icons = ['icon-9', 'icon-10', 'icon-11', 'icon-12', 'icon-13', 'icon-14', 'icon-15', 'icon-16', 'icon-17'];
            $delays = [50, 100, 150];
            @endphp
            @foreach($categories as $index => $category)
            <div class="col-lg-4 col-md-6" data-sal-delay="{{ $delays[$index % 3] }}" data-sal="slide-up" data-sal-duration="800">
                <div class="categorie-grid categorie-style-2 position-relative {{ $colorStyles[$index % count($colorStyles)] }} {{ $index === 0 ? 'edublink-svg-animate' : '' }}">
                    <!-- <div class="icon">
                        @if($category->image_url)
                        <img src="{{ $category->image_url }}" alt="{{ $category->display_name }}" class="categorie-icon-img">
                        @else
                        <i class="{{ $icons[$index % count($icons)] }}"></i>
                        @endif
                    </div> -->
                    <div class="content text-center">
                        <a href="{{ route('trainings.index', ['sort' => $category->id]) }}" class="stretched-link categorie-card-link">
                            <h5 class="title">{{ $category->display_name }}</h5>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div class="row justify-content-center g-5 categorie-all-row">
            <div class="col-lg-4 col-md-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
                <div class="categorie-grid categorie-style-2 categorie-all-trainings color-primary-style position-relative">
                    <div class="content">
                        <a href="{{ route('trainings.index') }}" class="stretched-link categorie-card-link">
                            <h5 class="title">{{ __('Toutes les formations') }}</h5>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
@endisset

<!-- certified workshops -->
<div class="edu-categorie-area categorie-area-5 section-gap-equal">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-9 col-xl-8">
                <div class="sfer-certified-panel" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <div class="section-title section-center mb--20">
                        <h2 class="title">{{ __('home.certified_pre') }} <span class="color-primary">{{ __('home.certified_highlight') }}</span></h2>
                        <span class="shape-line"><i class="icon-19"></i></span>
                        <p>{{ __('home.certified_text') }}</p>
                        <a href="{{ route('trainings.index') }}" class="edu-btn">{{ __('home.discover_trainings') }} <i class="icon-4"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Formations à venir prochainement -->
@isset($upcomingSessions)
@if($upcomingSessions->isNotEmpty())
<div class="home-online-art-course edu-course-area section-gap-equal">
    <div class="container edublink-animated-shape">
        <div class="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
            <span class="pre-title">{{ __('Formations') }}</span>
            <h2 class="title">{{ __('Formations à venir') }}</h2>
            <span class="shape-line"><i class="icon-19"></i></span>
        </div>
        <div class="row g-5">
            @foreach($upcomingSessions as $index => $session)
            @php
            $training = $session->training;
            $sessionDate = $session->start_date;
            $badgeMonth = ucfirst(rtrim($sessionDate->locale(app()->getLocale())->translatedFormat('M'), '.'));
            $delay = ($index + 1) * 100;
            @endphp
            <div class="col-lg-4 col-md-6" data-sal-delay="{{ $delay }}" data-sal="slide-up" data-sal-duration="800">
                <div class="edu-event event-style-1">
                    <div class="inner">
                        <div class="thumbnail">
                            <a href="{{ $training->url }}">
                                @if($training->image_url)
                                <img src="{{ $training->thumbnail_url }}" alt="{{ $training->title }}">
                                @else
                                <img src="{{ asset('assets/images/event/event-01.jpg') }}" alt="{{ $training->title }}">
                                @endif
                            </a>
                            <div class="event-time">
                                <span>
                                    <i class="icon-33"></i>
                                    @if($session->duration_badge_label)
                                        {{ $session->duration_badge_label }}
                                    @else
                                        {{ $sessionDate->locale(app()->getLocale())->translatedFormat('d M Y') }}
                                    @endif
                                </span>
                            </div>
                        </div>
                        <div class="content">
                            <div class="event-date sfer-event-date-session" title="{{ $badgeMonth }} {{ $sessionDate->format('Y') }}">
                                <span class="day">{{ $badgeMonth }}</span>
                                <span class="month">{{ $sessionDate->format('Y') }}</span>
                            </div>
                            <h5 class="title"><a href="{{ $training->url }}">{{ $training->title }}</a></h5>
                            <p>{{ Str::limit($training->accroche_first ?: $training->accroche_second ?: '', 100) }}</p>
                            <div class="read-more-btn">
                                <a class="edu-btn btn-small" href="{{ $training->url }}">{{ __('En savoir plus') }} <i class="icon-4"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="event-view-all-btn sal-animate" data-sal-delay="150" data-sal="slide-up" data-sal-duration="1200">
            <h6 class="view-text"><a href="{{ route('trainings.index') }}" class="btn-transparent">{{ __('Découvrez toutes nos formations à venir.') }} <i class="icon-4"></i></a></h6>
        </div>
        <ul class="shape-group">
            <li class="shape-1" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                <img class="rotateit" src="{{ asset('assets/images/about/shape-13.png') }}" alt="Shape">
            </li>
            <li class="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                <span data-depth=".9"></span>
            </li>
        </ul>
    </div>
</div>
@endif
@endisset

<!-- Témoignages -->
@isset($testimonials)
@if($testimonials->isNotEmpty())
<div class="testimonial-area-8 section-gap-equal">
    <div class="container edublink-animated-shape">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <span class="pre-title">{{ __('Témoignages') }}</span>
                    <h2 class="title">{{ __('Ce que disent nos participants') }}</h2>
                    <span class="shape-line"><i class="icon-19"></i></span>
                </div>
            </div>
        </div>
        <div class="row g-lg-5 sfer-testimonials-row">

            <div class="col-lg-8" data-sal-delay="150" data-sal="slide-left" data-sal-duration="800">
                <div class="testimonial-activation swiper">
                    <div class="swiper-wrapper">
                        @foreach($testimonials as $testimonial)
                        <div class="swiper-slide">
                            <div class="testimonial-slide">
                                <div class="content">
                                    <div class="testimonial-content mb-0">@sanitized($testimonial->content)</div>
                                    <div class="info sfer-testimonial-author">
                                        @if($testimonial->image_url)
                                        <div class="sfer-testimonial-avatar">
                                            <img src="{{ $testimonial->image_url }}" alt="{{ $testimonial->name }}">
                                        </div>
                                        @endif
                                        <div>
                                            <h5 class="title">{{ $testimonial->name }}</h5>
                                            <span class="subtitle">{{ $testimonial->description }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-lg-4 sfer-testimonials-video-col" data-sal-delay="100" data-sal="slide-right" data-sal-duration="800">
                <div class="sfer-testimonials-video" id="sfer-testimonials-video">
                    <video class="sfer-presentation-video-el"
                           poster="{{ asset('storage/videos/posters/SFERTestimonials.jpg') }}"
                           data-src="{{ asset('storage/videos/SFERTestimonials.mp4') }}"
                           playsinline
                           controlslist="nodownload">
                    </video>
                    <button type="button" class="sfer-presentation-play" aria-label="{{ __('Lire la vidéo des témoignages') }}">
                        <i class="icon-18"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
@endisset

<!-- Partenaires (défilement automatique) -->
@isset($partners)
@if($partners->isNotEmpty())
<div class="edu-brand-area brand-area-4 section-gap-equal home-partners-block">
    <div class="container edublink-animated-shape">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <h2 class="title">{{ __('home.partners_title') }}</h2>
                    <span class="shape-line"><i class="icon-19"></i></span>
                </div>
            </div>
        </div>
        <div class="swiper home-partners-marquee">
            <div class="swiper-wrapper">
                @foreach($partners as $partner)
                <div class="swiper-slide">
                    <div class="home-partner-slide">
                        @if($partner->link)
                        <a href="{{ $partner->link }}" target="_blank" rel="noopener noreferrer" class="home-partner-slide-link">
                            @if($partner->image_url)
                            <img src="{{ $partner->image_url }}" alt="{{ $partner->name }}" class="home-partner-logo" loading="lazy" width="160" height="80">
                            @else
                            <span class="home-partner-name-fallback">{{ $partner->name }}</span>
                            @endif
                        </a>
                        @else
                        <span class="home-partner-slide-link is-static">
                            @if($partner->image_url)
                            <img src="{{ $partner->image_url }}" alt="{{ $partner->name }}" class="home-partner-logo" loading="lazy" width="160" height="80">
                            @else
                            <span class="home-partner-name-fallback">{{ $partner->name }}</span>
                            @endif
                        </span>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>
@endif
@endisset



@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        function initVideoPlayer(wrapId, options) {
            options = options || {};
            var wrap = document.getElementById(wrapId);
            if (!wrap) return;
            var video = wrap.querySelector('.sfer-presentation-video-el');
            var playBtn = wrap.querySelector('.sfer-presentation-play');
            if (!video || !playBtn) return;

            var videoSrc = video.getAttribute('data-src');
            if (!videoSrc) return;

            var isLoaded = false;

            if (options.muted) {
                video.muted = true;
            }

            playBtn.addEventListener('click', function () {
                if (playBtn.disabled) return;

                if (!isLoaded) {
                    playBtn.disabled = true;
                    wrap.classList.add('is-loading');

                    video.src = videoSrc;
                    video.load();
                    isLoaded = true;

                    video.addEventListener('loadeddata', function onLoaded() {
                        video.removeEventListener('loadeddata', onLoaded);
                        wrap.classList.remove('is-loading');
                        playBtn.disabled = false;
                        startPlayback();
                    }, { once: true });

                    video.addEventListener('error', function onError() {
                        video.removeEventListener('error', onError);
                        wrap.classList.remove('is-loading');
                        playBtn.disabled = false;
                    }, { once: true });

                    return;
                }

                startPlayback();
            });

            function startPlayback() {
                if (options.muted) {
                    video.muted = true;
                }
                video.setAttribute('controls', 'controls');
                wrap.classList.add('is-playing');
                video.play().catch(function () {
                    wrap.classList.remove('is-playing');
                });
            }

            video.addEventListener('pause', function () {
                if (video.currentTime === 0 || video.ended) {
                    wrap.classList.remove('is-playing');
                }
            });
            video.addEventListener('ended', function () {
                wrap.classList.remove('is-playing');
            });
        }

        initVideoPlayer('sfer-presentation-video', { muted: true });
        initVideoPlayer('sfer-testimonials-video');
    });
</script>
@endpush