{# app/templates/platform/homepage-default.html #}
{# Default platform homepage template with section-based rendering #}
{% extends "platform/base.html" %}

{# Import section partials #}
{% from 'platform/sections/_hero.html' import render_hero %}
{% from 'platform/sections/_features.html' import render_features %}
{% from 'platform/sections/_pricing.html' import render_pricing %}
{% from 'platform/sections/_cta.html' import render_cta %}

{% block title %}
    {% if page %}{{ page.title }}{% else %}Home{% endif %} - {{ platform.name if platform else 'Multi-Vendor Marketplace' }}
{% endblock %}

{% block meta_description %}
    {% if page and page.meta_description %}
        {{ page.meta_description }}
    {% else %}
        Leading multi-vendor marketplace platform. Connect with thousands of vendors and discover millions of products.
    {% endif %}
{% endblock %}

{% block content %}
{# Set up language context #}
{% set lang = request.state.language|default("fr") or (platform.default_language if platform else 'fr') %}
{% set default_lang = platform.default_language if platform else 'fr' %}

{# ═══════════════════════════════════════════════════════════════════════════ #}
{# SECTION-BASED RENDERING (when page.sections is configured)                  #}
{# ═══════════════════════════════════════════════════════════════════════════ #}
{% if page and page.sections %}

    {# Hero Section #}
    {% if page.sections.hero %}
        {{ render_hero(page.sections.hero, lang, default_lang) }}
    {% endif %}

    {# Features Section #}
    {% if page.sections.features %}
        {{ render_features(page.sections.features, lang, default_lang) }}
    {% endif %}

    {# Pricing Section #}
    {% if page.sections.pricing %}
        {{ render_pricing(page.sections.pricing, lang, default_lang, tiers) }}
    {% endif %}

    {# CTA Section #}
    {% if page.sections.cta %}
        {{ render_cta(page.sections.cta, lang, default_lang) }}
    {% endif %}

{% else %}
{# ═══════════════════════════════════════════════════════════════════════════ #}
{# PLACEHOLDER CONTENT (when sections not configured)                          #}
{# ═══════════════════════════════════════════════════════════════════════════ #}

<!-- HERO SECTION -->
<section class="gradient-primary text-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6">
                {{ _('homepage.placeholder.title') or 'Configure Your Homepage' }}
            </h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90 max-w-3xl mx-auto">
                {{ _('homepage.placeholder.subtitle') or 'Use the admin panel to configure homepage sections with multi-language content.' }}
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <a href="/admin/content-pages"
                   class="bg-white text-gray-900 px-8 py-4 rounded-xl font-semibold hover:bg-gray-100 transition inline-flex items-center space-x-2">
                    <span>{{ _('homepage.placeholder.configure_btn') or 'Configure Homepage' }}</span>
                    <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>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- FEATURES SECTION (Placeholder) -->
<section class="py-16 bg-white dark:bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                {{ _('homepage.placeholder.features_title') or 'Features Section' }}
            </h2>
            <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                {{ _('homepage.placeholder.features_subtitle') or 'Configure feature cards in the admin panel' }}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            {% for i in range(3) %}
            <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-8 text-center">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
                    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-400 mb-3">
                    Feature {{ i + 1 }}
                </h3>
                <p class="text-gray-400">
                    Configure this feature card
                </p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- CTA SECTION (Placeholder) -->
<section class="py-16 bg-gray-100 dark:bg-gray-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-400 mb-4">
            {{ _('homepage.placeholder.cta_title') or 'Call to Action' }}
        </h2>
        <p class="text-lg text-gray-400 mb-8">
            {{ _('homepage.placeholder.cta_subtitle') or 'Configure CTA section in the admin panel' }}
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <span class="bg-gray-300 text-gray-500 px-6 py-3 rounded-lg font-semibold">
                Button 1
            </span>
            <span class="bg-gray-200 text-gray-500 px-6 py-3 rounded-lg font-semibold">
                Button 2
            </span>
        </div>
    </div>
</section>

{% endif %}
{% endblock %}