@php
    use App\Helpers\Helper;
@endphp

<section id="about-us-section" class="pt-6 md:pt-10 lg:pt-16 overflow-hidden">
    <div class="container-page py-10 md:py-14 grid grid-cols-1 lg:grid-cols-12 gap-14 lg:gap-16 items-center">

        <!-- Image Column -->
        <div class="lg:col-span-5 relative w-full max-w-md mx-auto lg:max-w-none mb-6 lg:mb-0">

            <!-- Main Image -->
            <img loading="lazy" decoding="async" id="about-us-1" src="{{ $aboutUs->image_one }}" alt="Main Image" data-lightbox="about"
                class="w-full aspect-[4/5] sm:aspect-[5/6] rounded-2xl object-cover shadow-lg">

            <!-- Top-left small image -->
            <img loading="lazy" decoding="async" id="about-us-2" src="{{ $aboutUs->image_two }}" alt="Top Left" data-lightbox="about"
                class="absolute -top-5 -left-4 sm:-left-6 w-24 h-24 sm:w-32 sm:h-32 lg:w-36 lg:h-36 rounded-xl object-cover shadow-xl border-4 border-white">

            <!-- Bottom-right small image -->
            <img loading="lazy" decoding="async" id="about-us-3" src="{{ $aboutUs->image_three }}" alt="Bottom Right" data-lightbox="about"
                class="absolute -bottom-5 -right-4 sm:-right-6 w-24 h-24 sm:w-32 sm:h-32 lg:w-36 lg:h-36 rounded-xl object-cover shadow-xl border-4 border-white">
        </div>

        <!-- Content Column -->
        <div class="lg:col-span-7">
            <x-section-heading align="left" :eyebrow="Helper::contentText('homepage.about_us')"
                :title="app()->getLocale() == 'en' ? $aboutUs->title_en : $aboutUs->title_np ?? $aboutUs->title_en"
                class="!mb-5 max-w-2xl" />

            <div
                class="text-base md:text-[1.0625rem] text-gray-700 leading-8 [&_p]:mb-4 max-w-2xl @if ($isHome) line-clamp-6 @endif">
                {!! Helper::stripInlineStyle(
                    app()->getLocale() == 'en' ? $aboutUs->description_en : $aboutUs->description_np ?? $aboutUs->description_en,
                ) !!}
            </div>

            @if ($displayButton)
                <a href="{{ route('about-us') }}"
                    class="btn group mt-6 inline-flex bg-secondary text-white hover:bg-primary shadow-lg rounded-full pl-6 pr-2 gap-3">
                    {!! Helper::content('homepage.about_us') !!}
                    <span
                        class="w-9 h-9 rounded-full bg-white text-primary flex items-center justify-center transition-transform duration-300 group-hover:translate-x-1">
                        <i class="fa-solid fa-arrow-right text-sm"></i>
                    </span>
                </a>
            @endif
        </div>
    </div>
</section>

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            gsap.registerPlugin(ScrollTrigger);
            const isMobile = window.innerWidth < 768;

            // Wrap animations in the section container to prevent scrollbar
            const section = document.querySelector("#about-us-section");

            // MAIN IMAGE
            gsap.from("#about-us-1", {
                y: isMobile ? 100 : 150,
                opacity: 0,
                duration: 0.9,
                ease: "power3.out",
                scrollTrigger: {
                    trigger: section,
                    start: "top 70%",
                }
            });

            // TOP LEFT IMAGE
            gsap.from("#about-us-2", {
                x: isMobile ? -80 : -120,
                y: isMobile ? -80 : -120,
                opacity: 0,
                duration: 0.9,
                ease: "power3.out",
                scrollTrigger: {
                    trigger: section,
                    start: "top 70%",
                }
            });

            // BOTTOM RIGHT IMAGE
            gsap.from("#about-us-3", {
                x: isMobile ? 80 : 120,
                y: isMobile ? 80 : 120,
                opacity: 0,
                duration: 0.9,
                ease: "power3.out",
                scrollTrigger: {
                    trigger: section,
                    start: "top 70%",
                }
            });

            // TITLE
            gsap.from("#about-us-section h2", {
                x: -80,
                opacity: 0,
                duration: 0.8,
                ease: "power2.out",
                scrollTrigger: {
                    trigger: section,
                    start: "top 75%",
                }
            });

            // DOTS
            gsap.from("#about-us-section .flex span", {
                scale: 0,
                opacity: 0,
                duration: 0.4,
                stagger: 0.08,
                ease: "back.out(1.7)",
                scrollTrigger: {
                    trigger: section,
                    start: "top 75%",
                }
            });

            // DESCRIPTION
            gsap.from("#about-us-section .text-gray-600", {
                y: 80,
                opacity: 0,
                duration: 0.9,
                ease: "power3.out",
                scrollTrigger: {
                    trigger: section,
                    start: "top 80%",
                }
            });

            // BUTTON
            gsap.from("#about-us-section a", {
                scale: 0.6,
                opacity: 0,
                duration: 0.7,
                ease: "back.out(1.7)",
                scrollTrigger: {
                    trigger: section,
                    start: "top 85%",
                }
            });

        });
    </script>
@endpush