@extends('layouts.app')

@section('title', 'Quy trình giao hàng - XING NEW')

@section('content')
<div class="bg-slate-50 py-16">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto bg-white rounded-3xl shadow-sm p-8 md:p-12">
            <h1 class="text-3xl font-black text-slate-900 mb-8 border-b border-slate-100 pb-6 uppercase tracking-tight">Quy trình giao hàng</h1>
            
            <div class="prose prose-slate max-w-none space-y-8 text-slate-600 leading-relaxed">
                <p>XING NEW hợp tác với các đơn vị vận chuyển uy tín nhằm mang sản phẩm đến tay khách hàng một cách nhanh chóng và an toàn nhất.</p>

                <div class="space-y-6">
                    <div class="flex gap-4">
                        <div class="w-12 h-12 bg-blue-600 text-white rounded-2xl flex items-center justify-center font-bold flex-shrink-0">1</div>
                        <div>
                            <h3 class="text-lg font-bold text-slate-900 mb-2">Xác nhận đơn hàng</h3>
                            <p>Sau khi quý khách đặt hàng, nhân viên XING NEW sẽ liên hệ qua điện thoại hoặc gửi email xác nhận thông tin chi tiết đơn hàng trong vòng 24h.</p>
                        </div>
                    </div>

                    <div class="flex gap-4">
                        <div class="w-12 h-12 bg-blue-600 text-white rounded-2xl flex items-center justify-center font-bold flex-shrink-0">2</div>
                        <div>
                            <h3 class="text-lg font-bold text-slate-900 mb-2">Đóng gói sản phẩm</h3>
                            <p>Sản phẩm sẽ được kiểm tra kỹ lưỡng về chất lượng và đóng gói cẩn thận để đảm bảo không bị hư hại trong quá trình vận chuyển.</p>
                        </div>
                    </div>

                    <div class="flex gap-4">
                        <div class="w-12 h-12 bg-blue-600 text-white rounded-2xl flex items-center justify-center font-bold flex-shrink-0">3</div>
                        <div>
                            <h3 class="text-lg font-bold text-slate-900 mb-2">Vận chuyển</h3>
                            <p>Đơn hàng được bàn giao cho đơn vị vận chuyển. Thời gian giao hàng dự kiến:</p>
                            <ul class="list-disc pl-6 mt-2 space-y-1">
                                <li>Nội thành: 1-2 ngày làm việc.</li>
                                <li>Ngoại thành và các tỉnh: 3-5 ngày làm việc.</li>
                            </ul>
                        </div>
                    </div>

                    <div class="flex gap-4">
                        <div class="w-12 h-12 bg-blue-600 text-white rounded-2xl flex items-center justify-center font-bold flex-shrink-0">4</div>
                        <div>
                            <h3 class="text-lg font-bold text-slate-900 mb-2">Nhận hàng & Thanh toán</h3>
                            <p>Quý khách nhận hàng và thanh toán cho nhân viên giao hàng (đối với đơn COD). Quý khách vui lòng kiểm tra gói hàng trước khi nhận.</p>
                        </div>
                    </div>
                </div>

                <div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-r-xl mt-8">
                    <h4 class="font-bold text-blue-900 mb-1">Lưu ý quan trọng:</h4>
                    <p class="text-blue-800 text-sm italic">Quý khách hoàn toàn có thể yêu cầu được kiểm tra sản phẩm trước khi thanh toán. Nếu gói hàng có dấu hiệu bị móp méo, rách hoặc không nguyên vẹn, vui lòng từ chối nhận hàng và báo ngay cho chúng tôi.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection