@props(['artist'])

{{--
    Fiche de coiffeur sans cadre : le portrait en arche porte la carte, le texte
    vient dessous comme une légende de magazine.
--}}
<article class="group">
    <a href="{{ route('site.artists.show', $artist) }}" class="block">
        <div class="media-arch-soft aspect-4/5">
            @if ($artist->photo_path)
                <img
                    src="{{ Storage::disk('public')->url($artist->photo_path) }}"
                    alt="Portrait de {{ $artist->name }}"
                    loading="lazy"
                    class="size-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
                >
            @else
                <div class="flex size-full items-center justify-center">
                    <span class="font-display text-6xl text-line-strong">{{ Str::substr($artist->name, 0, 1) }}</span>
                </div>
            @endif
        </div>

        <div class="mt-6">
            @if ($artist->role)
                <p class="kicker">{{ $artist->role }}</p>
            @endif

            <h3 @class(['display-card', 'mt-2.5' => (bool) $artist->role])>{{ $artist->name }}</h3>

            @if ($artist->short_bio)
                <p class="mt-3 text-sm leading-relaxed text-ink-muted">{{ $artist->short_bio }}</p>
            @endif

            {{-- Les spécialités se lisent comme une énumération, pas comme des étiquettes. --}}
            @if (filled($artist->specialties))
                <p class="mt-4 text-xs text-ink-subtle">
                    {{ implode(' · ', array_slice($artist->specialties, 0, 4)) }}
                </p>
            @endif
        </div>
    </a>
</article>