@extends('layouts.app')

@section('title', 'Our Companies — ' . config('gerg.name'))

@section('content')
    @include('partials.page-hero', ['title' => 'Our Companies', 'subtitle' => 'Group companies synchronized to back each other in delivering solutions.', 'breadcrumb' => 'Companies'])

    <section class="bg-slate-50 py-16 lg:py-24">
        <div class="mx-auto max-w-7xl px-4 lg:px-8">
            @php
                $companies = config('gerg.companies_page', []);
                $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="{{ $company['url'] ?? '#' }}" target="_blank" rel="noopener" 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="{{ $company['url'] ?? '#' }}" target="_blank" rel="noopener" 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="{{ $company['url'] ?? '#' }}"
                                target="_blank"
                                rel="noopener"
                                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"
                            >
                                Visit Website
                                <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                            </a>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>
@endsection