@extends('layouts.public')
@section('meta')
    @include('includes.seo-meta', [
        'slug' => 'about',
        'path' => '/about',
        'defaults' => [
            'title' => __('public.pages.about_title'),
            'description' => __('public.pages.about_desc'),
        ],
    ])
    @push('json_ld')
        @include('includes.json-ld-graphs', [
            'graphs' => [
                schema_breadcrumb([
                    ['name' => __('public.breadcrumb.home'), 'url' => schema_absolute_url('/')],
                    ['name' => __('public.menu.about'), 'url' => schema_absolute_url('/about')],
                ]),
            ],
        ])
    @endpush
@endsection
@section('content')
    <section class="bg-secondary py-5">
        <div class="container pt-5 pb-lg-2 pb-xl-4 py-xxl-5">
            <nav aria-label="breadcrumb">
                <ol class="pt-lg-3 pb-lg-4 pb-2 breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ __url('/') }}">{{ __('public.breadcrumb.home') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ __('public.menu.about') }}</li>
                </ol>
            </nav>

            <h1 class="display-4 text-center mt-5">{{ __('public.about.hero_title') }}</h1>
            <p class="text-center fs-lg mb-0">{{ __('public.about.hero_lead') }}</p>

            @php
                $aboutHeroImages = ['4.jpg', '5.jpg', '2.jpg'];
            @endphp
            <div class="overflow-hidden mt-5">
             
                <div class="swiper about-hero-swiper pb-1" data-swiper-options='{
                    "slidesPerView": 1,
                    "spaceBetween": 16,
                    "loop": true,
                    "speed": 500,
                    "navigation": { "prevEl": "#about-hero-prev", "nextEl": "#about-hero-next" },
                    "pagination": { "el": ".about-hero-pagination", "clickable": true }
                }'>
                    <div class="swiper-wrapper">
                        @foreach($aboutHeroImages as $img)
                            <div class="swiper-slide">
                                <img src="{{ asset('assets/images/' . $img) }}" class="d-block w-100" alt="{{ __('alts.about_hero') }}" style="object-fit: cover; min-height: 280px; max-height: 520px;">
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination about-hero-pagination position-relative bottom-0 pt-3"></div>
                </div>
            </div>
        </div>
    </section>

    <section class="container position-relative z-3 py-5">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-xl-9">
                <h2 class="h3 text-center text-md-start my-3">{{ __('public.about.specialize_heading') }}</h2>
                <ul class="list-unstyled fs-xl mb-4">
                    @foreach(__('public.about.specialize_items') as $line)
                        <li class="d-flex gap-2 mb-2"><span class="text-primary flex-shrink-0" aria-hidden="true">✔</span><span>{{ $line }}</span></li>
                    @endforeach
                </ul>
                <p class="fs-xl mb-4">{{ __('public.about.programs_text') }}</p>
                <h2 class="h3 text-center text-md-start my-3">{{ __('public.about.benefits_heading') }}</h2>
                <ul class="list-unstyled fs-xl mb-4">
                    @foreach(__('public.about.benefits_items') as $line)
                        <li class="d-flex gap-2 mb-2"><span class="text-primary flex-shrink-0" aria-hidden="true">•</span><span>{{ $line }}</span></li>
                    @endforeach
                </ul>
                <p class="fs-xl mb-0 text-center fw-medium">{{ __('public.about.closing_text') }}</p>
            </div>
        </div>
    </section>
@endsection