{% comment %} nc-bobbie-formula-finder — guided-selling selector for baby formula collection. {% endcomment %}
{{ 'nc-bobbie-collection.css' | asset_url | stylesheet_tag }}

<section
  class="nc-bobbie-formula-finder nc-bobbie-collection-scope"
  id="nc-formula-finder-{{ section.id }}"
  data-section-id="{{ section.id }}"
>
  <div class="nc-bobbie-formula-finder__wrap">
    <div class="nc-bobbie-formula-finder__top">
      <div class="nc-bobbie-formula-finder__head">
        {% if section.settings.eyebrow != blank %}
          <span class="nc-bobbie-collection-eyebrow">{{ section.settings.eyebrow }}</span>
        {% endif %}
        <h2>{{ section.settings.heading | default: 'Which formula fits your baby?' }}</h2>
        <p>{{ section.settings.subheading }}</p>
      </div>
      <div class="nc-bobbie-formula-finder__imgs" aria-hidden="true">
        {% if section.settings.image_1 != blank %}
          <figure>{{ section.settings.image_1 | image_url: width: 400 | image_tag: loading: 'lazy', alt: section.settings.image_1_alt }}</figure>
        {% endif %}
        {% if section.settings.image_2 != blank %}
          <figure>{{ section.settings.image_2 | image_url: width: 400 | image_tag: loading: 'lazy', alt: section.settings.image_2_alt }}</figure>
        {% endif %}
        {% if section.settings.image_3 != blank %}
          <figure>{{ section.settings.image_3 | image_url: width: 400 | image_tag: loading: 'lazy', alt: section.settings.image_3_alt }}</figure>
        {% endif %}
      </div>
    </div>

    <div class="nc-bobbie-formula-finder__panel">
      <p class="nc-bobbie-formula-finder__label">{{ section.settings.prompt_label | default: 'Which describes your baby?' }}</p>
      <div class="nc-bobbie-formula-finder__toggles" role="group" aria-label="{{ section.settings.prompt_label }}" data-finder-toggles>
        {% for block in section.blocks %}
          <button
            type="button"
            class="nc-bobbie-formula-finder__toggle"
            data-filter="{{ block.settings.filter_key }}"
            data-match-copy="{{ block.settings.match_copy | escape }}"
            {{ block.shopify_attributes }}
          >
            {{ block.settings.label }}
            {% if block.settings.hint != blank %}<small>{{ block.settings.hint }}</small>{% endif %}
          </button>
        {% endfor %}
      </div>
      <div class="nc-bobbie-formula-finder__result" data-finder-result>
        <p class="nc-bobbie-formula-finder__match" data-finder-match></p>
        <a href="#nc-collection-grid" class="nc-bobbie-collection-btn nc-bobbie-collection-btn--primary nc-bobbie-formula-finder__cta">
          {{ section.settings.cta_label | default: 'See matched formulas' }}
        </a>
      </div>
    </div>
  </div>
</section>

<script>
(function() {
  var root = document.getElementById('nc-formula-finder-{{ section.id }}');
  if (!root) return;
  var toggles = root.querySelectorAll('[data-finder-toggles] .nc-bobbie-formula-finder__toggle');
  var result = root.querySelector('[data-finder-result]');
  var matchEl = root.querySelector('[data-finder-match]');
  var activeFilter = null;

  function applyFilter(key, copy) {
    activeFilter = key;
    toggles.forEach(function(btn) {
      btn.classList.toggle('is-active', btn.dataset.filter === key);
    });
    if (result && matchEl) {
      matchEl.innerHTML = copy || '';
      result.classList.add('is-visible');
    }
    document.querySelectorAll('[data-formula-tags]').forEach(function(card) {
      var tags = (card.dataset.formulaTags || '').split(',');
      var match = !key || tags.indexOf(key) !== -1;
      card.classList.toggle('is-dimmed', !!key && !match);
      card.classList.toggle('is-highlighted', !!key && match);
    });
    var grid = document.getElementById('nc-collection-grid');
    if (grid && key) grid.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }

  toggles.forEach(function(btn) {
    btn.addEventListener('click', function() {
      var key = btn.dataset.filter;
      if (activeFilter === key) {
        applyFilter(null, '');
        result.classList.remove('is-visible');
        document.querySelectorAll('[data-formula-tags]').forEach(function(card) {
          card.classList.remove('is-dimmed', 'is-highlighted');
        });
        toggles.forEach(function(b) { b.classList.remove('is-active'); });
        return;
      }
      applyFilter(key, btn.dataset.matchCopy);
    });
  });
})();
</script>

