@extends('layouts.vpm-marketing')

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

@section('title', 'About us')

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

<main id="main-content" class="vpm-i-main">
    @include('partials.vpm.marketing-page-hero', [
        'title' => 'Built for traders who measure in basis points',
        'lead' => 'VantageProMarket combines institutional execution infrastructure with transparent copy trading and managed mining for self-directed capital.',
        'primaryHref' => route('register'),
        'primaryLabel' => 'Open account',
    ])

    <section class="vpm-mp-section" aria-labelledby="mission-heading">
        <div class="vpm-mp-platform">
            <div>
                <h2 id="mission-heading" class="vpm-i-h2 vpm-i-h2--lg">Our mission</h2>
                <p class="vpm-mp-hero__lead">
                    Retail and professional traders deserve the same clarity institutions expect: honest spreads, visible risk, and tools that do not fight you for attention.
                </p>
                <p class="vpm-mp-hero__lead" style="margin-top:16px;">
                    We built a single workspace for markets, copy strategies, and mining so you spend less time switching tabs and more time managing exposure.
                </p>
            </div>
            <img src="https://picsum.photos/seed/vpm-about-team/900/620" alt="Trading team reviewing market data together" width="900" height="620" loading="lazy">
        </div>
    </section>

    <section class="vpm-mp-section vpm-mp-section--muted" aria-labelledby="values-heading">
        <div class="vpm-mp-section__inner">
            <div class="vpm-mp-section__head">
                <h2 id="values-heading" class="vpm-i-h2 vpm-i-h2--lg">What guides us</h2>
            </div>
            <div class="vpm-mp-features">
                @foreach ([
                    ['icon' => 'speed', 'title' => 'Speed with proof', 'desc' => 'Publish execution stats and uptime targets. If we miss them, we say so.'],
                    ['icon' => 'balance', 'title' => 'Fair access', 'desc' => 'Copy leaders and mining plans configured on the platform with the same rules for every client.'],
                    ['icon' => 'handshake', 'title' => 'Support that responds', 'desc' => 'Humans review deposits and copy requests. No black-box ticket voids.'],
                ] as $value)
                    <article class="vpm-mp-feature">
                        <div class="vpm-mp-feature__icon"><span class="material-symbols-outlined" aria-hidden="true">{{ $value['icon'] }}</span></div>
                        <h3>{{ $value['title'] }}</h3>
                        <p>{{ $value['desc'] }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="vpm-mp-section" aria-labelledby="stats-heading">
        <div class="vpm-i-trust" style="padding:0;background:transparent;">
            <div class="vpm-i-trust__grid" data-vpm-stagger>
                <div class="vpm-i-trust__item">
                    <span class="vpm-i-stat">2019</span>
                    <span class="vpm-i-stat-label">Founded</span>
                </div>
                <div class="vpm-i-trust__item">
                    <span class="vpm-i-stat">45+</span>
                    <span class="vpm-i-stat-label">Liquidity venues</span>
                </div>
                <div class="vpm-i-trust__item">
                    <span class="vpm-i-stat">24/5</span>
                    <span class="vpm-i-stat-label">Market coverage</span>
                </div>
                <div class="vpm-i-trust__item">
                    <span class="vpm-i-stat">12</span>
                    <span class="vpm-i-stat-label">Support languages</span>
                </div>
            </div>
        </div>
    </section>

    <section class="vpm-i-cta vpm-lp-cta-mesh" aria-labelledby="about-cta">
        <div class="vpm-i-cta__card">
            <div class="vpm-i-cta__inner">
                <h2 id="about-cta" class="vpm-i-h2 vpm-i-h2--lg">Work with us</h2>
                <p class="vpm-i-lead">Institutional desks and liquidity partners can reach our team directly.</p>
                <a href="{{ route('contact') }}" class="vpm-i-btn vpm-i-btn--inverse">Contact us</a>
            </div>
        </div>
    </section>
</main>

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