{# app/templates/vendor/landing-default.html #}
{# Default/Minimal Landing Page Template #}
{% 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">

    {# 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="{{ vendor.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 vendor.name }}
                </h1>

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

                {# CTA Button #}
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ base_url }}shop/"
                       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)">
                        Browse Our Shop
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </a>
                    {% if 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">
                        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 #}
    <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">
                Explore
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <a href="{{ base_url }}shop/products"
                   class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
                    <div class="text-4xl mb-4">🛍️</div>
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
                        Shop Products
                    </h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Browse our complete catalog
                    </p>
                </a>

                {% if header_pages %}
                    {% for page in header_pages[:2] %}
                    <a href="{{ base_url }}shop/{{ 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="text-4xl mb-4">📄</div>
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
                            {{ page.title }}
                        </h3>
                        <p class="text-gray-600 dark:text-gray-400">
                            {{ page.meta_description or 'Learn more' }}
                        </p>
                    </a>
                    {% endfor %}
                {% else %}
                    <a href="{{ base_url }}shop/about"
                       class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
                        <div class="text-4xl mb-4">ℹ️</div>
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
                            About Us
                        </h3>
                        <p class="text-gray-600 dark:text-gray-400">
                            Learn about our story
                        </p>
                    </a>

                    <a href="{{ base_url }}shop/contact"
                       class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
                        <div class="text-4xl mb-4">📧</div>
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
                            Contact
                        </h3>
                        <p class="text-gray-600 dark:text-gray-400">
                            Get in touch with us
                        </p>
                    </a>
                {% endif %}
            </div>
        </div>
    </section>

</div>
{% endblock %}