<section class="featured-boxes animate-section animate--hidden {{ section.settings.visibility }}">
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}
  <div class="featured-boxes__container">
    <div class="featured-boxes__grid">
      {% for block in section.blocks %}
        <div class="featured-box animate-item animate-item" {{ block.shopify_attributes }}>
          {% if block.settings.image %}
            <div class="featured-box__image-container">
              {% if block.settings.badge_text != blank %}
                <div class="featured-box__badge badge--{{ section.settings.badge_position }}">
                  {{ block.settings.badge_text }}
                </div>
              {% endif %}
              {% if block.settings.button_link != blank %}
                <a href="{{ block.settings.button_link }}">
              {% endif %}
                <img
                  class="featured-box__image"
                  src="{{ block.settings.image | image_url: width: 600 }}"
                  alt="{{ block.settings.image.alt | default: block.settings.title }}"
                  loading="lazy"
                >
              {% if block.settings.button_link != blank %}
                </a>
              {% endif %}
            </div>
          {% else %}
            <div class="featured-box__image-container">
              {% if block.settings.button_link != blank %}
                <a href="{{ block.settings.button_link }}">
              {% endif %}
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg featured-box__image' }}
              {% if block.settings.button_link != blank %}
                </a>
              {% endif %}
            </div>
          {% endif %}

          <div class="featured-box__content">
            {% if block.settings.price != blank or block.settings.compare_price != blank %}
              <div class="featured-box__price">
                {% if block.settings.compare_price != blank %}
                  <span class="featured-box__price--crossed">{{ block.settings.compare_price }}</span>
                {% endif %}
                {% if block.settings.price != blank %}
                  <span class="featured-box__price--sale">{{ block.settings.price }}</span>
                {% endif %}
              </div>
            {% endif %}

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

            {% if block.settings.description != blank %}
              <p class="featured-box__description">{{ block.settings.description }}</p>
            {% endif %}

            {% if block.settings.button_text != blank %}
              {% if block.settings.button_link != blank %}
                <a href="{{ block.settings.button_link }}" class="featured-box__button">
                  {{ block.settings.button_text }}
                </a>
              {% else %}
                <span class="featured-box__button featured-box__button--disabled">
                  {{ block.settings.button_text }}
                </span>
              {% endif %}
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

{%- style -%}
      .featured-boxes {
        padding: {{ section.settings.section_padding_top }}px 0 {{ section.settings.section_padding_bottom }}px;
        background-color: {{ section.settings.background_color }};
      }

      .featured-boxes__container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
      }

      .featured-boxes__grid {
        display: grid;
        gap: 30px;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      }

      @media (min-width: 768px) {
        .featured-boxes__grid {
          grid-template-columns: repeat({{ section.settings.desktop_columns }}, 1fr);
        }
      }

      @media (max-width: 767px) {
        .featured-boxes__grid {
          grid-template-columns: repeat({{ section.settings.mobile_columns }}, 1fr);
          gap: 20px;
        }
      }

      .featured-box {
        position: relative;
        background: {{ section.settings.box_background_color }};
        border-radius: {{ section.settings.box_border_radius }}px;
        box-shadow: {{ section.settings.box_shadow }};
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .featured-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
      }

      .featured-box__image-container {
        position: relative;
        width: 100%;
        overflow: hidden;
      }

      .featured-box__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }

      .featured-box:hover .featured-box__image {
        transform: scale(1.05);
      }

      .featured-box__badge {
        position: absolute;
        background: {{ section.settings.badge_background_color }};
        color: {{ section.settings.badge_text_color }};
        padding: 8px 20px;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 120px;
        z-index: 2;
      }

      .featured-box__content {
        padding: 25px 20px;
        text-align: center;
      }

      .featured-box__price {
      font-size: {{ section.settings.price_font_size }}px;
      color: {{ section.settings.price_color_crossed }};
      margin-bottom: 5px;
    }

      .featured-box__price--crossed {
        text-decoration: line-through;
        margin-right: 8px;
      }

      .featured-box__price--sale {
        color: {{ section.settings.price_color }};
        font-weight: 600;
      }

      .featured-box__title {
        font-size: 24px;
        font-weight: 600;
        color: {{ section.settings.title_color }};
        margin: 10px 0;
        line-height: 1.3;
      }

      .featured-box__description {
        font-size: 14px;
        color: {{ section.settings.text_color }};
        line-height: 1.5;
        margin-bottom: 20px;
      }

      .featured-box__button {
        display: inline-block;
        background: {{ section.settings.button_background_color }};
        color: {{ section.settings.button_text_color }};
        padding: 12px 24px;
        border: none;
        border-radius: {{ section.settings.button_border_radius }}px;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        cursor: pointer;
      }

      .featured-box__button:hover {
        background: {{ section.settings.button_hover_color }};
        transform: translateY(-2px);
      }

      @media (max-width: 767px) {


        .featured-box__content {
          padding: 20px 15px;
          text-align: center;
        }

        .featured-box__title {
          font-size: 20px;
        }
      }
    .featured-box__badge.badge--top-left {
    top: 0;
    left: 0;
  }

  .featured-box__badge.badge--top-right {
    top: 0;
    right: 0;
    left: auto;
  }

  .featured-box__badge.badge--bottom-left {
    bottom: 0;
    left: 0;
    top: auto;
  }

  .featured-box__badge.badge--bottom-right {
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
  }
{%- endstyle -%}

