<!-- Biarritz Property Row - High Contrast Coastal Design -->
<!-- Uses CSS variables from _biarritz.css.erb for palette consistency -->
<section class="bg-neutral-50 border-b-2 border-neutral-200 py-12">
  <div class="container mx-auto px-4">

    <!-- Section Header - High Contrast -->
    <div class="mb-8">
      <h3 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-2" style="font-family: var(--font-heading), 'Playfair Display', Georgia, serif;">
        <%= I18n.t title_key %>
      </h3>
      <div class="w-24 h-1 bg-gradient-to-r from-ocean-primary to-sand-primary rounded-full biarritz-accent-wave"></div>
    </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| %>
        <!-- Property Card - Coastal Style -->
        <article class="card-coastal group" itemscope itemtype="https://schema.org/RealEstateListing">

          <!-- Property Image with Hover Effect -->
          <%= link_to property.contextual_show_path(rent_or_sale), "aria-label": t("property.view_details_for", title: property.title.presence || property.reference, default: "View details for %{title}") do %>
            <div class="relative overflow-hidden rounded-t-xl">
              <%= opt_image_tag((property.ordered_photo 1), quality: "auto",
                  height: 300,
                  crop: "scale",
                  class: "w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110",
                  loading: index < 3 ? "eager" : "lazy",
                  use_picture: true,
                  alt: property.title.presence || "Property listing") %>

              <!-- Overlay on Hover -->
              <div class="absolute inset-0 bg-gradient-to-t from-ocean-darker/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
                <span class="text-white font-semibold text-sm flex items-center">
                  View Details
                  <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                  </svg>
                </span>
              </div>
            </div>
          <% end %>

          <!-- Card Body -->
          <div class="p-6 bg-white">

            <!-- Property Title - High Contrast -->
            <h2 class="text-xl font-semibold text-neutral-900 mb-3 line-clamp-2 min-h-[3.5rem]" itemprop="name">
              <%= link_to property.title,
                  property.contextual_show_path(rent_or_sale),
                  class: "hover:text-ocean-dark transition-colors",
                  title: property.title %>
            </h2>

            <!-- Property Price - Ocean Blue -->
            <div class="mb-4">
              <span class="text-3xl font-bold text-ocean-dark" itemprop="price">
                <%= property_price(property, rent_or_sale) %>
              </span>
            </div>

            <!-- Property Features - Dark Icons & Text -->
            <div class="border-t-2 border-neutral-100 pt-4">
              <ul class="flex items-center justify-between text-sm text-neutral-700" role="list" aria-label="<%= t('pwb.accessibility.property_features', default: 'Property features') %>">

                <!-- Bedrooms -->
                <li class="flex flex-col items-center" aria-label="<%= t('pwb.accessibility.bedrooms_count', count: property.count_bedrooms, default: '%{count} bedrooms') %>">
                  <%= icon(:bed, class: "text-lg text-ocean-primary mb-1", aria_hidden: true) %>
                  <span class="font-semibold text-neutral-900"><%= format_bedroom_count(property.count_bedrooms) %></span>
                  <span class="text-xs hidden sm:block">Beds</span>
                </li>

                <!-- Bathrooms -->
                <li class="flex flex-col items-center" aria-label="<%= t('pwb.accessibility.bathrooms_count', count: property.count_bathrooms, default: '%{count} bathrooms') %>">
                  <%= icon(:shower, class: "text-lg text-ocean-primary mb-1", aria_hidden: true) %>
                  <span class="font-semibold text-neutral-900"><%= format_bathroom_count(property.count_bathrooms) %></span>
                  <span class="text-xs hidden sm:block">Baths</span>
                </li>

                <!-- Area -->
                <li class="flex flex-col items-center" aria-label="<%= t('pwb.accessibility.area_size', area: property.constructed_area, unit: area_unit(property), default: '%{area} %{unit}') %>">
                  <%= icon(:fullscreen, class: "text-lg text-ocean-primary mb-1", aria_hidden: true) %>
                  <span class="font-semibold text-neutral-900"><%= property.constructed_area %></span>
                  <span class="text-xs hidden sm:block"><%= area_unit property %></span>
                </li>

                <!-- Garage (if available) -->
                <% if property.has_garage %>
                  <li class="flex flex-col items-center" aria-label="<%= t('pwb.accessibility.garages_count', count: property.count_garages, default: '%{count} garage spaces') %>">
                    <%= icon(:directions_car, class: "text-lg text-ocean-primary mb-1", aria_hidden: true) %>
                    <span class="font-semibold text-neutral-900"><%= property.count_garages %></span>
                    <span class="text-xs hidden sm:block">Garage</span>
                  </li>
                <% else %>
                  <!-- Spacer for alignment -->
                  <li class="w-12" aria-hidden="true"></li>
                <% end %>
              </ul>
            </div>

            <!-- Property Type Badge (Optional) -->
            <% if property.prop_type_key.present? %>
              <div class="mt-4">
                <span class="inline-block bg-sand-light text-sand-dark px-3 py-1 rounded-full text-xs font-semibold">
                  <%= I18n.t("activerecord.attributes.pwb/property.prop_types.#{property.prop_type_key}", default: property.prop_type_key.humanize) %>
                </span>
              </div>
            <% end %>
          </div>
        </article>
      <% end %>
    </div>
  </div>
</section>
