@extends('layouts.app')
@php use App\Support\Taxonomy; use App\Support\Content; @endphp

@section('content')

{{-- ============================== HERO ============================== --}}
<section class="hero">
    <div class="container hero-inner">
        <div>
            <span class="eyebrow" style="color:var(--orange-300)">Le média local nouvelle génération</span>
            <h1 style="margin:14px 0 16px">Tout ce qui se passe <em>près de chez vous</em>, au même endroit.</h1>
            <p class="lead">
                {{ number_format(Taxonomy::count(), 0, ',', ' ') }} catégories, quatre univers :
                les petites annonces entre particuliers et pros, l'annuaire des commerces et artisans,
                l'agenda des sorties et le magazine de votre ville.
            </p>
            <div class="hero-badges">
                <span class="hero-badge"><x-icon name="check-circle"/> Dépôt gratuit pour les particuliers</span>
                <span class="hero-badge"><x-icon name="shield"/> Profils vérifiés</span>
                <span class="hero-badge"><x-icon name="pin"/> 100 % local</span>
            </div>
        </div>

        <div class="search-card" data-tabs>
            <div class="search-tabs">
                @foreach(Taxonomy::rubriques() as $key => $r)
                    <button type="button" data-tab="{{ $key }}" class="{{ $loop->first ? 'is-active' : '' }}">
                        <x-icon :name="$r['icon']"/> <span class="hide-sm">{{ $r['short'] }}</span>
                    </button>
                @endforeach
            </div>

            @foreach(Taxonomy::rubriques() as $key => $r)
                <div class="search-body" data-tab-panel="{{ $key }}" @if(! $loop->first) hidden @endif>
                    <form action="{{ url('/'.$key) }}" method="get" class="stack">
                        <div class="field-group">
                            <label class="label" for="q-{{ $key }}">Que cherchez-vous ?</label>
                            <div class="input-icon ac-wrap">
                                <x-icon name="search"/>
                                <input class="input" id="q-{{ $key }}" name="q" data-autocomplete autocomplete="off"
                                       placeholder="{{ [
                                            'annonces' => 'Voiture, canapé, appartement…',
                                            'annuaire' => 'Plombier, restaurant, coiffeur…',
                                            'agenda'   => 'Concert, brocante, exposition…',
                                            'magazine' => 'Recette, portrait, bon plan…',
                                       ][$key] }}">
                            </div>
                        </div>

                        <div class="search-row">
                            <div class="field-group">
                                <label class="label">Catégorie</label>
                                <select class="select" name="univers">
                                    <option value="">Toutes les catégories</option>
                                    @foreach(Taxonomy::tree($key) as $u)
                                        <option value="{{ $u['slug'] }}">{{ $u['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="field-group">
                                <label class="label">Où ?</label>
                                <div class="input-icon">
                                    <x-icon name="pin"/>
                                    <input class="input" name="ville" placeholder="Ville ou code postal">
                                </div>
                            </div>
                        </div>

                        <button class="btn btn-primary btn-lg btn-block" type="submit">
                            <x-icon name="search"/> Rechercher dans {{ mb_strtolower($r['label']) }}
                        </button>
                    </form>

                    <div class="search-links">
                        @foreach(Taxonomy::featured($key, 6) as $u)
                            <a href="{{ $u['url'] }}">{{ $u['name'] }}</a>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ========================= UNIVERS ANNONCES ======================== --}}
<section class="section">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow"><x-icon name="tag" size="14"/> Petites annonces</span>
                <h2 style="margin-top:8px">Explorez par catégorie</h2>
                <p>Des véhicules à l'immobilier, de la mode aux loisirs : {{ count(Taxonomy::tree('annonces')) }} univers d'annonces entre particuliers et professionnels.</p>
            </div>
            <a href="{{ url('/annonces') }}" class="btn btn-outline">Toutes les annonces <x-icon name="arrow-right"/></a>
        </div>

        <div class="grid grid-6">
            @foreach(Taxonomy::tree('annonces') as $u)
                <a href="{{ $u['url'] }}" class="tile">
                    <span class="tile-icon"><x-icon :name="$u['icon']"/></span>
                    <span style="min-width:0">
                        <span class="tile-name">{{ $u['name'] }}</span>
                        <span class="tile-count">{{ number_format(Content::countFor($u), 0, ',', ' ') }} annonces</span>
                    </span>
                </a>
            @endforeach
        </div>
    </div>
</section>

{{-- ============================== USP ============================== --}}
<section class="section-tight section-alt">
    <div class="container">
        <div class="grid grid-4">
            @foreach([
                ['bolt', 'Publication en 2 minutes', 'Quatre étapes guidées, photos glissées-déposées, mise en ligne immédiate.'],
                ['shield', 'Transactions sécurisées', 'Profils vérifiés, messagerie interne et conseils anti-arnaque à chaque étape.'],
                ['pin', 'Ultra local', 'Recherche par ville, code postal ou rayon : les bonnes affaires à côté de chez vous.'],
                ['store', 'Visibilité pro', 'Fiche établissement, horaires, avis clients et mise en avant sur votre commune.'],
            ] as [$icon, $t, $d])
                <div class="usp">
                    <span class="usp-icon"><x-icon :name="$icon"/></span>
                    <div><h3>{{ $t }}</h3><p>{{ $d }}</p></div>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ============================ ANNONCES ============================ --}}
