@ {
    ViewData ["Title"] = "Inicio";
}

<div class="google-style" >
<!-- 🟥 LOGO RIMAG -->
<div class="logo-rimag" >
<img src="/images/rimag-logo.png" alt="Rimag" / >
</div >
<!-- 🔍 BUSCADOR -->
<div class="search-container" >
<input id="txtBuscar" type="text" placeholder="Digite el nombre, modelo o código del producto" / >
</div >
<!-- RESULTADOS -->
<div id="resultadosBusqueda" class="resultados" > </div >
<!-- 📝 LICENCIA -->
<div class="licencia" >
Licencia otorgada a Rimag Importaciones por tiempo indefinido
</div >
<!-- 🏢 LOGO ITG -->
<div class="developer-logo" >
<img src="/images/logo_developer.png" alt="ITG Developer" / >
</div >
<!-- ⚖️ FOOTER LEGAL -->
<div class="legal" >
<p >
Desarrollado por Carlos Chaves Mata. Este sistema es propiedad intelectual protegida conforme a las leyes de la República de Costa Rica.
Queda estrictamente prohibida su copia, reproducción, distribución, cesión o modificación total o parcial sin autorización expresa del desarrollador.
</p >
<p >
Contacto: WhatsApp: +506 86595689 | Email: itgroupcr@gmail.com
</p >
</div >

</div >

<style >
.google-style {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 20px;
}

/* 🔴 LOGO RIMAG */
.logo-rimag img {
    width: 180px;
    margin-bottom: 20px;
}

/* 🔍 BUSCADOR */
.search-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

    .search-container input {
        width: 500px;
        max-width: 90%;
        padding: 15px 20px;
        font-size: 18px;
        border-radius: 30px;
        border: 1px solid #ccc;
        outline: none;
        text-align: center;
    }

        .search-container input:focus {
            box-shadow: 0 0 8px rgba(0,0,0,0.2);
        }

/* RESULTADOS */
.resultados {
    width: 100%;
    margin-top: 20px;
}

.item-busqueda {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    text-align: left;
}

    .item-busqueda img {
        width: 50px;
        height: 50px;
        object-fit: cover;
    }

/* 📝 LICENCIA */
.licencia {
    margin-top: 15px;
    font-size: 11px;
    color: #666;
}

/* 🏢 LOGO ITG */
.developer-logo img {
    width: 80px;
    margin-top: 10px;
    opacity: 0.7;
}

/* ⚖️ LEGAL */
.legal {
    margin-top: 10px;
    font-size: 10px;
    color: #777;
    max-width: 600px;
}

</style >

@section Scripts {
    <script> let timeout = null;
    document .getElementById("txtBuscar").addEventListener("keyup", function () {

            clearTimeout(timeout);

            let texto = this.value;

            timeout = setTimeout(() => {

                if (texto.length < 2) {
                    document.getElementById("resultadosBusqueda").innerHTML = "";
                    return;
                }

                fetch('/Home/BuscarProductos?texto=' + texto)
                    .then(r => r.json())
                    .then(data => {

                        let html = "";

                        data.forEach(p => {

                            html += `
                                <div class="item-busqueda" onclick="verProducto('${p.codigo}')">
                                    <img src="${p.imagen}" />
                                    <div>
                                        <b>${p.nombre}</b><br/>
                                        <small>${p.modelo}</small>
                                    </div>
                                </div>
                            `;
                        });

                        document.getElementById("resultadosBusqueda").innerHTML = html;
                    });

            }, 300);

        });
    function verProducto(codigo)

{
    window .location.href = '/Home/Producto?itemCode=' + codigo;
}

</script >
}

@* ========================= 🔥 VERSION VIEJA (RESPALDO) ========================= *@ @*
<!-- TODO EL BLOQUE ANTERIOR SE MANTIENE EXACTO -->
*@