@extends('site.layouts.app')

@php
    $rp = app()->getLocale() === 'ar' ? 'site.ar.' : 'site.';
    $about = $page->sectionContent('about');
@endphp

@section('title', $page->localized('meta_title') ?: __('site.nav.about').' — '.\App\Support\Identite::marque())
@section('description', $page->localized('meta_description') ?: \Illuminate\Support\Str::limit(strip_tags((string) ($about['body'] ?? '')), 160))

@section('content')
    @include('site._hero', [
        'eyebrow' => $about['eyebrow'] ?? __('site.nav.about'),
        'title' => $page->localized('title') ?: ($about['heading'] ?? __('site.nav.about')),
    ])

    @if ($about)
    <section class="section-light">
        <div class="container about-grid">
            <div class="about-visual reveal">
                <div class="ph-frame ph-ratio-45" data-ph="about-mentor.webp">
                    @if ($aboutImg = \App\Support\Site\MediaVitrine::url('about-mentor.webp'))
                        <img src="{{ $aboutImg }}" alt="" width="1200" height="1500" loading="lazy" decoding="async" data-parallax="0.06">
                    @endif
                </div>
            </div>
            <div class="about-text reveal reveal-delay-1">
                @if (! empty($about['eyebrow']))<span class="eyebrow">{{ $about['eyebrow'] }}</span>@endif
                <h2>{{ $about['heading'] ?? '' }}</h2>
                @if (! empty($about['body']))<p>{{ \App\Support\HtmlSanitizer::html($about['body']) }}</p>@endif
                @if (! empty($about['body_2']))<p>{{ \App\Support\HtmlSanitizer::html($about['body_2']) }}</p>@endif

                @if (! empty($about['values']))
                    <div class="about-values" data-stagger>
                        @foreach ($about['values'] as $value)
                            <div class="about-value reveal">
                                <span class="ico" aria-hidden="true">
                                    @switch($loop->index)
                                        @case(0)<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>@break
                                        @case(1)<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>@break
                                        @case(2)<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11H5a2 2 0 00-2 2v7h6v-9zM15 5h4a2 2 0 012 2v13h-6V7a2 2 0 012-2zM9 5H7a2 2 0 00-2 2v4h6V7a2 2 0 00-2-2z"/></svg>@break
                                        @default<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15 8.5 22 9.3 17 14.1 18.2 21 12 17.8 5.8 21 7 14.1 2 9.3 9 8.5 12 2"/></svg>
                                    @endswitch
                                </span>
                                <div><strong>{{ $value['title'] ?? '' }}</strong><span>{{ $value['text'] ?? '' }}</span></div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </section>
    @endif

    @include('site._cta', ['rp' => $rp])
@endsection