@props(['product'])

@php($plans = $product->pricingPlans)

@if($plans->isNotEmpty())
    <div data-pricing {{ $attributes->class('bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6') }}>
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Pricing</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($plans as $plan)
                <div class="rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                    <h3 class="font-medium text-gray-900 dark:text-white">{{ $plan->name }}</h3>
                    <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">{{ $plan->formattedPrice() }}</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ $plan->period }}</p>
                    @if($plan->description)
                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">{{ $plan->description }}</p>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
@endif