{{-- ── pages/checkout/success.blade.php ── --}}
@extends('layouts.app')
@section('title', 'Order Successful — Jumia Clone')
@section('content')
<div class="max-w-lg mx-auto px-4 py-12 text-center"
     x-data="{
         order: null,
         async init() {
             const params = new URLSearchParams(window.location.search)
             const ref = params.get('reference') || params.get('trxref')
             if (ref) {
                 try {
                     const data = await api.get('/payments/verify/' + ref)
                     this.order = data.order
                 } catch {}
             }
         }
     }"
     x-init="init()">

    {{-- Success animation --}}
    <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6 animate-fade-in">
        <svg class="w-12 h-12 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
    </div>

    <h1 class="text-2xl font-black text-gray-900 mb-2">Order Placed! 🎉</h1>
    <p class="text-gray-500 mb-2">Thank you for your purchase.</p>
    <p class="text-gray-500 text-sm mb-6" x-show="order">
        Order <strong class="text-gray-900" x-text="order?.order_number"></strong> has been confirmed.
    </p>

    <div class="bg-orange-50 rounded-xl p-4 mb-6 text-sm text-gray-700">
        <p>📦 You'll receive an email confirmation shortly.</p>
        <p class="mt-1">🚚 Estimated delivery: <strong>2–5 business days</strong></p>
    </div>

    <div class="flex flex-col sm:flex-row gap-3 justify-center">
        <a href="/orders" class="btn-primary px-8">Track My Order</a>
        <a href="/products" class="btn-secondary px-8">Continue Shopping</a>
    </div>
</div>
@endsection