<%# Barcelona Theme - Property Listing Section %>
<%# Mediterranean design with coastal blues and warm accents %>

<section class="py-20 bg-warm-50">
  <div class="container mx-auto px-6">
    <!-- Section Header -->
    <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-12">
      <div class="mb-6 md:mb-0">
        <span class="inline-block px-4 py-1.5 bg-med-100 text-med-700 text-sm font-medium rounded-soft mb-4">
          <%= rent_or_sale == 'for_sale' ? t('pwb.properties.for_sale', default: 'For Sale') : t('pwb.properties.for_rent', default: 'For Rent') %>
        </span>
        <h2 class="font-display text-3xl md:text-4xl font-bold text-warm-900">
          <%= I18n.t title_key %>
        </h2>
        <% if defined?(subtitle) && subtitle.present? %>
          <p class="text-warm-500 mt-2"><%= subtitle %></p>
        <% end %>
      </div>
      <a href="<%= rent_or_sale == 'for_sale' ? localized_buy_path : localized_rent_path %>"
         class="inline-flex items-center text-med-600 font-medium hover:text-med-700 transition-colors group">
        <span><%= t('pwb.properties.view_all', default: 'View All Properties') %></span>
        <%= icon(:arrow_forward, size: :sm, class: "ml-2 group-hover:translate-x-1 transition-transform") %>
      </a>
    </div>

    <!-- Property Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <% properties.each_with_index do |property, index| %>
        <article class="group bg-white rounded-softer overflow-hidden shadow-soft hover:shadow-elevated transition-all duration-500 animate-on-scroll"
                 style="animation-delay: <%= index * 100 %>ms">
          <!-- Property Image -->
          <%= link_to property.contextual_show_path(rent_or_sale), class: "block relative overflow-hidden", "aria-label": t("property.view_details_for", title: property.title.presence || property.reference, default: "View details for %{title}") do %>
            <div class="aspect-[4/3] relative">
              <%= opt_image_tag((property.ordered_photo 1), quality: "auto",
                  height: 350, crop: "fill",
                  class: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110",
                  loading: "lazy", use_picture: true,
                  alt: property.title.presence || "Property listing") %>

              <!-- Gradient Overlay -->
              <div class="absolute inset-0 bg-gradient-to-t from-warm-900/40 via-transparent to-transparent"></div>

              <!-- Price Badge -->
              <div class="absolute bottom-4 left-4">
                <span class="inline-block px-4 py-2 bg-white/95 backdrop-blur-sm text-med-600 font-display font-bold text-lg rounded-soft shadow-soft">
                  <%= property_price(property, rent_or_sale) %>
                </span>
              </div>

              <!-- Sale/Rent Badge -->
              <div class="absolute top-4 right-4">
                <span class="inline-block px-3 py-1.5 bg-<%= rent_or_sale == 'for_sale' ? 'med' : 'terra' %>-500 text-white text-xs font-medium uppercase tracking-wide rounded-soft">
                  <%= rent_or_sale == 'for_sale' ? t('pwb.properties.sale', default: 'Sale') : t('pwb.properties.rent', default: 'Rent') %>
                </span>
              </div>
            </div>
          <% end %>

          <!-- Property Details -->
          <div class="p-6">
            <!-- Title & Location -->
            <h3 class="font-display font-semibold text-xl text-warm-900 mb-2 line-clamp-1 group-hover:text-med-600 transition-colors">
              <%= link_to property.title, property.contextual_show_path(rent_or_sale) %>
            </h3>

            <% if property.respond_to?(:address_locality) && property.address_locality.present? %>
              <p class="flex items-center text-warm-500 text-sm mb-4">
                <%= icon(:location_on, size: :sm, class: "mr-2 text-gold-500") %>
                <%= property.address_locality %>
              </p>
            <% end %>

            <!-- Divider -->
            <div class="border-t border-warm-100 my-4"></div>

            <!-- Property Features -->
            <ul class="flex items-center justify-between text-sm" aria-label="<%= t('pwb.accessibility.property_features', default: 'Property features') %>">
              <li class="flex items-center text-warm-600" aria-label="<%= t('pwb.accessibility.bedrooms_count', count: property.count_bedrooms, default: '%{count} bedrooms') %>">
                <span class="w-8 h-8 flex items-center justify-center bg-med-50 rounded-full mr-2">
                  <%= icon(:bed, size: :sm, class: "text-med-500", aria_hidden: true) %>
                </span>
                <span><%= format_bedroom_count(property.count_bedrooms) %> <%= t('pwb.properties.beds', default: 'Beds') %></span>
              </li>
              <li class="flex items-center text-warm-600" aria-label="<%= t('pwb.accessibility.bathrooms_count', count: property.count_bathrooms, default: '%{count} bathrooms') %>">
                <span class="w-8 h-8 flex items-center justify-center bg-med-50 rounded-full mr-2">
                  <%= icon(:shower, size: :sm, class: "text-med-500", aria_hidden: true) %>
                </span>
                <span><%= format_bathroom_count(property.count_bathrooms) %> <%= t('pwb.properties.baths', default: 'Baths') %></span>
              </li>
              <li class="flex items-center text-warm-600" aria-label="<%= t('pwb.accessibility.area_size', area: property.constructed_area, unit: area_unit(property), default: '%{area} %{unit}') %>">
                <span class="w-8 h-8 flex items-center justify-center bg-med-50 rounded-full mr-2">
                  <%= icon(:straighten, size: :sm, class: "text-med-500", aria_hidden: true) %>
                </span>
                <span><%= property.constructed_area %><%= area_unit property %></span>
              </li>
            </ul>
          </div>
        </article>
      <% end %>
    </div>
  </div>
</section>
