@extends('layouts.app')

@section('content')
    <section class="a4w-section">
        <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
            <div>
                <span class="a4w-kicker">Doctors</span>
                <h1 class="mt-4 a4w-heading">Our Doctors</h1>
                <p class="mt-3 text-slate-600">Meet experienced specialists in mental and physical healthcare.</p>
            </div>
            <input type="text" placeholder="Filter by specialization (optional)" class="w-full rounded-xl border-slate-200 p-3 md:max-w-sm">
        </div>

        <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ([['Dr. Neema James', 'Clinical Psychologist'], ['Dr. Kelvin Mushi', 'General Physician'], ['Dr. Asha Komba', 'Nutrition Specialist'], ['Dr. Peter Nyerere', 'Family Medicine'], ['Dr. Ruth Mgaya', 'Mental Wellness'], ['Dr. Joel Mrema', 'Internal Medicine']] as $doctor)
                <x-card class="a4w-soft-panel overflow-hidden">
                    <div class="h-40 rounded-xl bg-slate-100 ring-1 ring-slate-200"></div>
                    <h3 class="mt-4 font-semibold text-slate-900">{{ $doctor[0] }}</h3>
                    <p class="text-sm text-slate-500">{{ $doctor[1] }}</p>
                    <span class="a4w-badge-blue mt-3">Available Today</span>
                    <div class="mt-4">
                        <x-button href="{{ route('register') }}">Book Now</x-button>
                    </div>
                </x-card>
            @endforeach
        </div>
    </section>
@endsection