<?php

/* =========================================================
   COMPLETE BLISS - AUTOMATIC HERO SLIDES
========================================================= */

$heroDirectory =
    __DIR__ . '/../assets/images/hero/';

$heroWebPath =
    'public-site/assets/images/hero/';

$heroExtensions = [
    'jpg',
    'jpeg',
    'png',
    'webp'
];

$heroSlides = [];


if (is_dir($heroDirectory)) {

    $heroFiles =
        scandir($heroDirectory);


    foreach ($heroFiles as $heroFile) {

        if (
            $heroFile === '.' ||
            $heroFile === '..'
        ) {
            continue;
        }


        $heroFullPath =
            $heroDirectory . $heroFile;


        if (!is_file($heroFullPath)) {
            continue;
        }


        $heroExtension =
            strtolower(
                pathinfo(
                    $heroFile,
                    PATHINFO_EXTENSION
                )
            );


        if (
            !in_array(
                $heroExtension,
                $heroExtensions,
                true
            )
        ) {
            continue;
        }


        $heroSlides[] =
            $heroWebPath .
            rawurlencode($heroFile);

    }

}


/* Keep filenames in a predictable order */

sort(
    $heroSlides,
    SORT_NATURAL |
    SORT_FLAG_CASE
);

?>


<section class="cbx-slider-hero" id="home">

    <!-- BACKGROUND SLIDES -->

   <div class="cbx-slider-background">

    <?php foreach ($heroSlides as $index => $slide): ?>

        <div
            class="cbx-bg-slide <?= $index === 0 ? 'active' : '' ?>"
            style="background-image:
                url('<?= htmlspecialchars($slide) ?>');"
        ></div>

    <?php endforeach; ?>

</div>


    <!-- DARK OVERLAY -->

    <div class="cbx-slider-overlay"></div>


    <!-- CONTENT -->

    <div class="cbx-container cbx-slider-container">

        <div class="cbx-slider-content">

            <div class="cbx-slider-badge">

                <i class="fa-solid fa-shield-heart"></i>

                <span>
                    Plan. Contribute. Achieve.
                </span>

            </div>


            <h1 class="cbx-slider-title">

                Plan Today.

                <span>
                    Enjoy Tomorrow.
                </span>

            </h1>


            <p class="cbx-slider-text">

                Join flexible contribution schemes designed around
                real everyday needs — food packages, household
                essentials, savings goals and more.

            </p>


            <div class="cbx-slider-buttons">

                <a
                    href="#schemes"
                    class="cbx-slider-primary"
                >

                    Explore Our Schemes

                    <i class="fa-solid fa-arrow-right"></i>

                </a>


                <a
                    href="register.php"
                    class="cbx-slider-secondary"
                >

                    <i class="fa-solid fa-user-plus"></i>

                    Become a Member

                </a>

            </div>


            <!-- TRUST ITEMS -->

            <div class="cbx-slider-trust">

                <div class="cbx-slider-trust-item">

                    <i class="fa-solid fa-circle-check"></i>

                    <span>
                        Transparent Contribution Tracking
                    </span>

                </div>


                <div class="cbx-slider-trust-item">

                    <i class="fa-solid fa-circle-check"></i>

                    <span>
                        Flexible Contribution Schemes
                    </span>

                </div>


                <div class="cbx-slider-trust-item">

                    <i class="fa-solid fa-circle-check"></i>

                    <span>
                        Personal Member Dashboard
                    </span>

                </div>

            </div>

        </div>


        <!-- SLIDER CONTROLS -->

        <div class="cbx-slider-controls">

            <button
                class="cbx-slider-arrow cbx-slider-prev"
                type="button"
                aria-label="Previous slide"
            >
                <i class="fa-solid fa-chevron-left"></i>
            </button>


<div class="cbx-slider-dots">

    <?php foreach ($heroSlides as $index => $slide): ?>

        <button
            type="button"
            class="cbx-slider-dot <?= $index === 0 ? 'active' : '' ?>"
            aria-label="Go to slide <?= $index + 1 ?>"
        ></button>

    <?php endforeach; ?>

</div>


            <button
                class="cbx-slider-arrow cbx-slider-next"
                type="button"
                aria-label="Next slide"
            >
                <i class="fa-solid fa-chevron-right"></i>
            </button>

        </div>

    </div>

</section>