@extends('layout.b2c')
@section('title', 'Predavači | Krojačeva škola – Učenje koje pokreće karijeru')

@section('content')

    <section class="section section-top-title">
        <figure class="curly-line">
            <svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
                <g transform="translate(0,240) scale(0.1,-0.1)" fill="currentColor" stroke="none">
                    <path
                        d="M2970 2378 c0 -7 -23 -60 -50 -117 -43 -89 -62 -115 -133 -186 -69 -69 -98 -89 -187 -133 -135 -65 -217 -93 -595 -203 -170 -50 -353 -106 -405 -126 -297 -111 -445 -237 -521 -445 -53 -143 -73 -375 -49 -538 l10 -65 -41 -34 c-22 -19 -101 -104 -175 -188 -143 -162 -205 -216 -296 -258 -91 -42 -176 -55 -361 -55 -110 0 -166 -3 -162 -10 10 -16 301 -12 392 5 127 24 222 77 324 182 48 48 106 111 130 138 75 87 173 185 185 185 6 0 14 -15 18 -32 3 -18 18 -62 31 -98 73 -188 209 -264 345 -193 90 47 149 156 136 250 -26 191 -223 257 -444 150 -34 -16 -66 -27 -70 -23 -4 4 -7 94 -7 199 0 222 14 303 74 432 111 236 275 329 906 510 662 190 803 276 929 563 38 88 42 102 26 102 -5 0 -10 -6 -10 -12z m-1544 -1757 c110 -50 153 -174 100 -286 -53 -113 -173 -166 -272 -119 -67 32 -146 148 -174 254 -6 25 -13 52 -16 62 -6 22 42 55 124 84 84 30 179 32 238 5z" />
                </g>
            </svg>
        </figure>
        <!-- curly-line end -->
        <div class="container-custom">

            <h1><span class="text-light">Tim Krojačeve škole.</span> <br /> Znanje počinje od ljudi.</h1>
            <p>Naši predavači su stručnjaci iz prakse — dizajneri, programeri, mentori i lideri koji znanje prenose sa
                strašću i iskustvom.
            </p>
        </div>
        <!-- container end -->
    </section>

    <section class="scroll-section-teachers">
        <!-- Top row (scrolls right) -->
        @foreach ($ch->chunk(20) as $chInd => $instructors)
            @php
               $paran = $chInd % 2 == 0
            @endphp
            @if ($chInd < 2)
            <div class="scroll-row-teachers scroll-row-{{ $paran ? 'right' : 'left' }}-teachers">
                <div class="scroll-track-teachers">
                @foreach ($instructors as $i)
                    <img src="{{ asset('storage/'.$i->avatar) }}" alt="{{ $i->first_name .' ' . $i->last_name }}">
                @endforeach
                </div>
            </div>
            @endif
        @endforeach
    </section>
    <!-- scroll end -->

    <section class="section section-hero-courses">
        <div class="container-custom">
            <h2 class="hero-title">
                Pretplatom otključavate<br>
                <strong class="k-count">
                    200+ kurseva
                    <svg class="hero-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 359.17 349.21"
                        aria-hidden="true">
                        <path
                            d="M351.69,157.44c-.61,46.51-6.73,95.47-19,140.76-3.06,9.79-17.75,6.12-15.3-4.28a641.19,641.19,0,0,0,17.75-123c1.84-41.61,2.45-97.31-27.54-129.74C292.32,24.64,264.78,25.25,244,24c-30.6-1.84-61.81-1.22-92.41.61-30.6,1.22-61.81,4.28-92.41,8C42.63,34.43,15.7,43.61,1,35.65A2.13,2.13,0,0,1,.4,32.59c11-14.08,42.23-13.46,58.75-15.91C95.87,11.79,132,9.34,168.7,7.5c44.68-1.84,114.44-11,149.94,22.64C351.08,59.52,351.69,117.05,351.69,157.44Z" />
                        <path
                            d="M338.22,350.22c-4.28,6.12-11.63,4.9-14.69-1.84-8.57-20.81-22-39.78-30.6-60.59-2.45-6.12,6.73-9.18,9.79-4.28,9.79,15.91,19,31.82,28.76,47.74l7.35-14.69c3.06-8,3.67-15.91,7.34-23.26,2.45-5.51,9.79-3.06,11.63,1.22C363.93,311.67,348,336.15,338.22,350.22Z" />
                    </svg>
                </strong>
            </h2>

            <p class="hero-sub">Izaberite plan koji pokreće vaš rast</p>

            <p class="hero-text">
                Vaša pretplata vam daje potpunu slobodu učenja. Odmah dobijate neograničen pristup za
                <a href="/kursevi" class="link-fill">200 + kurseva</a>, koje vode vrhunski stručnjaci. Učite kroz
                dinamične
                video lekcije, bilo kad i bilo gde. Sve ovo dobijate po ceni koja predstavlja ogromnu uštedu u odnosu na
                pojedinačne kupovine.
            </p>

            <!-- Dugme centrirano -->
            <div class="hero-btn-center">
                <a href="{{ route('kupovina.index') }}" class="btn btn-square-60 neon-blue-bg">
                    PRETPLATITE SE
                </a>
            </div>

        </div>
    </section>
    <!-- Section end -->


    <!-- Listing predavača -->
    <section class="section teachers-listing">
        <div class="container-custom">

            <!-- teacher-item -->
            <div class="row g-4">
                @foreach ($ch->chunk(6) as $instructors)
                    @include('front.instructor.inc.inc-predavac')
                @endforeach
            </div>
            <!-- teacher-item end -->

            <!-- Sentinel + load more (ako radiš infinite) -->
            <div id="sentinelTeachers" aria-hidden="true"></div>
            <div class="loadmore-wrap-sj" id="loadmoreWrapTeachers" hidden>
                <button id="loadMoreBtnTeachers" class="btn-loadmore-sj" disabled>
                    <span class="btn-text">Učitavam...</span>
                    <span id="infiniteLoaderTeachers" class="btn-loader">
                        <svg class="spinner" viewBox="0 0 50 50" aria-hidden="true">
                            <circle class="path" cx="25" cy="25" r="20" fill="none"
                                stroke-width="2"></circle>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </section>
    <!-- Predavaci end -->

    @include('front.partials.index_b2c._footer')
    <!--- page-wrapper end -->

