<template
  is="ui-hero"
  color="string"
  overlay="boolean"
  backgroundImage="object"
  headline="string"
  subheadline="string"
  links="array"
>
  <div class="ui-hero">
    <div class="ui-hero-content">
      <div class="ui-hero-container {{props.color |> esc}}">
        <div if="props.backgroundImage?.asset?.url" class="ui-hero-bg">
          <img src="{{props.backgroundImage.asset.url |> esc}}" alt="hero" />
        </div>
        <div
          class="
          ui-hero-overlay
          {{(props.overlay && props.color) ? props.color : '' |> esc}}
        "
        >
          <div if="props.headline" class="ui-hero-headline">
            <h1>{{props.headline |> esc}}</h1>
          </div>
          <div if="props.subheadline" class="ui-hero-subheadline">
            {{props.subheadline}}
          </div>
          <div if="props.links?.length" class="ui-hero-links">
            <a
              map="link of props.links"
              href="{{link?.href |> esc}}"
              class="ui-hero-link {{link?.style |> esc}}"
            >
              {{link?.label |> esc}}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>