<section class="section">
    <div class="container" data-tabs>
        <div class="section-head">
            <div>
                <span class="eyebrow"><x-icon name="star" size="14"/> Sélection du moment</span>
                <h2 style="margin-top:8px">Les annonces à ne pas manquer</h2>
            </div>
            <div class="row-center" style="gap:6px;flex-wrap:wrap">
                @foreach(['une' => 'À la une', 'recentes' => 'Nouveautés', 'immo' => 'Immobilier', 'autos' => 'Véhicules'] as $k => $label)
                    <button type="button" class="chip {{ $loop->first ? 'is-active' : '' }}" data-tab="{{ $k }}">{{ $label }}</button>
                @endforeach
            </div>
        </div>

        @foreach(['une' => $aLaUne, 'recentes' => $recentes, 'immo' => $immo, 'autos' => $autos] as $k => $list)
            <div data-tab-panel="{{ $k }}" @if(! $loop->first) hidden @endif>
                <div class="grid grid-4">
                    @foreach($list as $ad)
                        <x-ad-card :ad="$ad"/>
                    @endforeach
                </div>
            </div>
        @endforeach

        <div class="center" style="margin-top:26px">
            <a href="{{ url('/annonces') }}" class="btn btn-outline btn-lg">Voir les {{ number_format(Content::stats()['annonces'], 0, ',', ' ') }} annonces <x-icon name="arrow-right"/></a>
        </div>
    </div>
</section>

{{-- ============================== CTA =============================== --}}
<section class="section-tight">
    <div class="container">
        <div class="cta">
            <div>
                <span class="eyebrow" style="color:var(--orange-300)">Vendez plus vite</span>
                <h2 style="margin-top:8px">Votre annonce en ligne en moins de 2 minutes</h2>
                <p>Photos, description, prix : notre assistant vous guide pas à pas. Gratuit pour les particuliers, sauf l'immobilier à {{ \App\Support\Dates::euros(config('billing.particulier.amount'), true) }} l'annonce.</p>
            </div>
            <div class="row-center" style="gap:12px;flex-wrap:wrap">
                <a href="{{ url('/deposer') }}" class="btn btn-primary btn-lg"><x-icon name="plus"/> Déposer une annonce</a>
                <a href="{{ url('/tarifs') }}" class="btn btn-white btn-lg">Voir les offres pros</a>
            </div>
        </div>
    </div>
</section>

{{-- ============================= ANNUAIRE =========================== --}}
<section class="section section-alt">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow"><x-icon name="store" size="14"/> Annuaire</span>
                <h2 style="margin-top:8px">Les professionnels les mieux notés</h2>
                <p>Commerces, artisans d'art, agences, associations : {{ number_format(Content::stats()['pros'], 0, ',', ' ') }} établissements référencés et notés par les habitants.</p>
            </div>
            <a href="{{ url('/annuaire') }}" class="btn btn-outline">Tout l'annuaire <x-icon name="arrow-right"/></a>
        </div>

        <div class="grid grid-3">
            @foreach($pros as $pro)
                <x-pro-card :pro="$pro"/>
            @endforeach
        </div>

        <div class="grid grid-6" style="margin-top:22px">
            @foreach(Taxonomy::featured('annuaire', 6) as $u)
                <a href="{{ $u['url'] }}" class="tile">
                    <span class="tile-icon"><x-icon :name="$u['icon']"/></span>
                    <span class="tile-name">{{ $u['name'] }}</span>
                </a>
            @endforeach
        </div>
    </div>
</section>

{{-- ============================== AGENDA ============================ --}}
<section class="section">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow"><x-icon name="calendar" size="14"/> Agenda</span>
                <h2 style="margin-top:8px">À faire dans les prochains jours</h2>
                <p>Concerts, brocantes, expositions, salons : l'agenda complet des sorties de votre secteur.</p>
            </div>
            <a href="{{ url('/agenda') }}" class="btn btn-outline">Tout l'agenda <x-icon name="arrow-right"/></a>
        </div>

        <div class="grid grid-3">
            @foreach($evenements as $event)
                <x-event-card :event="$event"/>
            @endforeach
        </div>
    </div>
