{{-- Single team member card. Expects $member (App\Models\Team), optional $currentCompany --}}
@php
    $hasLinkedin = $member->hasLinkedin();
    $linkedinUrl = $hasLinkedin ? $member->linkedin_url : null;
    $companyDisplay = $currentCompany ?? ($member->company_working_with ?: 'Farmers for Forests');
    $roleDisplay = !empty($currentCompany) ? $member->designationFor($currentCompany) : $member->designation;
@endphp

<div class="team-card-wrapper" 
     data-name="{{ strtolower($member->name) }}" 
     data-role="{{ strtolower($roleDisplay) }}" 
     data-company="{{ strtolower($companyDisplay) }}"
     data-department="{{ strtolower($member->department) }}">
    <div class="team-card {{ $hasLinkedin ? 'has-link' : '' }}"
         @if($hasLinkedin) 
             onclick="window.open('{{ $linkedinUrl }}', '_blank', 'noopener,noreferrer')" 
             title="View {{ $member->name }} on LinkedIn" 
         @endif>
        
        <div class="team-card-image-box">
            <img src="{{ $member->photo_url }}" 
                 alt="{{ $member->name }}" 
                 class="team-card-img" 
                 loading="lazy"
                 onerror="this.onerror=null;this.src='{{ \App\Models\Team::defaultPhoto() }}';">
            
            @if($hasLinkedin)
                <a href="{{ $linkedinUrl }}" 
                   target="_blank" 
                   rel="noopener noreferrer" 
                   class="team-card-linkedin-badge" 
                   onclick="event.stopPropagation();"
                   title="LinkedIn Profile" 
                   aria-label="LinkedIn profile of {{ $member->name }}">
                    <svg class="team-card-linkedin-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448" aria-hidden="true" focusable="false">
                        <path fill="currentColor" d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"/>
                    </svg>
                </a>
            @endif
        </div>

        <div class="team-card-content">
            <h4 class="team-card-name">{{ $member->name }}</h4>
            <div class="team-card-position">{{ $roleDisplay }}</div>
            
            <div class="team-card-company-tag" title="{{ $companyDisplay }}">
                <i class="fa fa-briefcase"></i>
                <span class="truncate">{{ $companyDisplay }}</span>
            </div>
        </div>
    </div>
</div>