@extends('sitebuilder.layouts.site')

@php
    // contact_whatsapp, contact_phone, contact_email: subastro'da SiteSetting anahtarıydı,
    // AstrologerSite'ta karşılığı yok (bkz. port raporu). Ayarlanmadıkları için varsayılan
    // (null) davranış korunuyor — "Doğrudan Ulaş" bloğu bu yüzden şimdilik boş kalır.
    $contactWhatsapp = null;
    $contactPhone = null;
    $contactEmail = null;
@endphp

@section('title', 'Reservar Cita — ' . ($site->brand_name ?? 'Astrology Consultation'))
@section('description', 'Uygun randevu saatini seç ve doğum haritanı birlikte yorumlayalım.')

@section('content')

<x-sitebuilder.page-header eyebrow="Randevu" title="Are you ready to explore your natal chart?"
    description="Bir hizmet seç, uygun saati takvimden işaretle." />

<section class="mx-auto max-w-5xl px-6 py-20 lg:px-8">
    <div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
        <div class="lg:col-span-2">
            <h2 class="font-display text-xl font-semibold text-ink-900">Bir hizmet seç</h2>
            <div class="mt-6 space-y-3">
                @foreach($services as $service)
                    <div class="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-ink-900/10 bg-white p-5">
                        <div>
                            <p class="font-semibold text-ink-900">{{ $service->title }}</p>
                            <p class="text-sm text-ink-800/50">{{ $service->duration_minutes }} dk · {{ number_format($service->price, 0, ',', '.') }} ₺</p>
                        </div>
                        <a href="{{ route('sitebuilder.booking.calendar', $service->slug) }}"
                            class="rounded-full bg-gradient-to-r from-brand-500 to-brand-600 px-5 py-2.5 text-sm font-semibold text-white hover:opacity-90">
                            Randevu Al
                        </a>
                    </div>
                @endforeach
            </div>
        </div>

        <aside>
            <div class="rounded-2xl border border-ink-900/10 bg-white p-7">
                <h3 class="font-display text-lg font-semibold text-ink-900">Doğrudan Ulaş</h3>
                <ul class="mt-5 space-y-4 text-sm">
                    @if($contactWhatsapp)
                        <li>
                            <p class="text-ink-800/50">WhatsApp</p>
                            <a href="https://wa.me/{{ $contactWhatsapp }}" class="font-semibold text-brand-700">{{ $contactPhone }}</a>
                        </li>
                    @endif
                    @if($contactEmail)
                        <li>
                            <p class="text-ink-800/50">E-posta</p>
                            <a href="mailto:{{ $contactEmail }}" class="font-semibold text-brand-700">{{ $contactEmail }}</a>
                        </li>
                    @endif
                </ul>
                <div class="mt-6 rounded-xl border border-gold-500/20 bg-gold-500/5 px-4 py-3 text-xs text-gold-700">
                    Kararsızsan önce Astro Bilge'den ücretsiz bir ön yorum alabilirsin.
                    <a href="{{ route('sitebuilder.astro-bilge-yorum') }}" class="font-semibold underline">İncele →</a>
                </div>
            </div>
        </aside>
    </div>
</section>

@endsection