@extends('layouts.app')

@section('title', 'Portfolio Proyek - Sundcode Nusantara')

@section('content')
    <header class="portfolio-hero-section relative overflow-hidden" style="padding-top: 180px; padding-bottom: 80px; display: flex; align-items: center; justify-content: center; text-align: center;">
        <div class="hero-glow"></div>
        <div class="grid-overlay"></div>
        <div class="container relative z-10">
            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <span class="section-tag animate-fade-in" style="margin-bottom: 20px; display: inline-flex; align-items: center; gap: 8px;">
                    <span style="font-size: 1.2rem;">💼</span> Our Success Stories
                </span>
                <h1 class="hero-title text-gradient animate-slide-up" style="margin-bottom: 24px; font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.02em; width: 100%;">
                    Karya & Inovasi Kami
                </h1>
                <p class="section-subtitle animate-slide-up" style="animation-delay: 0.1s; max-width: 700px; line-height: 1.8; opacity: 0.8; font-size: 1.15rem; margin: 0 auto;">
                    Menelusuri jejak transformasi digital melalui berbagai proyek software kustom dan aplikasi web yang telah kami luncurkan dengan standar kualitas enterprise.
                </p>
            </div>
        </div>
    </header>

    <section class="portfolio-page py-24 relative overflow-hidden">
        <div class="container">
            <div class="portfolio-grid-custom">
                @foreach($products as $product)
                <div class="portfolio-card glass group flex flex-col h-full animate-slide-up" style="animation-delay: {{ 0.1 * ($loop->index + 1) }}s;">
                    <div class="portfolio-image h-64 relative overflow-hidden">
                        <img src="{{ str_starts_with($product->image, 'http') ? $product->image : asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60"></div>
                        
                        <div class="portfolio-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center absolute inset-0 bg-black/40 backdrop-blur-sm">
                             <a href="{{ $product->link ?? '#' }}" class="btn btn-gradient btn-sm px-6">
                                <span>Lihat Detail</span>
                            </a>
                        </div>
                    </div>
                    
                    <div class="portfolio-info p-8 flex flex-col flex-grow">
                        <div class="flex justify-between items-start mb-4">
                            <span class="text-xs text-primary font-bold uppercase tracking-widest">{{ $product->category }}</span>
                        </div>
                        <h3 class="text-2xl font-bold mb-4 group-hover:text-primary transition-colors duration-300">{{ $product->name }}</h3>
                        <p class="text-sm opacity-70 leading-relaxed mb-6 line-clamp-3">{{ Str::limit(strip_tags($product->description), 140) }}</p>
                        
                        <div class="portfolio-tags mt-auto pt-6 border-t border-white/5 flex flex-wrap gap-2">
                            @foreach($product->features ?? [] as $feature)
                                <span class="bg-white/5 border border-white/10 px-3 py-1 rounded-full text-[10px] uppercase font-semibold text-white/50">{{ $feature }}</span>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Decorative Elements -->
        <div class="absolute top-0 left-0 w-full h-full pointer-events-none z-0">
            <div class="absolute top-1/4 -right-24 w-96 h-96 bg-primary/10 rounded-full blur-3xl"></div>
            <div class="absolute bottom-1/4 -left-24 w-96 h-96 bg-accent/10 rounded-full blur-3xl"></div>
        </div>
    </section>

    @include('components.cta')
@endsection

@push('styles')
<style>
    .portfolio-grid-custom {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    @media (max-width: 1024px) {
        .portfolio-grid-custom {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .portfolio-grid-custom {
            grid-template-columns: 1fr;
        }
    }

    .grid-overlay {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), 
                          linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 50px 50px;
        mask-image: radial-gradient(ellipse at center, black, transparent 80%);
        pointer-events: none;
    }

    .animate-slide-up {
        animation: slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        opacity: 0;
    }

    @keyframes slideUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in {
        animation: fadeIn 1s ease-out forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        overflow: hidden;
    }
</style>
@endpush