import { Link } from 'react-router-dom'

export function NotFoundPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center px-4 py-8">
      <div className="max-w-md w-full">
        <div className="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden">
          <div className="bg-gradient-to-r from-[#0c1f3f] to-[#1a3a5f] p-6 sm:p-8 text-center">
            <div className="h-16 w-16 sm:h-20 sm:w-20 mx-auto mb-4 sm:mb-5 rounded-full bg-white/10 flex items-center justify-center ring-4 ring-white/20">
              <svg className="h-8 w-8 sm:h-10 sm:w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
            </div>
            <h1 className="text-2xl sm:text-3xl font-bold text-white tracking-tight mb-2">404</h1>
            <p className="text-sm sm:text-base font-medium text-white/90">Halaman Tidak Ditemukan</p>
          </div>
          
          <div className="p-6 sm:p-8 text-center space-y-4 sm:space-y-5">
            <p className="text-sm sm:text-base text-slate-700 leading-relaxed">
              Maaf, halaman yang Anda cari tidak dapat ditemukan. Silakan periksa kembali URL yang Anda masukkan atau kembali ke halaman utama.
            </p>
            
            <div className="flex flex-col gap-2 sm:gap-3 pt-2">
              <Link
                to="/"
                className="inline-flex items-center justify-center gap-2 bg-[#0c1f3f] text-white px-6 py-3 rounded-lg font-semibold text-sm sm:text-base hover:bg-[#1a3a5f] transition-colors shadow-md hover:shadow-lg focus:outline-none focus:ring-3 focus:ring-[#0c1f3f] focus:ring-offset-2 !text-white hover:!text-white visited:!text-white active:!text-white"
              >
                <svg className="h-4 w-4 sm:h-5 sm:w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
                <span>Kembali ke Halaman Utama</span>
              </Link>
              
              <Link
                to="/checkout"
                className="inline-flex items-center justify-center gap-2 bg-slate-100 text-slate-700 px-6 py-3 rounded-lg font-semibold text-sm sm:text-base hover:bg-slate-200 transition-colors border border-slate-300 focus:outline-none focus:ring-3 focus:ring-slate-300 focus:ring-offset-2 !text-slate-700 hover:!text-slate-800 visited:!text-slate-700"
              >
                <svg className="h-4 w-4 sm:h-5 sm:w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
                <span>Ke Halaman Checkout</span>
              </Link>
            </div>
          </div>
        </div>
        
        <div className="mt-6 text-center">
          <p className="text-xs sm:text-sm text-slate-600">
            Butuh bantuan? Hubungi customer service kami
          </p>
        </div>
      </div>
    </div>
  )
}