import { Head, Link } from '@inertiajs/react';
import { motion } from 'framer-motion';

export default function Forbidden({ message }) {
    return (
        <>
            <Head title="Akses Ditolak - Es Teh Laris" />
            <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-950 p-6 font-sans transition-colors duration-300 relative overflow-hidden">
                {/* Background decorative glowing blur */}
                <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-amber-400/20 dark:bg-amber-500/10 rounded-full blur-[100px]" />
                <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-orange-400/20 dark:bg-orange-500/10 rounded-full blur-[100px]" />

                <motion.div
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ type: "spring", stiffness: 200, damping: 20 }}
                    className="relative z-10 w-full max-w-lg bg-white/70 dark:bg-slate-900/60 backdrop-blur-xl border border-amber-100/50 dark:border-slate-800 rounded-[2.5rem] shadow-2xl p-8 sm:p-12 text-center"
                >
                    {/* Animated Warning Icon Container */}
                    <motion.div
                        animate={{ y: [0, -10, 0] }}
                        transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
                        className="w-24 h-24 bg-gradient-to-tr from-amber-500 to-orange-400 rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-xl shadow-amber-500/30"
                    >
                        <span className="text-5xl">🍹</span>
                    </motion.div>

                    <h1 className="text-7xl font-black text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-500 tracking-tighter mb-4">
                        403
                    </h1>
                    
                    <h2 className="text-xl sm:text-2xl font-black text-gray-800 dark:text-slate-100 mb-3">
                        Akses Ditolak / Dibatasi
                    </h2>
                    
                    <p className="text-sm text-gray-500 dark:text-slate-400 font-medium leading-relaxed mb-8 max-w-sm mx-auto">
                        {message || "Halaman ini dilindungi. Akun Anda tidak memiliki otoritas/hak akses yang cukup untuk membuka menu ini."}
                    </p>

                    <div className="flex flex-col sm:flex-row gap-3 justify-center items-center">
                        <Link
                            href="/dashboard"
                            className="w-full sm:w-auto bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white font-bold px-8 py-3.5 rounded-2xl text-sm transition-all shadow-lg shadow-amber-500/20 active:scale-95 text-center"
                        >
                            Ke Dashboard
                        </Link>
                        
                        <button
                            onClick={() => window.history.back()}
                            className="w-full sm:w-auto bg-gray-100 hover:bg-gray-250 dark:bg-slate-800 dark:hover:bg-slate-750 text-gray-700 dark:text-slate-200 font-bold px-8 py-3.5 rounded-2xl text-sm transition-all active:scale-95 border border-transparent dark:border-slate-700"
                        >
                            Kembali
                        </button>
                    </div>
                </motion.div>
            </div>
        </>
    );
}
