{% extends 'base.html.twig' %}
{% block title %}{{ (system_setting is defined and system_setting and system_setting.seoHomeTitle) ? system_setting.seoHomeTitle : 'CARTECADEAU — Cartes-cadeaux & recharges, livrées en un éclair' }}{% endblock %}

{% block body %}
{# ============================================================
   Mapping marque → couleurs (utilisé partout : floating stack,
   product cards, marquee, category rail). Si une catégorie n'est
   pas listée, fallback or/aurore via .product-emblem (sans .branded).
   ============================================================ #}
{% set brandMap = {
    'PlayStation':    {'primary': '#0070D1', 'secondary': '#003791', 'initials': 'PS'},
    'Xbox':           {'primary': '#107C10', 'secondary': '#0E5E0E', 'initials': 'XB'},
    'Steam':          {'primary': '#1B2838', 'secondary': '#66C0F4', 'initials': 'ST'},
    'Netflix':        {'primary': '#E50914', 'secondary': '#831010', 'initials': 'N'},
    'Spotify':        {'primary': '#1DB954', 'secondary': '#0E6B2F', 'initials': 'SP'},
    'Amazon':         {'primary': '#FF9900', 'secondary': '#232F3E', 'initials': 'AZ'},
    'Apple':          {'primary': '#A2AAAD', 'secondary': '#1C1C1E', 'initials': 'iT'},
    'iTunes':         {'primary': '#A2AAAD', 'secondary': '#1C1C1E', 'initials': 'iT'},
    'Google Play':    {'primary': '#34A853', 'secondary': '#FBBC04', 'initials': 'GP'},
    'Free Fire':      {'primary': '#FF6A00', 'secondary': '#E2231A', 'initials': 'FF'},
    'Mobile Legends': {'primary': '#22D3EE', 'secondary': '#1E1B4B', 'initials': 'ML'},
    'PUBG Mobile':    {'primary': '#F2A900', 'secondary': '#1A1A1A', 'initials': 'PG'},
    'Genshin Impact': {'primary': '#FFB347', 'secondary': '#5B3E91', 'initials': 'GI'},
    'Valorant':       {'primary': '#FF4655', 'secondary': '#0F1923', 'initials': 'VA'},
    'Riot':           {'primary': '#FF4655', 'secondary': '#0F1923', 'initials': 'RT'},
    'Fortnite':       {'primary': '#9F4DEA', 'secondary': '#00FFFF', 'initials': 'FN'},
    'Roblox':         {'primary': '#E2231A', 'secondary': '#393B3F', 'initials': 'RB'},
    'Nintendo':       {'primary': '#E60012', 'secondary': '#1F1F1F', 'initials': 'NS'},
    'Twitch':         {'primary': '#9146FF', 'secondary': '#392E5C', 'initials': 'TV'},
} %}

{# Helper: récupère le brand d'une catégorie (ou un fallback or). #}
{% macro brandOf(cat, map) %}
    {%- if cat and map[cat] is defined -%}
        {{- map[cat]|json_encode|raw -}}
    {%- else -%}
        {"primary":"#f4c77b","secondary":"#e0a93f","initials":"{{ (cat ?: 'GC')|slice(0,2)|upper }}"}
    {%- endif -%}
{% endmacro %}

{# ---------- BARRE CATÉGORIES ---------- #}
<div class="cat-bar-wrap">
    <div class="cat-bar">
        <a class="cat-tab active" href="{{ path('app_catalog_index') }}">Toutes les catégories</a>
        <a class="cat-tab" href="{{ path('app_catalog_index', {type: 'voucher'}) }}">Cartes-cadeaux</a>
        <a class="cat-tab" href="{{ path('app_catalog_index', {type: 'topup'}) }}">Recharges de jeux</a>
        {% for cat in platforms %}
            <a class="cat-tab" href="{{ path('app_catalog_index', {category: cat}) }}">{{ cat }}</a>
        {% endfor %}
    </div>
</div>

{# ---------- HERO PROMO (avec FloatingStack autour du phone) ---------- #}
<section class="container hero-promo-wrap">
    <div class="hero-promo">
        <div class="hp-left">
            <p class="kicker">Wupex × CinetPay · Mobile Money</p>
            {% if system_setting is defined and system_setting and system_setting.seoPromoBannerText %}
                <p class="meta">{{ system_setting.seoPromoBannerText }}</p>
            {% endif %}

            <div class="hero-rotator">
                <span class="rot">Reçois tes <span class="accent">cartes-cadeaux</span><br>en quelques minutes</span>
                <span class="rot">Recharge tes <span class="accent">jeux préférés</span><br>sans complications</span>
                <span class="rot">Paie en <span class="accent">Mobile Money</span><br>code livré instantanément</span>
            </div>

            <div class="trust-card">
                <div class="trust-row">
                    <span class="trust-ico">💳</span>
                    <div><strong>Paiement Mobile Money</strong><span>Wave · Orange · MTN · Moov</span></div>
                </div>
                <div class="trust-row">
                    <span class="trust-ico">🔒</span>
                    <div><strong>Transactions sécurisées</strong><span>Paiement vérifié via CinetPay</span></div>
                </div>
                <div class="trust-row">
                    <span class="trust-ico">🎧</span>
                    <div><strong>Support disponible</strong><span>On t'accompagne en cas de souci</span></div>
                </div>
            </div>

            <div class="hero-actions">
                <a href="{{ path('app_catalog_index') }}" class="btn btn-glow">Acheter maintenant</a>
                {% if not app.user %}<a href="{{ path('app_register') }}" class="btn btn-ghost">Créer un compte</a>{% endif %}
            </div>

            {# Stats de confiance — remplace les dots #}
            <div class="hero-stats">
                <div class="hero-stat"><strong>+200</strong><span>marques</span></div>
                <div class="hero-stat"><strong class="accent">38 s</strong><span>livraison moyenne</span></div>
                <div class="hero-stat"><strong>24/7</strong><span>support</span></div>
            </div>
        </div>

        <div class="hp-right">
            {# FloatingStack — 4 cartes de marque flottant autour du phone #}
            <div class="float-stack" aria-hidden="true">
                {% set floatBrands = platforms|default([])|slice(0, 4) %}
                {% for cat in floatBrands %}
                    {% set b = brandMap[cat] ?? {'primary': '#f4c77b', 'secondary': '#e0a93f', 'initials': cat|slice(0,2)|upper} %}
                    <div class="float-card f-{{ loop.index0 }}"
                         style="--brand-1: {{ b.primary }}; --brand-2: {{ b.secondary }};">
                        <div class="float-emblem">
                            <span class="emblem-shine"></span>
                            <span class="emblem-text">{{ b.initials }}</span>
                        </div>
                        <span class="float-name">{{ cat }}</span>
                    </div>
                {% endfor %}
            </div>

            <div class="phone" aria-hidden="true">
                <span class="phone-notch"></span>
                <div class="phone-screen">
                    <div class="ps-brand">🎁 CARTECADEAU</div>
                    <div class="ps-check">✓</div>
                    <p class="ps-title">Paiement confirmé</p>
                    {% if spotlight %}
                        {% set sp = spotlight.product %}
                        {% set spBrand = brandMap[sp.category] ?? null %}
                        <div class="ps-item">
                            <span class="ps-emblem" {% if spBrand %}style="background: linear-gradient(160deg, {{ spBrand.primary }}, {{ spBrand.secondary }}); color: #fff;"{% endif %}>
                                {{ spBrand ? spBrand.initials : (sp.category ?: sp.name)|slice(0, 2)|upper }}
                            </span>
                            <div class="ps-item-txt">
                                <strong>{{ sp.name }}</strong>
                                <span>{{ spotlight.displayPrice|number_format(pricingContext.decimals, ',', ' ') }} {{ pricingContext.displayCurrency }}</span>
                            </div>
                        </div>
                    {% else %}
                        <div class="ps-item">
                            <span class="ps-emblem" style="background: linear-gradient(160deg, #0070D1, #003791); color: #fff;">PS</span>
                            <div class="ps-item-txt"><strong>Carte PlayStation 25 €</strong><span>18 650 XOF</span></div>
                        </div>
                    {% endif %}
                    <div class="ps-code">
                        <span class="ps-code-label">Ton code</span>
                        <span class="ps-code-val">5XK2 · 9QF7 · 4821</span>
                        <span class="ps-copied">Copié ✓</span>
                    </div>
                    <div class="ps-foot"><span class="ps-bolt">⚡</span> Livré en 38 secondes</div>
                </div>
            </div>
        </div>
    </div>
</section>

{# ---------- RAIL CATÉGORIES (orbes colorées) ---------- #}
{% if platforms is not empty %}
<section class="container cat-rail-section">
    <div class="section-head">
        <h2>Explore par <span class="accent">catégorie</span></h2>
        <a href="{{ path('app_catalog_index') }}" class="section-link">Tout voir →</a>
    </div>
    <div class="cat-rail-wrap">
        <button type="button" class="rail-arrow prev" aria-label="Précédent"
                onclick="document.getElementById('catRail').scrollBy({left:-280,behavior:'smooth'})">‹</button>
        <div class="cat-rail" id="catRail">
            {% for cat in platforms %}
                {% set b = brandMap[cat] ?? null %}
                {% set tile = b ? b.primary : '#f4c77b' %}
                <a class="cat-orb" href="{{ path('app_catalog_index', {category: cat}) }}"
                   style="--tile: {{ tile }};">
                    <span class="orb">{{ b ? b.initials : cat|slice(0,2)|upper }}</span>
                    <span class="orb-name">{{ cat }}</span>
                </a>
            {% endfor %}
        </div>
        <button type="button" class="rail-arrow next" aria-label="Suivant"
                onclick="document.getElementById('catRail').scrollBy({left:280,behavior:'smooth'})">›</button>
    </div>
</section>
{% endif %}

{# ---------- SÉLECTION DU MOMENT (product cards brandées) ---------- #}
{% if carouselItems is not empty %}
<section class="container">
    <div class="section-head">
        <h2>La <span class="accent">sélection</span> du moment</h2>
        <a href="{{ path('app_catalog_index') }}" class="section-link">Tout le catalogue →</a>
    </div>
    <div class="carousel">
        {% for item in carouselItems %}
            {% set product = item.product %}
            {% set b = brandMap[product.category] ?? null %}
            <article class="product-card {{ b ? 'branded' : '' }} {{ product.type }}"
                     {% if b %}style="--brand-1: {{ b.primary }}; --brand-2: {{ b.secondary }};"{% endif %}>
                <div class="pill">{{ product.type == 'topup' ? 'Top-up' : 'Voucher' }}</div>
                <div class="product-media">
                    {% if product.imageUrl %}
                        <img src="{{ product.imageUrl }}" alt="{{ product.name }}" class="product-thumb" loading="lazy"
                             onerror="this.style.display='none';this.nextElementSibling.style.display='grid';">
                        <div class="product-emblem {{ b ? 'branded' : '' }}" style="display:none" aria-hidden="true">
                            {% if b %}<span class="emblem-shine"></span><span class="emblem-text">{{ b.initials }}</span>
                            {% else %}{{ (product.category ?: product.name)|slice(0, 2)|upper }}{% endif %}
                        </div>
                    {% else %}
                        <div class="product-emblem {{ b ? 'branded' : '' }}" aria-hidden="true">
                            {% if b %}<span class="emblem-shine"></span><span class="emblem-text">{{ b.initials }}</span>
                            {% else %}{{ (product.category ?: product.name)|slice(0, 2)|upper }}{% endif %}
                        </div>
                    {% endif %}
                </div>
                {% if product.category %}<p class="meta cat">{{ product.category }}</p>{% endif %}
                <h3>{{ product.name }}</h3>
                <div class="price-row">
                    <div><span class="price">{{ item.displayPrice|number_format(pricingContext.decimals, ',', ' ') }} {{ pricingContext.displayCurrency }}</span></div>
                    <form method="post" action="{{ path('app_cart_add', {id: product.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('cart_add_' ~ product.id) }}">
                        <button type="submit" class="btn btn-buy">Acheter</button>
                    </form>
                </div>
            </article>
        {% endfor %}
    </div>
</section>
{% endif %}

{# ---------- MARQUEE DES MARQUES (deux lignes opposées) ---------- #}
{% if platforms is not empty %}
<section class="container marquee-wrap">
    <p class="kicker" style="display: table; margin: 0 auto 14px;">Les marques qu'ils adorent</p>
    {% set brandList = platforms %}
    {% set halfA = brandList|slice(0, (brandList|length / 2)|round(0, 'ceil')) %}
    {% set halfB = brandList|slice((brandList|length / 2)|round(0, 'ceil')) %}

    <div class="marquee">
        <div class="marquee-track">
            {% for repeat in 1..3 %}
                {% for cat in halfA %}
                    {% set b = brandMap[cat] ?? {'primary': '#f4c77b', 'secondary': '#e0a93f', 'initials': cat|slice(0,2)|upper} %}
                    <span class="brand-chip" style="--tile: {{ b.primary }};">
                        <span class="brand-ico" style="background: linear-gradient(160deg, {{ b.primary }}, {{ b.secondary }});">{{ b.initials }}</span>
                        <span>{{ cat }}</span>
                    </span>
                {% endfor %}
            {% endfor %}
        </div>
    </div>
    {% if halfB|length > 0 %}
    <div class="marquee rev">
        <div class="marquee-track">
            {% for repeat in 1..3 %}
                {% for cat in halfB %}
                    {% set b = brandMap[cat] ?? {'primary': '#f4c77b', 'secondary': '#e0a93f', 'initials': cat|slice(0,2)|upper} %}
                    <span class="brand-chip" style="--tile: {{ b.primary }};">
                        <span class="brand-ico" style="background: linear-gradient(160deg, {{ b.primary }}, {{ b.secondary }});">{{ b.initials }}</span>
                        <span>{{ cat }}</span>
                    </span>
                {% endfor %}
            {% endfor %}
        </div>
    </div>
    {% endif %}
</section>
{% endif %}

{# ---------- COMMENT ÇA MARCHE ---------- #}
<section class="container">
    <div class="section-head"><h2>Comment <span class="accent">ça marche</span></h2></div>
    <div class="steps">
        <div class="step"><span class="step-n">01</span><h3>Choisis</h3><p>Parcours le catalogue et ajoute tes cartes-cadeaux ou recharges au panier.</p></div>
        <div class="step"><span class="step-n">02</span><h3>Paie en Mobile Money</h3><p>Wave, Orange, MTN ou Moov via CinetPay, en quelques secondes.</p></div>
        <div class="step"><span class="step-n">03</span><h3>Reçois ton code</h3><p>Ton code/PIN s'affiche aussitôt et t'est envoyé par email. Instantané.</p></div>
    </div>
</section>
{% endblock %}