@extends('layouts.app')
@section('title', 'Booking Confirmed — AutoFix Pro')

@section('content')
<section style="min-height:100vh;display:flex;align-items:center;justify-content:center;padding:6rem 2rem;">
  <div class="glass-dark reveal" style="padding:3rem 3.5rem;border-radius:4px;max-width:540px;width:100%;text-align:center;">
    <div style="width:64px;height:64px;background:rgba(29,158,117,0.15);border:1px solid rgba(29,158,117,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;">
      <span class="material-symbols-outlined" style="color:#5DCAA5;font-size:32px;">check_circle</span>
    </div>
    <h1 style="font-size:2rem;font-weight:700;color:#f0ede8;margin-bottom:0.75rem;">Booking Confirmed!</h1>
    <p style="color:rgba(240,237,232,0.5);margin-bottom:1.5rem;line-height:1.7;">
      Thank you, <strong style="color:#f0ede8;">{{ session('booking_name') }}</strong>! Your appointment request has been received.
    </p>
    <div style="background:rgba(230,57,70,0.08);border:1px solid rgba(230,57,70,0.2);padding:1.25rem;margin-bottom:2rem;">
      <p style="font-size:0.75rem;color:rgba(240,237,232,0.4);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.5rem;">Your Confirmation Code</p>
      <p style="font-size:2rem;font-weight:800;color:#E63946;letter-spacing:0.15em;">{{ session('booking_code') }}</p>
    </div>
    <p style="font-size:0.85rem;color:rgba(240,237,232,0.4);margin-bottom:2rem;">We will call you within 2 hours to confirm your appointment details. Save your code for reference.</p>
    <div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;">
      <a href="{{ route('home') }}" class="btn-red">Back to Home</a>
      <a href="{{ route('booking') }}" class="btn-outline">Book Another</a>
    </div>
  </div>
</section>
@endsection