@props(['wedding'])

{{-- Kontrol musik melayang di sudut layar --}}
<style>
    /* ---------- Sentuhan lucu & menggemaskan untuk tombol musik ---------- */
    #music-player #music-toggle { transition: transform .3s cubic-bezier(.68,-0.55,.27,1.55); }
    #music-player #music-toggle:hover { transform: scale(1.1) rotate(-6deg); }
    #music-player[data-state="playing"] #music-toggle {
        animation: musicPulseRing 1.8s ease-in-out infinite;
    }
    @keyframes musicPulseRing {
        0%,100% { box-shadow: 0 0 0 0 rgba(251,113,133,.45); }
        50%     { box-shadow: 0 0 0 7px rgba(251,113,133,0); }
    }
    #music-player .cute-note {
        position: absolute; top: -6px; font-size: 11px; color: #fda4af; opacity: 0; pointer-events: none;
    }
    #music-player[data-state="playing"] .cute-note--1 { left: 2px;  animation: cuteNoteFloat 2.4s ease-in-out infinite; }
    #music-player[data-state="playing"] .cute-note--2 { right: 2px; animation: cuteNoteFloat 2.4s ease-in-out infinite 1.2s; }
    @keyframes cuteNoteFloat {
        0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
        20%  { opacity: 1; }
        100% { opacity: 0; transform: translateY(-26px) rotate(18deg); }
    }
    /* Sedikit "goyang" menggemaskan saat musik sedang diputar */
    #music-player[data-state="playing"] { animation: musicPlayerSway 2.4s ease-in-out infinite; }
    @keyframes musicPlayerSway { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }

    /* Hormati safe-area di iPhone (home indicator) supaya tombol tidak ketutupan */
    #music-player { right: max(1.25rem, env(safe-area-inset-right)); bottom: calc(1.25rem + env(safe-area-inset-bottom)); }

    /* ---------- V5: denyut cincin pakai transform/opacity (bukan box-shadow) => ringan di HP ---------- */
    #music-player #music-toggle { position: relative; }
    #music-player[data-state="playing"] #music-toggle { animation: none; }
    #music-player #music-toggle::after {
        content: ''; position: absolute; inset: -1px; border-radius: 999px; border: 2px solid rgba(251,113,133,.6);
        opacity: 0; pointer-events: none;
    }
    #music-player[data-state="playing"] #music-toggle::after { animation: musicRing 1.8s ease-out infinite; }
    @keyframes musicRing { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.6); opacity: 0; } }
</style>

<div
    id="music-player"
    class="fixed z-40 opacity-0 pointer-events-none transition-opacity duration-700"
    data-state="paused"
>
    @if($wedding->music_path)
        <audio id="bg-audio" loop preload="none" src="{{ asset('storage/'.$wedding->music_path) }}"></audio>
    @endif

    <span class="cute-note cute-note--1" aria-hidden="true">&#9835;</span>
    <span class="cute-note cute-note--2" aria-hidden="true">&#128149;</span>
    <button
        id="music-toggle"
        type="button"
        aria-label="Putar atau hentikan musik"
        class="w-12 h-12 sm:w-12 sm:h-12 min-w-[44px] min-h-[44px] rounded-full bg-red-950 border border-rose-400/50 text-white
               flex items-center justify-center shadow-lg shadow-[#2b0709]/40
               hover:border-rose-300 active:scale-95 transition-all duration-300"
    >
        <span id="music-icon-play" class="block">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M3 1.5v13l11-6.5-11-6.5z"/></svg>
        </span>
        <span id="music-icon-pause" class="hidden animate-spin-slow">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
                <circle cx="12" cy="12" r="9"/>
                <circle cx="12" cy="12" r="2.4" fill="currentColor" stroke="none"/>
            </svg>
        </span>
    </button>
</div>