Store Locator

{%- comment -%}
  modblo, Store Locator
  Replaces Storemapper / Store Locator Plus / Storeify apps.
  No Google Maps API key required: this is a clean, searchable retailer
  directory. Each Retailer block has name, address, city, region, country,
  phone, hours, optional URL. Visitors filter by name/city/region in real
  time, all client-side.
{%- endcomment -%}

{%- if section.blocks.size > 0 -%}
<section class="modblo-loc" data-modblo-loc
         data-section-id="{{ section.id }}"
         style="--modblo-loc-bg: {{ section.settings.bg }};
                --modblo-loc-fg: {{ section.settings.fg }};
                --modblo-loc-accent: {{ section.settings.accent }};">
  <div class="modblo-loc__inner page-width">
    <header class="modblo-loc__head">
      {%- if section.settings.eyebrow != blank -%}
        <p class="modblo-loc__eyebrow">{{ section.settings.eyebrow }}</p>
      {%- endif -%}
      <h2 class="modblo-loc__h">{{ section.settings.heading | default: 'Find us in store' }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p class="modblo-loc__sub">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>

    <div class="modblo-loc__search">
      <span class="modblo-loc__search-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>
        </svg>
      </span>
      <input
        type="search"
        class="modblo-loc__input"
        placeholder="{{ section.settings.search_placeholder | default: 'Search city, region, or store name' }}"
        data-modblo-loc-input
        aria-label="Search retailers"
      >
      <span class="modblo-loc__count" data-modblo-loc-count>{{ section.blocks.size }}</span>
    </div>

    <ul class="modblo-loc__list" data-modblo-loc-list>
      {%- for block in section.blocks -%}
        {%- if block.type == 'retailer' -%}
          <li class="modblo-loc__item"
              data-modblo-loc-item
              data-name="{{ block.settings.name | downcase | escape }}"
              data-city="{{ block.settings.city | downcase | escape }}"
              data-region="{{ block.settings.region | downcase | escape }}"
              {{ block.shopify_attributes }}>
            <div class="modblo-loc__item-head">
              <h3 class="modblo-loc__item-name">{{ block.settings.name }}</h3>
              {%- if block.settings.tag != blank -%}
                <span class="modblo-loc__item-tag">{{ block.settings.tag }}</span>
              {%- endif -%}
            </div>

            {%- if block.settings.address != blank -%}
              <p class="modblo-loc__item-line">
                <span class="modblo-loc__item-icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 1 1 16 0z"/><circle cx="12" cy="10" r="3"/>
                  </svg>
                </span>
                {{ block.settings.address }}{% if block.settings.city != blank %}, {{ block.settings.city }}{% endif %}{% if block.settings.region != blank %}, {{ block.settings.region }}{% endif %}{% if block.settings.country != blank %}, {{ block.settings.country }}{% endif %}
              </p>
            {%- endif -%}

            {%- if block.settings.hours != blank -%}
              <p class="modblo-loc__item-line">
                <span class="modblo-loc__item-icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>
                  </svg>
                </span>
                {{ block.settings.hours }}
              </p>
            {%- endif -%}

            <div class="modblo-loc__item-actions">
              {%- if block.settings.phone != blank -%}
                <a href="tel:{{ block.settings.phone | replace: ' ', '' | replace: '-', '' }}" class="modblo-loc__item-link">
                  Call {{ block.settings.phone }}
                </a>
              {%- endif -%}
              {%- if block.settings.address != blank -%}
                {%- assign maps_q = block.settings.name | append: ', ' | append: block.settings.address | append: ' ' | append: block.settings.city | append: ' ' | append: block.settings.region | url_encode -%}
                <a href="https://www.google.com/maps/search/?api=1&query={{ maps_q }}" target="_blank" rel="noopener" class="modblo-loc__item-link modblo-loc__item-link--primary">
                  Get directions
                </a>
              {%- endif -%}
              {%- if block.settings.url != blank -%}
                <a href="{{ block.settings.url }}" target="_blank" rel="noopener" class="modblo-loc__item-link">
                  Visit website
                </a>
              {%- endif -%}
            </div>
          </li>
        {%- endif -%}
      {%- endfor -%}
    </ul>

    <p class="modblo-loc__empty" data-modblo-loc-empty hidden>
      No retailers match. Try a different search term.
    </p>
  </div>
</section>

<style>
  .modblo-loc { background: var(--modblo-loc-bg, #fff); color: var(--modblo-loc-fg, #0b0b0c); padding: clamp(48px, 6vw, 96px) 0; }
  .modblo-loc__inner { max-width: 960px; margin: 0 auto; padding: 0 24px; }

  .modblo-loc__head { text-align: center; margin-bottom: 32px; }
  .modblo-loc__eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 700; color: var(--modblo-loc-accent, #6366f1); margin: 0 0 12px; }
  .modblo-loc__h { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; margin: 0 0 12px; }
  .modblo-loc__sub { font-size: 15px; opacity: .65; max-width: 520px; margin: 0 auto; }

  .modblo-loc__search {
    position: relative;
    display: flex; align-items: center;
    background: color-mix(in oklab, var(--modblo-loc-fg) 4%, transparent);
    border: 1px solid color-mix(in oklab, var(--modblo-loc-fg) 12%, transparent);
    border-radius: 14px;
    padding: 4px 12px 4px 14px;
    margin-bottom: 24px;
  }
  .modblo-loc__search:focus-within { border-color: var(--modblo-loc-accent, #6366f1); }
  .modblo-loc__search-icon { display: grid; place-items: center; opacity: .55; flex-shrink: 0; }
  .modblo-loc__input {
    flex: 1; background: transparent; color: inherit; border: 0;
    padding: 14px 12px; font-size: 14px;
  }
  .modblo-loc__input:focus { outline: none; }
  .modblo-loc__count {
    background: color-mix(in oklab, var(--modblo-loc-fg) 8%, transparent);
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; opacity: .7;
    flex-shrink: 0;
  }

  .modblo-loc__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
  .modblo-loc__item {
    background: color-mix(in oklab, var(--modblo-loc-fg) 3%, transparent);
    border: 1px solid color-mix(in oklab, var(--modblo-loc-fg) 8%, transparent);
    border-radius: 14px;
    padding: 18px 20px;
    transition: border-color .2s;
  }
  .modblo-loc__item:hover { border-color: color-mix(in oklab, var(--modblo-loc-fg) 18%, transparent); }
  .modblo-loc__item[hidden] { display: none; }

  .modblo-loc__item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .modblo-loc__item-name { font-size: 16px; font-weight: 600; margin: 0; }
  .modblo-loc__item-tag {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    background: color-mix(in oklab, var(--modblo-loc-accent, #6366f1) 15%, transparent);
    color: var(--modblo-loc-accent, #6366f1);
    padding: 3px 8px; border-radius: 6px;
  }

  .modblo-loc__item-line {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0 0 6px; font-size: 13px; opacity: .75; line-height: 1.5;
  }
  .modblo-loc__item-icon { padding-top: 3px; flex-shrink: 0; }

  .modblo-loc__item-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid color-mix(in oklab, var(--modblo-loc-fg) 6%, transparent);
  }
  .modblo-loc__item-link {
    color: inherit; text-decoration: none;
    font-size: 12px; font-weight: 600;
    padding: 7px 12px; border-radius: 8px;
    background: color-mix(in oklab, var(--modblo-loc-fg) 6%, transparent);
    transition: background .2s;
  }
  .modblo-loc__item-link:hover { background: color-mix(in oklab, var(--modblo-loc-fg) 12%, transparent); }
  .modblo-loc__item-link--primary {
    background: var(--modblo-loc-accent, #6366f1); color: #fff;
  }
  .modblo-loc__item-link--primary:hover { background: var(--modblo-loc-accent, #6366f1); opacity: .92; }

  .modblo-loc__empty { text-align: center; padding: 32px 0; opacity: .6; }
</style>

<script>
  (function () {
    var root = document.querySelector('[data-modblo-loc][data-section-id="{{ section.id }}"]');
    if (!root) return;

    var input = root.querySelector('[data-modblo-loc-input]');
    var items = Array.from(root.querySelectorAll('[data-modblo-loc-item]'));
    var count = root.querySelector('[data-modblo-loc-count]');
    var empty = root.querySelector('[data-modblo-loc-empty]');

    function filter() {
      var q = (input.value || '').trim().toLowerCase();
      var visible = 0;
      items.forEach(function (item) {
        var match = !q ||
          item.dataset.name.indexOf(q) >= 0 ||
          item.dataset.city.indexOf(q) >= 0 ||
          item.dataset.region.indexOf(q) >= 0;
        item.hidden = !match;
        if (match) visible++;
      });
      count.textContent = visible;
      empty.hidden = visible > 0;
    }

    input.addEventListener('input', filter);
  })();
</script>
{%- endif -%}

{% schema %}
{
  "name": "Store Locator",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Heading" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Stockists" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Find us in store" },
    { "type": "text", "id": "subheading", "label": "Subheading", "default": "Search by city, region, or store name." },
    { "type": "text", "id": "search_placeholder", "label": "Search placeholder", "default": "Search city, region, or store name" },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" }
  ],
  "blocks": [
    {
      "type": "retailer",
      "name": "Retailer",
      "settings": [
        { "type": "text", "id": "name", "label": "Store name" },
        { "type": "text", "id": "tag", "label": "Tag (optional)", "info": "e.g. 'Flagship', 'Pop-up'" },
        { "type": "text", "id": "address", "label": "Address" },
        { "type": "text", "id": "city", "label": "City" },
        { "type": "text", "id": "region", "label": "Region / State" },
        { "type": "text", "id": "country", "label": "Country" },
        { "type": "text", "id": "phone", "label": "Phone" },
        { "type": "text", "id": "hours", "label": "Hours" },
        { "type": "url", "id": "url", "label": "Website" }
      ]
    }
  ],
  "presets": [{
    "name": "Store Locator",
    "blocks": [
      { "type": "retailer", "settings": { "name": "Northcoast Flagship", "tag": "Flagship", "address": "118 Spring St", "city": "New York", "region": "NY", "country": "USA", "phone": "+1 212 555 0118", "hours": "Mon–Sat 11–7, Sun 12–6" } },
      { "type": "retailer", "settings": { "name": "Atelier Brooklyn", "address": "55 N 6th St", "city": "Brooklyn", "region": "NY", "country": "USA", "phone": "+1 718 555 0055", "hours": "Tue–Sun 11–7" } },
      { "type": "retailer", "settings": { "name": "Northcoast Austin", "address": "1801 S Lamar Blvd", "city": "Austin", "region": "TX", "country": "USA", "phone": "+1 512 555 0180", "hours": "Mon–Sun 11–8" } }
    ]
  }]
}
{% endschema %}