@extends('sitebuilder.layouts.site')

@section('title', 'Hizmetler — ' . ($site->brand_name ?? 'Astroloji Danışmanlığı'))
@section('description', 'Natal harita, ilişki analizi, kariyer astrolojisi ve daha fazlası — birebir seans veya Astro Bilge destekli anlık yorum.')

@section('content')

<x-sitebuilder.page-header eyebrow="Hizmetler" title="Sana en uygun danışmanlığı seç"
    description="Her hizmet birebir seans olarak alınabilir; 'Astro Bilge ile de sunulur' etiketli olanlarda randevu beklemeden anında harita çizimi ve yazılı yorum da satın alabilirsin." />

<section class="mx-auto max-w-7xl px-6 py-20 lg:px-8">
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        @foreach($services as $service)
            <x-sitebuilder.service-card :service="$service" />
        @endforeach
    </div>
</section>

<section class="bg-paper-100 py-20">
    <div class="mx-auto max-w-4xl px-6 text-center lg:px-8">
        <h2 class="font-display text-2xl font-semibold text-ink-900 sm:text-3xl">Hangisini seçeceğine karar veremedin mi?</h2>
        <p class="mt-4 text-ink-800/70">Astro Bilge'den ücretsiz bir ön yorum alarak başlayabilir, sonrasında ihtiyacına en uygun hizmeti birlikte netleştirebiliriz.</p>
        <div class="mt-8 flex flex-wrap justify-center gap-4">
            <a href="{{ route('sitebuilder.astro-bilge-yorum') }}" class="rounded-full bg-gradient-to-r from-brand-500 to-brand-600 px-7 py-3.5 text-sm font-semibold text-white shadow-glow hover:opacity-90">
                Astro Bilge'den Yorum Al
            </a>
            <a href="{{ route('sitebuilder.randevu') }}" class="rounded-full border border-brand-200 px-7 py-3.5 text-sm font-semibold text-brand-700 hover:bg-brand-50">
                Randevu Al
            </a>
        </div>
    </div>
</section>

@endsection