@props(['product', 'categories'])
@php
    $images = is_array($product->images) && count($product->images) ? $product->images : ['https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1200&q=80'];
    $items = is_array($product->catalog_items) && count($product->catalog_items) ? $product->catalog_items : collect($images)->map(fn($image, $index) => ['group' => optional($product->category)->name ?: 'General', 'code' => 'Item ' . ($index + 1), 'title' => $product->name, 'image' => $image])->all();
    $grouped = collect($items)->groupBy(fn($item) => $item['group'] ?: 'General');
@endphp

<section class="product-page product-type3">
    <div class="product-shell catalog-hero">
        <div>
            <p class="eyebrow">{{ optional($product->category)->name }}</p>
            <h1>{{ $product->name }}</h1>
            <p>{{ $product->short_description }}</p>
            <div class="detail-actions"><a class="button primary" href="#inquiry">Request Bulk Quote</a><a class="button secondary" href="#catalog-list">View Item List</a></div>
        </div>
        <img src="{{ $images[0] }}" alt="{{ $product->name }}" loading="lazy">
    </div>
</section>

<section class="section">
    <div class="section-head"><div><p class="eyebrow">Visual Catalog</p><h2>{{ $product->gallery_type === 'list' ? 'Catalog preview' : 'Image grid' }}</h2></div></div>
    <div class="catalog-grid">
        @forelse($items as $item)
            <article><img src="{{ $item['image'] ?: $images[$loop->index % count($images)] }}" alt="{{ $item['title'] }}" loading="lazy"><div><strong>{{ $item['title'] }}</strong><span>{{ $item['code'] }}</span></div></article>
        @empty
            @foreach($images as $image)<article><img src="{{ $image }}" alt="{{ $product->name }} item {{ $loop->iteration }}" loading="lazy"><div><strong>{{ $product->name }}</strong><span>Item {{ $loop->iteration }}</span></div></article>@endforeach
        @endforelse
    </div>
</section>

<section class="section product-content-grid" id="catalog-list">
    <article class="span-2"><h2>Description</h2><p>{!! nl2br(e($product->description)) !!}</p></article>
    <article class="span-2"><h2>Grouped Item List</h2><div class="grouped-list">@foreach($grouped as $group => $rows)<div><h3>{{ $group }}</h3><ul>@foreach($rows as $row)<li><span>{{ $row['code'] }}</span>{{ $row['title'] }}</li>@endforeach</ul></div>@endforeach</div></article>
</section>
<section class="section narrow" id="inquiry"><p class="eyebrow">Bulk Catalog Inquiry</p><h2>Request a Quote</h2>@include('partials.inquiry-form', ['product' => $product, 'categories' => $categories, 'context' => 'Catalog: ' . $product->name])</section>