`).join(''); listEl.style.display="block"; } input.addEventListener("input", ()=>render(getItems(),input.value)); input.addEventListener("focus", ()=>render(getItems(),input.value)); input.addEventListener("blur", ()=>setTimeout(()=>listEl.style.display="none",120)); listEl.addEventListener("click",e=>{ const it=e.target.closest(".sb-ac-item"); if(!it)return; input.value=it.textContent.trim(); listEl.style.display="none"; onChoose&&onChoose(input.value); validate(); }); } AC(marca,$("#sb-list-marca"),()=>Object.keys(vehDB),()=>{ linea.value=""; ref.value=""; ref.disabled=true; $("#sb-list-linea").innerHTML=""; $("#sb-list-ref").innerHTML=""; validate(); }); marca.addEventListener("input",()=>{ linea.value=""; ref.value=""; ref.disabled=true; $("#sb-list-linea").innerHTML=""; $("#sb-list-ref").innerHTML=""; validate(); }); AC(linea,$("#sb-list-linea"),()=>vehDB[marca.value]?Object.keys(vehDB[marca.value]):[],()=>{ ref.disabled=false; ref.value=""; $("#sb-list-ref").innerHTML=""; validate(); }); linea.addEventListener("input",()=>{ ref.disabled=!linea.value.trim(); validate(); }); AC(ref,$("#sb-list-ref"),()=>vehDB[marca.value]&&vehDB[marca.value][linea.value]?vehDB[marca.value][linea.value]:[]); AC(ciudad,$("#sb-list-ciudad"),()=>ciudades); ciudad.addEventListener("input", validate); /* Validación */ function step1Ok(){ const estado=$("#sb-estado"); return estado.value.trim() && marca.value.trim() && linea.value.trim() && ciudad.value.trim(); } function step2Ok(){ const campos=['uso','trayecto','viajes','parqueo']; return campos.every(n=>{ const sel=form.querySelector('[name="'+n+'"]'); return sel && sel.value.trim(); }); } function validate(){ $("#sb-next-1").disabled=!step1Ok(); $("#sb-ver-resultados").disabled=!step2Ok(); } $("#sb-estado").addEventListener("change", validate); $("#sb-uso").addEventListener("change", validate); $("#sb-trayecto").addEventListener("change", validate); $("#sb-viajes").addEventListener("change", validate); $("#sb-parqueo").addEventListener("change", validate); $("#sb-next-1").addEventListener("click",()=>{ if(step1Ok()) setStep(1); }); $("#sb-ver-resultados").addEventListener("click",()=>{ if(step2Ok()) renderResults(); }); validate(); /* Resultados */ const results=$("#sb-results"), suggest=$("#sb-suggest"), moreC=$("#sb-cards-more"), btnBest=$("#sb-best-btn"), btnOther=$("#sb-other-suggest"), btnMore=$("#sb-more-btn"); const planPremium = { id:"premium", name:"Seguro de Autos Premium", tag:"Más vendido · Cobertura 360", desc:"Protección completa para su carro.", priceLabel:"$3,863,600", feat:[ "Cubrimos daños a otras personas", "Daño y hurto total o parcial del carro", "Vehículo de reemplazo hasta por 30 días", "Movilidad complementaria (bici, patineta o transporte público)" ], ribbon:true }; const planClasico = { id:"clasico", name:"Autos Clásico", tag:"Opción competitiva", desc:"Cobertura esencial con costo optimizado.", priceLabel:"$2,594,000", feat:[ "Cubrimos daños a otras personas", "Daño y hurto total o parcial", "Movilidad complementaria" ], ribbon:true }; const planEstandar = { id:"estandar", name:"Autos Estándar", tag:"Cobertura integral", desc:"Tranquilidad con cada detalle cubierto.", priceLabel:"$3,197,000", feat:["Daños a terceros","Daño y hurto total o parcial","Vehículo de reemplazo"] }; const planVerde = { id:"verde", name:"Autos Verde", tag:"Eléctricos e híbridos", desc:"Diseñado para movilidad sostenible.", priceLabel:"$3,763,500", feat:["Daños a terceros","Daño y hurto total o parcial","Vehículo de reemplazo"] }; function planJsonAttr(pl){ const obj={id:pl.id,name:pl.name,tag:pl.tag,priceLabel:pl.priceLabel}; return JSON.stringify(obj).replace(/"/g,"""); } function featuredCard(pl){ const feats=pl.feat.map(t=>``).join(''); const jsonAttr=planJsonAttr(pl); return `

${pl.ribbon?'

Seguro sugerido

':''}

${pl.tag}

${pl.name}

${pl.desc}

${feats}

Año sin IVA desde

${pl.priceLabel}

Cotice y compre su seguro

`; } function simpleCard(pl){ const feats=pl.feat.map(t=>``).join(''); const jsonAttr=planJsonAttr(pl); return `

${pl.tag}

${pl.name}

${pl.desc}

${feats}

Año sin IVA desde

${pl.priceLabel}

Solicitar cotización

`; } function setView(mode){ btnBest.classList.toggle("active",mode==="best"); btnOther.classList.toggle("active",mode==="other"); btnMore.classList.toggle("active",mode==="more"); if(mode==="best"){ suggest.style.display="grid"; suggest.innerHTML=featuredCard(planPremium); moreC.style.display="none"; moreC.innerHTML=""; }else if(mode==="other"){ suggest.style.display="grid"; suggest.innerHTML=featuredCard(planClasico); moreC.style.display="none"; moreC.innerHTML=""; }else if(mode==="more"){ suggest.style.display="none"; suggest.innerHTML=""; moreC.style.display="grid"; moreC.innerHTML=[planEstandar,planVerde].map(simpleCard).join(''); } } function hideResults(){ results.style.display="none"; suggest.style.display="grid"; suggest.innerHTML=""; moreC.style.display="none"; moreC.innerHTML=""; setView("best"); } function renderResults(){ hideTop(); results.style.display="block"; setView("best"); progress.style.width = "100%"; setTimeout(()=>{ const rect = results.getBoundingClientRect(); const target = rect.top + (window.pageYOffset || document.documentElement.scrollTop) - 10; window.scrollTo({top:target,behavior:"smooth"}); }, 60); } btnBest.addEventListener("click",()=>setView("best")); btnOther.addEventListener("click",()=>setView("other")); btnMore.addEventListener("click",()=>setView("more")); $("#sb-volver").addEventListener("click",()=>{ setStep(1); hideResults(); showTop(); }); $("#sb-salir").addEventListener("click",()=>{ setStep(0); hideResults(); showTop(); }); /* Modal */ const overlay=$("#sb-overlay"), closeBtn=$(".sb-close"); function lockScroll(v){document.documentElement.style.overflow=v?"hidden":"";} document.addEventListener("click",e=>{ const b=e.target.closest("[data-select]"); if(!b) return; e.preventDefault(); overlay.classList.add("show"); lockScroll(true); b.classList.add("active"); }); function closeModal(){ overlay.classList.remove("show"); lockScroll(false); $$(".sb-cta .active").forEach(x=>x.classList.remove("active")); } closeBtn.addEventListener("click",closeModal); overlay.addEventListener("click",e=>{if(e.target===overlay) closeModal();}); })();