'use client'

import Link from 'next/link'
import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { Home, Search, ArrowLeft } from 'lucide-react'

export default function NotFound() {
  return (
    <div className="min-h-screen bg-background relative flex flex-col">
      {/* Ambient glow */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[500px] h-[400px] bg-accent/[0.02] rounded-full blur-3xl" />
      </div>

      <Header />

      <main className="relative flex-1 flex items-center justify-center px-4 sm:px-6 py-20">
        <div className="text-center max-w-md">
          {/* 404 Number */}
          <div className="mb-8">
            <span className="font-mono text-[8rem] sm:text-[10rem] leading-none font-bold text-foreground/[0.06] select-none">
              404
            </span>
          </div>

          {/* Content */}
          <h1 className="font-display text-[2rem] sm:text-[2.5rem] leading-[1.1] tracking-[-0.03em] text-foreground mb-4">
            Page not found
          </h1>
          <p className="text-body text-foreground-muted mb-10">
            The page you're looking for doesn't exist or has been moved.
          </p>

          {/* Actions */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
            <Link
              href="/"
              className="flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-3 bg-foreground text-background font-medium rounded-xl hover:bg-foreground/90 transition-all"
            >
              <Home className="w-4 h-4" />
              Go Home
            </Link>
            <Link
              href="/tld-pricing"
              className="flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-3 bg-background-secondary border border-border text-foreground font-medium rounded-xl hover:border-border-hover hover:bg-background-secondary/80 transition-all"
            >
              <Search className="w-4 h-4" />
              Browse TLDs
            </Link>
          </div>

          {/* Back Link */}
          <button
            onClick={() => window.history.back()}
            className="mt-8 inline-flex items-center gap-2 text-body-sm text-foreground-muted hover:text-foreground transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            Go back
          </button>
        </div>
      </main>

      <Footer />
    </div>
  )
}