@extends('layouts.public')

@section('titre', 'InnerHayti — Le hub numérique d\'Haïti')

@section('content')

{{-- Bannière publicité --}}
@if($bannieres->isNotEmpty())
<section class="adstrip">
  <div class="wrap">
    <div class="ad-label">{{__('Publicité')}}</div>
    <div class="carousel">
      <div class="track" id="adtrack">
        @foreach($bannieres as $b)
          <div class="slide">
            <a href="{{ $b->url_cible ?? '#' }}" @if($b->url_cible) target="_blank" rel="noopener" @endif>
              <img src="{{ asset('storage/'.$b->image) }}" alt="{{ $b->titre }}" style="width:100%;height:100%;object-fit:cover">
            </a>
          </div>
        @endforeach
      </div>
      <div class="dots" id="addots">
        @foreach($bannieres as $b)
          <button class="{{ $loop->first ? 'active' : '' }}" aria-label="Bannière {{ $loop->iteration }}"></button>
        @endforeach
      </div>
    </div>
  </div>
</section>
@endif

{{-- En vedette --}}
@if($vedettes->isNotEmpty())
<section class="rail-sec">
  <div class="wrap">
    <div class="rail-head">
      <h2><span class="star">★</span> {{__('En vedette')}}</h2>
      <div class="sub">{{__('Les annonces les plus populaires, toutes catégories')}}</div>
    </div>
    <div class="rail">
      @foreach($vedettes as $a)
        <a class="vcard" href="{{ route('annonce.show', $a) }}">
          <div class="vph">
            @if($a->images->first())
              <img src="{{ asset('storage/'.$a->images->first()->chemin) }}" alt="" style="width:100%;height:100%;object-fit:cover">
            @endif
            <span class="vbadge">{{ $a->type->getLabel() }}</span>
          </div>
          <div class="vb">
            <h3>{{ $a->titre }}</h3>
            <div class="pop">
              <span>👁 {{ $a->vues }}</span>
              <span>♥ {{ $a->likes }}</span>
            </div>
          </div>
        </a>
      @endforeach
    </div>
  </div>
</section>
@endif

{{-- Hero --}}
<section class="hero">
  <div class="wrap">
    <span class="eyebrow">{{__("Le hub numérique d'Haïti")}}</span>
    <h1>Tout Haïti, <em>au même endroit.</em></h1>
    <p class="lead">Annonces, marketplace, événements, offres d'emploi et annuaire des entreprises. Trouvez, publiez, connectez — partout dans le pays.</p>
    
    <form class="search" method="GET" action="{{ route('annonces.index') }}">
      <input type="text" name="q" placeholder="Rechercher une annonce, un service…" aria-label="Rechercher">
      <button class="btn btn-solid" type="submit">{{__('Rechercher')}}</button>
    </form>

    <div class="chips">
      <a class="chip" href="{{ route('annonces.index', ['categorie'=>'marketplace']) }}">{{__('Marketplace')}}</a>
      <a class="chip" href="{{ route('annonces.index', ['categorie'=>'evenement']) }}">{{__('Événements')}}</a>
      <a class="chip" href="{{ route('annonces.index', ['categorie'=>'emploi']) }}">{{__("Offres d'emploi")}}</a>
      <a class="chip" href="{{ route('annonces.index', ['categorie'=>'annuaire']) }}">{{__('Annuaire')}}</a>
      <a class="chip" href="{{ route('annonces.index') }}">{{__('Toutes')}}</a>
    </div>
  </div>
</section>

{{-- Annonces récentes --}}
<section class="block">
  <div class="wrap">
    <div class="block-head">
      <h2>Annonces</h2>
      <div class="sort">
        <a class="sort-btn active" href="{{ route('annonces.index', ['tri'=>'recentes']) }}">{{__('Récentes')}}</a>
        <a class="sort-btn" href="{{ route('annonces.index', ['tri'=>'populaires']) }}">{{__('Populaires')}}</a>
        <a class="sort-btn" href="{{ route('annonces.index', ['tri'=>'vues']) }}">{{__('Plus vues')}}</a>
      </div>
    </div>

    @if($annonces->isEmpty())
      <p style="color:#6E6E6E">{{__('Aucune annonce publiée pour le moment.')}}</p>
    @else
    <div class="grid">
      @foreach($annonces as $a)
       @include('public.partials.carte-annonce', ['a' => $a])
      @endforeach
    </div>
    @endif
  </div>
</section>

@endsection