@extends('layouts.dashboard')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-3xl font-bold text-gray-800 mb-8">Cara Pembelian</h1>

        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="space-y-8">
                <!-- Langkah 1 -->
                <div class="flex items-start">
                    <div class="flex-shrink-0 w-12 h-12 bg-[#2C7A7B] rounded-full flex items-center justify-center text-white font-bold text-xl mr-4">
                        1
                    </div>
                    <div>
                        <h2 class="text-xl font-semibold text-gray-900 mb-2">Pilih Produk</h2>
                        <p class="text-gray-600">Browsing dan pilih produk elektronik yang Anda inginkan. Anda dapat menggunakan fitur pencarian atau melihat kategori produk yang tersedia.</p>
                    </div>
                </div>

                <!-- Langkah 2 -->
                <div class="flex items-start">
                    <div class="flex-shrink-0 w-12 h-12 bg-[#2C7A7B] rounded-full flex items-center justify-center text-white font-bold text-xl mr-4">
                        2
                    </div>
                    <div>
                        <h2 class="text-xl font-semibold text-gray-900 mb-2">Tambahkan ke Keranjang</h2>
                        <p class="text-gray-600">Klik tombol "Tambah ke Keranjang" pada produk yang Anda pilih. Anda dapat menambahkan beberapa produk sekaligus.</p>
                    </div>
                </div>

                <!-- Langkah 3 -->
                <div class="flex items-start">
                    <div class="flex-shrink-0 w-12 h-12 bg-[#2C7A7B] rounded-full flex items-center justify-center text-white font-bold text-xl mr-4">
                        3
                    </div>
                    <div>
                        <h2 class="text-xl font-semibold text-gray-900 mb-2">Periksa Keranjang</h2>
                        <p class="text-gray-600">Klik ikon keranjang di pojok kanan atas untuk melihat produk yang telah Anda pilih. Anda dapat mengubah jumlah atau menghapus produk dari keranjang.</p>
                    </div>
                </div>

                <!-- Langkah 4 -->
                <div class="flex items-start">
                    <div class="flex-shrink-0 w-12 h-12 bg-[#2C7A7B] rounded-full flex items-center justify-center text-white font-bold text-xl mr-4">
                        4
                    </div>
                    <div>
                        <h2 class="text-xl font-semibold text-gray-900 mb-2">Checkout</h2>
                        <p class="text-gray-600">Klik tombol "Checkout" untuk melanjutkan ke proses pembayaran. Pastikan alamat pengiriman dan informasi kontak Anda sudah benar.</p>
                    </div>
                </div>

                <!-- Langkah 5 -->
                <div class="flex items-start">
                    <div class="flex-shrink-0 w-12 h-12 bg-[#2C7A7B] rounded-full flex items-center justify-center text-white font-bold text-xl mr-4">
                        5
                    </div>
                    <div>
                        <h2 class="text-xl font-semibold text-gray-900 mb-2">Pilih Metode Pembayaran</h2>
                        <p class="text-gray-600">Pilih metode pembayaran yang tersedia (transfer bank, e-wallet, atau kartu kredit). Ikuti instruksi pembayaran yang muncul.</p>
                    </div>
                </div>

                <!-- Langkah 6 -->
                <div class="flex items-start">
                    <div class="flex-shrink-0 w-12 h-12 bg-[#2C7A7B] rounded-full flex items-center justify-center text-white font-bold text-xl mr-4">
                        6
                    </div>
                    <div>
                        <h2 class="text-xl font-semibold text-gray-900 mb-2">Konfirmasi Pembayaran</h2>
                        <p class="text-gray-600">Setelah melakukan pembayaran, Anda akan menerima konfirmasi melalui email. Pesanan Anda akan segera diproses.</p>
                    </div>
                </div>
            </div>

            <!-- Catatan Penting -->
            <div class="mt-8 p-4 bg-yellow-50 rounded-lg">
                <h3 class="text-lg font-semibold text-yellow-800 mb-2">Catatan Penting:</h3>
                <ul class="list-disc list-inside text-yellow-700 space-y-1">
                    <li>Pastikan alamat pengiriman sudah benar dan lengkap</li>
                    <li>Simpan bukti pembayaran Anda</li>
                    <li>Pembayaran harus dilakukan dalam waktu 24 jam</li>
                    <li>Untuk bantuan lebih lanjut, silakan hubungi customer service kami</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection