@props(['wedding'])

{{-- Galeri 3D "Cincin Kenangan" — carousel kartu foto berputar otomatis, dirender oleh resources/js/gallery3d.js (Three.js) --}}
<style>
    /* ---------- Judul: kamera "klik!" + garis bergelombang ---------- */
    #gallery .gal-title-cam { display: inline-block; transform-origin: 50% 60%; animation: galCamPop 3.6s ease-in-out infinite; }
    @keyframes galCamPop { 0%,78%,100% { transform: scale(1) rotate(0deg); } 84% { transform: scale(1.3) rotate(-12deg); } 92% { transform: scale(.95) rotate(6deg); } }
    #gallery .gal-squiggle { display: block; width: 92px; height: 10px; margin: 12px auto 0; color: #fda4af; }
    #gallery .gal-squiggle path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: galDraw 4s ease-in-out infinite; }
    @keyframes galDraw { 0% { stroke-dashoffset: 100; } 40%,70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }

    /* ---------- Panggung 3D: ukuran & posisi ditulis di sini (TIDAK bergantung pada class Tailwind), supaya canvas tak pernah menciut jadi 0px ---------- */
    #gallery #gallery-3d { position: relative; z-index: 10; width: 100%; max-width: 64rem; height: 360px; margin: 0 auto; outline: none; }
    @media (min-width: 640px) { #gallery #gallery-3d { height: 500px; } }
    #gallery #gallery-3d-canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
    #gallery #gallery-3d-canvas canvas { display: block; width: 100%; height: 100%; }
    #gallery #gallery-prev, #gallery #gallery-next {
        position: absolute; top: 50%; z-index: 10; width: 44px; height: 44px; padding: 0; border-radius: 999px;
        display: flex; align-items: center; justify-content: center; transform: translateY(-50%); cursor: pointer;
    }
    #gallery #gallery-prev { left: 4px; }
    #gallery #gallery-next { right: 4px; }
    @media (min-width: 640px) { #gallery #gallery-prev { left: 16px; } #gallery #gallery-next { right: 16px; } }
    #gallery .gal-empty { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem; pointer-events: none; }
    #gallery #gallery-3d::before {
        content: ''; position: absolute; inset: 6% 4% 14%; border-radius: 50%; pointer-events: none;
        background: radial-gradient(closest-side, rgba(251,113,133,.26), transparent 72%);
        animation: galGlow 5s ease-in-out infinite;
    }
    @keyframes galGlow { 0%,100% { transform: scale(.94); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }
    #gallery #gallery-3d:focus-visible { box-shadow: 0 0 0 3px rgba(253,164,175,.55); border-radius: 18px; }
    #gallery #gallery-3d-canvas { touch-action: pan-y; }

    /* ---------- Tombol panah: bulat, bingkai emas tipis ---------- */
    #gallery #gallery-prev, #gallery #gallery-next {
        background: rgba(43,7,9,.55); border: 1.5px solid rgba(217,179,106,.7); color: #F3E1B5;
        transition: transform .3s cubic-bezier(.68,-0.55,.27,1.55), background-color .2s ease;
    }
    #gallery #gallery-prev:hover, #gallery #gallery-next:hover { transform: translateY(-50%) scale(1.12); background: rgba(217,179,106,.25); }
    #gallery #gallery-prev:active, #gallery #gallery-next:active { transform: translateY(-50%) scale(.9); }

    /* ---------- Bar kontrol di bawah panggung: caption, penghitung, titik, tombol jeda ---------- */
    #gallery .gal5-bar { display: none; position: relative; z-index: 10; flex-direction: column; align-items: center; gap: .85rem; max-width: 30rem; margin: .4rem auto 0; }
    #gallery.gal5-on .gal5-bar { display: flex; }
    #gallery .gal5-caption {
        min-height: 1.7em; margin: 0; padding: 0 1rem; text-align: center; font-family: 'Fredoka', 'Jost', sans-serif;
        font-size: 1.05rem; line-height: 1.5; color: #ffe4e6; opacity: 0;
    }
    #gallery .gal5-caption.is-in { animation: galCap .7s cubic-bezier(.22,1,.36,1) forwards; }
    @keyframes galCap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    #gallery .gal5-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
    #gallery .gal5-counter { min-width: 3.6rem; text-align: center; font-family: 'Fredoka', 'Jost', sans-serif; font-size: .85rem; letter-spacing: .06em; color: #F3E1B5; font-variant-numeric: tabular-nums; }
    #gallery .gal5-dots { display: flex; align-items: center; gap: .55rem; }
    #gallery .gal5-dot {
        position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
        background: rgba(253,164,175,.38); cursor: pointer; transition: width .35s cubic-bezier(.34,1.56,.64,1), background-color .25s ease;
    }
    #gallery .gal5-dot::before { content: ''; position: absolute; inset: -13px -6px; }  /* area sentuh 44px */
    #gallery .gal5-dot.is-active { width: 26px; background: #F3E1B5; }
    #gallery .gal5-play {
        display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: 0 .9rem; border-radius: 999px;
        font-family: 'Fredoka', 'Jost', sans-serif; font-size: .78rem; letter-spacing: .03em; color: #F3E1B5; cursor: pointer;
        background: rgba(217,179,106,.12); border: 1px solid rgba(217,179,106,.55); transition: background-color .2s ease, transform .2s ease;
    }
    #gallery .gal5-play:hover { background: rgba(217,179,106,.24); }
    #gallery .gal5-play:active { transform: scale(.95); }
    #gallery .gal5-play::before { content: '\275A\275A'; font-size: .6rem; letter-spacing: -.1em; }
    #gallery .gal5-play.is-off::before { content: '\25B6'; letter-spacing: 0; }

    /* petunjuk */
    #gallery .gal-hint { display: inline-flex; align-items: center; gap: .4rem; padding: 6px 14px; border-radius: 999px; font-family: 'Fredoka', 'Jost', sans-serif; background: rgba(253,164,175,.12); border: 1px solid rgba(253,164,175,.3); }
    #gallery .gal-finger { display: inline-block; animation: galFinger 1.6s ease-in-out infinite; }
    @keyframes galFinger { 0%,100% { transform: translateX(0) rotate(-6deg); } 50% { transform: translateX(5px) rotate(6deg); } }
    #gallery .gal-empty { animation: galFinger 2.4s ease-in-out infinite; }

    /* tampilan cadangan bila WebGL tidak tersedia */
    #gallery .gal5-fallback { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 12px 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    #gallery .gal5-fallback figure { flex: none; width: min(62%, 260px); scroll-snap-align: center; margin: 0; padding: 8px 8px 14px; border-radius: 6px; background: #fff6ec; border: 2px solid #D9B36C; text-align: center; }
    #gallery .gal5-fallback img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; cursor: pointer; }
    #gallery .gal5-fallback figcaption { margin-top: 8px; font-family: 'Fredoka', 'Jost', sans-serif; font-size: .85rem; color: #4a0f1c; }

    /* ---------- Lightbox: muncul "pop", foto ala polaroid dengan selotip washi ---------- */
    #gallery #gallery-lightbox { animation: galFade .3s ease-out; }
    @keyframes galFade { from { opacity: 0; } to { opacity: 1; } }
    #gallery #gallery-lightbox figure { position: relative; transform: rotate(-1deg); animation: galPop .5s cubic-bezier(.34,1.56,.64,1); }
    @keyframes galPop { from { opacity: 0; transform: scale(.7) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(-1deg); } }
    #gallery #gallery-lightbox figure::before {
        content: ''; position: absolute; top: -12px; left: 50%; z-index: 2; width: 84px; height: 24px; margin-left: -42px; border-radius: 3px;
        background: repeating-linear-gradient(135deg, rgba(253,164,175,.85) 0 8px, rgba(255,228,230,.85) 8px 16px);
        transform: rotate(-4deg); box-shadow: 0 2px 6px rgba(0,0,0,.25);
    }
    #gallery #gallery-lightbox-img { background: #fff; padding: 10px 10px 22px; border-radius: 18px; box-shadow: 0 12px 34px rgba(0,0,0,.45); }
    #gallery #gallery-lightbox-caption { font-family: 'Fredoka', 'Jost', sans-serif; }
    #gallery #gallery-lightbox-caption:not(:empty)::before { content: '\2661  '; color: #fda4af; }
    #gallery #gallery-lightbox-caption:not(:empty)::after  { content: '  \2661'; color: #fda4af; }
    #gallery #gallery-lightbox-close {
        background: rgba(253,164,175,.2); border: 1px solid rgba(253,164,175,.5);
        transition: transform .35s cubic-bezier(.34,1.56,.64,1), background-color .2s ease;
    }
    #gallery #gallery-lightbox-close:hover { transform: rotate(90deg) scale(1.1); }
    #gallery #gallery-lightbox-close:active { transform: rotate(90deg) scale(.9); }
    #gallery #gallery-prev:focus-visible, #gallery #gallery-next:focus-visible, #gallery #gallery-lightbox-close:focus-visible,
    #gallery .gal5-play:focus-visible, #gallery .gal5-dot:focus-visible { outline: 3px solid rgba(253,164,175,.7); outline-offset: 3px; }

    /* ---------- Responsif ---------- */
    @media (max-width: 639px) {
        #gallery #gallery-prev, #gallery #gallery-next { width: 2.5rem; height: 2.5rem; }
        #gallery .gal5-caption { font-size: .95rem; }
    }
    @media (max-height: 520px) and (orientation: landscape) {
        #gallery #gallery-lightbox-img { max-height: 62dvh; }
    }
