@props(['product', 'categories'])
@php
    $images = is_array($product->images) && count($product->images) ? $product->images : ['https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1200&q=80'];
    $features = is_array($product->features) && count($product->features) ? $product->features : array_values(array_filter(array_map('trim', preg_split('/\R/', $product->use_cases ?? '') ?: [])));
    $specs = is_array($product->specification_pairs) && count($product->specification_pairs) ? $product->specification_pairs : collect(array_filter(array_map('trim', preg_split('/\R/', $product->specifications ?? '') ?: [])))->map(function ($line) {
        $parts = array_map('trim', explode(':', $line, 2));
        return ['label' => $parts[0] ?? $line, 'value' => $parts[1] ?? ''];
    })->all();
    $faqs = is_array($product->faq) ? $product->faq : [];
@endphp

<section class="product-page product-type2">
    <div class="product-shell inquiry-grid">
        <div class="product-gallery">
            <img class="main-image" src="{{ $images[0] }}" alt="{{ $product->name }}" data-main-image loading="lazy">
            <div class="product-thumb-carousel" data-thumb-carousel>
                @if(count($images) > 4)<button class="thumb-nav prev" type="button" data-thumb-prev aria-label="Previous product image">&lsaquo;</button>@endif
                <div class="thumbs" data-thumb-track>
                    @foreach($images as $image)
                        <button class="{{ $loop->first ? 'active' : '' }}" type="button" data-gallery-src="{{ $image }}"><img src="{{ $image }}" alt="{{ $product->name }} thumbnail {{ $loop->iteration }}" loading="lazy"></button>
                    @endforeach
                </div>
                @if(count($images) > 4)<button class="thumb-nav next" type="button" data-thumb-next aria-label="Next product image">&rsaquo;</button>@endif
            </div>
        </div>
        <div class="inquiry-copy">
            <p class="eyebrow">{{ optional($product->category)->name }}</p>
            <h1>{{ $product->name }}</h1>
            <p>{{ $product->short_description }}</p>
            <div class="quote-highlight">Get Price / Request Quote</div>
            <div class="detail-actions"><a class="button primary" href="#inquiry">Send Inquiry</a><a class="button secondary" href="{{ route('contact') }}">Request Callback</a></div>
        </div>
    </div>
</section>

<section class="section product-content-grid">
    <article><h2>Description</h2><p>{!! nl2br(e($product->description)) !!}</p></article>
    <article><h2>Features</h2><ul>@foreach($features as $feature)<li>{{ $feature }}</li>@endforeach</ul></article>
    <article class="span-2"><h2>Product Details</h2><div class="spec-table">@foreach($specs as $spec)<div><strong>{{ $spec['label'] ?? '' }}</strong><span>{{ $spec['value'] ?? '' }}</span></div>@endforeach</div></article>
    @if(count($faqs))
        <article class="span-2"><h2>FAQ</h2><div class="faq-list">@foreach($faqs as $faq)<details><summary>{{ $faq['question'] ?? '' }}</summary><p>{{ $faq['answer'] ?? '' }}</p></details>@endforeach</div></article>
    @endif
</section>
<section class="section narrow" id="inquiry"><p class="eyebrow">Product Inquiry</p><h2>Send Inquiry</h2>@include('partials.inquiry-form', ['product' => $product, 'categories' => $categories, 'context' => 'Product: ' . $product->name])</section>