<!-- Bologna Theme Form and Map Component - Tailwind CSS -->
<div class="contact-grid grid grid-cols-1 gap-8 lg:gap-12">
  <!-- Contact Form -->
  <div class="order-2 lg:order-1">
    <div class="bg-stone-50 rounded-2xl p-6 lg:p-8 shadow-sm border border-stone-200">
      <h2 class="text-2xl font-bold text-stone-800 mb-2">
        <%= icon(:email, size: :md, class: "text-amber-700 mr-2") %>
        <%= I18n.t("sendUsAMessage", default: "Send us a message") %>
      </h2>
      <p class="text-stone-600 mb-6">
        <%= I18n.t("weWillGetBackToYou", default: "We'll get back to you as soon as possible.") %>
      </p>
      <%= render 'pwb/sections/contact_us_form' %>
    </div>
  </div>

  <!-- Contact Info & Map -->
  <div class="order-1 lg:order-2 space-y-6">
    <!-- Contact Information Card - uses Bologna theme variables -->
    <div class="rounded-2xl p-6 lg:p-8 text-white shadow-lg bg-gradient-to-br from-terra-500 to-terra-600">
      <h2 class="text-2xl font-bold mb-6">
        <%= icon(:location_on, size: :md, class: "mr-2") %>
        <%= I18n.t("contactInformation", default: "Contact Information") %>
      </h2>

      <div class="space-y-4">
        <div class="flex items-start">
          <%= icon(:apartment, size: :md, class: "mr-3 mt-1 text-amber-200") %>
          <div>
            <p class="font-semibold"><%= @current_agency.display_name %></p>
            <p class="text-amber-100">
              <%= [@current_agency.street_number, @current_agency.street_address].compact.join(', ') %>
              <% if @current_agency.city.present? || @current_agency.postal_code.present? %>
                <br><%= [@current_agency.city, @current_agency.postal_code].compact.join(', ') %>
              <% end %>
            </p>
          </div>
        </div>

        <% if @current_agency.phone_number_primary.present? %>
          <div class="flex items-center">
            <%= icon(:phone, size: :md, class: "mr-3 text-amber-200") %>
            <div>
              <p class="text-sm text-amber-100"><%= I18n.t("telephone", default: "Telephone") %></p>
              <a href="tel:<%= @current_agency.phone_number_primary %>" class="font-semibold hover:opacity-80 transition">
                <%= @current_agency.phone_number_primary %>
              </a>
            </div>
          </div>
        <% end %>

        <% if @current_agency.email_primary.present? %>
          <div class="flex items-center">
            <%= icon(:email, size: :md, class: "mr-3 text-amber-200") %>
            <div>
              <p class="text-sm text-amber-100"><%= I18n.t("email", default: "Email") %></p>
              <a href="mailto:<%= @current_agency.email_primary %>" class="font-semibold hover:opacity-80 transition">
                <%= @current_agency.email_primary %>
              </a>
            </div>
          </div>
        <% end %>
      </div>
    </div>

    <!-- Map -->
    <% if @current_agency.show_contact_map && @map_markers.present? %>
      <div class="rounded-2xl overflow-hidden shadow-lg border border-stone-200" style="height: 350px;">
        <div id="contact-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>
    <% end %>
  </div>
</div>
