@extends('layouts.vpm-marketing')

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

@section('title', 'Security')

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

<main id="main-content" class="vpm-i-main">
    @include('partials.vpm.marketing-page-hero', [
        'title' => 'Security you can verify',
        'lead' => 'Segregated balances, encrypted sessions, and identity checks designed for regulated fintech operations.',
        'secondaryHref' => route('contact'),
        'secondaryLabel' => 'Contact compliance',
    ])

    <section class="vpm-mp-section" aria-labelledby="protect-heading">
        <div class="vpm-mp-section__head">
            <h2 id="protect-heading" class="vpm-i-h2 vpm-i-h2--lg">How we protect accounts</h2>
            <p>Layered controls across authentication, custody, and platform monitoring.</p>
        </div>
        <div class="vpm-mp-security-grid" data-vpm-stagger>
            @foreach ([
                ['icon' => 'lock', 'title' => 'Encrypted sessions', 'desc' => 'TLS 1.3 in transit. Sensitive credentials hashed at rest with industry-standard algorithms.'],
                ['icon' => 'account_balance', 'title' => 'Segregated client funds', 'desc' => 'Client balances held separately from operating accounts at Tier-1 banking partners.'],
                ['icon' => 'badge', 'title' => 'Identity verification', 'desc' => 'Optional document review for higher withdrawal limits and full account verification.'],
                ['icon' => 'visibility', 'title' => 'Activity monitoring', 'desc' => 'Anomaly detection on login locations, deposit patterns, and copy-trading requests.'],
                ['icon' => 'verified_user', 'title' => 'Email change protection', 'desc' => 'Email updates require password confirmation and a link sent to the new address.'],
                ['icon' => 'support_agent', 'title' => 'Human review on deposits', 'desc' => 'Manual proof review reduces fraudulent funding attempts before balances credit.'],
            ] as $item)
                <article class="vpm-mp-security-item">
                    <span class="material-symbols-outlined" aria-hidden="true">{{ $item['icon'] }}</span>
                    <div>
                        <h3>{{ $item['title'] }}</h3>
                        <p>{{ $item['desc'] }}</p>
                    </div>
                </article>
            @endforeach
        </div>
    </section>

    <section class="vpm-mp-section vpm-mp-section--muted" aria-labelledby="compliance-heading">
        <div class="vpm-mp-section__inner">
            <div class="vpm-mp-platform">
                <img src="https://picsum.photos/seed/vpm-security-ops/900/600" alt="Security operations center with monitoring screens" width="900" height="600" loading="lazy">
                <div>
                    <h2 id="compliance-heading" class="vpm-i-h2 vpm-i-h2--lg">Compliance framework</h2>
                    <p class="vpm-mp-hero__lead">We align operational controls with multi-jurisdiction best practices for client asset protection and AML screening.</p>
                    <ul class="vpm-mp-platform__list">
                        <li><span class="material-symbols-outlined" aria-hidden="true">gavel</span> KYC and AML checks on eligible withdrawal tiers</li>
                        <li><span class="material-symbols-outlined" aria-hidden="true">description</span> Audit-ready deposit and withdrawal logs</li>
                        <li><span class="material-symbols-outlined" aria-hidden="true">policy</span> Published privacy, terms, and risk policies</li>
                    </ul>
                    <a href="{{ route('legal.privacy') }}" class="vpm-i-link" style="margin-top:16px;display:inline-block;">Read privacy policy</a>
                </div>
            </div>
        </div>
    </section>
</main>

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