{%- liquid
  assign hero_image = section.settings.image
  assign hero_desktop_url = 'gamepro-hero.png' | asset_url
  assign hero_mobile_url = hero_desktop_url
  if hero_image != blank
    assign hero_desktop_url = hero_image | image_url: width: 2400
    assign hero_mobile_url = hero_image | image_url: width: 1200
  endif
-%}

<section class="gamepro-hero">
  <div class="gamepro-hero__desktop">
    <img
      class="gamepro-hero__desktop-image"
      src="{{ hero_desktop_url }}"
      alt="{{ section.settings.image_alt | escape }}"
      width="{{ hero_image.width | default: 1672 }}"
      height="{{ hero_image.height | default: 941 }}"
      loading="eager"
      fetchpriority="high"
    >

    <div class="gamepro-hero__desktop-copy">
      {%- if section.settings.eyebrow != blank -%}
        <p class="gamepro-hero__eyebrow">{{ section.settings.eyebrow | escape }}</p>
      {%- endif -%}
      <h1 id="GameProHeroDesktopTitle-{{ section.id }}" class="gamepro-hero__title">{{ section.settings.heading | escape | replace: '. ', '.<br>' }}</h1>
      {%- if section.settings.text != blank -%}
        <div class="gamepro-hero__text rte">{{ section.settings.text }}</div>
      {%- endif -%}

      <ul class="gamepro-hero__features" aria-label="Product highlights">
        {%- for block in section.blocks -%}
          <li>
            <span aria-hidden="true"></span>
            {{ block.settings.text | escape }}
          </li>
        {%- endfor -%}
      </ul>

      <div class="gamepro-hero__actions">
        {%- if section.settings.primary_label != blank -%}
          <a class="button button--primary" href="{{ section.settings.primary_link | default: routes.all_products_collection_url }}">
            {{ section.settings.primary_label | escape }}
          </a>
        {%- endif -%}
        {%- if section.settings.secondary_label != blank -%}
          <a class="button button--secondary" href="{{ section.settings.secondary_link | default: routes.all_products_collection_url }}">
            {{ section.settings.secondary_label | escape }}
          </a>
        {%- endif -%}
      </div>
    </div>
  </div>

  <div class="gamepro-hero__mobile page-width">
    <div class="gamepro-hero__mobile-copy">
      {%- if section.settings.eyebrow != blank -%}
        <p class="gamepro-hero__eyebrow">{{ section.settings.eyebrow | escape }}</p>
      {%- endif -%}
      <h1 id="GameProHeroMobileTitle-{{ section.id }}" class="gamepro-hero__title">{{ section.settings.heading | escape | replace: '. ', '.<br>' }}</h1>
      {%- if section.settings.text != blank -%}
        <div class="gamepro-hero__text rte">{{ section.settings.text }}</div>
      {%- endif -%}

      <ul class="gamepro-hero__features" aria-label="Product highlights">
        {%- for block in section.blocks -%}
          <li {{ block.shopify_attributes }}>
            <span aria-hidden="true"></span>
            {{ block.settings.text | escape }}
          </li>
        {%- endfor -%}
      </ul>

      <div class="gamepro-hero__actions">
        {%- if section.settings.primary_label != blank -%}
          <a class="button button--primary" href="{{ section.settings.primary_link | default: routes.all_products_collection_url }}">
            {{ section.settings.primary_label | escape }}
          </a>
        {%- endif -%}
        {%- if section.settings.secondary_label != blank -%}
          <a class="button button--secondary" href="{{ section.settings.secondary_link | default: routes.all_products_collection_url }}">
            {{ section.settings.secondary_label | escape }}
          </a>
        {%- endif -%}
      </div>
    </div>

    <div class="gamepro-hero__mobile-media">
      <img
        class="gamepro-hero__mobile-image"
        src="{{ hero_mobile_url }}"
        alt="{{ section.settings.image_alt | escape }}"
        width="{{ hero_image.width | default: 1672 }}"
        height="{{ hero_image.height | default: 941 }}"
        loading="eager"
        fetchpriority="high"
      >
    </div>
  </div>
</section>

