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

<!-- CSS específico -->
<link rel="stylesheet" href="~/css/contacto.css" asp-append-version="true">

<!-- Sección de Contacto -->
<section class="contacto-section">
    <div class="productos-container">
        <!-- Reutiliza contenedor de productos.css -->
        <!-- Título principal -->
        <div class="section-header">
            <h2 class="section-title">Contacto</h2>
            <p class="section-subtitle">Déjanos tus datos y nos comunicaremos contigo pronto</p>
        </div>

        <!-- Formulario de contacto -->
        <div class="contacto-form-wrapper">
            <form id="formContacto" class="contacto-form">
                <div class="form-group">
                    <label for="nombre">Nombre completo *</label>
                    <input type="text" id="nombre" name="nombre" required maxlength="100">
                    <span class="error-message" id="error-nombre"></span>
                </div>

                <div class="form-group">
                    <label for="email">Correo electrónico *</label>
                    <input type="email" id="email" name="email" required maxlength="100">
                    <span class="error-message" id="error-email"></span>
                </div>

                <div class="form-group">
                    <label for="telefono">Teléfono (opcional)</label>
                    <input type="tel" id="telefono" name="telefono" maxlength="20">
                    <span class="error-message" id="error-telefono"></span>
                </div>

                <div class="form-group">
                    <label for="mensaje">Mensaje</label>
                    <textarea id="mensaje" name="mensaje" rows="5" maxlength="500" placeholder="Cuéntanos cómo podemos ayudarte..."></textarea>
                </div>

                <button type="submit" class="btn-enviar">
                    <span>Enviar mensaje</span>
                </button>
            </form>

            <div id="mensaje-envio" class="mensaje-estado" style="display: none;"></div>
        </div>
    </div>
</section>

<!-- Scripts específicos -->
<script src="~/js/contacto.js" asp-append-version="true"></script>