@extends('layouts.app')
@section('title', 'Buka Toko')

@section('content')
<section class="bg-gradient-to-br from-brand-500 to-brand-700 text-white">
    <div class="max-w-5xl mx-auto px-4 py-16 text-center">
        <h1 class="text-3xl lg:text-5xl font-extrabold">Jual Desainmu, Dapat Royalti</h1>
        <p class="text-brand-100 mt-3 max-w-2xl mx-auto">Buka toko gratis di marketplace {{ $brandName }}. Upload desain, tentukan royalti hingga 100%, biarkan kami urus produksi, pembayaran & pengiriman.</p>
        <a href="{{ auth()->check() ? route('account.store') : route('register') }}" class="inline-block mt-6 bg-white text-brand-700 font-bold px-8 py-3.5 rounded-full">Buka Toko Sekarang</a>
    </div>
</section>

<div class="max-w-5xl mx-auto px-4 py-12">
    <div class="grid md:grid-cols-3 gap-5">
        @foreach ([
            ['palette','Upload Desain','Desain via editor lalu jadikan produk jual dengan judul, deskripsi & tags.'],
            ['settings','Kami Handle Semua','CS, pembayaran, produksi, hingga pengiriman ditangani platform.'],
            ['wallet','Cairkan Komisi','Saldo komisi terkumpul otomatis & bisa dicairkan ke rekening setelah threshold.'],
        ] as $s)
            <div class="bg-white border border-slate-100 rounded-2xl p-6"><div class="w-12 h-12 rounded-xl bg-brand-50 text-brand-600 grid place-items-center"><x-icon :name="$s[0]" class="w-6 h-6"/></div><h3 class="font-bold mt-3">{{ $s[1] }}</h3><p class="text-sm text-slate-500 mt-1">{{ $s[2] }}</p></div>
        @endforeach
    </div>
    <div class="mt-10 bg-brand-50 rounded-2xl p-8 text-center">
        <p class="text-lg font-bold">Royalti hingga <span class="text-brand-700">100%</span> di atas harga dasar</p>
        <p class="text-sm text-slate-500 mt-1">Setiap desain dimoderasi sebelum tayang di marketplace publik.</p>
        <a href="{{ route('page.shop') }}" class="inline-block mt-4 text-brand-600 font-semibold hover:underline">Lihat Marketplace →</a>
    </div>
</div>
@endsection