{# app/templates/platform/sections/_hero.html #}
{# Hero section partial with multi-language support #}
{#
    Parameters:
    - hero: HeroSection object (or dict)
    - lang: Current language code (passed from parent template)
    - default_lang: Fallback language (passed from parent template)
#}

{% macro render_hero(hero, lang, default_lang) %}
{% if hero and hero.enabled %}
<section class="gradient-primary text-white py-20 relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            {# Badge #}
            {% if hero.badge_text and hero.badge_text.translations %}
            {% set badge = hero.badge_text.translations.get(lang) or hero.badge_text.translations.get(default_lang) %}
            {% if badge %}
            <div class="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-white text-sm font-medium mb-6">
                {{ badge }}
            </div>
            {% endif %}
            {% endif %}

            {# Title #}
            {% set title = hero.title.translations.get(lang) or hero.title.translations.get(default_lang) or '' %}
            {% if title %}
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
                {{ title }}
            </h1>
            {% endif %}

            {# Subtitle #}
            {% set subtitle = hero.subtitle.translations.get(lang) or hero.subtitle.translations.get(default_lang) or '' %}
            {% if subtitle %}
            <p class="text-xl md:text-2xl mb-10 opacity-90 max-w-3xl mx-auto">
                {{ subtitle }}
            </p>
            {% endif %}

            {# Buttons #}
            {% if hero.buttons %}
            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                {% for button in hero.buttons %}
                {% set btn_text = button.text.translations.get(lang) or button.text.translations.get(default_lang) or '' %}
                {% if btn_text and button.url %}
                <a href="{{ button.url }}"
                   class="{% if button.style == 'primary' %}bg-white text-gray-900 hover:bg-gray-100{% elif button.style == 'secondary' %}bg-white/20 text-white hover:bg-white/30{% else %}border-2 border-white text-white hover:bg-white/10{% endif %} px-8 py-4 rounded-xl font-semibold transition inline-flex items-center space-x-2">
                    <span>{{ btn_text }}</span>
                    {% if button.style == 'primary' %}
                    <svg class="w-5 h-5" 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"></path>
                    </svg>
                    {% endif %}
                </a>
                {% endif %}
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>

    {# Background decorations #}
    <div class="absolute top-0 right-0 w-1/3 h-full opacity-10">
        <svg viewBox="0 0 200 200" class="w-full h-full">
            <circle cx="100" cy="100" r="80" fill="white"/>
        </svg>
    </div>
</section>
{% endif %}
{% endmacro %}