import Link from 'next/link';
import { Home, Search, Sparkles } from 'lucide-react';
import { getServerConfig } from '@/lib/server-config';

export default async function NotFound() {
  const serverConfig = await getServerConfig();
  const supportEmail = serverConfig.branding.supportEmail.trim();
  const supportTelegramUsername = serverConfig.branding.supportTelegramUsername.trim().replace(/^@+/, '');

  return (
    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#050505] px-6 text-white">
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -left-20 top-[-100px] h-64 w-64 rounded-full bg-violet-500/20 blur-3xl" />
        <div className="absolute -right-20 bottom-[-100px] h-64 w-64 rounded-full bg-fuchsia-500/20 blur-3xl" />
      </div>

      <div className="relative w-full max-w-md text-center">
        <div className="relative mb-8">
          <h1 className="text-[120px] md:text-[160px] font-bold font-heading leading-none text-violet-300/20">
            404
          </h1>
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="inline-flex h-24 w-24 items-center justify-center rounded-full border border-violet-500/20 bg-violet-500/10 animate-pulse">
              <Sparkles className="h-8 w-8 text-violet-300/80" />
            </div>
          </div>
        </div>

        <h2 className="mb-4 text-2xl font-bold text-white md:text-3xl">
          Страница не найдена
        </h2>

        <p className="mb-8 leading-relaxed text-gray-400">
          Похоже, вы перешли по ссылке, которой не существует.
          Возможно, она была удалена или перемещена.
        </p>

        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Link
            href="/"
            className="inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-fuchsia-500 to-violet-600 px-4 text-sm font-semibold text-white transition-colors hover:from-fuchsia-500/90 hover:to-violet-600/90"
          >
            <Home className="h-4 w-4" />
            На главную
          </Link>
          <Link
            href="/#features"
            className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/[0.03] px-4 text-sm font-semibold text-gray-200 transition-colors hover:bg-white/[0.08] hover:text-white"
          >
            <Search className="h-4 w-4 text-violet-300" />
            Возможности
          </Link>
        </div>

        {supportEmail || supportTelegramUsername ? (
          <div className="mt-12 border-t border-white/10 pt-8">
          <p className="mb-4 text-sm text-gray-500">
            Нужна помощь? Свяжитесь с нами:
          </p>
            {supportTelegramUsername ? (
              <a
                href={`https://t.me/${supportTelegramUsername}`}
                className="text-sm text-violet-300 transition-colors hover:text-violet-200"
              >
                @{supportTelegramUsername}
              </a>
            ) : (
              <a
                href={`mailto:${supportEmail}`}
                className="text-sm text-violet-300 transition-colors hover:text-violet-200"
              >
                {supportEmail}
              </a>
            )}
          </div>
        ) : null}
      </div>
    </div>
  );
}