<?php
/**
 * ITSWEBER CMS – Creative Theme: Hero Section Template
 * Neon Dreamscape hero with animated orbs, particles and gradient text.
 *
 * Variables: $data (array), $section (DB row), $sectionId (string)
 *
 * @author  Benny Weber
 * @copyright ITSWEBER, www.itsweber.de
 */

// ── Normalize upload paths – prevent /uploads//path double slashes ──
foreach (['image', 'video_url', 'video_poster', 'portrait_image'] as $_pathKey) {
    if (!empty($data[$_pathKey])) {
        $data[$_pathKey] = ltrim($data[$_pathKey], '/');
    }
}

// ── Hero v2: Build presentation modifier classes from validated tokens ──
$_hero_classes = ['hero-section'];
if (!empty($data['text_color']) && $data['text_color'] !== 'auto') $_hero_classes[] = 'hero--text-' . $data['text_color'];
if (!empty($data['heading_size']))    $_hero_classes[] = 'hero--hsize-' . $data['heading_size'];
if (!empty($data['heading_weight']))  $_hero_classes[] = 'hero--hweight-' . $data['heading_weight'];
if (!empty($data['body_size']))       $_hero_classes[] = 'hero--body-' . $data['body_size'];
if (!empty($data['layout_mode']))     $_hero_classes[] = 'hero--layout-' . $data['layout_mode'];
if (!empty($data['text_align']))      $_hero_classes[] = 'hero--align-' . $data['text_align'];
if (!empty($data['overlay_strength']))$_hero_classes[] = 'hero--overlay-' . $data['overlay_strength'];
if (!empty($data['hero_height']) && $data['hero_height'] === 'tall') $_hero_classes[] = 'hero--tall';
if (!empty($data['portrait_style'])) $_hero_classes[] = 'hero--portrait-' . $data['portrait_style'];
if (!empty($data['portrait_shape'])) $_hero_classes[] = 'hero--portrait-' . $data['portrait_shape'];
if (!empty($data['cta_layout']) && $data['cta_layout'] === 'stacked') $_hero_classes[] = 'hero--cta-stacked';
// Hero v2: has-portrait flag for non-split portrait rendering
$_has_portrait = !empty($data['portrait_image']);
if ($_has_portrait) $_hero_classes[] = 'hero--has-portrait';
// Hero v2: has-bg flag for background-aware styling
if (!empty($data['image'])) $_hero_classes[] = 'hero--has-bg';
// Video (Phase video-hero): background vs inline
$_has_video        = !empty($data['video_url']);
$_video_mode       = $data['video_bg_mode'] ?? 'autoplay';
$_video_fit        = $data['video_bg_fit']  ?? 'cover';
$_has_video_bg     = $_has_video && ($data['video_display'] ?? '') !== 'inline';
$_has_video_inline = $_has_video && ($data['video_display'] ?? '') === 'inline';
if ($_has_video_bg) {
    $_hero_classes[] = 'hero--has-video';
    if ($_video_fit === 'contain') $_hero_classes[] = 'hero--video-contain';
}
if ($_has_video_inline) {
    $_hero_classes[] = 'hero--video-inline';
    if (!empty($data['video_inline_size'])) $_hero_classes[] = 'hero--video-size-' . $data['video_inline_size'];
}
// Cinematic mode: gradient orbs + particles (when no BG image, no split, no video)
$_is_cinematic = empty($data['image']) && empty($data['layout_mode']) && !$_has_video;
if ($_is_cinematic) $_hero_classes[] = 'hero--cinematic';
$_hero_class_str = implode(' ', $_hero_classes);
// Split: portrait OR inline video in split mode
$_is_boxed         = (!empty($data['layout_mode']) && $data['layout_mode'] === 'boxed');
$_is_split_portrait = (!empty($data['layout_mode']) && $data['layout_mode'] === 'split' && $_has_portrait);
$_is_split_video    = (!empty($data['layout_mode']) && $data['layout_mode'] === 'split' && $_has_video_inline);
$_is_split          = $_is_split_portrait || $_is_split_video;
// Background image: only when no background video active
$_bg_style = (!$_has_video_bg && !empty($data['image'])) ? "background-image: url('/uploads/" . e($data['image']) . "')" : '';
// Video mime helper
$_vMime = static function (string $url): string {
    return match(strtolower(pathinfo($url, PATHINFO_EXTENSION))) {
        'webm' => 'video/webm', 'ogv' => 'video/ogg', 'mov' => 'video/quicktime', default => 'video/mp4'
    };
};
?>
<section id="<?= e($sectionId) ?>" class="<?= e($_hero_class_str) ?>"<?php if ($_bg_style && !$_is_boxed): ?> style="<?= $_bg_style ?>"<?php endif; ?>>
    <?php if ($_has_video_bg): ?>
    <video class="hero-video-bg"
           <?php if ($_video_mode !== 'manual'): ?>autoplay muted loop playsinline<?php else: ?>controls<?php endif; ?>
           <?php if (!empty($data['video_poster'])): ?>poster="/uploads/<?= e($data['video_poster']) ?>"<?php elseif (!empty($data['image'])): ?>poster="/uploads/<?= e($data['image']) ?>"<?php endif; ?>>
        <source src="/uploads/<?= e($data['video_url']) ?>" type="<?= $_vMime($data['video_url']) ?>">
    </video>
    <?php endif; ?>
    <?php if ($_is_cinematic): ?>
    <div class="hero-orb hero-orb--1" aria-hidden="true"></div>
    <div class="hero-orb hero-orb--2" aria-hidden="true"></div>
    <div class="hero-orb hero-orb--3" aria-hidden="true"></div>
    <div class="hero-particle" aria-hidden="true"></div>
    <div class="hero-particle" aria-hidden="true"></div>
    <div class="hero-particle" aria-hidden="true"></div>
    <div class="hero-particle" aria-hidden="true"></div>
    <div class="hero-particle" aria-hidden="true"></div>
    <?php endif; ?>
    <div class="container"<?php if ($_bg_style && $_is_boxed): ?> style="<?= $_bg_style ?>"<?php endif; ?>>
        <?php if ($_is_cinematic): ?><div class="hero-content"><?php endif; ?>
        <?php if ($_is_split): ?>
        <div class="hero-split-inner">
        <div class="hero-text">
        <?php endif; ?>
        <?php if ($_has_portrait && !$_is_split_portrait): ?>
        <div class="hero-portrait-wrap hero-portrait-inline">
            <img src="/uploads/<?= e($data['portrait_image']) ?>" alt="<?= e($data['portrait_alt'] ?? '') ?>" class="hero-portrait">
        </div>
        <?php endif; ?>
        <?php if (!empty($data['eyebrow'])): ?>
        <span class="hero-eyebrow"><?= e($data['eyebrow']) ?></span>
        <?php endif; ?>
        <h1 class="hero-title"><?php
            $title = e($data['title'] ?? '');
            $highlight = trim($data['highlight_word'] ?? '');
            if ($highlight !== '' && str_contains($title, e($highlight))) {
                echo str_replace(e($highlight), '<span class="hero-title-accent">' . e($highlight) . '</span>', $title);
            } else {
                echo $title;
            }
        ?></h1>
        <?php if (!empty($data['subtitle'])): ?>
        <p class="hero-subtitle"><?= e($data['subtitle']) ?></p>
        <?php endif; ?>
        <?php if (!empty($data['cta_text']) || !empty($data['cta2_text'])): ?>
        <?php
        $_cta_style  = '';
        $_cta2_style = '';
        if (!empty($data['cta_bg']))    $_cta_style  .= 'background:' . e($data['cta_bg']) . ';';
        if (!empty($data['cta_color'])) $_cta_style  .= 'color:' . e($data['cta_color']) . ';';
        if (!empty($data['cta2_bg']))    $_cta2_style .= 'background:' . e($data['cta2_bg']) . ';';
        if (!empty($data['cta2_color'])) $_cta2_style .= 'color:' . e($data['cta2_color']) . ';';
        ?>
        <div class="hero-ctas">
            <?php if (!empty($data['cta_text'])): ?>
            <a href="<?= e($data['cta_url'] ?? '#') ?>" class="btn btn-hero"<?php if ($_cta_style): ?> style="<?= $_cta_style ?>"<?php endif; ?>><?= e($data['cta_text']) ?></a>
            <?php endif; ?>
            <?php if (!empty($data['cta2_text'])): ?>
            <a href="<?= e($data['cta2_url'] ?? '#') ?>" class="btn btn-secondary"<?php if ($_cta2_style): ?> style="<?= $_cta2_style ?>"<?php endif; ?>><?= e($data['cta2_text']) ?></a>
            <?php endif; ?>
        </div>
        <?php endif; ?>
        <?php if ($_has_video_inline && !$_is_split_video): ?>
        <div class="hero-video-inline-wrap hero-video-inline-wrap--center">
            <video class="hero-video-inline"
                   <?php if ($_video_mode !== 'manual'): ?>autoplay muted loop playsinline<?php else: ?>controls<?php endif; ?>
                   <?php if (!empty($data['video_poster'])): ?>poster="/uploads/<?= e($data['video_poster']) ?>"<?php elseif (!empty($data['image'])): ?>poster="/uploads/<?= e($data['image']) ?>"<?php endif; ?>>
                <source src="/uploads/<?= e($data['video_url']) ?>" type="<?= $_vMime($data['video_url']) ?>">
            </video>
        </div>
        <?php endif; ?>
        <?php if ($_is_split): ?>
        </div><!-- /.hero-text -->
        <?php if ($_is_split_portrait): ?>
        <div class="hero-portrait-wrap">
            <img src="/uploads/<?= e($data['portrait_image']) ?>" alt="<?= e($data['portrait_alt'] ?? '') ?>" class="hero-portrait">
        </div>
        <?php elseif ($_is_split_video): ?>
        <div class="hero-video-inline-wrap">
            <video class="hero-video-inline"
                   <?php if ($_video_mode !== 'manual'): ?>autoplay muted loop playsinline<?php else: ?>controls<?php endif; ?>
                   <?php if (!empty($data['video_poster'])): ?>poster="/uploads/<?= e($data['video_poster']) ?>"<?php elseif (!empty($data['image'])): ?>poster="/uploads/<?= e($data['image']) ?>"<?php endif; ?>>
                <source src="/uploads/<?= e($data['video_url']) ?>" type="<?= $_vMime($data['video_url']) ?>">
            </video>
        </div>
        <?php endif; ?>
        </div><!-- /.hero-split-inner -->
        <?php endif; ?>
        <?php if ($_is_cinematic): ?></div><!-- /.hero-content --><?php endif; ?>
    </div>
</section>
