IDE-Demo-B/contacto.html

<!DOCTYPE html>
<html lang="es" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contacto | Conversación Comercial - IDE Consultores</title>
  <meta name="description" content="¿Qué desafío querés transformar? Empecemos por entenderlo. Coordinemos una reunión de diagnóstico con el equipo de IDE Consultores.">
  <meta property="og:title" content="Contacto | Conversación Comercial - IDE Consultores">
  <meta property="og:description" content="Escribinos para coordinar una reunión de diagnóstico o consultar por normas ISO, PMO, capacitación e IA.">

  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <header id="site-header"></header>

  <main>

    <!-- Header Contacto -->
    <section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
      <div class="container container-narrow text-center">
        <span class="eyebrow">CONVERSACIÓN INICIAL</span>
        <h1 style="margin-bottom: 1.25rem;">¿Qué desafío querés transformar?</h1>
        <p class="lead-text" style="margin: 0 auto;">
          Empecemos por entenderlo. Completá el formulario a continuación o contactanos directamente por WhatsApp o correo electrónico.
        </p>
      </div>
    </section>

    <!-- Formulario Inteligente & Datos de Contacto -->
    <section class="section-padding">
      <div class="container">
        
        <div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
          
          <!-- Columna Izquierda: Formulario Inteligente -->
          <div class="card" style="padding: clamp(1.75rem, 4vw, 2.5rem);">
            <h3 style="font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--ide-primary);">Formulario de Contacto</h3>
            <p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
              Completá tus datos para que un consultor senior analice tu contexto y preparemos una propuesta pertinente.
            </p>

            <form id="ide-contact-form">
              <input type="hidden" name="form_type" value="contacto">
              <input type="hidden" name="origen" id="contact-origen" value="Formulario General">

              <div class="form-group">
                <label for="contact-nombre" class="form-label">Nombre y Apellido *</label>
                <input type="text" id="contact-nombre" name="nombre" class="form-control" placeholder="Ej: Lic. Martín Rossi" required>
              </div>

              <div class="grid-2" style="gap: 1rem;">
                <div class="form-group">
                  <label for="contact-organizacion" class="form-label">Organización / Empresa *</label>
                  <input type="text" id="contact-organizacion" name="organizacion" class="form-control" placeholder="Ej: Industria S.A." required>
                </div>
                <div class="form-group">
                  <label for="contact-rol" class="form-label">Rol o Cargo en la empresa</label>
                  <input type="text" id="contact-rol" name="rol" class="form-control" placeholder="Ej: Gerente de Operaciones">
                </div>
              </div>

              <div class="grid-2" style="gap: 1rem;">
                <div class="form-group">
                  <label for="contact-email" class="form-label">Correo Electrónico *</label>
                  <input type="email" id="contact-email" name="email" class="form-control" placeholder="nombre@empresa.com" required>
                </div>
                <div class="form-group">
                  <label for="contact-telefono" class="form-label">Teléfono / WhatsApp</label>
                  <input type="tel" id="contact-telefono" name="telefono" class="form-control" placeholder="Ej: +54 9 11 5555-1234">
                </div>
              </div>

              <div class="form-group">
                <label for="contact-busqueda" class="form-label">Estoy buscando:</label>
                <select id="contact-busqueda" name="busqueda" class="form-control">
                  <option value="Orientación para abordar un desafío">Orientación para abordar un desafío</option>
                  <option value="Una solución concreta">Una solución concreta</option>
                  <option value="Implementar o certificar una norma">Implementar o certificar una norma (ISO 9001/14001/etc.)</option>
                  <option value="Formación para mi organización">Formación para mi organización (In-Company / Cursos)</option>
                  <option value="Gestionar o impulsar un proyecto">Gestionar o impulsar un proyecto (PMO)</option>
                  <option value="Transformación digital / IA">Transformación digital / IA en Procesos</option>
                  <option value="Otro">Otro motivo de consulta</option>
                </select>
              </div>

              <div class="form-group">
                <label for="contact-mensaje" class="form-label">Contanos brevemente en qué podemos ayudarte *</label>
                <textarea id="contact-mensaje" name="mensaje" class="form-control" rows="4" placeholder="Describí los objetivos o dolores que quisieran abordar..." required></textarea>
              </div>

              <button type="submit" class="btn btn-primary btn-lg" style="width: 100%; margin-top: 0.5rem;">
                HABLEMOS
              </button>

              <div id="contact-form-alert" class="form-alert"></div>
            </form>
          </div>

          <!-- Columna Derecha: Canales Directos y Datos Institucionales -->
          <div>
            
            <!-- WhatsApp Destacado -->
            <div class="card" style="background-color: var(--ide-accent-soft); border-color: var(--ide-accent); padding: 1.75rem; margin-bottom: 2rem;">
              <h3 style="font-size: 1.2rem; color: var(--ide-accent-hover); margin-bottom: 0.5rem;">¿Preferís escribirnos directamente?</h3>
              <p style="font-size: 0.9rem; color: var(--text-body); line-height: 1.5; margin-bottom: 1.25rem;">
                Si necesitás una respuesta ágil o coordinar un llamado breve, escribinos a nuestro canal oficial de WhatsApp.
              </p>
              <a href="https://wa.me/5491123456789?text=Hola%20IDE%20Consultores,%20quisiera%20recibir%20m%C3%A1s%20informaci%C3%B3n." target="_blank" rel="noopener noreferrer" class="btn btn-accent btn-sm" style="width: 100%;">
                Abrir chat de WhatsApp (+54 9 11 2345-6789) →
              </a>
            </div>

            <!-- Datos Ficticios para fácil edición -->
            <div class="card" style="padding: 1.75rem;">
              <h3 style="font-size: 1.15rem; margin-bottom: 1.25rem;">Canales Institucionales</h3>
              
              <ul style="list-style: none; display: flex; flex-direction: column; gap: 1.25rem; font-size: 0.92rem;">
                <li style="display: flex; gap: 0.85rem; align-items: flex-start;">
                  <span style="font-size: 1.2rem;">•</span>
                  <div>
                    <strong>Correo Central:</strong><br>
                    <a href="mailto:info@ideconsultores.com.ar" style="color: var(--ide-primary); font-weight: 600;">info@ideconsultores.com.ar</a>
                  </div>
                </li>

                <li style="display: flex; gap: 0.85rem; align-items: flex-start;">
                  <span style="font-size: 1.2rem;">•</span>
                  <div>
                    <strong>Teléfono Directo:</strong><br>
                    <span style="color: var(--text-body);">+54 11 4800-0000 (Lunes a Viernes 9 a 18 hs)</span>
                  </div>
                </li>

                <li style="display: flex; gap: 0.85rem; align-items: flex-start;">
                  <span style="font-size: 1.2rem;">•</span>
                  <div>
                    <strong>Oficinas Centrales:</strong><br>
                    <span style="color: var(--text-body);">Av. del Libertador 4800, Piso 8, CABA, Argentina</span>
                  </div>
                </li>
              </ul>
            </div>

          </div>

        </div>

      </div>
    </section>

  </main>

  <footer id="site-footer"></footer>
  <script src="js/main.js"></script>
</body>
</html>