{# app/templates/vendor/landing-minimal.html #}
{# Minimal Landing Page Template - Ultra Clean #}
{% extends "shop/base.html" %}

{% block title %}{{ vendor.name }}{% endblock %}
{% block meta_description %}{{ page.meta_description or vendor.description or vendor.name }}{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center py-20">

        {# Logo #}
        {% if theme.branding.logo %}
        <div class="mb-12">
            <img src="{{ theme.branding.logo }}"
                 alt="{{ vendor.name }}"
                 class="h-24 w-auto mx-auto">
        </div>
        {% endif %}

        {# Title #}
        <h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-8">
            {{ page.title or vendor.name }}
        </h1>

        {# Description/Content #}
        {% if page.content %}
        <div class="prose prose-lg dark:prose-invert max-w-2xl mx-auto mb-12 text-gray-600 dark:text-gray-300">
            {{ page.content | safe }}
        </div>
        {% elif vendor.description %}
        <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-2xl mx-auto">
            {{ vendor.description }}
        </p>
        {% endif %}

        {# Single CTA #}
        <div>
            <a href="{{ base_url }}shop/"
               class="inline-flex items-center justify-center px-10 py-5 text-xl font-semibold rounded-full text-white bg-primary hover:bg-primary-dark transition-all transform hover:scale-105 shadow-2xl"
               style="background-color: var(--color-primary)">
                Enter Shop
                <svg class="w-6 h-6 ml-3" 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>

        {# Optional Links Below #}
        {% if header_pages or footer_pages %}
        <div class="mt-16 pt-8 border-t border-gray-200 dark:border-gray-700">
            <div class="flex flex-wrap justify-center gap-6 text-sm">
                <a href="{{ base_url }}shop/products" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">
                    Products
                </a>
                {% for page in (header_pages or footer_pages)[:4] %}
                <a href="{{ base_url }}shop/{{ page.slug }}" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">
                    {{ page.title }}
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}

    </div>
</div>
{% endblock %}