{#
 # PAGE: SCORMIA — ÉTAPE 1 : CHOIX DE LA MÉTHODE DE CRÉATION
 # Les 3 cartes sont des LIENS vers la page de paramètres dédiée (app_scormia_configure).
 #}
{% extends 'base.html.twig' %}

{% block title %}Nouveau module — Scormia{% endblock %}

{% block body %}
{% set scColor = tool_color_details['scormia'] %}
{% set canCreate = canCreate ?? true %}

<div class="min-h-screen max-w-6xl mx-auto px-4 sm:px-6 py-4 lg:py-8">

    {# En-tête (même FORME que Moodia) : icône produit + titre + sous-titre centrés. #}
    <header class="text-center mb-12">
        <div class="inline-flex items-center justify-center w-20 h-20 mb-6 rounded-3xl border border-gray-100 shadow-lg"
             style="background: {{ scColor.bg }}; color: {{ scColor.primary }};">
            {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-scormia', size: '3xl', colorPrimary: 'current', colorSecondary: 'current' } only %}
        </div>
        <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 font-secondary mb-3">Comment voulez-vous commencer ?</h1>
        <p class="text-lg text-gray-500 max-w-xl mx-auto">Trois façons de créer votre module. Vous pourrez tout modifier ensuite dans l'éditeur.</p>
    </header>

    {# 3 méthodes — design Moodia (organisme choice-card), aux couleurs Scormia #}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

        {# Importer un document — carte 'primary' recolorée à l'indigo Scormia (icône, titre, flèche ET coches via --color-success) #}
        <div class="contents" style="--color-primary: {{ scColor.primary }}; --color-success: {{ scColor.primary }};">
            {% include '_organisms/choice-card/choice-card.html.twig' with {
                title: 'Importer un document',
                description: 'Importez votre PDF et Scormia analysera le contenu pour créer automatiquement la structure, les parties et les blocs.',
                icon: 'document',
                color: 'primary',
                features: [
                    { text: 'Structure automatique du module' },
                    { text: 'Extraction des images et illustrations' },
                    { text: 'Génération de quiz' }
                ],
                href: canCreate ? path('app_scormia_configure', { method: 'pdf' }) : null,
                disabled: not canCreate,
                badge: canCreate ? null : 'Passer en Pro',
                badgeIcon: canCreate ? null : 'crown',
                badgeVariant: 'pro',
                badgeHref: canCreate ? null : path('app_upgrade')
            } only %}
        </div>

        {# Générer avec l'IA — violet #}
        {% include '_organisms/choice-card/choice-card.html.twig' with {
            title: 'Générer avec l\'IA',
            description: 'Décrivez votre sujet en quelques mots et Scormia crée l\'intégralité du module pour vous.',
            icon: 'magic-stick',
            color: 'violet',
            features: [
                { text: 'Contenu généré de zéro' },
                { text: 'Approche pédagogique personnalisée' },
                { text: 'Idéal pour nouveaux sujets' }
            ],
            href: canCreate ? path('app_scormia_configure', { method: 'text' }) : null,
            disabled: not canCreate,
            badge: canCreate ? null : 'Passer en Pro',
            badgeIcon: canCreate ? null : 'crown',
            badgeVariant: 'pro',
            badgeHref: canCreate ? null : path('app_upgrade')
        } only %}

        {# Rédiger manuellement — vert #}
        {% include '_organisms/choice-card/choice-card.html.twig' with {
            title: 'Rédiger manuellement',
            description: 'Construisez votre module vous-même, bloc par bloc, sans assistance IA.',
            icon: 'edit',
            color: 'success',
            features: [
                { text: 'Contrôle total du contenu' },
                { text: 'Structure personnalisée' },
                { text: 'Sans consommation de tokens' }
            ],
            href: path('app_scormia_configure', { method: 'manual' })
        } only %}
    </div>

    {# Bouton retour en bas (même FORME que Moodia). #}
    <div class="flex justify-center mt-12">
        {% include '_atoms/button/button.html.twig' with {
            variant: 'back',
            label: 'Retour à mes modules',
            href: path('app_scormia'),
            size: 'md'
        } only %}
    </div>
</div>
{% endblock %}