{# app/templates/store/landing-modern.html #}
{# standalone #}
{# Modern Landing Page Template - Feature Rich #}
{% extends "storefront/base.html" %}

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

{# Alpine.js component #}
{% block alpine_data %}storefrontLayoutData(){% 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="{{ store.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 store.name }}
            </h1>

            {# Tagline #}
            {% if store.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">
                {{ store.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 }}"
                   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>
                    <span class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" x-html="$icon('arrow-right', 'w-5 h-5')"></span>
                </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">
                <span class="w-6 h-6 text-gray-400" x-html="$icon('arrow-down', 'w-6 h-6')"></span>
            </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 store.description %}{{ store.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)">
                        <span class="w-10 h-10" x-html="$icon('check', 'w-10 h-10')"></span>
                    </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)">
                        <span class="w-10 h-10" x-html="$icon('bolt', 'w-10 h-10')"></span>
                    </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)">
                        <span class="w-10 h-10" x-html="$icon('currency-dollar', 'w-10 h-10')"></span>
                    </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 }}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
                <span class="w-5 h-5 ml-2" x-html="$icon('chevron-right', 'w-5 h-5')"></span>
            </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 %}