@props(['product','related'])
@php($schema=['@context'=>'https://schema.org','@type'=>'Product','name'=>$product['name'],'description'=>$product['introduction'][0],'image'=>asset($product['image']),'brand'=>['@type'=>'Brand','name'=>'Servoknit'],'category'=>'Knitted cotton fabric'])
<x-layout :title="$product['seo_title']" :description="$product['seo_description']" :image="asset($product['image'])" :schema="$schema">
    <section class="product-hero"><div class="shell"><x-breadcrumb :items="['Products'=>route('products.index'),$product['name']=>null]" /><div class="product-hero-grid"><div><p class="eyebrow">{{ $product['eyebrow'] }}</p><h1>{{ $product['hero'] }}</h1>@foreach($product['introduction'] as $paragraph)<p>{{ $paragraph }}</p>@endforeach<div class="hero-actions"><x-button :href="route('contact',['intent'=>'quote','product'=>$product['slug']])">Request a Quote</x-button></div></div><x-media-image :src="$product['image']" :alt="$product['name'].' knitted cotton fabric roll'" ratio="5 / 6" eager class="hero-placeholder" /></div></div></section>

    <section class="section"><div class="shell split-section"><div><p class="eyebrow">Product overview</p><h2>What is {{ $product['name'] }}?</h2><p>{{ $product['what_is'] }}</p><p>{{ $product['what_is_more'] }}</p></div><x-media-image :src="$product['detail_image']" :alt="'Close-up detail of '.$product['name'].' knitted cotton fabric'" ratio="4 / 3" /></div></section>

    <x-product-feature-index
        :heading-lines="['Engineered','Into Every Roll']"
        intro="Designed around the qualities industrial users depend on every day."
        :features="$product['feature_index']"
    />

    <x-why-servoknit :title="'Why Choose Servoknit '.$product['name'].'?'" :reasons="$product['benefits']" />

    <x-product-customisation
        id="specification"
        :heading-lines="['Specified to Your','Requirements']"
        :intro="$product['customisation_intro']"
        :items="$product['customisation_index']"
        :product-name="$product['name']"
        :spec-code="$product['spec_code']"
        :cta-href="route('contact',['intent'=>'quote','product'=>$product['slug']])"
        cta-label="Request Custom Specification"
    />

    <section class="section"><div class="shell quality-panel"><div><p class="eyebrow">Quality Assurance</p><h2>Quality Assurance</h2>@foreach($product['quality'] as $paragraph)<p>{{ $paragraph }}</p>@endforeach</div><x-media-image src="images/generated/quality-inspection.jpg" alt="Inspection of knitted cotton fabric before dispatch" ratio="4 / 3" /></div></section>

    <x-faq :items="$product['faqs']" />
</x-layout>