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

<div
    class="mt-12 overflow-hidden rounded-3xl border border-gerg-100 bg-white shadow-xl shadow-gerg-900/5"
    data-services-tabs
>
    <div class="grid lg:grid-cols-12">
        {{-- Sidebar / tab list --}}
        <div class="border-b border-gerg-100 bg-gerg-50/50 lg:col-span-4 lg:border-b-0 lg:border-r">
            <p class="px-4 pt-5 text-xs font-bold uppercase tracking-widest text-gerg-500 lg:px-6">Select segment</p>
            <nav class="flex gap-2 overflow-x-auto p-4 lg:flex-col lg:gap-1 lg:overflow-visible lg:p-4 lg:pt-3" role="tablist" aria-label="Service segments">
                @foreach ($companies as $index => $company)
                    <button
                        type="button"
                        role="tab"
                        id="service-tab-{{ $company['slug'] }}"
                        aria-controls="service-panel-{{ $company['slug'] }}"
                        data-service-tab="{{ $company['slug'] }}"
                        aria-selected="{{ $index === 0 ? 'true' : 'false' }}"
                        class="service-tab flex min-w-[200px] shrink-0 items-center gap-3 rounded-xl px-4 py-3.5 text-left text-sm font-semibold transition lg:min-w-0 lg:w-full"
                    >
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gerg-100">
                            @include('partials.company-icon', ['icon' => $company['icon'], 'class' => 'h-5 w-5 text-gerg-500'])
                        </span>
                        <span class="leading-snug">{{ $company['short_name'] ?? $company['name'] }}</span>
                    </button>
                @endforeach
            </nav>
        </div>

        {{-- Content panels --}}
        <div class="lg:col-span-8">
            @foreach ($companies as $index => $company)
                @php
                    $imagePath = $company['image'] ?? null;
                    $hasImage = $imagePath && file_exists(public_path($imagePath));
                    $body = $company['service_description'] ?? $company['description'];
                @endphp
                <div
                    id="service-panel-{{ $company['slug'] }}"
                    role="tabpanel"
                    aria-labelledby="service-tab-{{ $company['slug'] }}"
                    data-service-panel="{{ $company['slug'] }}"
                    class="service-panel {{ $index === 0 ? '' : 'hidden' }}"
                >
                    @if ($hasImage)
                        <div class="relative aspect-[21/9] w-full overflow-hidden sm:aspect-[2/1]">
                            <img
                                src="{{ asset($imagePath) }}"
                                alt="{{ $company['name'] }}"
                                class="h-full w-full object-cover"
                                loading="lazy"
                            >
                            <div class="absolute inset-0 bg-gradient-to-t from-gerg-900/40 to-transparent"></div>
                        </div>
                    @endif

                    <div class="p-6 sm:p-8 lg:p-10">
                        <p class="text-xs font-bold uppercase tracking-widest text-gerg-500">What we provide</p>
                        <h3 class="mt-2 font-display text-2xl font-bold text-gerg-900 sm:text-3xl">
                            {{ $company['name'] }}
                        </h3>
                        <p class="mt-1 text-sm font-medium text-gerg-600">{{ $company['tagline'] }}</p>
                        <p class="mt-6 text-base leading-relaxed text-slate-600">
                            {{ $body }}
                        </p>
                        <div class="mt-8 flex flex-wrap gap-4">
                            <a href="{{ route('companies') }}#{{ $company['slug'] }}" class="btn-primary text-sm !py-2.5 !px-5">
                                Learn more
                            </a>
                            <a href="{{ route('contact') }}?segment={{ $company['slug'] }}" class="btn-outline-dark text-sm !py-2.5 !px-5">
                                Request guidance
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>