"use client";

import { motion } from "framer-motion";
import { ShieldX, ArrowLeft } from "lucide-react";
import Link from "next/link";

export default function InactivePage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-red-100 via-rose-50 to-red-200 p-6">

      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        className="relative w-full max-w-md rounded-4xl overflow-hidden"
      >
        <div className="absolute inset-0 bg-red-500" />
        <div className="absolute inset-0 bg-white/20 backdrop-blur-2xl" />

        <div className="relative p-8 text-center bg-white/30 backdrop-blur-2xl border border-white/40 shadow-2xl rounded-[32px]">

          <div className="flex justify-center mb-4">
            <div className="w-20 h-20 rounded-2xl bg-white/70 flex items-center justify-center shadow-xl">
              <ShieldX className="w-10 h-10 text-red-600" />
            </div>
          </div>

          <h1 className="text-2xl font-bold text-red-900">
            Account Disabled
          </h1>

          <p className="text-sm text-red-900/70 mt-2">
            Akun kamu tidak aktif. Hubungi administrator untuk mengaktifkan kembali akses.
          </p>

          <Link
            href="/login"
            className="mt-6 inline-flex items-center gap-2 px-5 py-3 rounded-2xl bg-white text-red-700 font-semibold shadow-lg hover:scale-105 transition"
          >
            <ArrowLeft size={16} />
            Kembali ke Login
          </Link>

        </div>
      </motion.div>
    </div>
  );
}