{% extends 'frontend/base.html.twig' %}

{% block title %}{{ page.seoTitle|default(page.title) }} | Haber{% endblock %}
{% block meta_description %}{{ page.seoDescription|default(page.content|default('')|striptags|slice(0, 160)) }}{% endblock %}

{% block body %}
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {# ===== BREADCRUMB ===== #}
    <nav class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-6" aria-label="Breadcrumb">
        <a href="{{ path('frontend_home') }}" class="hover:text-red-600 dark:hover:text-red-500 transition-colors">
            <i class="fas fa-home mr-1"></i> Ana Sayfa
        </a>
        <i class="fas fa-chevron-right text-xs text-gray-400"></i>
        <span class="text-gray-700 dark:text-gray-300">{{ page.title }}</span>
    </nav>

    {# ===== PAGE CONTENT ===== #}
    <article class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-sm overflow-hidden">
        {% if page.featuredImage %}
            <div class="aspect-[3/1] overflow-hidden">
                <img src="{{ page.featuredImage }}" alt="{{ page.title }}" class="w-full h-full object-cover">
            </div>
        {% endif %}

        <div class="p-6 md:p-10">
            <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 leading-tight mb-8">
                {{ page.title }}
            </h1>

            <div class="prose prose-lg dark:prose-invert max-w-none
                        prose-headings:text-gray-900 dark:prose-headings:text-gray-100
                        prose-a:text-red-600 dark:prose-a:text-red-400
                        prose-img:rounded-xl prose-img:shadow-md
                        prose-blockquote:border-red-600">
                {{ page.content|raw }}
            </div>
        </div>
    </article>

</div>
{% endblock %}
