{% comment %}
  Custom Features/Icon Grid Section for Shopify
  Figma Design: 4 Columns, Responsive, Dynamic Icons & Text
{% endcomment %}

<style>
  .features-grid-section-{{ section.id }} {
    padding: 60px 20px;
  }

  .features-grid-container {
    max-width: {{ section.settings.container_width }}px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
    background-color: #FFFBEB;
    padding-top:31px;
    padding-bottom:31px;
    border-radius:30px;

  }

  .feature-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .feature-icon-wrapper {
    width: 75px;
    height:75px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .feature-icon-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Optional: Icon color tint if needed */
  }

  .feature-icon-wrapper svg {
    width: 45px;
    height: 45px;
    fill: #e67e22; /* Default Orange from Figma */
  }

  .feature-heading {
    font-family: 'Inter';
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: -0.44px;
    text-align: center;
    color:#101828;
    margin:17px 0px 7px 0px;

  }

  .feature-subtext {
    font-family: 'Inter';
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
    text-align: center;
    color:#4A5565;

  }

  /* Responsive Design */
  @media screen and (max-width: 990px) {
    .features-grid-container {
      grid-template-columns: repeat(2, 1fr);
      gap:20px 20px;
    }
  }

  @media screen and (max-width: 480px) {
    .features-grid-container {
      grid-template-columns: 1fr;
      padding: 0 10px;
    }
    .features-grid-section-{{ section.id }} {
      padding: 40px 10px;
    }
  }
</style>

<section class="features-grid-section-{{ section.id }}">
  <div class="features-grid-container">
    {% for block in section.blocks %}
      <div class="feature-block" {{ block.shopify_attributes }}>
        
        <div class="feature-icon-wrapper">
          {% if block.settings.icon_image != blank %}
            <img src="{{ block.settings.icon_image | img_url: '100x' }}" 
                 alt="{{ block.settings.title }}"
                 loading="lazy">
          {% else %}
            {% comment %} Default Placeholder Icon {% endcomment %}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
        </div>

        {% if block.settings.title != blank %}
          <h3 class="feature-heading">{{ block.settings.title }}</h3>
        {% endif %}

        {% if block.settings.text != blank %}
          <p class="feature-subtext">{{ block.settings.text }}</p>
        {% endif %}

      </div>
    {% endfor %}
  </div>
</section>

{% schema %}
{
  "name": "Custom Features Grid",
  "settings": [
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#fdfaf0"
    },
    {
      "type": "range",
      "id": "container_width",
      "min": 800,
      "max": 1600,
      "step": 50,
      "unit": "px",
      "label": "Max Container Width",
      "default": 1200
    }
  ],
  "blocks": [
    {
      "type": "feature_item",
      "name": "Feature",
      "limit": 5,
      "settings": [
        {
          "type": "image_picker",
          "id": "icon_image",
          "label": "Icon Image (PNG/SVG)"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Free Shipping"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Sub-text",
          "default": "On orders over $500"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Features Grid",
      "blocks": [
        { "type": "feature_item", "settings": { "title": "Free Shipping", "text": "On orders over $500" } },
        { "type": "feature_item", "settings": { "title": "Easy Returns", "text": "30-day return policy" } },
        { "type": "feature_item", "settings": { "title": "Secure Payment", "text": "100% secure transactions" } },
        { "type": "feature_item", "settings": { "title": "24/7 Support", "text": "Dedicated customer service" } }
      ]
    }
  ]
}
{% endschema %}