Contact CTA Card

<section class="sl-contact-cta" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:640px;margin:0 auto;text-align:center;border:1px solid currentColor;border-radius:.75rem;padding:clamp(1.5rem,4vw,2.5rem);">
    <h2 style="margin:0 0 .75rem;font-size:clamp(1.5rem,3vw,2rem);">{{ section.settings.heading }}</h2>
    <p style="margin:0 0 1.5rem;opacity:.85;line-height:1.5;">{{ section.settings.subheading }}</p>
    {% form 'contact' %}
      <div style="display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;">
        <label for="ContactCtaEmail-{{ section.id }}" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);">{{ section.settings.email_label | default: 'Email' }}</label>
        <input id="ContactCtaEmail-{{ section.id }}" type="email" name="contact[email]" required placeholder="{{ section.settings.email_placeholder | default: 'you@example.com' }}" style="flex:1 1 220px;min-width:0;padding:.75rem 1rem;border:1px solid currentColor;border-radius:.375rem;background:transparent;color:inherit;font-family:inherit;" />
        <input type="hidden" name="contact[body]" value="{{ section.settings.hidden_body | default: 'Contact request from homepage' }}" />
        <button type="submit" style="padding:.75rem 1.25rem;background:var(--sl-accent,#0a5cff);color:#fff;border:0;border-radius:.375rem;font-family:inherit;font-weight:600;cursor:pointer;">{{ section.settings.button_text | default: 'Get in touch' }}</button>
      </div>
      {%- if form.posted_successfully? -%}
        <p style="margin:1rem 0 0;color:var(--sl-accent,#0a5cff);">{{ section.settings.success_message | default: 'Thanks — we will be in touch.' }}</p>
      {%- endif -%}
    {% endform %}
    {%- if section.settings.footnote != blank -%}
      <p style="margin:1rem 0 0;font-size:.8rem;opacity:.7;">{{ section.settings.footnote }}</p>
    {%- endif -%}
  </div>
</section>
{% schema %}
{
  "name": "Contact CTA Card",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Let's talk" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Drop us your email and we'll reach out shortly." },
    { "type": "text", "id": "email_label", "label": "Email label", "default": "Email" },
    { "type": "text", "id": "email_placeholder", "label": "Email placeholder", "default": "you@example.com" },
    { "type": "text", "id": "button_text", "label": "Button text", "default": "Get in touch" },
    { "type": "text", "id": "hidden_body", "label": "Hidden body (form context)", "default": "Contact request from homepage" },
    { "type": "text", "id": "success_message", "label": "Success message", "default": "Thanks — we will be in touch." },
    { "type": "text", "id": "footnote", "label": "Footnote", "default": "We'll never share your email." }
  ],
  "presets": [{ "name": "Contact CTA Card" }]
}
{% endschema %}