<?php
$page_title = 'Inicio';
$meta_desc  = 'Servicios DEMO Seguridad Privada — Innovamos y profesionalizamos la seguridad privada en el Bajío.';
$current_page = 'inicio';
require_once 'config/conn.php';
require_once 'includes/banner.php';
require_once 'includes/navbar.php';

// ── Últimos 6 avisos publicados ─────────────────────────────
$av_recientes = [];
$av_total = 0;
try {
    $av_stmt = $conn->prepare(
        "SELECT id, titulo, resumen, fecha_publicacion, banner_path
         FROM av_avisos
         WHERE estado = 'publicado' AND fecha_publicacion <= CURDATE()
         ORDER BY fecha_publicacion DESC, id DESC
         LIMIT 6"
    );
    $av_stmt->execute();
    $av_recientes = $av_stmt->get_result()->fetch_all(MYSQLI_ASSOC);
    $av_stmt->close();

    $av_total_q = $conn->query("SELECT COUNT(*) AS n FROM av_avisos WHERE estado='publicado' AND fecha_publicacion <= CURDATE()");
    $av_total   = (int)$av_total_q->fetch_assoc()['n'];
} catch (Exception $e) {
    // Tabla aún no existe — el sitio sigue funcionando sin avisos
    $av_recientes = [];
    $av_total = 0;
}

function fecha_aviso_card(string $fecha): string {
    $meses = ['','enero','febrero','marzo','abril','mayo','junio',
              'julio','agosto','septiembre','octubre','noviembre','diciembre'];
    [$y, $m, $d] = explode('-', $fecha);
    return ucfirst($meses[(int)$m]) . ' ' . (int)$d . ', ' . $y;
}
?>

<!-- ══════════════════════════════════════════════════
     HERO PRINCIPAL
     ════════════════════════════════════════════════ -->
<section class="home-hero">
    <div class="home-hero-inner">
        <div class="home-hero-art">
            <div class="home-hero-art-frame">
                <picture>
                    <source media="(max-width: 768px)" srcset="img/FondoMovil.png">
                    <img src="img/ImgBanner.png" alt="Equipo Servicios DEMO — Igualdad y respeto" loading="lazy">
                </picture>
            </div>
        </div>
    </div>
</section>

<!-- ════════════════════════════════════════════════
     AVISOS RECIENTES
     ════════════════════════════════════════════════ -->
<section class="section section-white" id="avisos">
    <div class="wrapper">
        <div class="section-head centered">
            <div class="section-eyebrow">Novedades institucionales</div>
            <h2 class="section-title">Avisos Recientes</h2>
            <div class="section-rule"></div>
        </div>

        <div class="avisos-grid">

            <?php if (empty($av_recientes)): ?>
            <div style="grid-column:1/-1;text-align:center;padding:2rem 0;color:var(--c-muted)">
                Aún no hay avisos publicados.
            </div>
            <?php else: ?>
            <?php foreach ($av_recientes as $av): ?>
            <article class="aviso-card">
                <?php if ($av['banner_path']): ?>
                <div style="margin:-1.4rem -1.4rem .9rem;overflow:hidden">
                    <img src="<?= htmlspecialchars($av['banner_path'], ENT_QUOTES) ?>"
                        alt="<?= htmlspecialchars($av['titulo'], ENT_QUOTES) ?>"
                        style="width:100%;height:140px;object-fit:cover;display:block" loading="lazy">
                </div>
                <?php endif; ?>
                <time class="aviso-date"><?= fecha_aviso_card($av['fecha_publicacion']) ?></time>
                <h3><?= htmlspecialchars($av['titulo'], ENT_QUOTES) ?></h3>
                <?php if ($av['resumen']): ?>
                <p><?= htmlspecialchars($av['resumen'], ENT_QUOTES) ?></p>
                <?php endif; ?>
                <a href="pages/aviso.php?id=<?= $av['id'] ?>" class="read-more">Leer más ›</a>
            </article>
            <?php endforeach; ?>
            <?php endif; ?>

        </div>

        <div style="text-align:center;margin-top:2.5rem">
            <a href="pages/avisos-lista.php" class="btn btn-primary">
                Ver todos los avisos<?= $av_total > 6 ? ' (' . $av_total . ')' : '' ?>
            </a>
        </div>
    </div>
</section>

<!-- ══════════════════════════════════════════════════
     MISIÓN · VISIÓN · VALORES
     ══════════════════════════════════════════════════ -->
