@extends('frontend.layouts.app')

@section('title', 'Volunteer')

@php
    use App\Helpers\Helper;
@endphp

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

    <section id="carrer-detail-section">
        @php
            $isEn = app()->getLocale() == 'en';
            $photos = $volunteer->images ? json_decode($volunteer->images, true) ?? [] : [];
            $highlight = $volunteer->highlight_image ?: 'assets/frontend/images/default-image.png';
            $fallback = asset('assets/frontend/images/default-image.png');
        @endphp

        {{-- ============ Introduction: one column, image first ============ --}}
        <div id="registerYourself-section" class="bg-white section-y">
            <div class="container-page grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14 items-start">

                <div class="lg:col-span-7 space-y-8">
                    <x-section-heading tag="h1" align="left" :eyebrow="Helper::contentText('homepage.register_yourself_with_us')"
                        :title="Helper::content('homepage.become_a_volunteer')" class="!mb-0" />

                    <div class="aspect-[16/9] rounded-2xl overflow-hidden bg-gray-100 shadow-lg">
                        <img loading="lazy" decoding="async" src="{{ asset($highlight) }}"
                            onerror="this.onerror=null;this.src='{{ $fallback }}'" alt="Volunteers" data-lightbox="volunteer"
                            class="w-full h-full object-cover">
                    </div>

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

                    @if (!empty(trim(strip_tags($volunteer->need_of_volunteer_en ?? ''))))
                        <div class="bg-gray-50 border border-gray-200 rounded-2xl p-6 md:p-8">
                            <h2 class="font-extrabold text-primary text-h3 mb-5">{!! Helper::content('pages.volunteer_why_needed') !!}</h2>
                            <div class="check-list text-gray-800 text-[0.95rem]">
                                {!! Helper::stripInlineStyle(
                                    $isEn
                                        ? $volunteer->need_of_volunteer_en ?? ''
                                        : $volunteer->need_of_volunteer_np ?? ($volunteer->need_of_volunteer_en ?? ''),
                                ) !!}
                            </div>
                        </div>
                    @endif

                    <div class="bg-gray-50 border border-gray-200 rounded-2xl p-6 md:p-8">
                        <h2 class="font-extrabold text-primary text-h3 mb-5">
                            {!! Helper::content('homepage.what_we_look_in_volunteers') !!}
                        </h2>
                        <div class="check-list text-gray-800 text-[0.95rem]">
                            {!! Helper::stripInlineStyle(
                                $isEn
                                    ? $volunteer->qualification_en ?? ''
                                    : $volunteer->qualification_np ?? ($volunteer->qualification_en ?? ''),
                            ) !!}
                        </div>
                    </div>

                    <a href="#volunteer-form"
                        class="btn group inline-flex bg-secondary text-white hover:bg-primary shadow-lg rounded-full pl-6 pr-2 gap-3">
                        {!! Helper::content('pages.volunteer_form') !!}
                        <span
                            class="w-9 h-9 rounded-full bg-white text-primary flex items-center justify-center transition-transform duration-300 group-hover:translate-y-0.5">
                            <i class="fa-solid fa-arrow-down text-sm"></i>
                        </span>
                    </a>
                </div>

                <div class="lg:col-span-5 lg:sticky lg:top-28">
                    @if (count($photos))
                        <div class="grid grid-cols-2 gap-3 md:gap-4">
                            @foreach (array_slice($photos, 0, 3) as $i => $image)
                                <div
                                    class="rounded-2xl overflow-hidden bg-gray-100 shadow-md {{ $i === 0 ? 'col-span-2 aspect-[16/10]' : 'aspect-square' }}">
                                    <img loading="lazy" decoding="async" src="{{ asset($image) }}"
                                        onerror="this.onerror=null;this.src='{{ $fallback }}'" alt="Volunteers" data-lightbox="volunteer"
                                        class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>

        @include('frontend.volunteer.partials.form')
    </section>
@endsection

@include('frontend.volunteer.partials.form-scripts')