@endsection

@section('modals-and-offcanvas')
@endsection
@section('add-scripts')
    @parent

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const wrap = document.getElementById('planSwitch');
        if (!wrap) return;

        const btns = wrap.querySelectorAll('.plan-btn-sj');
        const priceEl = document.getElementById('priceValue');
        const periodEl = document.getElementById('pricePeriod');
        const savingsWrap = document.getElementById('courseSavings');
        const saveLabelEl = savingsWrap.querySelector('.save-label');
        const discountEl = savingsWrap.querySelector('.discount-badge');

        // UZIMAMO TAČNO IZ HTML-a (backend će puniti ove data-* vrednosti)
        const month = Number(wrap.dataset.priceMonth);
        const year = Number(wrap.dataset.priceYear);

        const fmt = n => n.toLocaleString('sr-RS');

        function updateSavings() {
            const fullYearIfMonthly = month * 12;      // npr. 2500 * 12 = 30000
            const savings = fullYearIfMonthly - year;  // npr. 30000 - 8956 = 21044
            const percent = Math.round((savings / fullYearIfMonthly) * 100); // npr. 70

            if (!Number.isFinite(savings) || savings <= 0) {
                savingsWrap.style.display = 'none';
                return;
            }
            savingsWrap.style.display = 'inline-flex';
            saveLabelEl.textContent = `uštedi ${fmt(savings)} RSD`;
            discountEl.textContent = `-${percent}%`;
        }

        function setPlan(plan) {
            btns.forEach(b => b.classList.toggle('is-active', b.dataset.plan === plan));
            if (plan === 'year') {
                priceEl.textContent = fmt(year);
                periodEl.textContent = 'godišnje';
                updateSavings();
            } else {
                priceEl.textContent = fmt(month);
                periodEl.textContent = 'mesečno';
                savingsWrap.style.display = 'none';
            }
        }

        btns.forEach(b => b.addEventListener('click', () => setPlan(b.dataset.plan)));
        setPlan('month'); // start
    });
