{%- comment -%}
  LinumIQ Features Section
  Displays the main value propositions in a 3-column grid.
{%- endcomment -%}

{%- style -%}
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

  .linumiq-features-{{ section.id }} {
    /* Typography Scale */
    --font-main: 'Inter', sans-serif;
    --font-heading: 'Roboto', sans-serif;

    --text-base: 1rem;
    --text-lg: clamp(1.25rem, 3vw + 0.5rem, 1.5rem);
    --text-xl: clamp(1.5rem, 3vw + 0.5rem, 2.0rem);
    --text-2xl: clamp(2rem, 5vw + 1rem, 2.5rem);
    --text-3xl: clamp(2.5rem, 5vw + 1rem, 3.0rem);

    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
    font-family: var(--font-main);
    border-top: 1px solid rgba(var(--color-foreground), 0.08);
    border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
  }

  .lq-feat-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  .lq-feat-header {
    text-align: center;
    margin-bottom: 4rem;
  }

  .lq-feat-h2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
    color: rgb(var(--color-foreground));
  }

  .lq-feat-subtitle {
    font-size: var(--text-lg);
    color: rgba(var(--color-foreground), 0.75);
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
  }

  .lq-feat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  @media (min-width: 768px) {
    .lq-feat-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .lq-feat-card {
    border: 1px solid rgba(var(--color-foreground), 0.1);
    border-radius: 1rem;
    padding: 2rem;
    transition: transform 0.3s ease;
  }

  .lq-feat-card:hover {
    transform: translateY(-0.5rem);
  }

  .lq-feat-icon-wrapper {
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    background-color: rgba(var(--color-foreground), 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(var(--color-foreground), 0.1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  .lq-icon-orange { color: {{ section.settings.icon_color_accent }}; }
  .lq-icon-blue { color: rgb(var(--color-button)); }

  .lq-feat-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1rem;
    color: rgb(var(--color-foreground));
  }

  .lq-feat-desc {
    color: rgba(var(--color-foreground), 0.75);
    font-size: var(--text-lg);
    /*line-height: 1.6;*/
    margin: 0;
  }
{%- endstyle -%}

<div class="linumiq-features-{{ section.id }} color-{{ section.settings.color_scheme }} gradient">
  <div class="lq-feat-container">
    <div class="lq-feat-header">
      <h2 class="lq-feat-h2">{{ section.settings.heading }}</h2>
      <p class="lq-feat-subtitle">{{ section.settings.subtitle }}</p>
    </div>

    <div class="lq-feat-grid">
      {%- for block in section.blocks -%}
        <div class="lq-feat-card" {{ block.shopify_attributes }}>
          <div class="lq-feat-icon-wrapper">
            {%- case block.settings.icon -%}
              {%- when 'zap' -%}
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lq-icon-orange"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
              {%- when 'wifi_off' -%}
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lq-icon-blue">
  <defs>
    <mask id="slash-cutout">
      <rect width="24" height="24" fill="white" />
      <line x1="2" y1="2" x2="22" y2="22" stroke="black" stroke-width="6" />
    </mask>
  </defs>

  <g mask="url(#slash-cutout)">
    <path d="M1.42 9a16 16 0 0 1 21.16 0" />
    <path d="M5 12.55a11 11 0 0 1 14.08 0" />
    <path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
    <path d="M12 20h.01" />
  </g>

  <line x1="2" y1="2" x2="22" y2="22" />
</svg>
              {%- when 'shield' -%}
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lq-icon-blue"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><path d="m9 12 2 2 4-4"></path></svg>
            {%- endcase -%}
          </div>
          <h3 class="lq-feat-title">{{ block.settings.title }}</h3>
          <p class="lq-feat-desc">{{ block.settings.text }}</p>
        </div>
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "LinumIQ Features",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "background-2"
    },
    {
      "type": "color",
      "id": "icon_color_accent",
      "label": "Accent icon color",
      "default": "#FF9D0B"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Padding Top",
      "default": 96
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Padding Bottom",
      "default": 96
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Warum LinumIQ die bessere Wahl ist"
    },
    {
      "type": "textarea",
      "id": "subtitle",
      "label": "Subtitle",
      "default": "Wir glauben, dass ein Smart Home dein Leben einfacher machen sollte - nicht komplizierter. Deshalb haben wir das Konzept für dich neu gedacht."
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "limit": 6,
      "settings": [
        {
          "type": "select",
          "id": "icon",
          "label": "Icon",
          "options": [
            {
              "value": "zap",
              "label": "Blitz (Orange)"
            },
            {
              "value": "wifi_off",
              "label": "Offline/Privacy (Blau)"
            },
            {
              "value": "shield",
              "label": "Schutzschild (Blau)"
            }
          ],
          "default": "zap"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Echtes Plug & Play"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Description",
          "default": "Kein IT-Studium nötig. Unsere Kits kommen komplett vorkonfiguriert zu dir. Einfach anstecken und die Automationen sofort nutzen."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "LinumIQ Features",
      "category": "Custom Elements",
      "blocks": [
        {
          "type": "feature",
          "settings": {
            "icon": "zap",
            "title": "Echtes Plug & Play",
            "text": "Kein IT-Studium nötig. Unsere Kits kommen komplett vorkonfiguriert zu dir. Einfach anstecken und die Automationen sofort nutzen."
          }
        },
        {
          "type": "feature",
          "settings": {
            "icon": "wifi_off",
            "title": "100% Offline-fähig",
            "text": "Deine Daten bleiben bei dir im Haus. Keine Cloud, keine Abo-Kosten, keine externen Server. Volle Funktion auch ohne Internet."
          }
        },
        {
          "type": "feature",
          "settings": {
            "icon": "shield",
            "title": "Grenzenlos erweiterbar",
            "text": "Basierend auf Home Assistant und Zigbee. Du bist nicht in unserem Ökosystem gefangen und kannst tausende Geräte integrieren."
          }
        }
      ]
    }
  ]
}
{% endschema %}