@props(['wedding'])

{{-- ==========================================================================
     Komponen "Kirim Kado & Amplop Digital".
     Pasang di welcome.blade.php di bawah <x-our-story />, sebelum <x-event-details />:

         <x-our-story :wedding="$wedding" />
         <x-gift :wedding="$wedding" />
         <x-event-details :wedding="$wedding" />

     Mau tambah rekening lain (mis. Mandiri, OVO, dst)? Tinggal tambah satu
     baris lagi di array $bankAccounts di bawah ini, formatnya sama.

     Semua gaya & skrip mandiri di file ini (tidak butuh app.css), dan semua
     class/nama fungsi diberi awalan "gift-" / "gift" supaya tidak bentrok
     dengan komponen lain (mis. cover.blade.php) yang tampil di halaman yang
     sama.
     ========================================================================== --}}
@php
    $bankAccounts = [
        [
            'bank'   => 'BCA',
            'number' => '8375243209',
            'holder' => 'MOHD. ROIHAN HANIF BANCIN',
        ],
        // Contoh menambah rekening lain:
        // [
        //     'bank'   => 'Mandiri',
        //     'number' => '1234567890',
        //     'holder' => 'NAMA SESUAI BUKU TABUNGAN',
        // ],
    ];
@endphp

<style>
    /* ---------- Gumpalan lembut di latar — kedalaman tanpa berat ---------- */
    .gift-blob { position: absolute; border-radius: 999px; filter: blur(46px); pointer-events: none; z-index: 0; }
    .gift-blob--1 { width: 260px; height: 260px; top: -60px; left: -60px; background: radial-gradient(circle, rgba(251,113,133,.28), transparent 70%); animation: giftBlobDrift 12s ease-in-out infinite; }
    .gift-blob--2 { width: 220px; height: 220px; bottom: -50px; right: -50px; background: radial-gradient(circle, rgba(245,158,11,.22), transparent 70%); animation: giftBlobDrift 14s ease-in-out infinite reverse; }
    @keyframes giftBlobDrift {
        0%, 100% { transform: translate(0,0) scale(1); }
        50%      { transform: translate(3%, -4%) scale(1.12); }
    }
    /* Blur besar berat untuk GPU HP kelas bawah — dikecilkan & ukuran blob diperkecil di layar kecil */
    @media (max-width: 640px) {
        .gift-blob { filter: blur(26px); }
        .gift-blob--1 { width: 180px; height: 180px; }
        .gift-blob--2 { width: 160px; height: 160px; }
    }

    /* ---------- Partikel hati mengambang, versi terang untuk latar cerah ---------- */
    .gift-particle {
        position: absolute; bottom: -6%; z-index: 0; opacity: 0; pointer-events: none;
        animation-name: giftDrift; animation-timing-function: cubic-bezier(.4,0,.2,1);
        animation-iteration-count: infinite; line-height: 1;
    }
    .gift-particle--rose { color: #fb7185; text-shadow: 0 0 6px rgba(251,113,133,.35); }
    .gift-particle--gold { color: #eab308; text-shadow: 0 0 6px rgba(234,179,8,.35); }
    @keyframes giftDrift {
        0%   { opacity: 0;   transform: translateY(0) scale(.6) rotate(-4deg); }
        14%  { opacity: .55; }
        50%  { transform: translateY(-38vh) translateX(8px) scale(1) rotate(3deg); }
        86%  { opacity: .25; }
        100% { opacity: 0;   transform: translateY(-70vh) translateX(-8px) scale(1.05) rotate(-5deg); }
    }

    /* ---------- Kotak kado kawaii yang melompat-lompat kecil ---------- */
    .gift-cute { width: 84px; height: 84px; margin: 0 auto 8px; animation: giftBoxBounce 2.6s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(190,18,60,.18)); }
    @keyframes giftBoxBounce {
        0%, 100% { transform: translateY(0) rotate(-3deg); }
        50%      { transform: translateY(-10px) rotate(3deg); }
    }
    .gift-sparkle {
        position: absolute; width: 6px; height: 6px; border-radius: 999px; background: #fff7d6;
        box-shadow: 0 0 8px rgba(250,204,21,.9); animation: giftSparkle 2.2s ease-in-out infinite;
    }
    @keyframes giftSparkle { 0%,100% { opacity:0; transform:scale(.4); } 50% { opacity:1; transform:scale(1); } }

    /* Di HP, hanya separuh partikel hati mengambang yang dirender supaya lebih ringan */
    @media (max-width: 640px) {
        .gift-particle:nth-child(n+6) { display: none; }
    }

    .gift-eyebrow {
        display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .18em;
        text-transform: uppercase; color: #e11d48; margin-bottom: 10px;
    }
    .gift-eyebrow .heart-tiny { display:inline-block; animation: giftHeartbeat 1.8s ease-in-out infinite; }
    @keyframes giftHeartbeat {
        0%,100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); }
        45% { transform: scale(1.15); } 60% { transform: scale(1); }
    }

    /* ---------- Kartu rekening — gaya "amplop"/tiket lucu ---------- */
    .gift-card {
        position: relative; max-width: 380px; margin: 0 auto; border-radius: 22px;
        background: #fffaf3; border: 1px solid rgba(190,18,60,.12);
        box-shadow: 0 14px 30px -12px rgba(190,18,60,.25);
        overflow: hidden; animation: giftCardFloat 4.5s ease-in-out infinite;
    }
    @keyframes giftCardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    .gift-card::before {
        content:''; position:absolute; inset:0; border-radius: 22px; padding: 2px;
        background: linear-gradient(120deg, rgba(251,113,133,.55), rgba(234,179,8,.5), rgba(251,113,133,.55));
        background-size: 220% auto; animation: giftBorderShift 5s ease-in-out infinite;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
    }
    @keyframes giftBorderShift { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }

    .gift-card-top { padding: 20px 24px 16px; text-align: center; }
    .gift-bank-badge {
        display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 26px;
        padding: 0 10px; border-radius: 999px; background: #1d4ed8; color: #fff; font-size: 12px;
        font-weight: 700; letter-spacing: .04em; margin-bottom: 8px;
    }
    .gift-holder { display: block; font-size: 13px; color: #7a1f2b; letter-spacing: .06em; font-weight: 600; }

    .gift-notch-wrap { position: relative; height: 1px; margin: 4px 0; }
    .gift-dashed-line { border-top: 2px dashed rgba(190,18,60,.22); }
    .gift-notch {
        position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 999px;
        background: #fdf2f2; transform: translateY(-50%);
    }
    .gift-notch-left { left: -9px; }
    .gift-notch-right { right: -9px; }

    .gift-card-bottom { padding: 16px 24px 22px; text-align: center; }
    .gift-number {
        display: block; font-family: ui-monospace, "Jost", monospace; font-size: 22px; letter-spacing: .08em;
        color: #7a1f2b; font-weight: 600; margin-bottom: 14px;
    }

    .gift-copy-btn {
        position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 11px 22px; min-height: 44px;
        border-radius: 999px; border: 1px solid rgba(190,18,60,.35); background: #fff;
        color: #9f1239; font-size: 13px; font-weight: 600; cursor: pointer; touch-action: manipulation;
        transition: background .35s ease, color .35s ease, transform .15s ease, border-color .35s ease;
    }
    .gift-copy-btn:hover { background: #9f1239; color: #fff; border-color: #9f1239; }
    .gift-copy-btn:active { transform: scale(.96); }
    .gift-copy-btn.is-copied { background: #16a34a; border-color: #16a34a; color: #fff; }

    .gift-note {
        max-width: 420px; margin: 22px auto 0; text-align: center; font-size: 13px; line-height: 1.7;
        color: rgba(122,31,43,.75);
    }
</style>

<section id="gift" class="relative py-14 sm:py-20 md:py-24 px-5 sm:px-6 bg-rose-50 overflow-hidden">
    <div class="gift-blob gift-blob--1" aria-hidden="true"></div>
    <div class="gift-blob gift-blob--2" aria-hidden="true"></div>

    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
        @for ($i = 0; $i < 10; $i++)
            @php
                $variant = $i % 2 === 0 ? 'rose' : 'gold';
                $left = rand(3, 95);
                $delay = rand(0, 60) / 10;
                $duration = rand(80, 130) / 10;
                $size = rand(10, 16);
            @endphp
            <span class="gift-particle gift-particle--{{ $variant }}{{ $i > 4 ? ' hidden sm:block' : '' }}"
                  style="left:{{ $left }}%; animation-delay:{{ $delay }}s; animation-duration:{{ $duration }}s; font-size:{{ $size }}px;">&#10084;</span>
        @endfor
    </div>

    <div class="relative max-w-xl mx-auto text-center">
        <div class="mb-3"><span class="wx-rings" aria-hidden="true"><i></i><i></i></span></div>

        <div class="relative inline-block">
            <div class="gift-cute" aria-hidden="true">
                <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                    <rect x="18" y="42" width="64" height="46" rx="9" fill="#fbcfe8"/>
                    <rect x="14" y="29" width="72" height="18" rx="6" fill="#f472a6"/>
                    <rect x="44" y="29" width="12" height="59" fill="#fde68a"/>
                    <path d="M50 30 C38 17,21 21,29 32 C35 28,44 30,50 30 Z" fill="#fbbf24"/>
                    <path d="M50 30 C62 17,79 21,71 32 C65 28,56 30,50 30 Z" fill="#fbbf24"/>
                    <circle cx="50" cy="30" r="5" fill="#f59e0b"/>
                    <path d="M17 62 Q5 58 9 46" stroke="#fbcfe8" stroke-width="7" fill="none" stroke-linecap="round"/>
                    <path d="M83 62 Q95 58 91 46" stroke="#fbcfe8" stroke-width="7" fill="none" stroke-linecap="round"/>
                    <ellipse cx="31" cy="67" rx="4" ry="2.6" fill="#e11d48" opacity=".4"/>
                    <ellipse cx="69" cy="67" rx="4" ry="2.6" fill="#e11d48" opacity=".4"/>
                    <circle cx="39" cy="63" r="2.6" fill="#7a1f2b"/>
                    <circle cx="61" cy="63" r="2.6" fill="#7a1f2b"/>
                    <path d="M40 71 q10 8 20 0" stroke="#7a1f2b" stroke-width="2.2" fill="none" stroke-linecap="round"/>
                </svg>
            </div>
            <span class="gift-sparkle" style="top:-4px; right:-6px; animation-delay:.4s"></span>
            <span class="gift-sparkle" style="bottom:6px; left:-8px; animation-delay:1.2s"></span>
        </div>

        <p class="gift-eyebrow">
            <span class="heart-tiny">&#10084;</span> Amplop Digital <span class="heart-tiny">&#10084;</span>
        </p>

        <h2 class="font-display text-2xl sm:text-4xl text-red-950 mb-3">Kirim Kado &amp; Doa Restu</h2>
        <p class="font-sans text-sm sm:text-base text-red-950/70 max-w-md mx-auto mb-8 sm:mb-10">
            Kehadiran dan doa restu Bapak/Ibu/Saudara/i sudah menjadi kado paling berarti
            untuk {{ $wedding->groom_nickname }} &amp; {{ $wedding->bride_nickname }}.
            Namun jika ingin memberi tanda kasih dari jauh, dengan senang hati kami terima melalui:
        </p>

        <div class="grid gap-6">
            @foreach ($bankAccounts as $acc)
                @php $rawNumber = preg_replace('/\s+/', '', $acc['number']); @endphp
                <div class="gift-card">
                    <div class="gift-card-top">
                        <span class="gift-bank-badge">{{ $acc['bank'] }}</span>
                        <span class="gift-holder">{{ $acc['holder'] }}</span>
                    </div>
                    <div class="gift-notch-wrap" aria-hidden="true">
                        <span class="gift-notch gift-notch-left"></span>
                        <div class="gift-dashed-line"></div>
                        <span class="gift-notch gift-notch-right"></span>
                    </div>
                    <div class="gift-card-bottom">
                        <span class="gift-number">{{ implode(' ', str_split($rawNumber, 4)) }}</span>
                        <button type="button" class="gift-copy-btn" data-copy="{{ $rawNumber }}">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="9" y="9" width="12" height="12" rx="2"/>
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                            </svg>
                            <span class="gift-copy-label">Salin Nomor</span>
                        </button>
                    </div>
                </div>
            @endforeach
        </div>

        <p class="gift-note">
            Terima kasih banyak atas cinta dan doa yang Bapak/Ibu/Saudara/i berikan. Semoga
            kebaikannya dibalas berlipat ganda. &#128149;
        </p>
    </div>
</section>

<script>
    // Salin nomor rekening + letupan hati mini — dibungkus IIFE & nama khas
    // "gift" supaya tidak bentrok dengan skrip komponen lain di halaman yang sama.
    (function () {
        try {
            function giftHeartPop(target) {
                try {
                    var rect = target.getBoundingClientRect();
                    var ox = rect.left + rect.width / 2;
                    var oy = rect.top + rect.height / 2;
                    var count = window.innerWidth < 640 ? 4 : 6;
                    for (var i = 0; i < count; i++) {
                        (function () {
                            var h = document.createElement('span');
                            h.textContent = '\u2764';
                            h.style.position = 'fixed';
                            h.style.left = ox + 'px';
                            h.style.top = oy + 'px';
                            h.style.fontSize = (9 + Math.random() * 8) + 'px';
                            h.style.color = Math.random() < .5 ? '#fb7185' : '#eab308';
                            h.style.pointerEvents = 'none';
                            h.style.zIndex = '9999';
                            h.style.opacity = '1';
                            h.style.transform = 'translate(-50%, -50%) scale(.6)';
                            h.style.transition = 'transform 800ms cubic-bezier(.16,.8,.3,1), opacity 800ms ease-out';
                            document.body.appendChild(h);
                            var dx = (Math.random() * 2 - 1) * 50;
                            var dy = -(40 + Math.random() * 70);
                            requestAnimationFrame(function () {
                                h.style.transform = 'translate(calc(-50% + ' + dx + 'px), calc(-50% + ' + dy + 'px)) scale(1.2)';
                                h.style.opacity = '0';
                            });
                            setTimeout(function () { h.remove(); }, 850);
                        })();
                    }
                } catch (e) { /* diam saja */ }
            }

            function fallbackCopy(text) {
                var ta = document.createElement('textarea');
                ta.value = text;
                ta.style.position = 'fixed';
                ta.style.opacity = '0';
                document.body.appendChild(ta);
                ta.focus();
                ta.select();
                try { document.execCommand('copy'); } catch (e) { /* diam saja */ }
                document.body.removeChild(ta);
            }

            var buttons = document.querySelectorAll('.gift-copy-btn');
            buttons.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var number = btn.getAttribute('data-copy') || '';
                    var done = function () {
                        var label = btn.querySelector('.gift-copy-label');
                        var original = label ? label.textContent : '';
                        btn.classList.add('is-copied');
                        if (label) label.textContent = 'Tersalin! \uD83D\uDC95';
                        giftHeartPop(btn);
                        setTimeout(function () {
                            btn.classList.remove('is-copied');
                            if (label) label.textContent = original;
                        }, 1800);
                    };
                    if (navigator.clipboard && navigator.clipboard.writeText) {
                        navigator.clipboard.writeText(number).then(done).catch(function () {
                            fallbackCopy(number); done();
                        });
                    } else {
                        fallbackCopy(number); done();
                    }
                });
            });
        } catch (err) { /* diam saja kalau gagal, tidak mengganggu skrip lain */ }
    })();
</script>