'use client';

import React from 'react';
import Link from 'next/link';

// Static positions for floating elements to avoid hydration mismatch
const FLOATING_POSITIONS = [
  { left: '10%', top: '15%', delay: '0s' },
  { left: '25%', top: '45%', delay: '0.3s' },
  { left: '45%', top: '75%', delay: '0.6s' },
  { left: '65%', top: '25%', delay: '0.9s' },
  { left: '80%', top: '55%', delay: '1.2s' },
  { left: '15%', top: '85%', delay: '1.5s' },
  { left: '55%', top: '10%', delay: '1.8s' },
  { left: '90%', top: '35%', delay: '0.2s' },
  { left: '35%', top: '65%', delay: '0.5s' },
  { left: '75%', top: '90%', delay: '0.8s' },
];

export default function NotFound() {
  return (
    <div className="min-h-screen bg-[#0a0f1a] flex flex-col items-center justify-center p-6 relative overflow-hidden">
      {/* Background Grid */}
      <div className="absolute inset-0 cyber-grid opacity-10"></div>

      {/* Floating elements */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {FLOATING_POSITIONS.map((pos, i) => (
          <div
            key={i}
            className="absolute w-2 h-2 bg-zsl-primary/30 rounded-full animate-pulse"
            style={{
              left: pos.left,
              top: pos.top,
              animationDelay: pos.delay,
            }}
          />
        ))}
      </div>

      {/* Glitch Effect Text */}
      <div className="relative mb-8">
        <h1 className="text-[150px] md:text-[200px] font-bold font-mono text-transparent bg-clip-text bg-linear-to-r from-zsl-primary to-zsl-accent leading-none select-none">
          404
        </h1>
        {/* Glitch layers */}
        <div className="absolute inset-0 text-[150px] md:text-[200px] font-bold font-mono text-zsl-primary/20 leading-none animate-pulse select-none" style={{ transform: 'translate(2px, 2px)' }}>
          404
        </div>
        <div className="absolute inset-0 text-[150px] md:text-[200px] font-bold font-mono text-zsl-accent/20 leading-none animate-pulse select-none" style={{ transform: 'translate(-2px, -2px)', animationDelay: '0.1s' }}>
          404
        </div>
      </div>

      {/* Error Message */}
      <div className="text-center mb-8 relative z-10">
        <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
          Sayfa Bulunamadı
        </h2>
        <p className="text-zsl-muted max-w-md mx-auto leading-relaxed">
          Aradığınız sayfa taşınmış, silinmiş veya hiç var olmamış olabilir. 
          Dijital evrende kaybolmuş gibisiniz.
        </p>
      </div>

      {/* Terminal Style Error */}
      <div className="bg-zsl-card/50 border border-zsl-primary/20 rounded-xl p-6 mb-8 font-mono text-sm max-w-md w-full">
        <div className="flex items-center gap-2 mb-4 pb-3 border-b border-zsl-primary/10">
          <div className="w-3 h-3 rounded-full bg-red-500/80"></div>
          <div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
          <div className="w-3 h-3 rounded-full bg-green-500/80"></div>
          <span className="ml-2 text-zsl-muted text-xs">terminal</span>
        </div>
        <div className="space-y-1 text-zsl-muted">
          <div><span className="text-zsl-primary">$</span> find /page --name &quot;/unknown&quot;</div>
          <div className="text-red-400">Error: Page not found</div>
          <div><span className="text-zsl-primary">$</span> suggest --redirect home</div>
          <div className="text-zsl-accent">Suggestion: Return to homepage</div>
          <div className="animate-pulse"><span className="text-zsl-primary">$</span> _</div>
        </div>
      </div>

      {/* Action Buttons */}
      <div className="flex flex-wrap gap-4 justify-center">
        <Link
          href="/"
          className="group flex items-center gap-2 px-6 py-3 bg-zsl-primary text-zsl-bg font-medium rounded-lg hover:bg-zsl-primary/90 transition-all duration-300"
        >
          <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform duration-300" 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>
          Ana Sayfaya Dön
        </Link>
        <button
          onClick={() => window.history.back()}
          className="flex items-center gap-2 px-6 py-3 border border-zsl-primary/30 text-zsl-primary font-medium rounded-lg hover:bg-zsl-primary/10 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="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z" />
          </svg>
          Geri Git
        </button>
      </div>

      {/* Decorative Elements */}
      <div className="absolute bottom-8 left-8 hidden md:block">
        <div className="text-xs font-mono text-zsl-muted/30">
          <div>STATUS: 404</div>
          <div>LOCATION: UNKNOWN</div>
        </div>
      </div>

      <div className="absolute top-8 right-8 hidden md:block">
        <div className="w-16 h-16 border border-zsl-primary/20 rounded-lg flex items-center justify-center">
          <div className="w-8 h-8 border-2 border-zsl-primary/50 rounded animate-spin" style={{ animationDuration: '3s' }}></div>
        </div>
      </div>
    </div>
  );
}