</script>
<!-- Matematika za popust -->

<script>
    (() => {
        const wrap = document.querySelector('.catmenu-wrap');
        const trigger = document.getElementById('catTrigger');   // link "Kategorije"
        const menu = document.getElementById('catmenu');       // panel

        if (!wrap || !trigger || !menu) return;

        const open = () => {
            trigger.setAttribute('aria-expanded', 'true');
            menu.hidden = false;
            wrap.classList.add('is-open');
        };
        const close = () => {
            trigger.setAttribute('aria-expanded', 'false');
            menu.hidden = true;
            wrap.classList.remove('is-open');
            menu.querySelectorAll('[data-open]').forEach(n => n.removeAttribute('data-open'));
        };

        // Toggle panel
        trigger.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            (trigger.getAttribute('aria-expanded') === 'true') ? close() : open();
        });

        // Close kad klikneš van ili Escape
        document.addEventListener('click', (e) => {
            if (!menu.hidden && !menu.contains(e.target) && !trigger.contains(e.target)) close();
        });
        document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });

        // --- Podmeniji -------------------------------------------------------------
        const ensureAllLink = (item) => {
            const sub = item.querySelector(':scope > .cm-sub');
            if (!sub) return;
            if (sub.querySelector(':scope > li.cm-all')) return;
            const url = item.getAttribute('data-url') || '#';
            const li = document.createElement('li');
            li.className = 'cm-all';
            li.innerHTML = `<a class="cm-all-link" href="${url}">Svi kursevi iz kategorije</a>`;
            sub.appendChild(li);
        };

        const closeSiblings = (li) => {
            const ul = li.parentElement;
            if (!ul) return;
            ul.querySelectorAll(':scope > [data-cm][data-open="true"]').forEach(sib => {
                if (sib !== li) sib.removeAttribute('data-open');
            });
        };

        // Delegacija: klik na .cm-toggle otvara/zatvara odgovarajući .cm-sub
        menu.addEventListener('click', (e) => {
            const t = e.target.closest('.cm-toggle');
            if (!t) return;
            e.preventDefault();

            const li = t.closest('[data-cm]');
            const isOpen = li.getAttribute('data-open') === 'true';

            if (!isOpen) closeSiblings(li);           // samo jedan otvoren na istom nivou
            li.setAttribute('data-open', isOpen ? 'false' : 'true');

            if (!isOpen) ensureAllLink(li);
        });
    })();
</script>

