{# ========================================
   HOME
   Page d'accueil — hero avec formulaire de recherche rapide, bateaux en vedette, blocs marketing
   ======================================== #}
{% extends 'base.twig' %}

{% block title %}Accueil - Nautiloc{% endblock %}

{% block content %}
<section class="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
    <div class="rounded-3xl border-4 border-abyss-900 bg-white p-6 shadow-[8px_8px_0_0_#041824] md:p-10">
        <p class="mb-3 inline-block rounded-full border-2 border-abyss-900 bg-sand-200 px-3 py-1 text-xs font-black uppercase tracking-wider">SAE203 • Nautiloc</p>
        <h1 class="max-w-3xl text-4xl font-black uppercase leading-tight md:text-5xl">Larguez les amarres, <span class="text-coral-500">pas votre budget.</span></h1>
        <p class="mt-4 max-w-2xl text-base font-semibold text-abyss-800 md:text-lg">Plateforme de location de bateaux avec un style chic, une prise en main simple, et des jeux de mots qui sentent bon l’air marin.</p>
        <div class="mt-8 grid gap-3 sm:grid-cols-3">
            <div class="rounded-xl border-2 border-abyss-900 bg-sand-100 p-3 text-center shadow-[3px_3px_0_0_#041824]">
                <p class="text-2xl font-black">+100</p>
                <p class="text-xs font-bold uppercase">Sorties validées</p>
            </div>
            <div class="rounded-xl border-2 border-abyss-900 bg-sand-100 p-3 text-center shadow-[3px_3px_0_0_#041824]">
                <p class="text-2xl font-black">4 ports</p>
                <p class="text-xs font-bold uppercase">Départs disponibles</p>
            </div>
            <div class="rounded-xl border-2 border-abyss-900 bg-sand-100 p-3 text-center shadow-[3px_3px_0_0_#041824]">
                <p class="text-2xl font-black">100%</p>
                <p class="text-xs font-bold uppercase">Satisfaction client</p>
            </div>
        </div>
    </div>

    <aside class="rounded-3xl border-4 border-abyss-900 bg-abyss-900 p-6 text-sand-100 shadow-[8px_8px_0_0_#ff6b57]">
        <h2 class="mb-4 text-2xl font-black uppercase">Trouvez votre bateau</h2>
        <form action="/catalogue" method="get" class="space-y-4">
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Port de départ</label>
                <select name="port" class="w-full rounded-lg border-2 border-abyss-900 bg-white px-3 py-2 text-abyss-900">
                    <option value="">Tous les ports</option>
                    {% for port in ports %}
                        <option value="{{ port.id_port }}">{{ port.nom }} — {{ port.ville }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Date</label>
                <input type="date" name="date" class="w-full rounded-lg border-2 border-abyss-900 bg-white px-3 py-2 text-abyss-900">
            </div>
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Formule</label>
                <select name="formule" class="w-full rounded-lg border-2 border-abyss-900 bg-white px-3 py-2 text-abyss-900">
                    <option value="">Toutes les formules</option>
                    {% for formule in formules %}
                        <option value="{{ formule.id_formule }}">{{ formule.libelle }} ({{ formule.duree_heures }}h)</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Nombre de personnes</label>
                <input type="number" min="1" max="12" name="capacite" class="w-full rounded-lg border-2 border-abyss-900 bg-white px-3 py-2 text-abyss-900" value="2">
            </div>
            <button type="submit" class="w-full rounded-lg border-2 border-abyss-900 bg-coral-500 px-4 py-3 text-sm font-black uppercase text-white shadow-[4px_4px_0_0_#041824] transition hover:-translate-y-0.5">Cap sur le catalogue</button>
        </form>
    </aside>
</section>

{# ======== Bateaux en vedette ======== #}
<section class="mt-12">
    <div class="mb-5 flex items-end justify-between">
        <h2 class="text-2xl font-black uppercase md:text-3xl">Bateaux en vedette</h2>
        <a href="/catalogue" class="rounded-lg border-2 border-abyss-900 bg-white px-3 py-2 text-xs font-black uppercase shadow-[3px_3px_0_0_#041824]">Voir tout</a>
    </div>
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
        {% for boat in featured_boats %}
            <article class="overflow-hidden rounded-2xl border-4 border-abyss-900 bg-white shadow-[6px_6px_0_0_#041824]">
                <img src="{{ boat.photo_url }}" alt="{{ boat.nom }}" class="h-40 w-full object-cover">
                <div class="space-y-2 p-4">
                    <h3 class="text-lg font-black">{{ boat.nom }}</h3>
                    <p class="text-xs font-semibold uppercase tracking-wider text-abyss-800">{{ boat.type_libelle }} · {{ boat.port_nom }}</p>
                    <p class="text-sm font-semibold">{{ boat.slogan }}</p>
                    <div class="flex items-center justify-between pt-1">
                        <span class="text-sm font-black">Dès {{ boat.prix_min|default(0)|number_format(0, ',', ' ') }}€</span>
                        <a href="/bateaux/{{ boat.id_bateau }}" class="rounded-md border-2 border-abyss-900 bg-sand-100 px-2 py-1 text-xs font-black uppercase shadow-[2px_2px_0_0_#041824]">Fiche</a>
                    </div>
                </div>
            </article>
        {% endfor %}
    </div>
</section>

{# ======== Blocs de réassurance ======== #}
<section class="mt-12 grid gap-5 md:grid-cols-3">
    <article class="rounded-2xl border-4 border-abyss-900 bg-white p-5 shadow-[6px_6px_0_0_#041824]">
        <h3 class="text-lg font-black uppercase">Simple</h3>
        <p class="mt-2 text-sm font-medium">Parcours en 3 étapes : choix, réservation, paiement fictif. Pas de blabla, juste le cap.</p>
    </article>
    <article class="rounded-2xl border-4 border-abyss-900 bg-white p-5 shadow-[6px_6px_0_0_#041824]">
        <h3 class="text-lg font-black uppercase">Crédible</h3>
        <p class="mt-2 text-sm font-medium">Notre service est fiable et sécurisé, avec un accompagnement personnalisé pour chaque réservation.</p>
    </article>
    <article class="rounded-2xl border-4 border-abyss-900 bg-white p-5 shadow-[6px_6px_0_0_#041824]">
        <h3 class="text-lg font-black uppercase">Satisfait</h3>
        <p class="mt-2 text-sm font-medium">Nous nous engageons à vous satisfaire, avec un service client réactif et une approche personnalisée pour chaque réservation.</p>
    </article>
</section>
{% endblock %}