@extends('sitebuilder.layouts.site')

@php
    // hero_eyebrow, hero_headline, hero_subheadline, stat_clients, stat_years, stat_rating,
    // stat_charts: subastro'da SiteSetting anahtarıydı, AstrologerSite'ta karşılığı yok
    // (bkz. port raporu). Kolon eklemek yerine burada sabit bir varsayılan kullanılıyor;
    // stat_years için ise gerçek ve semantik olarak eşleşen astrologer_experience_years
    // kolonu kullanıldı.
    $heroEyebrow = 'Astroloji & Doğum Haritası Danışmanlığı';
    $heroHeadline = 'Yıldızların senin için ne söylediğini birlikte keşfedelim';
    $heroSubheadline = 'Natal harita, ilişki analizi ve kariyer astrolojisi ile potansiyelini netleştir; Astro Bilge motoruyla anında yorum al.';
    $statClients = 0;
    $statYears = $site->astrologer_experience_years ?? 0;
    $statRating = '5.0';
    $statCharts = 0;
@endphp

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

@section('content')

{{-- HERO --}}
<section class="relative overflow-hidden bg-ink-950 bg-stars">
    <div class="absolute inset-0 bg-gradient-to-b from-brand-900/40 via-ink-950 to-ink-950"></div>
    <div class="relative mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-6 py-24 lg:grid-cols-2 lg:px-8 lg:py-32">
        <div>
            <span class="inline-flex items-center gap-2 rounded-full border border-gold-500/30 bg-gold-500/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-gold-400">
                <x-sitebuilder.app-icon name="sparkles" class="h-4 w-4" /> {{ $heroEyebrow }}
            </span>
            <h1 class="mt-6 font-display text-4xl font-semibold leading-tight text-white sm:text-5xl lg:text-6xl">
                {{ $heroHeadline }}
            </h1>
            <p class="mt-6 max-w-xl text-lg leading-relaxed text-white/70">
                {{ $heroSubheadline }}
            </p>

            <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 shadow-glow hover:opacity-90">
                    Randevu Al
                </a>
                <a href="{{ route('sitebuilder.astro-bilge-yorum') }}" class="inline-flex items-center gap-2 rounded-full border border-white/20 px-7 py-3.5 text-sm font-semibold text-white hover:border-gold-400 hover:text-gold-400">
                    <x-sitebuilder.app-icon name="wand" class="h-4 w-4" /> Astro Bilge'den Yorum Al
                </a>
            </div>

            <div class="mt-14 grid grid-cols-3 gap-6 border-t border-white/10 pt-8">
                <div>
                    <p class="font-display text-3xl font-semibold text-white">{{ number_format($statClients) }}+</p>
                    <p class="mt-1 text-xs text-white/50">Danışan</p>
                </div>
                <div>
                    <p class="font-display text-3xl font-semibold text-white">{{ $statYears }} Yıl</p>
                    <p class="mt-1 text-xs text-white/50">Deneyim</p>
                </div>
                <div>
                    <p class="font-display text-3xl font-semibold text-white">{{ $statRating }} ★</p>
                    <p class="mt-1 text-xs text-white/50">Ortalama Puan</p>
                </div>
            </div>
        </div>

        <div class="relative mx-auto w-full max-w-md">
            <div class="absolute -inset-6 rounded-[2.5rem] bg-gradient-to-br from-brand-500/30 to-gold-500/20 blur-2xl"></div>
            <div class="relative overflow-hidden rounded-[2rem] border border-white/10 bg-ink-900 shadow-glow">
                <div class="flex aspect-[4/5] items-center justify-center bg-gradient-to-br from-brand-800 via-ink-900 to-ink-950">
                    <div class="text-center">
                        <div class="mx-auto flex h-28 w-28 items-center justify-center rounded-full border border-gold-400/40 text-5xl">🔮</div>
                        <p class="mt-4 font-display text-xl text-white">{{ $site->astrologer_name }}</p>
                        <p class="mt-1 text-xs uppercase tracking-widest text-gold-400">{{ $site->astrologer_title }}</p>
                    </div>
                </div>
                <div class="flex items-center justify-between border-t border-white/10 bg-ink-950/80 px-5 py-4 text-xs text-white/60">
                    <span>Bugün 4 uygun randevu saati</span>
                    <span class="flex h-2 w-2 rounded-full bg-emerald-400"></span>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- HAKKIMDA (kısa) --}}
<section class="mx-auto max-w-7xl px-6 py-24 lg:px-8">
    <div class="grid grid-cols-1 items-center gap-16 lg:grid-cols-2">
        <div class="relative">
            <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="absolute -bottom-6 -right-6 rounded-2xl border border-brand-100 bg-white px-6 py-4 shadow-xl">
                <p class="font-display text-2xl font-semibold text-brand-700">{{ number_format($statCharts) }}+</p>
                <p class="text-xs text-ink-700/60">Yorumlanan Harita</p>
            </div>
        </div>
        <div>
            <span class="text-xs font-semibold uppercase tracking-widest text-brand-600">Hakkımda</span>
            <h2 class="mt-3 font-display text-3xl font-semibold text-ink-900 sm:text-4xl">
                Astroloji, kaderi okumak değil — potansiyeli görmektir
            </h2>
            <p class="mt-6 leading-relaxed text-ink-800/75">
                {{ \Illuminate\Support\Str::limit($site->astrologer_bio, 220) }}
            </p>
            <a href="{{ route('sitebuilder.about') }}" class="mt-6 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-700 hover:text-brand-800">
                Hakkımda devamını oku →
            </a>
        </div>
    </div>
</section>

{{-- HİZMETLER (teaser) --}}
<section class="bg-paper-100 py-24">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <x-sitebuilder.section-heading kicker="Hizmetler" title="Sana en uygun danışmanlığı seç"
            description="Birebir seans ile derinlemesine ilerle, ya da Astro Bilge destekli anlık yorum ile hemen başla." />

        <div class="mt-14 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>

        <div class="mt-12 text-center">
            <a href="{{ route('sitebuilder.services.index') }}" class="inline-flex items-center gap-2 rounded-full border border-brand-200 px-6 py-3 text-sm font-semibold text-brand-700 hover:bg-brand-50">
                Tüm Hizmetleri İncele →
            </a>
        </div>
    </div>
</section>

{{-- NASIL ÇALIŞIR --}}
<section class="mx-auto max-w-7xl px-6 py-24 lg:px-8">
    <x-sitebuilder.section-heading kicker="Nasıl Çalışır" title="Üç adımda başla" />
    <div class="mt-14 grid grid-cols-1 gap-8 md:grid-cols-3">
        @foreach([
            ['no' => '01', 'title' => 'Hizmetini Seç', 'text' => 'Birebir seans, yazılı yorum veya Astro Bilge ile anında yorum arasından ihtiyacına uygun olanı seç.'],
            ['no' => '02', 'title' => 'Doğum Bilgini Gir', 'text' => 'Doğum tarihi, saati ve yerini gir — Astro Bilge motoru haritanı otomatik hesaplar ve çizer.'],
            ['no' => '03', 'title' => 'Yorumunu Al', 'text' => 'Birebir seansta canlı görüş, ya da Astro Bilge yorumu için dakikalar içinde harita çizimi ve raporunu indir.'],
        ] as $step)
            <div class="relative rounded-2xl border border-ink-900/5 bg-white p-8">
                <span class="font-display text-5xl font-semibold text-brand-100">{{ $step['no'] }}</span>
                <h3 class="mt-4 font-display text-xl font-semibold text-ink-900">{{ $step['title'] }}</h3>
                <p class="mt-2 text-sm leading-relaxed text-ink-800/65">{{ $step['text'] }}</p>
            </div>
        @endforeach
    </div>
</section>

