"use client";

import Link from "next/link";
import { AlertCircle, Home, Search } from "lucide-react";

export default function NotFound() {
  return (
    <div className="min-h-screen flex items-center justify-center px-4 py-12 bg-gradient-to-br from-background to-card">
      <div className="max-w-md w-full text-center">
        <div className="flex justify-center mb-6">
          <AlertCircle size={64} className="text-primary-cta opacity-80" />
        </div>
        
        <h1 className="text-5xl font-bold text-foreground mb-2">404</h1>
        <h2 className="text-2xl font-semibold text-foreground mb-4">Sayfa Bulunamadı</h2>
        
        <p className="text-gray-600 mb-8">
          Aradığınız sayfa taşınmış, silinmiş veya hiç var olmayabilir. Lütfen aşağıdaki bağlantılardan birini kullanarak geri dönün.
        </p>

        <div className="flex flex-col gap-3">
          <Link
            href="/"
            className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity font-semibold"
          >
            <Home size={18} />
            Ana Sayfaya Dön
          </Link>
          
          <Link
            href="/teachers"
            className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-card border border-border text-foreground rounded-lg hover:bg-background transition-colors font-semibold"
          >
            <Search size={18} />
            Öğretmenleri Gözat
          </Link>
        </div>

        <div className="mt-12 p-6 bg-card rounded-lg border border-border">
          <h3 className="font-semibold text-foreground mb-3">Başka ne yapabiliriz?</h3>
          <ul className="text-sm text-gray-600 space-y-2 text-left">
            <li className="flex items-start gap-2">
              <span className="text-primary-cta mt-1">•</span>
              <span>Arama yardımı için destek ekibimizle iletişime geçin</span>
            </li>
            <li className="flex items-start gap-2">
              <span className="text-primary-cta mt-1">•</span>
              <span>Ana menüyü kullanarak platformda gezin</span>
            </li>
            <li className="flex items-start gap-2">
              <span className="text-primary-cta mt-1">•</span>
              <span>İstenilen dersi veya konuyu seçin</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}
