{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Newsletter banner: a compact sign-up in two styles. "Strip" puts the heading, a short line and
  the email field with its button in one row on desktop (stacked on mobile), for between sections
  or above the footer. "Footer block" is a larger block with heading, text, form and small print,
  plus an optional image beside it. Both use Shopify's customer form: the email is added as a
  customer tagged "newsletter" (plus an optional tag of your own); success and error messages are
  settings. No JavaScript.
  Depends on: snippets/lib-image.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign form_id = 'lib-nl-banner-' | append: section.id
  assign input_id = 'LibNlBannerEmail-' | append: section.id
  assign error_id = 'LibNlBannerError-' | append: section.id
  assign note_id = 'LibNlBannerNote-' | append: section.id
  assign tags = 'newsletter'
  if s.customer_tag != blank
    assign tags = tags | append: ',' | append: s.customer_tag
  endif
  assign has_image = false
  if s.variant == 'footer' and s.image != blank or s.variant == 'footer' and s.image_mobile != blank
    assign has_image = true
  endif
-%}

<div
  class="lib-nl-banner lib-nl-banner--{{ s.variant }} lib-nl-banner--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-image-pos="{{ s.image_position }}"
  {% if has_image %}
    data-has-image
  {% endif %}
  {% if s.animate %}
    data-animate
  {% endif %}
  style="
    --lib-bg: {{ s.color_bg }};
    {% if s.color_bg_gradient != blank %}--lib-bg-image: {{ s.color_bg_gradient }};{% endif %}
    --lib-text: {{ s.color_text }};
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-field-bg: {{ s.color_field_bg }};
    --lib-field-text: {{ s.color_field_text }};
    --lib-pt: {{ s.padding_top }}px;
    --lib-pb: {{ s.padding_bottom }}px;
    --lib-pt-m: {{ s.padding_top_mobile }}px;
    --lib-pb-m: {{ s.padding_bottom_mobile }}px;
  "
>
  <div class="lib-nl-banner__inner">
    {%- if has_image -%}
      <div class="lib-nl-banner__media">
        {%- render 'lib-image',
          image: s.image,
          image_mobile: s.image_mobile,
          class: 'lib-nl-banner__img',
          sizes: '(min-width: 990px) 40vw, 100vw'
        -%}
      </div>
    {%- endif -%}

    <div class="lib-nl-banner__copy" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
      {%- if s.heading != blank -%}
        <{{ heading_tag }} class="lib-nl-banner__heading lib-nl-banner__heading--{{ s.heading_size }}">
          {{- s.heading -}}
        </{{ heading_tag }}>
      {%- endif -%}
      {%- if s.text != blank -%}
        <div class="lib-nl-banner__text">{{ s.text }}</div>
      {%- endif -%}
    </div>

    {%- form 'customer', id: form_id, class: 'lib-nl-banner__form' -%}
      <input type="hidden" name="contact[tags]" value="{{ tags | escape }}">
      {%- if form.posted_successfully -%}
        <p class="lib-nl-banner__msg lib-nl-banner__msg--success" role="status">
          <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><path d="m5 10.5 3.2 3L15 6.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span>{{ s.success_message | escape }}</span>
        </p>
      {%- else -%}
        {%- if form.errors -%}
          <div class="lib-nl-banner__msg lib-nl-banner__msg--error" id="{{ error_id }}" role="alert">
            <p>{{ s.error_message | escape }}</p>
            {%- for field in form.errors -%}
              <p>
                {%- if field == 'form' -%}
                  {{ form.errors.messages[field] }}
                {%- else -%}
                  {{ form.errors.translated_fields[field] | capitalize }}
                  {{ form.errors.messages[field] }}
                {%- endif -%}
              </p>
            {%- endfor -%}
          </div>
        {%- endif -%}
        <label class="lib-nl-banner__label{% unless s.show_label %} lib-nl-banner__sr{% endunless %}" for="{{ input_id }}">
          {{- s.input_label | default: 'Email' | escape -}}
        </label>
        <div class="lib-nl-banner__row">
          <input
            class="lib-nl-banner__input"
            id="{{ input_id }}"
            type="email"
            name="contact[email]"
            required
            autocomplete="email"
            autocapitalize="off"
            spellcheck="false"
            {% if s.placeholder != blank %}
              placeholder="{{ s.placeholder | escape }}"
            {% endif %}
            {% if form.errors %}
              aria-invalid="true"
            {% endif %}
            {% if form.errors or s.small_print != blank %}
              aria-describedby="{% if form.errors %}{{ error_id }} {% endif %}{% if s.small_print != blank %}{{ note_id }}{% endif %}"
            {% endif %}
          >
          <button type="submit" class="lib-nl-banner__submit">{{ s.button_label | default: 'Subscribe' | escape }}</button>
        </div>
        {%- if s.small_print != blank -%}
          <p class="lib-nl-banner__note" id="{{ note_id }}">{{ s.small_print }}</p>
        {%- endif -%}
      {%- endif -%}
    {%- endform -%}
  </div>
