<style>
  .promo-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    padding: 1rem;
  }

  .promo-popup-overlay.is-active {
    opacity: 1;
    visibility: visible;
  }

  .promo-popup {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--color-background-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15);
    text-align: center;
    transform: translateY(20px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .promo-popup-overlay.is-active .promo-popup {
    transform: translateY(0) scale(1);
  }

  .promo-popup__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text);
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.2s ease;
    padding: 0;
  }

  .promo-popup__close:hover {
    opacity: 1;
  }

  .promo-popup__heading {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem;
    line-height: 1.2;
  }

  .promo-popup__subheading {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    opacity: 0.7;
    margin: 0 0 1rem;
    line-height: 1.5;
  }

  .promo-popup__discount {
    display: inline-block;
    padding: 0.4em 1em;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-radius: 6px;
    margin-bottom: 1.25rem;
  }

  .promo-popup__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }

  .promo-popup__input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--btn-radius, 6px);
    outline: none;
    transition: border-color 0.2s ease;
  }

  .promo-popup__input:focus {
    border-color: var(--color-primary);
  }

  .promo-popup__submit {
    width: 100%;
    padding: 0.8rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: var(--btn-letter-spacing, 0.04em);
    text-transform: var(--btn-transform, uppercase);
    color: var(--color-background);
    background: var(--color-primary);
    border: none;
    border-radius: var(--btn-radius, 6px);
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .promo-popup__submit:hover {
    opacity: 0.88;
  }

  .promo-popup__success {
    display: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    text-align: center;
    padding: 1rem 0;
  }

  .promo-popup__success.is-visible {
    display: block;
  }
</style>

{%- assign popup_enabled = settings.popup_enabled | default: false -%}
{%- unless popup_enabled -%}{%- break -%}{%- endunless -%}
{%- assign popup_heading = 'Get 10% Off Your First Order' -%}
{%- assign popup_subheading = 'Sign up for our newsletter and receive an exclusive discount code.' -%}
{%- assign popup_delay = 5 -%}
{%- assign popup_discount_code = '' -%}

<div
  class="promo-popup-overlay"
  data-promo-popup
  data-delay="{{ popup_delay }}"
  aria-hidden="true"
>
  <div class="promo-popup" role="dialog" aria-modal="true" aria-label="{{ popup_heading }}">
    <button type="button" class="promo-popup__close" data-promo-close aria-label="Close popup">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
      </svg>
    </button>

    <h2 class="promo-popup__heading">{{ popup_heading }}</h2>
    <p class="promo-popup__subheading">{{ popup_subheading }}</p>

    {%- if popup_discount_code != blank -%}
      <div class="promo-popup__discount">{{ popup_discount_code }}</div>
    {%- endif -%}

    {% form 'customer' %}
      <div class="promo-popup__form">
        <input type="hidden" name="contact[tags]" value="newsletter">
        <input
          type="email"
          name="contact[email]"
          class="promo-popup__input"
          placeholder="Enter your email"
          required
          autocomplete="email"
          aria-label="Email address"
        >
        <button type="submit" class="promo-popup__submit">Subscribe</button>
      </div>

      {%- if form.posted_successfully? -%}
        <p class="promo-popup__success is-visible">Thank you for subscribing!</p>
      {%- endif -%}

      {%- if form.errors -%}
        <p class="promo-popup__success is-visible" style="color: var(--color-error);">
          {{ form.errors | default_errors }}
        </p>
      {%- endif -%}
    {% endform %}
  </div>
</div>

<script>
  (function() {
    var overlay = document.querySelector('[data-promo-popup]');
    if (!overlay) return;

    var COOKIE_NAME = 'promo_popup_dismissed';
    var COOKIE_DAYS = 7;

    function getCookie(name) {
      var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
      return match ? match[2] : null;
    }

    function setCookie(name, value, days) {
      var d = new Date();
      d.setTime(d.getTime() + days * 86400000);
      document.cookie = name + '=' + value + ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
    }

    if (getCookie(COOKIE_NAME)) return;

    var delay = parseInt(overlay.getAttribute('data-delay'), 10) || 5;

    function openPopup() {
      overlay.classList.add('is-active');
      overlay.setAttribute('aria-hidden', 'false');
    }

    function closePopup() {
      overlay.classList.remove('is-active');
      overlay.setAttribute('aria-hidden', 'true');
      setCookie(COOKIE_NAME, '1', COOKIE_DAYS);
    }

    setTimeout(openPopup, delay * 1000);

    overlay.addEventListener('click', function(e) {
      if (e.target === overlay) closePopup();
    });

    var closeBtn = overlay.querySelector('[data-promo-close]');
    if (closeBtn) closeBtn.addEventListener('click', closePopup);

    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape' && overlay.classList.contains('is-active')) {
        closePopup();
      }
    });
  })();
</script>
