@extends('layouts.client')

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

@push('head')
<style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            font-family: 'Inter', sans-serif;
        }

        .glass-card {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(239, 68, 68, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .text-primary { color: #60a5fa; }
        .text-danger { color: #f87171; }
        .text-secondary { color: #cbd5e1; }
        .text-muted { color: #94a3b8; }
    </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 consent form link has expired and is no longer valid. Digital consent 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 consent form link</li>
                        <li>• Complete the consent form during your appointment</li>
                        <li>• Ensure you have the correct appointment date and time</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.
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection