<div class="row g-4">
    @forelse($packages as $package)
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden position-relative hover-lift">
                <!-- Accent Bar -->
                <div class="position-absolute top-0 start-0 w-100" style="height: 6px; background: {{ $package->badge_color }};"></div>
                
                <div class="card-body p-4 pt-5">
                    <div class="text-center mb-4">
                        <span class="badge rounded-pill mb-3 px-3 py-2" style="background: {{ $package->badge_color }}15; color: {{ $package->badge_color }}; border: 1px solid {{ $package->badge_color }}33; font-weight: 600; font-size: 0.8rem;">
                            {{ $package->badge_text }}
                        </span>
                        <h4 class="fw-bold text-dark mb-1">{{ $package->name }}</h4>
                        <p class="text-muted small mb-0">{{ $package->description }}</p>
                    </div>

                    <div class="bg-light rounded-4 p-4 text-center mb-4">
                        <!-- INR Price -->
                        <div x-show="currency === 'INR'">
                            <h2 class="mb-0 fw-bold text-dark">
                                ₹{{ number_format($package->price, 0) }}
                            </h2>
                            <div class="text-muted small fw-medium mt-1">
                                + GST (18%)
                            </div>
                        </div>

                        <!-- USD Price -->
                        <div x-show="currency === 'USD'">
                            <h2 class="mb-0 fw-bold text-dark">
                                ${{ number_format($package->price_usd, 0) }}
                            </h2>
                            <div class="text-success small fw-medium mt-1">
                                (No GST)
                            </div>
                        </div>

                        <div class="mt-2 text-orange fw-bold small">
                            Valid for {{ $package->duration_days }} days
                        </div>
                    </div>

                    <ul class="list-unstyled mb-0">
                        <li class="mb-3 d-flex align-items-center">
                            <div class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 24px; height: 24px;">
                                <i class="bi bi-check2 text-success" style="font-size: 0.9rem;"></i>
                            </div>
                            <span class="text-dark small fw-medium">Up to <strong class="text-dark">{{ $package->max_products }}</strong> products</span>
                        </li>
                        <li class="mb-3 d-flex align-items-center">
                            <div class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 24px; height: 24px;">
                                <i class="bi bi-check2 text-success" style="font-size: 0.9rem;"></i>
                            </div>
                            <span class="text-dark small fw-medium">Page <strong class="text-dark">{{ $package->page_position }}</strong> placement</span>
                        </li>
                        <li class="mb-3 d-flex align-items-center">
                            <div class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 24px; height: 24px;">
                                <i class="bi bi-check2 text-success" style="font-size: 0.9rem;"></i>
                            </div>
                            <span class="text-dark small fw-medium">Priority Level <strong class="text-dark">{{ $package->priority_level }}/10</strong></span>
                        </li>
                        <li class="mb-0 d-flex align-items-center">
                            <div class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 24px; height: 24px;">
                                <i class="bi bi-check2 text-success" style="font-size: 0.9rem;"></i>
                            </div>
                            <span class="text-dark small fw-medium">Advanced Analytics</span>
                        </li>
                    </ul>
                </div>
                
                <div class="card-footer bg-transparent border-0 p-4 pt-0">
                    @auth
                        <a :href="'{{ route('seller.promotions.select-product', $package) }}?currency=' + currency" class="btn btn-primary-gradient w-100 py-2 rounded-3 shadow-sm">
                            Choose Plan
                        </a>
                    @else
                        <a href="{{ route('login') }}" class="btn btn-primary-gradient w-100 py-2 rounded-3 shadow-sm">
                            Login to Promote
                        </a>
                    @endauth
                </div>
            </div>
        </div>
    @empty
        <div class="col-12">
            <div class="card border-0 shadow-sm rounded-4 p-5 text-center">
                <i class="bi bi-info-circle text-muted fs-1 mb-3"></i>
                <h5 class="text-muted">No promotion packages available.</h5>
                <p class="text-muted mb-0">Please check back later for exciting offers.</p>
            </div>
        </div>
    @endforelse
</div>

<style>
    .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; }
    .text-orange { color: #f97316; }
</style>
