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

{% block title %}{{ store.name }}{% endblock %}
{% block meta_description %}{{ page.meta_description or store.description or store.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="{{ store.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 store.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 }}{# sanitized: CMS content #}
        </div>
        {% elif store.description %}
        <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-2xl mx-auto">
            {{ store.description }}
        </p>
        {% endif %}

        {# Single CTA #}
        <div>
            <a href="{{ base_url }}"
               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
                <span class="w-6 h-6 ml-3" x-html="$icon('arrow-right', 'w-6 h-6')"></span>
            </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 }}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 }}{{ 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 %}