@extends('sitebuilder.layouts.site')

@section('title', 'Paquetes — ' . ($site->brand_name ?? 'Consultoría Astrológica'))
@section('description', 'Bütçene ve ihtiyacına uygun danışmanlık paketleri.')

@section('content')

<x-sitebuilder.page-header eyebrow="Paketler" title="Paquete adaptado a tus necesidades"
    description="Tüm paketler güvenli ödeme altyapısı PayTR ile 3D Secure korumalı olarak satın alınır." />

<section class="mx-auto max-w-7xl px-6 py-20 lg:px-8">
    <div class="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-16 overflow-x-auto rounded-2xl border border-ink-900/10">
        <table class="w-full min-w-[560px] border-collapse text-sm">
            <thead>
                <tr class="bg-paper-100 text-left text-ink-800/60">
                    <th class="px-6 py-4 font-medium">Özellik</th>
                    @foreach($packages as $package)
                        <th class="px-6 py-4 font-medium">{{ $package->name }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                <tr class="border-t border-ink-900/5">
                    <td class="px-6 py-4 text-ink-800/70">Fiyat</td>
                    @foreach($packages as $package)
                        <td class="px-6 py-4 font-semibold text-ink-900">{{ number_format($package->price, 0, ',', '.') }} ₺</td>
                    @endforeach
                </tr>
                <tr class="border-t border-ink-900/5">
                    <td class="px-6 py-4 text-ink-800/70">Süre</td>
                    @foreach($packages as $package)
                        <td class="px-6 py-4 text-ink-800/80">{{ $package->duration_minutes ? $package->duration_minutes . ' dakika' : 'Yazılı rapor' }}</td>
                    @endforeach
                </tr>
            </tbody>
        </table>
    </div>
</section>

@if($faqs->isNotEmpty())
<section class="bg-paper-100 py-20">
    <div class="mx-auto max-w-3xl px-6 lg:px-8">
        <h2 class="font-display text-2xl font-semibold text-ink-900">Paketlerle ilgili sorular</h2>
        <div class="mt-8 space-y-3" x-data="{ openItem: null }">
            @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>
    </div>
</section>
@endif

@endsection