{% schema %}
{
  "name": "NC Bobbie Formula Finder",
  "tag": "section",
  "class": "nc-bobbie-formula-finder-section",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Formula Finder" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Which formula fits your baby?" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Answer one quick question and we'll highlight the Bobbie recipes built for your feeding journey — sensitive tummies, combo feeding, and every stage from newborn to year one." },
    { "type": "text", "id": "prompt_label", "label": "Prompt label", "default": "Which describes your baby?" },
    { "type": "text", "id": "cta_label", "label": "CTA label", "default": "See matched formulas" },
    { "type": "image_picker", "id": "image_1", "label": "Lifestyle image 1" },
    { "type": "text", "id": "image_1_alt", "label": "Image 1 alt", "default": "Parent bottle-feeding newborn" },
    { "type": "image_picker", "id": "image_2", "label": "Lifestyle image 2" },
    { "type": "text", "id": "image_2_alt", "label": "Image 2 alt", "default": "Combo feeding with breast and bottle" },
    { "type": "image_picker", "id": "image_3", "label": "Lifestyle image 3" },
    { "type": "text", "id": "image_3_alt", "label": "Image 3 alt", "default": "Baby feeding from bottle" }
  ],
  "blocks": [
    {
      "type": "scenario",
      "name": "Scenario toggle",
      "settings": [
        { "type": "text", "id": "label", "label": "Button label" },
        { "type": "text", "id": "hint", "label": "Hint line" },
        { "type": "text", "id": "filter_key", "label": "Filter key (sensitive, combo, breastmilk, bottle, newborn, older)" },
        { "type": "textarea", "id": "match_copy", "label": "Match result copy (supports <strong>)" }
      ]
    }
  ],
  "presets": [
    {
      "name": "NC Bobbie Formula Finder",
      "blocks": [
        { "type": "scenario", "settings": { "label": "Sensitive digestion", "hint": "Gas, fussiness, or tummy troubles", "filter_key": "sensitive", "match_copy": "<strong>Sensitive tummies</strong> → Organic Gentle® with partially hydrolyzed protein for easier digestion." } },
        { "type": "scenario", "settings": { "label": "Combo feeding", "hint": "Breast milk + formula together", "filter_key": "combo", "match_copy": "<strong>Combo feeders</strong> → Organic Whole Milk or Organic Infant Formula — both designed to supplement breastfeeding." } },
        { "type": "scenario", "settings": { "label": "Closest to breast milk", "hint": "Full cream, whey-forward nutrition", "filter_key": "breastmilk", "match_copy": "<strong>Closest to breast milk</strong> → Organic Whole Milk Infant Formula with USDA organic grass-fed whole milk." } },
        { "type": "scenario", "settings": { "label": "Exclusively bottle-feeding", "hint": "Formula as primary nutrition", "filter_key": "bottle", "match_copy": "<strong>Bottle-first families</strong> → Grass-fed Whole Milk or Organic Infant Formula for complete day-one nutrition." } },
        { "type": "scenario", "settings": { "label": "Newborn (0–6 months)", "hint": "Birth through first half-year", "filter_key": "newborn", "match_copy": "<strong>Newborn stage</strong> → All four Bobbie recipes are complete nutrition from birth through 12 months." } }
      ]
    }
  ]
}
{% endschema %}