{{--
    Pilot Card — shared across:
      - Dashboard "Top Pilots this week" strip (partials.pilot.top-pilots)
      - Pilots listing browse grid (pilot.listing)

    Receives:
      $pilot : array from PilotPresenter::forBrowse() with keys:
        id, name, initials, avatar_color, min_entry, trades_today,
        win_rate, generated_30d, sparkline_path, followers,
        avg_bid_low, avg_bid_high, bio, trading_style, profile_url,
        is_live, is_accepting_followers

    Conversion focus: name + win rate + 30D profit + followers + min entry + follow.
    Avg bid is intentionally omitted — followers mirror the pilot, they don't bid
    themselves, so bid range is internal mechanic, not follower-facing info.
--}}
@php
    // Win rate visual split: 94.5 -> "94" + ".5%"
    // substr(_, 2) skips the leading "0." in number_format output
    $rateWhole   = (int) floor($pilot['win_rate']);
    $rateDecimal = $pilot['win_rate'] - $rateWhole;
    $rateSuffix  = $rateDecimal > 0
        ? '.' . substr(number_format($rateDecimal, 1), 2) . '%'
        : '%';

    // Money + integer formatters
    $generated = '+$' . number_format((float) $pilot['generated_30d'], 2);
    $minEntry  = '$' . number_format((float) $pilot['min_entry'], 0);
    $followers = number_format((int) $pilot['followers']);

    $color = in_array($pilot['avatar_color'], ['orange','purple','red'], true)
        ? $pilot['avatar_color']
        : 'orange';
    $accepting = (bool) $pilot['is_accepting_followers'];

    // Hex map for SVG (CSS vars don't render reliably in SVG attributes)
    $colorHex = match($color) {
        'orange' => '#f97316',
        'purple' => '#660066',
        'red'    => '#ec595a',
        default  => '#f97316',
    };
@endphp

<article class="pilot-card pilot-card--c-{{ $color }}"
         data-pilot-id="{{ $pilot['id'] }}"
         data-min-entry="{{ $minEntry }}"
         data-color="{{ $color }}">
    <div class="pilot-card__top">
        <div class="pilot-card__id">
            <div class="pilot-card__avatar pilot-card__avatar--{{ $color }}">
                {{ $pilot['initials'] }}
            </div>
            <div>
                <div class="pilot-card__name">
                    {{ $pilot['name'] }}
                    @if ($pilot['is_live'])
                        <span class="live-dot" aria-label="Live"></span>
                    @endif
                </div>
                <div class="pilot-card__tier">Min {{ $minEntry }}</div>
            </div>
        </div>
        <div class="pilot-card__rate">
            <div class="pilot-card__rate-value">
                {{ $rateWhole }}<small>{{ $rateSuffix }}</small>
            </div>
            <div class="pilot-card__rate-label">30d Win</div>
        </div>
    </div>

    <div class="pilot-card__spark">
        <svg viewBox="0 0 200 32" preserveAspectRatio="none" aria-hidden="true">
            <defs>
                <linearGradient id="sp-grad-{{ $pilot['id'] }}" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%"   stop-color="{{ $colorHex }}" stop-opacity="0.32"/>
                    <stop offset="100%" stop-color="{{ $colorHex }}" stop-opacity="0"/>
                </linearGradient>
            </defs>
            {{-- Filled area below the line (gradient fade) --}}
            <path d="{{ $pilot['sparkline_path'] }} L200,32 L0,32 Z"
                  fill="url(#sp-grad-{{ $pilot['id'] }})"
                  stroke="none" />
            {{-- Stroke line on top --}}
            <path d="{{ $pilot['sparkline_path'] }}"
                  fill="none"
                  stroke="var(--{{ $color }})"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round" />
        </svg>
    </div>

    <div class="pilot-card__meta">
        <div>
            <div class="pilot-card__meta-label">30D Profit</div>
            <div class="pilot-card__meta-value">{{ $generated }}</div>
        </div>
        <div>
            <div class="pilot-card__meta-label">Followers</div>
            <div class="pilot-card__meta-value">{{ $followers }}</div>
        </div>
    </div>

    @php $following = (bool) ($isAlreadyFollowing ?? false); @endphp

    @if ($following)
        <a href="{{ route('pilots.show', $pilot['id']) }}"
           class="follow-btn follow-btn--following">
            <span class="follow-btn__main">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="3"
                     stroke-linecap="round" stroke-linejoin="round" style="margin-right:6px;vertical-align:-1px;">
                    <path d="M5 13l4 4L19 7" />
                </svg>
                Following
            </span>
            <span class="follow-btn__arrow" aria-hidden="true">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2.5"
                     stroke-linecap="round" stroke-linejoin="round">
                    <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
            </span>
        </a>
    @elseif ($accepting)
        <a href="{{ route('pilots.show', $pilot['id']) }}"
           class="follow-btn follow-btn--{{ $color }}">
            <span class="follow-btn__main">Follow with {{ $minEntry }}</span>
            <span class="follow-btn__arrow" aria-hidden="true">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2.5"
                     stroke-linecap="round" stroke-linejoin="round">
                    <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
            </span>
        </a>
    @else
        <span class="follow-btn follow-btn--{{ $color }} follow-btn--locked"
              aria-disabled="true">
            <span class="follow-btn__main">Opening soon</span>
            <span class="follow-btn__arrow" aria-hidden="true">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2.5"
                     stroke-linecap="round" stroke-linejoin="round">
                    <rect x="4" y="11" width="16" height="10" rx="2" />
                    <path d="M8 11V7a4 4 0 0 1 8 0v4" />
                </svg>
            </span>
        </span>
    @endif
</article>