<?php
/**
 * Ads / Banner Section
 * Supports 1 or 2 ads (clickable)
 */

$settings = $section['settings'] ?? [];
$ads      = $settings['ads'] ?? [];

// Normalize ads array
if (!is_array($ads)) {
    return;
}

// Keep only valid ads
$ads = array_values(array_filter($ads, function ($ad) {
    return !empty($ad['image']);
}));

if (empty($ads)) {
    return;
}

// Limit to max 2 ads
$ads = array_slice($ads, 0, 2);

// Unique base ID
$baseAdsId = 'ads-' . ($section['id'] ?? uniqid());
?>

<section class="home-ads-section reveal">
    <div class="container">

        <div class="ads-grid">

            <?php foreach ($ads as $index => $ad): ?>

                <?php
                $headline       = trim($ad['headline'] ?? '');
                $image          = trim($ad['image'] ?? '');
                $button_url     = trim($ad['button_url'] ?? '');
                $animated_texts = $ad['animated_texts'] ?? [];

                if (!is_array($animated_texts)) {
                    $animated_texts = [];
                }
                $animated_texts = array_values(array_filter($animated_texts));

                $adsId = $baseAdsId . '-' . $index;
                $isClickable = ($button_url && $button_url !== '#');
                ?>

                <?php if ($isClickable): ?>
                    <a href="<?= htmlspecialchars($button_url, ENT_QUOTES, 'UTF-8') ?>"
                       target="_blank"
                       class="ads-item"
                       style="background-image:url('<?= htmlspecialchars($image, ENT_QUOTES, 'UTF-8') ?>')">
                <?php else: ?>
                    <div class="ads-item"
                         style="background-image:url('<?= htmlspecialchars($image, ENT_QUOTES, 'UTF-8') ?>')">
                <?php endif; ?>

                    <div class="ads-overlay">
                        <div class="ads-content">

                            <?php if ($headline): ?>
                                <h2 class="ads-headline">
                                    <?= htmlspecialchars($headline, ENT_QUOTES, 'UTF-8') ?>
                                </h2>
                            <?php endif; ?>

                            <?php if (!empty($animated_texts)): ?>
                                <div class="ads-animated-text">
                                    <span id="<?= $adsId ?>-text"></span>
                                </div>
                            <?php endif; ?>

                        </div>
                    </div>

                <?php if ($isClickable): ?>
                    </a>
                <?php else: ?>
                    </div>
                <?php endif; ?>

                <?php if (!empty($animated_texts)): ?>
                    <script>
                    (function () {
                        const texts = <?= json_encode($animated_texts, JSON_UNESCAPED_UNICODE) ?>;
                        const el = document.getElementById('<?= $adsId ?>-text');
                        if (!el || texts.length === 0) return;

                        let index = 0;
                        let colorToggle = true;

                        function getTiming(text) {
                            const base = 2000;
                            const perChar = 50;
                            const max = 4800;
                            return Math.min(base + text.length * perChar, max);
                        }

                        function showText(text) {
                            el.classList.remove(
                                'show',
                                'is-primary',
                                'is-white',
                                'fx-scale'
                            );

                            setTimeout(() => {
                                el.textContent = text;
                                el.classList.add(
                                    'show',
                                    colorToggle ? 'is-primary' : 'is-white',
                                    'fx-scale'
                                );
                                colorToggle = !colorToggle;
                            }, 120);
                        }

                        // Single sentence
                        if (texts.length === 1) {
                            el.textContent = texts[0];
                            el.classList.add('show', 'is-primary', 'fx-scale');
                            return;
                        }

                        showText(texts[0]);

                        (function loop() {
                            const delay = getTiming(texts[index]);
                            setTimeout(() => {
                                index = (index + 1) % texts.length;
                                showText(texts[index]);
                                loop();
                            }, delay);
                        })();

                    })();
                    </script>
                <?php endif; ?>

            <?php endforeach; ?>

        </div>

    </div>
</section>