</section>

{{-- ========================= EMPLOI + STATS ========================= --}}
<section class="section section-alt">
    <div class="container">
        <div class="split-right">
            <div>
                <div class="section-head">
                    <div>
                        <span class="eyebrow"><x-icon name="briefcase" size="14"/> Emploi</span>
                        <h2 style="margin-top:8px">Offres d'emploi près de chez vous</h2>
                    </div>
                    <a href="{{ url('/annonces/emploi') }}" class="btn btn-outline btn-sm">Toutes les offres</a>
                </div>

                <div class="panel" style="padding:8px 20px">
                    @foreach($emplois as $job)
                        <a href="{{ url('/annonce/'.$job['ref'].'-'.$job['slug']) }}" class="row-between" style="padding:14px 0;border-bottom:1px solid var(--line-soft)">
                            <span class="row-center" style="gap:14px;min-width:0">
                                <span class="tile-icon"><x-icon name="briefcase"/></span>
                                <span style="min-width:0">
                                    <span class="fiche-title clamp-2" style="min-height:0;display:block">{{ $job['title'] }}</span>
                                    <span class="small muted">{{ $job['seller'] }} · {{ $job['localisation'] }}</span>
                                </span>
                            </span>
                            <span class="row-center hide-sm" style="gap:12px">
                                <span class="badge badge-soft">{{ $job['specs']['Contrat'] ?? 'CDI' }}</span>
                                <span class="small muted">{{ $job['published'] }}</span>
                            </span>
                        </a>
                    @endforeach
                </div>
            </div>

            <div class="stack">
                <div class="panel">
                    <h3>CityMag en chiffres</h3>
                    <div class="stack" style="margin-top:14px">
                        @foreach([
                            ['annonces', 'annonces en ligne', 'tag'],
                            ['pros', 'professionnels référencés', 'store'],
                            ['evenements', 'événements à venir', 'calendar'],
                            ['membres', 'membres inscrits', 'users'],
                        ] as [$key, $label, $icon])
                            <div class="row-between">
                                <span class="row-center"><span class="tile-icon" style="width:36px;height:36px"><x-icon :name="$icon"/></span> <span class="small">{{ $label }}</span></span>
                                <strong data-count-to="{{ $stats[$key] }}">0</strong>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="panel" style="background:var(--ink-900);color:#fff;border-color:transparent">
                    <h3 style="color:#fff">Vous êtes professionnel ?</h3>
                    <p class="small" style="color:rgba(255,255,255,.72);margin:8px 0 14px">
                        Créez votre fiche établissement, publiez vos offres et apparaissez en tête des recherches locales.
                    </p>
                    <a href="{{ url('/pro') }}" class="btn btn-primary btn-block">Découvrir l'offre pro</a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ============================= MAGAZINE =========================== --}}
<section class="section">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow"><x-icon name="book" size="14"/> Magazine</span>
                <h2 style="margin-top:8px">À lire cette semaine</h2>
                <p>Portraits d'artistes locaux, recettes du terroir, astuces et découvertes de nos villes.</p>
            </div>
            <a href="{{ url('/magazine') }}" class="btn btn-outline">Tous les articles <x-icon name="arrow-right"/></a>
        </div>

        <div class="grid grid-4">
            @foreach($articles as $article)
                <x-article-card :article="$article"/>
            @endforeach
        </div>
    </div>
</section>

{{-- ========================= TOUTES CATÉGORIES ====================== --}}
<section class="section section-alt">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow"><x-icon name="grid" size="14"/> Arborescence</span>
                <h2 style="margin-top:8px">Toutes les rubriques CityMag</h2>
            </div>
            <a href="{{ url('/categories') }}" class="btn btn-outline">Arborescence complète <x-icon name="arrow-right"/></a>
        </div>

        <div class="grid grid-4">
            @foreach(Taxonomy::rubriques() as $key => $r)
                <div class="card card-pad">
                    <div class="row-center" style="gap:10px;margin-bottom:12px">
                        <span class="tile-icon"><x-icon :name="$r['icon']"/></span>
                        <div>
                            <h3 style="font-size:1rem">{{ $r['label'] }}</h3>
                            <span class="tile-count">{{ Taxonomy::count($key) }} catégories</span>
                        </div>
                    </div>
                    <div class="tile-links" style="flex-direction:column;gap:4px">
                        @foreach(array_slice(Taxonomy::tree($key), 0, 8) as $u)
                            <a href="{{ $u['url'] }}">{{ $u['name'] }}</a>
                        @endforeach
                    </div>
                    <a href="{{ url('/'.$key) }}" class="btn btn-soft btn-sm btn-block" style="margin-top:14px">
                        Voir {{ mb_strtolower($r['short']) }}
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</section>

@include('partials.newsletter')

@endsection