@extends('layouts.app')
@section('title', 'Packages — De Eventa')

@section('content')
<div class="pt-20">

<section class="py-20 bg-dark-800 text-center">
    <div class="max-w-4xl mx-auto px-4">
        <p class="section-subtitle">Pricing</p>
        <h1 class="section-title mb-4">Our Packages</h1>
        <div class="gold-divider"></div>
        <p class="text-dark-200 text-lg">Transparent pricing for every celebration.</p>
    </div>
</section>

<section class="py-20 bg-dark-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @forelse($packages as $pkg)
            <div class="card-dark p-8 relative flex flex-col {{ $pkg->badge ? 'border-gold-500' : '' }}">
                @if($pkg->badge)
                <span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-gold-500 text-dark-900 text-xs font-bold px-4 py-1 uppercase tracking-wider">
                    {{ $pkg->badge }}
                </span>
                @endif
                <div class="text-center mb-8">
                    <h3 class="font-serif text-2xl text-white font-bold mb-4">{{ $pkg->name }}</h3>
                    <div class="w-12 h-0.5 bg-gold-500 mx-auto mb-4"></div>
                    <span class="text-gold-500 font-serif text-5xl font-bold">
                        ৳{{ number_format($pkg->price) }}
                    </span>
                </div>
                <ul class="space-y-3 mb-8 flex-1">
                    @foreach($pkg->features ?? [] as $feature)
                    <li class="flex items-start gap-3 text-dark-200 text-sm">
                        <svg class="w-4 h-4 text-gold-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        {{ is_array($feature) ? $feature['feature'] : $feature }}
                    </li>
                    @endforeach
                </ul>
                <a href="{{ route('services') }}#booking-form"
                   class="{{ $pkg->badge ? 'btn-gold' : 'btn-outline' }} text-center block mt-auto">
                    Select Package
                </a>
            </div>
            @empty
            <div class="md:col-span-3 text-center text-dark-400 py-20">
                Packages coming soon. <a href="{{ route('contact') }}" class="text-gold-500">Contact us</a> for pricing.
            </div>
            @endforelse
        </div>

        <div class="mt-16 card-dark p-8 text-center max-w-2xl mx-auto">
            <h3 class="font-serif text-2xl text-white font-bold mb-3">Need a Custom Package?</h3>
            <p class="text-dark-300 mb-6">Every event is unique. Let us build a package tailored exactly to your needs.</p>
            <a href="{{ route('contact') }}" class="btn-gold">Talk to Us</a>
        </div>
    </div>
</section>

</div>
@endsection