{*
 * MÉRIDIAN — Hero (slider plein écran éditorial)
 * Données : $slider->{autoPlay,width,variant}, $slides[] { image,textPosition,title,subTitle,button,url }
 * Animation/auto-défilement : meridian.js (.hero[data-slider]).
 *}
{assign var="multi" value=(count($slides) > 1)}
{assign var="variant" value=$slider->variant|default:'editorial'}
{* intégration au header : si l'en-tête est transparent (ConfigHeader->transparent), le hero
   remonte sous le header via la classe .overlay (cf. .hero-full.overlay dans theme.css).
   Le header "centered" (header2) est plus haut → variante .is-centered pour remonter d'autant. *}
{assign var="integrate" value=($headerParameter[0]->transparent|default:false)}
{assign var="hdrCentered" value=(($headerParameter[0]->header|default:'header1') == 'header2')}

{if $variant == 'split' && count($slides) >= 1}
  {assign var="s" value=$slides[0]}
  <section class="hero hero-split">
    <div class="hero-split-text">
      {if $s.title}<h1 class="display">{$s.title|replace:'\n':'<br>' nofilter}</h1>{/if}
      {if $s.subTitle}<p>{$s.subTitle}</p>{/if}
      {if $s.button}<div class="hero-ctas"><a class="mrd-btn mrd-btn-solid" href="{$s.url}">{$s.button}</a></div>{/if}
    </div>
    <div class="hero-split-img">
      <picture>
        {if !empty($s.imageMobile)}<source media="(max-width: 768px)" srcset="{$s.imageMobile}">{/if}
        <img src="{$s.image}" alt="{$s.title|default:''}" fetchpriority="high" width="1200" height="1500">
      </picture>
    </div>
  </section>
{else}
  <section class="hero hero-full{if $integrate} overlay{if $hdrCentered} is-centered{/if}{/if}"{if $multi} data-slider{/if}>
    {foreach from=$slides item=slide key=idx}
      <div class="hero-slide {if $idx == 0}is-active{/if}" {if $idx != 0}aria-hidden="true"{/if}>
        <div class="hero-bg">
          <picture>
            {if !empty($slide.imageMobile)}<source media="(max-width: 768px)" srcset="{$slide.imageMobile}">{/if}
            <img src="{$slide.image}" alt="{$slide.title|default:''}" {if $idx == 0}fetchpriority="high"{else}loading="lazy"{/if} width="2400" height="1600">
          </picture>
        </div>
        <div class="hero-scrim"></div>
        <div class="hero-content mrd-container is-{$slide.textPosition|default:'left'}">
          {if $slide.title}
            {if $idx == 0}<h1 class="display">{$slide.title|replace:'\n':'<br>' nofilter}</h1>
            {else}<h2 class="display">{$slide.title|replace:'\n':'<br>' nofilter}</h2>{/if}
          {/if}
          {if $slide.subTitle}<p>{$slide.subTitle}</p>{/if}
          {if $slide.button}
            <div class="hero-ctas"><a class="mrd-btn mrd-btn-solid" href="{$slide.url}">{$slide.button}</a></div>
          {/if}
        </div>
      </div>
    {/foreach}

    {if $multi}
      <button class="hero-arrow prev" type="button" aria-label="{l s='Précédent' d='Shop.Theme.Actions'}">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>
      </button>
      <button class="hero-arrow next" type="button" aria-label="{l s='Suivant' d='Shop.Theme.Actions'}">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </button>
      <div class="hero-dots">
        {foreach from=$slides item=slide key=idx}
          <button class="hero-dot {if $idx == 0}is-active{/if}" type="button" aria-label="{l s='Diapositive' d='Shop.Theme.Actions'} {$idx+1}"></button>
        {/foreach}
      </div>
    {/if}
  </section>
{/if}
