@php
    $articles = config('insights.featured');
    $featuredArticle = array_shift($articles);
@endphp
<x-layout title="Featured Articles | Servoknit" description="Featured articles about Mutton Cloth, Stockinette, industrial cleaning fabric, textile manufacturing quality and custom manufacturing.">
    <main class="insights-page">
        <section class="page-hero insights-page-hero">
            <div class="shell">
                <x-breadcrumb :items="['Insights'=>null]" />
                <p class="eyebrow">Insights</p>
                <h1>Featured<br><span>Articles</span></h1>
                <p>Insights, applications and technical guidance for industrial textile products.</p>
            </div>
        </section>

        <section class="insights-featured" aria-label="Featured article">
            <div class="shell">
                <x-article-card :article="$featuredArticle" :slug="$featuredArticle['slug'] ?? null" featured />
            </div>
        </section>

        <section class="insights-latest" aria-labelledby="latest-insights-title">
            <div class="shell">
                <header class="insights-latest-heading">
                    <h2 id="latest-insights-title">Latest Insights</h2>
                </header>
                <div class="article-grid">
                    @foreach($articles as $article)
                        <x-article-card :article="$article" :slug="$article['slug'] ?? null" />
                    @endforeach
                </div>
            </div>
        </section>

    </main>
</x-layout>