@props(['conference'])

{{--
  Reusable Conference Card Component
  Matches the home page card style: image top, date+location, bold title, View Details button.
  Usage: <x-conference-card :conference="$conference" />
--}}

<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group flex flex-col">
    {{-- Image --}}
    <div class="h-52 overflow-hidden relative shrink-0">
        <img src="{{ $conference['image'] ?? 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' }}"
             alt="{{ $conference['title'] ?? 'Conference' }}"
             class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
        {{-- Gradient overlay --}}
        <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        {{-- Category badge (if available) --}}
        @if(isset($conference['category']))
            <span class="absolute top-3 right-3 px-3 py-1 bg-white/90 backdrop-blur-sm text-slate-800 text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm">
                {{ $conference['category'] }}
            </span>
        @endif
    </div>

    {{-- Content --}}
    <div class="p-6 flex flex-col flex-grow">
        {{-- Date + Location --}}
        <div class="flex items-start gap-x-3 text-xs text-slate-500 mb-4">
            <span class="flex items-center gap-1.5 shrink-0">
                <i class="far fa-calendar-alt text-brand-500"></i>
                {{ $conference['date'] ?? ($conference['formatted_date'] ?? 'TBA') }}
            </span>
            <span class="text-slate-300">•</span>
            <span class="flex items-center gap-1.5">
                <i class="fas fa-map-marker-alt text-brand-500 shrink-0"></i>
                {{ $conference['location'] ?? 'TBA' }}
            </span>
        </div>

        {{-- Title --}}
        <h3 class="font-bold text-lg text-slate-900 leading-snug mb-auto group-hover:text-brand-600 transition-colors line-clamp-2">
            {{ $conference['title'] ?? 'Conference Title' }}
        </h3>

        {{-- Deadline (if available) --}}
        @if(isset($conference['deadline']) && $conference['deadline'])
            <p class="text-xs text-orange-600 mt-3 flex items-center gap-1.5">
                <i class="far fa-clock"></i> Abstract Deadline: {{ $conference['deadline'] }}
            </p>
        @endif

        {{-- CTA Button --}}
        <div class="mt-5 pt-4 border-t border-slate-100">
            <a href="{{ isset($conference['slug']) ? route('conference.show', $conference['slug']) : '#' }}"
               class="block w-full text-center text-sm font-bold text-white bg-slate-900 hover:bg-brand-600 px-4 py-3 rounded-xl transition-all duration-300 shadow-sm hover:shadow-lg hover:shadow-brand-600/20">
                View Details
            </a>
        </div>
    </div>
</div>