@php
    $products = config('products');
    $processImages = [
        'images/generated/process-yarn-selection.jpg',
        'images/generated/process-circular-knitting.jpg',
        'images/generated/process-fabric-inspection.jpg',
        'images/generated/process-finishing-line.jpg',
        'images/generated/process-roll-packaging.jpg',
        'images/generated/process-dispatch.jpg',
    ];
@endphp
<x-layout>
    <div class="home-page">
        <section class="home-hero"><div class="shell home-hero-grid"><div class="home-hero-copy"><h1>Premium Mutton Cloth &amp;<br><span>Stockinette Manufacturer</span></h1><p class="hero-subhead">Engineered for Industries Where Quality Matters.</p><p>Trusted across Defence, Aviation, Industrial Cleaning, Automotive, Packaging and Commercial Applications.</p><div class="hero-actions"><x-button :href="route('contact',['intent'=>'quote'])">Request a Quote</x-button><x-button :href="route('products.index')" variant="outline">Explore Products</x-button></div></div><x-media-image src="images/mutton-cloth-folded.webp" alt="Folded premium knitted cotton Mutton Cloth" ratio="4 / 5" eager class="home-hero-media" /></div></section>

        <section class="home-about"><div class="shell home-about-grid"><div class="home-about-copy"><p class="eyebrow">About Servoknit</p><h2>Manufacturing Quality.<br>Delivering Confidence.</h2><p>Servoknit manufactures premium Mutton Cloth and Stockinette for industries where consistency, durability and performance matter.</p><p>With precision knitting, quality raw materials and a commitment to excellence, we deliver products that businesses can rely on—order after order.</p><x-button :href="route('about')" variant="text">Learn More</x-button></div><x-media-image src="images/generated/knitting-facility.jpg" alt="Circular knitting machinery producing white knitted cotton fabric" ratio="4 / 3" class="home-about-media" /></div></section>

        <section class="home-products"><div class="shell"><header class="home-products-header"><p class="eyebrow">Our Products</p><h2>Engineered for Performance</h2></header><div class="home-product-panels">@foreach($products as $product)<article class="home-product-panel"><x-media-image :src="$product['image']" :alt="$product['name'].' knitted cotton fabric'" ratio="4 / 3" /><div><h3>{{ $product['name'] }}</h3><p>{{ $product['short_description'] }}</p><a href="{{ route('products.'.$product['slug']) }}">View Product →</a></div></article>@endforeach</div></div></section>

        <x-industries-section />

        <section class="quality-story-section"><div class="shell quality-story"><div class="quality-story-heading"><p class="eyebrow">Why Servoknit</p><h2>Built Around<br>Quality</h2></div><x-media-image src="images/generated/quality-inspection.jpg" alt="Hands inspecting the knitted cotton construction of finished fabric" ratio="4 / 5" class="quality-story-visual" /><div class="quality-story-list">@foreach(['Precision Manufacturing'=>'Every product is manufactured using carefully selected cotton yarns and advanced knitting processes.','Consistent Performance'=>'Uniform quality that delivers reliable results across demanding industrial environments.','Custom Manufacturing'=>'Available in customised widths, roll lengths, fabric weights and packaging.','Reliable Supply'=>'Supporting businesses with dependable production capacity and timely deliveries.'] as $title=>$copy)<article><h3>{{ $title }}</h3><p>{{ $copy }}</p></article>@endforeach</div></div></section>

        <section class="process-storyboard-section" x-data="processSlider({{ count(config('sarvoknit.process')) }})"><div class="shell"><header class="process-storyboard-header"><div><p class="eyebrow">Manufacturing Process</p><h2>Precision in Every Knit</h2></div><p>From yarn selection to final dispatch, our process keeps attention on the material at every stage.</p></header><div class="process-slider-controls" aria-label="Manufacturing process slider controls"><p aria-live="polite"><span x-text="String(active + 1).padStart(2, '0')">01</span> / {{ str_pad(count(config('sarvoknit.process')), 2, '0', STR_PAD_LEFT) }}</p><div><button type="button" @click="previous()" :disabled="active === 0" aria-label="Previous manufacturing step">←</button><button type="button" @click="next()" :disabled="active === total - 1" aria-label="Next manufacturing step">→</button></div></div><ol x-ref="track" class="process-storyboard" tabindex="0" aria-label="Manufacturing process sequence" data-lenis-prevent @scroll.debounce.80ms="sync()" @keydown.left.prevent="previous()" @keydown.right.prevent="next()">@foreach(config('sarvoknit.process') as $step)<li class="process-panel"><x-media-image :src="$processImages[$loop->index]" :alt="$step.' stage of the Servoknit manufacturing process'" ratio="3 / 4" /><div class="process-panel-meta"><span>{{ str_pad($loop->iteration,2,'0',STR_PAD_LEFT) }}</span><h3>{{ $step }}</h3></div></li>@endforeach</ol></div></section>

        <section class="home-commitment"><div class="shell home-commitment-grid"><div><p class="eyebrow">Our Commitment</p><h2>Quality Without<br>Compromise</h2></div><div><p>Every roll that leaves our facility reflects our commitment to consistency, precision and dependable manufacturing.</p><p>Because when industries rely on your product, quality isn’t optional.</p></div></div></section>

        <x-cta class="home-final-cta" />
    </div>
</x-layout>