import { getTranslations } from 'next-intl/server';
import { Container, Button, Heading } from '@/components/ui';
import Scribble from '@/components/Scribble';
import ClientNotFoundTracker from '@/components/analytics/ClientNotFoundTracker';

export default async function NotFound() {
  console.log('--- NOT FOUND RENDERED ---');
  const t = await getTranslations('Error.notFound');

  // Suggested URL logic removed along with Payload CMS
  let suggestedUrl = null;
  let suggestedLang = null;

  return (
    <>
      <script dangerouslySetInnerHTML={{ __html: `document.body.setAttribute('data-force-solid-header', 'true');` }} />
      <ClientNotFoundTracker path="" />
      
      <div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden bg-[#050B14] py-24 px-4 mt-16">
        {/* Deep Tech Grid Background */}
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none" />
        
        {/* Glowing Orb */}
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-primary/20 blur-[120px] rounded-full pointer-events-none" />

        <div className="relative z-10 w-full max-w-2xl mx-auto">
          <div className="group relative bg-[#050B14]/80 backdrop-blur-xl rounded-[2.5rem] p-12 md:p-16 border border-white/10 shadow-2xl overflow-hidden text-center">
            {/* Inner Shimmer */}
            <div className="absolute inset-0 bg-gradient-to-br from-white/[0.05] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
            
            <div className="relative mb-8">
              <h1 className="text-8xl md:text-9xl font-heading font-black text-transparent bg-clip-text bg-gradient-to-b from-white to-white/20 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]">
                404
              </h1>
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-1 bg-primary/40 blur-md skew-y-[-10deg]" />
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-px bg-primary skew-y-[-10deg] shadow-[0_0_15px_rgba(var(--color-primary),1)]" />
            </div>

            <div className="inline-flex items-center gap-3 px-4 py-1.5 mb-6 rounded-full bg-red-500/10 border border-red-500/20 text-xs font-bold uppercase tracking-wider text-red-400">
              <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse shadow-[0_0_10px_rgba(239,68,68,0.8)]" />
              SYSTEM PROTOCOL: NOT FOUND
            </div>

            <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-white">
              {t('title')}
            </Heading>

            <p className="text-white/60 mb-10 max-w-md text-lg mx-auto leading-relaxed">
              {t('description')}
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button href="/" variant="primary" className="shadow-[0_0_20px_rgba(var(--color-primary),0.3)]">
                {t('cta')}
              </Button>
              <Button href="/kontakt" variant="outline" className="border-white/20 text-white hover:bg-white/5">
                Support kontaktieren
              </Button>
            </div>
          </div>
          
          {/* Decorative Base Line */}
          <div className="w-full flex justify-center mt-12 opacity-50">
            <div className="w-px h-24 bg-gradient-to-t from-primary to-transparent" />
          </div>
        </div>
      </div>
    </>
  );
}