<?php

ob_start();

?>

<?php if (!empty($bannerLogo['src'])): ?>
    <section class="banner">
        <div class="banner__img-wrp">
            <img class="banner__img redirect-js" src="<?= htmlspecialchars($bannerLogo['src']) ?>" alt="<?= htmlspecialchars($bannerLogo['alt'] ?? '') ?>" title="<?= htmlspecialchars($bannerLogo['title'] ?? '') ?>">
        </div>
    </section>
<?php endif; ?>


<?php print_arr($containts); ?>


<div class="section-wrapper container">
    <!-- Table of Contents -->
    <?php if (!empty($containts)): ?>
        <div class="toc">
            <div class="toc__header">
                <h2 class="toc__title">Contents</h2>
            </div>
            <div class="toc__content">
                <ol class="toc__list">
                    <?php foreach ($containts as $item): ?>
                        <li class="toc__item">
                            <a href="#<?= htmlspecialchars($item['id']) ?>" class="toc__link">
                                <?= htmlspecialchars($item['text']) ?>
                            </a>
                            <?php if (!empty($item['h3'])): ?>
                                <ul class="toc__list toc__list--nested">
                                    <?php foreach ($item['h3'] as $subItem): ?>
                                        <li class="toc__item">
                                            <a href="#<?= htmlspecialchars($subItem['id']) ?>" class="toc__link">
                                                <?= htmlspecialchars($subItem['text']) ?>
                                            </a>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            <?php endif; ?>
                        </li>
                    <?php endforeach; ?>
                </ol>
            </div>
        </div>
    <?php endif; ?>

    <section class="section text">
        <?= $topContent ?>
        <div class="btn-wrapper">
            <button class="btn btn--accent">Click Here to Learn More</button>
        </div>
    </section>
    <section class="section">
        <h2 class="section__title">List slots</h2>

        <div class="slots-grid">
            <?php foreach($slots as $slot){ ?>
                <div class="slot-item">
                    <div class="slot-item__inner">
                        <div class="slot-item__thumbnail"><img src="<?=  $slot['image'] ?>" alt=""></div>
                        <div class="slot-item__provider"><?=  $slot['provider'] ?></div>
                        <div class="slot-item__rtp">RTP: <?=  $slot['rtp'] ?></div>
                    </div>
                    <div class="slot-item__title">
                        <span class="slot-item__title-txt"><?=  $slot['name'] ?></span>
                        <span class="slot-item__icon">
                            <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 19 19" >
                                <path d="M6.55372 5.82431C6.55379 5.39309 6.90345 5.04348 7.33466 5.04338L12.6975 5.04338C13.1287 5.04345 13.4784 5.39307 13.4784 5.82431L13.4784 11.1871C13.4783 11.6183 13.1287 11.968 12.6975 11.9681C12.2662 11.9681 11.9167 11.6184 11.9165 11.1871V7.70977L6.37666 13.2497C6.07165 13.5547 5.57714 13.5547 5.27213 13.2497C4.96712 12.9447 4.96712 12.4501 5.27213 12.1451L10.812 6.60525L7.33466 6.60525C6.9034 6.60514 6.55372 6.25559 6.55372 5.82431Z"/>
                                <path d="M13.3333 16.6667V18.3333H5V16.6667H13.3333ZM16.6667 13.3333V5C16.6667 3.15905 15.1743 1.66667 13.3333 1.66667H5C3.15905 1.66667 1.66667 3.15905 1.66667 5V13.3333C1.66667 15.1743 3.15905 16.6667 5 16.6667V18.3333L4.74284 18.3268C2.1861 18.1973 0.136042 16.1472 0.00651042 13.5905L0 13.3333V5C0 2.32482 2.10092 0.140357 4.74284 0.00651042L5 0H13.3333L13.5905 0.00651042C16.2324 0.140357 18.3333 2.32482 18.3333 5V13.3333L18.3268 13.5905C18.1973 16.1472 16.1472 18.1973 13.5905 18.3268L13.3333 18.3333V16.6667C15.1743 16.6667 16.6667 15.1743 16.6667 13.3333Z" />
                            </svg>
                        </span>
                    </div>
                </div>
            <?php  } ?>
        </div>

    </section>
    <section class="section text">
        <?=  $pageContent  ?>
        <div class="btn-wrapper">
            <button class="btn btn--accent">Get Started Now</button>
        </div>
    </section>


    <!-- FAQ Section -->
    <?php if (!empty($faqItems)): ?>
        <section class="section">
            <h2 class="faq__title"><?= htmlspecialchars($faqItems[0]['title'] ?? 'Frequently Asked Questions') ?></h2>
            <div class="faq">
                <?php
                $faqData = $faqItems[0]['extra_fields'] ?? [];
                foreach ($faqData as $index => $faq):
                ?>
                    <div class="faq__item">
                        <div class="faq__question">
                            <span class="faq__number"><?= $index + 1 ?></span>
                            <div class="faq__question-title"><?= htmlspecialchars($faq['question'] ?? '') ?></div>
                        </div>
                        <div class="faq__answer">
                            <div class="faq__answer-inner">
                                <?= $faq['answer'] ?? '' ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </section>
    <?php endif; ?>


    <?php if (!empty($author)): ?>
        <section class="section">
            <div class="author">
                <div class="author__img">
                    <img src="/<?= htmlspecialchars($author['image']) ?>" alt="<?= htmlspecialchars($author['name'] ?? '') ?>" title="<?= htmlspecialchars($author['name'] ?? '') ?>">
                </div>
                <div class="author__info">
                    <div class="author__name-header">
                        <div class="author__name">
                            <span class="author__name-n">Autore:</span>
                            <span class="author__name-v"><?= htmlspecialchars($author['name'] ?? '') ?></span>
                        </div>
                        <div class="author__date">
                            <span class="author__date-name">Last updated:</span>
                            <span class="author__date-name"><?= date('M d, Y', strtotime($author['updated_at'])) ?></span>
                        </div>
                    </div>
                    <?php if (!empty($author['description'])): ?>
                        <div class="author__description"><?= htmlspecialchars($author['description']) ?></div>
                    <?php endif; ?>
                </div>
            </div>
        </section>
    <?php endif; ?>

</div>


<?php
$pageContent = ob_get_clean();
include __DIR__ . '/layouts/main.php';
?>