@props([
    'eyebrow' => 'Industries We Serve',
    'titleFirst' => 'Trusted Across',
    'titleSecond' => 'Diverse Industries',
    'intro' => null,
])

<section class="industries-section">
    <div class="shell">
        <header class="sectors-heading"><div><p class="eyebrow">{{ $eyebrow }}</p><h2>{{ $titleFirst }}<br>{{ $titleSecond }}</h2></div>@if($intro)<p>{{ $intro }}</p>@endif</header>
        <div class="sectors-bento">
            @foreach(config('sarvoknit.industry_cards') as $industry)
                <article class="sector-card sector-card--{{ $industry['slug'] }} sector-card--{{ $industry['type'] }}">
                    @if($industry['type'] === 'image')
                        <x-media-image :src="$industry['image_path']" :alt="$industry['image']" ratio="16 / 9" class="sector-visual" /><div class="sector-overlay" aria-hidden="true"></div><div class="sector-copy"><h3>{{ $industry['name'] }}</h3><p>{{ $industry['description'] }}</p></div>
                    @elseif($industry['type'] === 'split')
                        <div class="sector-copy"><h3>{{ $industry['name'] }}</h3><p>{{ $industry['description'] }}</p></div><x-media-image :src="$industry['image_path']" :alt="$industry['image']" ratio="5 / 3" class="sector-visual" />
                    @elseif($industry['type'] === 'image-top')
                        <x-media-image :src="$industry['image_path']" :alt="$industry['image']" ratio="3 / 2" class="sector-visual" /><div class="sector-copy"><h3>{{ $industry['name'] }}</h3><p>{{ $industry['description'] }}</p></div>
                    @elseif($industry['type'] === 'wide-split')
                        <div class="sector-copy"><h3>{{ $industry['name'] }}</h3><p>{{ $industry['description'] }}</p></div><x-media-image :src="$industry['image_path']" :alt="$industry['image']" ratio="4 / 3" class="sector-visual" />
                    @else
                        <x-media-image :src="$industry['image_path']" :alt="$industry['image']" ratio="3 / 2" class="sector-texture" /><div class="sector-copy"><h3>{{ $industry['name'] }}</h3>@if($industry['description'])<p>{{ $industry['description'] }}</p>@endif</div>
                    @endif
                </article>
            @endforeach
        </div>
    </div>
</section>