@php
    use App\Enum\AwardTypeEnum;
@endphp

<section id="award-achivement-section"
    class="bg-background-secondary border-t border-gray-200 py-16 lg:py-24 overflow-hidden font-heading">

    <div class="max-w-7xl mx-auto px-5 sm:px-8 lg:px-12">

        {{-- ══════════════════════════════════
             SECTION HEADER
        ══════════════════════════════════ --}}
        <div
            class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-12 pb-10 border-b border-gray-200">

            {{-- Left: eyebrow + heading --}}
            <div>
                <span
                    class="inline-flex items-center gap-2 text-[10px] font-bold tracking-[0.18em] uppercase text-primary mb-4">
                    <span class="w-5 h-px bg-primary inline-block"></span>
                    {{ __('homepage.highlights_of_excellence') }}
                    <span class="w-5 h-px bg-primary inline-block"></span>
                </span>

                <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 leading-[1.1] tracking-tight">
                    Achievements
                    <span class="italic text-primary">&amp; Awards</span>
                </h2>

                <p class="mt-4 text-sm lg:text-base text-gray-500 leading-7 max-w-lg">
                    {{ __('homepage.achivement_description') }}
                </p>
            </div>

            {{-- Right: Tab switcher --}}
            <div id="achivement-buton"
                class="inline-flex items-center gap-1 self-start lg:self-auto bg-white border border-gray-200 rounded-xl p-1 shadow-sm"
                role="tablist">

                <button id="achievements-btn" role="tab" aria-selected="true" aria-controls="achivement-section"
                    class="tab-btn px-5 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 bg-primary text-white shadow-sm">
                    {{ __('homepage.achivements') }}
                </button>

                <button id="awards-btn" role="tab" aria-selected="false" aria-controls="award-section"
                    class="tab-btn px-5 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 text-gray-500 hover:text-gray-800">
                    {{ __('homepage.awards') }}
                </button>

            </div>

        </div>


        {{-- ══════════════════════════════════
             ACHIEVEMENTS PANEL
        ══════════════════════════════════ --}}
        <div id="achivement-section" role="tabpanel">

            {{-- Scrollable track --}}
            <div id="achievement-track"
                class="flex gap-5 overflow-x-auto pb-4 pt-1 px-1 cursor-grab active:cursor-grabbing"
                style="scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;">

                @foreach ($achivements as $achivement)
                    {{--
                        FIX 1: Replaced <div class="swiper-slide"> wrapper with a direct <article>
                        so the JS cards() selector (querySelectorAll('article, .slider-card'))
                        picks them up correctly — and added fixed width + scroll-snap-align
                        to match the awards panel behaviour.
                    --}}
                    <article
                        class="slider-card flex-none w-[280px] sm:w-[300px] h-[420px] relative overflow-hidden rounded-xl border border-gray-100 hover:-translate-y-2 hover:shadow-2xl transition-all duration-300"
                        style="scroll-snap-align:start;">

                        <!-- MAIN IMAGE -->
                        <img src="{{ asset($achivement->image) }}"
                            class="absolute inset-0 w-full h-full object-cover" />

                        <!-- GRADIENT OVERLAY -->
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent">
                        </div>

                        <!-- TEXT -->
                        <div class="absolute bottom-0 left-0 right-0 p-5 text-white">

                            <h3 class="text-lg font-semibold">
                                {{ app()->getLocale() == 'en' ? $achivement['title_en'] : $achivement['title_np'] }}
                            </h3>

                            <p class="text-sm text-white/80 mt-1 line-clamp-2">
                                {{ app()->getLocale() == 'en' ? $achivement['short_description_en'] : $achivement['short_description_np'] }}
                            </p>

                        </div>

                    </article>
                @endforeach

            </div>

            {{-- Nav — updated to rounded-full secondary style --}}
            <div class="flex items-center gap-3 mt-6">

                <div id="testa-button-ach"
                    class="flex flex-row items-center justify-center lg:justify-start w-full lg:w-auto space-x-4">

                    <span id="ach-prev" aria-label="Previous"
                        class="flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-secondary text-white cursor-pointer hover:opacity-80 transition-opacity duration-200">
                        <i class="fa-solid fa-chevron-left"></i>
                    </span>

                    <div id="ach-dots" class="flex items-center gap-1.5"></div>

                    <span id="ach-next" aria-label="Next"
                        class="flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-secondary text-white cursor-pointer hover:opacity-80 transition-opacity duration-200">
                        <i class="fa-solid fa-chevron-right"></i>
                    </span>

                </div>

            </div>

        </div>


        {{-- ══════════════════════════════════
             AWARDS PANEL
        ══════════════════════════════════ --}}
        <div id="award-section" role="tabpanel" class="hidden">

            <div id="award-track" class="flex gap-5 overflow-x-auto pb-4 pt-1 px-1 cursor-grab active:cursor-grabbing"
                style="scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;">

                @foreach ($awards as $i => $award)
                    @php
                        $type = $award->award_type;
                        $isGold = $type == AwardTypeEnum::GOLD->value;
                        $isSilver = $type == AwardTypeEnum::SILVER->value;
                        $label = AwardTypeEnum::map($type);

                        $cardBg = $isGold
                            ? 'background:linear-gradient(145deg,#044335 0%,#0b6b55 45%,#022b22 100%)'
                            : ($isSilver
                                ? 'background:linear-gradient(145deg,#0a4f41 0%,#15806a 50%,#05352b 100%)'
                                : 'background:linear-gradient(145deg,#03352b 0%,#06614d 55%,#021f19 100%)');

                        $stripe = $isGold
                            ? 'background:linear-gradient(90deg,#b8922a,#f0d060,#b8922a)'
                            : ($isSilver
                                ? 'background:linear-gradient(90deg,#6b7280,#c5cad2,#6b7280)'
                                : 'background:linear-gradient(90deg,#a0522d,#d9a07a,#a0522d)');

                        $badgeBg = $isGold
                            ? 'rgba(184,146,42,0.18)'
                            : ($isSilver
                                ? 'rgba(107,114,128,0.18)'
                                : 'rgba(160,82,45,0.18)');
                        $badgeClr = $isGold ? '#f0d060' : ($isSilver ? '#c5cad2' : '#d9a07a');
                        $badgeBdr = $isGold
                            ? 'rgba(184,146,42,0.3)'
                            : ($isSilver
                                ? 'rgba(197,202,210,0.25)'
                                : 'rgba(217,160,122,0.25)');

                        $ringClr = $isGold
                            ? 'rgba(240,208,96,0.12)'
                            : ($isSilver
                                ? 'rgba(197,202,210,0.1)'
                                : 'rgba(217,160,122,0.1)');
                        $strokeClr = $isGold ? '#f0d060' : ($isSilver ? '#c5cad2' : '#d9a07a');
                    @endphp

                    <article
                        class="flex-none w-[280px] sm:w-[300px] h-[410px] rounded-2xl overflow-hidden flex flex-col relative border border-white/5 shadow-md hover:-translate-y-2 hover:shadow-2xl transition-all duration-300"
                        style="{{ $cardBg }};scroll-snap-align:start;">

                        {{-- Metallic top stripe --}}
                        <div class="h-[2px] w-full flex-shrink-0" style="{{ $stripe }}"></div>

                        {{-- Index --}}
                        <span class="absolute top-4 left-4 text-[10px] font-bold tracking-widest text-white/40 z-10">
                            {{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}
                        </span>

                        {{-- Trophy area --}}
                        <div class="relative flex items-center justify-center h-44 flex-shrink-0">
                            <div class="absolute w-32 h-32 rounded-full border"
                                style="border-color:{{ $ringClr }}"></div>
                            <div class="absolute w-[5.5rem] h-[5.5rem] rounded-full border"
                                style="border-color:{{ $ringClr }};opacity:.7"></div>

                            <img src="{{ $setting->primary_logo }}" alt="award"
                                class="relative w-20 h-20 object-contain opacity-90 transition-transform duration-400 hover:scale-110">
                        </div>

                        {{-- Tier badge --}}
                        <div class="px-5 mb-1">
                            <span
                                class="inline-flex items-center gap-1.5 text-[9px] font-bold tracking-[0.14em] uppercase px-3 py-1 rounded-[4px] border"
                                style="background:{{ $badgeBg }};color:{{ $badgeClr }};border-color:{{ $badgeBdr }}">
                                <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor">
                                    <path
                                        d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                                </svg>
                                {{ $label }}
                            </span>
                        </div>

                        {{-- Content --}}
                        <div class="flex flex-col flex-1 px-5 pb-6 gap-2">

                            <p class="text-[9px] font-bold tracking-[0.2em] uppercase text-white/35 mt-1">
                                {{ __('homepage.winner') }}
                            </p>

                            <h3 class="text-[15px] font-bold text-white leading-snug line-clamp-2">
                                {{ app()->getLocale() == 'en' ? $award['title_en'] ?? '' : $award['title_np'] ?? ($award['title_en'] ?? '') }}
                            </h3>

                            <p class="text-[13px] text-white/55 leading-[1.65] line-clamp-3 flex-1">
                                {{ app()->getLocale() == 'en'
                                    ? $award['short_description_en'] ?? ''
                                    : $award['short_description_np'] ?? ($award['short_description_en'] ?? '') }}
                            </p>

                        </div>

                    </article>
                @endforeach

            </div>

            {{-- Nav — updated to rounded-full secondary style --}}
            <div class="flex items-center gap-3 mt-6">

                <div id="testa-button-awd"
                    class="flex flex-row items-center justify-center lg:justify-start w-full lg:w-auto space-x-4">

                    <span id="awd-prev" aria-label="Previous"
                        class="flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-secondary text-white cursor-pointer hover:opacity-80 transition-opacity duration-200">
                        <i class="fa-solid fa-chevron-left"></i>
                    </span>

                    <div id="awd-dots" class="flex items-center gap-1.5"></div>

                    <span id="awd-next" aria-label="Next"
                        class="flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-secondary text-white cursor-pointer hover:opacity-80 transition-opacity duration-200">
                        <i class="fa-solid fa-chevron-right"></i>
                    </span>

                </div>

            </div>

        </div>

    </div>

</section>

@push('scripts')
    <script>
        (function() {

            /* ─── Tabs ─── */
            const achievementSection = document.getElementById('achivement-section');
            const awardSection = document.getElementById('award-section');
            const achievementsBtn = document.getElementById('achievements-btn');
            const awardsBtn = document.getElementById('awards-btn');

            function setTab(showEl, hideEl, activeBtn, inactiveBtn) {
                showEl.classList.remove('hidden');
                hideEl.classList.add('hidden');

                activeBtn.classList.add('bg-primary', 'text-white', 'shadow-sm');
                activeBtn.classList.remove('text-gray-500');
                activeBtn.setAttribute('aria-selected', 'true');

                inactiveBtn.classList.remove('bg-primary', 'text-white', 'shadow-sm');
                inactiveBtn.classList.add('text-gray-500');
                inactiveBtn.setAttribute('aria-selected', 'false');
            }

            achievementsBtn.addEventListener('click', () =>
                setTab(achievementSection, awardSection, achievementsBtn, awardsBtn));

            awardsBtn.addEventListener('click', () =>
                setTab(awardSection, achievementSection, awardsBtn, achievementsBtn));


            /* ─── Slider engine ─── */
            function initSlider(trackId, prevId, nextId, dotsId) {
                const track = document.getElementById(trackId);
                const prev = document.getElementById(prevId);
                const next = document.getElementById(nextId);
                const dotsEl = document.getElementById(dotsId);
                if (!track || !prev || !next) return;

                /*
                 * FIX 2: Query both <article> and .slider-card so the achievement
                 * cards (now <article class="slider-card">) and award <article>
                 * elements are both found correctly.
                 */
                const cards = () => Array.from(track.querySelectorAll('article'));
                const gap = 20;

                /*
                 * FIX 3: Use getBoundingClientRect() for reliable card width
                 * regardless of responsive breakpoint, falling back to 300px.
                 */
                const cardW = () => {
                    const c = cards()[0];
                    if (!c) return 320;
                    return c.getBoundingClientRect().width + gap;
                };

                const visible = () => Math.max(1, Math.floor(track.getBoundingClientRect().width / cardW()));
                const pages = () => Math.max(1, cards().length - visible() + 1);

                let page = 0;
                let autoTimer;

                /* Dots */
                function buildDots() {
                    dotsEl.innerHTML = '';
                    for (let i = 0; i < pages(); i++) {
                        const d = document.createElement('span');
                        d.className = i === page ?
                            'inline-block rounded-[3px] cursor-pointer transition-all duration-300 w-5 h-1.5 bg-primary' :
                            'inline-block rounded-full cursor-pointer transition-all duration-300 w-1.5 h-1.5 bg-gray-300';
                        d.addEventListener('click', () => goTo(i));
                        dotsEl.appendChild(d);
                    }
                }

                function updateDots() {
                    dotsEl.querySelectorAll('span').forEach((d, i) => {
                        d.className = i === page ?
                            'inline-block rounded-[3px] cursor-pointer transition-all duration-300 w-5 h-1.5 bg-primary' :
                            'inline-block rounded-full cursor-pointer transition-all duration-300 w-1.5 h-1.5 bg-gray-300';
                    });
                }

                function goTo(p) {
                    page = Math.max(0, Math.min(p, pages() - 1));
                    track.scrollTo({
                        left: page * cardW(),
                        behavior: 'smooth'
                    });
                    updateDots();
                }

                function nextPage() {
                    goTo(page + 1 >= pages() ? 0 : page + 1);
                }

                function prevPage() {
                    goTo(page - 1 < 0 ? pages() - 1 : page - 1);
                }

                next.addEventListener('click', () => {
                    nextPage();
                    resetAuto();
                });
                prev.addEventListener('click', () => {
                    prevPage();
                    resetAuto();
                });

                /* Sync dots on manual scroll */
                let st;
                track.addEventListener('scroll', () => {
                    clearTimeout(st);
                    st = setTimeout(() => {
                        const p = Math.round(track.scrollLeft / cardW());
                        if (p !== page) {
                            page = p;
                            updateDots();
                        }
                    }, 80);
                }, {
                    passive: true
                });

                /* Drag / pointer */
                let startX, startScroll, dragging = false;
                track.addEventListener('pointerdown', e => {
                    dragging = true;
                    startX = e.clientX;
                    startScroll = track.scrollLeft;
                    track.setPointerCapture(e.pointerId);
                    clearInterval(autoTimer);
                });
                track.addEventListener('pointermove', e => {
                    if (!dragging) return;
                    track.scrollLeft = startScroll - (e.clientX - startX);
                });
                track.addEventListener('pointerup', () => {
                    dragging = false;
                    resetAuto();
                });

                /* Auto-play */
                function startAuto() {
                    autoTimer = setInterval(nextPage, 4500);
                }

                function resetAuto() {
                    clearInterval(autoTimer);
                    startAuto();
                }
                startAuto();

                /* Resize — rebuild dots and reset position */
                let rt;
                window.addEventListener('resize', () => {
                    clearTimeout(rt);
                    rt = setTimeout(() => {
                        page = 0;
                        buildDots();
                        goTo(0);
                    }, 200);
                });

                buildDots();

                /* Hide webkit scrollbar */
                track.style.cssText += ';scrollbar-width:none;';
                track.addEventListener('wheel', e => {
                    e.preventDefault();
                    track.scrollLeft += e.deltaY;
                }, {
                    passive: false
                });
            }

            initSlider('achievement-track', 'ach-prev', 'ach-next', 'ach-dots');
            initSlider('award-track', 'awd-prev', 'awd-next', 'awd-dots');

        })();
    </script>
@endpush