@props(['products'])

<section class="v2-section v2-products" aria-labelledby="home2-products-title">
    <div class="v2-shell">
        <div class="v2-section-head">
            <div>
                <p class="v2-eyebrow">Featured products</p>
                <h2 id="home2-products-title">Quote-ready catalog picks.</h2>
            </div>
            <div class="v2-product-tabs" role="tablist" aria-label="Home 2 product filters">
                <button class="active" type="button" data-product-filter="all">All</button>
                <button type="button" data-product-filter="medical">Nursing & Medical</button>
                <button type="button" data-product-filter="lab">Laboratory</button>
                <button type="button" data-product-filter="maps">Education Maps & Charts</button>
            </div>
        </div>
        <div class="v2-product-grid">
            @forelse($products as $product)
                @php($images = is_array($product->images) && count($product->images) ? $product->images : ['https://images.unsplash.com/photo-1581093588401-fbb62a02f120?auto=format&fit=crop&w=900&q=80'])
                @php($domain = strtolower(optional($product->category->parent)->name ?? optional($product->category)->name ?? ''))
                @php($key = str_contains($domain, 'medical') || str_contains($domain, 'nursing') ? 'medical' : (str_contains($domain, 'map') || str_contains($domain, 'gis') || str_contains($domain, 'chart') ? 'maps' : 'lab'))
                <article class="v2-product-card" data-product-domain="{{ $key }}">
                    <a href="{{ route('products.show', $product->slug) }}">
                        <img src="{{ $images[0] }}" alt="{{ $product->name }}" loading="lazy">
                    </a>
                    <div>
                        <span>{{ optional($product->category)->name }}</span>
                        <h3>{{ $product->name }}</h3>
                        <p>{{ $product->short_description }}</p>
                        <a href="{{ route('products.show', $product->slug) }}">View Details</a>
                    </div>
                </article>
            @empty
                <article class="v2-empty-card"><h3>No featured products yet</h3><p>Mark products as featured in the admin panel to render this section dynamically.</p></article>
            @endforelse
        </div>
        <div class="v2-products-footer">
            <a href="{{ route('products') }}">Browse full catalog</a>
        </div>
    </div>
</section>