@props(['wedding'])

{{-- Mini-game mencocokkan pasangan kartu foto — logika di resources/js/game.js --}}
<style>
    /* ---------- Sentuhan lucu & menggemaskan untuk mini-game ---------- */
    #game .cute-mascot { display: inline-block; animation: gameMascotSpin 2.6s ease-in-out infinite; }
    @keyframes gameMascotSpin { 0%,100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.1); } }
    #game #game-restart { transition: transform .25s ease; display: inline-block; }
    #game #game-restart:hover { transform: scale(1.08) rotate(-2deg); }
    #game #game-modal-close { transition: transform .3s cubic-bezier(.68,-0.55,.27,1.55); }
    #game #game-modal-close:hover { transform: scale(1.06) translateY(-2px); }
    #game .cute-confetti { position: absolute; font-size: 18px; animation: confettiFall 1.8s ease-in forwards; pointer-events: none; }
    @keyframes confettiFall { 0% { opacity:0; transform: translateY(-20px) rotate(0deg); } 15% { opacity:1; } 100% { opacity:0; transform: translateY(60px) rotate(200deg); } }
</style>

<script>
    // Sentuhan lucu tambahan: hujan confetti kecil begitu modal "Selamat!" muncul.
    // Hanya mengamati (tidak mengubah) elemen #game-complete-modal via MutationObserver,
    // jadi TIDAK mengganggu logika permainan asli di resources/js/game.js.
    (function () {
        try {
            document.addEventListener('DOMContentLoaded', function () {
                var modal = document.getElementById('game-complete-modal');
                if (!modal || !window.MutationObserver) return;
                var fired = false;
                var emojis = ['\u{1F389}', '\u2764', '\u{1F48D}', '\u{1F54A}\uFE0F', '\u{1F490}', '\u{1F942}'];
                function isVisible(el) {
                    return !el.classList.contains('hidden') && el.offsetParent !== null;
                }
                function burstConfetti() {
                    var panel = modal.querySelector('div');
                    if (!panel) return;
                    var count = window.innerWidth < 640 ? 12 : 22;
                    for (var i = 0; i < count; i++) {
                        (function () {
                            var c = document.createElement('span');
                            c.className = 'cute-confetti';
                            c.textContent = emojis[Math.floor(Math.random() * emojis.length)];
                            c.style.left = (Math.random() * 100) + '%';
                            c.style.top = '-20px';
                            c.style.fontSize = (12 + Math.random() * 10) + 'px';
                            c.style.animationDelay = (Math.random() * .6) + 's';
                            c.style.animationDuration = (1.4 + Math.random() * 1.2) + 's';
                            panel.appendChild(c);
                            setTimeout(function () { c.remove(); }, 3200);
                        })();
                    }
                }
                var observer = new MutationObserver(function () {
                    if (!fired && isVisible(modal)) {
                        fired = true;
                        burstConfetti();
                    } else if (!isVisible(modal)) {
                        fired = false; // reset supaya confetti muncul lagi kalau main ulang
                    }
                });
                observer.observe(modal, { attributes: true, attributeFilter: ['class', 'style'] });
            });
        } catch (e) {}
    })();
</script>

<section id="game" data-section class="relative bg-rose-50 px-5 sm:px-6 py-14 sm:py-20 md:py-28">
    <div class="max-w-3xl mx-auto text-center mb-8 sm:mb-10" data-reveal>
        <span class="cute-mascot text-3xl mb-1" aria-hidden="true">&#128141;</span>
        <p class="font-display italic text-base sm:text-lg text-rose-600 mb-2">Sambil menunggu hari-H</p>
        <h2 class="font-display text-3xl sm:text-display-lg text-red-950 mb-4">Cocokkan Kartu Kami</h2>
        <p class="font-sans text-sm text-red-900/70 max-w-md mx-auto">
            Temukan semua pasangan foto untuk membuka pesan spesial dari kami berdua.
        </p>
    </div>

    <div class="max-w-2xl mx-auto flex items-center justify-between mb-5 sm:mb-6 px-1 font-sans text-sm text-red-900/80">
        <span>Langkah: <span id="game-moves" class="text-red-950 font-medium">0</span></span>
        <button id="game-restart" type="button" class="text-rose-600 hover:text-rose-500 active:scale-95 underline underline-offset-4 py-2 transition-transform">
            &#128260; Ulangi Permainan
        </button>
    </div>

    <div
        id="memory-game"
        data-cards='@json($wedding->gameCards->map(fn($g) => ["id" => $g->id, "url" => $g->url]))'
        class="max-w-2xl mx-auto grid grid-cols-3 sm:grid-cols-4 gap-2.5 sm:gap-4"
        style="perspective: 1000px;"
    >
        {{-- Kartu dirender secara dinamis oleh game.js dari data-cards --}}
    </div>

    {{-- Modal selamat setelah permainan selesai --}}
    <div id="game-complete-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-[#2b0709]/85 px-5">
        <div class="relative overflow-hidden bg-white rounded-2xl max-w-sm w-full text-center p-6 sm:p-10">
            <span class="cute-mascot inline-block text-4xl mb-2" aria-hidden="true">&#127881;</span>
            <svg class="w-10 h-10 text-rose-500 mx-auto mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
                <path d="M12 2l2.6 6.6L21 10l-5 4.4L17.4 21 12 17.6 6.6 21 8 14.4 3 10l6.4-1.4z"/>
            </svg>
            <h3 class="font-display text-2xl text-red-950 mb-2">Selamat!</h3>
            <p class="font-sans text-sm text-red-900/70 mb-1">
                Kamu menyelesaikan permainan dalam <span id="game-final-moves" class="font-medium text-red-950">0</span> langkah.
            </p>
            <p class="font-sans text-sm text-red-900/70 mb-6">
                Terima kasih sudah meluangkan waktu bermain sambil menunggu hari bahagia kami. Sampai jumpa di hari pernikahan kami! ❤️
            </p>
            <button id="game-modal-close" type="button"
                    class="inline-flex px-6 py-3 min-h-[44px] rounded-full bg-red-950 text-white text-sm hover:bg-red-900 active:scale-95 transition-all">
                Tutup
            </button>
        </div>
    </div>
</section>