{# app/templates/vendor/landing-full.html #}
{# Full Landing Page Template - Maximum Features #}
{% extends "shop/base.html" %}

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

{# Alpine.js component #}
{% block alpine_data %}shopLayoutData(){% endblock %}

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

    {# Hero Section - Split Design #}
    <section class="relative overflow-hidden bg-gradient-to-br from-primary/10 to-accent/5 dark:from-primary/20 dark:to-accent/10">
        <div class="max-w-7xl mx-auto">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center min-h-screen">
                {# Left - Content #}
                <div class="px-4 sm:px-6 lg:px-8 py-20">
                    {% if theme.branding.logo %}
                    <div class="mb-8">
                        <img src="{{ theme.branding.logo }}"
                             alt="{{ vendor.name }}"
                             class="h-16 w-auto">
                    </div>
                    {% endif %}

                    <h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
                        {{ page.title or vendor.name }}
                    </h1>

                    {% if vendor.tagline %}
                    <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8">
                        {{ vendor.tagline }}
                    </p>
                    {% endif %}

                    {% if vendor.description %}
                    <p class="text-lg text-gray-600 dark:text-gray-400 mb-10">
                        {{ vendor.description }}
                    </p>
                    {% endif %}

                    <div class="flex flex-col sm:flex-row gap-4">
                        <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"
                           style="background-color: var(--color-primary)">
                            Shop Now
                            <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="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                            </svg>
                        </a>
                        <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>
                    </div>

                    {# Stats/Badges #}
                    <div class="grid grid-cols-3 gap-8 mt-16 pt-10 border-t border-gray-200 dark:border-gray-700">
                        <div>
                            <div class="text-3xl font-bold text-primary mb-2" style="color: var(--color-primary)">100+</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">Products</div>
                        </div>
                        <div>
                            <div class="text-3xl font-bold text-primary mb-2" style="color: var(--color-primary)">24/7</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">Support</div>
                        </div>
                        <div>
                            <div class="text-3xl font-bold text-primary mb-2" style="color: var(--color-primary)">⭐⭐⭐⭐⭐</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">Rated</div>
                        </div>
                    </div>
                </div>

                {# Right - Visual #}
                <div class="hidden lg:flex items-center justify-center p-12">
                    <div class="relative w-full max-w-lg">
                        {# Decorative Circles #}
                        <div class="absolute top-0 -left-4 w-72 h-72 bg-primary rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
                        <div class="absolute -bottom-8 -right-4 w-72 h-72 bg-accent rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse" style="animation-delay: 1s;"></div>

                        {# Image placeholder or icon #}
                        <div class="relative z-10 bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-12 text-center">
                            <div class="text-9xl mb-4">🛍️</div>
                            <p class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
                                Your Shopping Destination
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {# Features Grid #}
    <section class="py-24 bg-white dark:bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
                    What We Offer
                </h2>
                <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                    Everything you need for an exceptional shopping experience
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
                    <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4" style="color: var(--color-primary)">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                        Premium Quality
                    </h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Top-tier products carefully selected for you
                    </p>
                </div>

                <div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
                    <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4" style="color: var(--color-accent)">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                        Fast Shipping
                    </h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Quick delivery right to your door
                    </p>
                </div>

                <div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
                    <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4" style="color: var(--color-primary)">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                        Best Value
                    </h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Competitive prices and great deals
                    </p>
                </div>

                <div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
                    <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4" style="color: var(--color-accent)">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                        24/7 Support
                    </h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Always here to help you
                    </p>
                </div>
            </div>
        </div>
    </section>

    {# About Section (with content) #}
    {% if page.content %}
    <section id="about" class="py-24 bg-gray-50 dark:bg-gray-800">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="prose prose-xl dark:prose-invert max-w-none">
                {{ page.content | safe }}{# sanitized: CMS content #}
            </div>
        </div>
    </section>
    {% endif %}

    {# Quick Navigation #}
    <section class="py-24 bg-white dark:bg-gray-900">
        <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 More
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <a href="{{ base_url }}shop/products"
                   class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/10 p-8 hover:shadow-xl transition-all">
                    <div class="relative z-10">
                        <div class="text-5xl mb-4">🛍️</div>
                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-primary transition-colors">
                            Shop Products
                        </h3>
                        <p class="text-gray-600 dark:text-gray-400">
                            Browse our complete collection
                        </p>
                    </div>
                    <div class="absolute inset-0 bg-primary opacity-0 group-hover:opacity-5 transition-opacity"></div>
                </a>

                {% if header_pages %}
                    {% for page in header_pages[:2] %}
                    <a href="{{ base_url }}shop/{{ page.slug }}"
                       class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-accent/10 to-accent/5 dark:from-accent/20 dark:to-accent/10 p-8 hover:shadow-xl transition-all">
                        <div class="relative z-10">
                            <div class="text-5xl mb-4">📄</div>
                            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-accent transition-colors">
                                {{ page.title }}
                            </h3>
                            <p class="text-gray-600 dark:text-gray-400">
                                {{ page.meta_description or 'Learn more about us' }}
                            </p>
                        </div>
                        <div class="absolute inset-0 bg-accent opacity-0 group-hover:opacity-5 transition-opacity"></div>
                    </a>
                    {% endfor %}
                {% else %}
                    <a href="{{ base_url }}shop/about"
                       class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-accent/10 to-accent/5 dark:from-accent/20 dark:to-accent/10 p-8 hover:shadow-xl transition-all">
                        <div class="relative z-10">
                            <div class="text-5xl mb-4">ℹ️</div>
                            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-accent transition-colors">
                                About Us
                            </h3>
                            <p class="text-gray-600 dark:text-gray-400">
                                Learn about our story and mission
                            </p>
                        </div>
                        <div class="absolute inset-0 bg-accent opacity-0 group-hover:opacity-5 transition-opacity"></div>
                    </a>

                    <a href="{{ base_url }}shop/contact"
                       class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/10 p-8 hover:shadow-xl transition-all">
                        <div class="relative z-10">
                            <div class="text-5xl mb-4">📧</div>
                            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-primary transition-colors">
                                Contact Us
                            </h3>
                            <p class="text-gray-600 dark:text-gray-400">
                                Get in touch with our team
                            </p>
                        </div>
                        <div class="absolute inset-0 bg-primary opacity-0 group-hover:opacity-5 transition-opacity"></div>
                    </a>
                {% endif %}
            </div>
        </div>
    </section>

    {# Final CTA #}
    <section class="py-24 bg-gradient-to-r from-primary to-accent text-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-4xl md:text-5xl font-bold mb-6">
                Ready to Start Shopping?
            </h2>
            <p class="text-xl mb-10 opacity-90">
                Join thousands of satisfied customers today
            </p>
            <a href="{{ base_url }}shop/products"
               class="inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-primary bg-white hover:bg-gray-50 transition-all transform hover:scale-105 shadow-2xl">
                View All Products
                <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>
        </div>
    </section>

</div>
{% endblock %}