{%- comment -%}
  LinumIQ Starter Kits Comparison Section
  Features: Fluid Typography, Shopify Color Schemes, Product Integration, 3 Kits
{%- endcomment -%}

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

  .linumiq-section-{{ section.id }} {
    --font-main: 'Inter', sans-serif;
    --font-heading: 'Roboto', sans-serif;

    --text-sm: 1rem;
    --text-base: clamp(1.125rem, 2vw + 0.5rem, 1.25rem);
    --text-lg: clamp(1.25rem, 3vw + 0.5rem, 1.5rem);
    --text-xl: clamp(1.5rem, 4vw + 1rem, 2rem);
    --text-2xl: clamp(2rem, 5vw + 1rem, 2.5rem);
    --text-4xl: clamp(2.5rem, 6vw + 1rem, 3rem);
    --text-5xl: clamp(3rem, 7vw + 1.5rem, 4rem);

    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
    font-family: var(--font-main);
  }

  .linumiq-section-{{ section.id }} .lq-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  .linumiq-section-{{ section.id }} .lq-text-center { text-align: center; }
  .linumiq-section-{{ section.id }} .lq-mb-16 { margin-bottom: 4rem; }
  .linumiq-section-{{ section.id }} .lq-mb-8 { margin-bottom: 2rem; }
  .linumiq-section-{{ section.id }} .lq-mb-6 { margin-bottom: 1.5rem; }
  .linumiq-section-{{ section.id }} .lq-mb-2 { margin-bottom: 0.5rem; }

  .linumiq-section-{{ section.id }} .lq-h2 {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: rgb(var(--color-foreground));
    margin-top: 0;
  }

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

  .linumiq-section-{{ section.id }} .lq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: stretch;
    max-width: 100rem;
    margin: 0 auto;
  }

  @media (min-width: 768px) {
    .linumiq-section-{{ section.id }} .lq-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }
  }

  .linumiq-section-{{ section.id }} .lq-card {
    border: 2px solid rgba(var(--color-foreground), 0.15);
    border-radius: 1.5rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    transition: box-shadow 0.3s ease;
  }

  @media (min-width: 768px) {
    .linumiq-section-{{ section.id }} .lq-card { padding: 2.5rem; }
  }

  .linumiq-section-{{ section.id }} .lq-card:hover {
    box-shadow: 0 10px 25px rgba(var(--color-foreground), 0.08);
  }

  .linumiq-section-{{ section.id }} .lq-card-premium {
    border: 3px solid rgb(var(--color-button));
    box-shadow: 0 20px 25px -5px rgba(var(--color-foreground), 0.12), 0 10px 10px -5px rgba(var(--color-foreground), 0.05);
  }

  .linumiq-section-{{ section.id }} .lq-card-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: rgb(var(--color-foreground));
    margin-top: 0;
  }

  .linumiq-section-{{ section.id }} .lq-card-desc {
    color: rgba(var(--color-foreground), 0.75);
    font-size: var(--text-lg);
    min-height: 3rem;
  }

  .linumiq-section-{{ section.id }} .lq-price-block {
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--color-foreground), 0.15);
    margin-bottom: 2rem;
  }

  .linumiq-section-{{ section.id }} .lq-price-flex {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .linumiq-section-{{ section.id }} .lq-price {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
  }

  .linumiq-section-{{ section.id }} .lq-compare-price {
    font-size: var(--text-lg);
    color: rgba(var(--color-foreground), 0.6);
    text-decoration: line-through;
    margin-bottom: 0.25rem;
  }

  .linumiq-section-{{ section.id }} .lq-badge {
    display: inline-block;
    background-color: rgba(var(--color-button), 0.1);
    color: #FFB54E;
    font-size: var(--text-base);
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-top: 0.5rem;
  }

  .linumiq-section-{{ section.id }} .lq-premium-flag {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 4px 6px -1px rgba(var(--color-foreground), 0.15);
    white-space: nowrap;
  }

  .linumiq-section-{{ section.id }} .lq-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    flex-grow: 1;
  }

  .linumiq-section-{{ section.id }} .lq-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
  }

  .linumiq-section-{{ section.id }} .lq-feature-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: rgb(var(--color-button));
  }

  .linumiq-section-{{ section.id }} .lq-feature-text {
    font-size: var(--text-lg);
    color: rgb(var(--color-foreground));
    line-height: 1.5;
  }

  .linumiq-section-{{ section.id }} .lq-feature-text strong {
    font-weight: 600;
  }

  .linumiq-section-{{ section.id }} .lq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    font-family: var(--font-main);
    font-size: var(--text-lg);
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    margin-top: auto;
  }

  .linumiq-section-{{ section.id }} .lq-btn-outline {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid rgb(var(--color-foreground));
  }

  .linumiq-section-{{ section.id }} .lq-btn-outline:hover {
    background-color: #FFFFFF;
    color: rgb(var(--color-background));
  }

  .linumiq-section-{{ section.id }} .lq-btn-accent {
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    border: none;
    box-shadow: 0 10px 15px -3px rgba(var(--color-button), 0.3);
  }

  .linumiq-section-{{ section.id }} .lq-btn-accent:hover {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(var(--color-button), 0.5);
  }
{%- endstyle -%}

