@props(['wedding'])

{{-- Detail acara — akad & resepsi, lokasi dan link peta dari database --}}
<style>
    /* ---------- Kartu acara bergaya tiket imut ---------- */
    #event-details .event-card {
        position: relative; padding: 0; border-radius: 1.5rem;
        box-shadow: 0 6px 18px rgba(190,18,60,.08);
        transition: transform .35s ease, box-shadow .35s ease;
    }
    @media (hover: hover) {
        #event-details .event-card:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 14px 30px rgba(190,18,60,.15); }
    }
    /* bagian atas tiket: label, tanggal, jam */
    #event-details .evt-top { padding: 2.9rem 1.5rem 1.4rem; }
    /* bagian bawah tiket: lokasi — dipisah garis putus-putus + lekukan "sobekan tiket" di kiri & kanan */
    #event-details .evt-bottom { position: relative; padding: 1.5rem 1.5rem 1.75rem; border-top: 2px dashed rgba(251,113,133,.35); }
    #event-details .evt-bottom::before,
    #event-details .evt-bottom::after {
        content: ''; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 999px; background: #fff1f2;
    }
    #event-details .evt-bottom::before { left: -11px; }
    #event-details .evt-bottom::after  { right: -11px; }

    #event-details .cute-ribbon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border-radius: 999px; margin: 0 auto 10px;
        background: rgba(251,113,133,.12); animation: ribbonSway 2.6s ease-in-out infinite;
    }
    @keyframes ribbonSway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
    #event-details .cute-title-heart { display: inline-block; animation: evtBeat 1.8s ease-in-out infinite; }
    @keyframes evtBeat { 0%,60%,100% { transform: scale(1); } 15% { transform: scale(1.28); } 30% { transform: scale(1); } 45% { transform: scale(1.16); } }

    /* pita "SAVE THE DATE" yang bergoyang di atas kartu */
    #event-details .cute-save-badge {
        position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-3deg); z-index: 2;
        background: #e11d48; color: #fff; font-family: 'Fredoka', 'Jost', sans-serif; font-size: 10px; letter-spacing: .1em;
        padding: 5px 14px; border-radius: 999px; box-shadow: 0 4px 10px rgba(190,18,60,.35); white-space: nowrap;
        animation: saveBadgeSwing 3s ease-in-out infinite;
    }
    @keyframes saveBadgeSwing { 0%,100% { transform: translateX(-50%) rotate(-3deg); } 50% { transform: translateX(-50%) rotate(3deg); } }

    /* label, tanggal (efek stabilo), jam (permen kecil) */
    #event-details .evt-label { font-family: 'Fredoka', 'Jost', sans-serif; }
    #event-details .evt-date {
        background: linear-gradient(transparent 62%, rgba(253,164,175,.5) 62%);
        padding: 0 .25em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    }
    #event-details .evt-time {
        display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; padding: 4px 14px;
        border-radius: 999px; background: #ffe4e6; color: #9f1239;
        font-family: 'Fredoka', 'Jost', sans-serif; font-size: .8rem;
    }
    #event-details .evt-clock { display: inline-block; transform-origin: 50% 60%; animation: evtClock 3.2s ease-in-out infinite; }
    @keyframes evtClock { 0%,80%,100% { transform: rotate(0deg); } 84% { transform: rotate(-16deg); } 88% { transform: rotate(14deg); } 92% { transform: rotate(-10deg); } 96% { transform: rotate(6deg); } }
    #event-details .evt-pin { display: inline-block; animation: evtPin 1.6s ease-in-out infinite; }
    @keyframes evtPin { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

    /* tombol Google Maps: pil merah muda yang kenyal saat disentuh */
    #event-details .evt-map-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
        min-height: 40px; padding: .5rem 1.15rem; border-radius: 999px;
        background: #e11d48; color: #fff; font-family: 'Fredoka', 'Jost', sans-serif; font-size: .78rem; letter-spacing: .02em;
        box-shadow: 0 6px 14px rgba(190,18,60,.28);
        transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background-color .2s ease;
    }
    #event-details .evt-map-btn:active { transform: scale(.93); }
    @media (hover: hover) {
        #event-details .evt-map-btn:hover { transform: translateY(-2px) scale(1.05); background: #f43f5e; box-shadow: 0 10px 20px rgba(190,18,60,.32); }
    }

    /* stiker kecil di sudut kartu */
    #event-details .evt-sticker { position: absolute; z-index: 2; font-size: 22px; pointer-events: none; }
    #event-details .evt-sticker--tl { top: -10px; left: -8px; animation: evtWiggle 3s ease-in-out infinite; }
    #event-details .evt-sticker--br { bottom: -10px; right: -6px; animation: evtSpin 12s linear infinite; }
    @keyframes evtWiggle { 0%,100% { transform: rotate(-18deg) scale(1); } 50% { transform: rotate(-4deg) scale(1.15); } }
    @keyframes evtSpin { to { transform: rotate(360deg); } }

    /* hiasan latar & deretan hati melompat di bawah judul */
    #event-details .evt-float { position: absolute; pointer-events: none; animation: evtFloat 4.6s ease-in-out infinite; }
    @keyframes evtFloat { 0%,100% { transform: translateY(0) rotate(0deg); opacity: .45; } 50% { transform: translateY(-11px) rotate(-14deg); opacity: 1; } }
    #event-details .evt-jump { display: flex; justify-content: center; gap: .55rem; margin-top: 1rem; color: #fb7185; font-size: 14px; }
    #event-details .evt-jump span { display: inline-block; animation: evtJump 1.5s ease-in-out infinite; }
    #event-details .evt-jump span:nth-child(2) { animation-delay: .2s; }
    #event-details .evt-jump span:nth-child(3) { animation-delay: .4s; }
    @keyframes evtJump { 0%,55%,100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-9px) scale(1.2); } }

    /* =====================================================================
       V3 — lebih animatif, lebih responsif, lebih "wedding". Class baru berawalan "ev3-".
       Semua class & ID lama dipertahankan.
    ===================================================================== */

    /* ---------- Bunting pesta di bagian atas section ---------- */
    #event-details .ev3-bunting { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; padding: 0 2%; pointer-events: none; }
    #event-details .ev3-bunting::before { content: ''; position: absolute; top: -12px; left: -4%; right: -4%; height: 34px; border-bottom: 1.5px solid rgba(225,29,72,.3); border-radius: 50%; }
    #event-details .ev3-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: ev3Flag 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.3s); }
    #event-details .ev3-bunting i:nth-child(4n+2) { border-top-color: #fcd34d; }
    #event-details .ev3-bunting i:nth-child(4n+3) { border-top-color: #fecdd3; }
    #event-details .ev3-bunting i:nth-child(4n)   { border-top-color: #fb7185; }
    #event-details .ev3-bunting i:nth-child(3n)   { margin-top: 20px; }
    @keyframes ev3Flag { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

    /* ---------- Balon & merpati pengiring ---------- */
    #event-details .ev3-balloon { position: absolute; bottom: -60px; z-index: 1; font-size: 28px; line-height: 1; pointer-events: none; opacity: 0; animation: ev3Balloon 16s ease-in infinite; }
    @keyframes ev3Balloon {
        0%   { opacity: 0;  transform: translate3d(0,0,0) rotate(-6deg); }
        10%  { opacity: .9; }
        50%  { transform: translate3d(14px,-50vh,0) rotate(6deg); }
        90%  { opacity: .8; }
        100% { opacity: 0;  transform: translate3d(-10px,-105vh,0) rotate(-5deg); }
    }
    #event-details .ev3-dove { position: absolute; left: -10%; z-index: 1; font-size: 22px; line-height: 1; pointer-events: none; opacity: 0; animation: ev3Dove 17s linear infinite; }
    @keyframes ev3Dove {
        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); }
    }

    /* ---------- Judul: hiasan cincin & ucapan ---------- */
    #event-details .ev3-ringline { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .9rem; color: #fb7185; }
    #event-details .ev3-ringline::before, #event-details .ev3-ringline::after { content: ''; width: 34px; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(251,113,133,.7)); }
    #event-details .ev3-ringline::after { background: linear-gradient(90deg, rgba(251,113,133,.7), transparent); }
    #event-details .ev3-ringline span { font-size: 20px; display: inline-block; animation: ev3RingSpin 4s ease-in-out infinite; }
    @keyframes ev3RingSpin { 0%,100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(10deg) scale(1.2); } }
    #event-details .ev3-wish { margin-top: .75rem; font-family: 'Fredoka', 'Jost', sans-serif; font-size: .82rem; color: rgba(159,18,57,.75); }

    /* ---------- Kartu tiket: motif polkadot, renda di tepi atas, watermark cincin ---------- */
    #event-details .event-card {
        background-image: radial-gradient(rgba(251,113,133,.11) 1.4px, transparent 1.7px);
        background-size: 16px 16px;
    }
    #event-details .evt-top { position: relative; overflow: hidden; border-radius: 1.5rem 1.5rem 0 0; }
    #event-details .evt-top::after {
        content: '\1F48D'; position: absolute; right: -10px; bottom: -14px; font-size: 76px; line-height: 1; opacity: .09; transform: rotate(-14deg); pointer-events: none;
    }
    #event-details .evt-top::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 9px; pointer-events: none;
        background: radial-gradient(circle at 50% 0, #ffe4e6 0 5px, transparent 5.6px) 0 0 / 14px 9px repeat-x;
    }

    /* ---------- Stempel "ditunggu ya!" ---------- */
    #event-details .ev3-stamp {
        position: absolute; top: 34px; right: 10px; z-index: 3; width: 58px; height: 58px; border-radius: 999px;
        display: flex; align-items: center; justify-content: center; text-align: center;
        font-family: 'Fredoka', 'Jost', sans-serif; font-size: 9px; line-height: 1.15; letter-spacing: .02em; color: #e11d48;
        border: 2px dashed rgba(225,29,72,.5); background: rgba(255,255,255,.55);
        transform: rotate(14deg); pointer-events: none; animation: ev3Stamp 3.6s ease-in-out infinite;
    }
    @keyframes ev3Stamp { 0%,100% { transform: rotate(14deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } }

    /* ---------- Deretan ikon pesta di bawah lokasi ---------- */
    #event-details .ev3-icons { display: flex; justify-content: center; gap: .65rem; margin-top: 1rem; font-size: 16px; }
    #event-details .ev3-icons span { display: inline-block; animation: ev3IconHop 2.2s ease-in-out infinite; }
    #event-details .ev3-icons span:nth-child(2) { animation-delay: .25s; }
    #event-details .ev3-icons span:nth-child(3) { animation-delay: .5s; }
    @keyframes ev3IconHop { 0%,60%,100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-6px) rotate(-10deg); } }

    /* ---------- Fokus keyboard & area sentuh ---------- */
    #event-details .evt-map-btn:focus-visible { outline: 3px solid rgba(251,113,133,.55); outline-offset: 3px; }

    /* ---------- RESPONSIF ---------- */
    @media (max-width: 639px) {
        #event-details { padding-top: 5rem; }
        #event-details .ev3-bunting i:nth-child(n+11) { display: none; }
        #event-details .ev3-balloon--hide-sm { display: none; }
        #event-details .evt-top { padding: 2.6rem 1.15rem 1.2rem; }
        #event-details .evt-bottom { padding: 1.3rem 1.15rem 1.5rem; }
        #event-details .ev3-stamp { width: 50px; height: 50px; font-size: 8px; top: 30px; right: 6px; }
        #event-details .evt-map-btn { width: 100%; max-width: 16rem; }
    }
    @media (max-width: 380px) {
        #event-details .ev3-date-line { font-size: 1.3rem; }
        #event-details .ev3-stamp { display: none; }
    }

    @media (max-width: 639px) { #event-details .ev3-bunting i:nth-child(n+9) { display: none; } }
</style>

<section id="event-details" data-section class="relative overflow-hidden bg-rose-50 px-5 sm:px-6 py-14 sm:py-28">
    <span class="evt-float top-8 left-[7%] text-rose-300 text-lg" aria-hidden="true" style="animation-delay:.2s">&#10022;</span>
    <span class="hidden sm:block evt-float top-24 right-[9%] text-amber-300 text-base" aria-hidden="true" style="animation-delay:1.2s">&#10022;</span>
    <span class="evt-float bottom-10 right-[12%] text-lg" aria-hidden="true" style="animation-delay:.8s">&#127800;</span>
    <span class="hidden sm:block evt-float bottom-16 left-[9%] text-lg" aria-hidden="true" style="animation-delay:1.7s">&#129419;</span>

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

    <div class="max-w-3xl mx-auto text-center mb-12 sm:mb-14" 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>
        <p class="font-display italic text-lg text-rose-600 mb-2">Dengan penuh syukur</p>
        <h2 class="font-display text-display-lg text-red-950">
            <span class="cute-title-heart" aria-hidden="true">&#127881;</span>
            Kami Mengundang Anda
        </h2>
        <div class="evt-jump" aria-hidden="true"><span>&#10084;</span><span>&#10084;</span><span>&#10084;</span></div>
        <div class="ev3-ringline" aria-hidden="true"><span>&#128141;</span></div>
        <p class="ev3-wish">Ditunggu kehadirannya ya, jangan sampai ketinggalan! &#128149;</p>
    </div>

    <div class="max-w-3xl mx-auto grid grid-cols-1 sm:grid-cols-2 gap-9 sm:gap-6">
        @if($wedding->akad_datetime)
            <div class="event-card relative bg-white/70 border border-rose-400/20 rounded-xl p-8 text-center" data-reveal>
                <span class="cute-save-badge" aria-hidden="true">&#128142; SAVE THE DATE</span>
                <span class="ev3-stamp" aria-hidden="true">ditunggu<br>ya! &#128149;</span>
                <span class="evt-sticker evt-sticker--tl" aria-hidden="true">&#127872;</span>
                <span class="evt-sticker evt-sticker--br" aria-hidden="true">&#127800;</span>

                <div class="evt-top">
                    <span class="cute-ribbon" aria-hidden="true">&#128141;</span>
                    <p class="evt-label text-xs tracking-widest text-rose-600 font-sans mb-3">AKAD NIKAH</p>
                    <p class="ev3-date-line font-display text-2xl text-red-950 mb-1">
                        <span class="evt-date">{{ $wedding->akad_datetime->translatedFormat('l, d F Y') }}</span>
                    </p>
                    <p class="evt-time">
                        <span class="evt-clock" aria-hidden="true">&#9200;</span>
                        Pukul {{ $wedding->akad_datetime->format('H:i') }} WIB
                    </p>
                </div>

                <div class="evt-bottom">
                    <p class="font-sans text-sm text-red-900 mb-1"><span class="evt-pin" aria-hidden="true">&#128205;</span> {{ $wedding->akad_location_name }}</p>
                    <p class="font-sans text-xs text-red-900/60 leading-relaxed mb-5">{{ $wedding->akad_location_address }}</p>
                    @if($wedding->akad_maps_url)
                        <a href="{{ $wedding->akad_maps_url }}" target="_blank" rel="noopener" class="evt-map-btn">
                            <span aria-hidden="true">&#128506;</span> Buka di Google Maps
                        </a>
                    @endif
                    <div class="ev3-icons" aria-hidden="true"><span>&#128144;</span><span>&#127874;</span><span>&#128141;</span></div>
                </div>
            </div>
        @endif

        <div class="event-card relative bg-white/70 border border-rose-400/20 rounded-xl p-8 text-center {{ $wedding->akad_datetime ? '' : 'sm:col-span-2 sm:max-w-sm sm:mx-auto w-full' }}" data-reveal>
            <span class="cute-save-badge" aria-hidden="true">&#128142; SAVE THE DATE</span>
                <span class="ev3-stamp" aria-hidden="true">ditunggu<br>ya! &#128149;</span>
            <span class="evt-sticker evt-sticker--tl" aria-hidden="true">&#127872;</span>
            <span class="evt-sticker evt-sticker--br" aria-hidden="true">&#127799;</span>

            <div class="evt-top">
                <span class="cute-ribbon" aria-hidden="true">&#129346;</span>
                <p class="evt-label text-xs tracking-widest text-rose-600 font-sans mb-3">RESEPSI</p>
                <p class="ev3-date-line font-display text-2xl text-red-950 mb-1">
                    <span class="evt-date">{{ $wedding->reception_datetime->translatedFormat('l, d F Y') }}</span>
                </p>
                <p class="evt-time">
                    <span class="evt-clock" aria-hidden="true">&#9200;</span>
                    Pukul {{ $wedding->reception_datetime->format('H:i') }} WIB
                </p>
            </div>

            <div class="evt-bottom">
                <p class="font-sans text-sm text-red-900 mb-1"><span class="evt-pin" aria-hidden="true">&#128205;</span> {{ $wedding->reception_location_name }}</p>
                <p class="font-sans text-xs text-red-900/60 leading-relaxed mb-5">{{ $wedding->reception_location_address }}</p>
                @if($wedding->reception_maps_url)
                    <a href="{{ $wedding->reception_maps_url }}" target="_blank" rel="noopener" class="evt-map-btn">
                        <span aria-hidden="true">&#128506;</span> Buka di Google Maps
                    </a>
                @endif
                <div class="ev3-icons" aria-hidden="true"><span>&#129346;</span><span>&#127881;</span><span>&#128144;</span></div>
            </div>
        </div>
    </div>
</section>