import { Head, Link } from '@inertiajs/react';
import { Construction } from 'lucide-react';
import { login } from '@/routes';

export default function MaintenancePage() {
    return (
        <>
            <Head title="Modo mantenimiento" />

            <div className="flex flex-col items-center gap-8">
                <div className="bg-muted text-muted-foreground flex size-14 items-center justify-center rounded-full">
                    <Construction className="size-7" aria-hidden />
                </div>

                <div className="space-y-3">
                    <h1 className="text-foreground text-xl font-semibold tracking-tight">
                        Modo mantenimiento
                    </h1>
                    <p className="text-muted-foreground text-sm leading-relaxed">
                        Estamos realizando tareas de mantenimiento. La plataforma no está
                        disponible temporalmente.
                    </p>
                    <p className="text-muted-foreground text-sm leading-relaxed">
                        Vuelve a intentarlo más tarde.
                    </p>
                </div>

                <Link
                    className="text-muted-foreground hover:text-foreground text-xs underline-offset-4 transition-colors hover:underline"
                    href={login()}
                >
                    Iniciar sesión
                </Link>
            </div>
        </>
    );
}
