{#
/**
 * @file
 * Contact form block template.
 *
 * Variables:
 * - section_title: The section title (e.g., "Contact us").
 * - section_subtitle: The main heading.
 * - section_description: Description text.
 * - form_title: Title above the form.
 * - contact_title: Title for contact info section.
 * - phone: Phone number.
 * - email: Email address.
 * - working_hours: Working hours text.
 * - office_title: Office card title.
 * - address: Office address.
 * - map_url: OpenStreetMap embed URL.
 * - directions_url: Link to directions.
 * - success_title: Success modal title.
 * - success_message: Success modal message.
 * - success_button_text: Success modal button text.
 * - form: The contact form.
 */
#}
<section class="py-16 lg:py-24 3xl:py-32 4xl:py-40 bg-gray-50 dark:bg-slate-800 transition-colors" data-block-type="contact">
  <div class="max-w-7xl 3xl:max-w-8xl 4xl:max-w-9xl mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12">
    {# Header #}
    <div class="text-center mb-12 3xl:mb-16">
      <span class="text-blue-500 font-medium mb-2 block">{{ section_title }}</span>
      <h2 class="text-3xl sm:text-4xl 3xl:text-5xl font-bold text-gray-900 dark:text-white mb-4">{{ section_subtitle }}</h2>
      <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">{{ section_description }}</p>
    </div>

    <div class="grid lg:grid-cols-2 gap-12 3xl:gap-16 4xl:gap-20">
      {# Left - Contact Form #}
      <div class="bg-white dark:bg-slate-900 rounded-2xl p-8 shadow-sm border border-gray-100 dark:border-slate-700">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">{{ form_title }}</h3>
        {{ form }}
      </div>

      {# Right - Contact Info & Map #}
      <div class="flex flex-col gap-8">
        {# Contact Info #}
        <div>
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">{{ contact_title }}</h3>
          <div class="space-y-4">
            {# Phone #}
            {% if phone %}
            <div class="flex items-center gap-4">
              <div class="w-10 h-10 bg-blue-50 dark:bg-blue-500/10 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                </svg>
              </div>
              <a href="tel:{{ phone|replace({' ': '', '-': ''}) }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 transition-colors">{{ phone }}</a>
            </div>
            {% endif %}
            {# Email #}
            {% if email %}
            <div class="flex items-center gap-4">
              <div class="w-10 h-10 bg-blue-50 dark:bg-blue-500/10 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
              </div>
              <a href="mailto:{{ email }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 transition-colors">{{ email }}</a>
            </div>
            {% endif %}
            {# Hours #}
            {% if working_hours %}
            <div class="flex items-center gap-4">
              <div class="w-10 h-10 bg-blue-50 dark:bg-blue-500/10 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
              </div>
              <span class="text-gray-700 dark:text-gray-300">{{ working_hours }}</span>
            </div>
            {% endif %}
          </div>
        </div>

        {# Interactive Map #}
        <div class="relative rounded-2xl overflow-hidden flex-1 min-h-[300px] border border-gray-200 dark:border-slate-700">
          {# OpenStreetMap Embed #}
          <iframe
            class="w-full h-full"
            src="{{ map_url }}"
            style="border:0;"
            allowfullscreen=""
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade">
          </iframe>

          {# Office Card Overlay #}
          <div class="absolute bottom-4 left-4 right-4 bg-white dark:bg-slate-900 rounded-xl p-4 shadow-lg border border-gray-100 dark:border-slate-700">
            <h4 class="font-semibold text-gray-900 dark:text-white mb-2">{{ office_title }}</h4>
            <div class="flex items-start gap-2 mb-3">
              <svg class="w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
              </svg>
              <span class="text-gray-600 dark:text-gray-300 text-sm">{{ address }}</span>
            </div>
            {% if directions_url %}
            <a href="{{ directions_url }}" target="_blank" class="inline-flex items-center gap-2 text-sm font-medium border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors">
              {{ 'Get a Direction'|t }}
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
              </svg>
            </a>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

</section>
