@extends('layouts.app')

@section('title', __('app.comparisons.title'))
@section('meta_description', __('app.comparisons.meta_description'))

@section('content')
    @include('partials.page-hero', [
        'crumbs' => [
            ['name' => __('app.nav.home'), 'url' => lroute('home')],
            ['name' => __('app.nav.comparisons')],
        ],
        'title' => __('app.comparisons.h1'),
        'lead' => __('app.comparisons.lead'),
    ])

    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-2">
            @foreach ($cards as $card)
                @php($comparisonSlug = $card['slug'])
                <a href="{{ lroute('comparison', ['slug' => $comparisonSlug]) }}"
                   class="group flex flex-col rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:ring-brand/40">
                    @if (! empty($card['image']))
                    <img src="{{ asset('storage/'.$card['image']) }}" alt="{{ $card['title'] }}" class="-mx-6 -mt-6 mb-4 aspect-[1200/630] w-[calc(100%+3rem)] max-w-none rounded-t-2xl object-cover" loading="lazy">
                    @elseif (file_exists(public_path('brand/comparisons/'.$comparisonSlug.'-'.app()->getLocale().'.webp')))
                    <img src="{{ asset('brand/comparisons/'.$comparisonSlug.'-'.app()->getLocale().'.webp') }}" alt="{{ $card['title'] }}" class="-mx-6 -mt-6 mb-4 aspect-[1200/630] w-[calc(100%+3rem)] max-w-none rounded-t-2xl object-cover" width="1200" height="630" loading="lazy">
                    @endif
                    <h2 class="text-lg font-bold text-brand-deep group-hover:text-brand">{{ $card['title'] }}</h2>
                    <p class="mt-2 text-sm leading-relaxed text-ink-soft">{{ $card['card_text'] }}</p>
                    <span class="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-brand">
                        {{ __('app.learn_more') }}
                        <svg class="h-4 w-4 rtl:-scale-x-100" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/></svg>
                    </span>
                </a>
            @endforeach
        </div>
    </section>
@endsection