@extends('sitebuilder.layouts.site')

@section('title', $service->title . ' — ' . ($site->brand_name ?? 'Astroloji Danışmanlığı'))
@section('description', $service->short_description)

@section('content')

<x-sitebuilder.page-header :eyebrow="$service->duration_minutes . ' dakika · ' . number_format($service->price, 0, ',', '.') . ' ₺'" :title="$service->title" :description="$service->short_description" />

<section class="mx-auto max-w-5xl px-6 py-20 lg:px-8">
    <div class="grid grid-cols-1 gap-14 lg:grid-cols-3">
        <div class="lg:col-span-2">
            <h2 class="font-display text-2xl font-semibold text-ink-900">Bu seansta ne oluyor?</h2>
            <div class="prose-none mt-5 space-y-4 text-ink-800/75 leading-relaxed">
                <p>{{ $service->description ?: $service->short_description }}</p>
                <p>Görüşme öncesinde doğum tarihini, saatini (mümkünse dakikasını) ve doğum yerini paylaşman
                    yeterli. Saat bilgisi eksikse "Doğum Saati Rektifikasyonu" hizmetiyle önce tahmini tespit
                    yapabiliriz.</p>
            </div>

            @if($service->is_ai_available)
                <div class="mt-10 rounded-2xl border border-gold-500/20 bg-gold-500/5 p-6">
                    <div class="flex items-start gap-4">
                        <span class="flex h-11 w-11 flex-none items-center justify-center rounded-xl bg-gold-500/15 text-gold-600">
                            <x-sitebuilder.app-icon name="wand" class="h-6 w-6" />
                        </span>
                        <div>
                            <h3 class="font-display text-lg font-semibold text-ink-900">Astro Bilge ile de anında alabilirsin</h3>
                            <p class="mt-2 text-sm leading-relaxed text-ink-800/70">
                                Randevu beklemek istemiyorsan, bu hizmeti Astro Bilge motoru üzerinden saniyeler
                                içinde alabilirsin — harita çizimi ve yazılı yorum PDF olarak teslim edilir.
                            </p>
                            <a href="{{ route('sitebuilder.astro-bilge-yorum') }}" class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-gold-700 hover:text-gold-800">
                                Astro Bilge'den Yorum Al →
                            </a>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <aside class="lg:col-span-1">
            <div class="sticky top-24 rounded-2xl border border-ink-900/10 bg-white p-7 shadow-sm">
                <p class="font-display text-3xl font-semibold text-ink-900">{{ number_format($service->price, 0, ',', '.') }} ₺</p>
                <p class="mt-1 text-sm text-ink-800/50">{{ $service->duration_minutes }} dakika · birebir seans</p>
                <a href="{{ route('sitebuilder.booking.calendar', $service->slug) }}" class="mt-6 block rounded-full bg-gradient-to-r from-brand-500 to-brand-600 px-6 py-3 text-center text-sm font-semibold text-white hover:opacity-90">
                    Randevu Al
                </a>
                <ul class="mt-6 space-y-2 text-sm text-ink-800/70">
                    <li class="flex items-start gap-2"><x-sitebuilder.app-icon name="check" class="mt-0.5 h-4 w-4 flex-none text-brand-600" /> Görüşme sonrası özet notlar</li>
                    <li class="flex items-start gap-2"><x-sitebuilder.app-icon name="check" class="mt-0.5 h-4 w-4 flex-none text-brand-600" /> Güvenli ödeme (PayTR)</li>
                    <li class="flex items-start gap-2"><x-sitebuilder.app-icon name="check" class="mt-0.5 h-4 w-4 flex-none text-brand-600" /> 24 saat öncesine kadar ücretsiz erteleme</li>
                </ul>
            </div>
        </aside>
    </div>
</section>

@if($otherServices->isNotEmpty())
<section class="bg-paper-100 py-20">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <h2 class="font-display text-2xl font-semibold text-ink-900">Diğer hizmetler</h2>
        <div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($otherServices as $other)
                <x-sitebuilder.service-card :service="$other" />
            @endforeach
        </div>
    </div>
</section>
@endif

@endsection