@extends('layouts.vpm-marketing')

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

@section('title', 'Platform features')

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

<main id="main-content" class="vpm-i-main">
    @include('partials.vpm.marketing-page-hero', [
        'title' => 'Everything you need to run capital',
        'lead' => 'Execution, copy strategies, managed mining, and account controls in one workspace built for active traders.',
        'primaryHref' => route('register'),
        'primaryLabel' => 'Open account',
        'secondaryHref' => route('packages'),
        'secondaryLabel' => 'View packages',
    ])

    <section class="vpm-mp-section" aria-labelledby="core-heading">
        <div class="vpm-mp-section__head">
            <h2 id="core-heading" class="vpm-i-h2 vpm-i-h2--lg">Core platform</h2>
            <p>Professional tools without the clutter. Each module focuses on one job so you stay in flow.</p>
        </div>
        <div class="vpm-mp-features" data-vpm-stagger>
            @foreach ([
                ['icon' => 'candlestick_chart', 'title' => 'Live trading terminal', 'desc' => 'Spot, forex, and indices with TradingView charts, depth, and one-click order entry.'],
                ['icon' => 'content_copy', 'title' => 'Copy trading desk', 'desc' => 'Follow verified strategy managers, set risk caps, and pause allocations instantly.'],
                ['icon' => 'memory', 'title' => 'Managed mining', 'desc' => 'Purchase platform bundles with transparent duration, yield, and history.'],
                ['icon' => 'account_balance_wallet', 'title' => 'Deposits & withdrawals', 'desc' => 'Fund via crypto with proof upload. Track pending and confirmed transfers in one place.'],
                ['icon' => 'groups', 'title' => 'Referral program', 'desc' => 'Share a personal link and track referrals and rewards from your dashboard.'],
                ['icon' => 'shield', 'title' => 'Account security', 'desc' => 'Email verification, password controls, optional identity review, and notification preferences.'],
            ] as $feature)
                <article class="vpm-mp-feature">
                    <div class="vpm-mp-feature__icon">
                        <span class="material-symbols-outlined" aria-hidden="true">{{ $feature['icon'] }}</span>
                    </div>
                    <h3>{{ $feature['title'] }}</h3>
                    <p>{{ $feature['desc'] }}</p>
                </article>
            @endforeach
        </div>
    </section>

    <section class="vpm-mp-section vpm-mp-section--muted" aria-labelledby="workflow-heading">
        <div class="vpm-mp-section__inner">
            <div class="vpm-mp-platform">
                <div>
                    <h2 id="workflow-heading" class="vpm-i-h2 vpm-i-h2--lg">From signup to first trade</h2>
                    <p class="vpm-mp-hero__lead">Three focused steps. No parallel onboarding flows competing for attention.</p>
                    <ul class="vpm-mp-platform__list">
                        <li><span class="material-symbols-outlined" aria-hidden="true">person_add</span> Create your account and verify email</li>
                        <li><span class="material-symbols-outlined" aria-hidden="true">payments</span> Deposit funds with wallet instructions and proof upload</li>
                        <li><span class="material-symbols-outlined" aria-hidden="true">rocket_launch</span> Trade, copy leaders, or purchase a mining bundle</li>
                    </ul>
                    <a href="{{ route('register') }}" class="vpm-i-btn vpm-i-btn--primary" style="margin-top:24px;display:inline-flex;">Get started</a>
                </div>
                <img src="https://picsum.photos/seed/vpm-platform-workflow/900/640" alt="Trader reviewing portfolio performance on a laptop in a bright office" width="900" height="640" loading="lazy">
            </div>
        </div>
    </section>

    <section class="vpm-mp-section" aria-labelledby="access-heading">
        <div class="vpm-mp-section__head">
            <h2 id="access-heading" class="vpm-i-h2 vpm-i-h2--lg">Access anywhere</h2>
            <p>Responsive web terminal optimized for desktop execution and mobile monitoring.</p>
        </div>
        <div class="vpm-mp-features">
            <article class="vpm-mp-feature">
                <div class="vpm-mp-feature__icon"><span class="material-symbols-outlined" aria-hidden="true">desktop_windows</span></div>
                <h3>Desktop terminal</h3>
                <p>Full charting, order entry, and multi-panel layout on large screens.</p>
            </article>
            <article class="vpm-mp-feature">
                <div class="vpm-mp-feature__icon"><span class="material-symbols-outlined" aria-hidden="true">smartphone</span></div>
                <h3>Mobile dashboard</h3>
                <p>Check balances, deposit status, copy requests, and mining yields on the go.</p>
            </article>
            <article class="vpm-mp-feature">
                <div class="vpm-mp-feature__icon"><span class="material-symbols-outlined" aria-hidden="true">dark_mode</span></div>
                <h3>Light &amp; dark themes</h3>
                <p>Switch themes to match your environment without losing contrast or readability.</p>
            </article>
        </div>
    </section>

    <section class="vpm-i-cta vpm-lp-cta-mesh" aria-labelledby="features-cta">
        <div class="vpm-i-cta__card" data-vpm-motion="scale-in">
            <div class="vpm-i-cta__inner">
                <h2 id="features-cta" class="vpm-i-h2 vpm-i-h2--lg">See it in your workspace</h2>
                <p class="vpm-i-lead">Open an account and explore markets, copy trading, and mining from one dashboard.</p>
                <a href="{{ route('register') }}" class="vpm-i-btn vpm-i-btn--inverse">Open account</a>
            </div>
        </div>
    </section>
</main>

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