@extends('layouts.vpm-marketing')

@section('body_class', 'vpm-institutional')

@section('title', 'Trading & mining packages')

@section('content')
@include('partials.vpm.institutional-header')

<main id="main-content" class="vpm-i-main">
    @include('partials.vpm.marketing-page-hero', [
        'title' => 'Fund your account, then choose a package',
        'lead' => 'No monthly subscriptions. Deposit crypto, get your balance credited, and use it for spot trading, copy strategies, or mining bundles.',
        'primaryHref' => route('register'),
        'primaryLabel' => 'Open account',
        'secondaryHref' => route('features'),
        'secondaryLabel' => 'Platform features',
    ])

    <section class="vpm-mp-section" id="portfolios" aria-labelledby="fund-heading">
        <div class="vpm-mp-section__head">
            <h2 id="fund-heading" class="vpm-i-h2 vpm-i-h2--lg">How funding works</h2>
            <p>One balance powers every product. You always know what is available before you trade or purchase.</p>
        </div>
        <div class="vpm-mp-steps" data-vpm-stagger>
            <article class="vpm-mp-step">
                <span class="vpm-mp-step__num" aria-hidden="true">1</span>
                <h3>Deposit</h3>
                <p>Send crypto to a published wallet address and upload payment proof for review.</p>
            </article>
            <article class="vpm-mp-step">
                <span class="vpm-mp-step__num" aria-hidden="true">2</span>
                <h3>Balance credited</h3>
                <p>Approved deposits land in your account balance. Pending transfers stay visible until confirmed.</p>
            </article>
            <article class="vpm-mp-step">
                <span class="vpm-mp-step__num" aria-hidden="true">3</span>
                <h3>Trade or purchase</h3>
                <p>Use your balance in the terminal, request a copy strategy, or buy a mining bundle. To withdraw, apply for a debit card tier, get approved, top it up, then submit a payout request.</p>
            </article>
        </div>
    </section>

    <section class="vpm-mp-section vpm-mp-section--muted" id="mining" aria-labelledby="mining-packages-heading">
        <div class="vpm-mp-section__inner">
            <div class="vpm-mp-section__head">
                <h2 id="mining-packages-heading" class="vpm-i-h2 vpm-i-h2--lg">Mining bundles</h2>
                <p>Fixed-price plans with published duration and projected profit. Purchases deduct from your balance immediately.</p>
            </div>

            @if ($miningPlans->isEmpty())
                <div class="vpm-mp-empty">
                    <p>No mining bundles are listed right now. Open an account and check back soon.</p>
                </div>
            @else
                <div class="vpm-mp-packages vpm-mp-packages--mining" data-vpm-stagger>
                    @foreach ($miningPlans as $plan)
                        @include('partials.vpm.marketing-mining-plan-card', [
                            'plan' => $plan,
                            'currency' => $currency,
                        ])
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    <section class="vpm-mp-section" id="copy-trading" aria-labelledby="copy-packages-heading">
        <div class="vpm-mp-section__head">
            <h2 id="copy-packages-heading" class="vpm-i-h2 vpm-i-h2--lg">Copy trading strategies</h2>
            <p>Follow verified strategy managers from your funded balance. Profit share is shown before you submit a request.</p>
        </div>

        @if ($copyTraders->isEmpty())
            <div class="vpm-mp-empty">
                <p>No copy strategies are listed yet. Register to get notified when leaders go live.</p>
            </div>
        @else
            <div class="vpm-mp-packages vpm-mp-packages--copy" data-vpm-stagger>
                @foreach ($copyTraders as $trader)
                    @include('partials.vpm.marketing-copy-trader-card', ['trader' => $trader])
                @endforeach
            </div>
        @endif
    </section>

    <section class="vpm-mp-section">
        <p class="vpm-mp-hero__lead vpm-mp-packages__note">
            Package availability and terms can change. Trading and mining carry risk of loss. Read our
            <a href="{{ route('legal.risk') }}" class="vpm-i-link">risk disclosure</a>
            before funding an account.
        </p>
        @auth
            <div class="vpm-mp-hero__actions">
                <a href="{{ route('app.fund') }}" class="vpm-i-btn vpm-i-btn--primary">Add funds</a>
                <a href="{{ route('app.home') }}" class="vpm-i-btn vpm-i-btn--outline">Go to dashboard</a>
            </div>
        @else
            <div class="vpm-mp-hero__actions">
                <a href="{{ route('register') }}" class="vpm-i-btn vpm-i-btn--primary">Open account</a>
                <a href="{{ route('login') }}" class="vpm-i-btn vpm-i-btn--outline">Log in</a>
            </div>
        @endauth
    </section>
</main>

@include('partials.vpm.institutional-footer')
@endsection