@props(['product', 'reverse' => false])
<article @class(['catalog-product', 'is-reverse' => $reverse]) data-product-block>
    <div class="catalog-product-label"><span>{{ $product['number'] }}</span><p>{{ $product['eyebrow'] }}</p></div>
    <a href="{{ route('products.'.$product['slug']) }}" class="catalog-product-image" data-image-reveal>
        <img src="{{ asset($product['main_image']) }}" alt="{{ $product['name'] }} product textile" width="1536" height="1024" loading="lazy" decoding="async">
        <span class="image-corner" aria-hidden="true">View product ↗</span>
    </a>
    <div class="catalog-product-copy" data-reveal>
        <p class="product-kicker">Product / {{ $product['number'] }}</p>
        <h3>{{ $product['name'] }}</h3>
        <p>{{ $product['short_description'] }}</p>
        <ul>@foreach(array_slice($product['applications'], 0, 3) as $application)<li>{{ $application['title'] }}</li>@endforeach</ul>
        <div class="catalog-actions"><x-button href="{{ route('products.'.$product['slug']) }}" variant="text">Product details</x-button><a href="{{ route('contact', ['product' => $product['slug']]) }}" class="quiet-link">Enquire about this product</a></div>
    </div>
</article>