@extends('layouts.app')

@section('title', __('about.page_title'))
@section('meta_description', __('about.meta_description'))

@section('content')

<!--=       Section 1 - Breadcrumb / Titre de la page      =-->
<div class="edu-breadcrumb-area breadcrumb-style-2 bg-image bg-image--19">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">{{ $page?->title ?? __('about.page_title') }}</h1>
            </div>
            <ul class="edu-breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ LaravelLocalization::localizeUrl('/') }}">{{ __('navigation.home') }}</a>
                </li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('about.page_title') }}</li>
            </ul>
        </div>
    </div>
</div>

<!--=       Section 2 - Notre mission (texte + image + CTA)      =-->
<div class="section-gap-large edu-about-area about-style-7">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-5">
                <div class="about-content">
                    <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <span class="pre-title">{{ __('about.mission_subtitle') }}</span>
                        <h2 class="title">{!! __('about.mission_title') !!}</h2>
                        <span class="shape-line"><i class="icon-19"></i></span>
                        <p>{{ $page?->teaser ?? __('about.mission_text') }}</p>
                    </div>
                    @if($page?->content)
                    <div class="mission-content" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        @sanitized($page->content)
                    </div>
                    @else
                    <ul class="features-list" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <li>{{ __('about.feature_1') }}</li>
                        <li>{{ __('about.feature_2') }}</li>
                        <li>{{ __('about.feature_3') }}</li>
                    </ul>
                    @endif
                    <div class="mt-4" data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                        <a href="{{ route('trainings.index') }}" class="edu-btn btn-medium">{{ __('about.cta_mission') }} <i class="icon-4"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="about-image-gallery">
                    <img class="main-img-1" src="{{ asset('assets/images/about/about-11.webp') }}" alt="{{ __('about.page_title') }}">
                    <img class="main-img-2" src="{{ asset('assets/images/about/about-12.webp') }}" data-sal-delay="150" data-sal="slide-down" data-sal-duration="800" alt="{{ __('about.page_title') }}">
                    <ul class="shape-group">
                        <li class="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                            <img data-depth="2" src="{{ asset('assets/images/about/shape-39.png') }}" alt="Shape">
                        </li>
                        <li class="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                            <img data-depth="-2" src="{{ asset('assets/images/about/shape-13.png') }}" alt="Shape">
                        </li>
                        <li class="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                            <img data-depth="-1.8" src="{{ asset('assets/images/about/shape-13.png') }}" alt="Shape">
                        </li>
                        <li class="shape-4 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                            <img src="{{ asset('assets/images/cta/shape-08.png') }}" alt="Shape">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <ul class="shape-group">
        <li class="shape-1" data-sal-delay="500" data-sal="fade" data-sal-duration="200"></li>
    </ul>
</div>

<!--=       Section 3 - Logos des partenaires      =-->
@if($partners->isNotEmpty())
<div class="edu-brand-area brand-area-4 gap-lg-bottom-equal">
    <div class="container">
        <div class="brand-grid-wrap brand-style-2">
            @foreach($partners as $partner)
            <div class="brand-grid">
                @if($partner->link)
                <a href="{{ $partner->link }}" target="_blank" rel="noopener">
                    <img src="{{ $partner->image_url }}" alt="{{ $partner->name }}">
                </a>
                @else
                <img src="{{ $partner->image_url }}" alt="{{ $partner->name }}">
                @endif
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif

<!--=       Section 4 - Nos formateurs (texte + aperçu + CTA)      =-->
<div class="edu-team-area team-area-5 section-gap-large">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-5">
                <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <span class="pre-title">{{ __('about.trainers_subtitle') }}</span>
                    <h2 class="title">{{ __('about.trainers_title') }}</h2>
                    <span class="shape-line"><i class="icon-19"></i></span>
                    <p>{{ __('about.trainers_text') }}</p>
                    <a href="{{ route('team.index') }}" class="edu-btn btn-medium mt-3">{{ __('about.cta_trainers') }} <i class="icon-4"></i></a>
                </div>
            </div>
            <div class="col-lg-7">
                @if($trainersPreview->isNotEmpty())
                <div class="row g-4">
                    @foreach($trainersPreview as $member)
                    <div class="col-6 col-md-3" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <div class="edu-team-grid team-style-1">
                            <div class="inner">
                                <div class="thumbnail-wrap">
                                    <div class="thumbnail">
                                        <a href="{{ route('team.show', ['slug' => $member->slug]) }}">
                                            @if($member->image_url)
                                            <img src="{{ $member->image_url }}" alt="{{ $member->full_name }}">
                                            @else
                                            <img src="{{ asset('assets/images/no-photo.png') }}" alt="{{ $member->full_name }}">
                                            @endif
                                        </a>
                                    </div>
                                </div>
                                <div class="content">
                                    <h5 class="title">
                                        <a href="{{ route('team.show', ['slug' => $member->slug]) }}">{{ $member->full_name }}</a>
                                    </h5>
                                    <span class="designation">{{ $member->title }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="about-image-gallery">
                    <img class="main-img-1" src="{{ asset('assets/images/about/about-13.webp') }}" alt="{{ __('about.trainers_title') }}">
                    <ul class="shape-group">
                        <li class="shape-1 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-33.png') }}" alt="Shape"></li>
                        <li class="shape-2 scene"><img data-depth="-2" src="{{ asset('assets/images/about/shape-25.png') }}" alt="Shape"></li>
                    </ul>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection