<?php
/**
 * Hero template.
 *
 * @package Rsmspark_Content_Widgets
 */

defined( 'ABSPATH' ) || exit;

$layout          = sanitize_key( (string) ( $layout ?? 'centered' ) );
$overlay_opacity = isset( $overlay_opacity ) ? (int) $overlay_opacity : 45;
$overlay_opacity = max( 0, min( 100, $overlay_opacity ) );
$min_height      = isset( $min_height ) ? (int) $min_height : 320;
$min_height      = max( 200, min( 900, $min_height ) );
$layer_parallax  = ! empty( $layer_parallax );
$has_video       = ! empty( $has_video );
$image_side      = sanitize_key( (string) ( $image_side ?? 'right' ) );
$vertical_align  = sanitize_key( (string) ( $vertical_align ?? 'center' ) );
$mobile_order    = sanitize_key( (string) ( $mobile_order ?? 'content-first' ) );
$focal_position  = isset( $focal_position ) ? (string) $focal_position : 'center center';
$split_columns   = isset( $split_columns ) ? (string) $split_columns : '1fr 1fr';
$layers          = isset( $background_layers ) && is_array( $background_layers ) ? $background_layers : array();
$has_bg_layers   = ! empty( $layers ) && 'split' !== $layout;

$classes = array(
	'rsmspark-cw',
	'rsmspark-cw-hero',
	'rsmspark-cw-hero--' . sanitize_html_class( $layout ),
);

if ( 'split' === $layout ) {
	$classes[] = 'rsmspark-cw-hero--image-' . sanitize_html_class( $image_side );
	$classes[] = 'rsmspark-cw-hero--v-' . sanitize_html_class( $vertical_align );
	$classes[] = 'rsmspark-cw-hero--mobile-' . sanitize_html_class( $mobile_order );
}

if ( $layer_parallax ) {
	$classes[] = 'rsmspark-cw-hero--parallax';
}
if ( $has_video ) {
	$classes[] = 'rsmspark-cw-hero--has-video';
}
if ( $has_bg_layers ) {
	$classes[] = 'rsmspark-cw-hero--has-layers';
}

$section_style = $style_vars . sprintf(
	';--rsmspark-cw-hero-min-height:%dpx;--rsmspark-cw-hero-split-columns:%s;--rsmspark-cw-hero-focal:%s;',
	$min_height,
	esc_attr( $split_columns ),
	esc_attr( $focal_position )
);
$overlay_style = sprintf( 'background:rgba(15,23,42,%s);', esc_attr( (string) ( $overlay_opacity / 100 ) ) );
?>
<section
	class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>"
	style="<?php echo esc_attr( $section_style ); ?>"
	<?php echo $layer_parallax ? ' data-rsmspark-cw-hero-parallax' : ''; ?>
	data-rsmspark-cw-hero-mobile-order="<?php echo esc_attr( $mobile_order ); ?>"
>
	<?php if ( 'split' === $layout && ! empty( $image_url ) ) : ?>
		<div
			class="rsmspark-cw-hero__media"
			style="background-image:url(<?php echo esc_url( $image_url ); ?>);background-position:<?php echo esc_attr( $focal_position ); ?>;"
		>
			<span class="rsmspark-cw-hero__overlay" style="<?php echo esc_attr( $overlay_style ); ?>"></span>
		</div>
	<?php elseif ( $has_bg_layers ) : ?>
		<div class="rsmspark-cw-hero__bg">
			<div class="rsmspark-cw-hero__layers" aria-hidden="true">
				<?php foreach ( $layers as $index => $layer ) : ?>
					<?php
					$layer_type = sanitize_key( (string) ( $layer['type'] ?? 'image' ) );
					$layer_style = Rsmspark_Content_Widgets_Hero_Layers::layer_inline_style( $layer );
					$layer_classes = array(
						'rsmspark-cw-hero__layer',
						'rsmspark-cw-hero__layer--' . sanitize_html_class( $layer_type ),
					);
					if ( ! empty( $layer['parallax'] ) ) {
						$layer_classes[] = 'rsmspark-cw-hero__layer--parallax';
					}
					?>
					<?php if ( 'video' === $layer_type && ! empty( $layer['video_url'] ) ) : ?>
						<div class="<?php echo esc_attr( implode( ' ', $layer_classes ) ); ?>"<?php echo '' !== $layer_style ? ' style="' . esc_attr( $layer_style ) . '"' : ''; ?>>
							<video class="rsmspark-cw-hero__video" autoplay muted loop playsinline preload="metadata">
								<source src="<?php echo esc_url( $layer['video_url'] ); ?>" type="video/mp4" />
							</video>
						</div>
					<?php elseif ( 'image' === $layer_type && ! empty( $layer['image_url'] ) ) : ?>
						<div class="<?php echo esc_attr( implode( ' ', $layer_classes ) ); ?>" style="<?php echo esc_attr( $layer_style ); ?>"></div>
					<?php endif; ?>
				<?php endforeach; ?>
			</div>
			<span class="rsmspark-cw-hero__overlay" style="<?php echo esc_attr( $overlay_style ); ?>"></span>
		</div>
	<?php endif; ?>
	<div class="rsmspark-cw-hero__inner">
		<?php if ( ! empty( $headline ) ) : ?>
			<h2 class="rsmspark-cw-hero__title"><?php echo esc_html( $headline ); ?></h2>
		<?php endif; ?>
		<?php if ( ! empty( $subheadline ) ) : ?>
			<p class="rsmspark-cw-hero__text"><?php echo esc_html( $subheadline ); ?></p>
		<?php endif; ?>
		<?php if ( ! empty( $cta_text ) && ! empty( $cta_url ) ) : ?>
			<a class="rsmspark-cw-btn" href="<?php echo esc_url( $cta_url ); ?>"><?php echo esc_html( $cta_text ); ?></a>
		<?php endif; ?>
	</div>
</section>
