290 lines
11 KiB
JavaScript
290 lines
11 KiB
JavaScript
// ============================================================
|
|
// AMOR & ROMA — Diagnóstico interactivo
|
|
// 5 preguntas máx., con lógica condicional real:
|
|
// - La pregunta 3 cambia según la respuesta de la pregunta 1.
|
|
// - Si el usuario llega con contexto (?interes=redes o ?plan=premium
|
|
// desde Servicios/Planes), se preselecciona y se saltea esa pregunta.
|
|
// - El resultado combina las 5 respuestas en una recomendación de
|
|
// servicio + plan sugerido.
|
|
// ============================================================
|
|
(function () {
|
|
"use strict";
|
|
|
|
const form = document.getElementById("diagnostico");
|
|
if (!form) return;
|
|
|
|
/* ---------- Contexto heredado desde otras páginas ---------- */
|
|
const params = new URLSearchParams(window.location.search);
|
|
const preInteres = params.get("interes"); // ej: redes, web, marca, automatizacion, captacion, varias
|
|
const prePlan = params.get("plan"); // ej: esencial, impulso, premium, elite
|
|
|
|
const state = {
|
|
necesidad: preInteres || null,
|
|
etapa: null,
|
|
desafio: null,
|
|
objetivo: null,
|
|
madurez: null,
|
|
planPrevio: prePlan || null,
|
|
};
|
|
|
|
/* ---------- Banco de preguntas ---------- */
|
|
const desafiosPorNecesidad = {
|
|
marca: [
|
|
["identidad-debil", "Mi identidad no refleja el valor real de mi negocio"],
|
|
["sin-relato", "No sé cómo comunicar lo que hago de forma consistente"],
|
|
["rediseno", "Necesito un rediseño completo, lo actual ya no funciona"],
|
|
],
|
|
presencia: [
|
|
["redes-sin-resultado", "Tengo redes, pero no generan resultados"],
|
|
["sin-web", "No tengo una web propia"],
|
|
["inconsistencia", "Todo se ve desordenado o inconsistente entre canales"],
|
|
],
|
|
contenido: [
|
|
["sin-tiempo", "No tengo tiempo para crear contenido de forma constante"],
|
|
["sin-estrategia", "No sé qué contenido realmente funciona"],
|
|
["calidad", "Necesito subir la calidad de producción"],
|
|
],
|
|
web: [
|
|
["sin-web-propia", "No tengo web propia todavía"],
|
|
["no-convierte", "Tengo web, pero no convierte visitas en clientes"],
|
|
["ecommerce", "Necesito catálogo o e-commerce"],
|
|
],
|
|
captacion: [
|
|
["pocos-leads", "No estoy generando suficientes oportunidades"],
|
|
["procesos-manuales", "Pierdo oportunidades por procesos manuales"],
|
|
["necesito-ads", "Necesito publicidad paga para atraer clientes"],
|
|
],
|
|
automatizacion: [
|
|
["todo-manual", "Respondo consultas manualmente y no llego a todo"],
|
|
["sin-seguimiento", "Pierdo leads por falta de seguimiento"],
|
|
["integracion", "Necesito integrar WhatsApp, redes y CRM"],
|
|
],
|
|
varias: [
|
|
["desde-cero", "Necesito ordenar todo desde cero"],
|
|
["piezas-sueltas", "Tengo piezas sueltas que no están integradas"],
|
|
["ecosistema", "Quiero un ecosistema digital completo"],
|
|
],
|
|
};
|
|
|
|
const necesidadLabels = {
|
|
marca: "Marca",
|
|
presencia: "Presencia digital",
|
|
contenido: "Contenido",
|
|
web: "Web",
|
|
captacion: "Captación de clientes",
|
|
automatizacion: "Automatización",
|
|
varias: "Varias cosas",
|
|
};
|
|
|
|
/* ---------- Elementos del DOM ---------- */
|
|
const steps = Array.from(form.querySelectorAll(".diag-step"));
|
|
const progressWrap = form.querySelector(".diag-progress");
|
|
const resultBox = document.getElementById("diag-result");
|
|
const captureBox = document.getElementById("diag-capture");
|
|
|
|
let order = ["necesidad", "etapa", "desafio", "objetivo", "madurez"];
|
|
if (preInteres && necesidadLabels[preInteres]) {
|
|
order = order.filter((k) => k !== "necesidad");
|
|
}
|
|
let currentIndex = 0;
|
|
|
|
function buildProgress() {
|
|
progressWrap.innerHTML = "";
|
|
order.forEach(() => {
|
|
const span = document.createElement("span");
|
|
progressWrap.appendChild(span);
|
|
});
|
|
}
|
|
|
|
function updateProgress() {
|
|
Array.from(progressWrap.children).forEach((span, i) => {
|
|
span.dataset.state = i < currentIndex ? "done" : i === currentIndex ? "active" : "";
|
|
});
|
|
}
|
|
|
|
function renderDesafioOptions() {
|
|
const target = form.querySelector('[data-step="desafio"] .diag-options');
|
|
const necesidad = state.necesidad || "varias";
|
|
const options = desafiosPorNecesidad[necesidad] || desafiosPorNecesidad.varias;
|
|
target.innerHTML = "";
|
|
options.forEach(([value, label]) => {
|
|
const btn = document.createElement("button");
|
|
btn.type = "button";
|
|
btn.className = "diag-option";
|
|
btn.dataset.field = "desafio";
|
|
btn.dataset.value = value;
|
|
btn.setAttribute("aria-pressed", "false");
|
|
btn.textContent = label;
|
|
target.appendChild(btn);
|
|
});
|
|
attachOptionHandlers(target);
|
|
}
|
|
|
|
function attachOptionHandlers(scope) {
|
|
scope.querySelectorAll(".diag-option").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
scope.querySelectorAll(".diag-option").forEach((b) => b.setAttribute("aria-pressed", "false"));
|
|
btn.setAttribute("aria-pressed", "true");
|
|
state[btn.dataset.field] = btn.dataset.value;
|
|
setTimeout(goNext, 220);
|
|
});
|
|
});
|
|
}
|
|
|
|
function showStep(key) {
|
|
steps.forEach((s) => s.classList.toggle("active", s.dataset.step === key));
|
|
if (key === "desafio") renderDesafioOptions();
|
|
updateProgress();
|
|
}
|
|
|
|
function goNext() {
|
|
if (currentIndex < order.length - 1) {
|
|
currentIndex++;
|
|
showStep(order[currentIndex]);
|
|
} else {
|
|
showResult();
|
|
}
|
|
}
|
|
|
|
function goBack() {
|
|
if (currentIndex > 0) {
|
|
currentIndex--;
|
|
showStep(order[currentIndex]);
|
|
}
|
|
}
|
|
|
|
form.querySelectorAll("[data-action='back']").forEach((btn) => btn.addEventListener("click", goBack));
|
|
|
|
// Handlers for static (non-dynamic) option steps
|
|
form.querySelectorAll('.diag-step[data-step]').forEach((stepEl) => {
|
|
if (stepEl.dataset.step === "desafio") return; // built dynamically
|
|
attachOptionHandlers(stepEl);
|
|
});
|
|
|
|
/* ---------- Motor de recomendación ---------- */
|
|
const solucionPorNecesidad = {
|
|
marca: "Branding & Identidad",
|
|
presencia: "Redes Sociales & Contenido + Desarrollo Web",
|
|
contenido: "Redes Sociales & Contenido",
|
|
web: "Desarrollo Web",
|
|
captacion: "Paid Media + Automatizaciones",
|
|
automatizacion: "Automatizaciones",
|
|
varias: "Solución Integral (Branding + Web + Redes)",
|
|
};
|
|
|
|
function planSugerido() {
|
|
const etapaScore = { comenzando: 0, validando: 1, creciendo: 2, consolidado: 3 };
|
|
const madurezScore = { nula: 0, basica: 1, intermedia: 2, avanzada: 3 };
|
|
const e = etapaScore[state.etapa] ?? 1;
|
|
const m = madurezScore[state.madurez] ?? 1;
|
|
const score = Math.round((e + m) / 2);
|
|
const plan = ["esencial", "impulso", "premium", "elite"][Math.min(score, 3)];
|
|
return plan;
|
|
}
|
|
|
|
const planLabels = { esencial: "Plan Esencial", impulso: "Plan Impulso", premium: "Plan Premium", elite: "Plan Élite" };
|
|
|
|
function showResult() {
|
|
steps.forEach((s) => s.classList.remove("active"));
|
|
progressWrap.querySelectorAll("span").forEach((s) => (s.dataset.state = "done"));
|
|
|
|
const necesidadKey = state.necesidad || "varias";
|
|
const solucion = solucionPorNecesidad[necesidadKey];
|
|
const plan = state.planPrevio && planLabels[state.planPrevio] ? state.planPrevio : planSugerido();
|
|
|
|
resultBox.innerHTML = `
|
|
<p class="eyebrow">Nuestra recomendación</p>
|
|
<h4>Te conviene priorizar: ${solucion}</h4>
|
|
<p font-body; <p style="margin-top:1rem;">Situación actual: negocio en etapa "${etapaLabel(state.etapa)}", con una presencia digital ${madurezLabel(state.madurez)}, buscando ${objetivoLabel(state.objetivo)}.</p>
|
|
<p style="margin-top:0.5rem;"><strong>Próximo paso recomendado:</strong> ${planLabels[plan]} ${state.planPrevio ? "— ya veníamos conversando sobre este plan" : ""}.</p>
|
|
<p style="margin-top:1rem; color:var(--text-soft); font-size:0.8rem;">Esto es una orientación inicial, no un diagnóstico definitivo, lo afinamos juntos en una conversación.</p>
|
|
`;
|
|
resultBox.hidden = false;
|
|
captureBox.hidden = false;
|
|
document.getElementById("diag-plan-hidden").value = plan;
|
|
document.getElementById("diag-solucion-hidden").value = solucion;
|
|
resultBox.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
}
|
|
|
|
function showReview() {
|
|
// Oculta resultado y captura
|
|
resultBox.hidden = true;
|
|
captureBox.hidden = true;
|
|
|
|
// Muestra todos los pasos
|
|
steps.forEach((s) => {
|
|
s.classList.add("active");
|
|
// Marca la opción seleccionada en cada paso
|
|
const field = s.dataset.step;
|
|
if (state[field]) {
|
|
s.querySelectorAll(".diag-option").forEach((btn) => {
|
|
const isSelected = btn.dataset.value === state[field];
|
|
btn.setAttribute("aria-pressed", isSelected ? "true" : "false");
|
|
if (isSelected) btn.style.outline = "2px solid var(--accent, #c9a96e)";
|
|
});
|
|
}
|
|
});
|
|
|
|
// Oculta progreso y muestra botón para volver al resultado
|
|
progressWrap.style.display = "none";
|
|
const backToResult = document.createElement("button");
|
|
backToResult.type = "button";
|
|
backToResult.className = "btn-secondary";
|
|
backToResult.textContent = "← Volver al resultado";
|
|
backToResult.addEventListener("click", () => {
|
|
progressWrap.style.display = "flex";
|
|
steps.forEach((s) => s.classList.remove("active"));
|
|
resultBox.hidden = false;
|
|
captureBox.hidden = false;
|
|
backToResult.remove();
|
|
});
|
|
form.appendChild(backToResult);
|
|
}
|
|
|
|
function etapaLabel(v) {
|
|
return { comenzando: "recién empezando", validando: "validando", creciendo: "en crecimiento", consolidado: "consolidado" }[v] || "sin definir";
|
|
}
|
|
function madurezLabel(v) {
|
|
return { nula: "nula", basica: "básica", intermedia: "intermedia", avanzada: "avanzada" }[v] || "sin definir";
|
|
}
|
|
function objetivoLabel(v) {
|
|
return {
|
|
vender: "vender más",
|
|
profesionalizar: "profesionalizar su imagen",
|
|
clientes: "generar más clientes",
|
|
tiempo: "ahorrar tiempo con procesos",
|
|
referente: "posicionarse como referente",
|
|
}[v] || "crecer";
|
|
}
|
|
|
|
form.querySelector("[data-action='restart']")?.addEventListener("click", () => {
|
|
currentIndex = 0;
|
|
state.desafio = state.objetivo = state.madurez = state.etapa = null;
|
|
if (!preInteres) state.necesidad = null;
|
|
form.querySelectorAll(".diag-option").forEach((b) => b.setAttribute("aria-pressed", "false"));
|
|
resultBox.hidden = true;
|
|
captureBox.hidden = true;
|
|
showStep(order[0]);
|
|
});
|
|
|
|
const finalForm = document.getElementById("diag-lead-form");
|
|
if (finalForm) {
|
|
finalForm.addEventListener("submit", (e) => {
|
|
e.preventDefault();
|
|
const confirmBox = document.getElementById("diag-confirmation");
|
|
finalForm.hidden = true;
|
|
confirmBox.classList.add("show");
|
|
});
|
|
}
|
|
|
|
/* ---------- Inicio ---------- */
|
|
buildProgress();
|
|
if (preInteres && necesidadLabels[preInteres]) {
|
|
const banner = document.getElementById("diag-context-banner");
|
|
if (banner) {
|
|
banner.hidden = false;
|
|
banner.textContent = `Ya sabemos que tu interés inicial es "${necesidadLabels[preInteres]}" — seguimos desde ahí.`;
|
|
}
|
|
}
|
|
showStep(order[0]);
|
|
})(); |