@props(['eyebrow' => 'Key Features', 'headingLines' => [], 'intro' => null, 'features' => []])
<section class="feature-swatch-section" aria-labelledby="feature-swatch-title">
    <div class="shell">
        <header class="feature-swatch-heading">
            <p class="eyebrow">{{ $eyebrow }}</p>
            <h2 id="feature-swatch-title">@foreach($headingLines as $line){{ $line }}@if(!$loop->last)<br>@endif @endforeach</h2>
        </header>

        <div class="feature-swatch-rail">
            @foreach(array_slice($features, 0, 6) as $feature)
                <article class="feature-swatch feature-swatch--{{ (($loop->iteration - 1) % 3) + 1 }}">
                    <svg class="feature-swatch-icon" viewBox="0 0 64 48" aria-hidden="true" focusable="false">
                        @switch($feature['icon'] ?? $loop->iteration)
                            @case(1)
                                <path d="M19 8h22l6 31H13Z" />
                                <path d="M17 18c8 3 18 3 27 0M15 27c10 3 21 3 31 0M14 35c11 3 23 3 34 0" />
                                <ellipse cx="30" cy="8" rx="11" ry="3" />
                                <path d="M47 39c5 0 8 2 10 6" />
                                @break
                            @case(2)
                                <path d="M32 6S18 23 18 32a14 14 0 0 0 28 0C46 23 32 6 32 6Z" />
                                <path d="M25 33c1 5 4 7 9 8M8 44c7-3 13-3 20 0s14 3 21 0 7-2 10-1" />
                                @break
                            @case(3)
                                <path d="M8 18c8-8 16 8 24 0s16 8 24 0v15c-8 8-16-8-24 0S16 25 8 33Z" />
                                <path d="M8 24c8-8 16 8 24 0s16 8 24 0M13 38c7-4 13 3 19-1s12 3 19-1" />
                                @break
                            @case(4)
                                <rect x="10" y="7" width="44" height="34" />
                                <path d="M10 16h44M10 25h44M10 34h44M21 7v34M32 7v34M43 7v34" />
                                <path d="m6 12 4-5 5 4M49 37l5 4 4-5" />
                                @break
                            @case(5)
                                <path d="M15 16h34v18H15zM15 20l7 10 7-10 7 10 7-10 6 9" />
                                <path d="M5 40h54M5 40l7-6M5 40l7 6M59 40l-7-6M59 40l-7 6" />
                                @break
                            @case(7)
                                <ellipse cx="22" cy="24" rx="13" ry="17" />
                                <path d="M22 7h20c8 0 13 7 13 17s-5 17-13 17H22M22 13h20c5 0 8 4 8 11s-3 11-8 11H22" />
                                <path d="M16 10c8 8 8 20 0 28M27 9c-7 9-7 21 0 30" />
                                @break
                            @default
                                <path d="M12 29h31c6 0 10 3 10 8s-4 8-10 8H22c-8 0-13-5-13-11 0-3 1-5 3-7" />
                                <ellipse cx="43" cy="37" rx="10" ry="8" />
                                <ellipse cx="43" cy="37" rx="3" ry="2.5" />
                                <path d="M13 29V13c0-2 1-4 3-4s3 2 3 4v10-13c0-2 1-4 3-4s3 2 3 4v13-11c0-2 1-4 3-4s3 2 3 4v12-8c0-2 1-4 3-4s3 2 3 4v13" />
                        @endswitch
                    </svg>
                    <div class="feature-swatch-copy">
                        <h3>{{ $feature['title'] }}</h3>
                        @if(!empty($feature['description']))<p>{{ $feature['description'] }}</p>@endif
                    </div>
                    <span class="feature-swatch-bar" aria-hidden="true"></span>
                </article>
            @endforeach
        </div>

        <footer class="feature-swatch-footer">
            <div class="feature-swatch-legend" aria-label="Feature colour key">
                <span><i class="legend-mark legend-mark--1"></i>Material</span>
                <span><i class="legend-mark legend-mark--2"></i>Performance</span>
                <span><i class="legend-mark legend-mark--3"></i>Handling</span>
            </div>
            @if($intro)<p>{{ $intro }}</p>@endif
        </footer>
    </div>
</section>