import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/mainWebsite';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';

interface NotFoundProps {
  requestedPath?: string;
}

const NotFound: React.FC<NotFoundProps> = ({ requestedPath }) => {
  const { t } = useTranslation('marketing');
  const { localizedPath } = useLocalizedRoutes();
  const tips = t('not_found.tips', { returnObjects: true }) as string[];

  return (
    <MarketingLayout title={t('not_found.title')}>
      <Head title={t('not_found.title')} />
      <section className="relative min-h-screen overflow-hidden bg-gradient-to-br from-slate-900 via-gray-900 to-black text-white">
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute -left-32 -top-32 h-96 w-96 rounded-full bg-pink-500/30 blur-3xl" />
          <div className="absolute right-0 top-1/3 h-80 w-80 rounded-full bg-purple-500/20 blur-3xl" />
          <div className="absolute bottom-0 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-blue-500/20 blur-3xl" />
        </div>

        <div className="relative z-10 mx-auto flex min-h-screen max-w-5xl flex-col items-center justify-center px-6 py-16 text-center">
          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold uppercase tracking-widest text-pink-200 shadow-lg shadow-pink-500/30 backdrop-blur">
            404 · {t('not_found.title')}
          </div>

          <h1 className="text-balance text-4xl font-bold leading-tight text-white sm:text-5xl md:text-6xl">
            {t('not_found.subtitle')}
          </h1>

          {requestedPath && (
            <p className="mt-4 text-sm text-white/60">
              {t('not_found.requested_path_label', 'Angefragter Pfad')}: <span className="font-mono">{requestedPath}</span>
            </p>
          )}

          <p className="mt-6 max-w-2xl text-lg text-white/70 sm:text-xl">
            {t('not_found.description')}
          </p>

          <div className="mt-10 flex flex-col gap-6 rounded-3xl border border-white/10 bg-white/5 p-8 text-left shadow-lg shadow-black/40 backdrop-blur md:flex-row md:gap-8">
            <div className="md:w-1/3">
              <h2 className="text-lg font-semibold uppercase tracking-widest text-pink-200">
                {t('not_found.tip_heading')}
              </h2>
              <div className="mt-4 h-1 w-16 rounded-full bg-pink-400" />
            </div>
            <ul className="space-y-3 text-base text-white/80 md:w-2/3">
              {tips.map((tip, index) => (
                <li key={`${tip}-${index}`} className="flex items-start gap-3">
                  <span className="mt-1 flex h-6 w-6 flex-none items-center justify-center rounded-full bg-white/10 text-xs font-semibold text-pink-200">
                    {index + 1}
                  </span>
                  <span>{tip}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="mt-12 flex flex-col gap-3 sm:flex-row">
            <Link
              href={localizedPath('/')}
              className="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 font-medium text-gray-900 shadow-lg shadow-pink-500/30 transition hover:-translate-y-1 hover:bg-pink-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
            >
              {t('not_found.cta_home')}
            </Link>
            <Link
              href={localizedPath('/packages')}
              className="inline-flex items-center justify-center rounded-full border border-white/40 px-6 py-3 font-medium text-white transition hover:-translate-y-1 hover:border-white hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
            >
              {t('not_found.cta_packages')}
            </Link>
            <Link
              href={localizedPath('/kontakt')}
              className="inline-flex items-center justify-center rounded-full border border-transparent bg-gradient-to-r from-pink-500 to-purple-500 px-6 py-3 font-medium text-white shadow-lg shadow-pink-500/30 transition hover:-translate-y-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
            >
              {t('not_found.cta_contact')}
            </Link>
          </div>
        </div>
      </section>
    </MarketingLayout>
  );
};

NotFound.layout = (page: React.ReactNode) => page;

export default NotFound;
