@extends('layouts.vpm-marketing')

@section('title', 'Design system')

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

<main id="main-content" class="vpm-section" style="padding-top:calc(var(--vpm-header-h) + 48px);">
    <div class="vpm-container">
        <h1 class="vpm-heading-1" style="margin-bottom:8px;">Design system</h1>
        <p class="vpm-lead" style="margin-bottom:48px;max-width:40rem;color:var(--vpm-text-muted);">
            Institutional crypto terminal tokens.
            <code style="font-size:13px;font-family:var(--vpm-font-mono);">design-system/vantagepromarket/MASTER.md</code>
        </p>

        <section class="vpm-ds-section">
            <h2 class="vpm-heading-2" style="margin-bottom:24px;">Palette</h2>
            <div class="vpm-ds-swatches">
                @foreach ([
                    ['#2962FF', 'Brand'],
                    ['#5B9CF6', 'Link'],
                    ['#131722', 'Background'],
                    ['#1E222D', 'Surface'],
                    ['#363A45', 'Border'],
                    ['#D1D4DC', 'Text'],
                    ['#26A69A', 'Buy'],
                    ['#EF5350', 'Sell'],
                ] as $swatch)
                <div class="vpm-swatch">
                    <div class="vpm-swatch__color" style="background:{{ $swatch[0] }};"></div>
                    <div class="vpm-swatch__label">
                        <span>{{ $swatch[1] }}</span>
                        <span>{{ $swatch[0] }}</span>
                    </div>
                </div>
                @endforeach
            </div>
        </section>

        <section class="vpm-ds-section">
            <h2 class="vpm-heading-2" style="margin-bottom:24px;">Controls</h2>
            <div class="vpm-ds-row">
                <x-vpm.button variant="primary">Deposit</x-vpm.button>
                <x-vpm.button variant="secondary">Withdraw</x-vpm.button>
                <button type="button" class="vpm-btn vpm-btn--buy">Long</button>
                <button type="button" class="vpm-btn vpm-btn--sell">Short</button>
            </div>
            <div class="vpm-segmented" style="margin-top:16px;">
                <button type="button" class="vpm-segmented__btn vpm-segmented__btn--active">1H</button>
                <button type="button" class="vpm-segmented__btn">4H</button>
                <button type="button" class="vpm-segmented__btn">1D</button>
            </div>
        </section>

        <section class="vpm-ds-section">
            <h2 class="vpm-heading-2" style="margin-bottom:16px;">Terminal preview</h2>
            <x-vpm.tradingview-mini symbol="BINANCE:ETHUSDT" :height="280" />
            <div style="margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;">
                <x-vpm.button variant="primary" href="{{ route('app.markets.trading-room') }}">Trading room</x-vpm.button>
                <x-vpm.button variant="secondary" href="{{ route('app.home') }}">Dashboard</x-vpm.button>
            </div>
        </section>
    </div>
</main>

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