"use client";

import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/navigation";

export default function NotFound() {
  const router = useRouter();

  return (
    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] flex items-center justify-center px-4">
      <div className="text-center max-w-2xl mx-auto">
        {/* Logo and 404 */}
        <div className="mb-8">
          <div className="flex justify-center mb-8">
            <Image
              src="/logos/logo.svg"
              alt="Thé Tip Top Logo"
              width={320}
              height={100}
              className="w-64 h-auto md:w-80"
              priority
            />
          </div>
          <div className="text-[120px] md:text-[150px] leading-none font-bold text-[#d4a574] opacity-30 select-none">
            404
          </div>
        </div>

        {/* Text content */}
        <h1 className="text-4xl md:text-5xl font-bold text-primary-300 mb-4">
          Oups ! Page introuvable
        </h1>
        <p className="text-lg text-[#8a8a7a] mb-8 max-w-md mx-auto">
          Il semble que cette page se soit évaporée comme la vapeur d'une bonne tasse de thé...
        </p>

        {/* Action buttons */}
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <button
            onClick={() => router.back()}
            className="inline-flex items-center justify-center gap-2 border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-8 py-3 rounded-lg transition-all duration-300"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Retour
          </button>
          <Link
            href="/"
            className="inline-flex items-center justify-center gap-2 bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-8 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" 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>
            Accueil
          </Link>
        </div>

      </div>
    </div>
  );
}