'use client';

import Link from 'next/link';
import { ShieldAlert, ArrowLeft, Home, Lock } from 'lucide-react';
import { Card, CardContent, CardFooter } from '@/components/ui/card';

export default function ForbiddenPage() {
  return (
    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-surface-sunken px-4 py-10">
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -left-40 -top-40 h-96 w-96 rounded-full bg-red-500/15 blur-3xl" />
        <div className="absolute -bottom-40 -right-40 h-96 w-96 rounded-full bg-primary-500/20 blur-3xl" />
        <div className="absolute inset-0 bg-grid opacity-40" />
      </div>

      <div className="relative mx-auto w-full max-w-md">
        <Card className="card-hover">
          <CardContent className="pt-10 text-center">
            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-red-100 text-red-600 dark:bg-red-500/15 dark:text-red-300">
              <ShieldAlert className="h-8 w-8" />
            </div>
            <h1 className="mt-6 text-5xl font-bold tracking-tight text-ink">403</h1>
            <h2 className="mt-2 text-xl font-semibold text-ink">Access Denied</h2>
            <p className="mt-3 text-sm text-ink-muted">
              You don&apos;t have permission to access this area. If you believe this is a mistake,
              please contact your administrator.
            </p>
          </CardContent>
          <CardFooter className="flex flex-col gap-3">
            <Link
              href="/"
              className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-primary-700"
            >
              <Home className="h-4 w-4" />
              Go to Home
            </Link>
            <Link
              href="/login"
              className="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-line bg-surface px-4 py-2.5 text-sm font-medium text-ink transition-colors hover:bg-surface-raised"
            >
              <Lock className="h-4 w-4" />
              Sign in
            </Link>
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}