@extends('sitebuilder.layouts.site')

@section('title', 'Sobre Mí — ' . ($site->brand_name ?? 'Astrology Consultation'))
@section('description', $site->astrologer_bio)

@section('content')

<x-sitebuilder.page-header eyebrow="Hakkımda" :title="$site->astrologer_name" :description="$site->astrologer_title" />

<section class="mx-auto max-w-5xl px-6 py-20 lg:px-8">
    <div class="grid grid-cols-1 items-start gap-16 lg:grid-cols-3">
        <div class="lg:col-span-1">
            <div class="aspect-square overflow-hidden rounded-3xl bg-gradient-to-br from-brand-100 to-gold-100 flex items-center justify-center">
                <span class="text-8xl">🔮</span>
            </div>
            <div class="mt-6 grid grid-cols-2 gap-4 text-center">
                <div class="rounded-xl border border-ink-900/10 p-4">
                    <p class="font-display text-2xl font-semibold text-brand-700">{{ $site->astrologer_experience_years ?? 0 }}</p>
                    <p class="text-xs text-ink-800/50">Yıl Deneyim</p>
                </div>
                <div class="rounded-xl border border-ink-900/10 p-4">
                    <p class="font-display text-2xl font-semibold text-brand-700">{{ number_format(0) }}+</p>
                    <p class="text-xs text-ink-800/50">Danışan</p>
                </div>
            </div>
        </div>

        <div class="lg:col-span-2">
            <h2 class="font-display text-2xl font-semibold text-ink-900">Merhaba, ben {{ $site->astrologer_name }}</h2>
            <div class="mt-5 space-y-4 leading-relaxed text-ink-800/75">
                <p>{{ $site->astrologer_bio }}</p>
                <p>Danışanlarımla çalışırken astrolojiyi bir kehanet aracı olarak değil, kendini ve
                    döngülerini daha iyi anlamak için bir dil olarak kullanıyorum. Her seans, elindeki
                    haritayı — yani potansiyelini — daha net görebilmen için bir rehberlik niteliğinde.</p>
            </div>

            <h3 class="mt-10 font-display text-xl font-semibold text-ink-900">Yaklaşımım</h3>
            <ul class="mt-5 space-y-4">
                @foreach([
                    ['title' => 'Vedik (sidereal) ve Batı (tropikal) astroloji', 'text' => 'İhtiyacına göre iki geleneği de kullanarak haritanı çok yönlü okuyorum.'],
                    ['title' => 'Uluslararası sertifikalı danışmanlık', 'text' => 'Akademik astroloji eğitimimi sürekli güncel tutuyor, süpervizyon desteği alıyorum.'],
                    ['title' => 'Teknoloji destekli, insan merkezli', 'text' => 'Harita hesaplama ve ön yorum için Astro Bilge motorunu kullanıyorum; asıl derinliği birebir seansta birlikte kuruyoruz.'],
                ] as $item)
                    <li class="flex items-start gap-4 rounded-xl border border-ink-900/5 bg-white p-5">
                        <span class="mt-0.5 flex h-8 w-8 flex-none items-center justify-center rounded-full bg-brand-100 text-brand-700">
                            <x-sitebuilder.app-icon name="check" class="h-4 w-4" />
                        </span>
                        <div>
                            <p class="font-semibold text-ink-900">{{ $item['title'] }}</p>
                            <p class="mt-1 text-sm text-ink-800/65">{{ $item['text'] }}</p>
                        </div>
                    </li>
                @endforeach
            </ul>

            <div class="mt-10 flex flex-wrap gap-4">
                <a href="{{ route('sitebuilder.randevu') }}" class="rounded-full bg-gradient-to-r from-brand-500 to-brand-600 px-7 py-3.5 text-sm font-semibold text-white hover:opacity-90">
                    Benimle Görüş
                </a>
                <a href="{{ route('sitebuilder.services.index') }}" class="rounded-full border border-brand-200 px-7 py-3.5 text-sm font-semibold text-brand-700 hover:bg-brand-50">
                    Hizmetleri İncele
                </a>
            </div>
        </div>
    </div>
</section>

@endsection