<section class="hero hero--split" data-reveal>
  <div class="hero-split__layout">
    <div class="hero-split__content" data-reveal>
      {%- if section.settings.eyebrow != blank -%}
        <span class="hero__eyebrow">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h1 class="hero__heading">{{ section.settings.heading }}</h1>
      {%- if section.settings.subheading != blank -%}
        <p class="hero__subheading hero-split__subheading">{{ section.settings.subheading }}</p>
      {%- endif -%}
      <div class="hero__actions">
        {%- if section.settings.cta_text != blank -%}
          <a href="{{ section.settings.cta_url | default: '/collections/all' }}" class="btn btn--primary">{{ section.settings.cta_text }}</a>
        {%- endif -%}
        {%- if section.settings.cta_secondary_text != blank -%}
          <a href="{{ section.settings.cta_secondary_url | default: '/collections/all' }}" class="btn btn--outline">{{ section.settings.cta_secondary_text }}</a>
        {%- endif -%}
      </div>
    </div>
    <div class="hero-split__media">
      {%- if section.settings.image != blank -%}
        <img
          src="{{ section.settings.image | image_url: width: 1200 }}"
          srcset="
            {{ section.settings.image | image_url: width: 600 }} 600w,
            {{ section.settings.image | image_url: width: 900 }} 900w,
            {{ section.settings.image | image_url: width: 1200 }} 1200w
          "
          sizes="(max-width: 768px) 100vw, 50vw"
          alt="{{ section.settings.image.alt | escape }}"
          loading="eager"
          fetchpriority="high"
          class="hero-split__image"
        >
      {%- else -%}
        <img src="{{ 'hero-1.png' | asset_url }}" alt="" loading="eager" fetchpriority="high" class="hero-split__image" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
        <div class="hero-split__placeholder" style="display:none;">
          <svg viewBox="0 0 800 600" fill="none" stroke="currentColor" stroke-width="1" opacity="0.12" aria-hidden="true"><rect x="100" y="50" width="600" height="500" rx="16"/></svg>
        </div>
      {%- endif -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Hero Split",
  "class": "section-hero-split",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "NEW COLLECTION" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Your Headline Here" },
    { "type": "textarea", "id": "subheading", "label": "Subheading" },
    { "type": "text", "id": "cta_text", "label": "Button text", "default": "Shop Now" },
    { "type": "url", "id": "cta_url", "label": "Button link" },
    { "type": "text", "id": "cta_secondary_text", "label": "Secondary button text" },
    { "type": "url", "id": "cta_secondary_url", "label": "Secondary button link" },
    { "type": "image_picker", "id": "image", "label": "Hero image" },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        { "value": "text-left", "label": "Text left, image right" },
        { "value": "text-right", "label": "Text right, image left" }
      ],
      "default": "text-left"
    },
    {
      "type": "select",
      "id": "height",
      "label": "Height",
      "options": [
        { "value": "full", "label": "Full viewport" },
        { "value": "large", "label": "Large (85vh)" },
        { "value": "medium", "label": "Medium (70vh)" }
      ],
      "default": "large"
    }
  ],
  "presets": [{ "name": "Hero Split" }]
}
{% endschema %}
