@extends('layouts.frontend.master')

@section('title', $sponsorship->title . ' - Sponsorship Details')

@push('css')
    <style>
        .hero-section {
            background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
            padding: 4rem 0;
        }
        .sponsorship-card {
            background: #fff;
            border-radius: 1rem;
            box-shadow: 0 8px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        .sponsorship-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 28px rgba(0,0,0,0.08);
        }
        .most-popular-badge {
            position: absolute;
            top: -10px;
            right: -10px;
            background: #f97316;
            color: #fff;
            font-weight: 600;
            font-size: 0.75rem;
            padding: 6px 10px;
            border-radius: 9999px;
        }
        .price-tag {
            font-size: 2rem;
            font-weight: 700;
            color: #1e3a8a;
        }
    </style>
@endpush

@section('content')

    <section class="hero-section text-center">
        <div class="container">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-3">
                {{ $sponsorship->title }}
            </h2>
            <p class="text-gray-600 text-lg max-w-3xl mx-auto">
                Sponsorship & Advertisement package with BAU 2001–2002 Alumni Association
            </p>
        </div>
    </section>

    <section class="py-10 bg-gray-50">
        <div class="container">


            <div class="sponsorship-card relative overflow-hidden p-8">

                @if($sponsorship->is_most_popular)
                    <span class="most-popular-badge">🔥 Most Popular</span>
                @endif

                <div class="flex flex-col md:flex-row gap-6">
                    {{-- Left: Icon + Description + Ads --}}
                    <div class="flex-1">
                        @if($sponsorship->icon)
                            <img src="{{ asset('storage/'.$sponsorship->icon) }}" alt="{{ $sponsorship->title }}" class="w-24 h-24 mb-4">
                        @endif

                        <p class="text-gray-700 leading-relaxed mb-6">
                            {!! nl2br($sponsorship->description) !!}
                        </p>

                        {{-- Advertisements --}}
                        @if($sponsorship->advertisements->count() > 0)
                            <div class="mt-6">
                                <h4 class="text-lg font-semibold text-gray-800 mb-3">Key Features:</h4>
                                <ul class="list-disc list-inside text-gray-700">
                                    @foreach($sponsorship->advertisements as $advertisement)
                                        <li>
                                            @if($advertisement->category)
                                                <span class="font-semibold text-blue-600">{{ $advertisement->category->name }}:</span>
                                            @endif
                                            {{ $advertisement->advertisement_name }}
                                            @if($advertisement->quantity > 1)
                                                <span class="text-gray-500">(x{{ $advertisement->quantity }})</span>
                                            @endif
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection