@extends('sitebuilder.layouts.site')

@section('title', "Astro Bilge'den Yorum Al — " . ($site->brand_name ?? 'Astroloji Danışmanlığı'))
@section('description', 'Doğum haritanın çizimini ve yazılı yorumunu Astro Bilge motoruyla saniyeler içinde al.')

@section('content')

<x-sitebuilder.page-header eyebrow="Astro Bilge Motoru" title="Get your birth chart wheel and instant AI interpretation without waiting"
    description="Doğum bilgilerini gir; Astro Bilge motoru gezegen konumlarını hesaplar, haritanı görsel olarak çizer ve kapsamlı bir yazılı yorum üretir." />

<section class="mx-auto max-w-7xl px-6 py-20 lg:px-8">
    <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
        @foreach([
            ['no' => '01', 'title' => 'Doğum Bilgini Gir', 'text' => 'Tarih, saat ve doğum yeri — şehir alanı otomatik tamamlanır.'],
            ['no' => '02', 'title' => 'Harita Çizilir', 'text' => 'Astro Bilge motoru gezegen, ev ve açı konumlarını hesaplayıp haritanı görsel olarak çizer.'],
            ['no' => '03', 'title' => 'Yorumunu Oku', 'text' => 'Kapsamlı yazılı yorum + harita görseli PDF olarak önünde — istersen seansta derinleştiririz.'],
        ] 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>

{{-- HARİTA ÇİZİMİ ÖRNEĞİ --}}
<section class="relative overflow-hidden bg-ink-950 bg-stars py-20">
    <div class="absolute inset-0 bg-gradient-to-br from-brand-900/50 to-transparent"></div>
    <div class="relative mx-auto grid max-w-6xl grid-cols-1 items-center gap-14 px-6 lg:grid-cols-2 lg:px-8">
        <div class="order-2 lg:order-1">
            <div class="rounded-2xl border border-white/10 bg-ink-900/80 p-8 shadow-glow backdrop-blur">
                <div class="flex items-center justify-center py-6">
                    <svg viewBox="0 0 240 240" class="h-64 w-64 text-white/25" fill="none" stroke="currentColor" stroke-width="1">
                        <circle cx="120" cy="120" r="110" />
                        <circle cx="120" cy="120" r="80" />
                        <circle cx="120" cy="120" r="48" />
                        @for($i = 0; $i < 12; $i++)
                            @php $a = $i * 30 * (M_PI / 180); @endphp
                            <line x1="{{ 120 + 48 * cos($a) }}" y1="{{ 120 + 48 * sin($a) }}" x2="{{ 120 + 110 * cos($a) }}" y2="{{ 120 + 110 * sin($a) }}" />
                        @endfor
                        <circle cx="120" cy="120" r="2.5" fill="currentColor" stroke="none" />
                        @php $bodies = [['a'=>40,'r'=>95],['a'=>110,'r'=>95],['a'=>170,'r'=>65],['a'=>210,'r'=>95],['a'=>260,'r'=>65],['a'=>310,'r'=>95]]; @endphp
                        @foreach($bodies as $b)
                            @php $ra = $b['a'] * (M_PI/180); @endphp
                            <circle cx="{{ 120 + $b['r'] * cos($ra) }}" cy="{{ 120 + $b['r'] * sin($ra) }}" r="3.5" class="text-gold-400" fill="currentColor" stroke="none" />
                        @endforeach
                        <line x1="{{ 120 + 95*cos(40*M_PI/180) }}" y1="{{ 120 + 95*sin(40*M_PI/180) }}" x2="{{ 120 + 95*cos(210*M_PI/180) }}" y2="{{ 120 + 95*sin(210*M_PI/180) }}" class="text-brand-300" opacity="0.5" />
                        <line x1="{{ 120 + 95*cos(110*M_PI/180) }}" y1="{{ 120 + 95*sin(110*M_PI/180) }}" x2="{{ 120 + 65*cos(260*M_PI/180) }}" y2="{{ 120 + 65*sin(260*M_PI/180) }}" class="text-brand-300" opacity="0.5" />
                    </svg>
                </div>
                <p class="text-center text-[11px] text-white/30">Astro Bilge motorunun ürettiği harita çiziminin taslak önizlemesi — gerçek raporda gezegen sembolleri, dereceler ve açı tablosu ile birlikte gelir.</p>
            </div>
        </div>
        <div class="order-1 lg:order-2">
            <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" /> Sadece yorum değil, harita çizimi de
            </span>
            <h2 class="mt-6 font-display text-3xl font-semibold text-white sm:text-4xl">
                Gezegenleri, evleri ve açıları görsel olarak da görürsün
            </h2>
            <p class="mt-5 leading-relaxed text-white/70">
                Astro Bilge sadece metin yorumu üretmiyor — doğum haritanı gezegen, ev ve açı çizgileriyle
                birlikte görsel bir diyagram olarak da çiziyor. Böylece yorumu okurken hangi gezegenin hangi
                evde olduğunu haritada birebir takip edebilirsin.
            </p>
            <ul class="mt-8 space-y-3">
                @foreach(['Gezegen konumları ve dereceleri', 'Ev çizgileri ve burç sınırları', 'Açı (aspect) çizgileri', 'PDF olarak indirilebilir, yüksek çözünürlük'] 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>
        </div>
    </div>
</section>

{{-- DOĞUM BİLGİSİ FORMU (önizleme) --}}
<section class="mx-auto max-w-3xl px-6 py-20 lg:px-8">
    <div class="rounded-2xl border border-ink-900/10 bg-white p-8 shadow-sm">
        <h2 class="font-display text-xl font-semibold text-ink-900">Doğum Bilgilerin</h2>
        <p class="mt-1 text-sm text-ink-800/60">Aşağıdaki bilgilerle Astro Bilge haritanı hesaplar ve çizer.</p>

        <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <label class="text-xs font-medium text-ink-800/60">Doğum Tarihi</label>
                <input type="date" disabled value="1994-02-18" class="mt-2 w-full rounded-xl border border-ink-900/10 bg-paper-100 px-4 py-3 text-sm text-ink-800">
            </div>
            <div>
                <label class="text-xs font-medium text-ink-800/60">Doğum Saati</label>
                <input type="time" disabled value="07:40" class="mt-2 w-full rounded-xl border border-ink-900/10 bg-paper-100 px-4 py-3 text-sm text-ink-800">
            </div>
            <div class="sm:col-span-2">
                <label class="text-xs font-medium text-ink-800/60">Doğum Yeri</label>
                <input type="text" disabled value="İstanbul, Türkiye" class="mt-2 w-full rounded-xl border border-ink-900/10 bg-paper-100 px-4 py-3 text-sm text-ink-800">
            </div>
        </div>

        <div class="mt-6 rounded-xl border border-gold-500/20 bg-gold-500/5 px-4 py-3 text-xs text-gold-700">
            Ödeme ve anında teslim akışı yakında bu formun üzerinden aktif olacak. Şimdilik randevu üzerinden
            aynı raporu birebir seansla birlikte alabilirsin.
        </div>

        <a href="{{ route('sitebuilder.randevu') }}" class="mt-6 block rounded-full bg-gradient-to-r from-brand-500 to-brand-600 px-6 py-3.5 text-center text-sm font-semibold text-white hover:opacity-90">
            Randevu Üzerinden Al
        </a>
    </div>

    @if($services->isNotEmpty())
        <div class="mt-14">
            <h3 class="font-display text-lg font-semibold text-ink-900">Astro Bilge ile sunulan hizmetler</h3>
            <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
                @foreach($services as $service)
                    <x-sitebuilder.service-card :service="$service" />
                @endforeach
            </div>
        </div>
    @endif
</section>

@endsection