@extends('layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-16 text-center">
    <div class="max-w-2xl mx-auto">
        <!-- 404 Cupcake Icon -->
        <div class="mb-8 flex justify-center">
            <div class="relative">
                <svg class="w-48 h-48 text-[#9d8566]" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <!-- Cupcake Base -->
                    <path d="M12 18 L8 22 L16 22 Z" fill="#f5f0e8" stroke="#7d6a52" stroke-width="1.5" stroke-linejoin="round"/>
                    <path d="M8 22 L9 24 L15 24 L16 22 Z" fill="#e8ddd0" stroke="#7d6a52" stroke-width="1.5" stroke-linejoin="round"/>
                    
                    <!-- Frosting -->
                    <path d="M8 18 Q9 14 12 14 Q15 14 16 18" fill="#c97d60" stroke="#9d8566" stroke-width="1.5" stroke-linejoin="round"/>
                    <path d="M9 17 Q12 15 15 17" fill="#e8b4a0"/>
                    
                    <!-- Cherry on top -->
                    <circle cx="12" cy="12" r="3.5" fill="#c97d60" stroke="#9d8566" stroke-width="0.5"/>
                    <circle cx="12.5" cy="11.5" r="1.5" fill="#ff6b6b"/>
                    <path d="M12 8.5 L12 12" stroke="#7d6a52" stroke-width="1.5" stroke-linecap="round"/>
                    
                    <!-- Sprinkles -->
                    <circle cx="10" cy="16" r="1" fill="#ffd93d"/>
                    <circle cx="14" cy="17" r="1" fill="#6bcf7f"/>
                    <circle cx="11" cy="15.5" r="1" fill="#4d96ff"/>
                    <circle cx="13" cy="15.5" r="1" fill="#ff6b6b"/>
                </svg>
                <!-- 404 Text -->
                <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-6xl font-serif font-bold text-[#7d6a52]">404</span>
                </div>
            </div>
        </div>
        
        <h1 class="text-4xl md:text-5xl font-serif font-bold mb-4 text-[#524438]">Oops! Page Not Found</h1>
        <p class="text-xl text-[#645443] mb-8">It looks like this page has been eaten! 🍰</p>
        <p class="text-[#645443] mb-8">The page you're looking for might have been moved, deleted, or doesn't exist.</p>
        
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('home') }}" class="bg-[#7d6a52] text-white px-8 py-3 rounded-full hover:bg-[#9d8566] transition-all font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 inline-block">
                Go to Homepage
            </a>
            <a href="{{ route('products.index') }}" class="bg-white text-[#7d6a52] border-2 border-[#7d6a52] px-8 py-3 rounded-full hover:bg-[#f5f0e8] transition-all font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 inline-block">
                Browse Products
            </a>
        </div>
    </div>
</div>
@endsection