@props(['variant' => 'ring', 'from' => 'light', 'to' => 'dark'])

{{--
    Pembatas antar-section bertema pernikahan.
    Berupa strip setinggi 64px yang MEMILIKI RUANG SENDIRI di antara dua section (tidak menumpuk di sambungan),
    sehingga aman dari transisi 3D section di transitions.js (rotationX/scale) dan tidak menimpa konten.
    Warna setengah atas = section di atasnya, setengah bawah = section di bawahnya.

    Pakai: <x-wedding-divider variant="ring" from="light" to="dark" />
    from / to : light (rose-50) | dark (red-950)
    variant   : ring | dove | bouquet | toast | cake | chapel
    Animasi hanya transform/opacity dan hanya berjalan saat strip terlihat di layar.
--}}
@php
    $map = [
        'ring'    => ['&#128141;', '&#10022;'],
        'dove'    => ['&#128330;&#65039;', '&#10022;'],
        'bouquet' => ['&#128144;', '&#127800;'],
        'toast'   => ['&#129346;', '&#10024;'],
        'cake'    => ['&#127874;', '&#127880;'],
        'chapel'  => ['&#128146;', '&#10084;'],
    ];
    [$icon, $side] = $map[$variant] ?? $map['ring'];
    $tone = ['light' => '#fff1f2', 'dark' => '#450a0a'];
    $top = $tone[$from] ?? $tone['light'];
    $bottom = $tone[$to] ?? $tone['dark'];
@endphp

@once
<style>
    .wd-divider { position: relative; height: 64px; margin: -2px 0; pointer-events: none; overflow: hidden; } /* margin -2px menutup celah saat section di-scale oleh transitions.js */
    /* Garis emas tipis di sambungan, tergambar dari tengah saat terlihat */
    .wd-divider::before {
        content: ''; position: absolute; left: 50%; top: 50%; height: 1.5px; width: 0; transform: translateX(-50%);
        background: linear-gradient(90deg, transparent, #D9B36C 20%, #D9B36C 80%, transparent);
        transition: width 1s ease .2s;
    }
    .wd-divider.is-in::before { width: min(78vw, 520px); }
    .wd-badge {
        position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
        display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
        border-radius: 50%; border: 1.5px solid #D9B36C;
        background: radial-gradient(circle at 30% 28%, #ffffff, #ffe4e6);
        opacity: 0; transform: scale(0) rotate(-40deg);
        transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
    }
    .wd-divider.is-in .wd-badge { opacity: 1; transform: scale(1) rotate(0deg); }
    .wd-icon { display: inline-block; }
    .wd-divider.is-in .wd-icon { animation: wdBob 2.8s ease-in-out infinite; }
    @keyframes wdBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-2px) rotate(4deg); } }
    .wd-orbit { position: absolute; font-size: 10px; line-height: 1; color: #D9B36C; opacity: 0; }
    .wd-orbit--a { left: -14px; top: 0; }
    .wd-orbit--b { right: -14px; bottom: 0; }
    .wd-divider.is-in .wd-orbit { animation: wdTwinkle 2.4s ease-in-out infinite; }
    .wd-divider.is-in .wd-orbit--b { animation-delay: 1.2s; }
    @keyframes wdTwinkle { 0%,100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(90deg); } }
</style>
<script>
    // Medali hanya "hidup" saat terlihat; keluar layar = animasi berhenti (hemat baterai)
    (function () {
        try {
            document.addEventListener('DOMContentLoaded', function () {
                var els = document.querySelectorAll('.wd-divider');
                if (!('IntersectionObserver' in window)) {
                    for (var i = 0; i < els.length; i++) els[i].classList.add('is-in');
                    return;
                }
                var io = new IntersectionObserver(function (entries) {
                    entries.forEach(function (en) { en.target.classList.toggle('is-in', en.isIntersecting); });
                }, { rootMargin: '0px 0px -10% 0px' });
                for (var j = 0; j < els.length; j++) io.observe(els[j]);
            });
        } catch (e) { /* diam saja */ }
    })();
</script>
@endonce

<div class="wd-divider" aria-hidden="true" style="background: linear-gradient(to bottom, {{ $top }} 50%, {{ $bottom }} 50%);">
    <span class="wd-badge">
        <span class="wd-orbit wd-orbit--a">{!! $side !!}</span>
        <span class="wd-orbit wd-orbit--b">{!! $side !!}</span>
        <span class="wd-icon">{!! $icon !!}</span>
    </span>
</div>