{# app/templates/platform/sections/_products.html #}
{# Products/offerings section for multi-product platforms (e.g. wizard.lu) #}
{#
    Parameters:
    - products: ProductsSection object (or dict)
    - lang: Current language code
    - default_lang: Fallback language
#}

{% macro render_products(products, lang, default_lang) %}
{% if products and products.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 = products.title.translations.get(lang) or products.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 products.subtitle and products.subtitle.translations %}
            {% set subtitle = products.subtitle.translations.get(lang) or products.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>

        {# Product cards #}
        {% if products.products %}
        <div class="grid grid-cols-1 md:grid-cols-{{ [products.products|length, 3]|min }} gap-8">
            {% for product in products.products %}
            <div class="relative bg-gray-50 dark:bg-gray-700 rounded-2xl p-8 border-2 border-gray-200 dark:border-gray-600 hover:border-indigo-500 dark:hover:border-indigo-400 transition-all hover:shadow-xl group">
                {# Badge #}
                {% if product.badge and product.badge.translations %}
                {% set badge_text = product.badge.translations.get(lang) or product.badge.translations.get(default_lang) %}
                {% if badge_text %}
                <div class="absolute -top-3 right-4">
                    <span class="bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full">
                        {{ badge_text }}
                    </span>
                </div>
                {% endif %}
                {% endif %}

                {# Icon #}
                {% if product.icon %}
                <div class="w-14 h-14 mb-6 rounded-xl gradient-primary flex items-center justify-center">
                    <span x-html="typeof $icon !== 'undefined' ? $icon('{{ product.icon }}', 'w-7 h-7 text-white') : ''"></span>
                </div>
                {% endif %}

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

                {# Description #}
                {% set product_desc = product.description.translations.get(lang) or product.description.translations.get(default_lang) or '' %}
                {% if product_desc %}
                <p class="text-gray-600 dark:text-gray-400 mb-6">
                    {{ product_desc }}
                </p>
                {% endif %}

                {# CTA Link #}
                {% if product.url %}
                {% set link_label = (product.link_text.translations.get(lang) if product.link_text and product.link_text.translations else none)
                                 or (product.link_text.translations.get(default_lang) if product.link_text and product.link_text.translations else none)
                                 or 'Learn More' %}
                <a href="{{ product.url }}"
                   class="inline-flex items-center text-indigo-600 dark:text-indigo-400 font-semibold hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors group-hover:translate-x-1 transform transition-transform">
                    {{ link_label }}
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                    </svg>
                </a>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</section>
{% endif %}
{% endmacro %}