<?php
defined('BASEPATH') OR exit('No direct script access allowed');
/**
 * HERO CAROUSEL — supports three media types per slide:
 *   image   : full-bleed background image
 *   video   : self-hosted MP4, autoplay/muted/loop, with poster image
 *   youtube : full-bleed YouTube embed (autoplay, muted, looped)
 * Expects: $hero_slides (array). Falls back to a single branded slide.
 */
$slides = isset($hero_slides) && ! empty($hero_slides) ? $hero_slides : array();

// Fallback slide if the admin hasn't added any.
if (empty($slides))
{
	$slides = array(array(
		'media_type' => 'image', 'image' => '',
		'eyebrow'    => 'Creative Agency',
		'heading'    => setting('hero_fallback_heading', 'Where Creative Vision Blooms'),
		'subheading' => setting('hero_fallback_sub', 'Talent. Campaigns. Experiences.'),
		'cta1_label' => 'Work With Us', 'cta1_url' => 'contact',
		'cta2_label' => 'Discover Our Work', 'cta2_url' => 'portfolio',
		'overlay'    => 1,
	));
}
?>
<section class="hero" data-hero>
	<?php foreach ($slides as $i => $slide):
		$type    = $slide['media_type'];
		$overlay = ! empty($slide['overlay']);
		$poster  = ! empty($slide['image']) ? upload_url($slide['image'], 'img/hero-fallback.jpg') : base_url('assets/img/hero-fallback.jpg');
	?>
	<div class="hero-slide" aria-hidden="<?= $i === 0 ? 'false' : 'true' ?>">

		<!-- ---- MEDIA LAYER ---- -->
		<div class="hero-media">
			<?php if ($type === 'video' && ! empty($slide['video_file'])): ?>
				<video
					src="<?= upload_url($slide['video_file']) ?>"
					poster="<?= $poster ?>"
					muted loop playsinline preload="metadata"></video>

			<?php elseif ($type === 'youtube' && ! empty($slide['youtube_id'])):
				$yt = $slide['youtube_id']; ?>
				<iframe
					src="https://www.youtube.com/embed/<?= html_escape($yt) ?>?autoplay=1&mute=1&loop=1&controls=0&showinfo=0&rel=0&playsinline=1&playlist=<?= html_escape($yt) ?>"
					title="<?= html_escape($slide['heading']) ?>"
					allow="autoplay; encrypted-media" frameborder="0"></iframe>

			<?php else: ?>
				<img src="<?= $poster ?>" alt="<?= html_escape($slide['heading']) ?>">
			<?php endif; ?>
		</div>

		<!-- ---- OVERLAY ---- -->
		<?php if ($overlay): ?>
			<div class="hero-overlay with-side"></div>
		<?php endif; ?>

		<!-- ---- CONTENT ---- -->
		<div class="hero-content">
			<div class="container">
				<div class="hero-inner">
					<?php if ( ! empty($slide['eyebrow'])): ?>
						<span class="hero-eyebrow"><?= html_escape($slide['eyebrow']) ?></span>
					<?php endif; ?>

					<h1><?= html_escape($slide['heading']) ?></h1>

					<?php if ( ! empty($slide['subheading'])): ?>
						<p class="hero-sub"><?= html_escape($slide['subheading']) ?></p>
					<?php endif; ?>

					<div class="hero-ctas">
						<?php if ( ! empty($slide['cta1_label'])): ?>
							<a href="<?= base_url($slide['cta1_url']) ?>" class="btn btn-primary btn-lg">
								<?= html_escape($slide['cta1_label']) ?> <?= bloom_icon('arrow', 18) ?>
							</a>
						<?php endif; ?>
						<?php if ( ! empty($slide['cta2_label'])): ?>
							<a href="<?= base_url($slide['cta2_url']) ?>" class="btn btn-outline-light btn-lg">
								<?= html_escape($slide['cta2_label']) ?>
							</a>
						<?php endif; ?>
					</div>
				</div>
			</div>
		</div>
	</div>
	<?php endforeach; ?>

	<!-- ---- CONTROLS ---- -->
	<?php if (count($slides) > 1): ?>
		<div class="hero-nav">
			<button data-hero-prev aria-label="Previous slide">
				<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
			</button>
			<button data-hero-next aria-label="Next slide">
				<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
			</button>
		</div>
		<div class="hero-pagination">
			<?php foreach ($slides as $i => $s): ?>
				<span class="dot" data-index="<?= $i ?>" role="button" tabindex="0" aria-label="Go to slide <?= $i + 1 ?>"></span>
			<?php endforeach; ?>
		</div>
	<?php endif; ?>

	<div class="hero-progress"><span></span></div>
	<div class="hero-scroll">Scroll</div>
</section>
