@extends('sitebuilder.layouts.site')

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

@section('content')

<x-sitebuilder.page-header :eyebrow="$post->category . ' · ' . $post->reading_minutes . ' dk okuma'" :title="$post->title" />

<section class="mx-auto max-w-3xl px-6 py-20 lg:px-8">
    <div class="flex aspect-[21/9] items-center justify-center rounded-2xl bg-gradient-to-br from-brand-100 to-gold-100 text-6xl">✨</div>

    <article class="prose-none mt-10 space-y-5 leading-relaxed text-ink-800/80 [&_p]:mb-4 [&_a]:text-brand-700 [&_a]:underline [&_strong]:text-ink-900">
        @if($post->content && str_contains($post->content, '<'))
            {!! $post->content !!}
        @else
            @foreach(explode("\n\n", $post->content ?: $post->excerpt) as $paragraph)
                <p>{{ $paragraph }}</p>
            @endforeach
        @endif
    </article>

    <div class="mt-12 flex items-center gap-4 rounded-2xl border border-ink-900/10 bg-paper-100 p-6">
        <span class="flex h-12 w-12 flex-none items-center justify-center rounded-full bg-brand-100 text-2xl">🔮</span>
        <div>
            <p class="font-semibold text-ink-900">{{ $site->astrologer_name }}</p>
            <p class="text-sm text-ink-800/60">{{ $site->astrologer_title }}</p>
        </div>
        <a href="{{ route('sitebuilder.randevu') }}" class="ml-auto rounded-full bg-gradient-to-r from-brand-500 to-brand-600 px-5 py-2.5 text-sm font-semibold text-white hover:opacity-90">
            Randevu Al
        </a>
    </div>
</section>

@if($otherPosts->isNotEmpty())
<section class="bg-paper-100 py-20">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <h2 class="font-display text-2xl font-semibold text-ink-900">Diğer yazılar</h2>
        <div class="mt-8 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($otherPosts as $other)
                <x-sitebuilder.blog-card :post="$other" />
            @endforeach
        </div>
    </div>
</section>
@endif

@endsection