<% page_title @property_details.title %>
<%= render '/pwb/props/meta_tags' %>
<%= render 'pwb/shared/leaflet_assets' %>

<%# Bologna Theme - Property Detail Page %>
<%# Modern, clean layout with generous whitespace and soft curves %>

<!-- Hero Section with Image Gallery -->
<section class="property-detail-page bg-warm-gray-50">
  <div class="property-detail-container py-8">
    <!-- Breadcrumb -->
    <nav class="mb-6">
      <ol class="flex items-center space-x-2 text-sm">
        <li>
          <a href="<%= root_path %>" class="text-warm-gray-500 hover:text-terra-600 transition-colors">
            <%= icon(:home, size: :xs, class: "mr-1") %>
            <%= t('pwb.breadcrumb.home', default: 'Home') %>
          </a>
        </li>
        <li class="text-warm-gray-400">
          <%= icon(:chevron_right, size: :xs) %>
        </li>
        <li>
          <a href="<%= @property_details.for_sale? ? localized_buy_path : localized_rent_path %>"
             class="text-warm-gray-500 hover:text-terra-600 transition-colors">
            <%= @property_details.for_sale? ? t('pwb.breadcrumb.buy', default: 'Buy') : t('pwb.breadcrumb.rent', default: 'Rent') %>
          </a>
        </li>
        <li class="text-warm-gray-400">
          <%= icon(:chevron_right, size: :xs) %>
        </li>
        <li class="text-warm-gray-900 font-medium truncate max-w-[200px]">
          <%= @property_details.title %>
        </li>
      </ol>
    </nav>

    <%# Fragment cache for image carousel - invalidates when photos change %>
    <% cache property_detail_cache_key(@property_details, "carousel") do %>
      <!-- Property Images -->
      <div class="mb-8">
        <%= render '/pwb/props/images_section_carousel' %>
      </div>
    <% end %>
  </div>
</section>

<!-- Main Content -->
<section class="bg-white">
  <div class="property-detail-container py-12">
    <div class="property-detail-layout">
      <!-- Left Column - Property Details -->
      <div class="property-detail-main">
        <%# Fragment cache for property info - invalidates when property updates %>
        <% cache property_detail_cache_key(@property_details, "info") do %>
          <!-- Title & Price Card -->
          <div class="bg-gradient-to-r from-warm-gray-50 to-white rounded-softer p-8 mb-8 shadow-soft">
            <div class="flex flex-col md:flex-row md:items-start md:justify-between">
              <div class="mb-4 md:mb-0">
                <h1 class="font-display text-2xl md:text-3xl font-bold text-warm-gray-900 mb-3">
                  <%= @property_details.title %>
                </h1>
                <% if @property_details.respond_to?(:address_locality) && @property_details.address_locality.present? %>
                  <p class="flex items-center text-warm-gray-500">
                    <%= icon(:location_on, size: :sm, class: "text-terra-400 mr-2") %>
                    <%= @property_details.address_locality %>
                  </p>
                <% end %>
              </div>
              <div class="text-left md:text-right">
                <span class="inline-block px-4 py-1.5 bg-<%= @property_details.for_sale? ? 'terra' : 'olive' %>-100 text-<%= @property_details.for_sale? ? 'terra' : 'olive' %>-600 text-sm font-medium rounded-pill mb-2">
                  <%= @property_details.for_sale? ? t('pwb.properties.for_sale', default: 'For Sale') : t('pwb.properties.for_rent', default: 'For Rent') %>
                </span>
                <p class="font-display text-3xl font-bold text-terra-600">
                  <%= property_price(@property_details, @property_details.for_sale? ? 'for_sale' : 'for_rent') %>
                </p>
              </div>
            </div>
          </div>

          <!-- Property Info Grid -->
          <div class="mb-10">
            <%= render '/pwb/props/prop_info_list' %>
          </div>

          <!-- Description Section -->
          <div class="mb-10">
            <div class="flex items-center mb-6">
              <span class="w-12 h-12 flex items-center justify-center bg-terra-100 rounded-full mr-4">
                <%= icon(:description, size: :md, class: "text-terra-600") %>
              </span>
              <h2 class="font-display text-2xl font-bold text-warm-gray-900">
                <%= t('property.description', default: 'Description') %>
              </h2>
            </div>
            <div class="prose prose-warm-gray max-w-none text-warm-gray-600 leading-relaxed">
              <%== @property_details.description %>
            </div>
          </div>

          <!-- Extras Section -->
          <% if @property_details.extras_for_display.present? %>
            <div class="mb-10">
              <div class="flex items-center mb-6">
                <span class="w-12 h-12 flex items-center justify-center bg-olive-100 rounded-full mr-4">
                  <%= icon(:star, size: :md, class: "text-olive-600") %>
                </span>
                <h2 class="font-display text-2xl font-bold text-warm-gray-900">
                  <%= t('property.extras', default: 'Features & Amenities') %>
                </h2>
              </div>
              <%= render '/pwb/props/extras' %>
            </div>
          <% end %>
        <% end %>

        <!-- Social Sharing -->
        <div class="border-t border-warm-gray-100 pt-8">
          <p class="text-warm-gray-500 text-sm mb-4"><%= t('pwb.property.share', default: 'Share this property') %>:</p>
          <%= render 'pwb/shared/social_sharing', url: request.original_url, title: @property_details.title, icon_style: :phosphor, style: :bologna %>
        </div>
      </div>

      <!-- Right Column - Contact & Sidebar -->
      <div class="property-detail-sidebar">
        <div class="lg:sticky lg:top-28 space-y-6">
          <!-- Contact Form Card -->
          <div class="bg-white rounded-softer shadow-medium p-6 border border-warm-gray-100">
            <%= render '/pwb/props/request_prop_info' %>
          </div>

          <!-- Agent Contact Card -->
          <div class="bg-gradient-to-br from-warm-gray-50 to-warm-gray-100 rounded-softer p-6">
            <%= render '/pwb/props/prop_contact_info' %>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Map Section -->
<% if @property_details.show_map && @map_markers.present? %>
  <section class="property-detail-map bg-warm-gray-50 border-t border-warm-gray-100">
    <div class="property-detail-map-inner py-12">
      <div class="flex items-center mb-8">
        <span class="w-12 h-12 flex items-center justify-center bg-sand-100 rounded-full mr-4">
          <%= icon(:map, size: :md, class: "text-sand-600") %>
        </span>
        <h2 class="font-display text-2xl font-bold text-warm-gray-900">
          <%= t('pwb.property.location', default: 'Location') %>
        </h2>
      </div>
      <div class="rounded-softer overflow-hidden shadow-soft" style="height: 400px;">
        <div id="property-map"
             class="w-full h-full"
             data-controller="map"
             data-map-target="canvas"
             data-map-markers-value="<%= @map_markers.to_json %>"
             data-map-zoom-value="15">
        </div>
      </div>
    </div>
  </section>
<% end %>
