@extends('layouts.app')

@section('titre', $magasin['nom'])

@section('contenu')
    <div class="mx-auto max-w-3xl">
        {{-- Le nom vient des réglages, avec ou sans article : on ne l'accorde
             donc dans aucune phrase, pour ne jamais écrire « Bienvenue à Ressourcerie ». --}}
        <h1 class="text-2xl font-semibold text-balance">{{ $magasin['nom'] }}</h1>
        <p class="mt-1 mb-6 text-slate-600">
            Bienvenue. Donner une seconde vie aux objets, donner de son temps : choisissez ce qui vous amène.
        </p>

        <div class="grid gap-3 sm:grid-cols-2">
            @if ($donsOuverts)
                <a href="{{ route('demande-collecte') }}"
                   class="carte flex flex-col gap-3 hover:border-marque-300 hover:bg-marque-50">
                    <x-icone nom="collecte" class="size-10 text-marque-600" />
                    <span>
                        <span class="block text-lg font-semibold">Proposer un don</span>
                        <span class="block text-sm text-slate-600">
                            Meubles, électroménager, objets : décrivez-les avec une photo, nous
                            venons les chercher gratuitement.
                        </span>
                    </span>
                    <span class="mt-auto text-sm font-medium text-marque-700">Remplir la demande &rarr;</span>
                </a>
            @else
                {{-- Le formulaire attend la publication des conditions de collecte :
                     une tuile active mènerait à une page d'attente. --}}
                <div class="carte flex flex-col gap-3 opacity-75">
                    <x-icone nom="collecte" class="size-10 text-slate-400" />
                    <span>
                        <span class="block text-lg font-semibold">Proposer un don</span>
                        <span class="block text-sm text-slate-600">
                            Le formulaire en ligne ouvre bientôt. En attendant, contactez-nous
                            directement pour proposer un don.
                        </span>
                    </span>
                    <span class="mt-auto text-sm font-medium text-slate-500">Ouverture prochaine</span>
                </div>
            @endif

            <a href="{{ route('benevoles.public') }}"
               class="carte flex flex-col gap-3 hover:border-marque-300 hover:bg-marque-50">
                <x-icone nom="equipe" class="size-10 text-marque-600" />
                <span>
                    <span class="block text-lg font-semibold">Devenir bénévole</span>
                    <span class="block text-sm text-slate-600">
                        Quelques heures par semaine suffisent. Dites-nous quand vous êtes libre,
                        nous vous appelons.
                    </span>
                </span>
                <span class="mt-auto text-sm font-medium text-marque-700">Proposer mon aide &rarr;</span>
            </a>
        </div>

        @if ($magasin['adresse'] || $magasin['telephone'])
            <div class="carte mt-3 text-sm text-slate-700">
                <p class="font-medium">Nous trouver</p>
                @if ($magasin['adresse'])
                    <p class="whitespace-pre-line">{{ $magasin['adresse'] }}</p>
                @endif
                @if ($magasin['telephone'])
                    <p><a href="tel:{{ $magasin['telephone'] }}" class="text-marque-700 hover:underline">{{ $magasin['telephone'] }}</a></p>
                @endif
            </div>
        @endif

        {{-- L'accès des salariés reste discret : le public est ici chez lui. --}}
        <div class="mt-8 flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 pt-4 text-sm">
            <span class="text-slate-500">Vous travaillez à la Ressourcerie ?</span>
            <a href="{{ route('connexion') }}" class="bouton-secondaire">Espace salariés</a>
        </div>
    </div>
@endsection