{# app/templates/platform/sections/_features.html #}
{# Features section partial with multi-language support #}
{#
    Parameters:
    - features: FeaturesSection object (or dict)
    - lang: Current language code
    - default_lang: Fallback language
#}

{% macro render_features(features, lang, default_lang) %}
{% if features and features.enabled %}
<section class="py-16 lg:py-24 bg-white dark:bg-gray-800">
    <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 = features.title.translations.get(lang) or features.title.translations.get(default_lang) or '' %}
            {% if title %}
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                {{ title }}
            </h2>
            {% endif %}

            {% if features.subtitle and features.subtitle.translations %}
            {% set subtitle = features.subtitle.translations.get(lang) or features.subtitle.translations.get(default_lang) %}
            {% if subtitle %}
            <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                {{ subtitle }}
            </p>
            {% endif %}
            {% endif %}
        </div>

        {# Feature cards #}
        {% if features.features %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-{{ [features.features|length, 4]|min }} gap-8">
            {% for feature in features.features %}
            <div class="card-hover bg-gray-50 dark:bg-gray-700 rounded-xl p-8 text-center">
                {# Icon #}
                {% if feature.icon %}
                <div class="w-16 h-16 mx-auto mb-4 rounded-full gradient-primary flex items-center justify-center">
                    {# Support for icon names - rendered via Alpine $icon helper or direct SVG #}
                    {% if feature.icon.startswith('<svg') %}
                    {{ feature.icon | safe }}
                    {% else %}
                    <span x-html="typeof $icon !== 'undefined' ? $icon('{{ feature.icon }}', 'w-8 h-8 text-white') : ''"></span>
                    {% endif %}
                </div>
                {% endif %}

                {# Title #}
                {% set feature_title = feature.title.translations.get(lang) or feature.title.translations.get(default_lang) or '' %}
                {% if feature_title %}
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
                    {{ feature_title }}
                </h3>
                {% endif %}

                {# Description #}
                {% set feature_desc = feature.description.translations.get(lang) or feature.description.translations.get(default_lang) or '' %}
                {% if feature_desc %}
                <p class="text-gray-600 dark:text-gray-400">
                    {{ feature_desc }}
                </p>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</section>
{% endif %}
{% endmacro %}