<script>
    (() => {
        // ---- Podesivi podaci
        const SUGGESTIONS = [
            "Data Analyst", "Project Manager", "UX Designer", "Frontend Developer",
            "Backend Developer", "Business Analyst", "HR Specialist", "Digital Marketer",
            "Product Owner", "DevOps Engineer", "AI Engineer", "Copywriter"
        ];

        // ---- Selektori (po potrebi prilagodi)
        const chipsWrap = document.getElementById('qsChips');
        const refreshBtn = document.querySelector('.qs-refresh');
        const searchInput = document.querySelector('.search-hs__input'); // input u headeru

        if (!chipsWrap) return;

        // ---- SVG utili (bez eksternih fajlova)
        const sparkleSVG = (size = 12) => `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
       width="${size}" height="${size}" fill="currentColor">
    <path d="M12 2c.3 0 .6.2.7.5l2.2 6.2c.2.5.6.9 1.1 1.1l6.2 2.2c.3.1.5.4.5.7s-.2.6-.5.7l-6.2 2.2c-.5.2-.9.6-1.1 1.1l-2.2 6.2c-.1.3-.4.5-.7.5s-.6-.2-.7-.5l-2.2-6.2c-.2-.5-.6-.9-1.1-1.1L2.8 13c-.3-.1-.5-.4-.5-.7s.2-.6.5-.7l6.2-2.2c.5-.2.9-.6 1.1-1.1l2.2-6.2c.1-.3.4-.5.7-.5Z"/>
  </svg>`;

        const refreshSVG = (size = 12) => `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
       width="${size}" height="${size}" fill="currentColor">
    <path d="M12 4a8 8 0 1 1-7.6 10.4 1 1 0 0 1 1.9-.6A6 6 0 1 0 12 6h-1.2a1 1 0 0 1 0-2H12a1 1 0 0 1 1 1v2.2a1 1 0 0 1-2 0V6.9A7.9 7.9 0 0 1 12 4Z"/>
  </svg>`;

        // Ako želiš da se refresh dugmetu doda ikona (ako nema unutra)
        if (refreshBtn && refreshBtn.children.length === 0) {
            refreshBtn.innerHTML = refreshSVG(16);
        }

        // ---- Helperi
        const pick = (n = 3) => {
            const pool = [...SUGGESTIONS];
            // jednostavno mešanje + slice (dovoljno za UI)
            pool.sort(() => Math.random() - 0.5);
            return pool.slice(0, n);
        };

        const setSearchValue = (value) => {
            if (!searchInput) return;
            searchInput.value = value;
            // ako slušaš na input event
            searchInput.dispatchEvent(new Event('input', { bubbles: true }));
            searchInput.focus();
        };

        const render = () => {
            const chips = pick().map(v =>
                `<button class="qs-chip" type="button" data-value="${v}">
         ${sparkleSVG(14)}<span class="qs-chip-text">${v}</span>
       </button>`
            ).join('');
            chipsWrap.innerHTML = chips;
        };

        // ---- Init + događaji
        render();

        refreshBtn?.addEventListener('click', () => {
            // mala animacija rotacije ako imaš CSS (optional)
            refreshBtn.classList.add('is-rotating');
            render();
            // skini klasu posle 300ms (uskladi sa CSS animacijom)
            setTimeout(() => refreshBtn.classList.remove('is-rotating'), 300);
        });

        chipsWrap.addEventListener('click', (e) => {
            const btn = e.target.closest('.qs-chip');
            if (!btn) return;
            const value = btn.dataset.value;
            setSearchValue(value);
            // ako ti treba i custom event za druge listenere:
            document.dispatchEvent(new CustomEvent('quick-suggest:set', { detail: { value } }));
        });
    })();