</div>

{% stylesheet %}
  .lib-nl-banner {
    background-color: var(--lib-bg);
    background-image: var(--lib-bg-image, none);
    color: var(--lib-text);
    padding: var(--lib-pt) 1rem var(--lib-pb);
  }
  .lib-nl-banner__inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 1.25rem; }
  .lib-nl-banner--full .lib-nl-banner__inner { max-width: none; }
  .lib-nl-banner__inner > * { min-width: 0; }
  @media (max-width: 749px) {
    .lib-nl-banner { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-nl-banner[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-nl-banner[data-show='mobile'] { display: none; }
  }

  .lib-nl-banner__copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
  .lib-nl-banner__copy[data-align='center'] { align-items: center; text-align: center; }
  .lib-nl-banner__copy[data-align='right'] { align-items: flex-end; text-align: right; }
  @media (max-width: 749px) {
    .lib-nl-banner__copy[data-align-m='left'] { align-items: flex-start; text-align: left; }
    .lib-nl-banner__copy[data-align-m='center'] { align-items: center; text-align: center; }
    .lib-nl-banner__copy[data-align-m='right'] { align-items: flex-end; text-align: right; }
  }
  .lib-nl-banner__heading { margin: 0; font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
  .lib-nl-banner__heading--small { font-size: clamp(1.125rem, 1.8vw, 1.375rem); }
  .lib-nl-banner__heading--large { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
  .lib-nl-banner__text { margin-top: 0.5rem; font-size: 1rem; line-height: 1.55; opacity: 0.85; }
  .lib-nl-banner__text > :first-child { margin-top: 0; }
  .lib-nl-banner__text > :last-child { margin-bottom: 0; }

  .lib-nl-banner__form { width: 100%; }
  .lib-nl-banner__label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 600; }
  .lib-nl-banner__sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .lib-nl-banner__row { display: flex; gap: 0.5rem; }
  .lib-nl-banner__input {
    flex: 1;
    min-width: 0;
    min-height: 3rem;
    padding: 0 1rem;
    border: 1.5px solid color-mix(in srgb, var(--lib-field-text) 30%, transparent);
    border-radius: 999px;
    background: var(--lib-field-bg);
    color: var(--lib-field-text);
    font: inherit;
  }
  .lib-nl-banner__input::placeholder { color: color-mix(in srgb, var(--lib-field-text) 60%, transparent); }
  .lib-nl-banner__input:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 2px; }
  .lib-nl-banner__submit {
    flex: none;
    min-height: 3rem;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--lib-accent);
    color: var(--lib-accent-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .lib-nl-banner__submit:focus-visible { outline: 2px solid var(--lib-text); outline-offset: 2px; }
  @media (max-width: 479px) {
    .lib-nl-banner__row { flex-direction: column; }
  }
  .lib-nl-banner__note { margin: 0.625rem 0 0; font-size: 0.8125rem; line-height: 1.45; opacity: 0.8; }
  .lib-nl-banner__note a { color: inherit; text-underline-offset: 0.2em; }
  .lib-nl-banner__note a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
  .lib-nl-banner__msg { margin: 0 0 0.75rem; font-weight: 600; }
  .lib-nl-banner__msg p { margin: 0; }
  .lib-nl-banner__msg--success { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
  .lib-nl-banner__msg--error { padding: 0.5rem 0.75rem; border-left: 3px solid currentColor; }

  /* Strip: copy and form side by side from tablet width up. */
  @media (min-width: 750px) {
    .lib-nl-banner--strip .lib-nl-banner__inner { grid-template-columns: 1fr minmax(20rem, 30rem); align-items: center; gap: 2.5rem; }
  }

  /* Footer block: copy over the form, optional image beside them. */
  .lib-nl-banner--footer .lib-nl-banner__inner { gap: 1.5rem; }
  .lib-nl-banner--footer .lib-nl-banner__copy,
  .lib-nl-banner--footer .lib-nl-banner__form { max-width: 34rem; }
  .lib-nl-banner--footer .lib-nl-banner__copy[data-align='center'] ~ .lib-nl-banner__form { margin-inline: auto; }
  .lib-nl-banner--footer .lib-nl-banner__heading { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
  .lib-nl-banner--footer .lib-nl-banner__heading--small { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
  .lib-nl-banner--footer .lib-nl-banner__text { margin-top: 0.875rem; font-size: 1.0625rem; }
  .lib-nl-banner__media {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 4 / 3;
    background: color-mix(in srgb, var(--lib-text) 8%, transparent);
  }
  .lib-nl-banner__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lib-nl-banner__img:is(svg) { fill: color-mix(in srgb, var(--lib-text) 25%, transparent); }
  @media (min-width: 990px) {
    .lib-nl-banner--footer[data-has-image] .lib-nl-banner__inner {
      grid-template-columns: 5fr 6fr;
      grid-template-rows: auto auto;
      column-gap: clamp(2.5rem, 5vw, 4.5rem);
      row-gap: 1.75rem;
      align-content: center;
    }
    .lib-nl-banner--footer[data-has-image] .lib-nl-banner__media { grid-row: 1 / 3; aspect-ratio: 1; }
    .lib-nl-banner--footer[data-has-image] .lib-nl-banner__copy { align-self: end; }
    .lib-nl-banner--footer[data-has-image] .lib-nl-banner__form { align-self: start; }
    .lib-nl-banner--footer[data-has-image][data-image-pos='right'] .lib-nl-banner__media { grid-column: 2; }
    .lib-nl-banner--footer[data-has-image][data-image-pos='right'] .lib-nl-banner__copy,
    .lib-nl-banner--footer[data-has-image][data-image-pos='right'] .lib-nl-banner__form { grid-column: 1; grid-row: auto; }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .lib-nl-banner[data-animate] .lib-nl-banner__inner > * {
        animation: lib-nl-banner-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
      }
    }
  }
  @keyframes lib-nl-banner-rise {
    from { opacity: 0; transform: translateY(20px); }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Newsletter banner",
  "tag": "section",
  "class": "lib-section",
  "settings": [
    {
      "type": "select",
      "id": "variant",
      "label": "Style",
      "options": [
        { "value": "strip", "label": "Strip (one row from 750px)" },
        { "value": "footer", "label": "Footer block" }
      ],
      "default": "strip"
    },

    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Get the studio letter" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" }
      ],
      "default": "medium"
    },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>New pieces and kiln days, once a month.</p>" },

    { "type": "header", "content": "Form" },
    { "type": "text", "id": "input_label", "label": "Field label", "default": "Email address" },
    { "type": "checkbox", "id": "show_label", "label": "Show field label", "info": "When off, the label is still read by screen readers.", "default": false },
    { "type": "text", "id": "placeholder", "label": "Field placeholder", "default": "you@example.com" },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Subscribe" },
    { "type": "text", "id": "customer_tag", "label": "Extra customer tag", "info": "Optional. Added next to \"newsletter\" on the customer." },
    { "type": "inline_richtext", "id": "small_print", "label": "Small print", "info": "Link your privacy policy here.", "default": "Unsubscribe any time. Read our <a href=\"/policies/privacy-policy\">privacy policy</a>." },
    { "type": "text", "id": "success_message", "label": "Success message", "default": "Thanks for subscribing. See you in your inbox." },
    { "type": "text", "id": "error_message", "label": "Error message", "info": "Shown above Shopify's own message when a sign-up fails.", "default": "We couldn't sign you up. Please check your email address." },

    { "type": "header", "content": "Image (footer block)" },
    { "type": "image_picker", "id": "image", "label": "Desktop image", "visible_if": "{{ section.settings.variant == 'footer' }}" },
    { "type": "image_picker", "id": "image_mobile", "label": "Mobile image", "info": "Optional. Shown below 750px.", "visible_if": "{{ section.settings.variant == 'footer' }}" },
    {
      "type": "select",
      "id": "image_position",
      "label": "Image position on desktop",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "right",
      "visible_if": "{{ section.settings.variant == 'footer' }}"
    },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    { "type": "text_alignment", "id": "text_alignment", "label": "Text alignment on desktop", "default": "left" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Text alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#2A2420" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#F4EFE8" },
    { "type": "color", "id": "color_accent", "label": "Accent (button)", "default": "#E8D9C4" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#2A2420" },
    { "type": "color", "id": "color_field_bg", "label": "Field background", "default": "#FFFDF9" },
    { "type": "color", "id": "color_field_text", "label": "Field text", "default": "#2A2420" },

    { "type": "header", "content": "Spacing and visibility" },
    { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 40 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 40 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 32 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 32 },
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        { "value": "all", "label": "All devices" },
        { "value": "desktop", "label": "Desktop only" },
        { "value": "mobile", "label": "Mobile only" }
      ],
      "default": "all"
    },
    { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." },

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "animate", "label": "Rise in on scroll", "info": "Only in browsers that support scroll-driven animations; never when reduced motion is on.", "default": false }
  ],
  "presets": [
    { "name": "Lib · Newsletter banner" }
  ]
}
{% endschema %}