{% extends 'base.html.twig' %}

{% block title %}YimaShop — la caisse qui fait grandir votre commerce{% endblock %}

{# La landing est un site grand public : pas de modals d'application (mise à jour / hors-ligne). #}
{% block app_version_modal %}{% endblock %}
{% block pwa_modals %}{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('landing') }}
{% endblock %}

{% macro fcfa(amount) %}{{ amount|number_format(0, ',', ' ') }} FCFA{% endmacro %}
{% macro li(text) %}<li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-none text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg><span>{{ text|raw }}</span></li>{% endmacro %}

{% block body %}
{% import _self as h %}

{# Pré-masquage anti-FOUC + filet de sécurité si le JS ne démarre pas. #}
<script>
    document.documentElement.classList.add('has-anim');
    window.addEventListener('load', function () {
        setTimeout(function () {
            if (!window.__landingReady) { document.documentElement.classList.remove('has-anim'); }
        }, 2500);
    });
</script>

<style>
    #scroll-progress {
        position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
        background: linear-gradient(90deg, #0d9488, #14b8a6, #f4a72c);
        transform: scaleX(0); transform-origin: left center;
    }
    #site-nav { transition: padding .25s ease, background-color .25s ease, box-shadow .25s ease; }
    #site-nav.is-scrolled { box-shadow: 0 6px 24px rgba(13,148,136,.10); }
    .has-anim .reveal,
    .has-anim .reveal-stagger > *,
    .has-anim #hero [data-anim],
    .has-anim #hero [data-hero-visual] { opacity: 0; }

    .blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
    .float-slow { animation: lp-float 9s ease-in-out infinite; }
    .float-slower { animation: lp-float 13s ease-in-out infinite; }
    @keyframes lp-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }

    #scroll-hint .wheel { animation: lp-bob 1.8s ease-in-out infinite; }
    @keyframes lp-bob { 0%,100% { transform: translateY(0); opacity:.9 } 50% { transform: translateY(6px); opacity:.4 } }

    .app-card { box-shadow: 0 30px 60px -20px rgba(15,118,110,.45); }

    @media (prefers-reduced-motion: reduce) {
        .has-anim .reveal,
        .has-anim .reveal-stagger > *,
        .has-anim #hero [data-anim],
        .has-anim #hero [data-hero-visual] { opacity: 1 !important; }
        .float-slow, .float-slower, #scroll-hint .wheel { animation: none !important; }
    }
</style>

