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

{% block title %}Inscription - Xtra{% endblock %}

{% block body %}
<!-- Header simple -->
<nav class="border-b border-slate-200 bg-white">
    <div class="container-custom">
        <div class="flex justify-between items-center h-20">
            <div class="flex items-center">
                <a href="/" class="text-3xl font-bold tracking-tighter text-slate-900">Xtra</a>
            </div>
            <div class="flex items-center space-x-4">
                <div class="flex items-center gap-2">
                    <span class="text-xl">🇫🇷</span>
                </div>
                <a href="{{ path('app_login') }}" class="btn-secondary text-sm px-4 py-2">Se connecter</a>
            </div>
        </div>
    </div>
</nav>

<div class="min-h-[calc(100vh-80px)] flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-white">
    <div class="text-center mb-12">
        <h1 class="text-4xl font-bold tracking-tight text-slate-900 mb-4">
            Bonjour !
        </h1>
        <p class="text-xl text-slate-500">
            Quel type de compte souhaitez-vous créer ?
        </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl w-full">
        <!-- Carte Entreprise -->
        <a href="#" class="group relative bg-white border border-slate-200 rounded-2xl p-8 hover:border-indigo-500 hover:shadow-lg transition-all duration-300 flex flex-col items-center text-center">
            <div class="w-full aspect-[4/3] bg-slate-100 rounded-xl mb-6 overflow-hidden relative">
                <img src="{{ asset('images/entreprise.png') }}" alt="Entreprise" class="w-full h-full object-cover">
            </div>
            <h3 class="text-2xl font-bold text-slate-900 mb-2 group-hover:text-indigo-600 transition-colors">Entreprise</h3>
            <p class="text-slate-500">Je suis employeur</p>
        </a>

        <!-- Carte Saisonnier -->
        <a href="#" class="group relative bg-white border border-slate-200 rounded-2xl p-8 hover:border-emerald-500 hover:shadow-lg transition-all duration-300 flex flex-col items-center text-center">
            <div class="w-full aspect-[4/3] bg-slate-100 rounded-xl mb-6 overflow-hidden relative">
                <img src="{{ asset('images/saisonnier.png') }}" alt="Saisonnier" class="w-full h-full object-cover">
            </div>
            <h3 class="text-2xl font-bold text-slate-900 mb-2 group-hover:text-emerald-600 transition-colors">Saisonnier</h3>
            <p class="text-slate-500">Je suis ouvrier/saisonnier</p>
        </a>
    </div>

    <div class="mt-12 text-center">
        <p class="text-slate-500">
            Déjà inscrit ? <a href="{{ path('app_login') }}" class="text-teal-600 font-medium hover:underline">Se connecter</a>
        </p>
    </div>
</div>
{% endblock %}