{{--
    Paystack checkout wrapper — bottom sheet on mobile, centered modal on desktop.
    Requires Alpine.js ancestor with: showSheet (bool), checkoutUrl (string).
--}}
<template x-teleport="body">
    {{-- Mobile bottom sheet --}}
    <div x-show="showSheet"
         x-cloak
         class="fixed inset-0 z-[9999] flex flex-col justify-end md:hidden"
         role="dialog"
         aria-modal="true">

        <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>

        <div class="relative flex flex-col overflow-hidden rounded-t-2xl bg-white"
             style="height:90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
             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">

            @include('partials.mini-paystack-frame-header')

            <iframe :src="showSheet ? checkoutUrl : ''"
                    class="min-h-0 flex-1 w-full border-0"
                    allow="payment"
                    title="Paystack checkout"></iframe>

            @include('partials.mini-paystack-frame-footer')
        </div>
    </div>

    {{-- Desktop modal --}}
    <div x-show="showSheet"
         x-cloak
         class="fixed inset-0 z-[9999] hidden items-center justify-center p-6 md:flex"
         role="dialog"
         aria-modal="true">

        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"
             @click="showSheet = false"></div>

        <div class="relative flex w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white shadow-2xl"
             style="height: min(720px, 90vh)"
             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">

            @include('partials.mini-paystack-frame-header')

            <iframe :src="showSheet ? checkoutUrl : ''"
                    class="min-h-0 flex-1 w-full border-0"
                    allow="payment"
                    title="Paystack checkout"></iframe>

            @include('partials.mini-paystack-frame-footer')
        </div>
    </div>
</template>