{{--
    Payment checkout shell: bottomsheet on mobile, centered modal on desktop.
    Requires Alpine ancestor with: showSheet (bool), checkoutUrl (string).
--}}
<template x-teleport="body">
<div x-show="showSheet"
     x-cloak
     class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
     role="dialog"
     aria-modal="true"
     aria-label="Complete payment">

    <div class="absolute inset-0 bg-black/60"
         x-show="showSheet"
         x-transition:enter="transition-opacity duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="showSheet = false">
    </div>

    {{-- Mobile bottomsheet --}}
    <div class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:hidden"
         style="height:90dvh"
         x-show="showSheet"
         x-transition:enter="transition-transform duration-300 ease-out"
         x-transition:enter-start="translate-y-full"
         x-transition:enter-end="translate-y-0"
         x-transition:leave="transition-transform duration-200 ease-in"
         x-transition:leave-start="translate-y-0"
         x-transition:leave-end="translate-y-full"
         @click.stop>
        <div class="relative flex shrink-0 items-center justify-between border-b border-slate-100 px-4 py-3">
            <div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200"></div>
            <p class="text-sm font-semibold text-slate-800">Complete payment</p>
            <button type="button" @click="showSheet = false"
                    class="rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
                    aria-label="Close">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <iframe :src="showSheet ? checkoutUrl : ''"
                class="h-full w-full flex-1 border-0"
                allow="payment *"
                title="Payment checkout"></iframe>
    </div>

    {{-- Desktop modal --}}
    <div class="relative hidden w-full max-w-lg overflow-hidden rounded-2xl bg-white shadow-2xl md:flex md:h-[min(720px,85vh)] md:flex-col"
         x-show="showSheet"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         @click.stop>
        <div class="flex shrink-0 items-center justify-between border-b border-slate-100 px-5 py-3">
            <p class="text-sm font-semibold text-slate-800">Complete payment</p>
            <button type="button" @click="showSheet = false"
                    class="rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
                    aria-label="Close">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <iframe :src="showSheet ? checkoutUrl : ''"
                class="min-h-0 w-full flex-1 border-0"
                allow="payment *"
                title="Payment checkout"></iframe>
    </div>
</div>
</template>