@if(!empty($portfolio['items']))
    @php
        $featured = collect($portfolio['items'])->filter(fn ($item) => ! empty($item['featured']))->take(3);
    @endphp

    <section class="work-teaser section" id="work" aria-labelledby="work-teaser-title" @sectionTone($portfolio['style'] ?? [])>
        <div class="container">
            <div class="section-head section-head--split reveal">
                <div>
                    <p class="eyebrow" data-edit="portfolio.frontEyebrow">{{ $portfolio['frontEyebrow'] ?? '' }}</p>
                    <h2 id="work-teaser-title"><x-editable path="portfolio.frontTitle">{{ $portfolio['frontTitle'] ?? '' }}</x-editable></h2>
                </div>
                <div class="work-teaser__intro">
                    <p class="section-head__desc"><x-editable path="portfolio.frontDescription">{{ $portfolio['frontDescription'] ?? '' }}</x-editable></p>
                    <a class="link-arrow" href="{{ route('portfolio') }}">
                        <x-editable path="portfolio.frontCta">{{ $portfolio['frontCta'] ?? 'View the full portfolio' }}</x-editable>
                        <span aria-hidden="true">&rarr;</span>
                    </a>
                </div>
            </div>

            <div class="work-teaser__grid">
                @foreach($featured as $index => $item)
                    @php
                        $name = $item['name'] ?? '';
                        $initials = collect(preg_split('/\s+/', trim($name)))
                            ->filter()
                            ->map(fn ($part) => mb_substr($part, 0, 1))
                            ->take(2)
                            ->implode('');
                    @endphp
                    <article class="teaser-card reveal" style="--work-hue: {{ ($loop->index * 47 + 8) % 360 }}">
                        <div class="teaser-card__media">
                            @if(!empty($item['image']))
                                <img src="{{ $item['image'] }}" alt="{{ $name }}" loading="lazy">
                            @else
                                <div class="work-card__placeholder" aria-hidden="true">
                                    <span>{{ $initials }}</span>
                                </div>
                            @endif
                            <span class="teaser-card__sector" data-edit="portfolio.items.{{ $index }}.sector">{{ $item['sector'] ?? '' }}</span>
                        </div>

                        <div class="teaser-card__body">
                            <p class="teaser-card__year" data-edit="portfolio.items.{{ $index }}.year">{{ $item['year'] ?? '' }}</p>
                            <h3 class="teaser-card__name">
                                <x-editable path="portfolio.items.{{ $index }}.name">{{ $name }}</x-editable>
                            </h3>
                            <p class="teaser-card__summary">
                                <x-editable path="portfolio.items.{{ $index }}.summary">{{ $item['summary'] ?? '' }}</x-editable>
                            </p>
                            @if(!empty($item['metrics'][0]))
                                <p class="teaser-card__metric">
                                    <strong data-edit="portfolio.items.{{ $index }}.metrics.0.value">{{ $item['metrics'][0]['value'] ?? '' }}</strong>
                                    <span data-edit="portfolio.items.{{ $index }}.metrics.0.label">{{ $item['metrics'][0]['label'] ?? '' }}</span>
                                </p>
                            @endif
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>
@endif