@extends('layouts.vpm-app-shell', ['active' => 'upgrade', 'area' => 'user'])

@section('title', 'Upgrade')

@section('content')
<div class="vpm-page">
    <x-vpm.page-intro
        title="Upgrade"
        description="Add balance, then trade or purchase bundles."
    />

    <div class="vpm-dash-grid vpm-dash-grid--2">
        <article class="vpm-panel">
            <div class="vpm-panel__body">
                <h2 class="vpm-panel__title">Add funds</h2>
                <p class="vpm-page-intro__desc">Start a deposit, send crypto, and upload proof for review.</p>
                <x-vpm.button href="{{ route('app.fund') }}" variant="primary">New deposit</x-vpm.button>
            </div>
        </article>
        <article class="vpm-panel">
            <div class="vpm-panel__body">
                <h2 class="vpm-panel__title">Card tiers</h2>
                <p class="vpm-page-intro__desc">Compare debit card tiers and withdrawal limits.</p>
                <x-vpm.button href="{{ route('app.cards') }}" variant="secondary">Compare card tiers</x-vpm.button>
            </div>
        </article>
        <article class="vpm-panel">
            <div class="vpm-panel__body">
                <h2 class="vpm-panel__title">Mining bundles</h2>
                <p class="vpm-page-intro__desc">Purchase available plans from your balance.</p>
                <x-vpm.button href="{{ route('app.mining.plans') }}" variant="secondary">Mining plans</x-vpm.button>
            </div>
        </article>
        <article class="vpm-panel">
            <div class="vpm-panel__body">
                <h2 class="vpm-panel__title">Copy trading</h2>
                <p class="vpm-page-intro__desc">Request to follow a verified strategy manager.</p>
                <x-vpm.button href="{{ route('app.copy-trading') }}" variant="secondary">Copy desk</x-vpm.button>
            </div>
        </article>
    </div>
</div>
@endsection