@extends('layouts.app')

@section('title', 'Session Expired - Sweet Delights Bakery')

@section('content')
<div class="container mx-auto px-4 py-16 text-center">
    <div class="max-w-2xl mx-auto">
        <!-- Session Expired 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">
                    <!-- Clock Icon -->
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
                    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    <!-- Warning Exclamation -->
                    <circle cx="12" cy="18" r="1.5" fill="currentColor"/>
                </svg>
            </div>
        </div>
        
        <h1 class="text-4xl md:text-5xl font-serif font-bold mb-4 text-[#524438]">Session Expired</h1>
        <p class="text-xl text-[#645443] mb-8">Your session has expired due to inactivity. For security reasons, you have been logged out.</p>
        
        <div class="bg-white p-8 rounded-2xl shadow-md border border-[#e8ddd0] mb-8">
            <p class="text-[#645443] mb-6">Please log in again to continue.</p>
            <a href="{{ route('admin.login') }}" 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">
                Return to Login
            </a>
        </div>
        
        <div class="text-sm text-[#9d8566]">
            <p>💡 Tip: Use "Remember Me" when logging in to extend your session duration.</p>
        </div>
    </div>
</div>
@endsection