import {renderPage,pages,titles} from './content.mjs';
const page=document.body.dataset.page||'index';
let lang='es';try{lang=localStorage.getItem('suave-language')==='en'?'en':'es'}catch{}
let step=0;
const formData={patient:'new',reason:'exam',date:'',time:'any',name:'',phone:'',email:'',insurance:'unsure'};
const tr=(es,en)=>lang==='es'?es:en;
const escapeHTML=(s)=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const reasonLabel=(v)=>({exam:tr('Examen o limpieza','Exam or cleaning'),filling:tr('Caries o empaste','Cavity or filling'),pain:tr('Dolor dental','Toothache'),implant:tr('Implantes','Dental implants'),arch:tr('Arcada completa','Full arch'),other:tr('Otra consulta','Other visit')})[v];
const timeLabel=(v)=>({any:tr('Sin preferencia','No preference'),morning:tr('Por la mañana','Morning'),afternoon:tr('Por la tarde','Afternoon')})[v];
const insuranceLabel=(v)=>({yes:tr('Tengo seguro dental','I have dental insurance'),no:tr('No tengo seguro dental','I do not have dental insurance'),unsure:tr('Prefiero consultarlo con recepción','I’d like to discuss it with the front desk')})[v];
const choice=(name,value,label)=>`<label class="choice"><input type="radio" name="${name}" value="${value}" ${formData[name]===value?'checked':''}>${label}</label>`;
const option=(value,label,selected)=>`<option value="${value}" ${selected===value?'selected':''}>${label}</option>`;
function today(){const d=new Date();return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`}
function render(){document.documentElement.lang=lang;document.title=`${titles[lang][pages.indexOf(page)]} | Suave Dental · Newark`;document.body.innerHTML=renderPage(page,lang);document.querySelector('.menu-btn').addEventListener('click',e=>{const button=e.currentTarget;const open=button.getAttribute('aria-expanded')==='true';button.setAttribute('aria-expanded',String(!open));document.querySelector('.navigation').classList.toggle('is-open',!open)});document.querySelectorAll('[data-lang]').forEach(b=>b.addEventListener('click',()=>{capture();lang=b.dataset.lang;try{localStorage.setItem('suave-language',lang)}catch{}render();document.querySelector(`[data-lang="${lang}"]`).focus()}));if(page==='contact')initForm()}
function capture(){const form=document.querySelector('#booking-form');if(!form)return;for(const [key,value] of new FormData(form).entries())if(key in formData)formData[key]=value.trim()}
function initForm(){const form=document.querySelector('#booking-form');form.addEventListener('submit',e=>{e.preventDefault();capture();if(!validate())return;if(step<4){step++;renderStep(true)}else{step=5;renderStep(true)}});document.querySelector('#back').addEventListener('click',()=>{capture();step=Math.max(0,step-1);renderStep(true)});renderStep()}
function validate(){let error='';if(step===1){const selected=new Date(formData.date+'T12:00:00');if(!formData.date||formData.date<today()||isNaN(selected.getTime()))error=tr('Elige una fecha de hoy en adelante.','Choose today or a future date.');else if([0,3].includes(selected.getDay()))error=tr('La clínica está cerrada los miércoles y domingos. Elige otro día.','The office is closed on Wednesdays and Sundays. Choose another day.')}if(step===2){if(formData.name.length<2)error=tr('Escribe un nombre de prueba.','Enter a test name.');else if(formData.phone.replace(/\D/g,'').length<10)error=tr('Escribe un teléfono válido de al menos 10 dígitos.','Enter a valid phone number with at least 10 digits.');else if(formData.email&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email))error=tr('Revisa el correo electrónico o déjalo vacío.','Check the email address or leave it blank.')}const target=document.querySelector('#form-error');target.textContent=error;if(error){target.setAttribute('tabindex','-1');target.focus();return false}return true}
function renderStep(focus=false){const target=document.querySelector('#booking-step');document.querySelector('#form-error').textContent='';document.querySelector('#step-label').textContent=step<5?tr(`Paso ${step+1} de 5`,`Step ${step+1} of 5`):tr('Demostración completada','Demonstration complete');document.querySelectorAll('.progress li').forEach((li,i)=>li.classList.toggle('complete',i<=step));document.querySelector('.form-actions').hidden=step===5;document.querySelector('#back').hidden=step===0;document.querySelector('#next').innerHTML=step===4?tr('Probar solicitud de cita','Test appointment request'):tr('Continuar →','Continue →');
if(step===0)target.innerHTML=`<fieldset><legend tabindex="-1">${tr('¿Es tu primera visita?','Is this your first visit?')}</legend>${choice('patient','new',tr('Soy paciente nuevo','I’m a new patient'))}${choice('patient','existing',tr('Ya soy paciente','I’m an existing patient'))}</fieldset>`;
if(step===1)target.innerHTML=`<fieldset><legend tabindex="-1">${tr('Los detalles de tu visita','Your appointment details')}</legend><label class="field">${tr('Motivo de la visita','Reason for your visit')}<select name="reason">${['exam','filling','pain','implant','arch','other'].map(v=>option(v,reasonLabel(v),formData.reason)).join('')}</select></label><div class="form-row"><label class="field">${tr('Fecha preferida','Preferred date')}<input type="date" name="date" value="${escapeHTML(formData.date)}" min="${today()}" required></label><label class="field">${tr('Horario preferido','Preferred time')}<select name="time">${['any','morning','afternoon'].map(v=>option(v,timeLabel(v),formData.time)).join('')}</select></label></div><p class="fineprint">${tr('La fecha es una preferencia, no un horario reservado. Cerrado los miércoles y domingos.','Your date is a preference, not a reserved time. Closed Wednesdays and Sundays.')}</p></fieldset>`;
if(step===2)target.innerHTML=`<fieldset><legend tabindex="-1">${tr('¿Cómo podemos contactarte?','How can we contact you?')}</legend><p class="fineprint">${tr('Usa datos de prueba en esta demostración.','Use test information in this demonstration.')}</p><label class="field">${tr('Nombre completo','Full name')}<input name="name" autocomplete="off" value="${escapeHTML(formData.name)}" required maxlength="100"></label><label class="field">${tr('Teléfono','Phone number')}<input name="phone" type="tel" autocomplete="off" value="${escapeHTML(formData.phone)}" placeholder="(973) 555-0123" required maxlength="25"></label><label class="field">${tr('Correo electrónico (opcional)','Email address (optional)')}<input name="email" type="email" autocomplete="off" value="${escapeHTML(formData.email)}" maxlength="150"></label></fieldset>`;
if(step===3)target.innerHTML=`<fieldset><legend tabindex="-1">${tr('Tu seguro dental','Your dental insurance')}</legend>${['yes','no','unsure'].map(v=>choice('insurance',v,insuranceLabel(v))).join('')}<p class="fineprint">${tr('Información opcional. Los seguros aceptados están por confirmar (TBD). No necesitamos números de póliza ni documentos aquí.','Optional information. Accepted plans are to be confirmed (TBD). We do not need policy numbers or documents here.')}</p></fieldset>`;
if(step===4){const rows=[[tr('Paciente','Patient'),formData.patient==='new'?tr('Nuevo','New'):tr('Existente','Existing')],[tr('Visita','Visit'),reasonLabel(formData.reason)],[tr('Fecha preferida','Preferred date'),formData.date],[tr('Horario','Time'),timeLabel(formData.time)],[tr('Nombre','Name'),formData.name],[tr('Teléfono','Phone'),formData.phone],[tr('Correo','Email'),formData.email||'—'],[tr('Seguro','Insurance'),insuranceLabel(formData.insurance)]];target.innerHTML=`<h2 tabindex="-1">${tr('Revisa tu solicitud de prueba','Review your test request')}</h2><dl class="review-list">${rows.map(([a,b])=>`<div><dt>${a}</dt><dd>${escapeHTML(b)}</dd></div>`).join('')}</dl><p class="fineprint">${tr('Al continuar, solo verás cómo termina el formulario. No se enviará ninguna solicitud.','Continuing only demonstrates the end of the form. No request will be sent.')}</p>`}
if(step===5)target.innerHTML=`<div class="confirmation"><span class="check">✓</span><h2 tabindex="-1">${tr('Así de fácil será pedir tu cita.','That’s how simple requesting a visit will be.')}</h2><p>${tr('Has completado la demostración. No se enviaron datos y no se reservó ninguna cita. Para reservar una cita real, llama a recepción.','You’ve completed the demonstration. No information was sent and no appointment was booked. To book a real visit, call our front desk.')}</p><a class="btn" href="tel:+19732689595">${tr('Llamar al','Call')} 973-268-9595</a><button type="button" class="btn outline" id="restart" style="margin-top:12px">${tr('Volver a empezar','Start again')}</button></div>`;
if(step===5)document.querySelector('#restart').addEventListener('click',()=>{Object.assign(formData,{patient:'new',reason:'exam',date:'',time:'any',name:'',phone:'',email:'',insurance:'unsure'});step=0;renderStep(true)});
if(focus)target.querySelector('[tabindex="-1"]')?.focus();
}
render();