Prueba ingles

import { useState, useRef, useEffect } from "react"; /* ══════════════════════════════════════════════════════════ TTS + KARAOKE ENGINE ══════════════════════════════════════════════════════════ */ let _voice = null; function _loadVoice() { const vv = window.speechSynthesis?.getVoices() || []; for (const n of ["Samantha","Alex","Karen","Google US English","Microsoft Zira","Microsoft David"]) { const v = vv.find(x => x.name.includes(n)); if (v) { _voice = v; return; } } _voice = vv.find(v => v.lang === "en-US") || vv.find(v => v.lang?.startsWith("en")) || null; } if (typeof window !== "undefined") { _loadVoice(); if (window.speechSynthesis?.onvoiceschanged !== undefined) window.speechSynthesis.onvoiceschanged = _loadVoice; } function tts(text, rate = 0.82, onEnd = null) { if (!window.speechSynthesis) return; window.speechSynthesis.cancel(); setTimeout(() => { const u = new SpeechSynthesisUtterance(text); u.lang = "en-US"; u.rate = rate; u.pitch = 1; if (_voice) u.voice = _voice; if (onEnd) u.onend = onEnd; window.speechSynthesis.speak(u); }, 100); } function wrapSpans(el) { if (el.dataset.ws) return; el.dataset.ws = "1"; const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT); const nodes = []; let n; while ((n = walker.nextNode())) nodes.push(n); nodes.forEach(node => { const parts = node.textContent.split(/(\s+)/); const frag = document.createDocumentFragment(); parts.forEach(p => { if (!p) return; if (/^\s+$/.test(p)) { frag.appendChild(document.createTextNode(p)); return; } const s = document.createElement("span"); s.className = "ks"; s.textContent = p; frag.appendChild(s); }); node.parentNode.replaceChild(frag, node); }); } function playKaraoke(el, rate, onDone) { if (!el) return; wrapSpans(el); const spans = Array.from(el.querySelectorAll(".ks")); const full = el.textContent; const offsets = []; let pos = 0; spans.forEach(s => { const idx = full.indexOf(s.textContent, pos); offsets.push(idx >= 0 ? idx : pos); pos = idx >= 0 ? idx + s.textContent.length : pos; }); spans.forEach(s => s.classList.remove("ks-on","ks-done")); let last = -1; window.speechSynthesis.cancel(); setTimeout(() => { const u = new SpeechSynthesisUtterance(full); u.lang = "en-US"; u.rate = rate; u.pitch = 1; if (_voice) u.voice = _voice; u.onboundary = ev => { if (ev.name !== "word") return; let lo = 0, hi = offsets.length - 1, best = 0; while (lo <= hi) { const m = (lo+hi)>>1; if (offsets[m]<=ev.charIndex){best=m;lo=m+1;}else hi=m-1; } if (best === last) return; if (last >= 0) { spans[last].classList.remove("ks-on"); spans[last].classList.add("ks-done"); } for (let i = last+1; i < best; i++) { spans[i].classList.remove("ks-on"); spans[i].classList.add("ks-done"); } spans[best].classList.remove("ks-done"); spans[best].classList.add("ks-on"); spans[best].scrollIntoView({ behavior:"smooth", block:"nearest" }); last = best; }; u.onend = () => { spans.forEach(s => { s.classList.remove("ks-on"); s.classList.add("ks-done"); }); if (onDone) onDone(); }; u.onerror = () => { if (onDone) onDone(); }; window.speechSynthesis.speak(u); }, 150); } function stopKaraoke(el) { window.speechSynthesis.cancel(); if (el) el.querySelectorAll(".ks").forEach(s => s.classList.remove("ks-on","ks-done")); } /* ══════════════════════════════════════════════════════════ CONTENT DATA ══════════════════════════════════════════════════════════ */ const VOCAB = [ { id:"v1", en:"Occupational asthma", ph:"/ˌɒkjʊˈpeɪʃənl ˈæzmə/", es:"Asma ocupacional / laboral", def:"Asthma caused or worsened by exposure to substances in the workplace.", ex:"He was diagnosed with occupational asthma after five years in the bakery." }, { id:"v2", en:"Sensitizer", ph:"/ˈsɛnsɪtaɪzər/", es:"Sensibilizante", def:"A substance that causes the immune system to become hypersensitive after repeated exposure.", ex:"Flour is a high-molecular-weight sensitizer common in bakeries." }, { id:"v3", en:"Irritant", ph:"/ˈɪrɪtənt/", es:"Irritante", def:"A substance causing direct airway inflammation without an allergic mechanism.", ex:"Chlorine gas is a potent respiratory irritant in cleaning industries." }, { id:"v4", en:"Bronchospasm", ph:"/ˈbrɒŋkəʊˌspæzəm/", es:"Broncoespasmo", def:"Sudden constriction of bronchial smooth muscle causing airway narrowing.", ex:"The patient developed bronchospasm within minutes of isocyanate exposure." }, { id:"v5", en:"Workplace exposure", ph:"/ˈwɜːkpleɪs ɪkˈspoʊʒər/", es:"Exposición laboral", def:"Contact with a harmful agent during the course of professional work.", ex:"Workplace exposure to isocyanates is the leading cause of occupational asthma." }, { id:"v6", en:"Peak expiratory flow", ph:"/piːk ɪkˈspaɪrətɔːri floʊ/", es:"Flujo espiratorio máximo", def:"Maximum speed of expiration, measured with a peak flow meter.", ex:"Serial peak expiratory flow recordings are essential for occupational asthma diagnosis." }, { id:"v7", en:"Airway hyperresponsiveness", ph:"/ˈɛərweɪ ˌhaɪpərɪˈspɒnsɪvnəs/", es:"Hiperreactividad bronquial", def:"Exaggerated airway narrowing in response to nonspecific stimuli such as cold air or exercise.", ex:"Airway hyperresponsiveness confirmed bronchial sensitivity to methacholine." }, { id:"v8", en:"Latency period", ph:"/ˈleɪtənsi ˈpɪəriəd/", es:"Período de latencia", def:"Time from first exposure to an agent to the onset of sensitization and symptoms.", ex:"The latency period for isocyanate sensitization ranges from months to years." }, { id:"v9", en:"Specific inhalation challenge",ph:"/spɪˈsɪfɪk ɪnhəˈleɪʃən ˈtʃælɪndʒ/",es:"Prueba de provocación bronquial", def:"Gold-standard test where the patient inhales the suspected occupational agent.", ex:"The specific inhalation challenge confirmed the flour sensitization." }, { id:"v10", en:"Isocyanate", ph:"/ˌaɪsəˈsaɪəneɪt/", es:"Isocianato", def:"A reactive chemical group used in spray paints and polyurethane production.", ex:"Isocyanates are the most common chemical cause of occupational asthma worldwide." }, { id:"v11", en:"Spirometry", ph:"/spaɪˈrɒmɪtri/", es:"Espirometría", def:"A test measuring the volume and speed of air that can be exhaled from the lungs.", ex:"Spirometry before and after the work shift is standard for diagnosis." }, { id:"v12", en:"FEV₁", ph:"/ˌef iː ˈviː wʌn/", es:"VEF₁", def:"Forced expiratory volume in one second — the key spirometry measurement.", ex:"A fall in FEV₁ of more than 20% after exposure confirms bronchial obstruction." }, { id:"v13", en:"Removal from exposure", ph:"/rɪˈmuːvəl frəm ɪkˈspoʊʒər/", es:"Retirada de la exposición", def:"Permanent or temporary removal of the worker from contact with the causal agent.", ex:"Early removal from exposure leads to significantly better clinical outcomes." }, { id:"v14", en:"High-molecular-weight agent", ph:"/haɪ məˈlɛkjʊlər weɪt ˈeɪdʒənt/", es:"Agente de alto peso molecular",def:"Large organic molecules that cause IgE-mediated sensitization — flour, latex, animal proteins.", ex:"High-molecular-weight agents are the most common cause in food industry workers." }, { id:"v15", en:"Low-molecular-weight agent", ph:"/loʊ məˈlɛkjʊlər weɪt ˈeɪdʒənt/", es:"Agente de bajo peso molecular",def:"Small chemicals such as isocyanates that cause sensitization through non-IgE mechanisms.", ex:"Low-molecular-weight agents include isocyanates, anhydrides, and wood dust." }, { id:"v16", en:"Reactive airways dysfunction", ph:"/riˈæktɪv ˈɛərweɪz dɪsˈfʌŋkʃən/", es:"Síndrome de disfunción reactiva de vías aéreas",def:"Asthma-like syndrome after a single massive irritant exposure.", ex:"She developed reactive airways dysfunction after a chlorine gas spill at work." }, { id:"v17", en:"Methacholine challenge", ph:"/ˌmɛθəˈkoʊliːn ˈtʃælɪndʒ/", es:"Prueba de metacolina", def:"A bronchial provocation test using methacholine to measure airway hyperresponsiveness.", ex:"A positive methacholine challenge supports a diagnosis of bronchial hyperreactivity." }, { id:"v18", en:"Work-related asthma", ph:"/wɜːk rɪˈleɪtɪd ˈæzmə/", es:"Asma relacionada con el trabajo",def:"Broad term including both occupational asthma and work-aggravated asthma.", ex:"Work-related asthma accounts for 15 to 20 percent of adult-onset asthma cases." }, { id:"v19", en:"Allergen", ph:"/ˈælərdʒən/", es:"Alérgeno", def:"A substance triggering an allergic response in a sensitized individual.", ex:"Wheat flour is the most common airborne allergen in bakeries." }, { id:"v20", en:"Occupational history", ph:"/ˌɒkjʊˈpeɪʃənl ˈhɪstəri/", es:"Historia ocupacional", def:"A detailed account of all jobs held and the substances encountered during work.", ex:"A thorough occupational history is the first step in diagnosing work-related asthma." }, ]; const LINES = [ { r:"D", sp:"Dr. Williams", text:"Good morning, Mr. Reyes. Please, come in and have a seat. What brings you in today?", es:"Buenos días, Sr. Reyes. Pase y siéntese. ¿Qué le trae por aquí hoy?", note:"Apertura estándar de consulta — chief complaint." }, { r:"P", sp:"Mr. Reyes", text:"Good morning, doctor. I've been having a lot of trouble breathing for about six months now. It seems to get much worse when I'm at work.", es:"Buenos días, doctor. He tenido mucho problema para respirar durante los últimos seis meses. Parece empeorar mucho cuando estoy en el trabajo.", note:"El paciente conecta los síntomas con el trabajo — clave diagnóstica." }, { r:"D", sp:"Dr. Williams", text:"I see. Can you describe the breathing problem for me? Is it wheezing, shortness of breath, or chest tightness — or all three?", es:"Entiendo. ¿Puede describirme el problema respiratorio? ¿Son sibilancias, falta de aire, o presión en el pecho — o los tres?", note:"Pregunta de tres opciones — estructura A1." }, { r:"P", sp:"Mr. Reyes", text:"All three, doctor. And I also have a dry cough that usually starts right when I begin my shift.", es:"Los tres, doctor. Y también tengo una tos seca que generalmente empieza justo cuando comienzo mi turno.", note:"Inicio al comienzo del turno — latencia corta muy sugestiva." }, { r:"D", sp:"Dr. Williams", text:"That is very important information. What is your job? What substances do you work with on a daily basis?", es:"Esa es información muy importante. ¿Cuál es su trabajo? ¿Con qué sustancias trabaja a diario?", note:"Historia ocupacional — la pregunta más importante en asma laboral." }, { r:"P", sp:"Mr. Reyes", text:"I spray paint cars at an auto body shop. I've been doing it for about three years now.", es:"Pinto coches con pistola en un taller de carrocería. Llevo haciéndolo unos tres años.", note:"Pintura en aerosol = exposición a isocianatos — agente más frecuente." }, { r:"D", sp:"Dr. Williams", text:"Do your symptoms improve on weekends or when you are on vacation and away from work for several days?", es:"¿Sus síntomas mejoran los fines de semana o cuando está de vacaciones y alejado del trabajo varios días?", note:"Criterio de relación laboral — mejora fuera del trabajo." }, { r:"P", sp:"Mr. Reyes", text:"Yes, definitely. By Sunday I feel much better. But on Monday morning, as soon as I get to work, they come back.", es:"Sí, definitivamente. El domingo me siento mucho mejor. Pero el lunes por la mañana, en cuanto llego al trabajo, vuelven.", note:"Patrón clásico: mejoría en fin de semana, reaparición el lunes." }, { r:"D", sp:"Dr. Williams", text:"Are you allergic to any medications? And are you currently taking any medications?", es:"¿Es alérgico a algún medicamento? ¿Y está tomando algún medicamento actualmente?", note:"Preguntas de seguridad — siempre antes de prescribir." }, { r:"P", sp:"Mr. Reyes", text:"No known allergies, doctor. I use a rescue inhaler sometimes when the breathing gets really bad at work.", es:"Sin alergias conocidas, doctor. A veces uso un inhalador de rescate cuando la respiración se pone muy mal en el trabajo.", note:"Uso de rescate en el trabajo — confirmación de broncoespasmo laboral." }, { r:"D", sp:"Dr. Williams", text:"Based on your symptoms and your work history, I think you may have occupational asthma caused by the chemicals in the spray paint, most likely isocyanates.", es:"Según sus síntomas e historia laboral, creo que puede tener asma ocupacional causada por los químicos de la pintura en aerosol, probablemente isocianatos.", note:"Diagnóstico probable — usa 'may have' para expresar posibilidad." }, { r:"D", sp:"Dr. Williams", text:"I am going to order spirometry and a peak expiratory flow diary. I will also refer you to a pulmonologist and an occupational medicine specialist.", es:"Voy a ordenar una espirometría y un diario de flujo espiratorio máximo. También lo voy a derivar a un neumólogo y a un especialista en medicina ocupacional.", note:"Plan clínico: pruebas + derivación especializada." }, { r:"P", sp:"Mr. Reyes", text:"Should I stop working in the meantime, doctor?", es:"¿Debo dejar de trabajar mientras tanto, doctor?", note:"El paciente pregunta lo más importante — respuesta crítica." }, { r:"D", sp:"Dr. Williams", text:"You should try to avoid direct exposure as much as possible. Always use your respirator and work in a well-ventilated area. Early removal from exposure significantly improves your prognosis.", es:"Debe intentar evitar la exposición directa tanto como sea posible. Use siempre su respirador y trabaje en un área bien ventilada. La retirada temprana de la exposición mejora significativamente su pronóstico.", note:"Consejo práctico + pronóstico — cierre clínico de la consulta." }, ]; const GRAMMAR = [ { pat:"When you are at work, do your symptoms get worse?", es:"Cuando está en el trabajo, ¿sus síntomas empeoran?", use:"Explorar la relación entre el trabajo y los síntomas.", rule:"When + presente simple, → presente simple?" }, { pat:"If you use a respirator, does the coughing improve?", es:"Si usa un respirador, ¿la tos mejora?", use:"Evaluar el efecto de las medidas de protección.", rule:"If + presente simple, → presente simple?" }, { pat:"When you leave work on Friday, how do you feel by Sunday?", es:"Cuando sale del trabajo el viernes, ¿cómo se siente el domingo?",use:"Patrón clásico de mejoría en período no laboral.", rule:"When + presente simple, → presente simple?" }, { pat:"If you are exposed to paint fumes, does your chest feel tight?",es:"Si se expone a humos de pintura, ¿siente presión en el pecho?", use:"Confirmar la relación síntoma-agente específico.", rule:"If + presente simple, → presente simple?" }, { pat:"When you are on vacation, do your symptoms disappear completely?",es:"Cuando está de vacaciones, ¿sus síntomas desaparecen completamente?",use:"Distinción entre asma laboral y asma agravada por el trabajo.", rule:"When + presente simple, → presente simple?" }, ]; const PRON = [ { word:"asthma", ph:"/ˈæzmə/", tip:"La 'th' es completamente silenciosa. Pronuncia: AZ-muh. Nunca 'AST-ma'." }, { word:"wheezing", ph:"/ˈwiːzɪŋ/", tip:"'Wh' suena /w/. Labios redondeados: WHEE-zing. Alargada la ee." }, { word:"bronchospasm", ph:"/ˈbrɒŋkəʊˌspæzəm/", tip:"4 sílabas: BRONK-oh-SPAZ-um. Acento principal en la primera." }, { word:"spirometry", ph:"/spaɪˈrɒmɪtri/", tip:"Acento en la 2ª sílaba: spy-ROM-ih-tree. No 'es-pi-ro-MET-ría'." }, { word:"isocyanate", ph:"/ˌaɪsəˈsaɪəneɪt/", tip:"5 sílabas: eye-so-SY-uh-nayt. Acento en la 3ª sílaba." }, { word:"hyperresponsiveness", ph:"/ˌhaɪpərɪˈspɒnsɪvnəs/",tip:"6 sílabas. Acento en '-spon-': hi-per-ih-SPON-siv-ness." }, { word:"expiratory", ph:"/ɪkˈspaɪrətɔːri/", tip:"Acento en 2ª sílaba: ex-PIE-ruh-tor-ee. No 'expi-ra-TO-rio'." }, { word:"occupational", ph:"/ˌɒkjʊˈpeɪʃənl/", tip:"5 sílabas: ok-yuh-PAY-shun-ul. Acento principal en '-pay-'." }, ]; /* ══════════════════════════════════════════════════════════ MICRO COMPONENTS ══════════════════════════════════════════════════════════ */ function Btn({ onClick, active, children, style = {} }) { return ( {children} ); } function PlayCircle({ onClick, playing, size = 36, bg = "#C1272D" }) { return ( {playing ? {[0,1].map(i=>)} : } ); } function Wave({ color = "#C1272D", n = 7 }) { const heights = [6,14,20,10,18,8,14]; const bars = heights.slice(0, n); return (