</style>

<section id="gallery" data-section class="relative bg-red-950 px-5 sm:px-6 py-14 sm:py-20 md:py-28 overflow-hidden">
    <div class="aurora-bg"></div>

    <div class="relative z-10 max-w-3xl mx-auto text-center mb-6 sm:mb-8" data-reveal>
        <p class="font-display italic text-base sm:text-lg text-rose-300 mb-2">Sepenggal kisah kami</p>
        <h2 class="font-display text-3xl sm:text-display-lg text-white">
            <span class="gal-title-cam" aria-hidden="true">&#128248;</span> Galeri Momen
        </h2>
        <svg class="gal-squiggle" viewBox="0 0 92 10" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">
            <path pathLength="100" d="M2 5 Q 9 -1 16 5 T 30 5 T 44 5 T 58 5 T 72 5 T 90 5"/>
        </svg>
    </div>

    {{-- Data foto dikirim via data-photos (JSON). Scene Three.js dibangun malas (lazy) saat section mendekati layar. --}}
    <div
        id="gallery-3d"
        tabindex="0" role="region" aria-label="Galeri foto 3D. Gunakan tombol panah kiri dan kanan untuk berpindah foto."
        data-photos='@json($wedding->photos->map(fn($p) => ["id" => $p->id, "url" => $p->url, "caption" => $p->caption]))'
    >
        <div id="gallery-3d-canvas"></div>

        @if($wedding->photos->isEmpty())
            <p class="gal-empty font-sans text-sm text-white/60">
                Foto-foto manis segera hadir di sini &#127800;
            </p>
        @endif

        <button id="gallery-prev" type="button" aria-label="Foto sebelumnya">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
        </button>
        <button id="gallery-next" type="button" aria-label="Foto berikutnya">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
        </button>
    </div>

    @if($wedding->photos->isNotEmpty())
        <div class="gal5-bar">
            <p id="gallery-caption" class="gal5-caption" aria-live="polite">&nbsp;</p>
            <div class="gal5-controls">
                <span id="gallery-counter" class="gal5-counter">1 / {{ $wedding->photos->count() }}</span>
                <div id="gallery-dots" class="gal5-dots"></div>
                <button id="gallery-play" type="button" class="gal5-play" aria-pressed="true"><span data-label>Berhenti</span></button>
            </div>
        </div>


    @endif

    {{-- Lightbox pratinjau detail --}}
    <div id="gallery-lightbox" class="fixed inset-0 z-50 hidden items-center justify-center bg-[#2b0709]/90 px-6">
        <button id="gallery-lightbox-close" type="button" aria-label="Tutup"
                class="absolute top-4 right-4 sm:top-6 sm:right-6 w-11 h-11 rounded-full flex items-center justify-center
                       text-white/80 hover:text-white active:scale-95"
                style="top: calc(1rem + env(safe-area-inset-top));">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M6 6l12 12M18 6L6 18"/></svg>
        </button>
        <figure class="max-w-2xl w-full">
            <img id="gallery-lightbox-img" src="" alt="" decoding="async" class="w-full max-h-[70dvh] object-contain rounded-lg">
            <figcaption id="gallery-lightbox-caption" class="text-center text-white/70 font-sans text-sm mt-4"></figcaption>
        </figure>
    </div>
</section>