@extends('frontend.layouts.app')

@section('title', 'Suara Berhasil Direkam — ' . $event->name)

@section('content')
<div class="flex flex-col items-center justify-center py-16 px-4" style="min-height: calc(100vh - 200px);">

    <div style="width:100%; max-width:480px;" class="animate-fade-in-up">

        {{-- Glass Success Card --}}
        <div style="
            background: rgba(255,255,255,0.75);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-radius: 28px;
            border: 1px solid rgba(255,255,255,0.85);
            box-shadow: 0 12px 60px rgba(22,163,74,0.08), 0 4px 24px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
            padding: 48px 36px;
            text-align: center;
            position: relative;
            overflow: hidden;
        ">
            {{-- Background dot pattern --}}
            <div aria-hidden="true" style="position:absolute; inset:0; pointer-events:none; opacity:0.06; background-image:radial-gradient(circle at center, #16A34A 1px, transparent 1px); background-size:24px 24px;"></div>

            {{-- Top glow --}}
            <div aria-hidden="true" style="position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:200px; height:200px; background:radial-gradient(circle, rgba(22,163,74,0.2) 0%, transparent 70%); filter:blur(30px); pointer-events:none;"></div>

            <div style="position:relative; z-index:1;">
                {{-- Success icon --}}
                <div style="width:88px; height:88px; background:#16A34A; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; box-shadow:0 8px 32px rgba(22,163,74,0.35), 0 0 0 8px rgba(22,163,74,0.1);">
                    <iconify-icon icon="ph:check-bold" width="44" style="color:#fff;"></iconify-icon>
                </div>

                <h2 style="font-family:'Fustat',sans-serif; font-size:32px; font-weight:800; color:#0F172A; margin:0 0 12px; letter-spacing:-0.5px;">Terima Kasih!</h2>

                <p style="font-size:16px; color:#64748B; line-height:1.7; margin:0 0 32px;">
                    Hak suara Anda telah berhasil direkam dalam pemilihan<br>
                    <strong style="color:#0F172A;">{{ $event->name }}</strong>.
                </p>

                {{-- Reference Number --}}
                <div style="background:rgba(0,132,255,0.04); border:1px solid rgba(0,132,255,0.12); border-radius:16px; padding:20px 24px; margin-bottom:28px;">
                    <p style="font-size:12px; font-weight:600; color:#64748B; text-transform:uppercase; letter-spacing:0.06em; margin:0 0 8px;">Nomor Referensi Anda</p>
                    <div style="font-family:'Fustat',sans-serif; font-size:28px; font-weight:800; color:#0084FF; letter-spacing:0.15em; user-select:all; word-break:break-all;">
                        {{ $reference_number }}
                    </div>
                </div>

                {{-- Privacy note --}}
                <div style="display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; color:#64748B; margin-bottom:32px;">
                    <iconify-icon icon="ph:lock-key" width="15" style="color:#0084FF;"></iconify-icon>
                    Suara tidak dapat dilacak kembali ke identitas Anda.
                </div>

                <a href="{{ route('landing') }}" class="btn-primary w-full gap-2" style="font-size:16px; padding:13px 24px; justify-content:center;">
                    <iconify-icon icon="ph:house" width="18"></iconify-icon>
                    Kembali ke Beranda
                </a>
            </div>
        </div>
    </div>
</div>
@endsection