<!--
  templateType: page
  isAvailableForNewContent: true
  label: Contact
  screenshotPath: ../images/template-previews/contact.png
-->
{% extends "./layouts/base.html" %}

{% block body %}
<div id="main-content" class="body-container-wrapper">

{% dnd_area "dnd_area"
  label="Main section",
  class="body-container body-container--contact"
%}

  {# Contact Header #}
  {% dnd_section
    padding={
      "default": {"top": 80, "bottom": 40}
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "contact_header" path="@hubspot/rich_text", label="Contact Header" %}
          {% module_attribute "html" %}
            <h1 style="text-align: center;">Get in Touch</h1>
            <p style="text-align: center; font-size: 1.2rem;">We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# Contact Info Cards #}
  {% dnd_section
    padding={
      "default": {"top": 40, "bottom": 40}
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "phone_info"
          path="@hubspot/rich_text",
          label="Phone Info",
          width=4
        %}
          {% module_attribute "html" %}
            <div style="text-align: center; padding: 30px;">
              <img src="{{ get_asset_url('../images/icons/phone-icon.svg') }}" alt="Phone" style="width: 60px; height: 60px; margin-bottom: 20px;">
              <h3>Phone</h3>
              <p>(887) 929-0687</p>
            </div>
          {% end_module_attribute %}
        {% end_dnd_module %}
        {% dnd_module "email_info"
          path="@hubspot/rich_text",
          label="Email Info",
          width=4,
          offset=4
        %}
          {% module_attribute "html" %}
            <div style="text-align: center; padding: 30px;">
              <img src="{{ get_asset_url('../images/icons/email-icon.svg') }}" alt="Email" style="width: 60px; height: 60px; margin-bottom: 20px;">
              <h3>Email</h3>
              <p>contact@business.com</p>
            </div>
          {% end_module_attribute %}
        {% end_dnd_module %}
        {% dnd_module "location_info"
          path="@hubspot/rich_text",
          label="Location Info",
          width=4,
          offset=8
        %}
          {% module_attribute "html" %}
            <div style="text-align: center; padding: 30px;">
              <img src="{{ get_asset_url('../images/icons/location-icon.svg') }}" alt="Location" style="width: 60px; height: 60px; margin-bottom: 20px;">
              <h3>Location</h3>
              <p>Boston, MA</p>
            </div>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# Contact Form Section #}
  {% dnd_section
    padding={
      "default": {"top": 80, "bottom": 80}
    }
  %}
    {% dnd_column width=8, offset=2 %}
      {% dnd_row %}
        {% dnd_module "contact_form_title" path="@hubspot/rich_text", label="Contact Form Title" %}
          {% module_attribute "html" %}
            <h2 style="text-align: center; margin-bottom: 40px;">Send us a Message</h2>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module "contact_form" path="@hubspot/form", label="Contact Form" %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# Map Section #}
  {% dnd_section
    padding={
      "default": {"top": 80, "bottom": 80}
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "map_title" path="@hubspot/rich_text", label="Map Title" %}
          {% module_attribute "html" %}
            <h2 style="text-align: center; margin-bottom: 40px;">Find Us</h2>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module "map_image"
          path="@hubspot/image",
          label="Map Image",
          img={
            "src": get_asset_url("../images/sample/global-map.jpg"),
            "alt": "Our locations worldwide"
          }
        %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

{% end_dnd_area %}
</div>
{% endblock body %}
