<?php
$data = $args['data'] ?? array();

// Desktop (landscape) media
$has_image = isset($data['image']) && $data['image'] > 0;
$has_video = isset($data['video']) && !empty($data['video']);
$video_poster = isset($data['image']) && $data['image'] > 0 ? wp_get_attachment_image_url($data['image'], 'full') : '';

// Mobile (portrait) media
$has_image_portrait = isset($data['image_portrait']) && $data['image_portrait'] > 0;
$has_video_portrait = isset($data['video_portrait']) && !empty($data['video_portrait']);
$video_portrait_poster = isset($data['image_portrait']) && $data['image_portrait'] > 0 ? wp_get_attachment_image_url($data['image_portrait'], 'full') : '';

// Determine what to show
$show_content = $has_image || $has_video || $has_image_portrait || $has_video_portrait;

if ($show_content) :
?>
	<section class="section-cover section-cover-home h-screen overflow-hidden w-full md:max-h-[600px] lg:max-h-none relative" data-cover-video>

		<!-- Video Background for Desktop (landscape orientation) -->
		<?php if ($has_video) : ?>
			<video
				class="hidden lg:block absolute top-0 left-0 w-full h-full object-cover object-center js-cover-video"
				autoplay
				muted
				loop
				playsinline
				<?php if ($video_poster) : ?>poster="<?php echo esc_url($video_poster); ?>"<?php endif; ?>
				aria-hidden="true"
				preload="metadata"
			>
				<?php if (is_array($data['video'])) : ?>
					<source src="<?php echo esc_url($data['video']['url']); ?>" type="<?php echo esc_attr($data['video']['mime_type']); ?>">
				<?php else : ?>
					<source src="<?php echo esc_url($data['video']); ?>" type="video/mp4">
				<?php endif; ?>
				<p class="sr-only">Votre navigateur ne supporte pas la lecture de vidéos.</p>
			</video>
		<?php endif; ?>

		<!-- Image Background for Desktop (if no video) -->
		<?php if ($has_image && !$has_video) : ?>
			<?php
			echo wp_get_attachment_image(
				$data['image'],
				'full',
				false,
				array(
					'loading' => 'eager',
					'fetchpriority' => 'high',
					'class' => 'hidden lg:block absolute top-0 left-0 w-full h-full object-cover object-center scroll-appear scroll-appear-dezoom',
					'alt' => get_post_meta($data['image'], '_wp_attachment_image_alt', true) ?: 'Image de couverture'
				)
			);
			?>
		<?php endif; ?>

		<!-- Video Background for Mobile (portrait orientation) -->
		<?php if ($has_video_portrait) : ?>
			<video
				class="lg:hidden absolute top-0 left-0 w-full h-full object-cover object-center js-cover-video"
				autoplay
				muted
				loop
				playsinline
				<?php if ($video_portrait_poster) : ?>poster="<?php echo esc_url($video_portrait_poster); ?>"<?php endif; ?>
				aria-hidden="true"
				preload="metadata"
			>
				<?php if (is_array($data['video_portrait'])) : ?>
					<source src="<?php echo esc_url($data['video_portrait']['url']); ?>" type="<?php echo esc_attr($data['video_portrait']['mime_type']); ?>">
				<?php else : ?>
					<source src="<?php echo esc_url($data['video_portrait']); ?>" type="video/mp4">
				<?php endif; ?>
				<p class="sr-only">Votre navigateur ne supporte pas la lecture de vidéos.</p>
			</video>
		<?php endif; ?>

		<!-- Image Background for Mobile (portrait) - if no portrait video -->
		<?php if ($has_image_portrait && !$has_video_portrait) : ?>
			<?php
			echo wp_get_attachment_image(
				$data['image_portrait'],
				'full',
				false,
				array(
					'loading' => 'eager',
					'fetchpriority' => 'high',
					'class' => 'lg:hidden absolute top-0 left-0 w-full h-full object-cover object-center scroll-appear scroll-appear-dezoom',
					'alt' => get_post_meta($data['image_portrait'], '_wp_attachment_image_alt', true) ?: 'Image de couverture mobile'
				)
			);
			?>
		<?php endif; ?>

		<!-- Fallback: Use desktop image on mobile if no portrait content -->
		<?php if ($has_image && !$has_image_portrait && !$has_video_portrait) : ?>
			<?php
			echo wp_get_attachment_image(
				$data['image'],
				'full',
				false,
				array(
					'loading' => 'eager',
					'fetchpriority' => 'high',
					'class' => 'lg:hidden absolute top-0 left-0 w-full h-full object-cover object-center scroll-appear scroll-appear-dezoom',
					'alt' => get_post_meta($data['image'], '_wp_attachment_image_alt', true) ?: 'Image de couverture'
				)
			);
			?>
		<?php endif; ?>

		<!-- Logo Overlay -->
		<div class="scroll-appear relative flex items-center justify-center max-w-[150px] lg:max-w-none mx-auto z-10 h-full lg:bg-black/20">
			<?php // echo  lnj_load_inline_svg('atelier-ljn.svg'); ?>
			<div class="lg:-mr-10">
				<img src="<?php echo get_stylesheet_directory_uri() . '/svg/atelier-ljn-light.svg'; ?>" alt="Atelier LJN - Paysagistes concepteurs" class="-mt-10 lg:-mt-20 ">
			</div>
		</div>
		<a href="#home-content" class="absolute bottom-0 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center text-white transition-transform duration-700 hover:translate-y-1 js-smooth-scroll p-8" aria-label="Faire défiler vers le contenu">
			<?php echo lnj_load_inline_svg('caret-down.svg'); ?>
		</a>
	</section>

<?php endif; ?>