</script>
<script>
    (() => {
        // spreči duplo vezivanje
        if (window.__coursesInfiniteBound) return;
        window.__coursesInfiniteBound = true;

        const grid = document.getElementById('coursesGrid');   // kontejner sa .course-item-box
        const sentinel = document.getElementById('sentinel');      // dno liste
        const wrap = document.getElementById('loadmoreWrap');  // indikator (spiner + "Učitavam…")
        const textEl = wrap ? wrap.querySelector('.btn-text') : null;

        if (!grid || !sentinel || !wrap) return;

        let page = Number(grid.dataset.page || 1);
        let loading = false;
        let hasMore = true;

        // ————— helperi
        const showLoader = (label = 'Učitavam...') => {
            if (textEl) textEl.textContent = label;
            wrap.hidden = false;
        };
        const hideLoader = () => { wrap.hidden = true; };

        // izgradi URL sledeće strane (po potrebi možeš koristiti data-next sa bekenda)
        const nextUrl = () => {
            const d = grid.dataset.next;
            if (d) return d;
            return `/api/courses?page=${page + 1}`;
        };

        // ubaci nove kartice iz dobijenog HTML-a
        const appendCardsFromHTML = (html) => {
            const tmp = document.createElement('div');
            tmp.innerHTML = html;
            const cards = tmp.querySelectorAll('.course-item-box');
            cards.forEach(c => grid.appendChild(c));

            // opcioni holder za sledeći URL
            const nextHolder = tmp.querySelector('[data-next]');
            if (nextHolder) {
                grid.dataset.next = nextHolder.getAttribute('data-next') || '';
            }
            return cards.length;
        };

        const stopInfinite = () => {
            hasMore = false;
            hideLoader();
            if (io) io.disconnect();
        };

        // ————— GLAVNA FUNKCIJA
        const loadMore = async () => {
            if (loading || !hasMore) return;
            loading = true;
            showLoader('Učitavam...');

            // === DEMO MOD: samo sačekaj 3s i sakrij indikator ===
            // (ostavi ovo dok ne povežeš pravi API)
            try {
                await new Promise(r => setTimeout(r, 3000));
                // Ako želiš da simuliraš dodavanje 1-2 kartice u DEMO-u, možeš ovde ubaciti placeholder-e.
                // grid.insertAdjacentHTML('beforeend', '<div class="course-item-box">Demo card</div>');
                page++;
            } finally {
                loading = false;
                hideLoader();
                // Ako želiš da se nakon 1-2 učitavanja sve ugasi u DEMO-u:
                // if (page >= 2) stopInfinite();
            }

            /*  === PRODUKCIJA (skineš komentar kad povežeš API) ===
            try {
              const url = nextUrl();
              const res = await fetch(url, { cache: 'no-store' });
              if (!res.ok) { hideLoader(); loading = false; return; }
        
              const html = (await res.text()).trim();
              if (!html) { stopInfinite(); return; }
        
              const count = appendCardsFromHTML(html);
              if (count === 0) { stopInfinite(); return; }
        
              page++;
              hideLoader();
            } catch (err) {
              // po želji: pokaži grešku ili samo sakrij indikator
              hideLoader();
            } finally {
              loading = false;
            }
            */
        };

        // ————— OBSERVER
        let io = null;
        try {
            io = new IntersectionObserver((entries) => {
                entries.forEach(e => { if (e.isIntersecting) loadMore(); });
            }, { root: null, rootMargin: '600px 0px', threshold: 0.01 });
            io.observe(sentinel);
        } catch (e) {
            // fallback bez IO: pozovi odmah jednom u DEMO-u
            loadMore();
        }

        // Ako je stranica kratka pa je sentinel odmah vidljiv — pokreni prvo učitavanje
        requestAnimationFrame(() => {
            const r = sentinel.getBoundingClientRect();
            if (r.top < (window.innerHeight + 50)) loadMore();
        });
    })();
</script>
<!-- Loader end -->


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const modal = document.getElementById('videoModal');
        if (!modal) return; // nema modala, nema dalje

        const frameEl = modal.querySelector('.vm-frame');

        function openVimeo(id) {
            frameEl.innerHTML = '';
            const ifr = document.createElement('iframe');
            ifr.src = `https://player.vimeo.com/video/${id}?autoplay=1&title=0&byline=0&portrait=0`;
            ifr.allow = 'autoplay; fullscreen; picture-in-picture';
            ifr.setAttribute('allowfullscreen', '');
            frameEl.appendChild(ifr);

            modal.classList.add('is-open');
            modal.setAttribute('aria-hidden', 'false');
            document.body.classList.add('vm-locked');
        }

        function closeModal() {
            modal.classList.remove('is-open');
            modal.setAttribute('aria-hidden', 'true');
            document.body.classList.remove('vm-locked');
            frameEl.innerHTML = '';
        }

        // Klik SAMO na <a class="item-link" data-vimeo="...">
        document.addEventListener('click', function (e) {
            const a = e.target.closest('a.item-link[data-vimeo]');
            if (!a) return;
            e.preventDefault();
            const id = a.dataset.vimeo;
            if (id) openVimeo(id);
        });

        // Zatvaranje: backdrop ili X dugme
        modal.addEventListener('click', function (e) {
            if (e.target.hasAttribute('data-close')) closeModal();
        });

        // Escape
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape' && modal.classList.contains('is-open')) closeModal();
        });
    });
