@extends('layouts.app')
@section('title', 'Retur & Garansi')

@section('content')
<section class="bg-gradient-to-br from-brand-600 to-brand-800 text-white">
    <div class="max-w-4xl mx-auto px-4 py-14">
        <h1 class="text-3xl lg:text-4xl font-extrabold">Retur, Komplain & Garansi</h1>
        <p class="text-brand-100 mt-2">Garansi 100% uang kembali untuk cacat produksi & kesalahan cetak.</p>
    </div>
</section>

<div class="max-w-3xl mx-auto px-4 py-10 space-y-6">
    <div class="grid sm:grid-cols-3 gap-4">
        @foreach ([['7 hari','Window komplain sejak barang diterima'],['14 hari','Barang retur sampai di warehouse'],['≤7 hari','Refund diproses setelah retur disetujui']] as $s)
            <div class="bg-white border border-slate-100 rounded-2xl p-5 text-center">
                <p class="text-2xl font-extrabold text-brand-700">{{ $s[0] }}</p>
                <p class="text-xs text-slate-500 mt-1">{{ $s[1] }}</p>
            </div>
        @endforeach
    </div>

    <div class="bg-white border border-slate-100 rounded-2xl p-6">
        <h2 class="font-extrabold text-lg mb-3 flex items-center gap-2"><span class="text-emerald-600"><x-icon name="check" class="w-5 h-5"/></span> Klaim yang kami terima</h2>
        <ul class="space-y-2 text-sm text-slate-600 list-disc list-inside">
            <li>Salah kirim ukuran/produk (kesalahan kami)</li>
            <li>Produk cacat atau rusak saat diterima</li>
            <li>Hasil cetak salah / tidak sesuai desain final</li>
            <li>Hasil tidak sesuai ekspektasi wajar akibat kesalahan platform</li>
        </ul>
    </div>

    <div class="bg-white border border-slate-100 rounded-2xl p-6">
        <h2 class="font-extrabold text-lg mb-3 flex items-center gap-2"><span class="text-rose-500"><x-icon name="x" class="w-5 h-5"/></span> Yang tidak dapat kami terima</h2>
        <ul class="space-y-2 text-sm text-slate-600 list-disc list-inside">
            <li>Salah memilih ukuran oleh konsumen</li>
            <li>Salah desain / typo pada desain buatan konsumen</li>
            <li>Perbedaan warna layar vs cetak dalam batas wajar</li>
        </ul>
    </div>

    <div class="bg-white border border-slate-100 rounded-2xl p-6">
        <h2 class="font-extrabold text-lg mb-3">Cara mengajukan komplain</h2>
        <ol class="space-y-2 text-sm text-slate-600 list-decimal list-inside">
            <li>Foto bukti produk + sebutkan kode order</li>
            <li>Kirim ke <b>{{ $storeProfile['email'] }}</b> atau WhatsApp CS</li>
            <li>CS follow-up ≤ 2 hari kerja</li>
            <li>Keputusan: ganti produk atau refund 100%</li>
        </ol>
        <a href="{{ route('page.contact') }}" class="inline-block mt-4 bg-brand-600 text-white px-5 py-2.5 rounded-full text-sm font-semibold">Ajukan Komplain</a>
    </div>
</div>
@endsection