{{--
  partials/pilot/next-move-hero.blade.php

  State-aware "Your Next Move" hero card. Rendered between the wins ticker
  and the wallet section on the dashboard.

  Required variables:
    $state -- string, one of: new | ictp | balance | following | followmulti | trader
    $data  -- array, state-specific payload from PilotHeroStateService::forUser()

  CSS comes from public/pilot/dashboard.css (hero blocks already present in
  prototype; appended in deploy step). No state-visibility classes are
  emitted -- the server renders one state at a time.

  Routes assumed (verify before deploy):
    /complete-kyc       -- KYC verification page
    /deposit-funds      -- main deposit page
    /bid-marketplace    -- manual trading marketplace
    /pilots             -- pilot listing
    /pilots/{id}        -- pilot profile / manage follow
--}}

@php
    $state = $state ?? 'ictp';
    $data  = $data  ?? [];

    // Money formatters
    $fmtMoney = fn($v) => '$' . number_format((float) $v, 2, '.', ',');
    $fmtMoneySigned = fn($v) => ((float) $v > 0 ? '+' : '') . $fmtMoney($v);
@endphp

@switch($state)

  {{-- ─────────────────────────────────────────────────────────────
       STATE: NEW (KYC not verified)
       ───────────────────────────────────────────────────────────── --}}
  @case('new')
    <section class="hero hero--new">
      <div class="hero__bg"></div>
      <div class="hero__content">
        <div class="hero__eyebrow">
          <span class="hero__eyebrow-dot"></span>
          Get started
        </div>
        <h1 class="hero__title">Start trading. <span>Pick a Pilot.</span></h1>
        <p class="hero__sub">
          Verified traders trade. You earn. Pick a Pilot, deposit USDT, withdraw anytime.
        </p>
        <div class="hero__cta-row">
          <a href="/deposit-funds" class="btn-primary">
            Deposit funds
            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
          </a>
          <a href="/pilots" class="btn-ghost">Browse pilots</a>
        </div>
        <div class="hero__trust">
          <div class="hero__trust-item">
            <span class="hero__trust-num">3 min</span>
            <span class="hero__trust-label">USDT deposit</span>
          </div>
          <div class="hero__trust-divider"></div>
          <div class="hero__trust-item">
            <span class="hero__trust-num">10%</span>
            <span class="hero__trust-label">Fee on profits</span>
          </div>
          <div class="hero__trust-divider"></div>
          <div class="hero__trust-item">
            <span class="hero__trust-num">No lockup</span>
            <span class="hero__trust-label">Withdraw anytime</span>
          </div>
        </div>
      </div>
    </section>
    @break

  {{-- ─────────────────────────────────────────────────────────────
       STATE: ICTP (KYC done, $50 ICTP, no main balance)
       ───────────────────────────────────────────────────────────── --}}
  @case('ictp')
    <section class="hero hero--ictp">
      <div class="hero__bg"></div>
      <div class="hero__content">
        <div class="hero__eyebrow">
          <span class="hero__eyebrow-dot"></span>
          Your next move
        </div>
        <h1 class="hero__title">Earn while a <span>Pilot trades</span> for you.</h1>
        <p class="hero__sub">
          Deposit USDT, follow a verified Pilot, withdraw anytime. The Pilot does the work.
        </p>
        <div class="hero__cta-row">
          <a href="/deposit-funds" class="btn-primary">
            Deposit funds
            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
          </a>
          <a href="/pilots" class="btn-ghost">Browse pilots</a>
        </div>
      </div>
    </section>
    @break

  {{-- ─────────────────────────────────────────────────────────────
       STATE: BALANCE (main balance, no bids, no follows)
       ───────────────────────────────────────────────────────────── --}}
  @case('balance')
    @php $mainBal = (float) ($data['main_balance'] ?? 0); @endphp
    <section class="hero hero--balance">
      <div class="hero__bg"></div>
      <div class="hero__content">
        <div class="hero__eyebrow">
          <span class="hero__eyebrow-dot"></span>
          You're ready
        </div>
        <h1 class="hero__title">Pick a Pilot to <span>start earning</span></h1>
        <p class="hero__sub">
          Your <strong class="font-mono">{{ $fmtMoney($mainBal) }}</strong> is ready. Pilot Mode is the easiest way to put it to work. Trade markets manually if you prefer.
        </p>
        <div class="hero__cta-row">
          <a href="/pilots" class="btn-primary">
            Browse Pilots
            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
          </a>
          <a href="/bid-marketplace" class="btn-ghost">Trade manually</a>
        </div>
      </div>
    </section>
    @break

  {{-- ─────────────────────────────────────────────────────────────
       STATE: FOLLOWING (exactly 1 active pilot follow)
       ───────────────────────────────────────────────────────────── --}}
  @case('following')
    @php
        $isEmpty       = (bool) ($data['empty'] ?? false);
        $pilotId       = (int) ($data['pilot_id'] ?? 0);
        $pilotName     = $data['pilot_name'] ?? 'Pilot';
        $pilotInitials = $data['pilot_initials'] ?? 'PT';
        $pilotColor    = $data['pilot_color'] ?? 'orange';
        $today         = (float) ($data['today_earnings'] ?? 0);
        $lifetime      = (float) ($data['lifetime'] ?? 0);
        $lifetimeT     = (int)   ($data['lifetime_trades'] ?? 0);
        $winRate       = $data['win_rate'] ?? null;
        $wallet        = (float) ($data['wallet'] ?? 0);
        $sparkline     = $data['sparkline'] ?? [];
        $totalTrades   = (int) ($data['total_trades'] ?? 0);
        $since         = $data['since'] ?? '';

        // Build sparkline SVG path from data points
        $svgPath = '';
        $fillPath = '';
        if (count($sparkline) > 1 && $totalTrades > 0) {
            $w = 320; $h = 60; $pad = 6;
            $maxV = max($sparkline);
            $minV = min($sparkline);
            $range = max(0.0001, $maxV - $minV);
            $count = count($sparkline);
            $pts = [];
            foreach ($sparkline as $i => $v) {
                $x = ($i / ($count - 1)) * $w;
                $y = $h - $pad - (($v - $minV) / $range) * ($h - 2 * $pad);
                $pts[] = round($x, 1) . ',' . round($y, 1);
            }
            $svgPath  = 'M' . implode(' L', $pts);
            $fillPath = $svgPath . ' L' . $w . ',' . $h . ' L0,' . $h . ' Z';
        }
    @endphp
    <section class="hero hero--following">
      <div class="hero__bg hero__bg--following"></div>
      <div class="hero__content">

        <div class="hero__following-id">
          <div class="hero__following-avatar hero__following-avatar--{{ $pilotColor }}">{{ $pilotInitials }}</div>
          <div>
            <div class="hero__eyebrow">Following</div>
            <div class="hero__following-name">{{ $pilotName }} <span class="live-dot"></span></div>
          </div>
          <a href="/pilots/{{ $pilotId }}" class="hero__manage">Manage</a>
        </div>

        <div class="hero__big-stat">
          <div class="hero__big-label">Today's earnings</div>
          <div class="hero__big-value font-mono">{{ $fmtMoneySigned($today) }}</div>
          <div class="hero__big-trend">
            @if ($totalTrades === 0)
              Active since {{ $since }} · waiting for first settlement
            @else
              Active since {{ $since }}
            @endif
          </div>
        </div>

        <div class="hero__stats-row">
          <div class="mini-stat">
            <div class="mini-stat__label">Lifetime</div>
            <div class="mini-stat__value font-mono {{ $lifetime > 0 ? 'up' : '' }}">{{ $fmtMoneySigned($lifetime) }}</div>
            <div class="mini-stat__sub">{{ $lifetimeT }} {{ $lifetimeT === 1 ? 'trade' : 'trades' }}</div>
          </div>
          <div class="mini-stat">
            <div class="mini-stat__label">Win rate</div>
            <div class="mini-stat__value font-mono">{{ $winRate !== null ? $winRate . '%' : '—' }}</div>
            <div class="mini-stat__sub">your trades</div>
          </div>
          <div class="mini-stat">
            <div class="mini-stat__label">Wallet</div>
            <div class="mini-stat__value font-mono">{{ $fmtMoney($wallet) }}</div>
            <div class="mini-stat__sub">following amount</div>
          </div>
        </div>

        @if ($svgPath !== '')
        <div class="hero__following-chart">
          <svg viewBox="0 0 320 60" preserveAspectRatio="none">
            <defs>
              <linearGradient id="followChart" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#f97316" stop-opacity="0.3"/>
                <stop offset="100%" stop-color="#f97316" stop-opacity="0"/>
              </linearGradient>
            </defs>
            <path d="{{ $fillPath }}" fill="url(#followChart)"/>
            <path d="{{ $svgPath }}" fill="none" stroke="#f97316" stroke-width="2"/>
          </svg>
        </div>
        @endif

      </div>
    </section>
    @break

  {{-- ─────────────────────────────────────────────────────────────
       STATE: FOLLOWMULTI (2+ active pilot follows)
       ───────────────────────────────────────────────────────────── --}}
  @case('followmulti')
    @php
        $count       = (int)   ($data['follow_count'] ?? 0);
        $todayTotal  = (float) ($data['today_total'] ?? 0);
        $lifeTotal   = (float) ($data['lifetime_total'] ?? 0);
        $walletTotal = (float) ($data['wallets_total'] ?? 0);
        $rows        = $data['rows'] ?? [];
        $totalTrades = (int) ($data['total_trades'] ?? 0);
    @endphp
    <section class="hero hero--following-multi">
      <div class="hero__bg hero__bg--following"></div>
      <div class="hero__content">

        <div class="hero__multi-head">
          <div>
            <div class="hero__eyebrow">Following {{ $count }} {{ $count === 1 ? 'pilot' : 'pilots' }}</div>
            <div class="hero__multi-aggregate">
              <span class="hero__multi-today font-mono">{{ $fmtMoneySigned($todayTotal) }}</span>
              <span class="hero__multi-today-label">
                @if ($totalTrades === 0)
                  waiting for first settlement
                @else
                  today across all pilots
                @endif
              </span>
            </div>
            <div class="hero__multi-sub">
              Lifetime <strong class="font-mono {{ $lifeTotal > 0 ? 'up' : '' }}">{{ $fmtMoneySigned($lifeTotal) }}</strong>
              · Wallets <strong class="font-mono">{{ $fmtMoney($walletTotal) }}</strong>
            </div>
          </div>
          <a href="/pilots" class="hero__manage">Manage all</a>
        </div>

        <div class="hero__follows-list">
          @foreach ($rows as $row)
            <a class="follow-row" href="/pilots/{{ $row['pilot_id'] }}">
              <span class="follow-row__avatar follow-row__avatar--{{ $row['color'] }}">{{ $row['initials'] }}</span>
              <span class="follow-row__name">{{ $row['name'] }} <span class="live-dot"></span></span>
              <span class="follow-row__today font-mono {{ $row['today'] > 0 ? 'up' : '' }}">{{ $fmtMoneySigned($row['today']) }}</span>
              <span class="follow-row__wallet font-mono">{{ $fmtMoney($row['wallet']) }}</span>
              <svg class="follow-row__arrow" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
            </a>
          @endforeach
        </div>

        <a href="/pilots" class="hero__follow-more">+ Follow another pilot</a>
      </div>
    </section>
    @break

  {{-- ─────────────────────────────────────────────────────────────
       STATE: TRADER (has bids, no active follows)
       ───────────────────────────────────────────────────────────── --}}
  @case('trader')
    @php
        $sessActive = (bool) ($data['session_active'] ?? false);
        $sessNum    = $data['session_number'] ?? null;
        $marketsN   = (int) ($data['markets_count'] ?? 0);
    @endphp
    <section class="hero hero--trader">
      <div class="trader-strip">
        <div class="trader-strip__left">
          <span class="trader-strip__dot"></span>
          <div>
            <div class="trader-strip__label">
              @if ($sessActive)
                Session {{ $sessNum }} active
              @else
                Sessions closed
              @endif
            </div>
            <div class="trader-strip__sub">
              {{ $marketsN }} {{ $marketsN === 1 ? 'market' : 'markets' }} available
            </div>
          </div>
        </div>
        <div class="trader-strip__actions">
          <a href="/pilots" class="btn-ghost">Follow a Pilot</a>
          <a href="/bid-marketplace" class="btn-primary">Browse markets</a>
        </div>
      </div>
    </section>
    @break

@endswitch