// src/components/patterns/hero/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/hero
additionalProperties: false
required:
  - media
properties:
  media:
    type: string
    format: html
    description: elements/image or elements/video
  heading:
    type: string
  additional_info:
    type: array
    items:
      type: string
  overlay_opacity:
    type: number
    min: 0.1
    max: 0.8

// src/components/patterns/hero/mocks.yaml

media:
  $ref: elements/image#16x9_9x16
  $tpl: elements/image
$variants:
  - $name: with content
    additional_info:
      - Montage
      - Vollzeit
      - Rosenheim, Deutschland
    heading: Kroiher sucht Montage-Profis
    overlay_opacity: 0.15
  - $name: video
    additional_info:
      - Montage
      - Vollzeit
      - Rosenheim, Deutschland
    heading: Kroiher sucht Montage-Profis
    media:
      $tpl: elements/video
      $ref: elements/video
      src: >-
        https://player.vimeo.com/progressive_redirect/playback/422735522/rendition/1080p/file.mp4?loc=external&log_user=0&signature=ca51aa5cbd81e127c0a781927973c46436f88fbc99ebbb33f38f000dff29c002
      poster: >-
        https://i.vimeocdn.com/video/898896320-ebc8f3ddf6d727ec1130d4f9e5a2224d93067498bfe71d1171ccdd469da7c565-d?mw=2200&mh=1238&q=70
      controls: false
      muted: true
      loop: true
      autoplay: true
      skip_cookiebot_consent: true

// src/components/patterns/hero/hero.twig

{{ attach_library('finstral_global/pattern-hero') }}

<div class="Hero"
	{%- if overlay_opacity %} style="--Hero-content-before-opacity: {{ overlay_opacity }}"{% endif -%}
>
	<div class="Hero-media">{{ media }}</div>
	{% if additional_info or heading %}
		<div class="Hero-content u-container">
			{% if additional_info %}
				<ul class="Hero-additionalInfo">
					{% for item in additional_info %}
						<li class="Hero-additionalInfoItem">{{ item }}</li>
					{% endfor %}
				</ul>
			{% endif %}
			<h1 class="Hero-heading">{{ heading }}</h1>
		</div>
	{% endif %}
</div>