@extends('layouts.app')
@section('title','Order Sent!')

@section('content')
<div style="max-width:560px;margin:80px auto;padding:0 24px;text-align:center">
  <div style="font-size:72px;margin-bottom:24px">📲</div>
  <h1 style="font-family:var(--font-d);font-size:36px;font-weight:700;margin-bottom:12px">Order Sent!</h1>
  <p style="color:var(--ink2);font-size:16px;line-height:1.7;margin-bottom:32px">
    Your order has been sent to our WhatsApp. We'll confirm your order and arrange delivery shortly.
  </p>
  @if($ref)
    <div style="background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:32px;display:inline-block">
      <div style="font-size:12px;color:var(--ink2);font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px">Order Reference</div>
      <div style="font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--accent)">{{ $ref }}</div>
    </div>
  @endif
  <div>
    <a href="{{ route('shop.index') }}" class="btn btn-primary" style="font-size:16px;padding:12px 32px">Continue Shopping</a>
  </div>
</div>
@endsection