{{-- Three plan cards (design: Pricing). $plans grouped by tier; $interval 'yearly'|'monthly'. --}}
@php
  $pick = fn ($tier) => ($plans[$tier] ?? collect())->firstWhere('billing_interval', \App\Enums\BillingInterval::Yearly) ?? ($plans[$tier] ?? collect())->first();
  $free = $pick('free'); $pro = $pick('pro'); $biz = $pick('business');
  $proMonthly = ($plans['pro'] ?? collect())->firstWhere('billing_interval', \App\Enums\BillingInterval::Monthly);
  $bizMonthly = ($plans['business'] ?? collect())->firstWhere('billing_interval', \App\Enums\BillingInterval::Monthly);
@endphp
<div class="app-grid-3" style="gap:24px;align-items:start">
  @if ($free)
  <div class="iq-card iq-plan">
    <div class="iq-row" style="justify-content:space-between"><span style="font-weight:600;font-size:16px">{{ $free->name }}</span></div>
    <div class="price"><b>{{ $free->formattedPrice() }}</b><span>forever</span></div>
    <p class="iq-sub" style="margin:0;font-size:14px">{{ $free->description }}</p>
    <a class="iq-btn iq-btn-secondary iq-btn-block" href="{{ route('register') }}">Start free</a>
    <ul>@foreach ($free->features ?? [] as $f)<li><x-iq.icon name="check" />{{ $f }}</li>@endforeach</ul>
  </div>
  @endif
  @if ($pro)
  <div class="iq-card iq-plan is-featured">
    <div class="iq-row" style="justify-content:space-between"><span style="font-weight:600;font-size:16px">{{ $pro->name }}</span><span class="iq-badge iq-badge-pro">Most popular</span></div>
    <div class="price"><b data-m="{{ $proMonthly?->formattedPrice() }}" data-y="{{ $pro->monthlyEquivalent() }}">{{ $pro->monthlyEquivalent() }}</b><span data-pm="/ month, billed monthly" data-py="/ month · {{ $pro->formattedPrice() }} billed yearly">/ month · {{ $pro->formattedPrice() }} billed yearly</span></div>
    <p class="iq-sub" style="margin:0;font-size:14px">{{ $pro->description }}</p>
    <a class="iq-btn iq-btn-primary iq-btn-block" data-plan-link data-m="{{ $proMonthly ? route('checkout.show', $proMonthly->slug) : '' }}" data-y="{{ route('checkout.show', $pro->slug) }}" href="{{ route('checkout.show', $pro->slug) }}">Upgrade to Pro</a>
    <ul>@foreach ($pro->features ?? [] as $f)<li><x-iq.icon name="check" />{{ $f }}</li>@endforeach</ul>
  </div>
  @endif
  @if ($biz)
  <div class="iq-card iq-plan">
    <div class="iq-row" style="justify-content:space-between"><span style="font-weight:600;font-size:16px">{{ $biz->name }}</span>@unless($biz->is_active)<span class="iq-badge">Coming soon</span>@endunless</div>
    <div class="price"><b data-m="{{ $bizMonthly?->formattedPrice() }}" data-y="{{ $biz->monthlyEquivalent() }}">{{ $biz->monthlyEquivalent() }}</b><span data-pm="/ month, billed monthly" data-py="/ month, billed yearly">/ month, billed yearly</span></div>
    <p class="iq-sub" style="margin:0;font-size:14px">{{ $biz->description }}</p>
    @if ($biz->is_active)
      <a class="iq-btn iq-btn-secondary iq-btn-block" href="{{ route('checkout.show', $biz->slug) }}">Choose Business</a>
    @else
      <button class="iq-btn iq-btn-secondary iq-btn-block" disabled>Join the waitlist</button>
    @endif
    <ul>@foreach ($biz->features ?? [] as $f)<li><x-iq.icon name="check" />{{ $f }}</li>@endforeach</ul>
  </div>
  @endif
</div>