@php
    use App\Helpers\Helper;
@endphp

@php
    use App\Enum\AwardTypeEnum;
@endphp

<section id="award-achivement-section"
    class="bg-background-secondary border-t border-gray-200 section-y overflow-hidden font-heading">

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

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

            {{-- Left: standard section heading --}}
            <x-section-heading align="left" :eyebrow="Helper::contentText('homepage.highlights_of_excellence')"
                :title="Helper::content('homepage.achievements_and_awards')"
                :description="Helper::contentText('homepage.achivement_description')" class="mb-0! max-w-xl" />

            {{-- 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">
                    {!! Helper::content('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">
                    {!! Helper::content('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.
                    --}}
                    @php
                        $achTitle = app()->getLocale() == 'en' ? $achivement['title_en'] : $achivement['title_np'];
                        $achDesc = app()->getLocale() == 'en' ? $achivement['short_description_en'] : $achivement['short_description_np'];
                    @endphp
                    {{-- tabindex lets touch devices tap a card to reveal its details (group-focus) --}}
                    <article tabindex="0"
                        class="group slider-card flex-none w-[280px] sm:w-[300px] h-[420px] relative overflow-hidden rounded-xl border border-gray-100 outline-hidden hover:-translate-y-2 hover:shadow-2xl transition-all duration-300"
                        style="scroll-snap-align:start;">

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

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

                        <!-- TITLE (hidden while details are shown) -->
                        <div
                            class="absolute bottom-0 left-0 right-0 p-5 text-white transition-opacity duration-300 group-hover:opacity-0 group-focus:opacity-0">
                            <h3 class="text-lg font-semibold">{{ $achTitle }}</h3>
                        </div>

                        <!-- DETAILS: full text over the image on hover / tap -->
                        <div
                            class="absolute inset-0 p-5 flex flex-col justify-center gap-2 overflow-y-auto bg-black/80 text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-focus:opacity-100">
                            <h3 class="text-lg font-semibold">{{ $achTitle }}</h3>
                            <p class="text-sm text-white/85 leading-relaxed">{{ $achDesc }}</p>
                        </div>

                    </article>
                @endforeach

            </div>

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

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


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


                </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 $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

                    @php
                        $awdTitle = app()->getLocale() == 'en' ? $award['title_en'] ?? '' : $award['title_np'] ?? ($award['title_en'] ?? '');
                        $awdDesc = app()->getLocale() == 'en'
                            ? $award['short_description_en'] ?? ''
                            : $award['short_description_np'] ?? ($award['short_description_en'] ?? '');
                    @endphp
                    <article
                        class="group 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 shrink-0" style="{{ $stripe }}"></div>

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

                            <img loading="lazy" decoding="async" 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">
                                {{ $awdTitle }}
                            </h3>

                            <p class="text-[13px] text-white/55 leading-[1.65] line-clamp-3">
                                {{ $awdDesc }}
                            </p>

                            <button type="button"
                                class="self-start text-[12px] font-semibold underline underline-offset-2"
                                style="color:{{ $badgeClr }}">
                                {{ __('pages.read_more') }}
                            </button>

                        </div>

                        {{-- Details: full text on card hover, or on Read More click (focus-within) --}}
                        <div class="absolute inset-0 p-5 flex flex-col justify-center gap-2 overflow-y-auto bg-black/80 text-white opacity-0 pointer-events-none transition-opacity duration-300 group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto">
                            <h3 class="text-[15px] font-bold leading-snug">{{ $awdTitle }}</h3>
                            <p class="text-[13px] text-white/85 leading-[1.65]">{{ $awdDesc }}</p>
                        </div>

                    </article>
                @endforeach

            </div>

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

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


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


                </div>

            </div>

        </div>

        {{-- See all: follows the active tab (Achievements / Awards) --}}
        <div class="text-center mt-8 md:mt-10">
            <x-see-all id="see-all-ach" :href="route('achievements')" />
        </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');
            }

            const seeAll = document.getElementById('see-all-ach');
            const urls = {
                achievements: @json(route('achievements')),
                awards: @json(route('awards'))
            };

            achievementsBtn.addEventListener('click', () => {
                setTab(achievementSection, awardSection, achievementsBtn, awardsBtn);
                if (seeAll) seeAll.href = urls.achievements;
            });

            awardsBtn.addEventListener('click', () => {
                setTab(awardSection, achievementSection, awardsBtn, achievementsBtn);
                if (seeAll) seeAll.href = urls.awards;
            });


            /* ─── Slider engine ─── */
            function initSlider(trackId, prevId, nextId, dotsId) {
                const track = document.getElementById(trackId);
                const dotsEl = document.getElementById(dotsId);
                if (!track || !dotsEl) 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);
                }

                /* 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 => {
                    if (e.pointerType !== 'mouse') return; // touch swipes natively
                    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;';
            }

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

        })();
    </script>
@endpush

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

            const ease = "power2.out";
            const section = "#award-achivement-section";

            // Header: eyebrow, heading, text, tab switcher fade up in sequence
            gsap.from(
                [section + " h2", section + " h2 ~ p", "#achivement-buton"].map((s) => s).concat(
                    section + " .inline-flex.items-center.gap-2"),
                {
                    y: 24,
                    opacity: 0,
                    duration: 0.7,
                    ease,
                    stagger: 0.1,
                    scrollTrigger: {
                        trigger: section,
                        start: "top 80%",
                        once: true
                    },
                }
            );

            // Achievement cards: staggered fade-up as the track scrolls into view
            const cards = gsap.utils.toArray("#achievement-track article");
            gsap.set(cards, {
                autoAlpha: 0,
                y: 40
            });
            ScrollTrigger.batch(cards, {
                start: "top 92%",
                once: true,
                onEnter: (batch) =>
                    gsap.to(batch, {
                        autoAlpha: 1,
                        y: 0,
                        duration: 0.7,
                        ease,
                        stagger: 0.1,
                        overwrite: true,
                        clearProps: "transform",
                    }),
            });

            // Tabs: cards of the newly shown panel animate in each time
            const reveal = (selector) => {
                requestAnimationFrame(() => {
                    gsap.fromTo(
                        selector, {
                            autoAlpha: 0,
                            y: 30
                        }, {
                            autoAlpha: 1,
                            y: 0,
                            duration: 0.5,
                            ease,
                            stagger: 0.08,
                            overwrite: true,
                            clearProps: "transform",
                        }
                    );
                });
            };
            document.getElementById("awards-btn")?.addEventListener("click", () => reveal("#award-track article"));
            document.getElementById("achievements-btn")?.addEventListener("click", () => reveal(
                "#achievement-track article"));
        });
    </script>
@endpush