<div class="bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100">
    <div id="scroll-progress"></div>

    {# ---- Barre de navigation ---- #}
    <header id="site-nav" class="sticky top-0 z-40 border-b border-gray-100 bg-white/85 py-3.5 backdrop-blur-md dark:border-gray-800 dark:bg-gray-950/85">
        <nav class="mx-auto flex max-w-6xl items-center justify-between px-5">
            <a href="#" class="flex items-center" aria-label="YimaShop">
                <img src="{{ asset('logo-removed.png') }}" alt="YimaShop" class="h-10 w-auto dark:brightness-0 dark:invert">
            </a>
            <div class="flex items-center gap-2 sm:gap-3">
                <a href="#services" class="hidden rounded-lg px-3 py-2 text-sm font-medium text-gray-600 hover:text-teal-700 md:inline dark:text-gray-300">Services</a>
                <a href="#etapes" class="hidden rounded-lg px-3 py-2 text-sm font-medium text-gray-600 hover:text-teal-700 md:inline dark:text-gray-300">Comment ça marche</a>
                <a href="#offres" class="hidden rounded-lg px-3 py-2 text-sm font-medium text-gray-600 hover:text-teal-700 sm:inline dark:text-gray-300">Offres</a>
                <a href="{{ path('app_login') }}" class="rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:text-teal-700 dark:text-gray-200">Se connecter</a>
                <a href="{{ path('app_register') }}" class="rounded-lg bg-teal-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-teal-700 hover:shadow-md">Créer ma boutique</a>
            </div>
        </nav>
    </header>

    {# ---- Hero ---- #}
    <section id="hero" class="relative overflow-hidden">
        <div class="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-teal-50 via-white to-white dark:from-teal-950/30 dark:via-gray-950 dark:to-gray-950"></div>
        <span class="blob float-slow -z-10 h-72 w-72 bg-teal-300/40 dark:bg-teal-700/20" style="top:-4rem; right:-3rem;"></span>
        <span class="blob float-slower -z-10 h-64 w-64 bg-amber-300/30 dark:bg-amber-600/10" style="bottom:-4rem; left:-3rem;"></span>

        <div class="mx-auto grid max-w-6xl items-center gap-12 px-5 py-20 sm:py-24 lg:grid-cols-2">
            <div>
                <span data-anim class="inline-flex items-center gap-2 rounded-full border border-teal-200 bg-teal-50 px-3 py-1 text-xs font-medium text-teal-800 dark:border-teal-800 dark:bg-teal-950/50 dark:text-teal-300">
                    <span class="inline-block h-1.5 w-1.5 rounded-full bg-teal-500"></span>
                    Point de vente pour le commerce ouest-africain
                </span>
                <h1 data-anim class="mt-5 text-4xl font-extrabold leading-[1.05] tracking-tight sm:text-6xl" style="text-wrap: balance;">
                    La caisse qui fait <span class="text-teal-600">grandir</span> votre commerce.
                </h1>
                <p data-anim class="mt-6 max-w-xl text-lg text-gray-600 dark:text-gray-300">
                    Vendez, suivez votre stock, gérez crédits et fournisseurs, et ouvrez votre boutique en ligne —
                    en français, en FCFA, même hors connexion. Sur votre téléphone.
                </p>
                <div data-anim class="mt-9 flex flex-wrap gap-3">
                    <a href="{{ path('app_register') }}" class="inline-flex items-center gap-2 rounded-lg bg-teal-600 px-6 py-3 text-base font-semibold text-white shadow-lg shadow-teal-600/25 transition hover:-translate-y-0.5 hover:bg-teal-700">
                        Créer ma boutique gratuitement
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                    </a>
                    {% if pwaUrl %}
                        <a href="{{ pwaUrl }}" class="inline-flex items-center rounded-lg border border-gray-300 px-6 py-3 text-base font-semibold text-gray-800 transition hover:border-teal-500 hover:text-teal-700 dark:border-gray-700 dark:text-gray-100">
                            Ouvrir l'application
                        </a>
                    {% endif %}
                </div>
                <p data-anim class="mt-4 text-sm text-gray-500 dark:text-gray-400">Essai offert · validation sous 24 h · sans engagement.</p>
            </div>

            {# Mockup d'application flottant #}
            <div data-hero-visual class="relative mx-auto w-full max-w-sm">
                <div class="app-card float-slow overflow-hidden rounded-3xl border border-gray-100 bg-white dark:border-gray-800 dark:bg-gray-900">
                    <div class="flex items-center justify-between bg-teal-600 px-5 py-4 text-white">
                        <div class="flex items-center gap-2 font-semibold"><span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-white/20 text-sm">Y</span> Vente</div>
                        <span class="rounded-full bg-white/20 px-2.5 py-0.5 text-xs font-medium">Caisse ouverte</span>
                    </div>
                    <div class="space-y-3 px-5 py-5 text-sm">
                        <div class="flex items-center justify-between"><span class="text-gray-600 dark:text-gray-300">Riz parfumé 5 kg</span><span class="font-semibold">4 500</span></div>
                        <div class="flex items-center justify-between"><span class="text-gray-600 dark:text-gray-300">Huile 1 L × 2</span><span class="font-semibold">2 400</span></div>
                        <div class="flex items-center justify-between"><span class="text-gray-600 dark:text-gray-300">Savon × 3</span><span class="font-semibold">900</span></div>
                        <div class="my-2 border-t border-dashed border-gray-200 dark:border-gray-700"></div>
                        <div class="flex items-center justify-between text-base"><span class="font-semibold">Total</span><span class="font-extrabold text-teal-700 dark:text-teal-400">7 800 FCFA</span></div>
                    </div>
                    <div class="flex items-center gap-2 px-5 pb-5">
                        <span class="inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-800"><svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Payé</span>
                        <span class="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-300">Ticket envoyé</span>
                    </div>
                </div>
                {# Petite carte « solde » flottante #}
                <div class="float-slower absolute -bottom-6 -left-6 hidden rounded-2xl border border-gray-100 bg-white px-4 py-3 shadow-xl sm:block dark:border-gray-800 dark:bg-gray-900">
                    <p class="text-[11px] uppercase tracking-wide text-gray-400">Créances du jour</p>
                    <p class="text-lg font-extrabold text-gray-900 dark:text-white">125 000 <span class="text-xs font-medium text-gray-400">FCFA</span></p>
                </div>
            </div>
        </div>

        {# Indice de défilement #}
        <div id="scroll-hint" class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center">
            <span class="flex h-9 w-6 items-start justify-center rounded-full border-2 border-teal-400/60 p-1">
                <span class="wheel h-2 w-1 rounded-full bg-teal-500"></span>
            </span>
        </div>
    </section>

    {# ---- Bandeau confiance ---- #}
    <section class="border-y border-gray-100 bg-gray-50/60 py-6 dark:border-gray-800 dark:bg-gray-900/40">
        <div class="reveal-stagger mx-auto grid max-w-5xl grid-cols-2 gap-4 px-5 text-center sm:grid-cols-4">
            {% set stats = [
                {v: '100%', l: 'En français, en FCFA'},
                {v: 'Hors-ligne', l: 'Vos ventes se synchronisent'},
                {v: '24 h', l: 'Validation de votre boutique'},
                {v: '3 offres', l: 'De la caisse au tout illimité'}
            ] %}
            {% for s in stats %}
                <div>
                    <p class="text-xl font-extrabold text-teal-700 dark:text-teal-400">{{ s.v }}</p>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ s.l }}</p>
                </div>
            {% endfor %}
        </div>
    </section>

    {# ---- Services ---- #}
    <section id="services" class="mx-auto max-w-6xl px-5 py-20">
        <h2 class="reveal text-center text-3xl font-bold tracking-tight">Tout votre commerce, au même endroit</h2>
        <p class="reveal mx-auto mt-3 max-w-2xl text-center text-gray-600 dark:text-gray-300">Une seule application pour la caisse, le stock, les crédits, la transformation et la vente en ligne.</p>
        <div class="reveal-stagger mt-12 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {% set services = [
                {t: 'Vente &amp; caisse', d: 'Encaissement rapide, scan code-barres, remises, tickets et clôture Z. Fonctionne hors-ligne.', p: 'M3 3h2l.4 2M7 13h10l3-8H6.4M7 13L5.4 5M7 13l-2.3 2.3a1 1 0 0 0 .7 1.7H17M9 20a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm8 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z'},
                {t: 'Stock &amp; inventaire', d: 'Stock temps réel, inventaires, alertes de rupture et réapprovisionnement.', p: 'M20 7 12 3 4 7l8 4 8-4ZM4 7v10l8 4 8-4V7M12 11v10'},
                {t: 'Crédits &amp; fournisseurs', d: 'Ventes à crédit, recouvrement, dettes fournisseurs et trésorerie.', p: 'M3 10h18M7 15h4M5 6h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Z'},
                {t: 'Atelier &amp; production', d: 'Recettes, transformation et calcul du coût de revient pour les producteurs.', p: 'M14 6a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m4 0 5.5 3.2M10 6 4.5 9.2M6 20l6-11 6 11H6Z'},
                {t: 'Boutique en ligne', d: 'Synchronisez vos produits vers un site WooCommerce et vendez en ligne.', p: 'M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0Zm0 0h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'},
                {t: 'Pilotage &amp; équipe', d: 'Rôles caissier/magasinier/manager, rapports et supervision de vos boutiques.', p: 'M16 20v-2a4 4 0 0 0-8 0v2M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'}
            ] %}
            {% for s in services %}
                <div class="group rounded-2xl border border-gray-100 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:border-teal-200 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900">
                    <div class="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-teal-50 text-teal-600 transition group-hover:bg-teal-600 group-hover:text-white dark:bg-teal-950/50">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7"><path stroke-linecap="round" stroke-linejoin="round" d="{{ s.p }}"/></svg>
                    </div>
                    <h3 class="text-lg font-semibold">{{ s.t|raw }}</h3>
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">{{ s.d|raw }}</p>
                </div>
            {% endfor %}
        </div>
    </section>

    {# ---- Comment ça marche ---- #}
    <section id="etapes" class="bg-gray-50 py-20 dark:bg-gray-900/50">
        <div class="mx-auto max-w-5xl px-5">
            <h2 class="reveal text-center text-3xl font-bold tracking-tight">Lancez-vous en 3 étapes</h2>
            <p class="reveal mx-auto mt-3 max-w-2xl text-center text-gray-600 dark:text-gray-300">De l'inscription à la première vente, on vous guide.</p>
            <div class="reveal-stagger mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
                {% set steps = [
                    {n: '01', t: 'Créez votre compte', d: 'Inscrivez votre boutique en 2 minutes : gérant, nom, offre. Un code de parrain ? Des mois offerts.'},
                    {n: '02', t: 'Validation express', d: 'Notre équipe vérifie et active votre accès sous 24 h. Vous recevez un email de confirmation.'},
                    {n: '03', t: 'Vendez &amp; pilotez', d: 'Ouvrez la caisse, ajoutez vos produits, suivez stock et crédits — et vendez aussi en ligne.'}
                ] %}
                {% for st in steps %}
                    <div class="relative rounded-2xl border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
                        <span class="text-4xl font-extrabold text-teal-100 dark:text-teal-900">{{ st.n }}</span>
                        <h3 class="mt-2 text-lg font-semibold">{{ st.t|raw }}</h3>
                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">{{ st.d|raw }}</p>
                    </div>
                {% endfor %}
            </div>
            <div class="reveal mt-10 text-center">
                <a href="{{ path('app_register') }}" class="inline-flex items-center gap-2 rounded-lg bg-teal-600 px-6 py-3 text-base font-semibold text-white shadow-lg shadow-teal-600/25 transition hover:-translate-y-0.5 hover:bg-teal-700">
                    Commencer maintenant
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                </a>
            </div>
        </div>
    </section>

    {# ---- Offres ---- #}
    <section id="offres" class="py-20">
        <div class="mx-auto max-w-6xl px-5">
            <h2 class="reveal text-center text-3xl font-bold tracking-tight">Trois offres, une seule application</h2>
            <p class="reveal mx-auto mt-3 max-w-2xl text-center text-gray-600 dark:text-gray-300">Commencez avec la caisse, ajoutez votre site, ou passez en illimité.</p>

            <div class="reveal-stagger mt-12 grid grid-cols-1 items-stretch gap-6 md:grid-cols-2 lg:grid-cols-3">
                {# App seule #}
                <div class="flex flex-col rounded-2xl border border-gray-200 bg-white p-8 transition hover:-translate-y-1 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900">
                    <h3 class="text-xl font-bold">App seule</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">La caisse complète pour votre boutique physique.</p>
                    <p class="mt-6"><span class="text-4xl font-extrabold">{{ h.fcfa(posPrice) }}</span><span class="text-gray-500 dark:text-gray-400"> / mois</span></p>
                    <ul class="mt-6 space-y-3 text-sm">
                        {% for f in ['Vente, caisse &amp; tickets', 'Stock &amp; inventaire', 'Clients &amp; crédits', 'Fournisseurs &amp; trésorerie'] %}{{ h.li(f) }}{% endfor %}
                        {{ h.li(posStorageGb ~ ' Go de stockage') }}
                        {{ h.li(posSms ~ ' SMS de rappel / mois') }}
                    </ul>
                    <a href="{{ path('app_register', {offer: 'pos'}) }}" class="mt-8 inline-flex items-center justify-center rounded-lg border border-teal-600 px-5 py-2.5 text-sm font-semibold text-teal-700 transition hover:bg-teal-50 dark:text-teal-300 dark:hover:bg-teal-950/40">Choisir cette offre</a>
                </div>

                {# App + Site (mise en avant) #}
                <div class="relative flex flex-col rounded-2xl border-2 border-teal-600 bg-white p-8 shadow-xl shadow-teal-600/10 transition hover:-translate-y-1 dark:bg-gray-900">
                    <span class="absolute -top-3 right-6 rounded-full bg-teal-600 px-3 py-1 text-xs font-semibold text-white">Recommandé</span>
                    <h3 class="text-xl font-bold">App + Site</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Vendez aussi en ligne, synchronisé avec votre caisse.</p>
                    <p class="mt-6"><span class="text-4xl font-extrabold">{{ h.fcfa(ecommercePrice) }}</span><span class="text-gray-500 dark:text-gray-400"> / mois</span></p>
                    <ul class="mt-6 space-y-3 text-sm">
                        {% for f in ['Tout « App seule »', 'Boutique en ligne WooCommerce', 'Synchro produits, stock &amp; images', 'Commande WhatsApp'] %}{{ h.li(f) }}{% endfor %}
                        {{ h.li(ecommerceStorageGb ~ ' Go de stockage') }}
                        {{ h.li(ecommerceSms ~ ' SMS de rappel / mois') }}
                    </ul>
                    <a href="{{ path('app_register', {offer: 'ecommerce'}) }}" class="mt-8 inline-flex items-center justify-center rounded-lg bg-teal-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-700">Choisir cette offre</a>
                </div>

                {# Premium (illimité) #}
                <div class="flex flex-col rounded-2xl border border-indigo-200 bg-white p-8 transition hover:-translate-y-1 hover:shadow-lg dark:border-indigo-900 dark:bg-gray-900">
                    <h3 class="text-xl font-bold">Premium</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Sans limite, pour les commerces qui tournent fort.</p>
                    <p class="mt-6"><span class="text-4xl font-extrabold">{{ h.fcfa(premiumPrice) }}</span><span class="text-gray-500 dark:text-gray-400"> / mois</span></p>
                    <ul class="mt-6 space-y-3 text-sm">
                        {% for f in ['Tout « App seule »', 'Stockage <strong>illimité</strong>', 'SMS de rappel <strong>illimités</strong>', 'Support prioritaire'] %}{{ h.li(f) }}{% endfor %}
                    </ul>
                    <a href="{{ path('app_register', {offer: 'premium'}) }}" class="mt-8 inline-flex items-center justify-center rounded-lg border border-indigo-500 px-5 py-2.5 text-sm font-semibold text-indigo-700 transition hover:bg-indigo-50 dark:text-indigo-300 dark:hover:bg-indigo-950/40">Choisir cette offre</a>
                </div>
            </div>
            <p class="reveal mt-6 text-center text-xs text-gray-500 dark:text-gray-400">Tarifs indicatifs. L'accès est activé après validation de votre inscription par notre équipe.</p>
        </div>
    </section>

    {# ---- CTA final ---- #}
    <section class="mx-auto max-w-6xl px-5 pb-20">
        <div class="reveal relative overflow-hidden rounded-3xl bg-teal-600 px-8 py-14 text-center text-white sm:px-16">
            <span class="blob float-slow h-56 w-56 bg-teal-400/40" style="top:-3rem; right:-2rem;"></span>
            <span class="blob float-slower h-48 w-48 bg-amber-300/20" style="bottom:-3rem; left:-2rem;"></span>
            <div class="relative">
                <h2 class="text-3xl font-bold tracking-tight">Prêt à digitaliser votre commerce ?</h2>
                <p class="mx-auto mt-3 max-w-xl text-teal-50">Créez votre boutique en quelques minutes. Un parrain ? Saisissez son code à l'inscription pour des mois offerts.</p>
                <a href="{{ path('app_register') }}" class="mt-8 inline-flex items-center gap-2 rounded-lg bg-white px-6 py-3 text-base font-semibold text-teal-700 shadow transition hover:-translate-y-0.5 hover:bg-teal-50">
                    Créer ma boutique
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                </a>
            </div>
        </div>
    </section>

    {# ---- Pied ---- #}
    <footer class="border-t border-gray-100 py-8 dark:border-gray-800">
        <div class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 px-5 text-sm text-gray-500 sm:flex-row dark:text-gray-400">
            <span>© {{ 'now'|date('Y') }} YimaShop — POS pour l'Afrique de l'Ouest.</span>
            <span class="flex gap-4">
                <a href="{{ path('app_login') }}" class="hover:text-teal-700">Connexion</a>
                <a href="{{ path('app_register') }}" class="hover:text-teal-700">Inscription</a>
            </span>
        </div>
    </footer>
</div>
{% endblock %}