@php
    $img_path = public_path('images/team/' . strtolower($firstname) . '.jpg');

    $img_url = file_exists($img_path)
        ? asset('images/team/' . strtolower($firstname) . '.jpg')
        : null;

    $tel_href = preg_replace('/\s+/', '', $tel);
@endphp

<div class="card-3">
    @if($img_url)
        <img
            class="card-image"
            src="{{ $img_url }}?v=4"
            alt="{{ $firstname }} {{ $lastname }}"
            style="object-position: top;"
        >
    @else
        <div class="flex items-center justify-center aspect-square size-[263px] bg-gray-200 rounded-3xl">
            <i class="text-primary size-32 icon-[mdi--user]"></i>
        </div>
    @endif

    <div class="card-body flex flex-col justify-center items-center gap-6 text-center">
        <div class="card-header pb-2 border-b-1 border-gray-300">
            <div class="card-title text-black font-sora">
                {{ $firstname }} <span class="uppercase text-nowrap">{{ $lastname }}</span>
            </div>
            <div class="card-subtitle italic">{{ $title }}</div>
        </div>

        <div class="card-footer flex flex-col gap-2">
            <a href="tel:{{ $tel_href }}" class="card-phone">
                {{ $tel }}
            </a>

            <a
                href="mailto:{{ $email }}"
                class="btn btn-block card-email js-mail-reveal-copy"
                data-email="{{ $email }}"
            >
                <span class="js-mail-label">Envoyer un mail</span>
                <span class="js-mail-address hidden break-all">{{ $email }}</span>
            </a>
        </div>
    </div>
</div>