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

{% block title %}Cours des cryptomonnaies - ARA Solutions{% endblock %}

{% block meta_description %}Consultez les cours en temps réel du Bitcoin (BTC) et du BND, mis à jour toutes les heures.{% endblock %}

{% block body %}
{# Hero Section #}
<section class="relative pt-24 pb-12 bg-gradient-to-br from-primary-dark via-primary to-primary-light overflow-hidden">
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-10 left-20 w-64 h-64 bg-accent rounded-full blur-3xl"></div>
        <div class="absolute bottom-10 right-20 w-80 h-80 bg-accent-light rounded-full blur-3xl"></div>
    </div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <p class="text-accent-light text-sm font-medium tracking-wider uppercase mb-3">Marchés crypto</p>
        <h1 class="text-4xl sm:text-5xl font-bold text-white mb-4">Cours en direct</h1>
        <p class="text-gray-300 text-lg max-w-xl mx-auto">
            Bitcoin (BTC) et BND — données mises à jour toutes les heures.
        </p>
    </div>
</section>

{# Prices Section #}
<section class="py-16 bg-surface">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

        {% if prices.BTC.usd is not null or prices.BND.usd is not null %}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">

            {# BTC Card #}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
                <div class="flex items-center gap-4 mb-6">
                    <div class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center">
                        <svg class="w-8 h-8 text-orange-500" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M23.638 14.904c-1.602 6.43-8.113 10.34-14.542 8.736C2.67 22.05-1.244 15.525.362 9.105 1.962 2.67 8.475-1.243 14.9.358c6.43 1.605 10.342 8.115 8.738 14.548v-.002zm-6.35-4.613c.24-1.59-.974-2.45-2.64-3.03l.54-2.153-1.315-.328-.525 2.107c-.345-.087-.705-.167-1.064-.25l.526-2.127-1.32-.33-.54 2.165c-.285-.067-.565-.132-.84-.2l-1.815-.45-.35 1.407s.975.225.955.236c.535.136.63.486.615.766l-1.477 5.92c-.075.166-.24.406-.614.314.015.02-.96-.24-.96-.24l-.66 1.51 1.71.426.93.242-.54 2.19 1.32.327.54-2.17c.36.1.705.19 1.05.273l-.51 2.154 1.32.33.545-2.19c2.24.427 3.93.257 4.64-1.774.57-1.637-.03-2.58-1.217-3.196.854-.193 1.5-.76 1.68-1.93h.01zm-3.01 4.22c-.404 1.64-3.157.75-4.05.53l.72-2.9c.896.23 3.757.67 3.33 2.37zm.41-4.24c-.37 1.49-2.662.735-3.405.55l.654-2.64c.744.18 3.137.524 2.75 2.084v.006z"/>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-gray-900">Bitcoin</h2>
                        <span class="text-sm text-gray-500 font-medium">BTC</span>
                    </div>
                </div>

                {% if prices.BTC.usd is not null %}
                <div class="space-y-3">
                    <div class="flex justify-between items-center py-3 border-b border-gray-50">
                        <span class="text-gray-500 text-sm">Prix en USD</span>
                        <span class="text-2xl font-bold text-gray-900">
                            ${{ prices.BTC.usd|number_format(2, '.', ',') }}
                        </span>
                    </div>
                    {% if prices.BTC.eur is not null %}
                    <div class="flex justify-between items-center py-3">
                        <span class="text-gray-500 text-sm">Prix en EUR</span>
                        <span class="text-2xl font-bold text-gray-900">
                            {{ prices.BTC.eur|number_format(2, '.', ',') }} €
                        </span>
                    </div>
                    {% endif %}
                </div>
                {% else %}
                <p class="text-gray-400 text-sm italic">Données indisponibles.</p>
                {% endif %}
            </div>

            {# BND Card #}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
                <div class="flex items-center gap-4 mb-6">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center">
                        <span class="text-primary font-bold text-xl">BND</span>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-gray-900">BND Token</h2>
                        <span class="text-sm text-gray-500 font-medium">BND</span>
                    </div>
                </div>

                {% if prices.BND.usd is not null %}
                <div class="space-y-3">
                    <div class="flex justify-between items-center py-3 border-b border-gray-50">
                        <span class="text-gray-500 text-sm">Prix en USD</span>
                        <span class="text-2xl font-bold text-gray-900">
                            ${{ prices.BND.usd|number_format(6, '.', ',') }}
                        </span>
                    </div>
                    {% if prices.BND.eur is not null %}
                    <div class="flex justify-between items-center py-3">
                        <span class="text-gray-500 text-sm">Prix en EUR</span>
                        <span class="text-2xl font-bold text-gray-900">
                            {{ prices.BND.eur|number_format(6, '.', ',') }} €
                        </span>
                    </div>
                    {% endif %}
                </div>
                {% else %}
                <p class="text-gray-400 text-sm italic">Données indisponibles pour le moment.</p>
                {% endif %}
            </div>

        </div>

        <p class="text-center text-sm text-gray-400">
            Dernière mise à jour : <span class="font-medium text-gray-500">{{ prices.cached_at }}</span>
            — Actualisé toutes les heures via CoinGecko.
        </p>

        {% else %}
        <div class="text-center py-16">
            <p class="text-gray-400 text-lg">Impossible de récupérer les cours pour le moment. Veuillez réessayer dans quelques instants.</p>
        </div>
        {% endif %}

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