@extends('layouts.app')
@section('title', 'Program Afiliasi')

@section('content')
<section class="bg-gradient-to-br from-slate-800 to-brand-900 text-white">
    <div class="max-w-5xl mx-auto px-4 py-16 text-center">
        <h1 class="text-3xl lg:text-5xl font-extrabold">Program Afiliasi</h1>
        <p class="text-slate-300 mt-3 max-w-2xl mx-auto">Promosikan produk custom {{ $brandName }}, bagikan link unikmu, dan dapatkan komisi {{ $percent }}% dari setiap order yang selesai.</p>
        <div class="mt-6 flex flex-wrap justify-center gap-3">
            @auth
                <a href="{{ route('account.affiliate') }}" class="inline-block bg-white text-brand-800 font-bold px-8 py-3.5 rounded-full">Buka Dashboard Afiliasi</a>
            @else
                <a href="{{ route('register') }}" class="inline-block bg-white text-brand-800 font-bold px-8 py-3.5 rounded-full">Daftar & Mulai Afiliasi</a>
                <a href="{{ route('login') }}" class="inline-block border border-white/40 text-white font-bold px-8 py-3.5 rounded-full hover:bg-white/10">Masuk</a>
            @endauth
            @if ($accesstradeUrl)
                <a href="{{ $accesstradeUrl }}" target="_blank" rel="noopener" class="inline-block border border-white/40 text-white font-semibold px-6 py-3.5 rounded-full hover:bg-white/10 text-sm">Via AccessTrade</a>
            @endif
        </div>
    </div>
</section>

<div class="max-w-5xl mx-auto px-4 py-12 grid md:grid-cols-3 gap-5">
    @foreach ([
        ['link', 'Bagikan Link', 'Dapatkan link afiliasi unik dari dashboard akunmu.'],
        ['eye', 'Datangkan Traffic', 'Promosikan ke media sosial, blog, atau komunitas.'],
        ['wallet', 'Terima Komisi', 'Komisi ' . $percent . '% masuk saldo setelah order selesai & disetujui.'],
    ] as $s)
        <div class="bg-white border border-slate-100 rounded-2xl p-6 text-center">
            <div class="w-12 h-12 mx-auto 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>

<section class="bg-slate-50 border-y border-slate-100">
    <div class="max-w-4xl mx-auto px-4 py-12">
        <h2 class="text-2xl font-extrabold text-center">Cara Kerja</h2>
        <ol class="mt-8 space-y-4">
            @foreach ([
                'Daftar atau masuk ke akun '.$brandName.'.',
                'Buka menu Afiliasi Saya, salin link unikmu.',
                'Bagikan link ke audiens. Cookie referral berlaku ' . $cookieDays . ' hari.',
                'Saat mereka belanja dan order berstatus selesai, komisi tercatat otomatis.',
                'Admin meninjau & menyetujui. Cairkan lewat Komisi & Payout ke rekening bank.',
            ] as $i => $step)
                <li class="flex gap-4 bg-white border border-slate-100 rounded-2xl p-4">
                    <span class="shrink-0 w-8 h-8 rounded-full bg-brand-600 text-white grid place-items-center font-bold text-sm">{{ $i + 1 }}</span>
                    <p class="text-slate-600 pt-1">{{ $step }}</p>
                </li>
            @endforeach
        </ol>
    </div>
</section>
@endsection