@extends('photography.layouts.photography')

@section('title', 'Services & Pricing - Photography')

@php
    $theme = [
        'sectionBg' => 'bg-gray-900',
        'sectionBgAlt' => 'bg-gray-950',
        'cardBg' => 'bg-gray-900',
        'cardBorder' => 'border-gray-800',
        'textNormal' => 'text-white',
        'textSecondary' => 'text-gray-400',
        'accent' => 'text-amber-400',
        'accentBg' => 'bg-amber-500',
    ];
@endphp

@section('content')
    <!-- Hero -->
    <section class="relative py-20 md:py-32 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
        <div class="max-w-7xl mx-auto px-6 lg:px-8 text-center">
            <span
                class="inline-block px-4 py-2 rounded-full bg-amber-500/10 text-amber-400 text-sm font-medium mb-6 border border-amber-500/20 animate-on-scroll">
                ✦ Services & Pricing
            </span>
            <h1 class="font-display text-4xl md:text-6xl font-bold text-white mb-6 animate-on-scroll"
                style="transition-delay: 0.1s;">
                Photography <span
                    class="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500">Packages</span>
            </h1>
            <p class="text-xl text-gray-400 max-w-3xl mx-auto animate-on-scroll" style="transition-delay: 0.2s;">
                Choose the perfect photography package for your needs
            </p>
        </div>
    </section>

    <!-- Pricing Packages -->
    <section class="py-20 {{ $theme['sectionBg'] }}">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach ($packages as $index => $package)
                    <div class="relative p-8 {{ $theme['cardBg'] }} rounded-2xl border {{ $theme['cardBorder'] }} hover:border-amber-500/50 transition duration-500 animate-on-scroll {{ $package['popular'] ? 'ring-2 ring-amber-500' : '' }}"
                        style="transition-delay: {{ $index * 0.1 }}s;">
                        @if ($package['popular'])
                            <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
                                <span class="bg-amber-500 text-white text-xs font-bold px-4 py-1 rounded-full">Most
                                    Popular</span>
                            </div>
                        @endif

                        <div class="text-center mb-6">
                            <h3 class="text-xl font-semibold text-white mb-2">{{ $package['name'] }}</h3>
                            <div class="text-4xl font-bold text-amber-400">{{ $package['price'] }}</div>
                            <p class="text-gray-400 text-sm mt-2">{{ $package['description'] }}</p>
                        </div>

                        <ul class="space-y-4 mb-8">
                            @foreach ($package['features'] as $feature)
                                <li class="flex items-start text-gray-300 text-sm">
                                    @include('photography.partials.icon', [
                                        'name' => 'Check',
                                        'size' => 'w-5 h-5 mr-3 text-amber-400 flex-shrink-0 mt-0.5',
                                    ])
                                    {{ $feature }}
                                </li>
                            @endforeach
                        </ul>

                        <a href="/photography/booking?package={{ strtolower($package['name']) }}"
                            class="block w-full py-3 text-center rounded-xl font-semibold transition duration-300 {{ $package['popular'] ? 'bg-amber-500 hover:bg-amber-600 text-white' : 'bg-gray-800 hover:bg-gray-700 text-white' }}">
                            Select Package
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Add-ons -->
    <section class="py-20 {{ $theme['sectionBgAlt'] }} border-t border-gray-800">
        <div class="max-w-4xl mx-auto px-6 lg:px-8">
            <div class="text-center mb-12 animate-on-scroll">
                <h2 class="font-display text-3xl font-bold text-white mb-4">Add-On Services</h2>
                <p class="text-gray-400">Enhance your package with additional services</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                @foreach ($addOns as $name => $price)
                    <div
                        class="flex items-center justify-between p-4 {{ $theme['cardBg'] }} rounded-xl border {{ $theme['cardBorder'] }} animate-on-scroll">
                        <span class="text-gray-300">{{ $name }}</span>
                        <span class="text-amber-400 font-medium">{{ $price }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <section class="py-20 {{ $theme['sectionBg'] }} border-t border-gray-800">
        <div class="max-w-4xl mx-auto px-6 lg:px-8">
            <div class="text-center mb-12 animate-on-scroll">
                <h2 class="font-display text-3xl font-bold text-white mb-4">Frequently Asked Questions</h2>
            </div>

            <div class="space-y-4">
                @php
                    $faqs = [
                        [
                            'q' => 'How long does a typical photoshoot take?',
                            'a' => 'Most sessions take 1-2 hours depending on the package and number of locations.',
                        ],
                        [
                            'q' => 'When will I receive my photos?',
                            'a' => 'Edited photos are delivered within 5-7 business days via online gallery.',
                        ],
                        [
                            'q' => 'Do you provide raw/unedited files?',
                            'a' =>
                                'We deliver professionally edited high-resolution images only. Raw files are not included.',
                        ],
                        [
                            'q' => 'What happens if it rains for outdoor shoots?',
                            'a' => 'We have backup indoor locations or can reschedule at no additional cost.',
                        ],
                        [
                            'q' => 'Do you travel for destination shoots?',
                            'a' => 'Yes! Travel fees apply for locations outside the metropolitan area.',
                        ],
                    ];
                @endphp

                @foreach ($faqs as $index => $faq)
                    <div class="{{ $theme['cardBg'] }} rounded-xl border {{ $theme['cardBorder'] }} animate-on-scroll"
                        style="transition-delay: {{ $index * 0.1 }}s;">
                        <details class="group">
                            <summary
                                class="flex items-center justify-between p-6 cursor-pointer list-none {{ $theme['textNormal'] }}">
                                <span class="font-medium">{{ $faq['q'] }}</span>
                                <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7" />
                                </svg>
                            </summary>
                            <div class="px-6 pb-6 text-gray-400">
                                {{ $faq['a'] }}
                            </div>
                        </details>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="py-20 bg-gradient-to-r from-amber-900/30 to-gray-900 border-t border-gray-800">
        <div class="max-w-4xl mx-auto px-6 lg:px-8 text-center">
            <h2 class="font-display text-3xl font-bold text-white mb-4 animate-on-scroll">Ready to Book?</h2>
            <p class="text-gray-400 mb-8 animate-on-scroll" style="transition-delay: 0.1s;">Secure your session date and
                time</p>
            <div class="animate-on-scroll" style="transition-delay: 0.2s;">
                <a href="/photography/booking"
                    class="inline-flex items-center px-8 py-4 bg-amber-500 hover:bg-amber-600 text-white font-semibold rounded-full shadow-lg shadow-amber-500/25 transition duration-300">
                    Book Now
                </a>
            </div>
        </div>
    </section>
@endsection
