@extends('photography.layouts.photography')

@section('title', 'Portfolio - 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',
        'activeFilter' => 'bg-amber-500 text-white',
        'inactiveFilter' => 'bg-gray-800 text-gray-300 hover:bg-gray-700',
    ];
@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">
                ✦ Our Work
            </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">Portfolio</span>
            </h1>
            <p class="text-xl text-gray-400 max-w-3xl mx-auto animate-on-scroll" style="transition-delay: 0.2s;">
                Explore our collection of professional photography projects across various categories
            </p>
        </div>
    </section>

    <!-- Portfolio Grid -->
    <section class="py-20 {{ $theme['sectionBgAlt'] }}">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <!-- Filter Buttons -->
            <div class="flex flex-wrap justify-center gap-3 mb-12 animate-on-scroll">
                @foreach ($categories as $index => $category)
                    <button onclick="filterPortfolio('{{ $category }}')"
                        class="px-6 py-2 rounded-full font-medium transition duration-300 text-sm filter-btn {{ $category === 'All' ? $theme['activeFilter'] : $theme['inactiveFilter'] }}"
                        data-filter="{{ $category }}">
                        {{ $category }}
                    </button>
                @endforeach
            </div>

            <!-- Gallery Grid -->
            <div class="gallery-grid" id="portfolio-grid">
                @foreach ($portfolioData as $index => $item)
                    <div class="gallery-item aspect-[4/5] rounded-xl overflow-hidden cursor-pointer animate-on-scroll portfolio-item"
                        data-category="{{ $item['category'] }}" style="transition-delay: {{ ($index % 3) * 0.1 }}s;"
                        onclick="openLightbox('{{ $item['title'] }}', '{{ $item['image'] }}')">
                        <img src="https://placehold.co/400x500/374151/ffffff?text={{ urlencode($item['title']) }}"
                            alt="{{ $item['title'] }}" class="w-full h-full object-cover">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 hover:opacity-100 transition duration-300">
                            <div class="absolute bottom-0 left-0 right-0 p-6">
                                <span class="text-amber-400 text-xs font-medium mb-1 block">{{ $item['category'] }}</span>
                                <h3 class="text-white font-semibold text-lg">{{ $item['title'] }}</h3>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Empty State (hidden by default) -->
            <div id="no-results" class="hidden text-center py-16">
                <svg class="w-16 h-16 text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <h3 class="text-xl text-gray-400 mb-2">No photos in this category</h3>
                <p class="text-gray-500">Check back soon for new additions!</p>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="py-20 {{ $theme['sectionBg'] }} 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">Like What You See?</h2>
            <p class="text-gray-400 mb-8 animate-on-scroll" style="transition-delay: 0.1s;">Let's discuss your photography
                project</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 a Session
                </a>
            </div>
        </div>
    </section>

    <!-- Lightbox -->
    <div id="lightbox" class="lightbox" onclick="closeLightbox()">
        <span class="lightbox-close">&times;</span>
        <img id="lightbox-img" src="" alt="">
        <div id="lightbox-caption" class="absolute bottom-8 left-0 right-0 text-center text-white font-medium"></div>
    </div>
@endsection

@push('scripts')
    <script>
        let activeFilter = 'All';

        function filterPortfolio(category) {
            activeFilter = category;

            // Update button states
            document.querySelectorAll('.filter-btn').forEach(btn => {
                if (btn.dataset.filter === category) {
                    btn.className =
                        'px-6 py-2 rounded-full font-medium transition duration-300 text-sm filter-btn bg-amber-500 text-white shadow-lg';
                } else {
                    btn.className =
                        'px-6 py-2 rounded-full font-medium transition duration-300 text-sm filter-btn bg-gray-800 text-gray-300 hover:bg-gray-700';
                }
            });

            // Filter items
            const items = document.querySelectorAll('.portfolio-item');
            let visibleCount = 0;

            items.forEach(item => {
                if (category === 'All' || item.dataset.category === category) {
                    item.style.display = 'block';
                    setTimeout(() => item.classList.add('is-visible'), 50);
                    visibleCount++;
                } else {
                    item.style.display = 'none';
                    item.classList.remove('is-visible');
                }
            });

            // Show/hide empty state
            document.getElementById('no-results').classList.toggle('hidden', visibleCount > 0);
        }

        function openLightbox(title, image) {
            const lightbox = document.getElementById('lightbox');
            const img = document.getElementById('lightbox-img');
            const caption = document.getElementById('lightbox-caption');

            img.src = `https://placehold.co/1200x900/374151/ffffff?text=${encodeURIComponent(title)}`;
            caption.textContent = title;
            lightbox.classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        function closeLightbox() {
            const lightbox = document.getElementById('lightbox');
            lightbox.classList.remove('active');
            document.body.style.overflow = '';
        }

        // Keyboard navigation
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') closeLightbox();
        });
    </script>
@endpush
