@extends('layouts.app')

@section('title', 'Official Referees - Lumbini Province Taekwondo Association')

@section('content')

<!-- Page Hero -->
<section style="background: linear-gradient(135deg, var(--blue) 0%, #0d1f45 100%); padding: 120px 0 60px; text-align: center; color: var(--white); position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%); background-size: 20px 20px;"></div>
    <div class="container" style="position: relative; z-index: 2;">
        <span class="section-label" style="color: var(--gold-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px;">OFFICIALS</span>
        <h1 style="font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-top: 10px;">Official LPTA <span style="color: var(--gold-light);">Referees</span></h1>
        <div class="divider" style="margin: 15px auto 0;"></div>
    </div>
</section>

<!-- Content Grid -->
<section class="section-pad" style="background: var(--white);">
    <div class="container">
        @if($referees->count() > 0)
        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;">
            @foreach($referees as $ref)
            <div class="people-card" style="background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); transition: var(--transition);" onmouseenter="this.style.transform='translateY(-6px)'; this.style.boxShadow='var(--shadow-md)'" onmouseleave="this.style.transform='none'; this.style.boxShadow='var(--shadow-sm)'">
                @if($ref->photo)
                    <img src="{{ asset($ref->photo) }}" alt="{{ $ref->name }}" style="aspect-ratio: 16/10; width: 100%; border-radius: var(--radius) var(--radius) 0 0; object-fit: cover; display: block;">
                @else
                    <div class="people-avatar" style="aspect-ratio: 16/10; width: 100%; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(135deg, #c0392b, #e74c3c); font-size: 4rem;">
                        {{ substr($ref->name, 0, 1) }}
                    </div>
                @endif
                <div class="people-info" style="padding: 24px; text-align: left;">
                    <h3 style="font-family: 'Oswald', sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--blue); margin-bottom: 6px;">{{ $ref->name }}</h3>
                    <div style="font-size: 0.8rem; color: var(--gold); font-weight: 700; margin-bottom: 12px; letter-spacing: 0.5px; text-transform: uppercase;">
                        {{ $ref->certification_level }}
                    </div>
                    
                    <div style="display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; color: var(--gray-700); margin-bottom: 16px;">
                        <span><i class="fas fa-clock" style="color: var(--red); margin-right: 6px; width: 16px;"></i> {{ $ref->experience_years }} Years Judging Experience</span>
                        @if($ref->email)
                        <span><i class="fas fa-envelope" style="color: var(--red); margin-right: 6px; width: 16px;"></i> {{ $ref->email }}</span>
                        @endif
                    </div>
                    
                    @if($ref->bio)
                    <p style="font-size: 0.85rem; color: var(--gray-500); line-height: 1.6; border-top: 1px solid var(--gray-100); padding-top: 12px; margin-top: 12px;">
                        {{ $ref->bio }}
                    </p>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div style="text-align: center; padding: 80px 40px; color: var(--gray-500);">
            <i class="fas fa-users-slash" style="font-size: 3.5rem; opacity: 0.3; margin-bottom: 16px;"></i>
            <p>No active referees registered in the system.</p>
        </div>
        @endif
    </div>
</section>

@endsection