<section class="section section-light" id="filosofia">
    <div class="wrapper">
        <div class="section-head centered">
            <div class="section-eyebrow">Filosofía institucional</div>
            <h2 class="section-title">Misión, Visión y Valores</h2>
            <div class="section-rule"></div>
        </div>

        <div class="mvv-wrap">

            <!-- Misión -->
            <article class="mvv-panel">
                <div class="mvv-kicker">Nuestro propósito</div>
                <h3>Misión</h3>
                <p>Innovar y profesionalizar la seguridad privada, creando alianzas empresa–cliente. Asegurando su plena
                    satisfacción mediante la mejora continua y retroalimentación, de tal forma que podamos ofrecer la
                    mejor calidad en nuestros servicios, teniendo siempre en mente nuestro compromiso con la
                    satisfacción de sus necesidades.</p>
            </article>

            <!-- Visión -->
            <article class="mvv-panel">
                <div class="mvv-kicker">Hacia dónde vamos</div>
                <h3>Visión</h3>
                <p>Ser una empresa reconocida en la región como la mejor en <strong>Innovación, Calidad y
                        Servicio</strong>. Como prestadora de servicios profesionales en materia de seguridad privada,
                    manteniendo altos estándares de calidad y alcanzando el liderazgo con personal altamente
                    <strong>Capacitado, Honesto y Comprometido</strong>.
                </p>
            </article>

            <!-- Valores -->
            <article class="mvv-panel">
                <div class="mvv-kicker">Lo que nos distingue</div>
                <h3>Valores</h3>
                <p>Los principios que rigen cada acción de nuestra organización:</p>
                <div class="valores-chips">
                    <span class="chip">Honestidad</span>
                    <span class="chip">Calidad</span>
                    <span class="chip">Compromiso</span>
                    <span class="chip">Responsabilidad</span>
                    <span class="chip">Comunicación</span>
                    <span class="chip">Liderazgo</span>
                    <span class="chip">Trabajo en Equipo</span>
                </div>
            </article>

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

<!-- ══════════════════════════════════════════════════
     POLÍTICA DE CALIDAD
     ══════════════════════════════════════════════════ -->
<section class="section section-white">
    <div class="wrapper">
        <div class="politica-box">
            <div class="section-eyebrow">Compromiso institucional</div>
            <h2 class="section-title" style="color:#fff;margin-top:.4rem">Política de Calidad</h2>
            <div class="section-rule" style="margin-top:.7rem"></div>
            <p class="politica-text">
                En Servicios DEMO Seguridad Privada, nos comprometemos a ofrecer soluciones integrales de seguridad
                intramuros y servicios de limpieza, enfocados en satisfacer las expectativas de nuestros clientes,
                cumpliendo con los más altos estándares de calidad, y requisitos legales y reglamentarios aplicables,
                todo ello bajo un enfoque de <strong style="color:#62D9D9">Mejora Continua</strong> en nuestro Sistema
                de Gestión de Calidad.
            </p>
            <p class="politica-text">
                Esta política de calidad es revisada periódicamente para garantizar su adecuación y eficacia en el
                cumplimiento de nuestros objetivos de calidad, asegurando que todos nuestros empleados, proveedores y
                socios conozcan y participen en su implementación.
            </p>
            <a href="pages/politicas/politica-calidad.php" class="btn btn-outline-light" style="margin-top:2rem">
                Ver nuestras políticas ›
            </a>
        </div>
    </div>
</section>

<!-- ══════════════════════════════════════════════════
     CERTIFICACIONES Y DISTINTIVOS
     ══════════════════════════════════════════════════ -->
<section class="section section-light" id="certificaciones">
    <div class="wrapper">
        <div class="section-head centered">
            <div class="section-eyebrow">Respaldo y calidad</div>
            <h2 class="section-title">Certificaciones y Distintivos</h2>
            <div class="section-rule"></div>
            <p
                style="margin-top:1rem;color:var(--c-muted);font-size:.92rem;max-width:580px;margin-left:auto;margin-right:auto">
                Nuestras certificaciones avalan el compromiso con la calidad, legalidad y las mejores prácticas
                laborales.
            </p>
            <p
                style="margin-top:1rem;color:var(--c-muted);font-size:.92rem;max-width:580px;margin-left:auto;margin-right:auto">
                Comité de Igualdad Laboral y No Discriminación; Presidencia: Luis Alfonso Campos Montaño y Secretaría:
                Elizabeth González Coria.
            </p>
        </div>

        <div class="certs-grid">

            <button type="button" class="cert-card" data-cert="1">
                <img src="img/certificacion1.png" alt="Distintivo Marca Guanajuato"
                    onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
                <div class="cert-placeholder" style="display:none">🏅</div>
                <h4>Marca Guanajuato</h4>
                <p>Calidad hecha en Guanajuato</p>
            </button>

            <button type="button" class="cert-card" data-cert="2">
                <img src="img/certificacion2.png" alt="Red de Empresas Incluyentes"
                    onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
                <div class="cert-placeholder" style="display:none">🏆</div>
                <h4>Red Empresas Incluyentes</h4>
                <p>Distintivo Municipal</p>
            </button>

            <button type="button" class="cert-card" data-cert="3">
                <img src="img/certificacion3.png" alt="Empresa Responsabilidad SocioLaboral"
                    onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
                <div class="cert-placeholder" style="display:none">✅</div>
                <h4>Responsabilidad SocioLaboral</h4>
                <p>Gobierno del Estado</p>
            </button>

            <button type="button" class="cert-card" data-cert="4">
                <img src="img/certificacion4.png" alt="Buenas Prácticas Ambientales"
                    onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
                <div class="cert-placeholder" style="display:none">🌱</div>
                <h4>Buenas Prácticas Ambientales</h4>
                <p>PAOT Guanajuato</p>
            </button>

            <button type="button" class="cert-card" data-cert="5">
                <img src="img/certificacion5.png" alt="Mujer A Salvo"
                    onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
                <div class="cert-placeholder" style="display:none">🛡️</div>
                <h4>Mujer A Salvo</h4>
                <p>Red de Espacios Seguros</p>
            </button>

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

<?php require_once 'includes/footer.php'; ?>