{{-- ASTRO BİLGE'DEN YORUM AL (teaser) --}}
<section class="relative overflow-hidden bg-ink-950 bg-stars py-24">
    <div class="absolute inset-0 bg-gradient-to-br from-brand-900/50 to-transparent"></div>
    <div class="relative mx-auto grid max-w-7xl grid-cols-1 items-center gap-14 px-6 lg:grid-cols-2 lg:px-8">
        <div>
            <span class="inline-flex items-center gap-2 rounded-full border border-gold-500/30 bg-gold-500/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-gold-400">
                <x-sitebuilder.app-icon name="wand" class="h-4 w-4" /> Astro Bilge Motoru
            </span>
            <h2 class="mt-6 font-display text-3xl font-semibold text-white sm:text-4xl">
                Randevu beklemeden, anında harita çizimini ve yorumunu al
            </h2>
            <p class="mt-5 leading-relaxed text-white/70">
                Doğum haritanı Astro Bilge motoruyla saniyeler içinde hesaplıyor, gezegen konumlarını
                <strong class="text-white/90">harita çizimi</strong> olarak görselleştiriyor ve kapsamlı bir
                yazılı yorum üretiyoruz. İstersen bu raporu daha sonra {{ $site->astrologer_name }} ile
                birebir seansta derinleştirebilirsin.
            </p>
            <ul class="mt-8 space-y-3">
                @foreach(['Doğum haritası çizimi (gezegen, ev ve açı diyagramı)', 'Ortalama 60 saniyede hazır yazılı rapor', 'PDF olarak indir, dilediğin an tekrar oku'] as $item)
                    <li class="flex items-start gap-3 text-sm text-white/75">
                        <span class="mt-0.5 flex h-5 w-5 flex-none items-center justify-center rounded-full bg-gold-500/20 text-gold-400">
                            <x-sitebuilder.app-icon name="check" class="h-3.5 w-3.5" />
                        </span>
                        {{ $item }}
                    </li>
                @endforeach
            </ul>
            <a href="{{ route('sitebuilder.astro-bilge-yorum') }}" class="mt-10 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-gold-500 to-gold-600 px-7 py-3.5 text-sm font-semibold text-ink-950 shadow-glow hover:opacity-90">
                Astro Bilge'den Yorumumu Oluştur
            </a>
        </div>

        <div class="rounded-2xl border border-white/10 bg-ink-900/80 p-6 shadow-glow backdrop-blur">
            <div class="flex items-center gap-3 border-b border-white/10 pb-4">
                <span class="flex h-9 w-9 items-center justify-center rounded-full bg-gold-500/20 text-gold-400">
                    <x-sitebuilder.app-icon name="chat" class="h-5 w-5" />
                </span>
                <div>
                    <p class="text-sm font-semibold text-white">Natal Harita — Astro Bilge Yorumu</p>
                    <p class="text-xs text-white/40">18.02.1994 · 07:40 · İstanbul</p>
                </div>
            </div>

            <div class="mt-4 flex items-center justify-center rounded-xl border border-white/10 bg-ink-950 py-8">
                <svg viewBox="0 0 200 200" class="h-40 w-40 text-white/25" fill="none" stroke="currentColor" stroke-width="1">
                    <circle cx="100" cy="100" r="92" />
                    <circle cx="100" cy="100" r="66" />
                    <circle cx="100" cy="100" r="40" />
                    @for($i = 0; $i < 12; $i++)
                        @php $a = $i * 30 * (M_PI / 180); @endphp
                        <line x1="{{ 100 + 40 * cos($a) }}" y1="{{ 100 + 40 * sin($a) }}" x2="{{ 100 + 92 * cos($a) }}" y2="{{ 100 + 92 * sin($a) }}" />
                    @endfor
                    <circle cx="100" cy="100" r="2.5" fill="currentColor" stroke="none" />
                    <circle cx="146" cy="60" r="3" class="text-gold-400" fill="currentColor" stroke="none" />
                    <circle cx="52" cy="134" r="3" class="text-gold-400" fill="currentColor" stroke="none" />
                    <circle cx="130" cy="150" r="3" class="text-gold-400" fill="currentColor" stroke="none" />
                </svg>
            </div>
            <p class="mt-2 text-center text-[11px] text-white/30">Astro Bilge motorunun ürettiği harita çiziminin taslak önizlemesi</p>

            <div class="mt-4 space-y-3 text-sm leading-relaxed text-white/70">
                <p><span class="font-semibold text-gold-400">Güneş — Kova (10. Ev):</span> Kariyerinde bağımsızlık ve yenilikçilik öne çıkıyor...</p>
                <p class="text-white/40">Rapor devam ediyor — harita çizimi + 2.140 kelime, 6 gezegen, 12 ev analizi…</p>
            </div>
        </div>
    </div>
</section>

{{-- PAKETLER --}}
<section class="bg-paper-100 py-24">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <x-sitebuilder.section-heading kicker="Paketler" title="Bütçene ve ihtiyacına uygun paket" />

        <div class="mt-14 grid grid-cols-1 gap-8 lg:grid-cols-3">
            @foreach($packages as $package)
                <x-sitebuilder.package-card :package="$package" />
            @endforeach
        </div>

        <div class="mt-12 text-center">
            <a href="{{ route('sitebuilder.pricing') }}" class="inline-flex items-center gap-2 text-sm font-semibold text-brand-700 hover:text-brand-800">
                Tüm paket detaylarını gör →
            </a>
        </div>
    </div>
</section>

{{-- YORUMLAR --}}
<section class="mx-auto max-w-7xl px-6 py-24 lg:px-8">
    <x-sitebuilder.section-heading kicker="Danışan Deneyimleri" title="Onlar ne diyor?" />
    <div class="mt-14 grid grid-cols-1 gap-6 md:grid-cols-3">
        @foreach($testimonials as $t)
            <x-sitebuilder.testimonial-card :testimonial="$t" />
        @endforeach
    </div>
</section>

{{-- BLOG (teaser) --}}
<section class="bg-paper-100 py-24">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <span class="text-xs font-semibold uppercase tracking-widest text-brand-600">Blog</span>
                <h2 class="mt-3 font-display text-3xl font-semibold text-ink-900 sm:text-4xl">Harita Yorumları & Yazılar</h2>
            </div>
            <a href="{{ route('sitebuilder.blog.index') }}" class="text-sm font-semibold text-brand-700 hover:text-brand-800">Tüm yazılar →</a>
        </div>

        <div class="mt-14 grid grid-cols-1 gap-8 lg:grid-cols-3">
            @foreach($posts as $post)
                <x-sitebuilder.blog-card :post="$post" />
            @endforeach
        </div>
    </div>
</section>

{{-- SSS (teaser) --}}
<section class="mx-auto max-w-4xl px-6 py-24 lg:px-8">
    <x-sitebuilder.section-heading kicker="SSS" title="Sıkça Sorulan Sorular" />

    <div class="mt-12 space-y-3" x-data="{ openItem: 0 }">
        @foreach($faqs as $i => $faq)
            <div class="rounded-xl border border-ink-900/10 bg-white">
                <button @click="openItem = openItem === {{ $i }} ? null : {{ $i }}" class="flex w-full items-center justify-between gap-4 px-6 py-5 text-left">
                    <span class="font-medium text-ink-900">{{ $faq->question }}</span>
                    <span class="flex-none text-brand-600" x-bind:class="openItem === {{ $i }} ? 'rotate-45' : ''" style="transition: transform .2s">+</span>
                </button>
                <div x-show="openItem === {{ $i }}" x-collapse x-cloak class="px-6 pb-5 text-sm leading-relaxed text-ink-800/70">
                    {{ $faq->answer }}
                </div>
            </div>
        @endforeach
    </div>

    <div class="mt-8 text-center">
        <a href="{{ route('sitebuilder.faq') }}" class="text-sm font-semibold text-brand-700 hover:text-brand-800">Tüm soruları gör →</a>
    </div>
</section>

{{-- RANDEVU CTA --}}
<section class="relative overflow-hidden bg-gradient-to-br from-brand-700 via-brand-800 to-ink-950 py-24">
    <div class="mx-auto max-w-4xl px-6 text-center lg:px-8">
        <h2 class="font-display text-3xl font-semibold text-white sm:text-4xl">Haritanı okumaya hazır mısın?</h2>
        <p class="mt-4 text-white/70">Uygun randevu saatini seç ya da Astro Bilge ile hemen ön bir yorum al — kararsızsan önce ücretsiz 15 dakikalık tanışma görüşmesi planlayabilirsin.</p>
        <div class="mt-10 flex flex-wrap justify-center gap-4">
            <a href="{{ route('sitebuilder.randevu') }}" class="rounded-full bg-white px-8 py-3.5 text-sm font-semibold text-brand-800 hover:bg-white/90">Randevu Takvimini Aç</a>
            <a href="{{ route('sitebuilder.astro-bilge-yorum') }}" class="rounded-full border border-white/30 px-8 py-3.5 text-sm font-semibold text-white hover:border-white">Astro Bilge'den Yorum Al</a>
        </div>
        <p class="mt-6 text-xs text-white/40">Güvenli ödeme · PayTR ile 3D Secure</p>
    </div>
</section>

@endsection