"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { withCDN } from "@/lib/utils";
import { session } from "@/lib/auth/session";

export default function Blocked() {
  const router = useRouter();

  const handleBackToLogin = () => {
    session.clear();
    router.replace("/login");
    router.refresh();
  };

  return (
    <main>
      <section className="relative w-full flex h-full min-h-[600px] min-[1360px]:min-h-[700px] items-center justify-center overflow-hidden blocked-section">
        {/* Background */}
        <div
          className="absolute inset-0 z-0 bg-cover bg-top"
          style={{
            backgroundImage: "url('https://YEOLMS.b-cdn.net/BG-12.png')",
            backgroundRepeat: "no-repeat",
          }}
        />

        {/* Content */}
        <div className="relative z-10 w-full max-w-7xl mx-auto px-5 flex flex-col items-center py-16">
          <a href="/" className="cursor-pointer mb-[30px]">
            <Image
              src={withCDN("/logo_horizontal%20(1)%20(1).png")}
              alt="logo"
              width={160}
              height={52}
              unoptimized
              className="object-contain w-[150px] h-[45px] xl:w-[160px] xl:h-[52px]"
            />
          </a>

          <div className="bg-white rounded-[40px] shadow-[10px_20px_25px_#00000040] w-full max-w-[520px] max-[480px]:w-[100%] px-[30px] py-[40px] text-center z-10 relative">
            <div className="w-[80px] h-[80px] rounded-full bg-[#FDE9ED] flex items-center justify-center mx-auto mb-6">
              <svg
                width="40"
                height="40"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle cx="12" cy="12" r="9" stroke="#DA3550" strokeWidth="2" />
                <line
                  x1="5.6"
                  y1="5.6"
                  x2="18.4"
                  y2="18.4"
                  stroke="#DA3550"
                  strokeWidth="2"
                />
              </svg>
            </div>

            <h2 className="text-[#DA3550] font-bold text-[30px] tracking-[2px] mb-3 uppercase">
              Account Blocked
            </h2>

            <p className="text-[#58585A] text-[18px] font-light tracking-[0.5px] mb-8 leading-relaxed">
              Your account has been blocked and you no longer have access to the
              building instructions portal. If you believe this is a mistake,
              please contact us at{" "}
              <a
                href="mailto:support@youngengineers.org"
                className="text-[#0097DC]"
              >
                support@youngengineers.org
              </a>
              .
            </p>

            <button
              onClick={handleBackToLogin}
              className="w-full h-[50px] bg-[#0097DC] text-white py-2 rounded-full font-light flex items-center justify-center gap-2 cursor-pointer transition-all duration-300"
            >
              Back to Login
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}