@extends('layouts.public')

@section('title', __('nav.prices'))

@section('content')
<section class="border-b border-cyan-100 bg-gradient-to-br from-cyan-50 via-white to-emerald-50">
    <div class="mx-auto max-w-7xl px-4 py-12 lg:px-6">
        <div class="max-w-3xl">
            <p class="text-sm font-black text-cyan-700">Harga tiket</p>
            <h1 class="mt-3 text-4xl font-black leading-tight text-cyan-950">Pilih tiket sesuai kebutuhan kunjungan.</h1>
            <p class="mt-4 text-sm leading-7 text-slate-600">Semua harga ditampilkan jelas dan bisa langsung dilanjutkan ke pemesanan tiket online.</p>
        </div>
    </div>
</section>

<section class="mx-auto max-w-7xl px-4 py-12 lg:px-6">
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        @forelse($ticketTypes as $type)
            <article class="flex min-h-64 flex-col rounded-lg border border-cyan-100 bg-white p-5 shadow-sm">
                <div class="flex items-start justify-between gap-3">
                    <h2 class="font-black text-cyan-950">{{ $type->name }}</h2>
                    <span class="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-cyan-100 text-cyan-700">
                        <i data-lucide="ticket" class="h-5 w-5"></i>
                    </span>
                </div>
                <p class="mt-5 text-3xl font-black text-orange-500">{{ \App\Support\LocaleFormat::money($type->price) }}</p>
                <p class="mt-4 flex-1 text-sm leading-6 text-slate-600">{{ $type->description }}</p>
                <a href="{{ route('user.tickets.create') }}" class="mt-5 inline-flex items-center justify-center gap-2 rounded-md bg-cyan-600 px-4 py-3 text-sm font-black text-white hover:bg-orange-400 hover:text-cyan-950">
                    <i data-lucide="shopping-cart" class="h-4 w-4"></i>
                    Pesan Tiket
                </a>
            </article>
        @empty
            <p class="rounded-lg border border-cyan-100 bg-white p-5 text-sm font-semibold text-cyan-700 shadow-sm">Harga tiket belum tersedia.</p>
        @endforelse
    </div>
</section>
@endsection