{%- style -%}
  .hero-{{ section.id }} {
    position: relative;
    min-height: {{ section.settings.section_height }}px;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .hero-{{ section.id }}::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    background-color: rgba(
      {{ section.settings.overlay_color | color_extract: 'red' }},
      {{ section.settings.overlay_color | color_extract: 'green' }},
      {{ section.settings.overlay_color | color_extract: 'blue' }},
      {{ section.settings.overlay_opacity | times: 0.01 }}
    );
  }

  .hero-{{ section.id }}__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .hero-{{ section.id }}__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 60px 40px;
    text-align: {{ section.settings.content_alignment }};
  }

  .hero-{{ section.id }}__heading {
    font-size: {{ section.settings.heading_size }}px;
    color: {{ section.settings.heading_color }};
    margin: 0 0 8px;
    line-height: 1.2;
    font-weight: bold;
  }

  .hero-{{ section.id }}__subheading {
    font-size: {{ section.settings.subheading_size }}px;
    color: {{ section.settings.subheading_color }};
    margin: 0;
    line-height: 1.3;
    font-weight: bold;
  }

  .hero-{{ section.id }}__text {
    font-size: {{ section.settings.text_size }}px;
    color: {{ section.settings.text_color }};
    margin: 24px 0 0;
    line-height: 1.6;
  }

  @media screen and (max-width: 749px) {
    .hero-{{ section.id }}__content {
      padding: 40px 16px;
    }
    .hero-{{ section.id }}__heading,
    .hero-{{ section.id }}__subheading {
      white-space: nowrap;
    }
  }
{%- endstyle -%}

<section
  class="hero-{{ section.id }}"
  aria-label="{{ section.settings.heading | escape }}"
>
  {%- if section.settings.background_image != blank -%}
    <img
      class="hero-{{ section.id }}__bg-image"
      src="{{ section.settings.background_image | image_url: width: 1920 }}"
      alt="{{ section.settings.background_image.alt | default: '' | escape }}"
      loading="eager"
      fetchpriority="high"
      width="{{ section.settings.background_image.width }}"
      height="{{ section.settings.background_image.height }}"
    >
  {%- endif -%}

  <div class="hero-{{ section.id }}__content">
    {%- if section.settings.heading != blank -%}
      <h1 class="hero-{{ section.id }}__heading">
        {{ section.settings.heading | escape }}
      </h1>
    {%- endif -%}

    {%- if section.settings.subheading != blank -%}
      <h2 class="hero-{{ section.id }}__subheading">
        {{ section.settings.subheading | escape }}
      </h2>
    {%- endif -%}

    {%- if section.settings.text != blank -%}
      <div class="hero-{{ section.id }}__text">
        {{ section.settings.text }}
      </div>
    {%- endif -%}
  </div>
</section>

<script>
(function () {
  function fitHeroHeadings() {
    if (window.innerWidth >= 750) return;
    [
      '.hero-{{ section.id }}__heading',
      '.hero-{{ section.id }}__subheading'
    ].forEach(function (sel) {
      var el = document.querySelector(sel);
      if (!el) return;
      el.style.fontSize = '';
      var fontSize = parseFloat(window.getComputedStyle(el).fontSize);
      while (el.scrollWidth > el.clientWidth && fontSize > 10) {
        fontSize -= 0.5;
        el.style.fontSize = fontSize + 'px';
      }
    });
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fitHeroHeadings);
  } else {
    fitHeroHeadings();
  }
  window.addEventListener('resize', fitHeroHeadings);
})();
</script>

{% schema %}
{
  "name": "Hero",
  "tag": "section",
  "class": "section-hero",
  "settings": [
    {
      "type": "header",
      "content": "Inhalt"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Hauptüberschrift",
      "default": "Willkommen in unserem Shop"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Zweitüberschrift",
      "default": "Entdecke unsere Kollektion"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Sub-Text",
      "default": "<p>Hochwertiger Stil für jeden Anlass – jetzt entdecken.</p>"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "content_alignment",
      "label": "Textausrichtung",
      "options": [
        { "value": "left", "label": "Links" },
        { "value": "center", "label": "Zentriert" },
        { "value": "right", "label": "Rechts" }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "section_height",
      "label": "Sektionshöhe (px)",
      "min": 200,
      "max": 900,
      "step": 10,
      "default": 500
    },
    {
      "type": "header",
      "content": "Hintergrundbild"
    },
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Hintergrundbild"
    },
    {
      "type": "color",
      "id": "overlay_color",
      "label": "Overlay-Farbe",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": "Overlay-Deckkraft (%)",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 40,
      "info": "0 = komplett transparent, 100 = vollständig deckend"
    },
    {
      "type": "header",
      "content": "Hauptüberschrift"
    },
    {
      "type": "range",
      "id": "heading_size",
      "label": "Schriftgröße (px)",
      "min": 20,
      "max": 100,
      "step": 2,
      "default": 56
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Textfarbe",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Zweitüberschrift"
    },
    {
      "type": "range",
      "id": "subheading_size",
      "label": "Schriftgröße (px)",
      "min": 16,
      "max": 72,
      "step": 2,
      "default": 36
    },
    {
      "type": "color",
      "id": "subheading_color",
      "label": "Textfarbe",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Sub-Text"
    },
    {
      "type": "range",
      "id": "text_size",
      "label": "Schriftgröße (px)",
      "min": 12,
      "max": 36,
      "step": 1,
      "default": 18
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Textfarbe",
      "default": "#eeeeee"
    }
  ],
  "presets": [
    {
      "name": "Hero"
    }
  ]
}
{% endschema %}