<div class="grid grid-cols-1 lg:grid-cols-3">
    <!-- Subscription Card -->
    <section class="lg:col-span-3 rounded-2xl border border-white/10 shadow-black/20 overflow-hidden p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
        <div class="p-6 border-b border-white/10">
            <div class="flex items-center justify-between gap-4">
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Subscription Status</h3>
                    <p class="p-2 text-sm dark:text-gray-200 text-gray-800">
                        Your current membership status for unlimited 4k Downloads.
                    </p>
                </div>

                <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium border
                    {{ $isActive ? 'bg-green-500/10 text-green-300 border-green-500/20' : 'bg-red-500/10 text-red-300 border-red-500/20' }}">
                    <span class="h-2 w-2 rounded-full {{ $isActive ? 'bg-green-400' : 'bg-red-400' }}"></span>
                    {{ $isActive ? 'Active' : 'Inactive' }}
                </span>
            </div>
        </div>

        <!-- Subscription Access Key -->
        <div class="lg:col-span-3 rounded-2xl border border-blue-400/20 bg-blue-500/[0.06] shadow-2xl shadow-blue-950/20 p-6 mt-4">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Subscription Access Key</h3>
                    <p class="p-2 text-sm dark:text-gray-200 text-gray-800">
                        Paste your subscription key to apply the membership status.
                    </p>
                </div>

                <div class="w-full lg:w-auto">
                    <div class="flex flex-col sm:flex-row gap-3">
                        <input
                            id="subscriptionKey"
                            type="text"
                            value="{{ $subscriptionKey }}"
                            wire:model="subscriptionKey"
                            class="w-full sm:w-[420px] rounded-xl border border-white/10 dark:bg-gray-950/80 px-4 py-3 font-mono text-sm text-blue-400 dark:text-blue-200 outline-none focus:border-blue-400/50"
                        >

                        <button
                            type="button"
                            wire:click="applyKey"
                            class="rounded-xl bg-rose-500 px-5 py-3 text-sm font-semibold text-white hover:bg-rose-400 transition shadow-lg shadow-rose-500/20"
                        >
                            Apply
                        </button>
                    </div>
                    @error('subscriptionKey') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>
    </section>
</div>
