@extends('layouts.member')

@section('title', 'Affiliate Analytics - ElevateWell Worldwide')

@section('content')
<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Store Analytics</h1>
        <p class="text-xs text-slate-500">Track visitors, click-throughs, and sales from your replicated store link.</p>
    </div>

    <!-- Metrics Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
            <span class="text-xs font-semibold text-slate-500">Total Page Views</span>
            <h3 class="text-3xl font-extrabold text-slate-900 dark:text-white mt-1">128</h3>
            <p class="text-[11px] text-emerald-600 mt-1 font-semibold">+14% this week</p>
        </div>

        <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
            <span class="text-xs font-semibold text-slate-500">Conversion Rate</span>
            <h3 class="text-3xl font-extrabold text-slate-900 dark:text-white mt-1">4.2%</h3>
            <p class="text-[11px] text-slate-400 mt-1">Retail orders converted</p>
        </div>

        <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
            <span class="text-xs font-semibold text-slate-500">Affiliate Commission Earned</span>
            <h3 class="text-3xl font-extrabold text-sky-700 dark:text-sky-400 mt-1">₱0.00</h3>
            <p class="text-[11px] text-slate-400 mt-1">From replicated sales</p>
        </div>
    </div>
</div>
@endsection