@extends('layouts.client')

@section('title', 'Expired.Blade')

@push('head')
<style>
        /* Expired page specific styles */
        .glass-card {
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
    </style>
@endpush

@section('content')
<div class="min-h-screen flex items-center justify-center py-8 px-4">
        <div class="w-full max-w-md">
            <div class="glass-card rounded-xl p-8 text-center">
                <div class="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-clock text-danger text-2xl"></i>
                </div>

                <h1 class="text-2xl font-bold text-danger mb-4">Link Expired</h1>

                <p class="text-secondary mb-6">
                    This appointment link has expired and is no longer valid. Appointment links are only valid for a limited time for security purposes.
                </p>

                <div class="bg-red-500/10 border border-red-500/20 rounded-lg p-4 mb-6">
                    <h3 class="text-lg font-semibold text-danger mb-2">What to do next:</h3>
                    <ul class="text-secondary text-sm space-y-2 text-left">
                        <li>• Contact the studio to request a new appointment link</li>
                        <li>• Complete required forms during your appointment</li>
                        <li>• Ensure you have the correct appointment date and time</li>
                        <li>• Save the new link when you receive it</li>
                    </ul>
                </div>

                <div class="text-center">
                    <p class="text-muted text-sm">
                        <i class="fas fa-info-circle mr-2"></i>
                        Need help? Contact the studio directly for assistance.
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection