@extends('layouts.public')

@section('title', 'Kolam Renang Karya Muda')

@section('content')
@php
    $heroImage = asset('images/karya-muda-hero.png');
    $programImage = asset('images/karya-muda-program.png');
    $ticketPreview = $ticketTypes->take(3);
@endphp

<section class="relative overflow-hidden bg-cyan-700 text-white">
    <img src="{{ $heroImage }}" alt="Kolam Renang Karya Muda" 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="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-cyan-600 to-transparent"></div>

    <div class="relative mx-auto flex min-h-[74vh] max-w-7xl items-center px-4 py-16 lg:px-6">
        <div class="max-w-3xl">
            <p class="inline-flex items-center gap-2 rounded-full border border-white/40 bg-white/20 px-4 py-2 text-xs font-black uppercase text-cyan-50 backdrop-blur">
                <i data-lucide="waves" class="h-4 w-4"></i>
                Tiket, Sekolah Renang, Les Privat
            </p>
            <h1 class="mt-5 text-4xl font-black leading-tight sm:text-5xl lg:text-6xl">Kolam Renang Karya Muda</h1>
            <p class="mt-5 max-w-2xl text-base leading-8 text-cyan-50 sm:text-lg">
                Pesan tiket, bayar online manual, scan QR saat masuk, daftar kelas renang, pilih les privat, dan pantau progres latihan dari satu akun.
            </p>
            <div class="mt-8 grid gap-3 sm:flex sm:flex-wrap">
                <a href="{{ route('user.tickets.create') }}" class="inline-flex items-center justify-center gap-2 rounded-lg bg-amber-300 px-5 py-3 text-sm font-black text-cyan-950 hover:bg-white">
                    <i data-lucide="ticket" class="h-4 w-4"></i>
                    Pesan Tiket
                </a>
                <a href="{{ route('user.school-registration.create') }}" class="inline-flex items-center justify-center gap-2 rounded-lg border border-white/70 bg-white/20 px-5 py-3 text-sm font-black text-white backdrop-blur hover:bg-white hover:text-cyan-950">
                    <i data-lucide="graduation-cap" class="h-4 w-4"></i>
                    Daftar Sekolah Renang
                </a>
                <a href="{{ route('user.private-lesson.create') }}" class="inline-flex items-center justify-center gap-2 rounded-lg border border-white/70 bg-white/20 px-5 py-3 text-sm font-black text-white backdrop-blur hover:bg-white hover:text-cyan-950">
                    <i data-lucide="user-round-check" class="h-4 w-4"></i>
                    Les Privat
                </a>
            </div>
        </div>
    </div>
</section>

<section class="bg-gradient-to-r from-cyan-600 via-sky-500 to-emerald-500 px-4 pb-10 text-white lg:px-6">
    <div class="mx-auto grid max-w-7xl gap-3 sm:grid-cols-2 lg:grid-cols-4">
        @foreach([
            ['ticket-check', 'Tiket Online', 'Pilih tanggal dan sistem cek kuota otomatis.'],
            ['receipt-text', 'Pembayaran', 'Upload bukti, admin verifikasi, status langsung berubah.'],
            ['scan-line', 'QR Check-in', 'Tiket aktif punya QR untuk masuk dan keluar.'],
            ['trending-up', 'Progress Latihan', 'Kelas, sesi, absensi, materi, dan nilai tersambung.'],
        ] as [$icon, $title, $text])
            <article class="rounded-lg border border-white/30 bg-white/20 p-4 backdrop-blur">
                <i data-lucide="{{ $icon }}" class="h-5 w-5 text-amber-100"></i>
                <p class="mt-3 font-black">{{ $title }}</p>
                <p class="mt-2 text-sm leading-6 text-cyan-50">{{ $text }}</p>
            </article>
        @endforeach
    </div>
</section>

<section class="bg-white">
    <div class="mx-auto grid max-w-7xl gap-8 px-4 py-12 lg:grid-cols-[.8fr_1.2fr] lg:items-start lg:px-6">
        <div>
            <p class="text-sm font-black uppercase text-cyan-700">Alur Cepat</p>
            <h2 class="mt-3 text-3xl font-black leading-tight text-cyan-950 sm:text-4xl">Semua layanan dibuat sebagai satu alur yang nyambung.</h2>
            <p class="mt-4 text-sm leading-7 text-slate-600">User tidak perlu menebak status. Setiap pendaftaran punya pembayaran, setiap tiket aktif punya QR, dan setiap kelas aktif punya materi, sesi, tugas, serta progress.</p>
        </div>
        <div class="grid gap-3 sm:grid-cols-2">
            @foreach([
                ['1', 'Daftar atau login', 'Buat akun pengunjung untuk tiket dan program.'],
                ['2', 'Pilih layanan', 'Pesan tiket, sekolah renang, atau les privat.'],
                ['3', 'Upload pembayaran', 'Bukti masuk ke verifikasi admin.'],
                ['4', 'Gunakan layanan', 'QR tiket aktif atau kelas/program berjalan.'],
            ] as [$number, $title, $text])
                <article class="rounded-lg border border-cyan-100 bg-cyan-50 p-5">
                    <span class="grid h-9 w-9 place-items-center rounded-md bg-cyan-500 text-sm font-black text-white">{{ $number }}</span>
                    <p class="mt-4 font-black text-cyan-950">{{ $title }}</p>
                    <p class="mt-2 text-sm leading-6 text-slate-600">{{ $text }}</p>
                </article>
            @endforeach
        </div>
    </div>
</section>

<section class="border-y border-cyan-100 bg-gradient-to-br from-cyan-50 via-white to-emerald-50">
    <div class="mx-auto grid max-w-7xl gap-8 px-4 py-12 lg:grid-cols-[.9fr_1.1fr] lg:items-start lg:px-6">
        <div>
            <p class="text-sm font-black uppercase text-cyan-700">Harga Tiket</p>
            <h2 class="mt-3 text-3xl font-black leading-tight text-cyan-950 sm:text-4xl">Harga jelas, kuota transparan.</h2>
            <p class="mt-4 text-sm leading-7 text-slate-600">Sebelum membuat pesanan, sistem menampilkan sisa kuota tanggal kunjungan dan menghitung total otomatis.</p>
            <div class="mt-6 flex flex-wrap gap-3">
                <a href="{{ route('prices') }}" class="inline-flex items-center gap-2 rounded-lg bg-cyan-600 px-5 py-3 text-sm font-black text-white hover:bg-emerald-500">
                    <i data-lucide="tags" class="h-4 w-4"></i>
                    Lihat Harga
                </a>
                <a href="{{ route('user.tickets.create') }}" class="inline-flex items-center gap-2 rounded-lg border border-cyan-200 bg-white px-5 py-3 text-sm font-black text-cyan-900 hover:border-orange-300 hover:text-orange-600">
                    <i data-lucide="shopping-cart" class="h-4 w-4"></i>
                    Pesan Sekarang
                </a>
            </div>
        </div>
        <div class="grid gap-4 sm:grid-cols-3">
            @forelse($ticketPreview as $type)
                <article class="rounded-lg border border-cyan-100 bg-white p-5 shadow-sm">
                    <p class="text-xs font-black uppercase text-cyan-700">{{ $type->name }}</p>
                    <p class="mt-3 text-3xl font-black text-orange-500">{{ \App\Support\LocaleFormat::money($type->price) }}</p>
                    <p class="mt-3 text-sm leading-6 text-slate-600">{{ $type->description }}</p>
                </article>
            @empty
                <article class="rounded-lg border border-dashed border-slate-300 bg-white p-5 text-sm font-semibold text-slate-500">Harga tiket belum tersedia.</article>
            @endforelse
        </div>
    </div>
</section>

<section class="bg-white">
    <div class="mx-auto grid max-w-7xl gap-8 px-4 py-12 lg:grid-cols-[1.05fr_.95fr] lg:items-center lg:px-6">
        <div class="overflow-hidden rounded-lg border border-cyan-100 bg-cyan-50 shadow-sm">
            <img src="{{ $programImage }}" alt="Sesi belajar renang" class="aspect-[16/10] w-full object-cover">
        </div>
        <div>
            <p class="text-sm font-black uppercase text-cyan-700">Program Berenang</p>
            <h2 class="mt-3 text-3xl font-black leading-tight text-cyan-950 sm:text-4xl">Sekolah renang dan les privat yang terhubung ke LMS.</h2>
            <div class="mt-6 grid gap-3">
                @foreach([
                    ['waves', 'Sekolah Renang', 'Admin verifikasi pembayaran, memasukkan peserta ke kelas, lalu materi dan sesi terbuka.'],
                    ['user-round-check', 'Les Privat', 'Jadwal menentukan pelatih, paket menentukan nominal, status pembayaran tetap terlihat.'],
                    ['book-open-check', 'Materi & Tugas', 'Peserta hanya membuka kelas aktif yang memang diikuti.'],
                    ['clipboard-check', 'Absensi & Progress', 'Pelatih mengelola kehadiran dan perkembangan siswa di sesi miliknya.'],
                ] as [$icon, $title, $text])
                    <article class="flex gap-3 rounded-lg border border-cyan-100 bg-cyan-50 p-4 shadow-sm">
                        <span class="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-emerald-100 text-emerald-700">
                            <i data-lucide="{{ $icon }}" class="h-5 w-5"></i>
                        </span>
                        <div>
                            <p class="font-black text-cyan-950">{{ $title }}</p>
                            <p class="mt-1 text-sm leading-6 text-slate-600">{{ $text }}</p>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </div>
</section>

<section class="bg-gradient-to-br from-cyan-600 via-sky-500 to-emerald-500 text-white">
    <div class="mx-auto max-w-7xl px-4 py-12 lg:px-6">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="text-sm font-black uppercase text-amber-100">Pelatih</p>
                <h2 class="mt-3 text-3xl font-black leading-tight sm:text-4xl">Pelatih aktif tampil jelas untuk peserta.</h2>
            </div>
            <a href="{{ route('programs') }}" class="inline-flex items-center gap-2 rounded-lg bg-white px-5 py-3 text-sm font-black text-cyan-800 hover:bg-amber-100">
                <i data-lucide="users-round" class="h-4 w-4"></i>
                Lihat Program
            </a>
        </div>
        <div class="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            @forelse($trainers as $trainer)
                <article class="rounded-lg border border-white/30 bg-white/20 p-5">
                    <span class="grid h-11 w-11 place-items-center rounded-md bg-amber-200 text-sm font-black text-cyan-900">{{ strtoupper(substr($trainer->name, 0, 1)) }}</span>
                    <p class="mt-4 font-black">{{ $trainer->name }}</p>
                    <p class="mt-1 text-sm text-cyan-50">{{ $trainer->license ?: 'Pelatih aktif' }}</p>
                    <p class="mt-3 text-sm leading-6 text-cyan-50">{{ $trainer->bio }}</p>
                </article>
            @empty
                <article class="rounded-lg border border-white/30 bg-white/20 p-5 text-cyan-50">Data pelatih belum tersedia.</article>
            @endforelse
        </div>
    </div>
</section>

<section class="bg-white px-4 py-12 lg:px-6">
    <div class="mx-auto grid max-w-7xl gap-6 rounded-lg border border-cyan-100 bg-gradient-to-br from-cyan-50 via-white to-amber-50 p-6 shadow-sm lg:grid-cols-[1fr_auto] lg:items-center">
        <div>
            <p class="text-sm font-black uppercase text-cyan-700">Mulai Sekarang</p>
            <h2 class="mt-3 text-3xl font-black leading-tight text-cyan-950">Pilih layanan, bayar, lalu pantau statusnya dari dashboard.</h2>
            <p class="mt-3 text-sm leading-7 text-slate-600">Tampilan public memberi pintu masuk yang jelas, dashboard user menyimpan status, dan admin/trainer/owner menangani operasionalnya.</p>
        </div>
        <div class="grid gap-3 sm:flex">
            <a href="{{ route('register') }}" class="inline-flex items-center justify-center gap-2 rounded-lg bg-orange-400 px-5 py-3 text-sm font-black text-cyan-950 hover:bg-amber-300">
                <i data-lucide="user-plus" class="h-4 w-4"></i>
                Buat Akun
            </a>
            <a href="{{ route('contact') }}" class="inline-flex items-center justify-center gap-2 rounded-lg border border-cyan-200 bg-white px-5 py-3 text-sm font-black text-cyan-900 hover:border-orange-300 hover:text-orange-600">
                <i data-lucide="map-pin" class="h-4 w-4"></i>
                Kontak
            </a>
        </div>
    </div>
</section>
@endsection