<?php
/**
 * Banner principal rotativo — imagens gerenciadas no painel Home (aba
 * "Banners rotativos"; com link, a foto vira o clique do slide). O título
 * sobre o banner usa a "Chamada" de cada slide (gira junto — home.js);
 * slide sem chamada cai no título fixo do painel "Maringá Faz Mais".
 * Parágrafo de contexto e CTAs do wireframe ("Conheça as obras" /
 * "Acesse o mapa") são fixos. Sem banner cadastrado, mantém o fundo da
 * campanha.
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$mfm_banners = function_exists( 'mfm_home_banners' ) ? mfm_home_banners() : array();
$mfm_total   = count( $mfm_banners );

// Título do primeiro slide já sai no HTML (LCP/SEO); o home.js troca nos demais.
$mfm_titulo_fixo    = (string) mfm_get( 'banner_titulo' );
$mfm_titulo_inicial = ( $mfm_banners && '' !== $mfm_banners[0]['chamada'] ) ? $mfm_banners[0]['chamada'] : $mfm_titulo_fixo;

/**
 * Cada linha da chamada vira um span (display block no CSS) pra receber a
 * cor da sequência branco → ciano → verde (home.css). O home.js monta a
 * mesma estrutura ao trocar de slide.
 */
function mfm_banner_titulo_linhas( $texto ) {
	$linhas = preg_split( '/\r\n|\r|\n/', $texto );
	$html   = '';
	foreach ( $linhas as $linha ) {
		$html .= '<span class="mfm-banner__titulo-linha">' . esc_html( $linha ) . '</span>';
	}
	return $html;
}
?>

<section class="mfm-banner" id="banner" aria-label="Destaques da campanha">
	<div class="mfm-banner__slides"<?php echo $mfm_total > 1 ? ' aria-roledescription="carrossel"' : ''; ?>>
		<?php if ( $mfm_banners ) : ?>
			<?php foreach ( $mfm_banners as $mfm_i => $mfm_banner ) : ?>
				<div
					class="mfm-banner__slide<?php echo 0 === $mfm_i ? ' ativo' : ''; ?>"
					aria-hidden="<?php echo 0 === $mfm_i ? 'false' : 'true'; ?>"
					data-chamada="<?php echo esc_attr( $mfm_banner['chamada'] ); ?>"
					<?php if ( $mfm_total > 1 ) : ?>
						role="group" aria-roledescription="slide" aria-label="<?php echo esc_attr( ( $mfm_i + 1 ) . ' de ' . $mfm_total ); ?>"
					<?php endif; ?>
				>
					<?php
					// Primeiro slide é o LCP da página: carrega já e com
					// prioridade; os demais ficam pro lazy load.
					$mfm_img = wp_get_attachment_image(
						$mfm_banner['imagem'],
						'full',
						false,
						array(
							'class'         => 'mfm-banner__img',
							'sizes'         => '100vw',
							'loading'       => 0 === $mfm_i ? 'eager' : 'lazy',
							'fetchpriority' => 0 === $mfm_i ? 'high' : 'low',
							'alt'           => $mfm_banner['chamada'],
						)
					);
					if ( $mfm_banner['link'] ) {
						printf(
							'<a class="mfm-banner__link" href="%s"%s>%s</a>',
							esc_url( $mfm_banner['link'] ),
							0 === $mfm_i ? '' : ' tabindex="-1"',
							$mfm_img // wp_get_attachment_image já vem escapado.
						);
					} else {
						echo $mfm_img; // phpcs:ignore WordPress.Security.EscapeOutput
					}
					?>
				</div>
			<?php endforeach; ?>
		<?php else : ?>
			<div class="mfm-banner__slide mfm-banner__slide--vazio ativo" aria-hidden="false"></div>
		<?php endif; ?>
	</div>

	<?php if ( $mfm_total > 1 ) : ?>
		<button class="mfm-banner__seta mfm-banner__seta--ant" type="button" aria-label="Banner anterior">
			<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M15.4 5.6 13.8 4l-8 8 8 8 1.6-1.6L9 12z"/></svg>
		</button>
		<button class="mfm-banner__seta mfm-banner__seta--prox" type="button" aria-label="Próximo banner">
			<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="m8.6 5.6 1.6-1.6 8 8-8 8-1.6-1.6L15 12z"/></svg>
		</button>
		<div class="mfm-banner__pontos">
			<?php foreach ( $mfm_banners as $mfm_i => $mfm_banner ) : ?>
				<button
					class="mfm-banner__ponto"
					type="button"
					aria-label="<?php echo esc_attr( 'Ir para o banner ' . ( $mfm_i + 1 ) ); ?>"
					aria-current="<?php echo 0 === $mfm_i ? 'true' : 'false'; ?>"
				></button>
			<?php endforeach; ?>
		</div>
	<?php endif; ?>

	<div class="mfm-banner__conteudo">
		<div class="mfm-container">
			<h1 class="mfm-banner__titulo">
				<span class="mfm-banner__titulo-texto" data-titulo-padrao="<?php echo esc_attr( $mfm_titulo_fixo ); ?>"><?php echo mfm_banner_titulo_linhas( $mfm_titulo_inicial ); // phpcs:ignore WordPress.Security.EscapeOutput — cada linha escapada dentro do helper. ?></span>
			</h1>
			<?php if ( mfm_get( 'banner_contexto' ) ) : ?>
				<p class="mfm-banner__contexto"><?php echo esc_html( mfm_get( 'banner_contexto' ) ); ?></p>
			<?php endif; ?>
			<div class="mfm-banner__botoes">
				<a class="mfm-cta mfm-cta--cheio" href="#obras">Conheça as obras</a>
				<a class="mfm-cta mfm-cta--contorno" href="#mapa">Acesse o mapa</a>
			</div>
		</div>
	</div>
</section>
