aperonight/app/views/pages/home.html.erb

<% content_for :title, "Aperonight - Découvrez des événements après-travail de luxe" %>

<!-- Hero Section -->
<section class="hero">
  <div class="container">
    <div class="hero-content">
      <h1>Découvrez les afterworks à Paris</h1>
      <p class="subtitle">Connectez-vous avec des professionnels, explorez des lieux uniques et créez des expériences mémorables lors d'événements après-travail soigneusement sélectionnés dans votre ville.</p>

      <div class="cta-group">
        <%= link_to "Explorer les événements", events_path, class: "btn btn-lg btn-primary" %>
        <%= link_to "Organiser un événement", "#", class: "btn btn-lg btn-secondary" %>
      </div>
    </div>
  </div>
</section>

<%= render "components/event_finder" %>

<!-- Featured Events Section -->
<section class="section featured-events" id="events">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">En vedette cette semaine</h2>
      <p class="section-description">Événements de luxe sélectionnés avec soin qui réunissent les meilleurs professionnels et créateurs de la ville.</p>
    </div>

    <div class="featured-events-grid" data-controller="featured-event">
      <% @featured_events.each do |event| %>
        <div class="featured-event-card" data-featured-event-target="card">
          <%= link_to event_path(event) do %>
            <img src="<%= event.image %>" alt="<%= event.name %>" class="featured-event-image" data-featured-event-target="animated">
          <% end %>
          <div class="featured-event-content">
            <div class="featured-event-badges">
              <% if event.featured? %>
                <span class="badge badge-featured">★ En vedette</span>
              <% end %>
              <% if event.ticket_types.any? { |ticket_type| ticket_type.available_quantity > 0 } %>
                <!--<span class="badge badge-available">Disponible</span>-->
              <% end %>
            </div>
            <h3 class="featured-event-title"><%= event.name %></h3>
            <div class="featured-event-meta">
              <div class="featured-event-meta-item">
                <i data-lucide="calendar"></i>
                <%= l(event.start_time, format: '%a, %b %d • %H:%M - %H:%M') %> <!-- Format: Wed, Jan 1 • 18:30 - 22:00 -->
              </div>
              <div class="featured-event-meta-item">
                <i data-lucide="map-pin"></i>
                <%= event.venue_name %>, <%= event.venue_address %>
              </div>
              <div class="featured-event-meta-item">
                <i data-lucide="users"></i>
                <%= event.tickets.sum(:quantity) %> participants • <%= event.tickets.joins(:ticket_type).where('ticket_types.quantity > ?', 0).count %> places disponibles
              </div>
            </div>
            <p class="featured-event-description"><%= event.description %></p>
            <div class="featured-event-footer">
              <span class="featured-event-price">€<%= event.ticket_types.minimum(:price_cents).to_f / 100 %></span>
              <%= link_to "Réserver une place", event_path(event), class: "btn btn-sm btn-primary" %>
            </div>
          </div>
        </div>
      <% end %>
    </div>

    <div style="text-align: center; margin-top: var(--space-12);">
      <%= link_to "Voir tous les événements", events_path, class: "btn btn-lg btn-outline" %>
    </div>
  </div>

</section>

<!-- Features Section -->
<section class="section features-section">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">Pourquoi choisir Aperonight ?</h2>
      <p class="section-description">Nous sélectionnons des expériences premium qui connectent les professionnels et créent des relations durables.</p>
    </div>
    <div class="features-grid">
      <div class="feature-card">
        <div class="feature-icon">
          <i data-lucide="crown"></i>
        </div>
        <h3 class="feature-title">Sélection Premium</h3>
        <p class="feature-description">Chaque événement est soigneusement sélectionné et conçu pour offrir une valeur exceptionnelle et des opportunités de réseautage.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <i data-lucide="shield-check"></i>
        </div>
        <h3 class="feature-title">Sécurisé et Fiable</h3>
        <p class="feature-description">Paiements sécurisés, lieux vérifiés et communauté de confiance avec couverture d'assurance complète.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <i data-lucide="users-2"></i>
        </div>
        <h3 class="feature-title">Réseautage de Qualité</h3>
        <p class="feature-description">Connectez-vous avec des professionnels vérifiés, des entrepreneurs et des leaders de l'industrie dans des environnements intimes.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <i data-lucide="zap"></i>
        </div>
        <h3 class="feature-title">Réservation Instantanée</h3>
        <p class="feature-description">Processus de réservation fluide avec confirmation instantanée et gestion d'événement facile.</p>
      </div>
    </div>
  </div>
</section>

<!-- Stats Section -->
<section class="section stats-section">
  <div class="container">
    <div class="stats-grid">
      <div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
        <span class="stat-number" data-target-value="150">0</span>
        <div class="stat-label">Événements Mensuels</div>
      </div>
      <div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
        <span class="stat-number" data-target-value="5200">0</span>
        <div class="stat-label">Membres Actifs</div>
      </div>
      <div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
        <span class="stat-number" data-target-value="200">0</span>
        <div class="stat-label">Lieux Partenaires</div>
      </div>
      <div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
        <span class="stat-number" data-target-value="98">0</span>
        <div class="stat-label">Taux de Satisfaction</div>
      </div>
    </div>
  </div>
</section>

<!-- CTA Section -->
<section class="cta-section">
  <div class="container">
    <div class="cta-content">
      <h2>Prêt à rejoindre la communauté ?</h2>
      <p>Commencez à découvrir des événements incroyables et connectez-vous avec des professionnels partageant les mêmes idées dans votre ville.</p>
      <div style="display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap;">
        <%= link_to new_user_registration_path, class: "btn btn-lg bg-white border-2 border-white text-blue-600 hover:bg-blue-400 hover:text-white" do %>
          <i data-lucide="user-plus"></i>
          Rejoindre gratuitement
        <% end %>
      </div>
    </div>
  </div>
</section>