@php
$awards = [

    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/Awards_Abbys.png',
        'text' => "ABBYs 2024 Hari Darshan (Goafest) – Two Golds: Audio Script, Audio Casting & Performance.",
        'line' => '#f58220'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/2.png',
        'text' => "ABBYS 2026 (Two Bronze),
        Brand: Hari Darshan — Audio & Radio, FMCG & Script categories.",
        'line' => '#f58220'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/10.png',
        'text' => "UNFPA's Laadli National Creative Excellence Awards for Social Change - 2 times winner",
        'line' => '#f58220'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/13.png',
        'text' => 'Rajasthan Patrika Winner Hall Of Fame',
        'line' => '#cccccc'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/1.png',
        'text' => "ABBY’s Goafest (Bronze)",
        'line' => '#f58220'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/12.png',
        'text' => "Mommy Award in the category 'Best Social Media Brand - Agriculture' for Bayer CropScience ",
        'line' => '#cccccc'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/6.png',
        'text' => "The Great Indian BFSI Award in the 'Regional / Vernacular category' forFino Payments Bank",
        'line' => '#f58220'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/15.png',
        'text' => 'Rajasthan Patrika Hall Of Fame',
        'line' => '#cccccc'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/9.png',
        'text' => "VIDEA Award for 'Best Branded Content' for Fino Payments Bank",
        'line' => '#f58220'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/8.png',
        'text' => "Drivers of the Digital Awards in the category 'Best Digital Influencer Marketing Campaign'",
        'line' => '#cccccc'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/7.png',
        'text' => "India’s fastest growing digital agency in the ‘Rural Marketing’ category",
        'line' => '#cccccc'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/4.png',
        'text' => "Agency Con 'Specialist agency of the year - Rural Marketing'",
        'line' => '#f58220'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/3.png',
        'text' => 'ABCI(Bronze) - 3 time winners',
        'line' => '#cccccc'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/15.png',
        'text' => "VIDEA For Best Storytelling 'Fino Hamesha' Digital Campaign (Gold)",
        'line' => '#f58220'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/9.png',
        'text' => 'Doodle Social AdFestival (Gold)',
        'line' => '#cccccc'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/11.png',
        'text' => "Masters of Modern Marketing (mCube) Awards for 'Best Multi Channel Campaign by/for an Industrial Products/ Commodities Enterprise' category for 'Icon steel - India ka Icon Campaign'",
        'line' => '#f58220'
    ],
    [
        'logo' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/awards/5.png',
        'text' => "Front Benchers Awards for 'Ambuja Cement' for 'Saidpur Video Campaign'",
        'line' => '#cccccc'
    ],
];
@endphp
<div id="awards" style="position: relative; top: -50px;">
<section class="py-16 lg:py-16 overflow-hidden bg-white">
    <div class="mx-auto px-4 sm:px-6 lg:px-20">

        {{-- Header --}}
        <div class="flex items-center justify-between mb-10 lg:mb-12">
            <h2 class="text-black font-extrabold uppercase text-[32px] sm:text-[48px] lg:text-[70px]">
                Awards
            </h2>

            {{-- Arrows --}}
            <div class="flex gap-3">
                <button id="awardPrev"
                    class="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-gray-200 flex items-center justify-center hover:bg-[#f58220] hover:text-white transition-all duration-300">
                    ←
                </button>

                <button id="awardNext"
                    class="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-gray-200 flex items-center justify-center hover:bg-[#f58220] hover:text-white transition-all duration-300">
                    →
                </button>
            </div>
        </div>

        {{-- Slider --}}
        <div class="relative overflow-hidden">

            <div id="awardsTrack"
                class="flex gap-4 lg:gap-8 transition-transform duration-700 ease-out">

                @foreach($awards as $award)
                    <div class="award-card flex-none w-full sm:w-[calc(50%-8px)] lg:w-[calc(25%-24px)]">

                        <div
                            class="bg-white rounded-2xl p-6 h-full border border-gray-100 hover:shadow-xl hover:-translate-y-1 transition-all duration-500">

                            <div class="h-[100px] flex items-center justify-center mb-6">
                                <img src="{{ $award['logo'] }}"
                                    alt="Award Logo"
                                    class="max-h-[80px] object-contain">
                            </div>

                            <div class="h-[3px] rounded-full mb-6"
                                style="background: {{ $award['line'] }}">
                            </div>

                            <p class="text-[15px] leading-relaxed text-[#2B2B2B]">
                                {{ $award['text'] }}
                            </p>

                        </div>

                    </div>
                @endforeach

            </div>

        </div>

        {{-- Dots --}}
        <!--<div id="awardDots" class="flex justify-center gap-3 mt-8"></div>-->

    </div>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

    const track = document.getElementById('awardsTrack');
    const cards = document.querySelectorAll('.award-card');
    const prev = document.getElementById('awardPrev');
    const next = document.getElementById('awardNext');
    const dotsWrap = document.getElementById('awardDots');

    if (!track || !cards.length) return;

    let current = 0;
    let autoplay;

    function visibleCards() {
        if (window.innerWidth >= 1024) return 4;
        if (window.innerWidth >= 640) return 2;
        return 1;
    }

    function maxSlide() {
        return Math.max(0, cards.length - visibleCards());
    }

    function update() {

        const gap = window.innerWidth >= 1024 ? 32 : 16;

        const cardWidth = cards[0].offsetWidth + gap;

        track.style.transform =
            `translateX(-${current * cardWidth}px)`;

        [...dotsWrap.children].forEach((dot, i) => {
            dot.classList.toggle('bg-[#f58220]', i === current);
            dot.classList.toggle('bg-gray-300', i !== current);
        });
    }

    function buildDots() {

        dotsWrap.innerHTML = '';

        for (let i = 0; i <= maxSlide(); i++) {

            const dot = document.createElement('button');

            dot.className =
                'w-3 h-3 rounded-full bg-gray-300 transition-all duration-300';

            dot.addEventListener('click', () => {
                current = i;
                update();
            });

            dotsWrap.appendChild(dot);
        }
    }

    function nextSlide() {

        current++;

        if (current > maxSlide()) {
            current = 0;
        }

        update();
    }

    function prevSlide() {

        current--;

        if (current < 0) {
            current = maxSlide();
        }

        update();
    }

    prev.addEventListener('click', prevSlide);
    next.addEventListener('click', nextSlide);

    function startAuto() {

        stopAuto();

        if (maxSlide() === 0) return;

        autoplay = setInterval(() => {
            nextSlide();
        }, 3000);
    }

    function stopAuto() {
        clearInterval(autoplay);
    }

    track.addEventListener('mouseenter', stopAuto);
    track.addEventListener('mouseleave', startAuto);

    // Mobile Swipe Support
    let startX = 0;
    let endX = 0;

    track.addEventListener('touchstart', (e) => {
        startX = e.touches[0].clientX;
    });

    track.addEventListener('touchend', (e) => {

        endX = e.changedTouches[0].clientX;

        if (startX - endX > 50) {
            nextSlide();
        }

        if (endX - startX > 50) {
            prevSlide();
        }
    });

    buildDots();
    update();
    startAuto();

    window.addEventListener('resize', () => {

        current = Math.min(current, maxSlide());

        buildDots();
        update();
    });

});
</script>