<div
  class="linumiq-section-{{ section.id }} color-{{ section.settings.color_scheme }} gradient"
  id="{{ section.id }}"
>
  <div class="lq-container">

    <div class="lq-text-center lq-mb-16">
      <h2 class="lq-h2 lq-mb-2">{{ section.settings.heading }}</h2>
      <p class="lq-subtitle">{{ section.settings.subtitle }}</p>
    </div>

    <div class="lq-grid">

      {%- comment -%} KIT 1: LITE (LEFT) {%- endcomment -%}
      {%- assign product_1 = all_products[section.settings.kit1_product] -%}
      <div class="lq-card">
        <div class="lq-mb-6">
          <h3 class="lq-card-title lq-mb-2">{{ section.settings.kit1_title }}</h3>
          <p class="lq-card-desc">{{ section.settings.kit1_desc }}</p>
        </div>

        <div class="lq-price-block">
          <div class="lq-price-flex">
            <span class="lq-price">
              {%- if product_1 != blank -%}
                {{ product_1.price | money_without_trailing_zeros }}
              {%- else -%}
                €199
              {%- endif -%}
            </span>
            {%- if product_1 != blank and product_1.compare_at_price > product_1.price -%}
              <span class="lq-compare-price">{{ product_1.compare_at_price | money_without_trailing_zeros }}</span>
            {%- elsif section.settings.kit1_compare_price != blank -%}
              <span class="lq-compare-price">{{ section.settings.kit1_compare_price }}</span>
            {%- endif -%}
          </div>
          {%- if product_1 != blank and product_1.compare_at_price > product_1.price -%}
            {%- assign savings_1 = product_1.compare_at_price | minus: product_1.price -%}
            <span class="lq-badge">{{ 'sections.linumiq_landing.you_save' | t }} {{ savings_1 | money_without_trailing_zeros }}</span>
          {%- elsif section.settings.kit1_badge != blank -%}
            <span class="lq-badge">{{ section.settings.kit1_badge }}</span>
          {%- endif -%}
        </div>

        <ul class="lq-feature-list">
          {%- assign features_1 = section.settings.kit1_features | newline_to_br | split: '<br />' -%}
          {%- for feature in features_1 -%}
            {%- if feature != blank -%}
              <li class="lq-feature-item">
                <svg class="lq-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                <span class="lq-feature-text">{{ feature | strip }}</span>
              </li>
            {%- endif -%}
          {%- endfor -%}
        </ul>

        <a href="{% if product_1 != blank %}{{ product_1.url }}{% else %}#{% endif %}" class="lq-btn lq-btn-outline">
          {{ section.settings.btn_text }}
        </a>
      </div>

      {%- comment -%} KIT 2: ALL-IN-ONE PREMIUM (CENTER) {%- endcomment -%}
      {%- assign product_2 = all_products[section.settings.kit2_product] -%}
      <div class="lq-card lq-card-premium">
        {%- if section.settings.kit2_flag != blank -%}
          <div class="lq-premium-flag">{{ section.settings.kit2_flag }}</div>
        {%- endif -%}

        <div class="lq-mb-6">
          <h3 class="lq-card-title lq-mb-2">{{ section.settings.kit2_title }}</h3>
          <p class="lq-card-desc">{{ section.settings.kit2_desc }}</p>
        </div>

        <div class="lq-price-block">
          <div class="lq-price-flex">
            <span class="lq-price">
              {%- if product_2 != blank -%}
                {{ product_2.price | money_without_trailing_zeros }}
              {%- else -%}
                €449
              {%- endif -%}
            </span>
            {%- if product_2 != blank and product_2.compare_at_price > product_2.price -%}
              <span class="lq-compare-price">{{ product_2.compare_at_price | money_without_trailing_zeros }}</span>
            {%- elsif section.settings.kit2_compare_price != blank -%}
              <span class="lq-compare-price">{{ section.settings.kit2_compare_price }}</span>
            {%- endif -%}
          </div>
          {%- if product_2 != blank and product_2.compare_at_price > product_2.price -%}
            {%- assign savings_2 = product_2.compare_at_price | minus: product_2.price -%}
            <span class="lq-badge">{{ 'sections.linumiq_landing.you_save' | t }} {{ savings_2 | money_without_trailing_zeros }}</span>
          {%- elsif section.settings.kit2_badge != blank -%}
            <span class="lq-badge">{{ section.settings.kit2_badge }}</span>
          {%- endif -%}
        </div>

        <ul class="lq-feature-list">
          {%- assign features_2 = section.settings.kit2_features | newline_to_br | split: '<br />' -%}
          {%- for feature in features_2 -%}
            {%- if feature != blank -%}
              <li class="lq-feature-item">
                <svg class="lq-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                <span class="lq-feature-text">{{ feature | strip }}</span>
              </li>
            {%- endif -%}
          {%- endfor -%}
        </ul>

        <a href="{% if product_2 != blank %}{{ product_2.url }}{% else %}#{% endif %}" class="lq-btn lq-btn-accent">
          {{ section.settings.btn_text }}
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
        </a>
      </div>

      {%- comment -%} KIT 3: PRO (RIGHT) {%- endcomment -%}
      {%- assign product_3 = all_products[section.settings.kit3_product] -%}
      <div class="lq-card">
        <div class="lq-mb-6">
          <h3 class="lq-card-title lq-mb-2">{{ section.settings.kit3_title }}</h3>
          <p class="lq-card-desc">{{ section.settings.kit3_desc }}</p>
        </div>

        <div class="lq-price-block">
          <div class="lq-price-flex">
            <span class="lq-price">
              {%- if product_3 != blank -%}
                {{ product_3.price | money_without_trailing_zeros }}
              {%- else -%}
                €699
              {%- endif -%}
            </span>
            {%- if product_3 != blank and product_3.compare_at_price > product_3.price -%}
              <span class="lq-compare-price">{{ product_3.compare_at_price | money_without_trailing_zeros }}</span>
            {%- elsif section.settings.kit3_compare_price != blank -%}
              <span class="lq-compare-price">{{ section.settings.kit3_compare_price }}</span>
            {%- endif -%}
          </div>
          {%- if product_3 != blank and product_3.compare_at_price > product_3.price -%}
            {%- assign savings_3 = product_3.compare_at_price | minus: product_3.price -%}
            <span class="lq-badge">{{ 'sections.linumiq_landing.you_save' | t }} {{ savings_3 | money_without_trailing_zeros }}</span>
          {%- elsif section.settings.kit3_badge != blank -%}
            <span class="lq-badge">{{ section.settings.kit3_badge }}</span>
          {%- endif -%}
        </div>

        <ul class="lq-feature-list">
          {%- assign features_3 = section.settings.kit3_features | newline_to_br | split: '<br />' -%}
          {%- for feature in features_3 -%}
            {%- if feature != blank -%}
              <li class="lq-feature-item">
                <svg class="lq-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                <span class="lq-feature-text">{{ feature | strip }}</span>
              </li>
            {%- endif -%}
          {%- endfor -%}
        </ul>

        <a href="{% if product_3 != blank %}{{ product_3.url }}{% else %}#{% endif %}" class="lq-btn lq-btn-outline">
          {{ section.settings.btn_text }}
        </a>
      </div>

    </div>
  </div>
