{# app/templates/store/landing-full.html #}
{# standalone #}
{# Full Landing Page Template - Maximum Features #}
{% 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 %}
{# ═══════════════════════════════════════════════════════════════════ #}
{# SECTION-BASED RENDERING (when page.sections is configured)         #}
{# Used by POC builder templates — takes priority over hardcoded HTML #}
{# ═══════════════════════════════════════════════════════════════════ #}
{% set sections = page_sections if page_sections is defined and page_sections else (page.sections if page else none) %}
{% if sections %}
{% from 'cms/platform/sections/_hero.html' import render_hero %}
{% from 'cms/platform/sections/_features.html' import render_features %}
{% from 'cms/platform/sections/_testimonials.html' import render_testimonials %}
{% from 'cms/platform/sections/_gallery.html' import render_gallery %}
{% from 'cms/platform/sections/_contact_info.html' import render_contact_info %}
{% from 'cms/platform/sections/_cta.html' import render_cta %}

{% set lang = request.state.language|default("fr") %}
{% set default_lang = 'fr' %}

<div class="min-h-screen">
    {% if sections.hero %}{{ render_hero(sections.hero, lang, default_lang) }}{% endif %}
    {% if sections.features %}{{ render_features(sections.features, lang, default_lang) }}{% endif %}
    {% if sections.testimonials %}{{ render_testimonials(sections.testimonials, lang, default_lang) }}{% endif %}
    {% if sections.gallery %}{{ render_gallery(sections.gallery, lang, default_lang) }}{% endif %}
    {% if sections.contact_info %}{{ render_contact_info(sections.contact_info, lang, default_lang) }}{% endif %}
    {% if sections.cta %}{{ render_cta(sections.cta, lang, default_lang) }}{% endif %}
</div>

{% else %}
{# ═══════════════════════════════════════════════════════════════════ #}
{# HARDCODED LAYOUT (original full landing page — no sections JSON)   #}
{# ═══════════════════════════════════════════════════════════════════ #}
<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="{{ store.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 store.name }}
                    </h1>

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

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

                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="{{ base_url }}"
                           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
                            <span class="w-5 h-5 ml-2" x-html="$icon('arrow-right', 'w-5 h-5')"></span>
                        </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)">
                        <span class="w-6 h-6" x-html="$icon('check', 'w-6 h-6')"></span>
                    </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)">
                        <span class="w-6 h-6" x-html="$icon('bolt', 'w-6 h-6')"></span>
                    </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)">
                        <span class="w-6 h-6" x-html="$icon('currency-dollar', 'w-6 h-6')"></span>
                    </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)">
                        <span class="w-6 h-6" x-html="$icon('user-plus', 'w-6 h-6')"></span>
                    </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 }}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 }}{{ 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 }}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 }}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 }}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
                <span class="w-5 h-5 ml-2" x-html="$icon('arrow-right', 'w-5 h-5')"></span>
            </a>
        </div>
    </section>

</div>
{% endif %}
{% endblock %}