@props(['product', 'categories'])
@php
    $images = is_array($product->images) && count($product->images) ? $product->images : ['https://images.unsplash.com/photo-1581093588401-fbb62a02f120?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();
@endphp

<section class="product-page product-type1">
    <div class="product-shell product-buy-grid">
        <div class="product-gallery">
            <img class="main-image zoomable-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>
        <aside class="buy-panel">
            <p class="eyebrow">{{ optional($product->category)->name }}</p>
            <h1>{{ $product->name }}</h1>
            <p>{{ $product->short_description }}</p>
            <div class="stock-line"><span class="stock-dot"></span>{{ ($product->stock ?? 0) > 0 ? 'In stock' : 'Available on request' }} @if($product->stock) <strong>{{ $product->stock }} available</strong> @endif</div>
            @if($product->price)<div class="product-price">INR {{ number_format((float) $product->price, 2) }}</div>@endif
            <label class="quantity-control">Quantity<input type="number" value="1" min="1"></label>
            <div class="buy-actions">
                @if($product->enable_cart)<button class="button primary" type="button" data-cart-add data-product-id="{{ $product->id }}" data-product-name="{{ $product->name }}">Add to Cart</button><button class="button secondary" type="button" data-buy-now>Buy Now</button>@endif
                <a class="button light" href="#inquiry">Request Quote</a>
            </div>
            <p class="cart-feedback" data-cart-feedback aria-live="polite"></p>
        </aside>
    </div>
</section>

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