@props([
    'projects' => [],
    'filters' => [],
    'activeFilter' => 'All',
    'themeClasses' => [],
])

<section id="portfolio"
    class="py-20 md:py-32 {{ $themeClasses['sectionBg'] ?? 'bg-gray-900' }} border-t {{ $themeClasses['divider'] ?? 'border-gray-800' }}">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <h2
            class="text-5xl font-extrabold text-center mb-6 {{ $themeClasses['textNormal'] ?? 'text-white' }} animate-on-scroll">
            Our Signature Krafts</h2>
        <p class="text-center {{ $themeClasses['textSecondary'] ?? 'text-gray-400' }} mb-12 max-w-3xl mx-auto text-lg animate-on-scroll"
            style="transition-delay: 0.1s;">
            A curated selection showcasing our diverse capabilities across multiple media platforms.
        </p>

        <div class="flex justify-center flex-wrap gap-3 mb-12" id="portfolio-filters">
            @foreach ($filters as $filter)
                <button onclick="setActiveFilter('{{ $filter }}')"
                    class="px-6 py-2 rounded-full font-medium transition duration-300 text-sm {{ $activeFilter === $filter
                        ? 'bg-orange-600 text-white shadow-lg shadow-orange-500/30'
                        : 'bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-orange-600 dark:bg-gray-800 dark:text-gray-300' }}">
                    {{ $filter }}
                </button>
            @endforeach
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8" id="portfolio-grid">
            @forelse ($projects as $index => $project)
                <div class="{{ $themeClasses['cardBg'] ?? 'bg-gray-900' }} rounded-2xl overflow-hidden shadow-2xl border {{ $themeClasses['inputBorder'] ?? 'border-gray-700' }} hover:border-orange-600 transition duration-500 transform hover:scale-[1.01] animate-on-scroll"
                    style="transition-delay: {{ $index * 0.1 }}s;">
                    <img src="https://placehold.co/600x400/155e75/ffffff?text={{ urlencode($project['imagePlaceholder']) }}"
                        alt="{{ $project['title'] }}" class="w-full h-56 object-cover"
                        onerror="this.onerror=null; this.src='https://placehold.co/600x400/9ca3af/ffffff?text=Image+Load+Error';" />
                    <div class="p-6">
                        <span
                            class="inline-block {{ $project['color'] ?? 'bg-blue-700/70' }} text-white text-xs font-semibold px-3 py-1 rounded-full mb-2">{{ $project['tag'] }}</span>
                        <h4 class="text-xl font-bold {{ $themeClasses['textNormal'] ?? 'text-white' }} mb-1">
                            {{ $project['title'] }}</h4>
                        <p class="text-orange-600 text-sm mb-4">{{ $project['type'] }}</p>
                        <button class="text-orange-600 hover:text-orange-500 text-sm font-medium">View Case Study
                            &rarr;</button>
                    </div>
                </div>
            @empty
                <div
                    class="lg:col-span-3 text-center p-12 {{ $themeClasses['cardBg'] ?? 'bg-gray-900' }} rounded-xl {{ $themeClasses['textSecondary'] ?? 'text-gray-400' }}">
                    No projects currently listed for the "{{ $activeFilter }}" category. Check back soon!
                </div>
            @endforelse
        </div>
    </div>
</section>

@push('scripts')
    <script>
        function setActiveFilter(filter) {
            // Dispatch event for parent component to handle
            window.dispatchEvent(new CustomEvent('setPortfolioFilter', {
                detail: filter
            }));
        }
    </script>
@endpush
