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

{% block title %}
    {% if page %}{{ page.title }}{% else %}Home{% endif %} - Marketplace
{% 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 }}
            </div>
        {% else %}
            <h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-8 leading-tight">
                Multi-Vendor<br>Marketplace
            </h1>
            <p class="text-xl text-gray-600 dark:text-gray-400 mb-12 max-w-2xl mx-auto">
                The simplest way to launch your online store and connect with customers worldwide.
            </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">
            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">
                    Fast
                </h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">
                    Lightning-fast performance optimized for conversions
                </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">
                    Secure
                </h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">
                    Enterprise-grade security for your peace of mind
                </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">
                    Custom
                </h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">
                    Fully customizable to match your brand identity
                </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">
            Ready to launch?
        </h2>
        <p class="text-gray-600 dark:text-gray-400 mb-8">
            Join our marketplace today
        </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">
                Contact Us
            </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">
                Learn More
            </a>
        </div>
    </div>
</section>
{% endblock %}