@extends('layouts.client')

@section('title', 'Success.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(34, 197, 94, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .text-primary { color: #60a5fa; }
        .text-success { color: #34d399; }
        .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-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-check-circle text-success text-2xl"></i>
                </div>

                <h1 class="text-2xl font-bold text-success mb-4">Thank You!</h1>

                <p class="text-secondary mb-6">
                    Your digital consent form has been successfully submitted and is now on file with the studio.
                </p>

                <div class="bg-green-500/10 border border-green-500/20 rounded-lg p-4 mb-6">
                    <h3 class="text-lg font-semibold text-success mb-2">Next Steps:</h3>
                    <ul class="text-secondary text-sm space-y-2 text-left">
                        <li>• Arrive 15 minutes early to your appointment</li>
                        <li>• Bring a valid government-issued ID</li>
                        <li>• Eat a good meal before your appointment</li>
                        <li>• Stay hydrated and get a good night's sleep</li>
                        <li>• Avoid alcohol 24 hours before your appointment</li>
                    </ul>
                </div>

                <div class="bg-blue-500/10 border rule rounded-lg p-4 mb-6">
                    <h3 class="text-lg font-semibold text-primary mb-2">Important Reminders:</h3>
                    <ul class="text-secondary text-sm space-y-2 text-left">
                        <li>• Review aftercare instructions</li>
                        <li>• Ask any questions during your appointment</li>
                        <li>• Follow all aftercare guidelines for best results</li>
                    </ul>
                </div>

                <div class="text-center">
                    <p class="text-muted text-sm">
                        <i class="fas fa-heart mr-2"></i>
                        We look forward to seeing you soon!
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection