{{-- Canonical pricing card grid. Included by BOTH the landing page (welcome)
     and /pricing so the two can never drift out of sync — edit here once. --}}
<div class="mt-14 grid gap-px sm:grid-cols-2 lg:grid-cols-4" style="background: var(--rule);">
    @foreach($plans as $plan)
        @php $featured = strtolower($plan->name) === 'starter'; @endphp
        <div class="flex flex-col p-8" style="background: {{ $featured ? 'var(--paper)' : 'var(--surface)' }};">
            <div class="flex items-baseline justify-between gap-3">
                <h2 class="display text-xl" style="font-variation-settings: 'wdth' 92;">{{ $plan->name }}</h2>
                @if($featured)
                    <span class="pill pill-stencil shrink-0">Most shops</span>
                @endif
            </div>

            <p class="mt-6 flex items-baseline gap-1.5">
                @if($plan->isFree())
                    <span class="display text-5xl">Free</span>
                    <span class="text-sm" style="color: var(--muted);">forever</span>
                @else
                    @php $dollars = (int) floor($plan->price); $cents = str_pad((string) round(($plan->price - $dollars) * 100), 2, '0', STR_PAD_LEFT); @endphp
                    <span class="display text-5xl">${{ $dollars }}<span class="align-top text-2xl" style="line-height: 1;">.{{ $cents }}</span></span>
                    <span class="text-sm" style="color: var(--muted);">/month</span>
                @endif
            </p>

            @if($plan->description)
                <p class="mt-3 text-sm leading-relaxed" style="color: var(--muted);">{{ $plan->description }}</p>
            @endif

            <ul class="mt-7 flex-1 space-y-2.5">
                @foreach((array) $plan->features as $feature)
                    <li class="flex gap-2.5 text-sm" style="color: var(--ink-soft);">
                        <svg viewBox="0 0 16 16" fill="none" class="mt-1 size-3.5 shrink-0" aria-hidden="true">
                            <path d="M2.5 8.5l3.5 3.5 7.5-9" stroke="var(--stencil)" stroke-width="2" stroke-linecap="square"/>
                        </svg>
                        <span>{{ $feature }}</span>
                    </li>
                @endforeach
            </ul>

            <a href="{{ route('register') }}"
               class="btn {{ $featured ? 'btn-primary' : 'btn-outline' }} mt-8 w-full">
                {{ $plan->isFree() ? 'Start free' : 'Start with '.$plan->name }}
            </a>
        </div>
    @endforeach
</div>