@props(['plan'])

<div class="col-xl-3 col-lg-6 col-md-6 col-12 mb-4" data-aos="fade-up">
    <div class="card h-100 shadow-sm border rounded-4 overflow-hidden d-flex flex-column justify-content-between p-4 {{ $plan->category === 'professional' && $plan->slug === 'professional-lifetime' ? 'border-primary border-2' : '' }}">
        <div>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge bg-primary-subtle text-primary text-uppercase px-3 py-2 fw-semibold">{{ $plan->category }}</span>
                @if($plan->category === 'professional' && $plan->slug === 'professional-lifetime')
                    <span class="badge bg-warning text-dark"><i class="icofont-star"></i> Featured</span>
                @endif
            </div>

            <h4 class="fw-bold mb-2">{{ $plan->name }}</h4>
            <p class="text-muted small mb-4">{{ $plan->description }}</p>

            <div class="mb-4">
                <span class="fs-2 fw-bold text-dark">₹{{ number_format($plan->fee, 0) }}</span>
                <span class="text-muted small"> + 18% GST</span>
                <div class="text-muted small mt-1">Total: ₹{{ number_format($plan->total_fee, 2) }}</div>
            </div>

            <div class="border-top pt-3 mb-4">
                <div class="fw-semibold small text-uppercase text-muted mb-2">Entitlements &amp; Benefits:</div>
                <ul class="list-unstyled mb-0">
                    @if(is_array($plan->benefits))
                        @foreach(array_slice($plan->benefits, 0, 4) as $benefit)
                            <li class="d-flex align-items-start mb-2 small">
                                <i class="icofont-check-circled text-success me-2 mt-1"></i>
                                <span>{{ $benefit }}</span>
                            </li>
                        @endforeach
                    @endif
                </ul>
            </div>
        </div>

        <div class="pt-3 border-top text-center">
            <a href="{{ route('membership.apply', ['plan' => $plan->id]) }}" class="default__button w-100">
                Apply for Plan
            </a>
        </div>
    </div>
</div>