<% page_title @page_title  %>
<%= render '/pwb/meta_tags' %>
<%= render 'pwb/shared/leaflet_assets' %>

<!-- Bologna Theme Contact Us - Tailwind CSS -->
<section class="bg-gradient-to-br from-stone-100 to-amber-50 py-6">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center justify-between">
      <div>
        <h1 class="text-3xl font-bold text-stone-800 mb-1">
          <%= I18n.t("contactUs") %>
        </h1>
        <p class="text-stone-600">
          <%= I18n.t("contactUsPrompt") %>
        </p>
      </div>
      <nav class="hidden md:flex" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
          <li class="inline-flex items-center">
            <a href="/" class="text-stone-600 hover:text-amber-700 transition">
              <%= icon(:home, size: :sm, class: "mr-1") %>
              <%= I18n.t("webContentSections.home") %>
            </a>
          </li>
          <li>
            <div class="flex items-center">
              <%= icon(:chevron_right, size: :xs, class: "text-stone-400 mx-2") %>
              <span class="text-amber-700 font-medium">
                <%= I18n.t("contactUs") %>
              </span>
            </div>
          </li>
        </ol>
      </nav>
    </div>
  </div>
</section>

<section class="bg-white py-12">
  <div class="container mx-auto px-4">
    <%= page_component "form_and_map", @page %>
  </div>
</section>