{% stylesheet %}
  .gamepro-hero {
    position: relative;
    overflow: hidden;
    color: #f7f8fb;
    background: #05070a;
  }

  .gamepro-hero__desktop {
    position: relative;
    width: 100%;
    height: clamp(60rem, calc(100vh - 12rem), 88rem);
    background: #05070a;
  }

  .gamepro-hero__desktop::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 5, 10, 0.96) 0%, rgba(2, 5, 10, 0.82) 28%, rgba(2, 5, 10, 0.28) 60%, transparent 82%);
    content: '';
    pointer-events: none;
  }

  .gamepro-hero__desktop-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .gamepro-hero__desktop-copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: clamp(3.2rem, 5vw, 9.6rem);
    width: min(43vw, 68rem);
    transform: translateY(-50%);
  }

  .gamepro-hero__desktop .gamepro-hero__eyebrow {
    margin: 0 0 2rem;
    color: #ed1c2e;
    font-size: clamp(1.5rem, 1.2vw, 2rem);
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .gamepro-hero__desktop .gamepro-hero__title {
    color: #f7f8fb;
    font-size: clamp(5.8rem, 6.1vw, 10.8rem);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.88;
    text-transform: uppercase;
  }

  .gamepro-hero__desktop .gamepro-hero__text {
    max-width: 53rem;
    margin-top: 2.8rem;
    color: rgba(237, 240, 246, 0.72);
    font-size: clamp(1.6rem, 1.35vw, 2.2rem);
    line-height: 1.5;
  }

  .gamepro-hero__desktop .gamepro-hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem 3.2rem;
    margin: 3.2rem 0 0;
    padding: 0;
    list-style: none;
  }

  .gamepro-hero__desktop .gamepro-hero__features li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    color: rgba(247, 248, 251, 0.88);
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .gamepro-hero__desktop .gamepro-hero__features li > span {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #ed1c2e;
  }

  .gamepro-hero__desktop .gamepro-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-top: 3.6rem;
  }

  .gamepro-hero .button--primary {
    --color-button: 237, 28, 46;
    --color-button-text: 255, 255, 255;
  }

  .gamepro-hero .button--secondary {
    --color-button: 247, 248, 251;
    --color-button-text: 247, 248, 251;
    color: #f7f8fb;
    background: rgba(5, 7, 10, 0.35);
  }

  .gamepro-hero__mobile {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .gamepro-hero__desktop {
      display: none;
    }

    .gamepro-hero__mobile {
      display: grid;
      width: 100%;
      gap: 2.4rem;
      padding: 3.2rem 2rem 2.4rem;
      background:
        radial-gradient(circle at 72% 78%, rgba(84, 141, 225, 0.18), transparent 42%),
        #05070a;
    }

    .gamepro-hero__mobile-copy {
      min-width: 0;
    }

    .gamepro-hero__eyebrow {
      margin: 0 0 1.4rem;
      color: #e31c2b;
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .gamepro-hero__title {
      max-width: 13ch;
      margin: 0;
      color: #f7f8fb;
      font-size: clamp(3.6rem, 10.5vw, 5.2rem);
      font-weight: 850;
      letter-spacing: -0.045em;
      line-height: 0.94;
      text-wrap: balance;
    }

    .gamepro-hero__text {
      max-width: 48rem;
      margin-top: 1.6rem;
      color: rgba(237, 240, 246, 0.68);
      font-size: 1.45rem;
      line-height: 1.5;
    }

    .gamepro-hero__features {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.8rem;
      margin: 2rem 0 0;
      padding: 0;
      list-style: none;
    }

    .gamepro-hero__features li {
      display: flex;
      align-items: flex-start;
      gap: 0.6rem;
      color: rgba(247, 248, 251, 0.84);
      font-size: 1.05rem;
      font-weight: 650;
      line-height: 1.25;
      text-transform: uppercase;
    }

    .gamepro-hero__features li > span {
      width: 0.6rem;
      height: 0.6rem;
      flex: 0 0 0.6rem;
      margin-top: 0.35rem;
      border-radius: 50%;
      background: #e31c2b;
    }

    .gamepro-hero__actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      margin-top: 2.2rem;
    }

    .gamepro-hero__actions .button {
      min-width: 0;
      min-height: 4.8rem;
      padding: 0 1.4rem;
      font-size: 1.25rem;
    }

    .gamepro-hero .button--secondary {
      background: transparent;
    }

    .gamepro-hero__mobile-media {
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 1.6rem;
      background: #090d14;
      box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.28);
    }

    .gamepro-hero__mobile-image {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      object-position: center;
    }

    @media screen and (max-width: 389px) {
      .gamepro-hero__mobile {
        padding-inline: 1.6rem;
      }

      .gamepro-hero__actions {
        grid-template-columns: 1fr;
      }
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "GamePro hero",
  "tag": "section",
  "class": "section",
  "max_blocks": 3,
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Hero image"
    },
    {
      "type": "text",
      "id": "image_alt",
      "label": "Image alt text"
    },
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "Gear for every setup"
    },
    {
      "type": "textarea",
      "id": "heading",
      "label": "Heading",
      "default": "PLAY BETTER. STAY READY."
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text",
      "default": "<p>A flexible storefront for gaming gear, electronics, and everyday accessories.</p>"
    },
    {
      "type": "text",
      "id": "primary_label",
      "label": "Primary button label",
      "default": "Shop products"
    },
    {
      "type": "url",
      "id": "primary_link",
      "label": "Primary button link"
    },
    {
      "type": "text",
      "id": "secondary_label",
      "label": "Secondary button label",
      "default": "Browse collections"
    },
    {
      "type": "url",
      "id": "secondary_link",
      "label": "Secondary button link"
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "Plug & play"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "GamePro hero",
      "blocks": [
        { "type": "feature", "settings": { "text": "Easy to customize" } },
        { "type": "feature", "settings": { "text": "Responsive design" } },
        { "type": "feature", "settings": { "text": "Built for Shopify" } }
      ]
    }
  ]
}
{% endschema %}
