@extends('layouts.marketing')

@section('title', __('marketing.occasions.title', ['type' => ucfirst($type)]))

@section('content')
@php
    Log::info('Occasions View Debug', [
        'type' => $type ?? 'null',
        'keyType' => $type ? str_replace('-', '', $type) : 'null',
        'locale' => app()->getLocale()
    ]);
    $keyType = str_replace('-', '', $type ?? '');
@endphp
    <!-- Hero for Occasion -->
    <section class="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] text-white py-20 px-4">
        <div class="container mx-auto text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-4">{{ __('marketing.occasions.hero_title', ['type' => ucfirst($type)]) }}</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">{{ __('marketing.occasions.hero_description', ['type' => ucfirst($type)]) }}</p>
            <a href="{{ route('packages') }}" class="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition">{{ __('marketing.occasions.cta') }}</a>
        </div>
    </section>

    <!-- Occasion Specific Content -->
    <section class="py-20 px-4 bg-white">
        <div class="container mx-auto max-w-4xl">
            @if($type === 'weddings')
                <h2 class="text-3xl font-bold text-center mb-12">{{ __('marketing.occasions.weddings.title') }}</h2>
                <p class="text-lg mb-8 text-center">{{ __('marketing.occasions.weddings.description') }}</p>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <img src="https://images.unsplash.com/photo-1515934751635-c81c6bc9a2d8?w=600&h=400&fit=crop" alt="{{ __('marketing.occasions.weddings.image_alt') }}" class="rounded-lg shadow-lg">
                    </div>
                    <div class="space-y-4">
                        <h3 class="text-2xl font-semibold">{{ __('marketing.occasions.weddings.benefits_title') }}</h3>
                        <ul class="space-y-2">
                            <li>• {{ __('marketing.occasions.weddings.benefit1') }}</li>
                            <li>• {{ __('marketing.occasions.weddings.benefit2') }}</li>
                            <li>• {{ __('marketing.occasions.weddings.benefit3') }}</li>
                            <li>• {{ __('marketing.occasions.weddings.benefit4') }}</li>
                        </ul>
                    </div>
                </div>
            @elseif($type === 'birthdays')
                <h2 class="text-3xl font-bold text-center mb-12">{{ __('marketing.occasions.birthdays.title') }}</h2>
                <p class="text-lg mb-8 text-center">{{ __('marketing.occasions.birthdays.description') }}</p>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=600&h=400&fit=crop" alt="{{ __('marketing.occasions.birthdays.image_alt') }}" class="rounded-lg shadow-lg">
                    </div>
                    <div class="space-y-4">
                        <h3 class="text-2xl font-semibold">{{ __('marketing.occasions.birthdays.benefits_title') }}</h3>
                        <ul class="space-y-2">
                            <li>• {{ __('marketing.occasions.birthdays.benefit1') }}</li>
                            <li>• {{ __('marketing.occasions.birthdays.benefit2') }}</li>
                            <li>• {{ __('marketing.occasions.birthdays.benefit3') }}</li>
                            <li>• {{ __('marketing.occasions.birthdays.benefit4') }}</li>
                        </ul>
                    </div>
                </div>
            @elseif($type === 'corporate-events')
                <h2 class="text-3xl font-bold text-center mb-12">{{ __('marketing.occasions.corporate.title') }}</h2>
                <p class="text-lg mb-8 text-center">{{ __('marketing.occasions.corporate.description') }}</p>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=600&h=400&fit=crop" alt="{{ __('marketing.occasions.corporate.image_alt') }}" class="rounded-lg shadow-lg">
                    </div>
                    <div class="space-y-4">
                        <h3 class="text-2xl font-semibold">{{ __('marketing.occasions.corporate.benefits_title') }}</h3>
                        <ul class="space-y-2">
                            <li>• {{ __('marketing.occasions.corporate.benefit1') }}</li>
                            <li>• {{ __('marketing.occasions.corporate.benefit2') }}</li>
                            <li>• {{ __('marketing.occasions.corporate.benefit3') }}</li>
                            <li>• {{ __('marketing.occasions.corporate.benefit4') }}</li>
                        </ul>
                    </div>
                </div>
            @elseif($type === 'family-celebrations')
                <h2 class="text-3xl font-bold text-center mb-12">{{ __('marketing.occasions.family.title') }}</h2>
                <p class="text-lg mb-8 text-center">{{ __('marketing.occasions.family.description') }}</p>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop" alt="{{ __('marketing.occasions.family.image_alt') }}" class="rounded-lg shadow-lg">
                    </div>
                    <div class="space-y-4">
                        <h3 class="text-2xl font-semibold">{{ __('marketing.occasions.family.benefits_title') }}</h3>
                        <ul class="space-y-2">
                            <li>• {{ __('marketing.occasions.family.benefit1') }}</li>
                            <li>• {{ __('marketing.occasions.family.benefit2') }}</li>
                            <li>• {{ __('marketing.occasions.family.benefit3') }}</li>
                            <li>• {{ __('marketing.occasions.family.benefit4') }}</li>
                        </ul>
                    </div>
                </div>
            @else
                <p class="text-center">{{ __('marketing.occasions.not_found') }} <a href="{{ route('marketing.home', ['locale' => app()->getLocale()]) }}">{{ __('nav.home') }}</a>.</p>
            @endif
        </div>
    </section>
@endsection