<?php
/**
 * Hero / Slider Section
 *
 * @var array $settings
 */

$slides = $settings['slides'] ?? [];

if (!is_array($slides) || empty($slides)) {
    return;
}

$totalSlides = count($slides);
?>

<section class="home-section hero-section">
    <div class="hero-slider" data-slides="<?= $totalSlides ?>">

        <?php foreach ($slides as $index => $slide): ?>
            <?php
                $image = $slide['image'] ?? '';
                if (!$image) continue;
            ?>

            <div class="hero-slide <?= $index === 0 ? 'is-active' : '' ?>"
                 style="background-image: url('<?= htmlspecialchars($image, ENT_QUOTES) ?>');">

                <div class="hero-overlay">
                    <div class="container">
                        <div class="hero-content">

                            <?php if (!empty($slide['title'])): ?>
                                <h1 class="hero-title">
                                    <?= htmlspecialchars($slide['title'], ENT_QUOTES) ?>
                                </h1>
                            <?php endif; ?>

                            <?php if (!empty($slide['subtitle'])): ?>
                                <p class="hero-subtitle">
                                    <?= nl2br(htmlspecialchars($slide['subtitle'], ENT_QUOTES)) ?>
                                </p>
                            <?php endif; ?>

                            <?php if (!empty($slide['button_text']) && !empty($slide['button_url'])): ?>
                                <a href="<?= htmlspecialchars($slide['button_url'], ENT_QUOTES) ?>"
                                   class="btn btn-primary hero-btn">
                                    <?= htmlspecialchars($slide['button_text'], ENT_QUOTES) ?>
                                </a>
                            <?php endif; ?>

                        </div>
                    </div>
                </div>

            </div>
        <?php endforeach; ?>

    </div>
</section>



<script>
/* ===============================
   HERO SLIDER – FINAL LOGIC
================================ */

document.addEventListener('DOMContentLoaded', function () {

    const slider  = document.querySelector('.hero-slider');
    if (!slider) return;

    const slides  = slider.querySelectorAll('.hero-slide');
    const total   = slides.length;

    // شريحة واحدة → ثابتة
    if (total <= 1) return;

    let index = 0;

    setInterval(() => {
        slides[index].classList.remove('is-active');
        index = (index + 1) % total;
        slides[index].classList.add('is-active');
    }, 5000);

});
</script>
