@extends('sitebuilder.layouts.site')

@section('title', 'Sıkça Sorulan Sorular — ' . ($site->brand_name ?? 'Astroloji Danışmanlığı'))
@section('description', 'Randevu, ödeme, Astro Bilge yorumları ve daha fazlası hakkında sık sorulan sorular.')

@section('content')

<x-sitebuilder.page-header eyebrow="SSS" title="Sıkça Sorulan Sorular" />

<section class="mx-auto max-w-3xl px-6 py-20 lg:px-8">
    <div class="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-12 rounded-2xl border border-ink-900/10 bg-paper-100 p-8 text-center">
        <h2 class="font-display text-xl font-semibold text-ink-900">Aradığın cevabı bulamadın mı?</h2>
        <p class="mt-2 text-sm text-ink-800/65">Doğrudan bana yaz, en kısa sürede dönüş yapayım.</p>
        <a href="{{ route('sitebuilder.randevu') }}" class="mt-5 inline-block rounded-full bg-gradient-to-r from-brand-500 to-brand-600 px-6 py-3 text-sm font-semibold text-white hover:opacity-90">
            İletişime Geç
        </a>
    </div>
</section>

@endsection