@extends('layouts.app')

@section('content')
<div class="container">@include('partials.breadcrumb', ['current' => 'Toutes les villes'])</div>

<section class="section" style="padding-top:0">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow"><x-icon name="pin" size="14"/> Couverture</span>
                <h1 style="margin-top:10px">CityMag près de chez vous</h1>
                <p>Annonces, professionnels et sorties dans les Hauts-de-France. Sélectionnez votre commune pour un affichage local.</p>
            </div>
        </div>

        <div class="input-icon" style="max-width:360px;margin-bottom:20px">
            <x-icon name="search"/>
            <input class="input" type="search" data-filtre-villes autocomplete="off"
                   placeholder="Filtrer par commune ou code postal…">
        </div>

        <div class="grid grid-4">
            @foreach($villes as [$ville, $cp])
                @php $n = $compteurs[$ville] ?? ['annonces' => 0, 'pros' => 0, 'evenements' => 0]; @endphp
                <a href="{{ url('/annonces?ville='.urlencode($ville)) }}" class="tile"
                   data-ville-item="{{ $ville }} {{ $cp }}">
                    <span class="tile-icon"><x-icon name="pin"/></span>
                    <span style="min-width:0">
                        <span class="tile-name">{{ $ville }}</span>
                        <span class="tile-count">
                            {{ $cp }} · {{ number_format($n['annonces'], 0, ',', ' ') }} annonces
                        </span>
                        <span class="tiny muted" style="display:block">
                            {{ $n['pros'] }} pros · {{ $n['evenements'] }} sorties
                        </span>
                    </span>
                </a>
            @endforeach
        </div>

        <p class="muted small" data-villes-vide hidden style="margin-top:16px">
            Aucune commune ne correspond.
            <a href="{{ url('/contact') }}" style="color:var(--orange-700);font-weight:600">Signalez-nous la vôtre</a>.
        </p>

        <div class="notice" style="margin-top:26px">
            <x-icon name="info"/>
            <div>
                <strong class="strong">Votre commune n'apparaît pas ?</strong>
                <p style="margin:4px 0 0">CityMag se déploie progressivement. <a href="{{ url('/contact') }}" style="color:var(--orange-700);font-weight:600">Signalez-nous votre ville</a> pour la prioriser.</p>
            </div>
        </div>
    </div>
</section>
@endsection