Newsletter Signup

<section class="sl-newsletter" style="padding:clamp(40px,6vw,72px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:640px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:.85rem;">
    {%- if section.settings.eyebrow != blank -%}
      <span style="font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
    {%- endif -%}
    <h2 style="margin:0;font-size:clamp(1.5rem,3vw,2.25rem);">{{ section.settings.heading }}</h2>
    {%- if section.settings.body != blank -%}
      <p style="margin:0;opacity:.85;line-height:1.55;">{{ section.settings.body }}</p>
    {%- endif -%}
    {% form 'customer', class: 'sl-newsletter-form', novalidate: 'novalidate' %}
      <input type="hidden" name="contact[tags]" value="newsletter" />
      <div style="display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem;">
        <label for="sl-newsletter-{{ section.id }}" style="position:absolute;left:-9999px;">{{ section.settings.placeholder | default: 'Email address' }}</label>
        <input id="sl-newsletter-{{ section.id }}" type="email" name="contact[email]" required placeholder="{{ section.settings.placeholder | default: 'Email address' }}" autocomplete="email" style="flex:1 1 220px;padding:.85rem 1rem;border:1px solid currentColor;border-radius:.375rem;background:transparent;color:inherit;font-family:inherit;font-size:1rem;min-width:0;" />
        <button type="submit" style="padding:.85rem 1.5rem;background:var(--sl-accent,#0a5cff);color:#fff;border:0;border-radius:.375rem;font-family:inherit;font-weight:700;cursor:pointer;font-size:1rem;">{{ section.settings.cta_text | default: 'Subscribe' }}</button>
      </div>
      {%- if form.posted_successfully? -%}
        <p role="status" style="margin:.75rem 0 0;color:var(--sl-accent,#0a5cff);font-weight:600;">{{ section.settings.success | default: 'Thanks! You are on the list.' }}</p>
      {%- endif -%}
    {% endform %}
    {%- if section.settings.privacy != blank -%}
      <p style="margin:.25rem 0 0;font-size:.8rem;opacity:.7;">{{ section.settings.privacy }}</p>
    {%- endif -%}
  </div>
</section>
{% schema %}
{
  "name": "Newsletter Signup",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Stay in the loop" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Get 10% off your first order" },
    { "type": "textarea", "id": "body", "label": "Body", "default": "Subscribe for early access to new drops and members-only perks." },
    { "type": "text", "id": "placeholder", "label": "Input placeholder", "default": "Email address" },
    { "type": "text", "id": "cta_text", "label": "Button text", "default": "Subscribe" },
    { "type": "text", "id": "success", "label": "Success message", "default": "Thanks! You are on the list." },
    { "type": "text", "id": "privacy", "label": "Privacy note", "default": "We respect your privacy. Unsubscribe anytime." }
  ],
  "presets": [{ "name": "Newsletter Signup" }]
}
{% endschema %}