@extends('layouts.app')

@section('title', 'Order Confirmed | Furnitec')

@section('content')

<div class="max-w-2xl mx-auto px-4 sm:px-8 py-20 sm:py-28 text-center">
    <p class="eyebrow text-brand">Thank You</p>
    <h1 class="font-display text-4xl sm:text-6xl font-light mt-5">Order Confirmed</h1>
    <p class="mt-6 text-stone-warm font-light text-lg">
        Thank you, <span class="text-ink">{{ $order->customer_name }}</span>.
        Your order <span class="text-brand font-medium">{{ $order->order_number }}</span> has been received.
    </p>

    <div class="mt-10 border border-line p-8 sm:p-10 text-left">
        <h2 class="eyebrow mb-8">What Happens Next</h2>
        <ol class="space-y-7">
            <li class="flex gap-6 items-baseline">
                <span class="font-display text-xl text-brand shrink-0">01</span>
                <p class="text-sm text-ink-soft font-light">Our team will <span class="font-medium">call {{ $order->phone }}</span> within 24 hours to confirm your order and delivery charge.</p>
            </li>
            <li class="flex gap-6 items-baseline">
                <span class="font-display text-xl text-brand shrink-0">02</span>
                <p class="text-sm text-ink-soft font-light">Your furniture is prepared and quality-checked at our factory.</p>
            </li>
            <li class="flex gap-6 items-baseline">
                <span class="font-display text-xl text-brand shrink-0">03</span>
                <p class="text-sm text-ink-soft font-light">We deliver & assemble at your home — <span class="font-medium">pay cash on delivery</span>.</p>
            </li>
        </ol>
        <div class="mt-8 border-t border-line pt-5 flex justify-between items-baseline">
            <span class="text-[11px] tracking-[0.18em] uppercase text-stone-warm">Order Total</span>
            <span class="font-display text-3xl">৳{{ number_format($order->total) }}</span>
        </div>
    </div>

    <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
        <a href="https://wa.me/8801714162950?text={{ urlencode('Hello! I just placed order ' . $order->order_number) }}" class="btn btn-dark">Track on WhatsApp</a>
        <a href="{{ route('shop') }}" class="btn btn-line">Continue Shopping</a>
    </div>
</div>

@endsection