@php
    $whyChooseUsContent = getContent('why_choose_us.content', true);
    $whyChooseUsElements = getContent('why_choose_us.element', false,3,true);

@endphp
<section class="why-choose section--bg py-100 position-relative">
    
    <div class="element position-absolute">
        <!--<img src="{{asset($activeTemplateTrue . 'images/shape/whychoose-bg2.png')}}" alt="image">-->
    </div>

    <div class="element--two position-absolute">
        <img src="{{asset($activeTemplateTrue . 'images/shape/tree5.png')}}" alt="image">
    </div>

    <div class="element--three position-absolute">
        <img src="{{asset($activeTemplateTrue . 'images/shape/dash-line.png')}}" alt="image">
    </div>

    <div class="bg--element position-absolute">
        <img src="{{asset($activeTemplateTrue . 'images/shape/element-8.png')}}" alt="image">
    </div>



    <div class="container">
        <div class="row gy-5">
            <div class="col-lg-6 col-md-12">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="section-content mb-30">
                            <div class="title-wrap">
                                <div class="row justify-content-between">
                                    <div class="col-xl-10 col-lg-12">
                                        <h6 class="heading third--font fs--32 fw--700 text--base mb-0 scroll-animate">
                                            {{__($whyChooseUsContent->data_values->title)}}</h6>
                                        <h2 class="title mb-3 fs--40 fw--800 splite-text scroll-animate"
                                            data-splitting>{{__($whyChooseUsContent->data_values->heading)}}</h2>
                                        <div class="d-none d-md-block">
                                            <p class="subtitle scroll-animate">{{__($whyChooseUsContent->data_values->sub_heading)}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row gy-4 mb-5">
                    @foreach ($whyChooseUsElements as $index => $item)

                    <div class="col-xxl-8 col-lg-12 col-md-6 scroll-animate" style="animation-delay: {{ $index * 0.1 }}s;">
                        <div class="service-key--box d-flex flex-column gap--8">
                            <div class="d-flex align-items-center gap--8">
                                <div
                                    class="icon--wrap d-flex justify-content-center align-items-center bg--base radius--50 flex-shrink-0">
                                    <i class="fa-solid fa-check text--white"></i>
                                </div>
                                <div class="title--wrap">
                                    <h6 class="title fs--20 fw--700 mb-0">{{__($item->data_values->title)}}</h6>
                                </div>
                            </div>
                            <div class="content-wrap">

                                <p class="description">{{__($item->data_values->description)}}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="col-lg-6 col-md-12">
                <div class="right--thumb__wrap d-flex justify-content-end position-relative">

                    <!-- <div class="thumb-3 position-absolute">
                        <img src="{{ asset('assets/images/destinations/tour19.jpeg') }}?v={{ time() }}" alt="Cultural Triangle">
                    </div> -->
                    <div class="thumb-2 radius--20 overflow-hidden position-absolute">
                        <img class="fit--img" src="{{ asset('assets/images/frontend/why_choose_us/image-gen (7).png') }}?v={{ time() }}" alt="Why Choose Us 2">
                    </div>
                    <div class="thumb-1 radius--20 overflow-hidden">
                        <img class="fit--img" src="{{ asset('assets/images/frontend/banner/image-gen (1).jpg') }}?v={{ time() }}" alt="Why Choose Us 1">
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>

<style>
/* Scroll Animation Styles for Home Page - Text Only */
.scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animations */
.scroll-animate:nth-child(1) { transition-delay: 0.1s; }
.scroll-animate:nth-child(2) { transition-delay: 0.2s; }
.scroll-animate:nth-child(3) { transition-delay: 0.3s; }
.scroll-animate:nth-child(4) { transition-delay: 0.4s; }
.scroll-animate:nth-child(5) { transition-delay: 0.5s; }

/* Center Why Choose Us section on mobile */
@media (max-width: 768px) {
    .why-choose .section-content .title-wrap {
        text-align: center !important;
    }
    
    .why-choose .section-content .title-wrap h6,
    .why-choose .section-content .title-wrap h2,
    .why-choose .section-content .title-wrap p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Task 1: Completely remove subtitle line on mobile - AGGRESSIVE */
    .why-choose .subtitle,
    .why-choose .section-content .subtitle,
    .why-choose .title-wrap .subtitle,
    .section-content .subtitle,
    .why-choose .scroll-animate.subtitle,
    .why-choose p.subtitle,
    .why-choose .section-content p.subtitle,
    .why-choose .title-wrap p.subtitle,
    .section-content p.subtitle,
    .why-choose .scroll-animate p.subtitle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        z-index: -9999 !important;
    }
    
    /* Additional override for any animation classes */
    .why-choose .scroll-animate.subtitle.animate-in,
    .why-choose .subtitle.animate-in,
    .why-choose .section-content .subtitle.animate-in,
    .why-choose .title-wrap .subtitle.animate-in {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Task 2: Reduce space between title and advantages section */
    .why-choose .section-content {
        margin-bottom: 5px !important;
        padding-bottom: 0 !important;
    }
    
    .why-choose .row.gy-4 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Reduce overall section padding on mobile */
    .why-choose.section--bg.py-100 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    /* Add left padding for advantages on mobile */
    .why-choose .service-key--box {
        padding-left: 15px !important;
        margin-left: 10px !important;
    }
    
    /* Ensure proper spacing on mobile */
    .why-choose .row.gy-4 {
        padding-left: 10px !important;
    }
}
</style>

<script>
// Scroll Animation Function for Home Page
function handleHomeScrollAnimation() {
    const scrollElements = document.querySelectorAll('.scroll-animate');
    
    scrollElements.forEach((element, index) => {
        const elementTop = element.getBoundingClientRect().top;
        const elementBottom = element.getBoundingClientRect().bottom;
        const windowHeight = window.innerHeight;
        
        // Trigger animation when element is 90% visible (earlier trigger)
        if (elementTop < windowHeight * 0.9 && elementBottom > 0) {
            element.classList.add('animate-in');
        }
    });
}

// Initialize scroll animations
document.addEventListener('DOMContentLoaded', function() {
    // Hide subtitle on mobile immediately
    if (window.innerWidth <= 768) {
        const subtitles = document.querySelectorAll('.why-choose .subtitle, .why-choose .section-content .subtitle, .why-choose .title-wrap .subtitle, .section-content .subtitle, .why-choose p.subtitle');
        subtitles.forEach(function(subtitle) {
            subtitle.style.display = 'none';
            subtitle.style.visibility = 'hidden';
            subtitle.style.opacity = '0';
            subtitle.style.height = '0';
            subtitle.style.margin = '0';
            subtitle.style.padding = '0';
            subtitle.style.overflow = 'hidden';
        });
    }
    
    // Initial check for animations immediately
    handleHomeScrollAnimation();
    
    // Add scroll event listener with throttling
    let scrollTimeout;
    window.addEventListener('scroll', function() {
        if (scrollTimeout) {
            clearTimeout(scrollTimeout);
        }
        scrollTimeout = setTimeout(handleHomeScrollAnimation, 30);
    });
    
    // Also trigger on resize
    window.addEventListener('resize', function() {
        // Hide subtitle on mobile resize
        if (window.innerWidth <= 768) {
            const subtitles = document.querySelectorAll('.why-choose .subtitle, .why-choose .section-content .subtitle, .why-choose .title-wrap .subtitle, .section-content .subtitle, .why-choose p.subtitle');
            subtitles.forEach(function(subtitle) {
                subtitle.style.display = 'none';
                subtitle.style.visibility = 'hidden';
                subtitle.style.opacity = '0';
                subtitle.style.height = '0';
                subtitle.style.margin = '0';
                subtitle.style.padding = '0';
                subtitle.style.overflow = 'hidden';
            });
        }
        handleHomeScrollAnimation();
    });
});
</script>