{% extends 'base.html.twig' %}
{% block title %}{{ 'pricing.title'|trans }}{% endblock %}
{% block meta_description %}{{ 'pricing.meta_description'|trans }}{% endblock %}

{% set faqs = [
    {q: 'pricing.faq.q1'|trans, a: 'pricing.faq.a1'|trans},
    {q: 'pricing.faq.q2'|trans, a: 'pricing.faq.a2'|trans},
    {q: 'pricing.faq.q3'|trans, a: 'pricing.faq.a3'|trans},
    {q: 'pricing.faq.q4'|trans, a: 'pricing.faq.a4'|trans},
    {q: 'pricing.faq.q5'|trans, a: 'pricing.faq.a5'|trans},
    {q: 'pricing.faq.q6'|trans, a: 'pricing.faq.a6'|trans}
] %}

{% block meta_extra %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {% for faq in faqs %}
        {
            "@type": "Question",
            "name": {{ faq.q|json_encode|raw }},
            "acceptedAnswer": {
                "@type": "Answer",
                "text": {{ faq.a|json_encode|raw }}
            }
        }{{ not loop.last ? ',' : '' }}
        {% endfor %}
    ]
}
</script>
{% endblock %}

{% block body %}
<section class="py-20">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-4xl sm:text-5xl font-extrabold text-center text-dark">{{ 'pricing.heading'|trans }}</h1>
        <p class="mt-4 text-center text-gray-500 text-lg">{{ 'pricing.subtitle'|trans }}</p>

        {# Pricing cards #}
        <div class="mt-16">
            {% include '_partials/pricing_cards.html.twig' with {variant: 'full'} %}
        </div>

        {# Comparison note #}
        {# |raw is intentional: translation contains <strong> tag for emphasis #}
        <div class="mt-12 bg-cream rounded-2xl p-8 text-center max-w-2xl mx-auto">
            <p class="text-lg text-gray-600">{{ 'pricing.comparison'|trans|raw }}</p>
        </div>
    </div>
</section>

{# FAQ #}
<section class="py-20 bg-white">
    <div class="max-w-2xl mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-dark mb-12">{{ 'pricing.faq_title'|trans }}</h2>

        <div class="space-y-4">
            {% for faq in faqs %}
            <details class="bg-cream rounded-2xl border border-gray-200 group">
                <summary class="px-6 py-4 cursor-pointer text-dark font-semibold flex items-center justify-between">
                    {{ faq.q }}
                    <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </summary>
                <div class="px-6 pb-4 text-gray-600">{{ faq.a }}</div>
            </details>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}