@{
    ViewData["Categoria"] = "OVINOS";
}

<!-- CSS -->
<link rel="stylesheet" href="~/css/productos.css" asp-append-version="true" />

<!-- Sección de Ovinos -->
<section class="productos-section" id="ovinos" data-categoria="@ViewData["Categoria"]">
    <div class="productos-container">
        <!-- Título principal de la sección -->
        <div class="section-header">
            <h2 class="section-title">Ovinos</h2>
            <p class="section-subtitle">Alimentos balanceados especializados para Ovinos</p>
        </div>

        <!-- SUBSECCIÓN: GENERAL -->
        <div class="categoria-subsection" id="general">
            <div class="categoria-header">
                <div class="categoria-imagen-banner">
                    <img src="..\img\catalogos\Ovinos\OvinosGeneralBanner.jpg" alt="General" loading="lazy">
                    <div class="categoria-overlay">
                        <h3 class="categoria-titulo">General</h3>
                        <p class="categoria-descripcion">Línea completa de alimentos ovinos</p>
                    </div>
                </div>
            </div>

            <!-- Creamos las tarjetas dinamicamente -->
            <div class="productos-grid" data-subseccion="General">

            </div>
        </div>

        <!-- SUBSECCIÓN: CRECIMIENTO Y DESARROLLO -->
        <div class="categoria-subsection" id="crecimientoDesarrollo">
            <div class="categoria-header">
                <div class="categoria-imagen-banner">
                    <img src="..\img\catalogos\Ovinos\OvinosCrecimientoDesarrolloBanner.jpg" alt="Crecimiento y Desarrollo" loading="lazy">
                    <div class="categoria-overlay">
                        <h3 class="categoria-titulo">Crecimiento y Desarrollo</h3>
                        <p class="categoria-descripcion">Fórmulas especializadas desarrollo de ovinos</p>
                    </div>
                </div>
            </div>

            <!-- Creamos las tarjetas dinamicamente -->
            <div class="productos-grid" data-subseccion="CrecimientoDesarrollo">
                
            </div>
        </div>


    </div>
</section>

<!-- Modal de Detalles del Producto -->
<div class="modal-overlay" id="modalProducto">
    <div class="modal-container">
        <button class="modal-close" id="btnCerrarModal">
            <i class="fas fa-times"></i>
        </button>

        <div class="modal-content">
            <!-- Imagen del producto -->
            <div class="modal-imagen">
                <img id="modalImagen" src="" alt="Producto">
            </div>

            <!-- Información del producto -->
            <div class="modal-info">
                <h3 class="modal-titulo" id="modalTitulo"></h3>
                <p class="modal-descripcion" id="modalDescripcion"></p>

                <!-- Especificaciones técnicas -->
                <div class="modal-seccion">
                    <h4 class="modal-subtitulo">Análisis Garantizado</h4>
                    <ul class="modal-specs" id="modalSpecs"></ul>
                </div>

                <!-- Ingredientes -->
                <div class="modal-seccion" id="seccionIngredientes">
                    <h4 class="modal-subtitulo">Ingredientes</h4>
                    <p class="modal-texto" id="modalIngredientes"></p>
                </div>

                <!-- Indicaciones -->
                <div class="modal-seccion" id="seccionIndicaciones">
                    <h4 class="modal-subtitulo">Indicaciones para su Uso</h4>
                    <p class="modal-texto" id="modalIndicaciones"></p>
                </div>

                <!-- Dosis -->
                <div class="modal-seccion" id="seccionDosis">
                    <h4 class="modal-subtitulo">Dosis</h4>
                    <p class="modal-texto" id="modalDosis"></p>
                </div>

                <!-- Presentaciones -->
                <div class="modal-seccion" id="seccionPresentaciones">
                    <h4 class="modal-subtitulo">Presentaciones</h4>
                    <p class="modal-texto" id="modalPresentaciones"></p>
                </div>

                <!-- Vía de Administracion -->
                <div class="modal-seccion" id="seccionViaAdministracion">
                    <h4 class="modal-subtitulo">Vía de Administración</h4>
                    <p class="modal-texto" id="modalViaAdministracion"></p>
                </div>

                <div class="modal-footer">
                    <p class="modal-nota">Consulte a su Médico Veterinario Zootecnista y/o Nutricionista</p>
                    <button class="btn-contacto-modal">Solicitar Cotización</button>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script src="~/js/productos.js" asp-append-version="true"></script>
}