@extends('layouts.app')

@section('title', 'Akun Ditangguhkan')

@section('content')
<div class="min-h-[80vh] flex items-center justify-center px-4 py-12">
    <div class="max-w-lg w-full bg-white rounded-3xl shadow-xl border border-red-100 p-8 sm:p-10 text-center relative overflow-hidden">
        {{-- Latar belakang dekoratif --}}
        <div class="absolute top-0 left-0 w-full h-2 bg-red-600"></div>
        <div class="absolute -right-16 -top-16 w-32 h-32 bg-red-50 rounded-full blur-2xl pointer-events-none"></div>
        
        <div class="w-20 h-20 bg-red-50 border-4 border-red-100 rounded-full flex items-center justify-center mx-auto mb-6 relative z-10">
            <svg class="w-10 h-10 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l18 18"/>
            </svg>
        </div>

        <h1 class="text-3xl font-extrabold text-slate-900 mb-3">Akses Ditolak</h1>
        <p class="text-lg font-semibold text-red-600 mb-6">Akun Anda Telah Ditangguhkan</p>
        
        <div class="bg-slate-50 rounded-2xl p-5 mb-8 border border-slate-100 text-left">
            <p class="text-sm text-slate-600 leading-relaxed mb-3">
                Identitas <span class="font-mono font-bold text-slate-800 bg-slate-200 px-2 py-0.5 rounded">{{ session('banned_id', 'Pengguna') }}</span> saat ini tidak dapat mengakses platform <strong>WadahAspirasi</strong>.
            </p>
            <p class="text-sm text-slate-600 leading-relaxed">
                Tindakan ini diambil oleh Administrator karena sistem mendeteksi adanya aktivitas yang <strong>melanggar pedoman komunitas kami</strong> (seperti penyebaran ujaran kebencian, *spam*, kampanye hitam, atau manipulasi *voting*).
            </p>
        </div>

        <div class="mb-8">
            <h3 class="text-sm font-bold text-slate-800 mb-2">Merasa ini sebuah kesalahan?</h3>
            <p class="text-xs text-slate-500 mb-4">Anda memiliki hak konstitusional untuk mengajukan banding kepada tim moderasi kami agar dilakukan peninjauan ulang.</p>
            
            <a href="mailto:banding@wadahaspirasi.go.id?subject=Pengajuan%20Banding%20Akun%20-%20{{ session('banned_id', 'Pengguna') }}&body=Halo%20Tim%20Moderasi%20WadahAspirasi,%0A%0ASaya%20merasa%20akun%20saya%20telah%20ditangguhkan%20secara%20keliru.%20Saya%20tidak%20pernah%20melakukan%20pelanggaran%20komunitas.%0A%0AMohon%20bantuannya%20untuk%20meninjau%20ulang%20status%20akun%20saya.%0A%0ATerima%20kasih." 
               class="inline-flex items-center justify-center gap-2 w-full sm:w-auto px-8 py-3.5 bg-slate-900 hover:bg-slate-800 text-white rounded-xl text-sm font-semibold transition-all shadow-md">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                Ajukan Banding via Email
            </a>
        </div>

        <a href="{{ url('/') }}" class="text-sm font-semibold text-slate-500 hover:text-red-600 transition-colors">
            &larr; Kembali ke Beranda Utama
        </a>
    </div>
</div>
@endsection