<?php
$hero_image = HERO_IMG;
$bgStyle = '';
$bgUrl = !empty(HERO_BG)
    ? HERO_BG
    : 'templates/webengine/assets/img/hero-bg.webp';
$overlayPercent = defined('HERO_BG_OVERLAY') ? (int)HERO_BG_OVERLAY : 50;

// Keep safe range
if ($overlayPercent < 0) $overlayPercent = 0;
if ($overlayPercent > 90) $overlayPercent = 90;

$opacity = $overlayPercent / 100;

if (HERO_BG_OVERLAY_ACCENT == 1) {
    $overlay = "rgba(var(--we-accent-rgb), $opacity)";
} else {
    $overlay = "rgba(0,0,0, $opacity)";
}

$bgStyle = "background-image: linear-gradient($overlay, $overlay), url('" . htmlspecialchars($bgUrl, ENT_QUOTES, 'UTF-8') . "');"
          . "background-size:cover;"
          . "background-repeat:no-repeat;"
          . "background-position:top center;";
?>
<section id="hero" class="hero d-flex align-items-center" style="<?= $bgStyle ?>">
  <div class="container d-flex flex-column align-items-center position-relative" data-aos="zoom-out">
		<h1><?php echo TEXT_HERO_TITLE; ?></h1>
		<h3><?php echo TEXT_HERO_SUBTITLE; ?></h3>
    <div class="d-flex">
        <a href="featured_categories.php" class="btn btn-hero--accent btn-lg"><?php echo TEXT_GET_TICKETS; ?></a>
    </div>
  </div>
</section>