{{-- Übersichtsseite /marken: je Marke Logo, Bild, Claim, Text, drei Merkmale und der Weg
     zur Detailseite. Jede Marke steht in einem eigenen Rahmen, damit klar ist, was zusammengehört.
     Abwechselnde Bildseite, damit die Liste nicht monoton wird. --}}
<section class="section-padding {{ $bg }}">
    <div class="container-padding space-y-10 lg:space-y-14">
        @foreach ($brands as $index => $brand)
            <article class="card-elevated rounded-3xl p-6 sm:p-8 lg:p-12" wire:key="brand-{{ $brand['slug'] }}">
                <div class="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
                    <div class="{{ $loop->even ? '' : 'lg:order-2' }}">
                        @if (!empty($brand['image']))
                            <img src="{{ theme_image_url($brand['image']) }}" alt="{{ $brand['name'] }}"
                                class="w-full rounded-2xl object-cover aspect-[4/3]" loading="lazy" />
                        @else
                            {{-- Platzhalter, solange die Bildmotive fehlen (offene Zulieferung). --}}
                            <div class="w-full aspect-[4/3] rounded-2xl bg-muted flex items-center justify-center">
                                <span class="text-muted-foreground text-sm">{{ $brand['name'] }}</span>
                            </div>
                        @endif
                    </div>

                    <div class="{{ $loop->even ? '' : 'lg:order-1' }}">
                        {{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr unterschiedliche
                             Seitenverhaeltnisse und wirken sonst ungleich gross. Die optische Feinabstimmung
                             steckt in den Zeichenflaechen der Dateien, nicht hier – siehe BrandLogoSeeder. --}}
                        @if (!empty($brand['logo']))
                            <img src="{{ theme_image_url($brand['logo']) }}" alt="{{ $brand['name'] }}"
                                class="h-[4.2rem] max-w-[12rem] w-auto mb-5 object-contain object-left" loading="lazy" />
                        @endif

                        <h2 class="text-2xl lg:text-3xl font-medium">{{ $brand['name'] }}</h2>
                        <p class="text-large text-secondary font-medium mt-1">{{ $brand['tagline'] }}</p>

                        @foreach (preg_split('/\R{2,}/', trim((string) ($brand['summary'] ?: $brand['teaser']))) as $i => $paragraph)
                            <p class="text-muted-foreground leading-relaxed mt-4">{!! nl2br(e($paragraph)) !!}</p>
                        @endforeach

                        @if (!empty($brand['highlights']))
                            <ul class="mt-6 space-y-2 pt-6 border-t border-border/60">
                                @foreach ($brand['highlights'] as $i => $highlight)
                                    <li class="flex items-start gap-3" wire:key="hl-{{ $brand['slug'] }}-{{ $i }}">
                                        <svg class="w-5 h-5 text-secondary shrink-0 mt-0.5" fill="none" stroke="currentColor"
                                            stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                                        </svg>
                                        <span class="text-muted-foreground">{{ is_array($highlight) ? ($highlight['title'] ?? '') : $highlight }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        @endif

                        @if (!empty($brand['has_detail_page']))
                            <a href="{{ route('marken.show', ['slug' => $brand['slug']]) }}"
                                class="btn-primary-accent px-6 py-3 mt-8 inline-block">
                                {{ __('ui.more_about', ['name' => $brand['name']]) }}
                            </a>
                        @endif
                    </div>
                </div>
            </article>
        @endforeach
    </div>
</section>