@extends('layouts.member')

@section('title', 'Savings - ElevateWell Worldwide')

@section('content')
<div class="max-w-3xl space-y-6">
    <div>
        <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Savings Wallet</h1>
        <p class="text-xs text-slate-500">Your accumulated repeat order and lifestyle savings fund.</p>
    </div>

    <!-- Savings Balance Card -->
    <div class="bg-gradient-to-br from-sky-900 via-blue-900 to-slate-950 text-white rounded-2xl p-6 shadow-md border border-sky-800/40">
        <span class="text-xs font-semibold text-cyan-300 uppercase tracking-wider">Total Savings Balance</span>
        <h2 class="text-4xl font-black mt-2">₱{{ number_format($user->savings_balance, 2) }}</h2>
        <p class="text-xs text-sky-100/80 mt-2">
            This balance is reserved for product repeat orders, maintaining your account activity, and unlocking incentive rewards.
        </p>
    </div>

    <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
        <h3 class="text-sm font-bold text-slate-800 dark:text-white mb-2">How Savings Work</h3>
        <p class="text-xs text-slate-600 dark:text-slate-300 leading-relaxed">
            Every 5th pairing bonus or a designated percentage of retail overrides can be allocated to your Savings Wallet. You can use these funds to purchase retail wellness products at a 20% distributor discount or maintain your account status.
        </p>
        <div class="mt-4">
            <a href="{{ route('store.products') }}" class="inline-flex items-center gap-1.5 px-4 py-2 bg-sky-700 hover:bg-sky-800 text-white rounded-xl text-xs font-bold transition shadow-sm">
                <i data-lucide="shopping-bag" class="w-4 h-4"></i>
                <span>Shop with Savings</span>
            </a>
        </div>
    </div>
</div>
@endsection