import React from 'react';
import { Head, Link } from '@inertiajs/react';
import GuestLayout from '@/Layouts/GuestLayout';
import { Button } from '@/Components/ui/button';
import { FileQuestion, Home } from 'lucide-react';
import useTranslation from '@/hooks/useTranslation';

export default function NotFound() {
    const { t } = useTranslation();

    return (
        <GuestLayout>
            <Head title="404 - Page Not Found" />

            <div className="flex flex-col items-center justify-center min-h-[70vh] px-4 text-center bg-background">
                <div className="relative mb-8">
                    <div className="absolute inset-0 bg-primary/20 blur-3xl rounded-full opacity-50" />
                    <FileQuestion className="relative w-32 h-32 text-muted-foreground/30" />
                </div>

                <h1 className="text-6xl font-black tracking-tighter text-foreground sm:text-8xl mb-2 font-serif">
                    404
                </h1>
                
                <h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl mb-4">
                    {t('_page_not_found', 'Page Not Found')}
                </h2>
                
                <p className="max-w-[500px] text-muted-foreground text-lg mb-8 leading-relaxed">
                    {t('_page_not_found_desc', "Sorry, we couldn't find the page you're looking for. It might have been moved, deleted, or never existed.")}
                </p>

                <div className="flex flex-col sm:flex-row gap-4">
                    <Button asChild size="lg" className="gap-2">
                        <Link href="/">
                            <Home className="w-4 h-4" />
                            {t('_back_home', 'Back to Home')}
                        </Link>
                    </Button>
                    
                    <Button asChild variant="outline" size="lg">
                        <Link href={route('news.search', { q: '' })}>
                            {t('_search_articles', 'Search Articles')}
                        </Link>
                    </Button>
                </div>
            </div>
        </GuestLayout>
    );
}