<?php
// CTA Section Component
$ctaStatus = $dbThemeConfig['cta_status'] ?? 'inativo';
if ($ctaStatus !== 'ativo')
    return;

$ctaTitulo = $dbThemeConfig['cta_titulo'] ?? '';
$ctaTexto = $dbThemeConfig['cta_texto'] ?? '';
$ctaImagem = $dbThemeConfig['cta_imagem'] ?? '';
$ctaBtn1Texto = $dbThemeConfig['cta_btn1_texto'] ?? '';
$ctaBtn1Link = $dbThemeConfig['cta_btn1_link'] ?? '#';
$ctaBtn1Status = $dbThemeConfig['cta_btn1_status'] ?? 'inativo';
$ctaBtn2Texto = $dbThemeConfig['cta_btn2_texto'] ?? '';
$ctaBtn2Link = $dbThemeConfig['cta_btn2_link'] ?? '#';
$ctaBtn2Status = $dbThemeConfig['cta_btn2_status'] ?? 'inativo';

$imgUrl = !empty($ctaImagem) ? "../adm/uploads/cta/" . $ctaImagem : "https://via.placeholder.com/1920x600";
?>

<!-- CTA Start -->
<div class="container-fluid cta-section py-5 wow fadeInUp" data-wow-delay="0.1s"
    style="background: linear-gradient(rgba(9, 30, 62, 0.7), rgba(9, 30, 62, 0.7)), url('<?= $imgUrl ?>') center center no-repeat; background-size: cover; background-attachment: fixed; margin-top: 90px;">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <div class="section-title mb-4 text-center">
                    <h5 class="position-relative d-inline-block text-primary text-uppercase"
                        style="background: rgba(255,255,255,0.1); padding: 5px 15px; border-radius: 5px;">Ação Exclusiva
                    </h5>
                    <h1 class="display-4 text-white mb-0" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
                        <?= htmlspecialchars($ctaTitulo) ?></h1>
                </div>
                <p class="text-white mb-5 fs-5" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">
                    <?= nl2br(htmlspecialchars($ctaTexto)) ?></p>

                <div class="d-flex justify-content-center gap-3 flex-wrap mb-5">
                    <?php if ($ctaBtn1Status === 'ativo'): ?>
                        <a href="<?= htmlspecialchars($ctaBtn1Link) ?>"
                            class="btn btn-primary py-3 px-5 fw-bold shadow-lg hover-up">
                            <?= htmlspecialchars($ctaBtn1Texto) ?>
                        </a>
                    <?php endif; ?>

                    <?php if ($ctaBtn2Status === 'ativo'): ?>
                        <a href="<?= htmlspecialchars($ctaBtn2Link) ?>"
                            class="btn btn-light py-3 px-5 fw-bold shadow-lg hover-up">
                            <?= htmlspecialchars($ctaBtn2Texto) ?>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .cta-section {
        position: relative;
        padding-bottom: 0 !important;
        /* Reset bottom padding to let strips sit at the edge */
    }

    .cta-contact-strips {
        margin-top: -50px;
        position: relative;
        z-index: 10;
    }

    .cta-contact-strips .row {
        border-radius: 10px;
        overflow: hidden;
    }

    .hover-up {
        transition: all 0.3s ease;
        border-radius: 0 !important;
        /* Força botões quadrados */
    }

    .cta-contact-strips .btn {
        border-radius: 0 !important;
        /* Força botões quadrados nas faixas */
    }

    .hover-up:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2) !important;
    }

    @media (max-width: 991px) {
        .cta-section {
            background-attachment: scroll !important;
        }
    }
</style>
<!-- CTA End -->