{{--
    Intro + photo grid shared by every academic level page (including Higher Secondary).
    Needs: $academicLevel
--}}
@php
    use App\Helpers\Helper;

    $isEn = app()->getLocale() == 'en';
    $levelName = $isEn ? $academicLevel->name_en : (isset($academicLevel->name_np) ? $academicLevel->name_np : $academicLevel->name_en);
    $tagline = $isEn ? $academicLevel->tagline_en : (isset($academicLevel->tagline_np) ? $academicLevel->tagline_np : $academicLevel->tagline_en);
    $words = explode(' ', trim(strip_tags($tagline ?? '')));
    $lastTwo = count($words) > 3 ? array_splice($words, -2) : [];
    $levelImages = $academicLevel->images ? json_decode($academicLevel->images, true) ?? [] : [];
    $fallbackImage = asset('assets/frontend/images/default-image.png');
    $applyUrl = $academicLevel->id == '5' ? route('online-admission.college-level') : route('online-admission.school-level');
@endphp

{{-- ============ Introduction ============ --}}
<section class="container-page section-y">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14 items-center">
        <div class="lg:col-span-5">
            <div class="aspect-[4/5] sm:aspect-[4/3] lg:aspect-[4/5] rounded-3xl overflow-hidden shadow-xl bg-gray-100">
                <img loading="lazy" decoding="async" src="{{ asset($academicLevel->thumbnail_image) }}" alt="{{ $levelName }}" data-lightbox="level-{{ $academicLevel->id }}"
                    onerror="this.onerror=null;this.src='{{ $fallbackImage }}'" class="w-full h-full object-cover">
            </div>
        </div>

        <div class="lg:col-span-7">
            <x-section-heading align="left" :eyebrow="$levelName" class="!mb-4" />

            <h2 class="section-title !mt-0">
                {{ implode(' ', $words) }}
                @if ($lastTwo)
                    <span class="accent">{{ implode(' ', $lastTwo) }}</span>
                @endif
            </h2>

            @php
                $facts = $isEn ? $academicLevel->short_description_en : $academicLevel->short_description_np ?? $academicLevel->short_description_en;
            @endphp
            @if (trim(strip_tags($facts ?? '')) !== '')
                <div
                    class="mt-5 inline-block rounded-xl bg-primary/5 border border-primary/10 px-5 py-3 text-sm font-semibold text-primary [&_p]:my-0.5 [&_p]:text-sm [&_p]:text-primary">
                    {!! Helper::stripInlineStyle($facts) !!}
                </div>
            @endif

            <div class="mt-6 text-gray-700 text-base md:text-[1.0625rem] leading-8 [&_p]:mb-4">
                {!! Helper::stripInlineStyle(
                    $isEn ? $academicLevel->description_en : $academicLevel->description_np ?? $academicLevel->description_en,
                ) !!}
            </div>

            <div class="mt-8 flex flex-wrap items-center gap-3">
                <a href="{{ $applyUrl }}"
                    class="btn bg-secondary text-white hover:bg-primary shadow-md rounded-full px-7">
                    {{ __('pages.apply_now') }}
                    <i class="fa-solid fa-arrow-right text-sm" aria-hidden="true"></i>
                </a>
                <a href="{{ route('contact') }}"
                    class="btn border-2 border-primary text-primary hover:bg-primary hover:text-white rounded-full px-7">
                    {!! Helper::content('pages.contact_us') !!}
                </a>
            </div>
        </div>
    </div>
</section>

{{-- ============ Campus photos ============ --}}
@if (count($levelImages))
    <section class="container-page pb-10 md:pb-14">
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-4">
            @foreach (array_slice($levelImages, 0, 8) as $image)
                <div class="aspect-[4/3] rounded-2xl overflow-hidden bg-gray-100 shadow-md group">
                    <img loading="lazy" decoding="async" src="{{ asset($image) }}" alt="{{ $levelName }}" data-lightbox="level-{{ $academicLevel->id }}"
                        onerror="this.onerror=null;this.src='{{ $fallbackImage }}'"
                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                </div>
            @endforeach
        </div>
    </section>
@endif