<?php
$titulo_pagina = "Inicio | CQFP Lima";
require_once 'header.php';
?>

<!-- SECCIÓN BANNER + BOTONES A FULL WIDTH -->
<section class="banner-container">
    <!-- BANNER CON TU IMAGEN -->
    <div class="banner">
        <img src="img/portada.png" alt="Colegio Químico Farmacéutico Lima">
    </div>

    <!-- BOTONES LATERALES -->
    <div class="lado-derecho">
        <div class="botones-adaptables-cqfdl">
            <a href="https://intranet.tescanet.com/login" target="_blank" class="boton-adaptable boton-destacado">
                <i class="fas fa-credit-card"></i>
                <div><strong>Pagos en Línea</strong></div>
                <div style="font-size:11px;">Certificado</div>
                <div class="subtitulo">INTRANET</div>
            </a>
            <a href="https://intranet.tescanet.com/habilidad/" target="_blank" class="boton-adaptable boton-colegiados">
                <i class="fas fa-id-card-clip"></i>
                Colegiados
            </a>
            <a href="./" class="boton-adaptable">
                <i class="fas fa-file-medical"></i>
                Mesa Técnica
            </a>
            <a href="pagos.php" class="boton-adaptable">
                <i class="fas fa-credit-card"></i>
                Pagos
            </a>
            <a href="./" class="boton-adaptable">
                <i class="fas fa-handshake-angle"></i>
                Convenios
            </a>
            <a href="./" class="boton-adaptable">
                <i class="fas fa-shield-halved"></i>
                Defensa
            </a>
        </div>
    </div>
</section>

<!-- ===== SECCIÓN DE CONVENIOS ===== -->
<style>
    .convenios-section {
        padding: 50px 20px;
        background: #f4f6f9;
        text-align: center;
        margin: 0;
    }
    .convenios-section h2 {
        font-size: 38px;
        color: #002244;
        margin-bottom: 30px;
        position: relative;
        display: inline-block;
    }
    .convenios-section h2:after {
        content: '';
        display: block;
        width: 60px;
        height: 4px;
        background: #f2aa21;
        margin: 10px auto 0;
        border-radius: 2px;
    }
    .grid-convenios {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 25px;
        margin-top: 30px;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
    .card-convenio {
        position: relative;
        width: 200px;
        overflow: hidden;
        border-radius: 12px;
        cursor: pointer;
        box-shadow: 0 6px 14px rgba(0,0,0,0.1);
        transition: transform 0.2s ease;
        background: #fff;
    }
    .card-convenio:hover {
        transform: translateY(-5px);
    }
    .card-convenio img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        transition: transform 0.3s ease;
        display: block;
    }
    .card-convenio:hover img {
        transform: scale(1.05);
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 34, 68, 0.85);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .card-convenio:hover .overlay {
        opacity: 1;
    }
    .overlay span {
        color: #002244;
        font-weight: 600;
        background: #f2aa21;
        padding: 8px 18px;
        border-radius: 40px;
        font-size: 0.9rem;
    }
    .modal-lightbox {
        display: none;
        position: fixed;
        z-index: 10000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .modal-content {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 0 30px rgba(0,0,0,0.5);
        cursor: default;
    }
    .close-modal {
        position: absolute;
        top: 20px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
        cursor: pointer;
        z-index: 10001;
    }
    .close-modal:hover {
        color: #f2aa21;
    }
    @media (max-width: 768px) {
        .card-convenio { width: 160px; }
        .card-convenio img { height: 150px; }
        .convenios-section h2 { font-size: 28px; }
    }
    @media (max-width: 480px) {
        .card-convenio { width: 140px; }
        .card-convenio img { height: 130px; }
    }
</style>

<section class="convenios-section">
    <h2>Convenios Institucionales</h2>
    <div class="grid-convenios">
        <?php
        // Aquí defines las imágenes de tus convenios (cambia las rutas según corresponda)
        $imagenes = [
            'img/convenio1.jpg',
            'img/convenio2.jpg',
            'img/convenio3.jpg',
            'img/convenio4.jpg'
        ];
        foreach ($imagenes as $img) {
            echo '
            <div class="card-convenio" data-img="' . $img . '">
                <img src="' . $img . '" alt="Convenio">
                <div class="overlay"><span>Ver más</span></div>
            </div>';
        }
        ?>
    </div>
</section>

<!-- MODAL -->
<div id="lightboxModal" class="modal-lightbox">
    <span class="close-modal">&times;</span>
    <img class="modal-content" id="modalImage" src="" alt="Ampliación">
</div>

<script>
    const cards = document.querySelectorAll('.card-convenio');
    const modal = document.getElementById('lightboxModal');
    const modalImg = document.getElementById('modalImage');
    const closeModal = document.querySelector('.close-modal');
    function openModal(src) {
        modal.style.display = 'flex';
        modalImg.src = src;
    }
    cards.forEach(card => {
        card.addEventListener('click', (e) => {
            e.stopPropagation();
            let src = card.getAttribute('data-img');
            if (!src) src = card.querySelector('img')?.src;
            if (src) openModal(src);
        });
    });
    closeModal.addEventListener('click', () => {
        modal.style.display = 'none';
        modalImg.src = '';
    });
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.style.display = 'none';
            modalImg.src = '';
        }
    });
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && modal.style.display === 'flex') {
            modal.style.display = 'none';
            modalImg.src = '';
        }
    });
</script>

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