<?php
// ── Quem Somos — lê do banco com fallback nos valores originais ──────────────
$qs_status          = $dbThemeConfig['qs_status']          ?? 'ativo';
if ($qs_status !== 'ativo') return;

$qs_titulo_topo     = $dbThemeConfig['qs_titulo_topo']     ?? 'Arantes Tecnologia';
$qs_titulo_principal= $dbThemeConfig['qs_titulo_principal'] ?? 'Soluções Digitais para o Seu Negócio';
$qs_subtitulo       = $dbThemeConfig['qs_subtitulo']       ?? 'Há 25 anos ajudando lojistas a vender mais e se destacar no mercado digital.';
$qs_texto           = $dbThemeConfig['qs_texto']           ?? '<p>A Arantes Tecnologia oferece sites, catálogos digitais, sistemas de gestão e registro de domínios. Tudo desenvolvido para dar autonomia e visibilidade ao seu negócio, com atendimento humano e suporte contínuo.</p>';
$qs_item1           = $dbThemeConfig['qs_item1']           ?? 'Equipe Especializada';
$qs_item2           = $dbThemeConfig['qs_item2']           ?? 'Projetos Personalizados';
$qs_item3           = $dbThemeConfig['qs_item3']           ?? 'Atendimento 24/7';
$qs_item4           = $dbThemeConfig['qs_item4']           ?? 'Preço Justo e Transparente';
$qs_btn_texto       = $dbThemeConfig['qs_btn_texto']       ?? 'Fale Conosco no WhatsApp';

// ── Imagens do slideshow ─────────────────────────────────────────────────────
// Prioridade: imagens cadastradas no admin → fallback na pasta imagem1/ → placeholder
$qs_imagens_json = $dbThemeConfig['qs_imagens'] ?? '';
$qs_imagens      = [];
$qs_pasta        = '../adm/uploads/quem_somos/';

if (!empty($qs_imagens_json)) {
    $decoded = json_decode($qs_imagens_json, true);
    if (is_array($decoded) && count($decoded) > 0) {
        $qs_imagens = $decoded;
    }
}

// Fallback: pasta ../imagem1/
if (empty($qs_imagens)) {
    $pastaFisica = __DIR__ . '/../../../imagem1/';
    if (is_dir($pastaFisica)) {
        $arquivos = array_diff(scandir($pastaFisica) ?: [], ['.', '..']);
        $filtradas = array_values(array_filter($arquivos, function($arq) {
            return preg_match('/\.(png|jpg|jpeg|gif|webp)$/i', $arq);
        }));
        if (!empty($filtradas)) {
            $qs_imagens = $filtradas;
            $qs_pasta   = '../imagem1/';
        }
    }
}

// Fallback final: placeholder
if (empty($qs_imagens)) {
    $qs_imagens = ['placeholder.jpg'];
    $qs_pasta   = '../img/';
}
?>
<!-- ══ QUEM SOMOS Start ══════════════════════════════════════════════════════ -->
<div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-7">
                <div class="section-title mb-4">
                    <h5 class="position-relative d-inline-block text-primary text-uppercase">
                        <?= htmlspecialchars($qs_titulo_topo) ?>
                    </h5>
                    <h1 class="text-heading">
                        <?= htmlspecialchars($qs_titulo_principal) ?>
                    </h1>
                </div>

                <h4 class="text-body fst-italic mb-4">
                    <?= htmlspecialchars($qs_subtitulo) ?>
                </h4>

                <div class="mb-4 qs-texto-html">
                    <?= $qs_texto /* HTML do CKEditor — sanitizado ao salvar */ ?>
                </div>

                <div class="row g-3">
                    <div class="col-sm-6 wow zoomIn" data-wow-delay="0.3s">
                        <?php if (!empty($qs_item1)): ?>
                            <h5 class="mb-3"><i class="fa fa-check-circle text-primary me-3"></i><?= htmlspecialchars($qs_item1) ?></h5>
                        <?php endif; ?>
                        <?php if (!empty($qs_item2)): ?>
                            <h5 class="mb-3"><i class="fa fa-check-circle text-primary me-3"></i><?= htmlspecialchars($qs_item2) ?></h5>
                        <?php endif; ?>
                    </div>
                    <div class="col-sm-6 wow zoomIn" data-wow-delay="0.6s">
                        <?php if (!empty($qs_item3)): ?>
                            <h5 class="mb-3"><i class="fa fa-check-circle text-primary me-3"></i><?= htmlspecialchars($qs_item3) ?></h5>
                        <?php endif; ?>
                        <?php if (!empty($qs_item4)): ?>
                            <h5 class="mb-3"><i class="fa fa-check-circle text-primary me-3"></i><?= htmlspecialchars($qs_item4) ?></h5>
                        <?php endif; ?>
                    </div>
                </div>

                <?php if (!empty($whatsappLoja)): ?>
                    <a href="https://wa.me/<?= $whatsappLoja ?>" target="_blank"
                       class="btn btn-primary py-3 px-5 mt-4 wow zoomIn" data-wow-delay="0.6s">
                        <?= htmlspecialchars($qs_btn_texto) ?>
                    </a>
                <?php else: ?>
                    <a href="#" onclick="event.preventDefault(); alert('WhatsApp da loja está indisponível');"
                       class="btn btn-primary py-3 px-5 mt-4 wow zoomIn" data-wow-delay="0.6s">
                        <?= htmlspecialchars($qs_btn_texto) ?>
                    </a>
                <?php endif; ?>
            </div>

            <div class="col-lg-5" style="min-height: 500px;">
                <div class="position-relative h-100">
                    <img id="qs-slide"
                         class="position-absolute w-100 h-100 rounded wow zoomIn"
                         data-wow-delay="0.9s"
                         src="<?= htmlspecialchars($qs_pasta . $qs_imagens[0]) ?>"
                         alt="Slideshow"
                         style="object-fit: cover; transition: opacity 1s;">

                    <script>
                        (function () {
                            const qsImagens = <?= json_encode(array_values($qs_imagens)) ?>;
                            const qsPasta   = <?= json_encode($qs_pasta) ?>;
                            const qsImg     = document.getElementById('qs-slide');
                            let   qsIdx     = 0;

                            if (qsImagens.length > 1) {
                                setInterval(function () {
                                    qsImg.style.opacity = 0;
                                    setTimeout(function () {
                                        qsIdx = (qsIdx + 1) % qsImagens.length;
                                        qsImg.src = qsPasta + qsImagens[qsIdx];
                                        qsImg.style.opacity = 1;
                                    }, 1000);
                                }, 5000);
                            }
                        })();
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ══ QUEM SOMOS End ════════════════════════════════════════════════════════ -->