import { Link } from 'react-router-dom';
import { Home, ArrowLeft } from 'lucide-react';
import Header from '../components/Header';
import { useStore } from '../hooks/useStore';

import { Helmet } from 'react-helmet';

const NotFound = () => {
    // Ensuring Header has access to store context if needed, though Header handles it internaly
    const { dataUser, dataWebsite } = useStore();

    return (
        <div className="min-h-screen bg-gray-50 flex flex-col">
            <Helmet>
                <title>Không tìm thấy trang | {dataWebsite?.nameWebsite || 'Website'}</title>
            </Helmet>
            <header className="pb-16">
                <Header />
            </header>

            <main className="flex-1 flex flex-col items-center justify-center p-4 text-center">
                <div className="relative mb-8">
                    <h1 className="text-9xl font-black text-gray-200 select-none">404</h1>
                    <div className="absolute inset-0 flex items-center justify-center">
                        <span className="text-2xl font-bold text-orange-600 bg-orange-100 px-4 py-1 rounded-full animate-pulse">
                            Page Not Found
                        </span>
                    </div>
                </div>

                <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Oops! Trang này không tồn tại</h2>

                <p className="text-gray-600 max-w-md mx-auto mb-8 text-lg">
                    Có vẻ như trang bạn đang tìm kiếm đã bị xóa hoặc đường dẫn không chính xác.
                </p>

                <div className="flex flex-col sm:flex-row gap-4">
                    <button
                        onClick={() => window.history.back()}
                        className="flex items-center justify-center gap-2 px-6 py-3 border border-gray-300 rounded-xl hover:bg-gray-100 hover:border-gray-400 transition-all font-medium text-gray-700"
                    >
                        <ArrowLeft size={20} />
                        <span>Quay lại</span>
                    </button>

                    <Link
                        to="/"
                        className="flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-xl shadow-lg hover:shadow-xl hover:from-orange-600 hover:to-red-600 transform transition-all active:scale-[0.98] font-bold"
                    >
                        <Home size={20} />
                        <span>Về trang chủ</span>
                    </Link>
                </div>
            </main>
        </div>
    );
};

export default NotFound;