</script>
<!-- Vimeo modal end -->


<script>
    (function () {
        const bar = document.querySelector('.mobile-buybar');
        if (!bar) return;
        const tabs = bar.querySelectorAll('.mbb-tab');
        const val = bar.querySelector('.mbb-price__value');
        const cur = bar.querySelector('.mbb-price__currency');
        const suf = bar.querySelector('.mbb-price__suffix');
        const buy = bar.querySelector('.mbb-buy');

        const DATA = {
            monthly: { v: +bar.dataset.monthly || 0, url: bar.dataset.monthlyUrl || '#', suf: 'mesečno' },
            yearly: { v: +bar.dataset.yearly || 0, url: bar.dataset.yearlyUrl || '#', suf: 'godišnje' },
            lifetime: { v: +bar.dataset.lifetime || 0, url: bar.dataset.lifetimeUrl || '#', suf: 'jednom' }
        };
        const fmt = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        function select(p) {
            const d = DATA[p]; if (!d) return;
            tabs.forEach(b => {
                const a = b.dataset.plan === p;
                b.classList.toggle('is-active', a);
                b.setAttribute('aria-selected', String(a));
            });
            val.textContent = fmt(d.v);
            suf.textContent = d.suf;
            suf.style.display = d.suf ? 'block' : 'none';
            buy.href = d.url;
        }
        select('monthly');
        tabs.forEach(b => b.addEventListener('click', () => select(b.dataset.plan)));
    })();
</script>
<!-- Sticky end -->

