@extends('frontend.layouts.app')

@php
    use App\Helpers\Helper;
@endphp

@section('title', 'Achievements')

@section('content')
    {{-- Hero Section --}}
    @include('frontend.partials.hero', [
        'mainHeading' => Helper::contentText('pages.achievements'),
        'subHeading' => Helper::contentText('pages.achievements_sub_heading'),
        'breadcrumb1' => [
            'name' => __('route.home'),
            'route' => route('home'),
        ],
        'breadcrumb2' => [
            'name' => Helper::contentText('pages.achievements'),
            'route' => route('achievements'),
            'class' => 'text-gray-400',
        ],
        'breadcrumb3' => null,
        'breadcrumb4' => null,
    ])

    {{-- Achievements Cards --}}
    <section class="px-4 sm:px-6 lg:px-[max(2rem,calc((100%_-_1280px)/2))] section-y">
        <div id="achievement-section" class="h-auto w-full justify-items-center font-poppins pt-10 pb-10">
            <div class="flex flex-col w-full items-center">
                <x-section-heading id="achivement-title" align="center" :eyebrow="Helper::contentText('pages.achievements_intro_label')"
                    :description="Helper::contentText('pages.achievements_description')" />

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-6 w-full max-w-5xl mx-auto">
                    @foreach ($achivements as $achivement)
                        <article
                            class="slider-card w-full max-w-[300px] mx-auto aspect-[4/5] relative overflow-hidden rounded-xl border border-gray-100 hover:-translate-y-2 hover:shadow-2xl transition-all duration-300"
                            style="scroll-snap-align:start;">

                            <!-- MAIN IMAGE -->
                            <img alt="{{ app()->getLocale() == 'en' ? $achivement['title_en'] : $achivement['title_np'] }}" loading="lazy" decoding="async" src="{{ asset($achivement->image) }}"
                                class="absolute inset-0 w-full h-full object-cover" />

                            <!-- GRADIENT OVERLAY -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent">
                            </div>

                            <!-- TEXT -->
                            <div class="absolute bottom-0 left-0 right-0 p-4 text-white">

                                <h3 class="text-base font-semibold">
                                    {{ app()->getLocale() == 'en' ? $achivement['title_en'] : $achivement['title_np'] }}
                                </h3>

                                <p class="text-xs sm:text-sm text-white/80 mt-1 line-clamp-2">
                                    {{ app()->getLocale() == 'en' ? $achivement['short_description_en'] : $achivement['short_description_np'] }}
                                </p>

                            </div>

                        </article>
                    @endforeach
                </div>
            </div>
        </div>

    </section>
@endsection