Newsletter With Incentive

<section class="sl-newsletter-incentive" style="padding:clamp(48px,8vw,96px) 1rem;color:{{ section.settings.text_color | default: 'inherit' }};font-family:inherit;background:{{ section.settings.bg_color | default: 'transparent' }};">
  <div style="max-width:640px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center;">
    {%- if section.settings.badge_text != blank -%}
      <span style="display:inline-block;padding:.3rem .75rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:999px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;">{{ section.settings.badge_text }}</span>
    {%- endif -%}
    <h2 style="margin:0;font-size:clamp(1.75rem,4.5vw,2.75rem);line-height:1.1;font-family:inherit;font-weight:800;letter-spacing:-.01em;">{{ section.settings.heading | default: 'Get 10% off your first order' }}</h2>
    {%- if section.settings.subheading != blank -%}
      <p style="margin:0;opacity:.8;line-height:1.55;font-size:clamp(1rem,1.8vw,1.1rem);max-width:42ch;">{{ section.settings.subheading }}</p>
    {%- endif -%}
    {% form 'customer', class: 'sl-newsletter-incentive-form' %}
      <input type="hidden" name="contact[tags]" value="newsletter,incentive" />
      {%- if form.posted_successfully? -%}
        <p style="padding:1rem 1.5rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:.5rem;font-weight:600;">{{ section.settings.success_message | default: 'Check your inbox — your code is on the way.' }}</p>
      {%- else -%}
        <div style="display:flex;flex-wrap:wrap;gap:.5rem;width:100%;max-width:480px;">
          <label for="sl-newsletter-email" style="position:absolute;left:-9999px;">{{ section.settings.label | default: 'Email address' }}</label>
          <input id="sl-newsletter-email" type="email" name="contact[email]" autocomplete="email" placeholder="{{ section.settings.placeholder | default: 'you@example.com' }}" required style="flex:1 1 220px;min-width:0;padding:.95rem 1rem;border:1px solid currentColor;border-radius:.5rem;font-family:inherit;font-size:1rem;background:transparent;color:inherit;" />
          <button type="submit" style="padding:.95rem 1.5rem;background:var(--sl-accent,#0a5cff);color:#fff;border:0;border-radius:.5rem;font-family:inherit;font-weight:800;font-size:1rem;cursor:pointer;">{{ section.settings.button_text | default: 'Claim 10% off' }}</button>
        </div>
      {%- endif -%}
    {% endform %}
    <small style="opacity:.6;font-size:.75rem;max-width:36ch;line-height:1.5;">{{ section.settings.disclosure | default: 'By subscribing you agree to receive marketing emails. Unsubscribe anytime.' }}</small>
  </div>
</section>
{% schema %}
{
  "name": "Newsletter With Incentive",
  "settings": [
    { "type": "text", "id": "badge_text", "label": "Badge text", "default": "Welcome offer" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Get 10% off your first order" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Join our list for exclusive drops, early access, and a welcome discount on your first purchase." },
    { "type": "text", "id": "label", "label": "Input label (a11y)", "default": "Email address" },
    { "type": "text", "id": "placeholder", "label": "Input placeholder", "default": "you@example.com" },
    { "type": "text", "id": "button_text", "label": "Button text", "default": "Claim 10% off" },
    { "type": "text", "id": "success_message", "label": "Success message", "default": "Check your inbox — your code is on the way." },
    { "type": "textarea", "id": "disclosure", "label": "Disclosure text", "default": "By subscribing you agree to receive marketing emails. Unsubscribe anytime." },
    { "type": "color", "id": "bg_color", "label": "Background color" },
    { "type": "color", "id": "text_color", "label": "Text color" }
  ],
  "presets": [{ "name": "Newsletter With Incentive" }]
}
{% endschema %}