@props(['wedding'])

{{-- Hitung mundur — nilai dihitung di client dari reception_datetime (data dari database) --}}
<style>
    /* ---------- Sentuhan lucu & menggemaskan untuk section Countdown ---------- */
    #countdown .cute-mascot { display: inline-block; animation: mascotHop 1.7s ease-in-out infinite; filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); }
    @keyframes mascotHop { 0%,100% { transform: translateY(0) rotate(-3deg); } 30% { transform: translateY(-10px) rotate(4deg); } 50% { transform: translateY(0) rotate(-2deg); } }
    #countdown .cute-card-jelly { transition: transform .35s cubic-bezier(.68,-0.55,.27,1.55); }
    #countdown .cute-card-jelly:hover { transform: scale(1.08) rotate(-2deg); }
    #countdown .cute-card-jelly { animation: cardIdleBounce 3.4s ease-in-out infinite; }
    @keyframes cardIdleBounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.015); } }
    #countdown .cute-float-star { position: absolute; animation: cuteStarFloat 4s ease-in-out infinite; pointer-events: none; }
    @keyframes cuteStarFloat { 0%,100% { transform: translateY(0) rotate(0deg); opacity:.5; } 50% { transform: translateY(-12px) rotate(20deg); opacity:1; } }

    /* ---------- Tambahan lucu: kupu-kupu & confetti kecil menghiasi area hitung mundur ---------- */
    #countdown .cute-butterfly-cd { position: absolute; font-size: 15px; opacity:.75; animation: cdButterfly 3.6s ease-in-out infinite; pointer-events: none; }
    @keyframes cdButterfly { 0%,100% { transform: translate(0,0) rotate(-6deg); } 50% { transform: translate(8px,-12px) rotate(8deg); } }
    #countdown .cute-tagline { display: inline-flex; align-items: center; gap: 6px; animation: taglineSway 2.6s ease-in-out infinite; }
    @keyframes taglineSway { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-2deg); } }

    /* =====================================================================
       V3 — lebih animatif, lebih responsif, lebih "wedding". Class baru berawalan "cd3-".
       Catatan: animasi flip 3D milik countdown.js ada di .countdown-card — TIDAK disentuh.
       Semua hiasan baru dipasang di pembungkus .cute-card-jelly atau elemen terpisah.
    ===================================================================== */

    /* ---------- Bendera segitiga (bunting) pesta menggantung di atas section ---------- */
    #countdown .cd3-bunting { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; padding: 0 2%; pointer-events: none; }
    #countdown .cd3-bunting::before { content: ''; position: absolute; top: -12px; left: -4%; right: -4%; height: 34px; border-bottom: 1.5px solid rgba(217,179,106,.5); border-radius: 50%; }
    #countdown .cd3-bunting i { display: block; width: 0; height: 0; margin-top: 12px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 21px solid #fda4af; transform-origin: 50% 0; animation: cd3Flag 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.3s); opacity: .92; }
    #countdown .cd3-bunting i:nth-child(4n+2) { border-top-color: #F3E1B5; }
    #countdown .cd3-bunting i:nth-child(4n+3) { border-top-color: #ffffff; }
    #countdown .cd3-bunting i:nth-child(4n)   { border-top-color: #fb7185; }
    #countdown .cd3-bunting i:nth-child(3n)   { margin-top: 20px; }
    @keyframes cd3Flag { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

    /* ---------- Balon udara naik pelan ---------- */
    #countdown .cd3-balloon { position: absolute; bottom: -60px; z-index: 1; font-size: 28px; line-height: 1; pointer-events: none; opacity: 0; animation: cd3Balloon 15s ease-in infinite; filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); }
    @keyframes cd3Balloon {
        0%   { opacity: 0;  transform: translate3d(0,0,0) rotate(-6deg); }
        10%  { opacity: .9; }
        50%  { transform: translate3d(14px,-45vh,0) rotate(6deg); }
        90%  { opacity: .8; }
        100% { opacity: 0;  transform: translate3d(-10px,-95vh,0) rotate(-5deg); }
    }

    /* ---------- Merpati terbang menyeberang ---------- */
    #countdown .cd3-dove { position: absolute; left: -10%; z-index: 1; font-size: 22px; line-height: 1; pointer-events: none; opacity: 0; animation: cd3Dove 16s linear infinite; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
    @keyframes cd3Dove {
        0%   { opacity: 0;   transform: translate3d(0,0,0) rotate(-5deg); }
        8%   { opacity: .9; }
        30%  { transform: translate3d(32vw,-16px,0) rotate(4deg); }
        60%  { transform: translate3d(68vw,8px,0) rotate(-4deg); }
        92%  { opacity: .9; }
        100% { opacity: 0;   transform: translate3d(122vw,-10px,0) rotate(3deg); }
    }

    /* ---------- Maskot: kue pengantin bertingkat melompat ---------- */
    #countdown .cute-mascot { font-size: 38px; }

    /* ---------- Kartu hitung mundur: hati mungil sebagai "pita" di atas tiap kartu ---------- */
    #countdown .cute-card-jelly { position: relative; }
    #countdown .cute-card-jelly::before {
        content: '\2764'; position: absolute; top: -9px; left: 50%; z-index: 3; font-size: 13px; line-height: 1; color: #fb7185;
        transform: translateX(-50%); animation: cd3TagBeat 1.8s ease-in-out infinite; animation-delay: inherit; pointer-events: none;
        text-shadow: 0 0 8px rgba(251,113,133,.6);
    }
    @keyframes cd3TagBeat { 0%,60%,100% { transform: translateX(-50%) scale(1); } 15% { transform: translateX(-50%) scale(1.45); } 30% { transform: translateX(-50%) scale(1); } 45% { transform: translateX(-50%) scale(1.25); } }

    /* ---------- Jalur cinta: pengantin pria ❤ berlari menuju pengantin wanita ---------- */
    #countdown .cd3-path { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 22rem; margin: 2.25rem auto 0; font-size: 26px; line-height: 1; }
    #countdown .cd3-path-track { position: relative; flex: 1; height: 24px; }
    #countdown .cd3-path-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dotted rgba(253,164,175,.6); }
    #countdown .cd3-path-heart { position: absolute; top: 50%; left: 0; margin-top: -9px; font-size: 18px; line-height: 1; color: #fb7185; animation: cd3Run 3.6s ease-in-out infinite; text-shadow: 0 0 10px rgba(251,113,133,.7); }
    @keyframes cd3Run { 0% { left: 0; transform: scale(.8); } 50% { transform: scale(1.25); } 100% { left: calc(100% - 18px); transform: scale(.8); } }
    #countdown .cd3-path-who { display: inline-block; animation: cd3Hop 1.8s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
    #countdown .cd3-path-who:last-child { animation-delay: .9s; }
    @keyframes cd3Hop { 0%,100% { transform: translateY(0) rotate(-4deg); } 30% { transform: translateY(-7px) rotate(4deg); } 50% { transform: translateY(0); } }
    #countdown .cd3-caption { margin-top: .9rem; font-family: 'Fredoka', 'Jost', sans-serif; font-size: .78rem; color: rgba(254,205,211,.75); }

    /* ---------- RESPONSIF ---------- */
    @media (max-width: 639px) {
        #countdown { padding-top: 5rem; padding-bottom: 4.5rem; }
        #countdown .cd3-bunting i:nth-child(n+11) { display: none; }
        #countdown .cd3-balloon--hide-sm { display: none; }
        #countdown .cd3-path { margin-top: 1.9rem; }
    }
    @media (max-width: 380px) {
        #countdown [data-countdown] { font-size: 1.85rem; }
        #countdown #countdown-timer { gap: .5rem; }
        #countdown .countdown-card { padding-top: 1rem; padding-bottom: 1rem; }
        #countdown .countdown-card span.block.mt-1 { font-size: .6rem; letter-spacing: .08em; }
    }

    /* ---------- V5: lebih ringan di HP (bendera & balon dipangkas), tema pernikahan ---------- */
    @media (max-width: 639px) {
        #countdown .cd3-bunting i:nth-child(n+9) { display: none; }
        #countdown .cd3-balloon[style*="left:88%"] { display: none; }
        #countdown .cute-float-star[style*="animation-delay:1.4s"], #countdown .cute-butterfly-cd[style*="animation-delay:1.8s"] { display: none; }
    }
    html.is-lite #countdown .cute-card-jelly::before { animation-duration: 2.6s; }