</div>

{% schema %}
{
  "name": "LinumIQ Starter Kits",
  "settings": [
    {
      "type": "header",
      "content": "Section Layout"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "background-1"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Padding Top",
      "default": 80
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Padding Bottom",
      "default": 80
    },
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.linumiq_landing.heading.label",
      "default": "Wähle dein perfektes Setup"
    },
    {
      "type": "textarea",
      "id": "subtitle",
      "label": "Subtitle",
      "default": "Egal ob du klein anfangen oder gleich das volle Potenzial nutzen möchtest - unsere vorkonfigurierten Kits machen den Einstieg kinderleicht."
    },
    {
      "type": "text",
      "id": "btn_text",
      "label": "Button Text",
      "default": "In den Warenkorb"
    },
    {
      "type": "header",
      "content": "Kit 1: Lite (Left)"
    },
    {
      "type": "product",
      "id": "kit1_product",
      "label": "Link to Product (Auto-fetches price & URL)"
    },
    {
      "type": "text",
      "id": "kit1_title",
      "label": "Title",
      "default": "Starter Kit Lite"
    },
    {
      "type": "textarea",
      "id": "kit1_desc",
      "label": "Description",
      "default": "Die kostengünstige Variante für den perfekten Einstieg ins smarte Wohnen."
    },
    {
      "type": "text",
      "id": "kit1_compare_price",
      "label": "Compare Price Fallback",
      "info": "Only used if no product is selected above.",
      "default": "€209,85"
    },
    {
      "type": "text",
      "id": "kit1_badge",
      "label": "Highlight Badge (Fallback)",
      "info": "Nur verwendet wenn kein Produkt verknüpft ist oder kein Vergleichspreis gesetzt wurde.",
      "default": "Angebot - Du sparst €10,85"
    },
    {
      "type": "textarea",
      "id": "kit1_features",
      "label": "Features (One per line)",
      "default": "Home Assistant Green (Zentrale)\n1x Zigbee Tür-/Fenster-Sensor\n1x ZigBee Smart Plug 20A\nBasis Vorkonfiguration\n100% Offline-fähig & Privat"
    },
    {
      "type": "header",
      "content": "Kit 2: All-in-One Premium (Center)"
    },
    {
      "type": "product",
      "id": "kit2_product",
      "label": "Link to Product (Auto-fetches price & URL)"
    },
    {
      "type": "text",
      "id": "kit2_flag",
      "label": "Top Flag Text",
      "default": "Premium Wahl"
    },
    {
      "type": "text",
      "id": "kit2_title",
      "label": "Title",
      "default": "All-in-One Kit"
    },
    {
      "type": "textarea",
      "id": "kit2_desc",
      "label": "Description",
      "default": "Das Rundum-Sorglos-Paket. Inklusive smartem Türschloss und Premium-Sensoren."
    },
    {
      "type": "text",
      "id": "kit2_compare_price",
      "label": "Compare Price Fallback",
      "info": "Only used if no product is selected above.",
      "default": "€478,00"
    },
    {
      "type": "text",
      "id": "kit2_badge",
      "label": "Highlight Badge (Fallback)",
      "info": "Nur verwendet wenn kein Produkt verknüpft ist oder kein Vergleichspreis gesetzt wurde.",
      "default": "Bestseller - Du sparst €29,00"
    },
    {
      "type": "textarea",
      "id": "kit2_features",
      "label": "Features (One per line. Use <strong>...</strong> for bold)",
      "default": "<strong>Home Assistant Green</strong> (Zentrale)\n<strong>Nuki Smart Lock Pro</strong> (5. Gen.)\nZigbee Präsenzmelder (PIR + RADAR)\nMehrere Zigbee Sensoren & Buttons\nPremium Vorkonfiguration\nPriority Support & Updates"
    },
    {
      "type": "header",
      "content": "Kit 3: Pro (Right)"
    },
    {
      "type": "product",
      "id": "kit3_product",
      "label": "Link to Product (Auto-fetches price & URL)"
    },
    {
      "type": "text",
      "id": "kit3_title",
      "label": "Title",
      "default": "Pro Kit"
    },
    {
      "type": "textarea",
      "id": "kit3_desc",
      "label": "Description",
      "default": "Maximale Ausstattung für anspruchsvolle Smart Homes mit erweiterter Automatisierung."
    },
    {
      "type": "text",
      "id": "kit3_compare_price",
      "label": "Compare Price Fallback",
      "info": "Only used if no product is selected above.",
      "default": "€749,00"
    },
    {
      "type": "text",
      "id": "kit3_badge",
      "label": "Highlight Badge (Fallback)",
      "info": "Nur verwendet wenn kein Produkt verknüpft ist oder kein Vergleichspreis gesetzt wurde.",
      "default": "Du sparst €50,00"
    },
    {
      "type": "textarea",
      "id": "kit3_features",
      "label": "Features (One per line. Use <strong>...</strong> for bold)",
      "default": "<strong>Home Assistant Yellow</strong> (Zentrale)\n<strong>Nuki Smart Lock Pro</strong> (5. Gen.)\nZigbee Präsenzmelder (PIR + RADAR)\nErweitertes Sensoren-Set\nMulti-Room Audio Vorbereitung\nIndividuelle Vorkonfiguration\nDedicated Support & Updates"
    }
  ],
  "presets": [
    {
      "name": "LinumIQ Starter Kits",
      "category": "Custom Elements"
    }
  ]
}
{% endschema %}