<div class="flex h-screen w-full items-center justify-center bg-zinc-50 dark:bg-zinc-950 p-6">
    <div class="w-full max-w-md space-y-8">
        <div class="flex flex-col items-center justify-center gap-4 opacity-50">
            <flux:brand href="{{ route('homepage') }}" name="Yadi Parfum" wire:navigate>
                <x-slot name="logo">
                    <div
                        class="size-12 rounded shrink-0 bg-accent text-accent-foreground flex items-center justify-center">
                        <i class="font-serif font-bold text-xl">YD</i>
                    </div>
                </x-slot>
            </flux:brand>

            <div class="text-center">
                <flux:heading size="xl" class="font-semibold">Verifikasi Email Anda</flux:heading>
                <flux:subheading class="mt-2">
                    Terima kasih telah mendaftar! Sebelum memulai, harap verifikasi email Anda dengan mengeklik tautan
                    yang baru saja kami kirimkan.
                </flux:subheading>
            </div>
        </div>

        <div
            class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-zinc-200 dark:bg-zinc-900 dark:ring-zinc-800 space-y-6">
            <div class="text-sm text-zinc-600 dark:text-zinc-400">
                Jika Anda tidak menerima email tersebut, kami dengan senang hati akan mengirimkan email yang baru.
            </div>

            <div class="flex flex-col gap-3">
                <flux:button wire:click="resend" variant="primary" class="w-full">
                    Kirim Ulang Email Verifikasi
                </flux:button>

                <flux:button wire:click="logout" variant="ghost" class="w-full">
                    Keluar
                </flux:button>
            </div>
        </div>
    </div>
</div>
