@php
    $isComparison = $slug === 'mutton-cloth-vs-stockinette';
    $listingArticle = collect(config('insights.featured'))->firstWhere('slug', $slug);
    $eyebrow = $article['eyebrow'] ?? ($listingArticle['category'] ?? $article['category']);
    $readTime = $article['read_time'] ?? ($listingArticle['read_time'] ?? null);
    $deck = $article['deck'] ?? $article['excerpt'];
    $tocItems = $isComparison
        ? [
            ['id' => 'introduction', 'label' => 'Introduction'],
            ['id' => 'understanding-the-basics', 'label' => 'Understanding the Basics'],
            ['id' => 'similarities', 'label' => 'Similarities'],
            ['id' => 'common-applications', 'label' => 'Common Applications'],
            ['id' => 'which-product-should-you-choose', 'label' => 'Which Product Should You Choose?'],
            ['id' => 'why-manufacturing-quality-matters', 'label' => 'Why Manufacturing Quality Matters'],
            ['id' => 'conclusion', 'label' => 'Conclusion'],
        ]
        : collect($article['sections'])->map(fn ($section) => ['id' => Str::slug($section['heading']), 'label' => $section['heading']])->all();
    $relatedBySlug = collect(config('insights.featured'))->keyBy('slug');
    $relatedArticles = collect(['what-is-stockinette', 'what-is-mutton-cloth', 'choosing-industrial-cleaning-cloth'])
        ->reject(fn ($relatedSlug) => $relatedSlug === $slug)
        ->map(fn ($relatedSlug) => $relatedBySlug->get($relatedSlug))->filter()->take(3);
    $schema = ['@context'=>'https://schema.org','@type'=>'Article','headline'=>$article['title'],'description'=>$article['excerpt'],'image'=>asset($article['image']),'author'=>['@type'=>'Organization','name'=>'Servoknit'],'publisher'=>['@type'=>'Organization','name'=>'Servoknit'],'mainEntityOfPage'=>url()->current()];
