{% extends 'base.html.twig' %}
{% block title %}Choisissez votre offre — Bubul{% endblock %}
{% block show_sidebar %}false{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}
{% block body %}
{% embed '_organisms/step-layout/step-layout.html.twig' %}
{% block heading %}
<div class="w-full max-w-md text-center mb-3 sm:mb-8">
    <h1 class="text-xl sm:text-3xl font-bold text-gray-700 mb-2 leading-tight">Quelle formule vous correspond ?</h1>
    <p class="text-sm text-gray-500">Commencez gratuitement, évoluez quand vous voulez.</p>
</div>
{% endblock %}
{% block card %}
    <div class="flex flex-col gap-3 mb-3 sm:mb-6">
        <div class="p-4 border-2 border-primary rounded-xl bg-blue-50">
            <div class="flex justify-between items-start">
                <div>
                    <div class="font-semibold text-primary">Freemium</div>
                    <div class="text-xs text-gray-500 mt-0.5">Accès de base — sélectionné par défaut</div>
                </div>
                <span class="text-sm font-bold text-primary">Gratuit</span>
            </div>
        </div>
        <div class="p-4 border border-gray-200 rounded-xl hover:border-primary transition cursor-pointer">
            <div class="flex justify-between items-start">
                <div>
                    <div class="font-semibold text-gray-900">Pro</div>
                    <div class="text-xs text-gray-500 mt-0.5">Tous les outils, tokens illimités</div>
                </div>
                <span class="text-sm font-bold text-gray-900">29 €/mois</span>
            </div>
        </div>
    </div>
    <form method="POST" action="{{ path('app_welcome') }}">
        <input type="hidden" name="step" value="plans">
        <input type="hidden" name="_token" value="{{ csrf_token('welcome') }}">
        {% include '_atoms/button/button.html.twig' with {label: 'Continuer avec Freemium', type: 'submit', variant: 'primary', width: 'full'} only %}
    </form>
{% endblock %}
{% endembed %}
{% endblock %}