<script>
    (function () {
        const SEGMENT = { start: 30, dur: 10 }; // ▶️ pusti 10s od 30. sekunde
        const cards = document.querySelectorAll('.course-item-box[data-vimeo-id]');
        if (!cards.length) return;

        const players = new Map();

        function buildIframe(id) {
            const url =
                `https://player.vimeo.com/video/${id}` +
                `?api=1&muted=1&controls=0&title=0&byline=0&portrait=0&loop=0&dnt=1`;
            const ifr = document.createElement('iframe');
            ifr.src = url;
            ifr.allow = 'autoplay; fullscreen; picture-in-picture';
            ifr.setAttribute('allowfullscreen', '');
            ifr.referrerPolicy = 'strict-origin-when-cross-origin';
            Object.assign(ifr.style, { width: '100%', height: '100%', border: '0', display: 'block' });
            return ifr;
        }

        // helperi za komunikaciju sa Vimeo iframeom
        const cmd = (ifr, m, v) => ifr?.contentWindow?.postMessage({ method: m, value: v }, '*');
        const play = (ifr) => cmd(ifr, 'play');
        const pause = (ifr) => cmd(ifr, 'pause');
        const setT = (ifr, s) => cmd(ifr, 'setCurrentTime', s);
        const addEv = (ifr, e) => cmd(ifr, 'addEventListener', e);

        // loader vidljiv samo tokom inicijalnog load-a
        function hideLoader(st) {
            if (!st.loader) return;
            st.loader.classList.remove('is-loading');
            st.loader.style.display = 'none';
        }
        function showLoader(st) {
            if (!st.loader) return;
            st.loader.style.display = 'flex';
            st.loader.classList.add('is-loading');
        }

        function ensure(card) {
            let st = players.get(card);
            if (st?.iframe) return st;

            const id = card.getAttribute('data-vimeo-id');
            const wrap = card.querySelector('.course-media .video');
            const loader = card.querySelector('.loader-sj');
            let overlay = card.querySelector('.lm-overlay');
            if (!id || !wrap) return null;

            const iframe = buildIframe(id);
            wrap.appendChild(iframe);

            // overlay “Saznaj više”
            if (!overlay) {
                overlay = document.createElement('a');
                overlay.className = 'lm-overlay';
                overlay.href = card.getAttribute('data-detail-url') || '#';
                overlay.innerHTML = '<span>Saznaj više</span>';
                overlay.setAttribute('aria-label', 'Saznaj više o kursu');
                card.querySelector('.course-media').appendChild(overlay);
            } else {
                overlay.href = card.getAttribute('data-detail-url') || overlay.getAttribute('href') || '#';
            }

            if (loader) hideLoader({ loader });

            st = { iframe, ready: false, timer: null, overlay, loader, playGuard: null };
            players.set(card, st);

            addEv(iframe, 'ready');
            addEv(iframe, 'play');

            return st;
        }

        function parseMsg(e) {
            let d = e.data;
            if (typeof d === 'string') { try { d = JSON.parse(d); } catch { return null; } }
            return d;
        }

        // Globalni Vimeo listener
        if (!window._vimeoSegmentOnce) {
            window.addEventListener('message', (e) => {
                const data = parseMsg(e);
                if (!data) return;

                let st = null;
                players.forEach((v) => { if (v.iframe?.contentWindow === e.source) st = v; });
                if (!st) return;

                if (data.event === 'ready') {
                    st.ready = true;
                    setT(st.iframe, SEGMENT.start);
                    hideLoader(st); // čim se učita, skini loader
                }

                if (data.event === 'play') {
                    hideLoader(st);
                    if (st.playGuard) { clearTimeout(st.playGuard); st.playGuard = null; }
                }
            });
            window._vimeoSegmentOnce = true;
        }

        // pomoćne funkcije
        function clearTimer(st) {
            if (st.timer) { clearTimeout(st.timer); st.timer = null; }
        }
        function stopAndShow(st) {
            pause(st.iframe);
            hideLoader(st);
            st.overlay.classList.add('is-visible');
        }
        function hideOverlay(st) {
            st.overlay.classList.remove('is-visible');
        }
        function pauseOthers(except) {
            players.forEach(({ iframe, overlay, loader, playGuard }, c) => {
                if (iframe && iframe !== except) pause(iframe);
                overlay?.classList.remove('is-visible');
                if (loader) hideLoader({ loader });
                const s = players.get(c);
                if (s) { clearTimer(s); if (s.playGuard) { clearTimeout(s.playGuard); s.playGuard = null; } }
            });
        }

        // glavni hover listeneri
        cards.forEach((card) => {
            const io = new IntersectionObserver((entries) => {
                entries.forEach(({ isIntersecting, target }) => {
                    if (isIntersecting) ensure(target);
                });
            }, { rootMargin: '200px 0px', threshold: 0.1 });
            io.observe(card);

            card.addEventListener('mouseenter', () => {
                const st = ensure(card);
                if (!st) return;

                hideOverlay(st);
                pauseOthers(st.iframe);
                clearTimer(st);

                // loader samo ako player još NIJE spreman
                if (!st.ready) {
                    showLoader(st);
                    if (st.playGuard) clearTimeout(st.playGuard);
                    st.playGuard = setTimeout(() => hideLoader(st), 2000);
                } else {
                    hideLoader(st);
                }

                setT(st.iframe, SEGMENT.start);
                play(st.iframe);

                st.timer = setTimeout(() => stopAndShow(st), SEGMENT.dur * 1000);
            });

            card.addEventListener('mouseleave', () => {
                const st = players.get(card);
                if (!st) return;
                clearTimer(st);
                if (st.playGuard) { clearTimeout(st.playGuard); st.playGuard = null; }
                pause(st.iframe);
                hideOverlay(st);
                hideLoader(st);
                setT(st.iframe, SEGMENT.start);
            });
        });
    })();
</script>
<!-- Vimeo loop -->
@endsection