@extends('layouts.master')

@section('title', 'Capabilities | Setara Group')

@push('styles')
    <style>
        /* Card Animations (Same as CSR) */
        .csr-card {
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .csr-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px -5px var(--glow-color);
            border-color: var(--accent) !important;
        }

        .csr-image-wrapper {
            position: relative;
            overflow: hidden;
        }

        .csr-image-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: skewX(-25deg);
            transition: 0.7s;
            z-index: 20;
        }

        .csr-card:hover .csr-image-wrapper::after {
            left: 150%;
        }

        .csr-card img {
            transition: transform 0.7s ease-in-out;
        }

        .csr-card:hover img {
            transform: scale(1.15) rotate(1deg);
        }
    </style>
@endpush

@section('content')
    <!-- Page Header -->
    <header class="pt-32 pb-16 text-center relative overflow-hidden">
        <div class="absolute inset-0 bg-hero-glow pointer-events-none"></div>
        <h1 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight"><span class="text-gradient">{{ $header->title ?? 'Unlocking Your Fashion Vision' }}</span></h1>
        <p class="text-secondary font-light tracking-wide max-w-2xl mx-auto">
            {{ $header->subtitle ?? 'With years of expertise and a commitment to quality, we offer a comprehensive range of services and capabilities in garment manufacturing.' }}
        </p>
    </header>

    <!-- Core Services List -->
    @if($services->count() > 0)
    <section class="pb-16">
        <div class="container mx-auto px-6 max-w-6xl">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($services as $service)
                <div class="glass-card p-6 rounded-xl flex items-start space-x-4 border border-white/5 hover:border-primary/30 transition-all">
                    <i class="{{ $service->icon ?? 'fas fa-cubes' }} text-2xl text-primary mt-1"></i>
                    <div>
                        <h3 class="font-bold text-foreground text-sm mb-1">{{ $service->title }}</h3>
                        <p class="text-secondary text-xs">{{ $service->description }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Capabilities Grid -->
    <section class="pb-24">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @forelse($items as $item)
                <div class="glass-card rounded-2xl overflow-hidden csr-card group">
                    <div class="h-56 overflow-hidden relative csr-image-wrapper">
                        <div class="absolute inset-0 bg-gradient-to-t from-background to-transparent opacity-60 z-10"></div>
                        <img src="{{ $item->image ? asset('storage/' . $item->image) : asset('factory_building.jpg') }}" alt="{{ $item->title }}" class="w-full h-full object-cover">
                        <div class="absolute bottom-4 left-6 z-20">
                            <i class="{{ $item->icon ?? 'fas fa-layer-group' }} text-3xl text-primary mb-2"></i>
                        </div>
                    </div>
                    <div class="p-8 pt-6">
                        <h3 class="text-xl font-bold text-foreground mb-3">{{ $item->title }}</h3>
                        <p class="text-secondary text-sm">{{ $item->description }}</p>
                    </div>
                </div>
                @empty
                    <!-- Fallback or empty state if needed -->
                @endforelse
            </div>
        </div>
    </section>
@endsection