{#
 # ============================================================================
 # ORGANISM: LANDING FOOTER
 # ============================================================================
 #
 # Footer with logo, tagline, product links, nav links, legal links and socials.
 # Fully parameterized: all content passed via Twig parameters.
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/logo/logo-with-text.html.twig
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre      | Type   | Defaut                              | Description                  |
 # |----------------|--------|-------------------------------------|------------------------------|
 # | tagline        | string | '6 outils IA pensés pour...'        | Brand tagline                |
 # | productsTitle  | string | 'Produits'                          | Products column heading      |
 # | products       | array  | (default 5 products)                | [{label, href}]              |
 # | linksTitle     | string | 'Liens'                             | Links column heading         |
 # | links          | array  | (default nav links)                 | [{label, href}]              |
 # | copyright      | string | 'Bubul. Créé avec ... enseignants.' | Copyright text               |
 # | legalLinks     | array  | (default legal links)               | [{label, href}]              |
 # | socials        | array  | (default LinkedIn)                  | [{label, href, svg}]         |
 # | class          | string | ''                                  | Additional CSS classes       |
 #
 # ============================================================================
 # USAGE EXAMPLES
 # ============================================================================
 #
 # Default:
 # {% include '_organisms/landing/footer.html.twig' only %}
 #
 # Custom tagline and links:
 # {% include '_organisms/landing/footer.html.twig' with {
 #     tagline: 'SAM connecte votre Moodle...',
 #     links: [{ label: 'FAQ', href: '#faq' }]
 # } only %}
 #
 # ============================================================================
 #}

{% set productsTitle = productsTitle ?? 'Outils' %}
{% set linksTitle = linksTitle ?? 'Liens' %}
{% set class = class ?? '' %}

{% set defaultProducts = [
    { label: 'Moodia',    href: path('app_landing_moodia'),    color: tool_color_details['moodia'].primary    ?? '#1281E4', badge: '.MBZ'     },
    { label: 'Scormia',   href: path('app_landing_scormia'),   color: tool_color_details['scormia'].primary   ?? '#1E40AF', badge: 'SCORM'    },
    { label: 'Slidia',    href: path('app_landing_slidia'),    color: tool_color_details['slidia'].primary    ?? '#E91E8C', badge: '.PPTX'    },
    { label: 'Serenia',   href: path('app_landing_serenia'),   color: tool_color_details['serenia'].primary   ?? '#7C3AED', badge: 'Chat'     },
    { label: 'Monalisia', href: path('app_landing_monalisia'), color: tool_color_details['monalisia'].primary ?? '#ED8600', badge: '.PNG'     },
    { label: 'Castia',    href: path('app_landing_castia'),    color: tool_color_details['castia'].primary    ?? '#309344', badge: '.MP3'     },
    { label: 'Pixia',     href: path('app_landing_pixia'),     color: tool_color_details['pixia'].primary     ?? '#6366F1', badge: '.PNG'     },
    { label: 'Promptly',  href: path('app_landing_promptly'),  color: tool_color_details['promptly'].primary  ?? '#1F9C97', badge: 'Prompts'  },
    { label: 'SAM',       href: path('app_landing_sam'),       color: tool_color_details['sam'].primary       ?? '#06B6D4', badge: 'LMS'      }
] %}
{% set products = products ?? defaultProducts %}
{% set tagline = tagline ?? (products|length ~ ' outils IA pensés pour les formateurs — créez, déployez et pilotez vos formations depuis un seul espace.') %}

{% set defaultLinks = [
    { label: 'Fonctionnalités', href: '#features' },
    { label: 'Nos outils', href: '#how-it-works' },
    { label: 'Tarifs', href: '#pricing' },
    { label: 'FAQ', href: '#faq' },
    { label: 'Contact', href: path('app_contact') }
] %}
{% set links = links ?? defaultLinks %}

{% set copyright = copyright ?? 'Bubul. Créé avec ❤️ pour les équipes pédagogiques.' %}

{% set defaultLegalLinks = [
    { label: 'Mentions légales', href: path('app_legal_mentions') },
    { label: 'CGV', href: path('app_legal_cgv') },
    { label: 'Politique de sécurité', href: path('app_legal_securite') }
] %}
{% set legalLinks = legalLinks ?? defaultLegalLinks %}

{% set defaultSocials = [
    {
        label: 'LinkedIn',
        href: '#',
        svg: '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>'
    }
] %}
{% set socials = socials ?? defaultSocials %}

<footer class="bg-white {{ class }}">
    <div class="max-w-[1280px] mx-auto px-6 lg:px-8">

        {# ===== Main Footer ===== #}
        <div class="py-10 flex flex-col md:flex-row gap-8">

            {# Brand Column #}
            <div class="flex-1">
                <div class="mb-4">
                    {% include '_atoms/logo/logo-with-text.html.twig' with { showIcon: true, showText: false, showBadge: false, size: '2xl' } only %}
                </div>
                <p class="text-gray-600 leading-relaxed text-sm max-w-[280px]">
                    {{ tagline }}
                </p>
            </div>

            {# Nav Columns — pushed to the right #}
            <div class="flex gap-20 md:gap-28 shrink-0">

                {# Products Column #}
                <div>
                    <h4 class="font-secondary font-semibold text-gray-900 mb-4">{{ productsTitle }}</h4>
                    <ul class="space-y-2">
                        {% for product in products %}
                            {% set pColor = product.color ?? '#1281E4' %}
                            <li>
                                <a href="{{ product.href }}"
                                   class="group flex items-center gap-2 text-sm no-underline"
                                   style="color: #4B5563; transition: color 0.18s ease;"
                                   onmouseover="this.style.color='{{ pColor }}';"
                                   onmouseout="this.style.color='#4B5563';">
                                    <span>{{ product.label }}</span>
                                    {% if product.badge is defined %}
                                        <span class="text-[0.6rem] font-semibold font-mono px-1.5 py-0.5 rounded"
                                              style="background: {{ pColor }}15; color: {{ pColor }};">{{ product.badge }}</span>
                                    {% endif %}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

                {# Links Column #}
                <div>
                    <h4 class="font-secondary font-semibold text-gray-900 mb-4">{{ linksTitle }}</h4>
                    <ul class="space-y-2">
                        {% for link in links %}
                            <li>
                                <a href="{{ link.href }}" class="text-gray-600 hover:text-primary transition-colors duration-fast text-sm">
                                    {{ link.label }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

            </div>

        </div>

        {# ===== Bottom Footer ===== #}
        <div class="py-4 border-t border-gray-200 flex flex-col md:flex-row items-center justify-between gap-4">
            <span class="text-gray-500 text-sm">
                &copy; {{ 'now' | date('Y') }} {{ copyright }}
            </span>
            <div class="flex items-center gap-6">
                {% for legal in legalLinks %}
                    <a href="{{ legal.href }}" class="text-gray-500 hover:text-primary transition-colors duration-fast text-sm">{{ legal.label }}</a>
                {% endfor %}
                {% if socials|length > 0 %}
                    <div class="flex items-center gap-4 ml-2">
                        {% for social in socials %}
                            <a href="{{ social.href }}" aria-label="{{ social.label }}" class="text-gray-400 hover:text-primary transition-colors duration-fast">
                                {{ social.svg|raw }}
                            </a>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>

    </div>
</footer>