Contact With Map

<section class="sl-contact-map" style="padding:clamp(48px,7vw,80px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr;">
    <style>@media (min-width:900px){.sl-contact-map>div{grid-template-columns:1fr 1fr !important;align-items:stretch;}}</style>
    <div style="display:flex;flex-direction:column;gap:1rem;">
      <header>
        {%- if section.settings.eyebrow != blank -%}
          <span style="font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
        {%- endif -%}
        <h2 style="margin:.3rem 0 .5rem;font-size:clamp(1.5rem,3vw,2rem);font-family:inherit;line-height:1.15;">{{ section.settings.heading | default: 'Get in touch' }}</h2>
        {%- if section.settings.subheading != blank -%}
          <p style="margin:0;opacity:.8;line-height:1.55;">{{ section.settings.subheading }}</p>
        {%- endif -%}
      </header>
      {% form 'contact', class: 'sl-contact-form' %}
        {%- if form.posted_successfully? -%}
          <p role="status" style="padding:1rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:.5rem;font-weight:600;">{{ section.settings.success_message | default: "Thanks — we'll be in touch within 24 hours." }}</p>
        {%- endif -%}
        <div style="display:grid;gap:.75rem;">
          <label style="display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;font-weight:600;">Name
            <input type="text" name="contact[name]" autocomplete="name" required style="padding:.7rem .85rem;border:1px solid currentColor;border-radius:.375rem;background:transparent;color:inherit;font-family:inherit;font-size:1rem;" />
          </label>
          <label style="display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;font-weight:600;">Email
            <input type="email" name="contact[email]" autocomplete="email" required style="padding:.7rem .85rem;border:1px solid currentColor;border-radius:.375rem;background:transparent;color:inherit;font-family:inherit;font-size:1rem;" />
          </label>
          <label style="display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;font-weight:600;">Message
            <textarea name="contact[body]" rows="4" required style="padding:.7rem .85rem;border:1px solid currentColor;border-radius:.375rem;background:transparent;color:inherit;font-family:inherit;font-size:1rem;resize:vertical;"></textarea>
          </label>
          <button type="submit" style="padding:.85rem 1.25rem;background:var(--sl-accent,#0a5cff);color:#fff;border:0;border-radius:.5rem;font-family:inherit;font-weight:700;cursor:pointer;font-size:1rem;">{{ section.settings.button_text | default: 'Send message' }}</button>
        </div>
      {% endform %}
    </div>
    <aside style="display:flex;flex-direction:column;gap:.75rem;">
      <figure style="margin:0;border-radius:.75rem;overflow:hidden;aspect-ratio:4/3;background:rgba(127,127,127,.08);">
        {%- assign map_src = section.settings.map_image | image_url: width: 960 | default: 'https://maps.googleapis.com/maps/api/staticmap?center=' | append: section.settings.map_query | default: 'New+York' | append: '&zoom=14&size=640x480&scale=2&maptype=roadmap' -%}
        <img src="{{ map_src }}" alt="{{ section.settings.map_alt | default: 'Store location map' }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;" />
      </figure>
      <address style="font-style:normal;display:flex;flex-direction:column;gap:.4rem;padding:1rem;border:1px solid currentColor;border-radius:.5rem;">
        <strong style="font-size:1rem;">{{ section.settings.address_title | default: 'Visit us' }}</strong>
        <span style="opacity:.85;line-height:1.5;font-size:.92rem;">{{ section.settings.address_line | default: '123 Spring Street, New York, NY 10012' }}</span>
        {%- if section.settings.hours != blank -%}
          <span style="opacity:.75;font-size:.85rem;">{{ section.settings.hours }}</span>
        {%- endif -%}
        {%- if section.settings.phone != blank -%}
          <a href="tel:{{ section.settings.phone | remove: ' ' }}" style="color:var(--sl-accent,#0a5cff);text-decoration:none;font-weight:600;font-size:.9rem;">{{ section.settings.phone }}</a>
        {%- endif -%}
      </address>
    </aside>
  </div>
</section>
{% schema %}
{
  "name": "Contact With Map",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Say hello" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Get in touch" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Questions, press, partnerships — we usually reply within 24 hours." },
    { "type": "text", "id": "button_text", "label": "Button text", "default": "Send message" },
    { "type": "text", "id": "success_message", "label": "Success message", "default": "Thanks — we'll be in touch within 24 hours." },
    { "type": "image_picker", "id": "map_image", "label": "Map image override" },
    { "type": "text", "id": "map_query", "label": "Static-map query (fallback)", "default": "Spring+St+New+York" },
    { "type": "text", "id": "map_alt", "label": "Map alt text", "default": "Store location map" },
    { "type": "text", "id": "address_title", "label": "Address title", "default": "Visit us" },
    { "type": "text", "id": "address_line", "label": "Address", "default": "123 Spring Street, New York, NY 10012" },
    { "type": "text", "id": "hours", "label": "Hours", "default": "Mon-Sat 10:00-20:00" },
    { "type": "text", "id": "phone", "label": "Phone", "default": "+1 212 555 0100" }
  ],
  "presets": [{ "name": "Contact With Map" }]
}
{% endschema %}