@props(['member'])

{{--
  Reusable Speaker / Keynote / Chair card component.
  Matches the home page "Upcoming Keynotes and Chairs" style.
  
  Expected $member keys:
    img      — Unsplash photo ID (optional; use 'image' for a full URL)
    image    — Full image URL (alternative to img)
    name     — Full name
    role     — e.g. Keynote Speaker, Co-Chair
    field    — Research field / discipline
    country  — Institution & country
    bio      — Short research blurb (optional)
    linkedin — URL (optional)
    twitter  — URL (optional)
--}}

@php
    $photoUrl = isset($member['image'])
        ? $member['image']
        : 'https://images.unsplash.com/photo-' . ($member['img'] ?? '1573496359142-b8d87734a5a2') . '?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80';
@endphp

<div class="bg-slate-50 rounded-xl overflow-hidden border border-slate-100 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group flex flex-col">

    {{-- Photo --}}
    <div class="h-48 overflow-hidden relative shrink-0">
        <img src="{{ $photoUrl }}"
             alt="{{ $member['name'] }}"
             class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-500">
        {{-- Role badge overlay --}}
        @if(isset($member['role']))
            <span class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-slate-900/80 to-transparent px-4 py-3 text-white text-[10px] font-bold uppercase tracking-widest">
                {{ $member['role'] }}
            </span>
        @endif
    </div>

    {{-- Content --}}
    <div class="p-5 flex flex-col flex-grow">
        <h3 class="font-bold text-slate-900 text-base mb-0.5 group-hover:text-brand-600 transition-colors leading-snug">
            {{ $member['name'] }}
        </h3>

        @if(isset($member['field']))
            <div class="text-xs font-semibold text-brand-600 uppercase tracking-wide mb-2">
                {{ $member['field'] }}
            </div>
        @endif

        @if(isset($member['country']))
            <p class="text-[11px] text-slate-400 flex items-center gap-1 mb-3">
                <i class="fas fa-map-marker-alt"></i> {{ $member['country'] }}
            </p>
        @endif

        @if(isset($member['bio']) && $member['bio'])
            <div class="mt-auto">
                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Research Focus</div>
                <p class="text-slate-600 text-xs leading-relaxed line-clamp-2">{{ $member['bio'] }}</p>
            </div>
        @endif

        {{-- Social / Profile links --}}
        <div class="flex items-center gap-3 pt-3 mt-3 border-t border-slate-100">
            <a href="{{ $member['linkedin'] ?? '#' }}" class="text-slate-400 hover:text-brand-600 transition-colors text-sm"><i class="fab fa-linkedin"></i></a>
            <a href="{{ $member['twitter'] ?? '#' }}" class="text-slate-400 hover:text-brand-600 transition-colors text-sm"><i class="fab fa-twitter"></i></a>
            <a href="#" class="ml-auto text-xs text-slate-500 hover:text-brand-600 font-semibold transition-colors flex items-center gap-1">
                Profile <i class="fas fa-arrow-right text-[10px]"></i>
            </a>
        </div>
    </div>
</div>