@extends('layouts.app')

@section('title', 'Tebrikler | Randevunuz Alındı')

@section('content')
    <main class="flex-grow pt-32 pb-24 px-6 max-w-3xl mx-auto w-full text-center">
        <div class="py-12 px-8 border border-primary-container/30 bg-surface-container-low/20 rounded shadow-sm flex flex-col items-center">
            <span class="material-symbols-outlined text-primary-container text-6xl mb-6" style="font-variation-settings: 'FILL' 1;">check_circle</span>
            
            <h1 class="font-display-lg text-3xl md:text-4xl text-on-background mb-4 font-bold">Randevu Talebiniz Alındı</h1>
            <p class="font-body-md text-on-surface-variant max-w-lg mb-8 leading-relaxed">
                Tebrikler <strong>{{ $booking->name }}</strong>, kozmik yolculuğunuz için randevu talebiniz başarıyla kaydedilmiştir.
            </p>
            
            <div class="w-full bg-[#FCFBF7] p-6 border border-primary-container/20 rounded text-left space-y-4 mb-8">
                <div class="text-sm font-semibold border-b border-primary-container/10 pb-2 text-primary">Randevu Özeti</div>
                <div class="grid grid-cols-2 text-sm gap-2">
                    <span class="text-on-surface-variant">Danışmanlık:</span>
                    <span class="font-semibold">{{ $booking->service->title }}</span>
                    
                    <span class="text-on-surface-variant">Tarih:</span>
                    <span class="font-semibold">{{ $booking->booking_date->translatedFormat('d F Y') }}</span>
                    
                    <span class="text-on-surface-variant">Saat:</span>
                    <span class="font-semibold">{{ $booking->booking_time_slot }} (GMT+3)</span>
                    
                    <span class="text-on-surface-variant">Doğum Yeri:</span>
                    <span class="font-semibold">{{ $booking->birth_place }}</span>
                </div>
            </div>
            
            <p class="font-body-md text-xs text-on-surface-variant max-w-md leading-relaxed mb-8">
                Görüşme detayları, ödeme bağlantısı ve harita analizi hazırlık adımları <strong>{{ $booking->email }}</strong> adresine e-posta olarak gönderilmiştir.
            </p>
            
            <a href="/" class="inline-block bg-primary-container text-white font-label-caps text-xs uppercase px-8 py-3 rounded hover:opacity-90 font-semibold tracking-wider">
                Ana Sayfaya Dön
            </a>
        </div>
    </main>
@endsection