@endphp
<x-layout :title="$article['title'].' | Servoknit Insights'" :description="$article['excerpt']" :image="asset($article['image'])" :schema="$schema" og-type="article">
    <article class="article-detail-page">
        <header class="article-detail-hero">
            <div class="shell">
                <x-breadcrumb :items="['Insights'=>route('insights.index'),$article['title']=>null]" />
                <div class="article-detail-hero-copy">
                    <p class="eyebrow">{{ $eyebrow }}</p>
                    <h1>{{ $article['title'] }}</h1>
                    <p class="article-detail-deck">{{ $deck }}</p>
                    <p class="article-detail-meta">{{ $eyebrow }}@if($readTime)<span aria-hidden="true">·</span>{{ $readTime }}@endif @if(!empty($article['published_at']))<span aria-hidden="true">·</span>{{ $article['published_at'] }}@endif</p>
                </div>
                <x-media-image :src="$article['image']" :alt="'Knitted cotton materials illustrating '.$article['title']" ratio="16 / 9" eager class="article-detail-hero-image" />
            </div>
        </header>

        <div class="article-mobile-toc shell"><details><summary>On this page <span aria-hidden="true">+</span></summary><ol>@foreach($tocItems as $item)<li><a href="#{{ $item['id'] }}">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }} {{ $item['label'] }}</a></li>@endforeach</ol></details></div>

        <div class="article-reading-layout shell">
            <aside class="article-toc" aria-label="Table of contents"><p>Contents</p><ol>@foreach($tocItems as $item)<li><a href="#{{ $item['id'] }}"><span>{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>{{ $item['label'] }}</a></li>@endforeach</ol></aside>
            <div class="article-detail-content">
                @if($isComparison)
                    <section id="introduction"><h2>Introduction</h2>@foreach($article['sections'][0]['paragraphs'] as $paragraph)<p>{{ $paragraph }}</p>@endforeach</section>
                    <section id="understanding-the-basics"><h2>Understanding the Basics</h2>@foreach($article['sections'][1]['subsections'] as $subsection)<h3>{{ $subsection['heading'] }}</h3>@foreach($subsection['paragraphs'] ?? [] as $paragraph)<p>{{ $paragraph }}</p>@endforeach @endforeach @if(!empty($article['comparison_table']))<h3>Mutton Cloth vs Stockinette</h3><div class="comparison-table-wrap"><table><thead><tr>@foreach($article['comparison_table']['headings'] as $heading)<th scope="col">{{ $heading }}</th>@endforeach</tr></thead><tbody>@foreach($article['comparison_table']['rows'] as $row)<tr>@foreach($row as $cell)<td>{{ $cell }}</td>@endforeach</tr>@endforeach</tbody></table></div>@endif</section>
                    <aside class="article-takeaway"><p>Key Takeaway</p><blockquote>Both materials are versatile knitted cotton products, but their construction determines where each performs best.</blockquote></aside>
                    <section id="similarities"><h2>Similarities</h2>@php($similarities = $article['sections'][2]['subsections'][0]) @foreach($similarities['paragraphs'] ?? [] as $paragraph)<p>{{ $paragraph }}</p>@endforeach <ul>@foreach($similarities['bullets'] ?? [] as $item)<li>{{ $item }}</li>@endforeach</ul></section>
                    <section id="common-applications"><h2>Common Applications</h2>@foreach($article['sections'][3]['subsections'] as $subsection)<h3>{{ $subsection['heading'] }}</h3>@foreach($subsection['paragraphs'] ?? [] as $paragraph)<p>{{ $paragraph }}</p>@endforeach @endforeach</section>
                    <section id="which-product-should-you-choose">
                        <h2>Which Product Should You Choose?</h2><p>The right choice depends on your application.</p>
                        <div class="article-comparison-block">
                            <div><h3>Choose Mutton Cloth if your requirement involves:</h3><ul><li>General industrial cleaning</li><li>Polishing</li><li>Wiping surfaces</li><li>Wrapping applications</li><li>Heavy-duty maintenance</li></ul></div>
                            <div><h3>Choose Stockinette if your application requires:</h3><ul><li>Tubular construction</li><li>Better stretchability</li><li>Protective covering</li><li>Component wrapping</li><li>Specialised industrial requirements</li></ul></div>
                        </div>
                    </section>
                    <aside class="article-inline-cta" aria-labelledby="article-cta-title"><p class="eyebrow">Need Help Choosing?</p><h2 id="article-cta-title">Not sure which material is right for your application?</h2><p>Tell us your required width, weight, usage and quantity, and our team can recommend the right specification.</p><x-button :href="route('contact', ['intent' => 'quote'])">Request a Quote</x-button></aside>
                    <section id="why-manufacturing-quality-matters"><h2>Why Manufacturing Quality Matters</h2>@foreach($article['sections'][5]['paragraphs'] ?? [] as $paragraph)<p>{{ $paragraph }}</p>@endforeach <ul>@foreach($article['sections'][5]['bullets'] ?? [] as $item)<li>{{ $item }}</li>@endforeach</ul>@foreach($article['sections'][5]['after'] ?? [] as $paragraph)<p>{{ $paragraph }}</p>@endforeach</section>
                    <section id="conclusion"><h2>Conclusion</h2>@foreach($article['sections'][6]['paragraphs'] as $paragraph)<p>{{ $paragraph }}</p>@endforeach</section>
                @else
                    @foreach($article['sections'] as $section)
                        <section id="{{ Str::slug($section['heading']) }}"><h2>{{ $section['heading'] }}</h2>@foreach($section['paragraphs'] ?? [] as $paragraph)<p>{{ $paragraph }}</p>@endforeach @if($section['bullets'] ?? false)<ul>@foreach($section['bullets'] as $item)<li>{{ $item }}</li>@endforeach</ul>@endif @foreach($section['after'] ?? [] as $paragraph)<p>{{ $paragraph }}</p>@endforeach @foreach($section['subsections'] ?? [] as $subsection)<h3>{{ $subsection['heading'] }}</h3>@foreach($subsection['paragraphs'] ?? [] as $paragraph)<p>{{ $paragraph }}</p>@endforeach @if($subsection['bullets'] ?? false)<ul>@foreach($subsection['bullets'] as $item)<li>{{ $item }}</li>@endforeach</ul>@endif @foreach($subsection['after'] ?? [] as $paragraph)<p>{{ $paragraph }}</p>@endforeach @endforeach</section>
                    @endforeach
                @endif
            </div>
        </div>
    </article>
    <x-faq :items="$article['faqs']" class="article-detail-faq" />
    @if($relatedArticles->isNotEmpty())<section class="related-insights" aria-labelledby="related-insights-title"><div class="shell"><header><h2 id="related-insights-title">Related Insights</h2></header><div class="related-insights-grid">@foreach($relatedArticles as $relatedArticle)<x-article-card :article="$relatedArticle" :slug="$relatedArticle['slug']" />@endforeach</div></div></section>@endif
</x-layout>