@php
    use App\Helpers\SeoHelper;

    $projectExcerpt = static function (array $project) use ($locale): ?string {
        if (SeoHelper::requiresOwnPublicCopy($locale) && isset($project['hero']['subtitle'])) {
            return $project['hero']['subtitle'];
        }
        if (isset($project['hero']['description'])) {
            return $project['hero']['description'];
        }
        if (isset($project['hero']['subtitle'])) {
            return $project['hero']['subtitle'];
        }
        if (isset($project['overview']['solution'])) {
            return $project['overview']['solution'];
        }

        return null;
    };

    $isLatestCaseStudy = ($project['slug'] ?? '') === 'jean-pascal';
    $projectUrl = $localizedRoute('portfolio.show', ['slug' => $project['slug']]);
    $projectImage = $project['hero']['image'] ?? null;
    $projectAlt = $project['alt_text']['hero'] ?? ($project['title'] . ' - Criazo');
    $excerpt = $projectExcerpt($project);
@endphp
<article
    class="portfolio-bento__card portfolio-bento__card--{{ $size }} portfolio-bento__card--enter group"
    style="animation-delay: {{ min($animIndex, 12) * 60 }}ms"
    itemscope
    itemtype="https://schema.org/CreativeWork">
    <a href="{{ $projectUrl }}"
       class="portfolio-bento__link"
       title="{{ $portfolioText('page.view_case_study') }}: {{ $project['title'] }}"
       itemprop="url">
        <div class="portfolio-bento__media" aria-hidden="true">
            @if($projectImage)
            <img src="{{ $projectImage }}"
                 alt="{{ $projectAlt }}"
                 width="1200"
                 height="900"
                 loading="{{ $animIndex === 0 ? 'eager' : 'lazy' }}"
                 decoding="{{ $animIndex === 0 ? 'sync' : 'async' }}"
                 @if($animIndex === 0) fetchpriority="high" @endif
                 itemprop="image">
            @else
            <div class="w-full h-full bg-gradient-to-br from-criazo-primary/30 to-slate-900 flex items-center justify-center">
                <svg class="w-16 h-16 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
            </div>
            @endif
        </div>
        <div class="portfolio-bento__shade" aria-hidden="true"></div>
        <div class="portfolio-bento__shade-soft" aria-hidden="true"></div>

        <div class="portfolio-bento__top">
            <h2 class="portfolio-bento__title" itemprop="name">{{ $project['title'] }}</h2>
            @if($isLatestCaseStudy)
            <span class="portfolio-bento__badge">{{ $portfolioText('page.latest_badge') }}</span>
            @endif
        </div>

        <div class="portfolio-bento__dock">
            @if(isset($project['category']))
            <p class="portfolio-bento__meta">{{ $compactCategory($project['category']) }}</p>
            @endif
            <div class="portfolio-bento__foot">
                @if($excerpt)
                <p class="portfolio-bento__desc" itemprop="description">{{ $excerpt }}</p>
                @endif
                <span class="portfolio-bento__cta">
                    {{ $portfolioText('page.view_case_study') }}
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                    </svg>
                </span>
            </div>
        </div>
    </a>
</article>