{# app/modules/cms/templates/cms/storefront/landing-default.html #}
{# Default/Minimal Landing Page Template #}
{% extends "storefront/base.html" %}

{% block title %}{{ store.name }}{% endblock %}
{% block meta_description %}{{ page.meta_description or store.description or store.name if page else store.description or store.name }}{% endblock %}

{% block content %}
<div class="min-h-screen">

    {# Hero Section - Simple and Clean #}
    <section class="relative bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/10 py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                {# Logo #}
                {% if theme.branding.logo %}
                <div class="mb-8">
                    <img src="{{ theme.branding.logo }}"
                         alt="{{ store.name }}"
                         class="h-20 w-auto mx-auto">
                </div>
                {% endif %}

                {# Title #}
                <h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">
                    {{ page_title or store.name }}
                </h1>

                {# Tagline #}
                {% if store.tagline %}
                <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
                    {{ store.tagline }}
                </p>
                {% endif %}

                {# CTA Buttons — driven by storefront_nav (module-agnostic) #}
                {% set nav_items = storefront_nav.get('nav', []) %}
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    {% if nav_items %}
                    {# Primary CTA: first nav item from enabled modules #}
                    <a href="{{ base_url }}{{ nav_items[0].route }}"
                       class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-white bg-primary hover:bg-primary-dark transition-colors shadow-lg hover:shadow-xl"
                       style="background-color: var(--color-primary)">
                        {{ _(nav_items[0].label_key) }}
                        <span class="w-5 h-5 ml-2" x-html="$icon('arrow-right', 'w-5 h-5')"></span>
                    </a>
                    {% else %}
                    {# Fallback: account link when no module nav items #}
                    <a href="{{ base_url }}account/login"
                       class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-white bg-primary hover:bg-primary-dark transition-colors shadow-lg hover:shadow-xl"
                       style="background-color: var(--color-primary)">
                        {{ _('cms.storefront.my_account') }}
                        <span class="w-5 h-5 ml-2" x-html="$icon('arrow-right', 'w-5 h-5')"></span>
                    </a>
                    {% endif %}

                    {% if page and page.content %}
                    <a href="#about"
                       class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-2 border-gray-200 dark:border-gray-600">
                        {{ _('cms.storefront.learn_more') }}
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>

    {# Content Section (if provided) #}
    {% if page_content %}
    <section id="about" class="py-16 bg-white dark:bg-gray-900">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="prose prose-lg dark:prose-invert max-w-none">
                {{ page_content | safe }}{# sanitized: CMS content #}
            </div>
        </div>
    </section>
    {% endif %}

    {# Quick Links Section — driven by nav items and CMS pages #}
    {% set account_items = storefront_nav.get('account', []) %}
    {% set all_links = nav_items + account_items %}
    {% if all_links or header_pages %}
    <section class="py-16 bg-gray-50 dark:bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
                {{ _('cms.storefront.explore') }}
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                {# Module nav items (products, loyalty, etc.) #}
                {% for item in all_links[:3] %}
                <a href="{{ base_url }}{{ item.route }}"
                   class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
                    <div class="mb-4">
                        <span class="h-10 w-10 text-primary mx-auto" style="color: var(--color-primary)"
                              x-html="$icon('{{ item.icon }}', 'h-10 w-10 mx-auto')"></span>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
                        {{ _(item.label_key) }}
                    </h3>
                </a>
                {% endfor %}

                {# Fill remaining slots with CMS header pages #}
                {% set remaining = 3 - all_links[:3]|length %}
                {% if remaining > 0 and header_pages %}
                    {% for page in header_pages[:remaining] %}
                    <a href="{{ base_url }}{{ page.slug }}"
                       class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
                        <div class="mb-4">
                            <span class="h-10 w-10 text-primary mx-auto" style="color: var(--color-primary)"
                                  x-html="$icon('document-text', 'h-10 w-10 mx-auto')"></span>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
                            {{ page.title }}
                        </h3>
                        {% if page.meta_description %}
                        <p class="text-gray-600 dark:text-gray-400">
                            {{ page.meta_description }}
                        </p>
                        {% endif %}
                    </a>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </section>
    {% endif %}

</div>
{% endblock %}