<?php
// Configurações da seção typewriter
$twStatus = $dbThemeConfig['typewriter_status'] ?? 'ativo';
if ($twStatus !== 'ativo') return;

$resFr = $conn->query("SELECT titulo, texto FROM frases_typewriter WHERE ativo=1 ORDER BY posicao ASC, id ASC");
$frArr = [];
if ($resFr) {
    while ($fr = $resFr->fetch_assoc()) {
        $frArr[] = ['titulo' => $fr['titulo'], 'texto' => $fr['texto']];
    }
}

// Se não houver nenhuma frase, simplesmente oculta a seção inteira
if (empty($frArr)) return;

$twImagem = $dbThemeConfig['typewriter_imagem'] ?? '';

$twImgUrl = !empty($twImagem) ? "adm/uploads/typewriter/" . $twImagem : "";
// Ajuste de path se estiver dentro de uma subpasta (ex: catalogo)
if (!file_exists($twImgUrl) && file_exists("../adm/uploads/typewriter/" . $twImagem)) {
    $twImgUrl = "../adm/uploads/typewriter/" . $twImagem;
}
?>

<!-- ══ FRASE ANIMADA (TYPEWRITER) ═══════════════════════════════════════════════════════ -->
<div class="container-fluid typewriter-section my-5 wow fadeInUp" data-wow-delay="0.1s" 
     style="<?= !empty($twImgUrl) ? "background: linear-gradient(rgba(9, 30, 62, 0.7), rgba(9, 30, 62, 0.7)), url('".$twImgUrl."') center center no-repeat; background-size: cover; background-attachment: fixed;" : "background: var(--color-primary);" ?> padding: 100px 0;">
    <div class="container">
        <div class="row gx-5">
            <div class="col-lg-12" align="center">

                <div align="center">
                    <h1 align="center" id="titulo-digitando" class="display-5 text-white mb-4 typewriter" style="min-height: 1.2em;"></h1>
                    <p align="center" id="texto-digitando" class="text-white mb-0 typewriter" style="font-size: 1.2rem; opacity: 0.9; min-height: 1.5em;"></p>
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    const conteudos = <?= json_encode($frArr, JSON_UNESCAPED_UNICODE) ?>;

    const tituloEl = document.getElementById("titulo-digitando");
    const textoEl = document.getElementById("texto-digitando");

    let typeIndex = 0;
    let charIndex = 0;
    let apagando = false;

    const velDigitar = 35;
    const velApagar = 20;
    const pausa = 2000;

    function animar() {
        if (!conteudos.length) return;
        const atual = conteudos[typeIndex];
        tituloEl.textContent = atual.titulo.substring(0, Math.min(charIndex, atual.titulo.length));
        textoEl.textContent = atual.texto.substring(0, Math.min(charIndex, atual.texto.length));

        if (!apagando) {
            charIndex++;
            if (charIndex > Math.max(atual.titulo.length, atual.texto.length)) {
                apagando = true;
                setTimeout(animar, pausa);
                return;
            }
            setTimeout(animar, velDigitar);
        } else {
            charIndex--;
            if (charIndex <= 0) {
                apagando = false;
                typeIndex = (typeIndex + 1) % conteudos.length;
                setTimeout(animar, 300);
                return;
            }
            setTimeout(animar, velApagar);
        }
    }

    document.addEventListener("DOMContentLoaded", () => {
        animar();
    });
</script>
<!-- ══ FIM FRASE ANIMADA (TYPEWRITER) ═══════════════════════════════════════════════════════ -->