@php
    use App\Helpers\Helper;

    $isEn = app()->getLocale() == 'en';
    $highlight = $volunteer->highlight_image ?: 'assets/frontend/images/default-image.png';
    $fallback = asset('assets/frontend/images/default-image.png');
@endphp

{{-- Compact volunteer teaser; the full application form follows right below it. --}}
<section id="registerYourself-section" class="bg-white relative overflow-hidden section-y">
    <div class="container-page grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">

        {{-- Left: heading, short text, actions --}}
        <div id="registeryourself-slide1" class="lg:col-span-5 space-y-4">
            <x-section-heading id="registeryourself-upper" align="left" :eyebrow="Helper::content('homepage.register_yourself_with_us')"
                :title="Helper::content('homepage.become_a_volunteer')" class="!mb-0" />

            <div class="vol-desc text-gray-700 text-base leading-7 line-clamp-[9] [&_p]:mb-3">
                {!! Helper::stripInlineStyle(
                    $isEn ? $volunteer->description_en ?? '' : $volunteer->description_np ?? ($volunteer->description_en ?? ''),
                ) !!}
            </div>

            <div class="vol-cta flex flex-wrap items-center gap-3 pt-1">
                <a href="{{ route('volunteer-page.show') }}#volunteer-form"
                    class="btn bg-secondary text-white hover:bg-primary shadow-md rounded-full px-6">
                    {!! Helper::content('pages.volunteer_form') !!}
                    <i class="fa-solid fa-arrow-right text-sm"></i>
                </a>
                <a href="{{ route('volunteer-page.show') }}"
                    class="btn border border-primary text-primary hover:bg-primary hover:text-white rounded-full px-6">
                    {{ __('homepage.discover_our_story') }}
                </a>
            </div>
        </div>

        {{-- Right: CMS image + qualities, side by side on wide screens --}}
        <div id="registeryourself-slide2" class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-5 gap-4 items-stretch">
            <div class="sm:col-span-3 aspect-[4/3] sm:aspect-auto sm:min-h-[340px] rounded-2xl overflow-hidden bg-gray-100 shadow-md">
                <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="vol-card sm:col-span-2 bg-gray-50 border border-gray-200 rounded-2xl p-5 flex flex-col">
                <h3 class="font-extrabold text-primary text-base md:text-lg mb-3">
                    {!! Helper::content('homepage.what_we_look_in_volunteers') !!}
                </h3>
                <div class="check-list text-gray-800 text-sm [&_ul]:grid-cols-1 [&_ul]:gap-y-1.5 max-h-[17rem] overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden [mask-image:linear-gradient(to_bottom,#000_85%,transparent)]">
                    {!! Helper::stripInlineStyle(
                        $isEn
                            ? $volunteer->qualification_en ?? ''
                            : $volunteer->qualification_np ?? ($volunteer->qualification_en ?? ''),
                    ) !!}
                </div>
            </div>
        </div>
    </div>
</section>

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            if (!window.gsap || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
            gsap.registerPlugin(ScrollTrigger);

            const root = "#registerYourself-section";
            gsap.timeline({
                    defaults: {
                        ease: "power2.out"
                    },
                    scrollTrigger: {
                        trigger: root,
                        start: "top 85%",
                        once: true
                    },
                })
                .from(root + " #registeryourself-upper, " + root + " h2, " + root + " .vol-desc, " + root + " .vol-cta", {
                    y: 24,
                    opacity: 0,
                    duration: 0.6,
                    stagger: 0.1
                })
                .from("#registeryourself-slide2 > *", {
                    y: 30,
                    opacity: 0,
                    duration: 0.6,
                    stagger: 0.12,
                    clearProps: "transform"
                }, 0.2);
        });
    </script>
@endpush