{# app/templates/platform/sections/_pricing.html #}
{# Pricing section partial with multi-language support #}
{#
    Parameters:
    - pricing: PricingSection object (or dict) from CMS sections JSON
    - lang: Current language code
    - default_lang: Fallback language
    - tiers: List of subscription tiers from DB (passed via context)

    Requires: import with context (for _() locale function)
#}

{# Helper macro: resolve a TranslatableText field with fallback #}
{% macro _t(field, lang, default_lang, fallback='') %}
{%- if field and field.translations -%}
    {{ field.translations.get(lang) or field.translations.get(default_lang) or fallback }}
{%- else -%}
    {{ fallback }}
{%- endif -%}
{% endmacro %}

{% macro render_pricing(pricing, lang, default_lang, tiers) %}
{% if pricing and pricing.enabled %}
<section id="pricing" class="py-16 lg:py-24 bg-gray-50 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {# Section header #}
        <div class="text-center mb-12">
            {% set title = _t(pricing.title, lang, default_lang, 'Simple, Transparent Pricing') %}
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                {{ title }}
            </h2>

            {% set subtitle = _t(pricing.subtitle, lang, default_lang) %}
            {% if subtitle|trim %}
            <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                {{ subtitle }}
            </p>
            {% endif %}
        </div>

        {# Pricing toggle (monthly/annual) #}
        {% if pricing.use_subscription_tiers and tiers %}
        {% set monthly_label = _t(pricing.monthly_label, lang, default_lang, 'Monthly') %}
        {% set annual_label = _t(pricing.annual_label, lang, default_lang, 'Annual') %}
        {% set save_text = _t(pricing.save_text, lang, default_lang, 'Save 2 months!') %}
        {% set popular_badge = _t(pricing.popular_badge, lang, default_lang, 'Most Popular') %}
        {% set cta_text = _t(pricing.cta_text, lang, default_lang, 'Start Free Trial') %}
        {% set per_month = _t(pricing.per_month_label, lang, default_lang, '/month') %}
        {% set per_year = _t(pricing.per_year_label, lang, default_lang, '/year') %}

        <div x-data="{ annual: false }" class="space-y-8">
            {# Billing toggle #}
            <div class="flex justify-center items-center space-x-4">
                <span :class="annual ? 'text-gray-400' : 'text-gray-900 dark:text-white font-semibold'">
                    {{ monthly_label }}
                </span>
                <button @click="annual = !annual"
                        class="relative w-14 h-7 bg-gray-200 dark:bg-gray-700 rounded-full transition-colors"
                        :class="annual && 'bg-indigo-600 dark:bg-indigo-500'">
                    <span class="absolute top-1 left-1 w-5 h-5 bg-white rounded-full shadow transition-transform"
                          :class="annual && 'translate-x-7'"></span>
                </button>
                <span :class="!annual ? 'text-gray-400' : 'text-gray-900 dark:text-white font-semibold'">
                    {{ annual_label }}
                    <span class="text-green-500 text-sm ml-1">{{ save_text }}</span>
                </span>
            </div>

            {# Pricing cards #}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-{{ [tiers|length, 4]|min }} gap-6">
                {% for tier in tiers %}
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm hover:shadow-lg transition-shadow p-8 {% if tier.is_popular %}ring-2 ring-indigo-500 relative{% endif %}">
                    {% if tier.is_popular %}
                    <div class="absolute -top-4 left-1/2 -translate-x-1/2">
                        <span class="bg-indigo-500 text-white text-sm font-semibold px-4 py-1 rounded-full">
                            {{ popular_badge }}
                        </span>
                    </div>
                    {% endif %}

                    <div class="text-center">
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
                            {{ tier.name }}
                        </h3>

                        {# Price #}
                        <div class="mb-6">
                            <span class="text-4xl font-extrabold text-gray-900 dark:text-white">
                                €<span x-text="annual ? '{{ tier.price_annual or (tier.price_monthly * 10)|int }}' : '{{ tier.price_monthly }}'">{{ tier.price_monthly }}</span>
                            </span>
                            <span class="text-gray-500 dark:text-gray-400"
                                  x-text="annual ? '{{ per_year }}' : '{{ per_month }}'">
                                {{ per_month }}
                            </span>
                        </div>

                        {# CTA button #}
                        <a href="/signup?tier={{ tier.code }}"
                           class="block w-full py-3 px-6 rounded-xl font-semibold transition {% if tier.is_popular %}bg-indigo-600 text-white hover:bg-indigo-700{% else %}bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600{% endif %}">
                            {{ cta_text }}
                        </a>
                    </div>

                    {# Features list (dynamic from module providers) #}
                    {% if tier.features %}
                    <ul class="mt-8 space-y-3">
                        {% for feat in tier.features %}
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-green-500 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span class="text-gray-600 dark:text-gray-400 text-sm">
                                {% if feat.is_quantitative and feat.limit %}
                                    {{ feat.limit }} {{ _(feat.name_key) }}
                                {% elif feat.is_quantitative %}
                                    {{ _(feat.name_key) }}
                                {% else %}
                                    {{ _(feat.name_key) }}
                                {% endif %}
                            </span>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
        {% else %}
        {# Placeholder when no tiers available #}
        {% set coming_soon = _t(pricing.coming_soon_text, lang, default_lang, 'Pricing plans coming soon') %}
        <div class="text-center text-gray-500 dark:text-gray-400 py-8">
            {{ coming_soon }}
        </div>
        {% endif %}
    </div>
</section>
{% endif %}
{% endmacro %}