@extends('layouts.app')

@section('title', '404 - Page Not Found')

@section('content')
<div class="min-h-screen bg-gray-50 flex items-center justify-center py-16 px-4">
    <div class="text-center max-w-xl">
        <!-- 404 graphic -->
        <div class="relative mb-8">
            <div class="text-[160px] font-black text-gray-100 leading-none select-none">404</div>
            <div class="absolute inset-0 flex items-center justify-center">
                <div class="w-24 h-24 bg-electric-blue rounded-3xl flex items-center justify-center shadow-2xl rotate-12 hover:rotate-0 transition-transform duration-500">
                    <i class="fas fa-search text-white text-4xl"></i>
                </div>
            </div>
        </div>

        <h1 class="text-3xl font-bold text-navy mb-3">Page Not Found</h1>
        <p class="text-gray-500 mb-8 text-lg">Oops! The page you're looking for doesn't exist or has been moved.</p>

        <!-- Search -->
        <form action="{{ route('products.search') }}" method="GET" class="flex gap-2 mb-8 max-w-md mx-auto">
            <input type="text" name="q" placeholder="Search for products..." required
                class="flex-1 border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-electric-blue">
            <button type="submit" class="bg-electric-blue text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-dark transition-colors">
                Search
            </button>
        </form>

        <!-- Quick Links -->
        <div class="flex flex-wrap gap-3 justify-center mb-8">
            <a href="{{ route('home') }}" class="bg-navy text-white px-5 py-2.5 rounded-xl font-semibold hover:bg-slate-800 transition-colors">
                <i class="fas fa-home mr-2"></i> Go Home
            </a>
            <a href="{{ route('products.index') }}" class="bg-white border border-gray-200 text-navy px-5 py-2.5 rounded-xl font-semibold hover:border-electric-blue transition-colors">
                <i class="fas fa-th-large mr-2"></i> Browse Products
            </a>
            <a href="{{ route('contact') }}" class="bg-white border border-gray-200 text-navy px-5 py-2.5 rounded-xl font-semibold hover:border-electric-blue transition-colors">
                <i class="fas fa-envelope mr-2"></i> Contact Us
            </a>
        </div>

        <p class="text-sm text-gray-400">
            If you believe this is an error, please <a href="{{ route('contact') }}" class="text-electric-blue hover:underline">contact support</a>.
        </p>
    </div>
</div>
@endsection