{{-- Sound + order warning for the delete-with-orders modal --}}
<div x-data x-init="
    setTimeout(function() {
        try {
            var ctx = new (window.AudioContext || window.webkitAudioContext)();
            [0, 0.22, 0.44].forEach(function(t) {
                var osc = ctx.createOscillator();
                var gain = ctx.createGain();
                osc.connect(gain); gain.connect(ctx.destination);
                osc.type = 'sine'; osc.frequency.value = 660;
                gain.gain.setValueAtTime(0.45, ctx.currentTime + t);
                gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + t + 0.18);
                osc.start(ctx.currentTime + t);
                osc.stop(ctx.currentTime + t + 0.2);
            });
        } catch(e) {}
    }, 80);
"></div>

<div style="background:#fff7ed;border:2px solid #f97316;border-radius:.6rem;padding:1rem 1.25rem;margin-bottom:1rem;">
    <div style="display:flex;align-items:flex-start;gap:.75rem;">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#c2410c"
            style="width:1.5rem;height:1.5rem;flex-shrink:0;margin-top:.1rem;">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
        </svg>
        <div>
            <p style="font-weight:700;color:#9a3412;font-size:.9rem;margin:0 0 .4rem;">
                This user has {{ $orderCount }} order{{ $orderCount !== 1 ? 's' : '' }} on record
            </p>
            <p style="font-size:.8rem;color:#92400e;line-height:1.55;margin:0;">
                Deleting <strong>{{ $record->name }}</strong> will permanently remove their account
                <strong>and all {{ $orderCount }} associated order{{ $orderCount !== 1 ? 's' : '' }}</strong>,
                including items, invoices, messages, and credits tied to those orders.
            </p>
            <p style="font-size:.8rem;color:#9a3412;font-weight:700;margin:.5rem 0 0;">
                This cannot be undone. There is no recovery.
            </p>
        </div>
    </div>
</div>