{{-- 
    :::pilot-card slug="alpha-01"
    handle: "@alpha_01"
    display_name: "Alpha Pilot"
    return_30d: "18.4%"
    followers: 47
    strategy: "Balanced — moderate discount targets, session-diversified"
    since: "March 2026"
    :::
    
    Phase 1: renders static data passed via directive.
    Phase 2: when slug is provided, will pull live stats from PilotService.
--}}
@php
    $slug = $slug ?? null;
    $handle = $handle ?? ($slug ? '@' . $slug : '');
    $display_name = $display_name ?? 'Pilot';
    $return_30d = $return_30d ?? null;
    $followers = $followers ?? null;
    $strategy = $strategy ?? null;
    $since = $since ?? null;
@endphp

<div style="margin: 2rem 0; padding: 1.5rem; background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%); border: 1px solid #fed7aa; border-radius: 12px; display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap;">
    <div style="flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: #ffffff; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 600; font-size: 1.5rem;">
        {{ strtoupper(substr($display_name, 0, 1)) }}
    </div>
    <div style="flex: 1; min-width: 200px;">
        <div style="font-family: 'DM Sans', sans-serif; font-size: 1.0625rem; font-weight: 600; color: #0f172a;">
            {{ $display_name }}
            <span style="color: #94a3b8; font-weight: 400; font-size: 0.875rem; margin-left: 0.375rem;">{{ $handle }}</span>
        </div>
        @if($strategy)
            <div style="font-family: 'IBM Plex Serif', Georgia, serif; font-size: 0.9375rem; color: #475569; margin-top: 0.25rem; line-height: 1.5;">
                {{ $strategy }}
            </div>
        @endif
        @if($since)
            <div style="font-family: 'DM Sans', sans-serif; font-size: 0.75rem; color: #94a3b8; margin-top: 0.375rem; text-transform: uppercase; letter-spacing: 0.05em;">
                Piloting since {{ $since }}
            </div>
        @endif
    </div>
    <div style="display: flex; gap: 1.5rem; align-items: center; padding-left: 1rem; border-left: 1px solid #fed7aa;">
        @if($return_30d)
            <div style="text-align: center;">
                <div style="font-family: 'IBM Plex Mono', monospace; font-size: 1.5rem; font-weight: 600; color: #f97316; line-height: 1;">
                    {{ $return_30d }}
                </div>
                <div style="font-family: 'DM Sans', sans-serif; font-size: 0.6875rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.375rem;">
                    30d return
                </div>
            </div>
        @endif
        @if($followers !== null)
            <div style="text-align: center;">
                <div style="font-family: 'IBM Plex Mono', monospace; font-size: 1.5rem; font-weight: 600; color: #0f172a; line-height: 1;">
                    {{ $followers }}
                </div>
                <div style="font-family: 'DM Sans', sans-serif; font-size: 0.6875rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.375rem;">
                    Followers
                </div>
            </div>
        @endif
    </div>
</div>