import React from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';

const Custom404: React.FC = () => {
  const router = useRouter();

  return (
    <>
      <Head>
        <title>Stránka nenalezena | Vystříkejto.cz</title>
        <meta name="robots" content="noindex,nofollow" />
      </Head>
      <div className="min-h-screen bg-luxury-dark pt-28 sm:pt-32 md:pt-40 lg:pt-44 pb-12 md:pb-16 lg:pb-20 flex items-center justify-center">
        <div className="max-w-3xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8">
          <div className="text-center">
            {/* Large 404 Display */}
            <div className="mb-8 md:mb-12">
              <div className="relative inline-block">
                <h1 className="text-9xl sm:text-[150px] md:text-[200px] font-aptos font-black text-luxury-gold/20 leading-none">
                  404
                </h1>
                <div className="absolute inset-0 flex items-center justify-center">
                  <svg
                    className="w-24 h-24 sm:w-32 sm:h-32 md:w-48 md:h-48 text-luxury-gold/30"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={0.5}
                      d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                </div>
              </div>
            </div>

            {/* Main Message */}
            <h2 className="text-4xl sm:text-5xl md:text-6xl font-aptos font-black text-luxury-light mb-4">
              Oops! Stránka nenalezena
            </h2>

            {/* Divider */}
            <div className="flex items-center justify-center gap-4 mb-6 md:mb-8">
              <div className="flex-1 h-px bg-gradient-to-r from-luxury-gold/0 to-luxury-gold/40"></div>
              <div className="w-2 h-2 bg-luxury-gold rounded-full"></div>
              <div className="flex-1 h-px bg-gradient-to-l from-luxury-gold/0 to-luxury-gold/40"></div>
            </div>

            {/* Description */}
            <p className="text-luxury-light/70 text-lg md:text-xl mb-8 max-w-2xl mx-auto leading-relaxed">
              Stránka, kterou hledáte, neexistuje nebo byla přesunuta. Ale není to nic vážného – pojďme se vrátit na správnou cestu!
            </p>

            {/* Suggestions Box */}
            <div className="bg-luxury-gold/5 border border-luxury-gold/20 rounded-lg p-8 md:p-10 mb-10 md:mb-12">
              <h3 className="text-luxury-gold text-sm font-semibold uppercase tracking-widest mb-5">
                Jak můžeme pomoci?
              </h3>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div className="text-center">
                  <div className="flex items-center justify-center w-12 h-12 mx-auto mb-3 bg-luxury-gold/10 rounded-lg">
                    <svg className="w-6 h-6 text-luxury-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12a9 9 0 110-18 9 9 0 010 18z" />
                    </svg>
                  </div>
                  <p className="text-luxury-light/80 text-sm">Kontrola zadané adresy</p>
                </div>
                <div className="text-center">
                  <div className="flex items-center justify-center w-12 h-12 mx-auto mb-3 bg-luxury-gold/10 rounded-lg">
                    <svg className="w-6 h-6 text-luxury-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                  </div>
                  <p className="text-luxury-light/80 text-sm">Nebo zkuste hledat</p>
                </div>
                <div className="text-center">
                  <div className="flex items-center justify-center w-12 h-12 mx-auto mb-3 bg-luxury-gold/10 rounded-lg">
                    <svg className="w-6 h-6 text-luxury-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8a4 4 0 014-4h10a4 4 0 014 4v8a4 4 0 01-4 4H7a4 4 0 01-4-4V8z" />
                    </svg>
                  </div>
                  <p className="text-luxury-light/80 text-sm">Nebo se obraťte na nás</p>
                </div>
              </div>
            </div>

            {/* Action Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 mb-8">
              <button
                onClick={() => router.back()}
                className="flex-1 px-8 py-4 border-2 border-luxury-gold/40 hover:border-luxury-gold text-luxury-gold hover:bg-luxury-gold/10 font-bold rounded-lg transition-all duration-300 uppercase tracking-wider text-base"
              >
                Zpět
              </button>
              <Link href="/" className="flex-1">
                <button className="w-full px-8 py-4 bg-luxury-gold hover:bg-yellow-300 text-luxury-dark font-bold font-aptos rounded-lg transition-all duration-300 uppercase tracking-wider text-base shadow-lg shadow-luxury-gold/20">
                  Na domovskou stránku
                </button>
              </Link>
            </div>

            {/* Help Text */}
            <p className="text-luxury-light/50 text-sm mt-8">
              Pokud si myslíte, že se jedná o chybu, kontaktujte nás na{' '}
              <a href="mailto:info@vystrikejto.cz" className="text-luxury-gold hover:text-yellow-300 transition-colors font-semibold">
                info@vystrikejto.cz
              </a>
            </p>
          </div>
        </div>
      </div>
    </>
  );
};

export default Custom404;
