@extends('frontend.layouts.app')

@section('title', 'Portfolio — ' . ($settings->company_name ?? 'PT. Gemilang Inti Teknologi'))

@section('content')

{{-- Header --}}
<section class="page-header relative overflow-hidden" style="background:linear-gradient(145deg,#ffffff 0%,#fff5f5 100%);">
    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
        <div class="absolute -top-32 -right-32 w-96 h-96 rounded-full" style="background:radial-gradient(circle,rgba(204,21,18,.06),transparent 65%);"></div>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center" data-aos="fade-up">
        <div class="badge-primary mb-4 justify-center">Our Work</div>
        <h1 class="text-4xl md:text-5xl font-black text-neutral-900 mb-4" style="font-family:'Sora',sans-serif;">Our Portfolio</h1>
        <p class="text-neutral-500 max-w-2xl mx-auto">Explore our recent projects and see what we can deliver for your business.</p>
    </div>
    <svg viewBox="0 0 1440 48" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="w-full block" style="height:48px;display:block;margin-top:3rem;margin-bottom:-1px;">
        <path d="M0,0 C360,48 1080,48 1440,0 L1440,48 L0,48 Z" fill="#ffffff"/>
    </svg>
</section>

{{-- Portfolio with filter --}}
<section class="py-14 bg-white" style="margin-top:-1px;" x-data="{ activeCategory: 'all' }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        {{-- Category filter --}}
        @if($categories->count() > 0)
        <div class="flex flex-wrap justify-center gap-2 mb-10" data-aos="fade-up">
            <button @click="activeCategory='all'"
                    :class="activeCategory==='all' ? 'gradient-primary text-white shadow-md' : 'bg-white border border-neutral-200 text-neutral-600 hover:border-red-300 hover:text-red-600'"
                    class="px-5 py-2 rounded-full text-sm font-semibold transition-all">
                All
            </button>
            @foreach($categories as $cat)
            <button @click="activeCategory='{{ $cat }}'"
                    :class="activeCategory==='{{ $cat }}' ? 'gradient-primary text-white shadow-md' : 'bg-white border border-neutral-200 text-neutral-600 hover:border-red-300 hover:text-red-600'"
                    class="px-5 py-2 rounded-full text-sm font-semibold transition-all">
                {{ $cat }}
            </button>
            @endforeach
        </div>
        @endif

        {{-- Grid --}}
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
            @forelse($portfolios as $index => $portfolio)
            <div x-show="activeCategory==='all' || activeCategory==='{{ $portfolio->category }}'"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100"
                 class="group rounded-2xl overflow-hidden border border-neutral-200 hover:border-red-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 bg-white"
                 data-aos="fade-up" data-aos-delay="{{ min(($index%3)*60,150) }}">

                @if($portfolio->image_url)
                    <div class="overflow-hidden h-52"><img src="{{ $portfolio->image_url }}" alt="{{ $portfolio->title }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"></div>
                @else
                    <div class="h-52 flex items-center justify-center" style="background:linear-gradient(135deg,#fff5f5,#fff);">
                        <div class="text-center">
                            <div class="w-14 h-14 rounded-2xl gradient-primary flex items-center justify-center mx-auto mb-2 shadow-md">
                                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                            </div>
                            <p class="text-neutral-400 text-xs">{{ $portfolio->category ?? 'Project' }}</p>
                        </div>
                    </div>
                @endif

                <div class="p-5">
                    <div class="flex items-start justify-between gap-2">
                        <div>
                            @if($portfolio->category)<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-red-50 text-red-600 mb-1.5">{{ $portfolio->category }}</span>@endif
                            <h3 class="font-bold text-neutral-900 group-hover:text-red-600 transition-colors">{{ $portfolio->title }}</h3>
                            @if($portfolio->client_name)<p class="text-xs text-neutral-400 mt-0.5">{{ $portfolio->client_name }}</p>@endif
                        </div>
                        @if($portfolio->project_url)
                        <a href="{{ $portfolio->project_url }}" target="_blank" rel="noopener"
                           class="w-8 h-8 rounded-lg bg-neutral-100 hover:bg-red-600 hover:text-white flex items-center justify-center text-neutral-500 flex-shrink-0 transition-all">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                        </a>
                        @endif
                    </div>
                    @if($portfolio->description)
                    <p class="text-neutral-500 text-xs mt-2 leading-relaxed line-clamp-2">{{ $portfolio->description }}</p>
                    @endif
                </div>
            </div>
            @empty
            <div class="col-span-full py-16 text-center">
                <div class="w-16 h-16 rounded-2xl gradient-primary flex items-center justify-center mx-auto mb-4 shadow-md">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                </div>
                <p class="text-neutral-500 font-medium">No portfolio items yet.</p>
            </div>
            @endforelse
        </div>
    </div>
</section>

{{-- CTA --}}
<section class="py-12 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="rounded-3xl overflow-hidden" style="background:linear-gradient(135deg,#CC1512 0%,#e83030 100%);">
            <div class="px-8 py-12 md:px-14 md:py-14 text-center relative overflow-hidden" data-aos="fade-up">
                <svg class="absolute right-0 top-0 opacity-10 w-48 h-48" viewBox="0 0 200 200"><defs><pattern id="pctadots" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1.5" fill="white"/></pattern></defs><rect width="200" height="200" fill="url(#pctadots)"/></svg>
                <h2 class="text-2xl md:text-3xl font-black text-white mb-3 relative" style="font-family:'Sora',sans-serif;">Have a Project in Mind?</h2>
                <p class="text-red-100 text-sm max-w-md mx-auto mb-7 relative">Let's discuss your idea and turn it into a successful product.</p>
                <a href="{{ route('contact') }}" class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-white text-red-600 font-bold text-sm hover:bg-red-50 transition-all shadow-lg relative">
                    Start a Conversation →
                </a>
            </div>
        </div>
    </div>
</section>

@endsection