@extends('layouts.marketing')

@section('title', __('marketing.packages.title'))

@section('content')
<div class="min-h-screen bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Hero Section -->
        <div class="text-center mb-16">
            <h1 class="text-4xl font-bold text-gray-900 mb-4">
                {{ __('marketing.packages.hero_title') }}
            </h1>
            <p class="text-xl text-gray-600 mb-8">
                {{ __('marketing.packages.hero_description') }}
            </p>
            <a href="#endcustomer" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-semibold transition duration-300">
                {{ __('marketing.packages.cta_explore') }}
            </a>
        </div>

        <!-- Tabs for Package Types -->
        <div class="mb-12">
            <div class="border-b border-gray-200">
                <nav class="-mb-px flex space-x-8">
                    <a href="#endcustomer" class="tab-link whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-blue-500 text-blue-600">
                        {{ __('marketing.packages.tab_endcustomer') }}
                    </a>
                    <a href="#reseller" class="tab-link whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-gray-300 text-gray-500 hover:text-gray-700 hover:border-gray-300">
                        {{ __('marketing.packages.tab_reseller') }}
                    </a>
                </nav>
            </div>
        </div>

        <!-- Endcustomer Packages -->
        <section id="endcustomer" class="mb-16">
            <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">
                {{ __('marketing.packages.section_endcustomer') }}
            </h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($endcustomerPackages as $package)
                <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition duration-300">
                    <div class="text-center mb-4">
                        <h3 class="text-xl font-semibold text-gray-900">{{ $package->name }}</h3>
                        <div class="text-3xl font-bold text-blue-600 mt-2">
                            {{ $package->price }} €
                        </div>
                        <p class="text-sm text-gray-500 mt-1">{{ $package->price == 0 ? __('marketing.packages.free') : __('marketing.packages.one_time') }}</p>
                    </div>
                    <ul class="space-y-2 mb-6">
                        @if($package->max_photos)
                        <li class="flex items-center text-sm text-gray-700">
                            <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            {{ $package->max_photos }} {{ __('marketing.packages.max_photos') }}
                        </li>
                        @endif
                        @if($package->max_guests)
                        <li class="flex items-center text-sm text-gray-700">
                            <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            {{ $package->max_guests }} {{ __('marketing.packages.max_guests') }}
                        </li>
                        @endif
                        @if($package->gallery_days)
                        <li class="flex items-center text-sm text-gray-700">
                            <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            {{ $package->gallery_days }} {{ __('marketing.packages.gallery_days') }}
                        </li>
                        @endif
                        @if($package->features)
                            @php
                                $features = is_array($package->features) ? $package->features : (is_string($package->features) ? json_decode($package->features, true) : []);
                                $features = is_array($features) ? $features : [];
                            @endphp
                            @foreach($features as $feature => $enabled)
                                @if($enabled)
                                <li class="flex items-center text-sm text-gray-700">
                                    <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    {{ __('marketing.packages.feature_' . $feature) }}
                                </li>
                                @endif
                            @endforeach
                        @endif
                    </ul>
                    <a href="{{ route('packages', ['locale' => request()->route('locale') ?? app()->getLocale(), 'package_id' => $package->id]) }}" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-center font-semibold transition duration-300">
                        {{ __('marketing.packages.register_buy') }}
                    </a>
                </div>
                @endforeach
            </div>
        </section>

        <!-- Reseller Packages -->
        <section id="reseller" class="mb-16">
            <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">
                {{ __('marketing.packages.section_reseller') }}
            </h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($resellerPackages as $package)
                <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition duration-300">
                    <div class="text-center mb-4">
                        <h3 class="text-xl font-semibold text-gray-900">{{ $package->name }}</h3>
                        <div class="text-3xl font-bold text-blue-600 mt-2">
                            {{ $package->price }} € / {{ __('marketing.packages.year') }}
                        </div>
                        <p class="text-sm text-gray-500 mt-1">{{ __('marketing.packages.subscription') }}</p>
                    </div>
                    <ul class="space-y-2 mb-6">
                        @if($package->max_events_per_year)
                        <li class="flex items-center text-sm text-gray-700">
                            <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            {{ $package->max_events_per_year }} {{ __('marketing.packages.max_events_year') }}
                        </li>
                        @endif
                        @if($package->features)
                            @php
                                $features = is_array($package->features) ? $package->features : (is_string($package->features) ? json_decode($package->features, true) : []);
                                $features = is_array($features) ? $features : [];
                            @endphp
                            @foreach($features as $feature => $enabled)
                                @if($enabled)
                                <li class="flex items-center text-sm text-gray-700">
                                    <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    {{ __('marketing.packages.feature_' . $feature) }}
                                </li>
                                @endif
                            @endforeach
                        @endif
                    </ul>
                    <a href="{{ route('packages', ['locale' => request()->route('locale') ?? app()->getLocale(), 'package_id' => $package->id]) }}" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md text-center font-semibold transition duration-300">
                        {{ __('marketing.packages.register_subscribe') }}
                    </a>
                </div>
                @endforeach
            </div>
        </section>

        <!-- FAQ Section -->
        <section class="bg-white rounded-lg shadow-md p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">
                {{ __('marketing.packages.faq_title') }}
            </h2>
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <h3 class="font-semibold text-gray-900 mb-2">{{ __('marketing.packages.faq_q1') }}</h3>
                    <p class="text-gray-600">{{ __('marketing.packages.faq_a1') }}</p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 mb-2">{{ __('marketing.packages.faq_q2') }}</h3>
                    <p class="text-gray-600">{{ __('marketing.packages.faq_a2') }}</p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 mb-2">{{ __('marketing.packages.faq_q3') }}</h3>
                    <p class="text-gray-600">{{ __('marketing.packages.faq_a3') }}</p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 mb-2">{{ __('marketing.packages.faq_q4') }}</h3>
                    <p class="text-gray-600">{{ __('marketing.packages.faq_a4') }}</p>
                </div>
            </div>
        </section>

        <!-- CTA Section -->
        <div class="text-center mt-16">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">
                {{ __('marketing.packages.final_cta') }}
            </h2>
            <a href="/contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-semibold transition duration-300">
                {{ __('marketing.packages.contact_us') }}
            </a>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script @if(isset($cspNonce) || request()->attributes->get('csp_script_nonce')) nonce="{{ $cspNonce ?? request()->attributes->get('csp_script_nonce') }}" @endif>
document.addEventListener('DOMContentLoaded', function() {
    const tabLinks = document.querySelectorAll('.tab-link');
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = this.getAttribute('href');
            document.querySelectorAll('section').forEach(section => section.style.display = 'none');
            document.querySelector(target).style.display = 'block';
            tabLinks.forEach(l => l.classList.remove('border-blue-500', 'text-blue-600'));
            this.classList.add('border-blue-500', 'text-blue-600');
        });
    });
});
</script>
@endpush