{% schema %}
{
  "name": "Product/collection boxes",
  "tag": "section",
  "class": "section-featured-boxes",
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID can be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "always-display",
          "label": "All devices"
        }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Layout Settings"
    },
    {
      "type": "select",
      "id": "desktop_columns",
      "options": [
        {
          "value": "2",
          "label": "2 columns"
        },
        {
          "value": "3",
          "label": "3 columns"
        }
      ],
      "default": "2",
      "label": "Desktop columns"
    },
    {
      "type": "select",
      "id": "mobile_columns",
      "options": [
        {
          "value": "1",
          "label": "1 column"
        }
      ],
      "default": "1",
      "label": "Mobile column"
    },
    {
      "type": "header",
      "content": "Settings"
    },
    {
      "type": "color",
      "id": "background_color",
      "default": "#ffffff",
      "label": "Section background"
    },
    {
      "type": "color",
      "id": "box_background_color",
      "default": "#ffffff",
      "label": "Box background"
    },
    {
      "type": "color",
      "id": "title_color",
      "default": "#333333",
      "label": "Title color"
    },
    {
      "type": "color",
      "id": "text_color",
      "default": "#666666",
      "label": "Text color"
    },
    {
      "type": "color",
      "id": "price_color",
      "default": "#d32f2f",
      "label": "Price color"
    },
    {
      "type": "color",
      "id": "price_color_crossed",
      "default": "#666",
      "label": "Crossed out price color"
    },
    {
      "type": "range",
      "id": "price_font_size",
      "min": 16,
      "max": 20,
      "step": 1,
      "default": 16,
      "label": "Price font size"
    },
    {
      "type": "color",
      "id": "badge_background_color",
      "default": "#d32f2f",
      "label": "Badge background"
    },
    {
      "type": "color",
      "id": "badge_text_color",
      "default": "#ffffff",
      "label": "Badge text color"
    },
    {
  "type": "select",
  "id": "badge_position",
  "label": "Badge position",
  "default": "top-left",
  "options": [
    { "value": "top-left", "label": "Top Left" },
    { "value": "top-right", "label": "Top Right" },
    { "value": "bottom-left", "label": "Bottom Left" },
    { "value": "bottom-right", "label": "Bottom Right" }
  ]
    },
    {
      "type": "color",
      "id": "button_background_color",
      "default": "#7cb342",
      "label": "Button background"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "default": "#ffffff",
      "label": "Button text"
    },
    {
      "type": "color",
      "id": "button_hover_color",
      "default": "#689f35",
      "label": "Button hover color"
    },
    {
      "type": "header",
      "content": "Style Settings"
    },
    {
      "type": "range",
      "id": "box_border_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 8,
      "label": "Box border radius"
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 4,
      "label": "Button border radius"
    },
    {
      "type": "select",
      "id": "box_shadow",
      "options": [
        {
          "value": "0 2px 10px rgba(0,0,0,0.1)",
          "label": "Light shadow"
        },
        {
          "value": "0 4px 20px rgba(0,0,0,0.15)",
          "label": "Medium shadow"
        },
        {
          "value": "0 8px 30px rgba(0,0,0,0.2)",
          "label": "Strong shadow"
        },
        {
          "value": "none",
          "label": "No shadow"
        }
      ],
      "default": "0 4px 20px rgba(0,0,0,0.15)",
      "label": "Box shadow"
    },
    {
      "type": "header",
      "content": "Section Spacing"
    },
    {
      "type": "range",
      "id": "section_padding_top",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 50,
      "label": "Top padding"
    },
    {
      "type": "range",
      "id": "section_padding_bottom",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 50,
      "label": "Bottom padding"
    }
  ],
  "blocks": [
    {
      "type": "featured_item",
      "name": "Featured Item",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "badge_text",
          "label": "Badge text (optional)",
          "placeholder": "BEST VALUE, SAVE 20%"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Featured Item"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Description",
          "placeholder": "Add your description here..."
        },
        {
          "type": "text",
          "id": "price",
          "label": "Price (optional)",
          "placeholder": "$X"
        },
        {
          "type": "text",
          "id": "compare_price",
          "label": "Compare at price (optional)",
          "placeholder": "$X"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product/collection boxes",
      "category": "Product",
      "blocks": [
        {
          "type": "featured_item",
          "settings": {
            "title": "Title",
            "description": "Save 20% on Collection/Product name",
            "button_text": "Shop Now",
            "badge_text": "BEST VALUE, SAVE 20%",
            "compare_price": "$X",
            "price": "$X"
          }
        },
        {
          "type": "featured_item",
          "settings": {
            "title": "Title",
            "description": "",
            "button_text": "Shop Now",
            "price": "$X"
          }
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  }
}
{% endschema %}
