{# app/templates/vendor/landing-modern.html #}
{# Modern Landing Page Template - Feature Rich #}
{% 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 - Full Width with Overlay #}
    <section class="relative h-screen flex items-center justify-center bg-gradient-to-br from-primary/20 via-accent/10 to-primary/20 dark:from-primary/30 dark:via-accent/20 dark:to-primary/30">
        <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>

        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            {# Logo #}
            {% if theme.branding.logo %}
            <div class="mb-8 animate-fade-in">
                <img src="{{ theme.branding.logo }}"
                     alt="{{ vendor.name }}"
                     class="h-24 w-auto mx-auto">
            </div>
            {% endif %}

            {# Main Heading #}
            <h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6 animate-slide-up">
                {{ page.title or vendor.name }}
            </h1>

            {# Tagline #}
            {% if vendor.tagline %}
            <p class="text-xl md:text-3xl text-gray-700 dark:text-gray-200 mb-12 max-w-4xl mx-auto animate-slide-up animation-delay-200">
                {{ vendor.tagline }}
            </p>
            {% endif %}

            {# CTAs #}
            <div class="flex flex-col sm:flex-row gap-6 justify-center animate-fade-in animation-delay-400">
                <a href="{{ base_url }}shop/"
                   class="group inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-white bg-primary hover:bg-primary-dark transition-all transform hover:scale-105 shadow-2xl hover:shadow-3xl"
                   style="background-color: var(--color-primary)">
                    <span>Start Shopping</span>
                    <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
                <a href="#features"
                   class="inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-gray-700 dark:text-gray-200 bg-white/90 dark:bg-gray-800/90 backdrop-blur hover:bg-white dark:hover:bg-gray-800 transition-all border-2 border-gray-200 dark:border-gray-600">
                    Discover More
                </a>
            </div>

            {# Scroll Indicator #}
            <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
                <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
                </svg>
            </div>
        </div>
    </section>

    {# Features Section #}
    <section id="features" 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 md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
                    Why Choose Us
                </h2>
                <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                    {% if vendor.description %}{{ vendor.description }}{% else %}Experience excellence in every purchase{% endif %}
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
                {# Feature 1 #}
                <div class="text-center group">
                    <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/10 text-primary mb-6 group-hover:scale-110 transition-transform"
                         style="color: var(--color-primary)">
                        <svg class="w-10 h-10" 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-2xl font-bold text-gray-900 dark:text-white mb-4">
                        Quality Products
                    </h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Carefully curated selection of premium items
                    </p>
                </div>

                {# Feature 2 #}
                <div class="text-center group">
                    <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-accent/10 text-accent mb-6 group-hover:scale-110 transition-transform"
                         style="color: var(--color-accent)">
                        <svg class="w-10 h-10" 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-2xl font-bold text-gray-900 dark:text-white mb-4">
                        Fast Delivery
                    </h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Quick and reliable shipping to your doorstep
                    </p>
                </div>

                {# Feature 3 #}
                <div class="text-center group">
                    <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/10 text-primary mb-6 group-hover:scale-110 transition-transform"
                         style="color: var(--color-primary)">
                        <svg class="w-10 h-10" 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-2xl font-bold text-gray-900 dark:text-white mb-4">
                        Best Prices
                    </h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Competitive pricing with great value
                    </p>
                </div>
            </div>
        </div>
    </section>

    {# Content Section (if provided) #}
    {% if page.content %}
    <section 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 %}

    {# CTA Section #}
    <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 Get Started?
            </h2>
            <p class="text-xl mb-10 opacity-90">
                Explore our collection and find what you're looking for
            </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">
                Browse 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="M9 5l7 7-7 7"></path>
                </svg>
            </a>
        </div>
    </section>

</div>

<style>
/* Animation utilities */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 1s ease-out;
}

.animate-slide-up {
    animation: slide-up 0.8s ease-out;
}

.animation-delay-200 {
    animation-delay: 0.2s;
    animation-fill-mode: backwards;
}

.animation-delay-400 {
    animation-delay: 0.4s;
    animation-fill-mode: backwards;
}

/* Grid pattern */
.bg-grid-pattern {
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 40px 40px;
}
</style>
{% endblock %}