@extends('design.layouts.design')

@section('title', 'Portfolio - Graphic Design')

@php
    $theme = [
        'sectionBg' => 'bg-slate-900',
        'sectionBgAlt' => 'bg-slate-950',
        'cardBg' => 'bg-slate-900',
        'cardBorder' => 'border-slate-800',
        'textNormal' => 'text-white',
        'textSecondary' => 'text-slate-400',
        'accent' => 'text-cyan-400',
        'activeFilter' => 'bg-gradient-to-r from-cyan-500 to-fuchsia-500 text-white',
        'inactiveFilter' => 'bg-slate-800 text-slate-300 hover:bg-slate-700',
    ];
@endphp

@section('content')
    <!-- Hero -->
    <section class="relative py-20 md:py-32 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
        <div class="max-w-7xl mx-auto px-6 lg:px-8 text-center">
            <span
                class="inline-flex items-center px-4 py-2 rounded-full bg-cyan-500/10 text-cyan-400 text-sm font-medium mb-6 border border-cyan-500/20 animate-on-scroll">
                <span class="w-2 h-2 bg-cyan-400 rounded-full mr-2 animate-pulse"></span>
                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;">
                Design <span class="text-gradient">Portfolio</span>
            </h1>
            <p class="text-xl text-slate-400 max-w-3xl mx-auto animate-on-scroll" style="transition-delay: 0.2s;">
                Explore our collection of brand identities, print designs, and digital creations
            </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 $category)
                    <button onclick="filterPortfolio('{{ $category }}')"
                        class="px-6 py-2 rounded-full font-medium transition duration-300 text-sm filter-btn {{ $category === 'All' ? 'bg-gradient-to-r from-cyan-500 to-fuchsia-500 text-white' : 'bg-slate-800 text-slate-300 hover:bg-slate-700' }}"
                        data-filter="{{ $category }}">
                        {{ $category }}
                    </button>
                @endforeach
            </div>

            <!-- Gallery Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="portfolio-grid">
                @foreach ($portfolioData as $index => $item)
                    <div class="group relative rounded-xl overflow-hidden cursor-pointer portfolio-item design-card"
                        data-category="{{ $item['category'] }}" style="transition-delay: {{ ($index % 3) * 0.1 }}s;"
                        onclick="openLightbox('{{ $item['title'] }}', '{{ $item['image'] }}', '{{ $item['category'] }}')">
                        <img src="https://placehold.co/400x400/334155/ffffff?text={{ urlencode($item['title']) }}"
                            alt="{{ $item['title'] }}"
                            class="w-full aspect-square object-cover transition duration-500 group-hover:scale-110">
                        <!-- Overlay -->
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition duration-300">
                            <div class="absolute bottom-0 left-0 right-0 p-6">
                                <span class="text-cyan-400 text-xs font-medium mb-1 block">{{ $item['category'] }}</span>
                                <h3 class="text-white font-semibold text-lg">{{ $item['title'] }}</h3>
                                @if ($item['beforeAfter'] ?? false)
                                    <span
                                        class="inline-block mt-2 text-xs bg-cyan-500/20 text-cyan-400 px-2 py-1 rounded">Before/After
                                        Available</span>
                                @endif
                            </div>
                        </div>

                        <!-- Before/After indicator -->
                        @if ($item['beforeAfter'] ?? false)
                            <div
                                class="absolute top-4 right-4 bg-gradient-to-r from-cyan-500 to-fuchsia-500 text-white text-xs font-bold px-3 py-1 rounded-full">
                                Before/After
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>

            <!-- Empty State -->
            <div id="no-results" class="hidden text-center py-16">
                <div class="w-16 h-16 bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-4">
                    @include('design.partials.icon', [
                        'name' => 'Image',
                        'size' => 'w-8 h-8 text-slate-500',
                    ])
                </div>
                <h3 class="text-xl text-slate-400 mb-2">No projects in this category</h3>
                <p class="text-slate-500">Check back soon for new additions!</p>
            </div>
        </div>
    </section>

    <!-- Before/After Showcase Section -->
    <section class="py-20 {{ $theme['sectionBg'] }} border-t border-slate-800">
        <div class="max-w-6xl 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">Before & After Transformations</h2>
                <p class="text-slate-400">See how we've helped brands reimagine their identity</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                @php
                    $transformations = [
                        ['title' => 'Tech Startup Rebrand', 'old' => 'Old Generic Logo', 'new' => 'Modern Tech Brand'],
                        [
                            'title' => 'Restaurant Chain',
                            'old' => 'Dated Traditional Look',
                            'new' => 'Contemporary Dining Brand',
                        ],
                    ];
                @endphp

                @foreach ($transformations as $index => $trans)
                    <div class="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden animate-on-scroll"
                        style="transition-delay: {{ $index * 0.15 }}s;">
                        <div class="grid grid-cols-2 gap-1">
                            <div class="aspect-square bg-slate-800 flex items-center justify-center p-6">
                                <div class="text-center">
                                    <div class="text-slate-500 text-xs uppercase tracking-wide mb-2">Before</div>
                                    <div class="text-slate-400 font-medium">{{ $trans['old'] }}</div>
                                </div>
                            </div>
                            <div
                                class="aspect-square bg-gradient-to-br from-cyan-500/10 to-fuchsia-500/10 flex items-center justify-center p-6">
                                <div class="text-center">
                                    <div class="text-cyan-400 text-xs uppercase tracking-wide mb-2">After</div>
                                    <div class="text-white font-medium">{{ $trans['new'] }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="p-4 border-t border-slate-800">
                            <h3 class="text-white font-semibold">{{ $trans['title'] }}</h3>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="py-20 bg-gradient-to-r from-cyan-900/20 to-fuchsia-900/20 border-t border-slate-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-slate-400 mb-8 animate-on-scroll" style="transition-delay: 0.1s;">Let's create something amazing
                together</p>
            <div class="animate-on-scroll" style="transition-delay: 0.2s;">
                <a href="/design/pricing"
                    class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-cyan-500 to-fuchsia-500 text-white font-semibold rounded-full shadow-lg hover:shadow-cyan-500/25 transition duration-300">
                    Start Your Project
                </a>
            </div>
        </div>
    </section>

    <!-- Lightbox -->
    <div id="lightbox" class="fixed inset-0 bg-slate-900/95 z-1000 hidden items-center justify-center"
        onclick="closeLightbox()">
        <button class="absolute top-6 right-6 text-white text-3xl hover:text-cyan-400 transition">&times;</button>
        <div class="max-w-4xl mx-auto px-6 text-center" onclick="event.stopPropagation()">
            <img id="lightbox-img" src="" alt="" class="max-w-full max-h-[70vh] rounded-xl mx-auto">
            <h3 id="lightbox-title" class="text-2xl font-bold text-white mt-6"></h3>
            <p id="lightbox-category" class="text-cyan-400 mt-2"></p>
        </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-gradient-to-r from-cyan-500 to-fuchsia-500 text-white shadow-lg';
                } else {
                    btn.className =
                        'px-6 py-2 rounded-full font-medium transition duration-300 text-sm filter-btn bg-slate-800 text-slate-300 hover:bg-slate-700';
                }
            });

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

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

            document.getElementById('no-results').classList.toggle('hidden', visibleCount > 0);
        }

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

            img.src = `https://placehold.co/800x800/334155/ffffff?text=${encodeURIComponent(title)}`;
            document.getElementById('lightbox-title').textContent = title;
            document.getElementById('lightbox-category').textContent = category;

            lightbox.classList.remove('hidden');
            lightbox.classList.add('flex');
            document.body.style.overflow = 'hidden';
        }

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

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