{# app/templates/platform/homepage-minimal.html #}
{# Minimal/clean platform homepage template #}
{% extends "platform/base.html" %}

{% block title %}
    {% if page %}{{ page.title }}{% else %}{{ _("cms.platform.minimal.page_title_fallback") }}{% endif %} - {{ _("cms.platform.minimal.marketplace_suffix") }}
{% endblock %}

{% block content %}
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- MINIMAL HERO                                                     -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<section class="py-32 bg-white dark:bg-gray-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        {% if page %}
            <h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-8 leading-tight">
                {{ page.title }}
            </h1>
            <div class="text-xl text-gray-600 dark:text-gray-400 mb-12 max-w-2xl mx-auto">
                {{ page.content | safe }}{# sanitized: CMS content #}
            </div>
        {% else %}
            <h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-8 leading-tight">
                {{ _("cms.platform.minimal.fallback_title_1") }}<br>{{ _("cms.platform.minimal.fallback_title_2") }}
            </h1>
            <p class="text-xl text-gray-600 dark:text-gray-400 mb-12 max-w-2xl mx-auto">
                {{ _("cms.platform.minimal.fallback_subtitle") }}
            </p>
        {% endif %}

        <a href="/contact"
           class="inline-block bg-gray-900 dark:bg-white text-white dark:text-gray-900 px-8 py-4 rounded-lg font-semibold hover:opacity-90 transition text-lg">
            {{ _("cms.platform.minimal.get_started") }}
        </a>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- MINIMAL FEATURES                                                 -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<section class="py-24 bg-gray-50 dark:bg-gray-900">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
            <div class="text-center">
                <div class="text-4xl mb-4">⚡</div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                    {{ _("cms.platform.minimal.feat_fast") }}
                </h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">
                    {{ _("cms.platform.minimal.feat_fast_desc") }}
                </p>
            </div>

            <div class="text-center">
                <div class="text-4xl mb-4">🔒</div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                    {{ _("cms.platform.minimal.feat_secure") }}
                </h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">
                    {{ _("cms.platform.minimal.feat_secure_desc") }}
                </p>
            </div>

            <div class="text-center">
                <div class="text-4xl mb-4">🎨</div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                    {{ _("cms.platform.minimal.feat_custom") }}
                </h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">
                    {{ _("cms.platform.minimal.feat_custom_desc") }}
                </p>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- MINIMAL CTA                                                      -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<section class="py-24 bg-white dark:bg-gray-800">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">
            {{ _("cms.platform.minimal.cta_title") }}
        </h2>
        <p class="text-gray-600 dark:text-gray-400 mb-8">
            {{ _("cms.platform.minimal.cta_subtitle") }}
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="/contact"
               class="inline-block bg-gray-900 dark:bg-white text-white dark:text-gray-900 px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition">
                {{ _("cms.platform.minimal.cta_contact") }}
            </a>
            <a href="/about"
               class="inline-block border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white px-6 py-3 rounded-lg font-semibold hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                {{ _("cms.platform.minimal.cta_learn_more") }}
            </a>
        </div>
    </div>
</section>
{% endblock %}