@php
    $companies = config('gerg.companies', []);
    $featured = $featured ?? false;
@endphp

<div class="mt-14 grid gap-6 sm:grid-cols-2 {{ $featured ? 'lg:grid-cols-4' : 'lg:grid-cols-3' }}">
    @foreach ($companies as $company)
        @php
            $imagePath = $company['image'] ?? null;
            $hasImage = $imagePath && file_exists(public_path($imagePath));
            $isWide = $featured && $loop->first;
        @endphp
        <article
            class="portfolio-card group relative flex flex-col overflow-hidden rounded-2xl border border-gerg-100 bg-white shadow-sm transition duration-300 hover:-translate-y-1 hover:border-gerg-300 hover:shadow-xl hover:shadow-gerg-500/10 {{ $isWide ? 'sm:col-span-2 lg:col-span-2' : '' }}"
        >
            <a href="{{ route('companies') }}#{{ $company['slug'] }}" class="block">
                <div class="relative overflow-hidden {{ $isWide ? 'aspect-[21/9] sm:aspect-[2/1]' : 'aspect-[4/3]' }}">
                    @if ($hasImage)
                        <img
                            src="{{ asset($imagePath) }}"
                            alt="{{ $company['name'] }}"
                            class="h-full w-full object-cover transition duration-500 group-hover:scale-105"
                            loading="lazy"
                        >
                    @else
                        <div class="flex h-full w-full items-center justify-center bg-gradient-to-br from-gerg-100 to-gerg-200">
                            @include('partials.company-icon', ['icon' => $company['icon'], 'class' => 'h-12 w-12 text-gerg-500'])
                        </div>
                    @endif
                    <div class="absolute inset-0 bg-gradient-to-t from-gerg-900/80 via-gerg-900/20 to-transparent"></div>
                    <span class="absolute bottom-4 left-4 right-4 inline-flex w-fit max-w-full items-center rounded-full bg-gerg-500 px-4 py-1.5 text-xs font-bold uppercase tracking-wide text-white shadow-lg">
                        {{ $company['short_name'] ?? $company['name'] }}
                    </span>
                </div>
            </a>

            <div class="flex flex-1 flex-col p-5 sm:p-6">
                <h3 class="font-display text-lg font-bold leading-snug text-gerg-900">
                    <a href="{{ route('companies') }}#{{ $company['slug'] }}" class="hover:text-gerg-600 transition">
                        {{ $company['name'] }}
                    </a>
                </h3>
                <p class="mt-1 text-sm font-medium text-gerg-500">{{ $company['tagline'] }}</p>
                <p class="mt-3 flex-1 text-sm leading-relaxed text-slate-600 line-clamp-3">
                    {{ $company['description'] }}
                </p>
                <a
                    href="{{ route('services') }}#{{ $company['slug'] }}"
                    class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-gerg-600 transition group-hover:gap-2.5 hover:text-gerg-500"
                >
                    Explore services
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                </a>
            </div>
        </article>
    @endforeach
</div>