@extends('clients.layouts.app')

@section('title', 'Affiliates')

@section('content')
    <div class="space-y-8 animate-in fade-in duration-700">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-2">
            <div>
                <h1 class="text-4xl font-black text-slate-900 dark:text-white tracking-tight italic">Affiliates</h1>
                <p class="text-sm text-slate-400 font-medium mt-1 uppercase tracking-widest">Grow with us and earn
                    commissions</p>
            </div>
            <button
                class="bg-[#1e293b] text-white px-8 py-3.5 rounded-lg font-bold text-xs uppercase tracking-widest shadow-xl shadow-slate-900/10 hover:bg-slate-800 transition-all transform hover:-translate-y-1 block">
                Withdraw Funds
            </button>
        </div>

        <!-- Affiliate Stats -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-white dark:bg-[#1e293b] p-8 rounded-lg border border-slate-100 dark:border-white/5 shadow-sm">
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Total Clicks</p>
                <h3 class="text-3xl font-black text-slate-900 dark:text-white mt-1">1,245</h3>
            </div>
            <div class="bg-white dark:bg-[#1e293b] p-8 rounded-lg border border-slate-100 dark:border-white/5 shadow-sm">
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Signups</p>
                <h3 class="text-3xl font-black text-slate-900 dark:text-white mt-1">48</h3>
            </div>
            <div class="bg-white dark:bg-[#1e293b] p-8 rounded-lg border border-slate-100 dark:border-white/5 shadow-sm">
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Commission Rate</p>
                <h3 class="text-3xl font-black text-primary mt-1">15%</h3>
            </div>
            <div class="bg-white dark:bg-[#1e293b] p-8 rounded-lg border border-slate-100 dark:border-white/5 shadow-sm">
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Available Balance</p>
                <h3 class="text-3xl font-black text-emerald-500 mt-1">$145.50</h3>
            </div>
        </div>

        <!-- Referral Link -->
        <div class="bg-[#1e293b] rounded-lg p-8 md:p-12 text-white relative overflow-hidden">
            <div class="relative z-10">
                <h2 class="text-2xl font-black italic tracking-tight mb-2">Your Unique Referral Link</h2>
                <p class="text-slate-400 text-sm mb-6">Share this link to earn commission on every successful signup.</p>
                <div
                    class="flex items-center bg-white/10 backdrop-blur-md rounded-2xl p-2 pl-6 border border-white/10 group">
                    <span class="text-sm font-bold truncate opacity-80">https://onehostbd.com/aff.php?aff=12345</span>
                    <button
                        class="ml-auto bg-white text-[#1e293b] px-6 py-3 rounded-lg font-bold text-xs uppercase tracking-widest hover:bg-slate-100 transition-all">Copy
                        Link</button>
                </div>
            </div>
            <i
                class="fas fa-link absolute top-1/2 right-[-2rem] transform -translate-y-1/2 text-9xl opacity-5 rotate-12"></i>
        </div>
    </div>
@endsection