@props([
    'title',
    'subtitle',
    'prices',
    'additionalInfo' => false,
    'actionText',
    'icon' => false,
])
<div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl relative service-card"> 
    <div class="bg-gradient-to-r from-blue-500 to-purple-600 p-1">
        <div class="bg-white p-4 rounded-t-lg">
            <h3 class="text-2xl font-bold text-gray-800 mb-2">{{ $title ?? '' }}</h3>
            <div class="flex gap-4">
                <div>
                {!! $icon ?? '' !!}
                </div>
                <p class="text-gray-600 text-sm mb-4">
                    {{ $subtitle ?? '' }}
                </p>
            </div>
            <div class="space-y-3">
                @foreach ($prices as $price)
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500">{{ $price['quantity'] }}</span>
                        <div>
                            <span class="text-gray-400 line-through mr-2">{{ $price['original'] ? '$'.$price['original'] : '' }}</span>
                            <span class="text-lg font-bold text-green-600">@if(is_numeric($price['discounted'])) $ @endif {{ $price['discounted'] }}</span>
                        </div>
                    </div>
                @endforeach
            </div>
            @if ($additionalInfo)
                <p class="text-sm text-gray-600 mt-4 italic">{{ $additionalInfo }}</p>
            @endif
        </div>
    </div>
    <div class="p-4 bg-gray-50">
        <div class="group">
            <button class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg group-hover:bg-purple-600 transition duration-300 flex items-center justify-center">
                <span>{{ $actionText }}</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform group-hover:translate-x-1 transition duration-300" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
            </button>
        </div>
    </div>
    <div class="absolute top-0 right-0 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
        50% OFF
    </div>
</div>