</style>

<section
    id="countdown"
    data-section
    class="relative bg-red-950 text-white px-6 py-20 sm:py-28 overflow-hidden"
    style="perspective: 1200px;"
>
    {{-- Glow "aurora" animatif di belakang konten (lihat .aurora-bg di app.css) --}}
    <div class="aurora-bg"></div>

    {{-- Bintang kecil mengambang, murni dekoratif --}}
    <span class="cute-float-star top-10 left-[10%] text-rose-300 text-lg" aria-hidden="true" style="animation-delay:.3s">&#10022;</span>
    <span class="cute-float-star bottom-12 right-[12%] text-amber-200 text-base" aria-hidden="true" style="animation-delay:1.4s">&#10022;</span>
    <span class="cute-butterfly-cd top-[20%] right-[8%]" aria-hidden="true" style="animation-delay:.6s">&#129419;</span>
    <span class="cute-butterfly-cd bottom-[22%] left-[9%]" aria-hidden="true" style="animation-delay:1.8s">&#129419;</span>

    {{-- Hiasan pesta pernikahan: bunting, balon, merpati (murni dekoratif) --}}
    <div class="cd3-bunting" aria-hidden="true">
        @for ($f = 0; $f < 14; $f++)<i style="--i:{{ $f }}"></i>@endfor
    </div>
    <span class="cd3-balloon" style="left:7%;  animation-delay:0s;"   aria-hidden="true">&#127880;</span>
    <span class="cd3-balloon" style="left:88%; animation-delay:5s; animation-duration:17s;" aria-hidden="true">&#127880;</span>
    <span class="cd3-balloon cd3-balloon--hide-sm" style="left:48%; animation-delay:9s; animation-duration:19s;" aria-hidden="true">&#128147;</span>
    <span class="cd3-dove" style="top:22%;" aria-hidden="true">&#128330;&#65039;</span>

    <div class="relative z-10 max-w-3xl mx-auto text-center" data-reveal>
        <div class="wx-arch" aria-hidden="true"><span style="--i:0">&#127800;</span><span style="--i:1">&#127799;</span><span style="--i:2">&#127801;</span><span style="--i:3">&#128144;</span><span style="--i:4">&#127801;</span><span style="--i:5">&#127799;</span><span style="--i:6">&#127800;</span></div>
        <span class="cute-mascot text-3xl mb-2" aria-hidden="true">&#128146;</span>
        <p class="font-display italic text-lg text-rose-300 mb-2">Menghitung hari menuju</p>
        <h2 class="font-display text-display-lg text-white mb-3">Hari Bahagia Kami</h2>
        <p class="cute-tagline font-sans text-xs text-rose-200/60 mb-9 justify-center">
            <span aria-hidden="true">&#128038;</span> Sabar ya, sebentar lagi tiba waktunya! <span aria-hidden="true">&#128038;</span>
        </p>

        <div
            id="countdown-timer"
            data-datetime="{{ $wedding->reception_datetime->toIso8601String() }}"
            class="grid grid-cols-4 gap-3 sm:gap-6 max-w-xl mx-auto"
        >
            @foreach([['days','Hari'], ['hours','Jam'], ['minutes','Menit'], ['seconds','Detik']] as [$key, $label])
                {{-- Pembungkus luar yang dibuat "jelly"/lentur — dipisah dari .countdown-card asli
                     supaya tidak bentrok dengan animasi flip 3D milik countdown.js pada elemen itu --}}
                <div class="cute-card-jelly" style="animation-delay: {{ $loop->index * 0.15 }}s;">
                    <div class="countdown-card border border-rose-400/30 rounded-lg py-5 sm:py-7"
                         style="transform-style: preserve-3d;">
                        <span data-countdown="{{ $key }}" class="block font-display text-4xl sm:text-5xl text-rose-300">00</span>
                        <span class="block mt-1 text-xs tracking-widest text-white/60 font-sans">{{ strtoupper($label) }}</span>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Jalur cinta: pengantin pria mengirim hati untuk pengantin wanita --}}
        <div class="cd3-path" aria-hidden="true">
            <span class="cd3-path-who">&#129333;</span>
            <span class="cd3-path-track"><span class="cd3-path-heart">&#10084;</span></span>
            <span class="cd3-path-who">&#128112;</span>
        </div>
        <p class="cd3-caption">Doakan yang terbaik untuk kami ya &#128151;</p>
        <div class="mt-5">
            <span class="wx-chip text-rose-200"><span class="wx-rings" aria-hidden="true"><i></i><i></i></span> Save the Date &middot; {{ $wedding->reception_datetime->translatedFormat('d F Y') }}</span>
        </div>
    </div>
</section>