{{--
    Pilot Mode dashboard preview ("How Pilot Mode works")
    -------------------------------------------------------------
    Shown only on home dashboard, only for hero states:
      - new
      - ictp
    (i.e. users without main balance or active follows)

    Expects:
      $stats : array{active_followers:int, lifetime_earned:float, verified_pilots:int}
               from PilotStatsService::dashboardSnapshot()

    Static markup (3-step explainer) + dynamic stats row.
--}}

@php
    /** @var array $stats */
    $stats = $stats ?? [
        'active_followers' => 0,
        'lifetime_earned'  => 0.0,
        'verified_pilots'  => 0,
    ];

    // Money abbreviation: $104,540 -> $104.5K, $1.2M -> $1.2M, $42 -> $42
    $fmtAbbrev = function ($amount) {
        if ($amount >= 1000000) {
            return '$' . number_format($amount / 1000000, 1) . 'M';
        }
        if ($amount >= 1000) {
            return '$' . number_format($amount / 1000, 1) . 'K';
        }
        return '$' . number_format($amount, 0);
    };
@endphp

<section class="pilot-preview">
    <div class="pilot-preview__head">
        <div class="pilot-preview__eyebrow">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2.5"
                 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
            </svg>
            How Pilot Mode works
        </div>
        <h2 class="pilot-preview__title">Trade like a pro. Even if you're not one.</h2>
        <p class="pilot-preview__sub">Three steps. No technical knowledge. Real humans you can verify.</p>
    </div>

    <div class="pilot-preview__steps">
        <div class="pilot-step">
            <div class="pilot-step__num">1</div>
            <div class="pilot-step__ic">
                <svg width="22" height="22" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          d="M12 8v8m4-4H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <div class="pilot-step__title">Deposit</div>
            <div class="pilot-step__desc">
                $20 minimum. Funded in minutes.
            </div>
        </div>

        <div class="pilot-step__arrow" aria-hidden="true">
            <svg width="22" height="22" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
        </div>

        <div class="pilot-step">
            <div class="pilot-step__num">2</div>
            <div class="pilot-step__ic">
                <svg width="22" height="22" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          d="M17 20h5v-2a4 4 0 00-3-3.87M9 20H4v-2a4 4 0 014-4h2a4 4 0 014 4v2zM12 9a4 4 0 100-8 4 4 0 000 8z" />
                </svg>
            </div>
            <div class="pilot-step__title">Pick a Pilot</div>
            <div class="pilot-step__desc">
                Choose from verified traders. See real win rates, trade history, and follower earnings.
            </div>
        </div>

        <div class="pilot-step__arrow" aria-hidden="true">
            <svg width="22" height="22" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
        </div>

        <div class="pilot-step">
            <div class="pilot-step__num">3</div>
            <div class="pilot-step__ic">
                <svg width="22" height="22" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          d="M13 7h8l-3-3m3 3l-3 3M3 17h8l-3-3m3 3l-3 3" />
                </svg>
            </div>
            <div class="pilot-step__title">Earn automatically</div>
            <div class="pilot-step__desc">
                Pilot trades, you earn. Pilot takes 10% of profit only. Withdraw anytime, no lockup.
            </div>
        </div>
    </div>

    <div class="pilot-preview__stats">
        <div class="pp-stat">
            <span class="pp-stat__num font-mono">{{ number_format($stats['active_followers']) }}</span>
            <span class="pp-stat__label">Active followers</span>
        </div>
        <div class="pp-stat">
            <span class="pp-stat__num font-mono">{{ $fmtAbbrev($stats['lifetime_earned']) }}</span>
            <span class="pp-stat__label">Earned by followers</span>
        </div>
        <div class="pp-stat">
            <span class="pp-stat__num font-mono">{{ $stats['verified_pilots'] }}</span>
            <span class="pp-stat__label">Verified Pilots</span>
        </div>
    </div>
</section>