@extends('layouts.public')
@section('title', 'Docentes')

@section('content')
@include('partials.page-header', ['title' => $settings?->teachers_title ?: 'Nuestros Docentes'])

<section class="section">
    <div class="container">
        <div class="text-center mb-5">
            <span class="badge-pill">Equipo</span>
            <h2 class="section-title mt-2">Equipo Docente</h2>
            <p class="section-subtitle mx-auto">Profesionales comprometidos con la educacion y el desarrollo integral de cada estudiante.</p>
        </div>
        <div class="row g-4 justify-content-center">
            @forelse($teachers as $teacher)
                <div class="col-md-4 col-lg-3">
                    <div class="card card-hover h-100 shadow-sm text-center">
                        <div class="card-body p-4">
                            <img src="{{ $teacher->photo ? image_url($teacher->photo) : 'https://ui-avatars.com/api/?name=' . urlencode($teacher->name) . '&background=1e40af&color=fff&size=160' }}"
                                 class="rounded-circle mb-3 mx-auto" style="width:120px;height:120px;object-fit:cover;" alt="{{ $teacher->name }}">
                            <h6 class="fw-bold mb-1">{{ $teacher->name }}</h6>
                            <div class="text-primary fw-semibold small">{{ $teacher->position ?: '' }}</div>
                            @if($teacher->subject)<div class="text-muted small">{{ $teacher->subject }}</div>@endif
                            @if($teacher->email)
                                <a href="mailto:{{ $teacher->email }}" class="text-muted small text-decoration-none"><i class="bi bi-envelope me-1"></i>{{ $teacher->email }}</a>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center text-muted py-5">No hay docentes registrados.</div>
            @endforelse
        </div>
    </div>
</section>
@endsection