{# Import smart link macro for intelligent URL handling #}
{% import "../../includes/macros/smart-link.html" as links %}

{% set c = module.content %}
{% set g = module.grid %}
{% set is = module.icon_style %}
{% set cs = module.card_style %}
{% set colors = module.colors %}
{% set spacing = module.spacing %}
{% set a = module.advanced %}

{# Build CSS classes #}
{% set module_classes = "icon-grid" %}
{% set module_classes = module_classes ~ " icon-grid--align-" ~ g.text_alignment %}
{% set module_classes = module_classes ~ " icon-grid--" ~ cs.variant %}
{% if cs.hover_effect %}
  {% set module_classes = module_classes ~ " icon-grid--hover" %}
{% endif %}
{% if a.custom_class %}
  {% set module_classes = module_classes ~ " " ~ a.custom_class %}
{% endif %}

<section class="{{ module_classes }}"
         {% if a.custom_id %}id="{{ a.custom_id }}"{% endif %}
         style="
           --ig-cols-mobile: {{ g.cols_mobile }};
           --ig-cols-tablet: {{ g.cols_tablet }};
           --ig-cols-desktop: {{ g.cols_desktop }};
           --ig-gap: {{ g.gap }};
           --ig-icon-size: {{ is.size }};
           --ig-icon-color: {{ is.color.color }};
           --ig-icon-bg: {{ is.background_color.color }};
           --ig-heading: {{ colors.heading_color.color }};
           --ig-title: {{ colors.title_color.color }};
           --ig-desc: {{ colors.description_color.color }};
           --ig-link: {{ colors.link_color.color }};
           --ig-pt: {{ spacing.padding_top }};
           --ig-pb: {{ spacing.padding_bottom }};
           {% if cs.variant != 'flat' %}
           --ig-card-padding: {{ cs.padding }};
           --ig-card-radius: {{ cs.border_radius }};
           {% endif %}
         ">

  {# Section Header #}
  {% if c.section_heading or c.section_subheading %}
    <header class="icon-grid__header">
      {% if c.section_heading %}
        <h2 class="icon-grid__heading">{{ c.section_heading|escape }}</h2>
      {% endif %}
      {% if c.section_subheading %}
        <p class="icon-grid__subheading">{{ c.section_subheading|escape }}</p>
      {% endif %}
    </header>
  {% endif %}

  {# Grid #}
  <div class="icon-grid__grid">
    {% for item in c.items %}
      {% set item_tag = item.link_url.href ? 'a' : 'div' %}
      <{{ item_tag }} class="icon-grid__item{% if is.background %} icon-grid__item--icon-bg icon-grid__item--icon-{{ is.background_shape }}{% endif %}"
                      {% if item.link_url.href %}href="{{ item.link_url.href }}" {{ links.attrs(item.link_url.href) }}{% endif %}>

        {# Icon #}
        <div class="icon-grid__icon" aria-hidden="true">
          {% if item.icon_type == "emoji" %}
            <span class="icon-grid__emoji">{{ item.icon_emoji }}</span>
          {% elif item.icon_type == "svg" and item.icon_svg %}
            <span class="icon-grid__svg">{{ item.icon_svg }}</span>
          {% elif item.icon_type == "image" and item.icon_image and item.icon_image.src %}
            {% set icon_src = item.icon_image.src %}
            {% if '../../images/' in icon_src %}
              {% set icon_src = get_asset_url(icon_src) %}
            {% endif %}
            <img src="{{ icon_src }}"
                 alt=""
                 width="{{ item.icon_image.width|default(64) }}"
                 height="{{ item.icon_image.height|default(64) }}"
                 loading="lazy"
                 decoding="async"
                 class="icon-grid__img">
          {% endif %}
        </div>

        {# Content #}
        <h3 class="icon-grid__title">{{ item.title|escape }}</h3>

        {% if item.description %}
          <p class="icon-grid__description">{{ item.description|escape }}</p>
        {% endif %}

        {% if item.link_text and not item.link_url %}
          {# Link text without URL - just show as text #}
        {% elif item.link_text and item.link_url %}
          <span class="icon-grid__link-text">{{ item.link_text|escape }} →</span>
        {% endif %}
      </{{ item_tag }}>
    {% endfor %}
  </div>
</section>

{% require_css %}
<style>
  .icon-grid {
    padding: var(--ig-pt, 48px) 0 var(--ig-pb, 48px);
  }

  /* Section Header */
  .icon-grid__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
  }

  .icon-grid__heading {
    color: var(--ig-heading, var(--color-text, #111827));
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
  }

  .icon-grid__subheading {
    color: var(--ig-desc, #6b7280);
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0;
  }

  /* Grid */
  .icon-grid__grid {
    display: grid;
    grid-template-columns: repeat(var(--ig-cols-mobile, 1), 1fr);
    gap: var(--ig-gap, 24px);
  }

  @media (min-width: 640px) {
    .icon-grid__grid {
      grid-template-columns: repeat(var(--ig-cols-tablet, 2), 1fr);
    }
  }

  @media (min-width: 1024px) {
    .icon-grid__grid {
      grid-template-columns: repeat(var(--ig-cols-desktop, 3), 1fr);
    }
  }

  /* Item */
  .icon-grid__item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* Alignment */
  .icon-grid--align-center .icon-grid__item {
    align-items: center;
    text-align: center;
  }

  .icon-grid--align-left .icon-grid__item {
    align-items: flex-start;
    text-align: left;
  }

  /* Card variants */
  .icon-grid--card .icon-grid__item {
    background: var(--color-bg-secondary, #fff);
    padding: var(--ig-card-padding, 24px);
    border-radius: var(--ig-card-radius, 12px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  }

  .icon-grid--bordered .icon-grid__item {
    background: var(--color-bg-secondary, #fff);
    padding: var(--ig-card-padding, 24px);
    border-radius: var(--ig-card-radius, 12px);
    border: 1px solid rgba(127, 131, 139, 0.35);
  }

  /* Hover effect */
  .icon-grid--hover .icon-grid__item:hover {
    transform: translateY(-4px);
  }

  .icon-grid--hover.icon-grid--card .icon-grid__item:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  }

  .icon-grid--hover.icon-grid--bordered .icon-grid__item:hover {
    border-color: var(--ig-icon-color, var(--color-primary, #3b82f6));
  }

  /* Icon */
  .icon-grid__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ig-icon-size, 48px);
    height: var(--ig-icon-size, 48px);
    margin-bottom: 1rem;
    flex-shrink: 0;
  }

  /* Icon with background */
  .icon-grid__item--icon-bg .icon-grid__icon {
    width: calc(var(--ig-icon-size, 48px) * 1.5);
    height: calc(var(--ig-icon-size, 48px) * 1.5);
    background: var(--ig-icon-bg, #eff6ff);
  }

  .icon-grid__item--icon-circle .icon-grid__icon {
    border-radius: 50%;
  }

  .icon-grid__item--icon-square .icon-grid__icon {
    border-radius: 0;
  }

  .icon-grid__item--icon-rounded .icon-grid__icon {
    border-radius: 12px;
  }

  .icon-grid__emoji {
    font-size: var(--ig-icon-size, 48px);
    line-height: 1;
  }

  .icon-grid__svg {
    display: flex;
    width: var(--ig-icon-size, 48px);
    height: var(--ig-icon-size, 48px);
    color: var(--ig-icon-color, var(--color-primary, #3b82f6));
  }

  .icon-grid__svg svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .icon-grid__img {
    width: var(--ig-icon-size, 48px);
    height: var(--ig-icon-size, 48px);
    object-fit: contain;
  }

  /* Title */
  .icon-grid__title {
    color: var(--ig-title, var(--color-text, #111827));
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.5rem;
  }

  /* Description */
  .icon-grid__description {
    color: var(--ig-desc, #6b7280);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
  }

  /* Link text */
  .icon-grid__link-text {
    color: var(--ig-link, var(--color-primary, #3b82f6));
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  a.icon-grid__item:hover .icon-grid__link-text {
    text-decoration: underline;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .icon-grid__item {
      transition: none;
    }
  }

  /* Print */
  @media print {
    .icon-grid {
      padding: 1rem 0;
    }

    .icon-grid__grid {
      display: block;
    }

    .icon-grid__item {
      display: inline-block;
      width: 30%;
      vertical-align: top;
      margin: 0.5rem;
    }
  }

  /* Dark mode support */
  {% if theme.dark_mode.enabled %}
  @media (prefers-color-scheme: dark) {
    .icon-grid--card .icon-grid__item,
    .icon-grid--bordered .icon-grid__item {
      background: var(--color-bg-secondary);
    }

    .icon-grid--bordered .icon-grid__item {
      border-color: var(--color-border);
    }

    /* The old block only patched backgrounds — titles/desc stayed near-black. */
    .icon-grid__heading,
    .icon-grid__title {
      color: var(--color-text);
    }

    .icon-grid__subheading,
    .icon-grid__description {
      color: var(--color-text-secondary);
    }
  }
  {% endif %}
</style>
{% end_require_css %}