@extends('layouts.public')

@section('title', 'Program Berenang')

@section('content')
@php($programImage = asset('images/karya-muda-program.png'))

<section class="relative overflow-hidden bg-cyan-700 text-white">
    <img src="{{ $programImage }}" alt="Latihan berenang di kolam" class="absolute inset-0 h-full w-full object-cover">
    <div class="absolute inset-0 bg-gradient-to-br from-cyan-700/70 via-sky-500/45 to-emerald-400/35"></div>
    <div class="relative mx-auto max-w-7xl px-4 py-14 lg:px-6">
        <div class="max-w-3xl">
            <p class="text-sm font-black text-amber-100">Program berenang</p>
            <h1 class="mt-3 text-4xl font-black leading-tight sm:text-5xl">Sekolah renang, club, dan les privat.</h1>
            <p class="mt-4 text-base leading-8 text-white/90">Pilih jalur latihan sesuai usia, kemampuan, target, dan kebutuhan pendampingan.</p>
        </div>
    </div>
</section>

<section class="mx-auto max-w-7xl px-4 py-12 lg:px-6">
    <div class="grid gap-4 md:grid-cols-3">
        @foreach([
            ['waves', 'Sekolah Renang', 'Program level pemula, anak-anak, dewasa, dan evaluasi akhir.'],
            ['activity', 'Swimming Club', 'Latihan terjadwal untuk endurance, teknik gaya, dan persiapan lomba.'],
            ['user-round-check', 'Les Privat', 'Sesi personal dengan pilihan pelatih dan jadwal lebih fleksibel.'],
        ] as [$icon, $title, $text])
            <article class="rounded-lg border border-cyan-100 bg-white p-5 shadow-sm">
                <span class="grid h-11 w-11 place-items-center rounded-md bg-cyan-100 text-cyan-700">
                    <i data-lucide="{{ $icon }}" class="h-5 w-5"></i>
                </span>
                <h2 class="mt-4 text-lg font-black text-cyan-950">{{ $title }}</h2>
                <p class="mt-3 text-sm leading-6 text-slate-600">{{ $text }}</p>
            </article>
        @endforeach
    </div>

    <div class="mt-12 grid gap-8 lg:grid-cols-[.75fr_1.25fr]">
        <div>
            <p class="text-sm font-black text-emerald-700">Pelatih</p>
            <h2 class="mt-3 text-3xl font-black leading-tight text-cyan-950">Tim pelatih terdata dan siap mendampingi latihan.</h2>
            <p class="mt-4 text-sm leading-7 text-slate-600">Informasi pelatih tampil ringkas agar calon peserta bisa mengenal pendamping latihan sebelum mendaftar.</p>
        </div>
        <div class="grid gap-4 sm:grid-cols-2">
            @forelse($trainers as $trainer)
                <article class="rounded-lg border border-cyan-100 bg-white p-5 shadow-sm">
                    <div class="flex items-start gap-3">
                        <span class="grid h-11 w-11 shrink-0 place-items-center rounded-md bg-amber-100 text-sm font-black text-orange-600">{{ strtoupper(substr($trainer->name, 0, 1)) }}</span>
                        <div class="min-w-0">
                            <p class="truncate font-black text-cyan-950">{{ $trainer->name }}</p>
                            <p class="mt-1 text-sm font-semibold text-slate-500">{{ $trainer->license }}</p>
                            <p class="mt-3 text-sm leading-6 text-slate-600">{{ $trainer->bio }}</p>
                        </div>
                    </div>
                </article>
            @empty
                <p class="rounded-lg border border-cyan-100 bg-white p-5 text-sm font-semibold text-cyan-700 shadow-sm">Data pelatih belum tersedia.</p>
            @endforelse
        </div>
    </div>
</section>
@endsection