{sparkles.map((i) => ( ))}

{!isStatic && (

{confetti.map((i) => ( ))}

)}

{!isStatic && ( <>

)}

); }; const TopNav = ({ theme, onNav, current, themeKey, onThemeToggle }) => { const [menuOpen, setMenuOpen] = React.useState(false); const isMobile = useIsMobile(); React.useEffect(() => { if (!isMobile) setMenuOpen(false); }, [isMobile]); React.useEffect(() => { if (!isMobile || !menuOpen) return undefined; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; }, [isMobile, menuOpen]); const items = [ { id: 'home', label: 'Inicio' }, { id: 'avisos', label: 'Avisos' }, { id: 'calendario', label: 'Eventos' }, { id: 'entrenadores', label: 'Entrenadores' }, { id: 'galeria', label: 'Galería' }, { id: 'tienda', label: 'Tienda' }, { id: 'ubicacion', label: 'Ubicación' }, { id: 'contacto', label: 'Contacto' }, ]; const pickNav = (id) => { setMenuOpen(false); document.body.style.overflow = ''; onNav(id); }; return ( <>

{!isMobile && (

{items.map(it => ( ))}

)}

{isMobile && ( setMenuOpen(o => !o)} /> )} pickNav('login')}>Iniciar sesión pickNav('inscripcion')}>Inscribirme

{isMobile && menuOpen && ( <> setMenuOpen(false)} /> )} ); }; /* HERO */ const Hero = ({ theme, onNav, heroVariant }) => { const { settings: s, reload } = typeof useAcademySettings === 'function' ? useAcademySettings() : { settings: normalizeAcademySettings(null), reload: () => {} }; const stats = typeof getHeroStats === 'function' ? getHeroStats(s) : []; React.useEffect(() => { const onChange = () => reload(); window.addEventListener('tecos:settings-changed', onChange); return () => window.removeEventListener('tecos:settings-changed', onChange); }, [reload]); return (

{s.hero_badge}

{s.hero_title_line1}
{s.hero_title_line2}
{s.hero_title_line3}

{s.hero_subtitle}

onNav('inscripcion')}>Inscribirme ahora onNav('calendario')}>Ver eventos y anuncios onNav('tienda')}>Ir a la tienda

{stats.map(m => (

{m.v}

{m.l}

))}

); }; /* AVISOS — registro alumno / no alumno */ const digitsFromTecCode = (code) => { const m = String(code || '').match(/(\d{1,6})/); return typeof formatTecCodeDigitsInput === 'function' ? formatTecCodeDigitsInput(m ? m[1] : '') : String(m ? m[1] : '').replace(/\D/g, '').slice(0, 3); }; const AnnouncementMemberModal = ({ open, onClose, theme, announcementId, avisoColor, avisoTitle, onRegistered }) => { const [digits, setDigits] = React.useState(''); const [pendingStudent, setPendingStudent] = React.useState(null); const [studentVerified, setStudentVerified] = React.useState(null); const [lookupBusy, setLookupBusy] = React.useState(false); const [checkBusy, setCheckBusy] = React.useState(false); const [alreadyRegistered, setAlreadyRegistered] = React.useState(false); const [registrationDone, setRegistrationDone] = React.useState(false); const [saving, setSaving] = React.useState(false); const [err, setErr] = React.useState(''); const [ok, setOk] = React.useState(''); const lookupTimerRef = React.useRef(null); const glow = avisoColor || theme.primary; const fullCode = typeof buildTecStudentCode === 'function' ? buildTecStudentCode(digits) : (digits ? `TEC${digits.padStart(3, '0')}` : ''); const locked = alreadyRegistered || registrationDone; React.useEffect(() => { if (!open) return; setDigits(''); setErr(''); setOk(''); setPendingStudent(null); setStudentVerified(null); setLookupBusy(false); setCheckBusy(false); setAlreadyRegistered(false); setRegistrationDone(false); if (lookupTimerRef.current) clearTimeout(lookupTimerRef.current); }, [open]); const verifyAlreadyRegistered = async (codeStr) => { if (!announcementId || !codeStr || !isSupabaseReady()) return false; if (typeof checkAnnouncementRegistration !== 'function') return false; setCheckBusy(true); try { const exists = await checkAnnouncementRegistration(announcementId, codeStr); setAlreadyRegistered(!!exists); return !!exists; } catch { return false; } finally { setCheckBusy(false); } }; const lookupStudentByCode = async (rawCode) => { const normalized = normalizeTecStudentCode(rawCode); if (!normalized) { setPendingStudent(null); setAlreadyRegistered(false); return; } if (!isSupabaseReady()) return; setLookupBusy(true); setErr(''); try { const exists = await verifyAlreadyRegistered(normalized); if (exists) { setPendingStudent(null); setStudentVerified(null); setLookupBusy(false); return; } const found = await lookupStudentCodePublic(rawCode); if (!found) { setPendingStudent(null); setStudentVerified(null); return; } if (found.status && found.status !== 'activo') { setPendingStudent(null); setStudentVerified(null); setErr('Ese alumno no está activo. Contacta a la academia.'); return; } setPendingStudent(found); setStudentVerified(null); } catch (e) { setPendingStudent(null); setErr(e.message || 'No se pudo buscar el alumno.'); } setLookupBusy(false); }; const scheduleLookup = (d) => { if (lookupTimerRef.current) clearTimeout(lookupTimerRef.current); const code = typeof buildTecStudentCode === 'function' ? buildTecStudentCode(d) : ''; if (!code) { setPendingStudent(null); setAlreadyRegistered(false); return; } lookupTimerRef.current = setTimeout(() => lookupStudentByCode(code), 450); }; const onDigitsChange = (d) => { setDigits(d); setStudentVerified(null); setPendingStudent(null); setOk(''); setErr(''); setAlreadyRegistered(false); scheduleLookup(d); }; const submit = async () => { if (!fullCode) { setErr('Escribe el número de tu ID (ej. 001 o 067).'); return; } if (locked) return; if (pendingStudent && !studentVerified) { setErr('Confirma con «Sí» o «No» si el ID te corresponde.'); return; } const confirmCode = studentVerified?.code || fullCode; if (await verifyAlreadyRegistered(confirmCode)) { setErr('Este ID ya está registrado en este aviso.'); return; } setSaving(true); setErr(''); setOk(''); try { const data = await confirmAnnouncementRegistration(announcementId, confirmCode); setRegistrationDone(true); setAlreadyRegistered(true); setOk(`Registro confirmado: ${data?.student_name || data?.student_code || confirmCode}`); window.dispatchNotificationsChanged?.(); onRegistered?.(); } catch (e) { setErr(e.message || 'No se pudo registrar'); } setSaving(false); }; return (

{avisoTitle && (

Aviso: {avisoTitle}

)}

Escribe solo el número de tu ID (el prefijo TEC ya está incluido).

fullCode && lookupStudentByCode(fullCode)} disabled={locked} /> {(lookupBusy || checkBusy) && (

{checkBusy ? 'Verificando registro…' : 'Buscando alumno…'}

)} {locked && !ok && (

Este ID ya registró su interés en este aviso. No se puede volver a enviar con el mismo número.

)} {pendingStudent && !studentVerified && !locked && ( { setStudentVerified(pendingStudent); setDigits(digitsFromTecCode(pendingStudent.code)); setPendingStudent(null); }} onNo={() => { setPendingStudent(null); setStudentVerified(null); }} subtitle="Si confirmas, quedarás registrado en este aviso." /> )} {studentVerified && !locked && (

Identidad confirmada: {studentVerified.code} — {studentVerified.full_name}

)} {err &&

{err}

} {ok &&

{ok}

}

Cerrar {saving ? 'Registrando…' : locked ? 'Ya registrado' : 'Registrar mi interés'}

); }; const AnnouncementGuestModal = ({ open, onClose, theme, announcementId, avisoTitle, avisoColor }) => { const [name, setName] = React.useState(''); const [phoneDial, setPhoneDial] = React.useState(DEFAULT_PHONE_DIAL); const [phoneNational, setPhoneNational] = React.useState(''); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); const [sent, setSent] = React.useState(false); const glow = avisoColor || theme.primary; React.useEffect(() => { if (!open) return; setName(''); setPhoneDial(DEFAULT_PHONE_DIAL); setPhoneNational(''); setErr(''); setSent(false); }, [open]); const submit = async () => { if (!name.trim()) { setErr('Escribe tu nombre'); return; } const phone = combinePhoneWithDial(phoneDial, phoneNational); if (!phone.trim()) { setErr('Escribe tu teléfono'); return; } setBusy(true); setErr(''); try { if (typeof window.submitInterestedLead !== 'function') { throw new Error('El envío no está disponible. Recarga la página (F5).'); } await window.submitInterestedLead({ name: name.trim(), phone: phone.trim(), source: 'anuncio', announcement_id: announcementId, }); window.notifyLeadsChanged?.(); window.dispatchNotificationsChanged?.(); setSent(true); } catch (e) { setErr(e.message || 'No se pudo enviar'); } setBusy(false); }; return (

{avisoTitle && (

Interés en: {avisoTitle}

)} {sent ? (

¡Listo! Te contactaremos pronto.

) : ( <>

Déjanos tu nombre y teléfono. Aparecerás en el módulo de interesados de la academia.

setName(e.target.value)} /> {err &&

{err}

}

Cancelar {busy ? 'Enviando…' : 'Enviar interés'}

)} {sent && Cerrar}

); }; /* AVISOS — estilo franjas + brillo suave (distinto al neón de eventos) */ const AvisoModal = ({ open, onClose, aviso, theme }) => { const closeModal = React.useCallback(bindModalClose(onClose), [onClose]); const [memberOpen, setMemberOpen] = React.useState(false); const [guestOpen, setGuestOpen] = React.useState(false); if (!aviso) return null; const a = aviso._raw ? mapAnnouncementCard(aviso._raw, theme) : (aviso.title ? mapAnnouncementCard(aviso, theme) : aviso); const announcementId = a.id || aviso.id || aviso._raw?.id; return ( <>

{a.imageUrl ? (

) : (

)}

Aviso oficial

{a.tag}

{a.title}

{[ { l: 'Publicado', v: a.date, i: 'cal' }, a.dateLabel && a.dateLabel !== '—' ? { l: 'Vigencia', v: a.dateLabel, i: 'clock' } : null, { l: 'Lugar', v: a.location || '—', i: 'pin' }, ].filter(Boolean).map(it => (

{it.l}

{it.v}

))}

{a.mapsUrl && (

Ver en Google Maps →

)}

{a.body}

setMemberOpen(true)} disabled={!announcementId} style={{ boxShadow: `0 0 12px ${a.color}44` }}> Soy alumno — registrar con ID setGuestOpen(true)} disabled={!announcementId}> No soy alumno Cerrar

setMemberOpen(false)} theme={theme} announcementId={announcementId} avisoColor={a.color} avisoTitle={a.title} /> setGuestOpen(false)} theme={theme} announcementId={announcementId} avisoTitle={a.title} avisoColor={a.color} /> ); }; const useAnnouncementsFeed = () => { const { data: rows, loading, error, reload } = useLiveData(() => fetchPublishedAnnouncements(), []); React.useEffect(() => { const on = () => reload(); window.addEventListener('tecos:announcements-changed', on); return () => window.removeEventListener('tecos:announcements-changed', on); }, [reload]); return { rows, loading, error, reload }; }; const AvisosSection = ({ theme }) => { const { rows, loading, error } = useAnnouncementsFeed(); const avisos = (rows || []).map(a => mapAnnouncementCard(a, theme)); const [selected, setSelected] = React.useState(null); return (

{loading ? ( ) : error ? ( ) : avisos.length === 0 ? ( ) : avisos.map((a) => ( setSelected(a._raw || a)} style={{ position: 'relative', overflow: 'hidden', cursor: 'pointer', border: `1px solid ${a.color}44`, boxShadow: `0 4px 20px ${a.color}22`, animation: 'avisoGlow 3s ease-in-out infinite', ['--aviso-g']: `${a.color}55`, }} >

Aviso

{a.imageUrl && (

)}

{a.tag}

{a.title}

{a.body}

Pub. {a.date} {a.dur !== '—' ? a.dur : 'Ver más'}

))}

setSelected(null)} aviso={selected} theme={theme} />

); }; /* CALENDARIO */ const monthLabel = (year, month) => { const d = new Date(year, month, 1); return d.toLocaleDateString('es-MX', { month: 'long', year: 'numeric' }).toUpperCase(); }; const buildMonthCells = (year, month) => { const firstDay = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate(); const cells = []; for (let i = 0; i < firstDay; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) { cells.push({ day: d, dayKey: formatEventDayKey(new Date(year, month, d)) }); } return cells; }; /** 1 → completo; 2 → mitades; 3+ → tercios en la celda. */ function calendarDayGridLayout (count) { if (count <= 1) return { cols: 1, visible: 1 }; if (count === 2) return { cols: 2, visible: 2 }; return { cols: 3, visible: Math.min(count, 3) }; } const CalendarDayMedia = ({ item, theme }) => { const focus = `${item?.imageFocusX ?? 50}% ${item?.imageFocusY ?? 50}%`; if (item?.imageUrl) { return (

); } const kind = item?.itemKind; return (

{kind === 'anuncio' ? ( ) : kind === 'birthday' ? ( ) : ( )}

); }; const calendarItemKindLabel = (item) => { if (item?.itemKind === 'anuncio') return 'Aviso'; if (item?.itemKind === 'birthday') return 'Cumpleaños'; return item?.type || 'Evento'; }; const calendarDayTabLabel = (item, index) => { if (item?.itemKind === 'anuncio') return `Aviso ${index + 1}`; if (item?.itemKind === 'birthday') return index > 0 ? `Cumpleaños ${index + 1}` : 'Cumpleaños'; return `Evento ${index + 1}`; }; function birthdayDisplayFromItem (item) { const raw = item?._raw || {}; const name = String(raw.full_name || item?.name || 'Alumno').replace(/^🎂\s*/, '').trim(); const age = raw.birth_date && typeof ageFromBirthDate === 'function' ? ageFromBirthDate(raw.birth_date) : null; const ageNum = age && age !== '—' ? age : null; return { name, ageLabel: ageNum ? `${ageNum} años` : null, imageUrl: item?.imageUrl || null, imageFocusX: item?.imageFocusX ?? 50, imageFocusY: item?.imageFocusY ?? 50, dateLabel: item?.dateLabel || '', studentId: raw.student_id || null, }; } /** Captura un nodo DOM como PNG (foreignObject → canvas, sin dependencias extra). */ async function captureElementAsPngBlob (node, { scale = 2 } = {}) { if (!node?.offsetWidth || !node?.offsetHeight) { throw new Error('No se pudo medir la tarjeta de cumpleaños.'); } const hidden = []; node.querySelectorAll('[data-capture-hide]').forEach((el) => { hidden.push([el, el.style.visibility]); el.style.visibility = 'hidden'; }); try { try { await document.fonts.ready; } catch {} const toDataURL = (url) => { if (!url || String(url).indexOf('data:') === 0) return Promise.resolve(url); return fetch(url, { mode: 'cors' }) .then((r) => (r.ok ? r.blob() : Promise.reject())) .then((b) => new Promise((res, rej) => { const fr = new FileReader(); fr.onload = () => res(fr.result); fr.onerror = () => rej(new Error('img')); fr.readAsDataURL(b); })) .catch(() => url); }; const fontRules = []; const pending = []; const seen = new Set(); const scrapeCss = (href) => { if (seen.has(href)) return; seen.add(href); pending.push(fetch(href).then((r) => r.text()).then((css) => { for (const m of css.match(/@font-face\s*{[^}]*}/g) || []) fontRules.push({ css: m, base: href }); }).catch(() => {})); }; const walk = (rules, base) => { for (const r of rules) { if (r.type === CSSRule.FONT_FACE_RULE) fontRules.push({ css: r.cssText, base }); else if (r.type === CSSRule.IMPORT_RULE && r.styleSheet) { const ibase = r.styleSheet.href || base; try { walk(r.styleSheet.cssRules, ibase); } catch { scrapeCss(ibase); } } else if (r.cssRules) walk(r.cssRules, base); } }; for (const ss of document.styleSheets) { const base = ss.href || location.href; try { walk(ss.cssRules, base); } catch { if (ss.href) scrapeCss(ss.href); } } while (pending.length) await pending.shift(); const fontCss = (await Promise.all(fontRules.map(async (rule) => { let out = rule.css; let m; const re = /url$(['"]?)([^'")]+)\1$/g; while ((m = re.exec(rule.css))) { if (m[2].indexOf('data:') === 0) continue; let abs; try { abs = new URL(m[2], rule.base).href; } catch { continue; } out = out.split(m[0]).join(`url("${await toDataURL(abs)}")`); } return out; }))).join('\n'); const cloneStyled = (src) => { if (src.nodeType === 8 || (src.nodeType === 1 && src.tagName === 'SCRIPT')) return document.createTextNode(''); const dst = src.cloneNode(false); if (src.nodeType === 1) { const cs = getComputedStyle(src); let txt = ''; for (let i = 0; i < cs.length; i++) txt += `${cs[i]}:${cs.getPropertyValue(cs[i])};`; dst.setAttribute('style', `${txt}animation:none;transition:none;`); } for (let c = src.firstChild; c; c = c.nextSibling) dst.appendChild(cloneStyled(c)); return dst; }; const clone = cloneStyled(node); clone.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); clone.style.boxShadow = 'none'; clone.style.margin = '0'; const jobs = []; clone.querySelectorAll('img').forEach((el) => { const s = el.getAttribute('src'); if (s && s.indexOf('data:') !== 0) { jobs.push(toDataURL(el.src).then((d) => { if (d) el.setAttribute('src', d); })); } }); [clone, ...clone.querySelectorAll('*')].forEach((el) => { const bg = el.style?.backgroundImage; if (!bg) return; let m; const re = /url$["']?([^"')]+)["']?$/g; while ((m = re.exec(bg))) { const tok = m[0]; const url = m[1]; if (url.indexOf('data:') === 0) continue; jobs.push(toDataURL(url).then((d) => { el.style.backgroundImage = el.style.backgroundImage.split(tok).join(`url("${d}")`); })); } }); await Promise.all(jobs); const w = node.offsetWidth; const h = node.offsetHeight; const xml = new XMLSerializer().serializeToString(clone); const px = scale; const svg = ``; const img = new Image(); await new Promise((res, rej) => { img.onload = res; img.onerror = () => rej(new Error('No se pudo renderizar la imagen.')); img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`; }); const cv = document.createElement('canvas'); cv.width = w * px; cv.height = h * px; cv.getContext('2d').drawImage(img, 0, 0); const blob = await new Promise((res, rej) => { cv.toBlob((b) => (b ? res(b) : rej(new Error('No se pudo generar el PNG.'))), 'image/png'); }); return blob; } finally { hidden.forEach(([el, prev]) => { el.style.visibility = prev; }); } } function downloadImageBlob (blob, filename) { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; a.click(); URL.revokeObjectURL(url); } /** Comparte la tarjeta de cumpleaños: Web Share con PNG o descarga + wa.me. */ async function shareBirthdayCongratsViaWhatsApp ({ blob, displayName, schoolName }) { const slug = String(displayName || 'cumpleanos').toLowerCase().replace(/[^a-z0-9áéíóúñ]+/gi, '-').replace(/^-|-$/g, '') || 'cumpleanos'; const filename = `felicitacion-${slug}.png`; const file = new File([blob], filename, { type: 'image/png' }); const msg = displayName ? `¡Feliz cumpleaños, ${displayName}! 🎂 De parte de ${schoolName}.` : `¡Feliz cumpleaños! 🎂 De parte de ${schoolName}.`; if (typeof navigator !== 'undefined' && navigator.share) { try { const canFiles = navigator.canShare?.({ files: [file] }); if (canFiles) { await navigator.share({ files: [file], title: 'Felicitación de cumpleaños', text: msg }); return { mode: 'share' }; } } catch (e) { if (e?.name === 'AbortError') throw e; } } downloadImageBlob(blob, filename); const shareText = `${msg}\n\nSe descargó la imagen de la felicitación; adjúntala en este chat.`; if (typeof openWhatsAppChat === 'function') { openWhatsAppChat('', shareText); } else { window.open(`https://wa.me/?text=${encodeURIComponent(shareText)}`, '_blank', 'noopener,noreferrer'); } return { mode: 'download_and_wa' }; } /** Modal de felicitación al cumpleañero (calendario y lista). */ const BirthdayCongratsModal = ({ open, onClose, item, theme, viewerStudent }) => { const closeModal = React.useCallback(bindModalClose(onClose), [onClose]); const display = React.useMemo(() => (item ? birthdayDisplayFromItem(item) : null), [item]); const [schoolName, setSchoolName] = React.useState('TECOS ELITE VOLLEYBALL'); const [sharing, setSharing] = React.useState(false); const captureRef = React.useRef(null); React.useEffect(() => { if (!open || typeof fetchAcademySettings !== 'function') return; fetchAcademySettings().then((s) => { if (s?.venue_name) setSchoolName(s.venue_name); }).catch(() => {}); }, [open]); if (!open || !display) return null; const isSelf = !!( viewerStudent?._uuid && display.studentId && String(viewerStudent._uuid) === String(display.studentId) ); const message = isSelf ? '¡Feliz cumpleaños! Todo el club celebra contigo hoy. Sigue entrenando con el corazón de campeón que nos caracteriza en Tecos Elite.' : `¡Feliz cumpleaños, ${display.name}! De parte de toda la familia ${schoolName} te deseamos un día increíble y un año lleno de éxitos dentro y fuera de la cancha.`; const onShareWhatsApp = async () => { if (sharing || !captureRef.current) return; setSharing(true); try { const blob = await captureElementAsPngBlob(captureRef.current); await shareBirthdayCongratsViaWhatsApp({ blob, displayName: display.name, schoolName, }); } catch (e) { if (e?.name !== 'AbortError') { window.alert(e?.message || 'No se pudo generar la imagen para compartir. Intenta de nuevo.'); } } finally { setSharing(false); } }; return (

🎂

{isSelf ? '¡Es tu día!' : 'Felicitaciones'}

{(display.name || '').toUpperCase()}

{display.ageLabel && (

Cumple {display.ageLabel}

)} {display.dateLabel && (

{display.dateLabel}

)}

{display.imageUrl ? (

) : ( )}

{message}

— {schoolName} —

{sharing ? 'Generando imagen…' : 'Compartir por WhatsApp'} ¡Gracias!

); }; const CalendarDayModal = ({ open, onClose, items, tab, onTabChange, theme, onOpenItem, onBirthdayClick }) => { const closeModal = React.useCallback(bindModalClose(onClose), [onClose]); const current = items?.[tab]; if (!current) return null; const extra = (items?.length || 0) > 3 ? items.length - 3 : 0; return (

EVENTOS DEL DÍA

{items.length > 1 && (

{items.map((it, i) => ( ))}

)}

{current.dateLabel || current.time || ''} {extra > 0 && tab >= 2 ? ` · +${extra} más en este día (solo se muestran 3 en el calendario)` : ''}

{current.description && (

{current.description}

)}

{current.itemKind === 'birthday' && ( { closeModal(); onBirthdayClick?.(current); }}> Ver felicitación )} {(current.itemKind === 'event' || current.itemKind === 'anuncio') && ( onOpenItem?.(current)}> {current.itemKind === 'anuncio' ? 'Ver aviso completo' : 'Ver evento'} )} Cerrar

); }; const CalendarioSection = ({ theme, onEventClick, onAnnouncementClick, onCalendarFocus, onBirthdayClick, highlightDayKey, highlightColor, variant = 'landing', }) => { const isMobile = useIsMobile(); const { data: eventRows, loading: loadingEvents, reload: reloadEvents } = useLiveData(() => fetchPublicEvents(), []); const { rows: annRows, loading: loadingAnn, error: annError, reload: reloadAnn } = useAnnouncementsFeed(); const todayKey = formatEventDayKey(new Date()); const [viewYear, setViewYear] = React.useState(() => new Date().getFullYear()); const [viewMonth, setViewMonth] = React.useState(() => new Date().getMonth()); const [bdayRows, setBdayRows] = React.useState([]); const [loadingBdays, setLoadingBdays] = React.useState(false); const [filter, setFilter] = React.useState('todos'); const [dayModal, setDayModal] = React.useState(null); React.useEffect(() => { const on = () => { reloadEvents(); reloadAnn(); }; window.addEventListener('tecos:announcements-changed', on); return () => window.removeEventListener('tecos:announcements-changed', on); }, [reloadEvents, reloadAnn]); React.useEffect(() => { let cancelled = false; if (typeof fetchCalendarBirthdays !== 'function') { setBdayRows([]); return undefined; } setLoadingBdays(true); fetchCalendarBirthdays(viewYear, viewMonth) .then((rows) => { if (!cancelled) setBdayRows(rows || []); }) .catch(() => { if (!cancelled) setBdayRows([]); }) .finally(() => { if (!cancelled) setLoadingBdays(false); }); return () => { cancelled = true; }; }, [viewYear, viewMonth]); const loading = loadingEvents || loadingAnn || loadingBdays; const eventos = (eventRows || []).map(e => mapEventCalendar(e, theme)); const avisos = (annRows || []).map(a => mapAnnouncementCalendar(a, theme)).filter(Boolean); const cumpleanos = (bdayRows || []).map(b => mapBirthdayCalendar(b, theme)).filter(Boolean); const calItems = React.useMemo( () => [...eventos, ...avisos, ...cumpleanos], [eventRows, annRows, bdayRows, theme] ); const types = ['todos', 'avisos', 'torneos', 'cumpleaños', 'reuniones', 'pagos', 'entrenamientos']; const typeMap = { torneos: 'torneo', cumpleaños: 'cumpleaños', reuniones: 'reunión', pagos: 'pago', entrenamientos: 'entrenamiento' }; const filtered = React.useMemo(() => { if (filter === 'todos') return calItems; if (filter === 'avisos') return avisos; if (filter === 'cumpleaños') { return calItems.filter(e => e.itemKind === 'birthday' || e.type === 'cumpleaños' || e.type === 'cumpleanos'); } return eventos.filter(e => e.type === typeMap[filter]); }, [filter, calItems, avisos, eventos, cumpleanos]); React.useEffect(() => { if (!highlightDayKey) return; const [y, m] = highlightDayKey.split('-').map(Number); if (y && m) { setViewYear(y); setViewMonth(m - 1); } }, [highlightDayKey]); const itemsOnDay = (dayKey) => calItems.filter(e => e.dayKeys?.includes(dayKey)); const cells = buildMonthCells(viewYear, viewMonth); const prevMonth = () => { if (viewMonth === 0) { setViewMonth(11); setViewYear(y => y - 1); } else setViewMonth(m => m - 1); }; const nextMonth = () => { if (viewMonth === 11) { setViewMonth(0); setViewYear(y => y + 1); } else setViewMonth(m => m + 1); }; const openCalendarItem = (item) => { if (!item) return; if (item.itemKind === 'birthday') { if (onBirthdayClick) onBirthdayClick(item); else if (onCalendarFocus) onCalendarFocus(item); else return; } if (item.itemKind === 'anuncio') onAnnouncementClick?.(item._raw || item); else onEventClick?.(item._raw || item); }; const openDayModal = (dayKey, tab = 0) => { const list = itemsOnDay(dayKey); if (!list.length) return; setDayModal({ dayKey, items: list, tab: Math.min(tab, list.length - 1) }); }; /** Clic en miniatura del día o en imagen de la lista → modal del ítem. */ const activateCalendarItem = (dayKey, dayItems, index) => { const item = dayItems?.[index]; if (!item) return; if (item.itemKind === 'birthday') { if (onBirthdayClick) onBirthdayClick(item); else openDayModal(dayKey, index); return; } if (dayItems.length > 2) { openDayModal(dayKey, index); return; } openCalendarItem(item); }; const handleDayCellClick = (dayKey, dayItems) => { if (!dayItems.length) return; if (dayItems.length > 2) openDayModal(dayKey, 0); else activateCalendarItem(dayKey, dayItems, 0); }; const handleDayThumbClick = (e, dayKey, dayItems, index) => { e.stopPropagation(); activateCalendarItem(dayKey, dayItems, index); }; const handleDayModalOpenItem = (item) => { setDayModal(null); openCalendarItem(item); }; const sectionPad = variant === 'portal' ? '32px' : '100px 40px'; return (

{/* Filters */}

{types.map(t => ( ))}

{/* Calendar */}

{monthLabel(viewYear, viewMonth)}

{/* Day headers */}

{['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'].map(d => (

{d}

))}

{/* Cells */}

{cells.map((cell, i) => { if (!cell) return

; const { day, dayKey } = cell; const dayItems = itemsOnDay(dayKey); const hasItems = dayItems.length > 0; const neon = highlightDayKey === dayKey; const glowColor = neon ? (highlightColor || dayItems[0]?.color || theme.primary) : null; const isToday = dayKey === todayKey; const layout = hasItems ? calendarDayGridLayout(dayItems.length) : null; const visibleItems = hasItems ? dayItems.slice(0, layout.visible) : []; const overflowCount = hasItems ? Math.max(0, dayItems.length - layout.visible) : 0; return (

hasItems && handleDayCellClick(dayKey, dayItems)} onKeyDown={e => { if (hasItems && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); handleDayCellClick(dayKey, dayItems); } }} style={{ aspectRatio: '1', borderRadius: 10, background: neon ? `${glowColor}33` : (hasItems ? `${dayItems[0].color}12` : theme.bgInput), border: `1px solid ${neon ? glowColor : (hasItems ? dayItems[0].color : theme.border)}`, padding: 4, position: 'relative', overflow: 'hidden', cursor: hasItems ? 'pointer' : 'default', display: 'flex', flexDirection: 'column', transition: 'all .25s', boxShadow: neon ? `0 0 28px ${glowColor}88, inset 0 0 24px ${glowColor}33` : 'none', animation: neon ? 'pulseGlow 2s ease-in-out infinite' : 'none', }} > {day} {hasItems && (

{visibleItems.map((it, idx) => ( ))}

)} {overflowCount > 0 && ( +{overflowCount} )}

); })}

{loading ? ( ) : filtered.length === 0 ? ( ) : filtered.map((ev) => (

openCalendarItem(ev)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openCalendarItem(ev); } }} style={{ flex: 1, minWidth: 0, cursor: 'pointer' }} >

{ev.name}

{ev.dateLabel || ev.time} · {ev.itemKind === 'anuncio' ? 'Aviso' : ev.itemKind === 'birthday' ? 'Cumpleaños' : ev.type}

))}

setDayModal(null)} items={dayModal?.items || []} tab={dayModal?.tab ?? 0} onTabChange={(i) => setDayModal((prev) => (prev ? { ...prev, tab: i } : null))} theme={theme} onOpenItem={handleDayModalOpenItem} onBirthdayClick={onBirthdayClick} />

); }; const navBtn = (theme) => ({ width: 36, height: 36, borderRadius: 8, background: theme.bgInput, border: `1px solid ${theme.border}`, color: theme.text, cursor: 'pointer', display: 'grid', placeItems: 'center', }); /* ENTRENADORES */ const EntrenadoresSection = ({ theme, onCoachClick }) => { const { data: rows, loading, reload } = useLiveData(() => fetchActiveCoaches(), []); const coaches = rows.map(mapCoachCard); React.useEffect(() => { const onChange = () => reload(); window.addEventListener('tecos:coaches-changed', onChange); return () => window.removeEventListener('tecos:coaches-changed', onChange); }, [reload]); return (

{loading ? ( ) : coaches.length === 0 ? ( ) : coaches.map((c) => (

{c.photoUrl ? (

) : (

)} {c.exp && (

{c.exp} EXP.

)}

{c.name}

{c.role}

{c.spec && (

{c.spec}

)} onCoachClick(c)}>Ver perfil

))}

); }; /* GALERÍA — álbumes compactos */ const GalleryAlbumModal = ({ open, onClose, theme, album }) => { const [idx, setIdx] = React.useState(0); React.useEffect(() => { if (open) setIdx(0); }, [open, album?.id]); if (!album) return null; const photos = album.photos?.length ? album.photos : (album.coverUrl ? [{ url: album.coverUrl }] : []); const cur = photos[idx] || photos[0]; const prev = () => setIdx(i => (i <= 0 ? photos.length - 1 : i - 1)); const next = () => setIdx(i => (i >= photos.length - 1 ? 0 : i + 1)); return (

{(album.dateLabel || album.eventTitle) && (

{album.dateLabel}{album.eventTitle ? ` · ${album.eventTitle}` : ''}

)} {cur?.url ? (

) : ( )} {photos.length > 1 && (

‹ {idx + 1} / {photos.length} ›

)} {photos.length > 1 && (

{photos.map((p, i) => ( ))}

)}

); }; const GaleriaSection = ({ theme }) => { const [cat, setCat] = React.useState('todas'); const [viewAlbum, setViewAlbum] = React.useState(null); const { data: albums, loading, reload } = useLiveData(() => fetchPublicGalleryAlbums(), []); const { data: categories } = useLiveData(() => fetchPublicGalleryCategories(), []); React.useEffect(() => { const onChange = () => reload(); window.addEventListener('tecos:gallery-changed', onChange); return () => window.removeEventListener('tecos:gallery-changed', onChange); }, [reload]); const catFilters = React.useMemo(() => { const fromDb = (categories || []).map(c => ({ slug: c.slug, label: c.name })); const slugs = new Set(fromDb.map(c => c.slug)); (albums || []).forEach(a => { if (a.categorySlug && !slugs.has(a.categorySlug)) { fromDb.push({ slug: a.categorySlug, label: a.category }); slugs.add(a.categorySlug); } }); return [{ slug: 'todas', label: 'Todas' }, ...fromDb]; }, [categories, albums]); const filtered = cat === 'todas' ? albums : (albums || []).filter(a => a.categorySlug === cat); return (

{catFilters.map(t => ( ))}

{loading ? ( ) : filtered.length === 0 ? ( ) : (

{filtered.map((alb) => ( setViewAlbum(alb)}>

{alb.coverUrl ? (

) : ( )} {alb.photoCount > 1 && (

{alb.photoCount} fotos

)}

{alb.title}

{alb.eventTitle || alb.dateLabel || alb.category}

))}

)}

setViewAlbum(null)} theme={theme} album={viewAlbum} />

); }; /* MAPA / UBICACIÓN — datos desde academy_settings (admin → Ubicación) */ const MapaSection = ({ theme }) => { const isMobile = useIsMobile(); const { settings, loading, reload } = typeof useAcademySettings === 'function' ? useAcademySettings() : { settings: normalizeAcademySettings(null), loading: true, reload: () => {} }; const loc = settings; React.useEffect(() => { const onChange = () => reload(); window.addEventListener('tecos:settings-changed', onChange); return () => window.removeEventListener('tecos:settings-changed', onChange); }, [reload]); const addressHtml = formatLocationAddress(loc).split('\n').map((line, i) => ( {i > 0 &&
}{line} )); const mapsUrl = buildGoogleMapsOpenUrl(loc); const mapHeight = isMobile ? 280 : 420; return (

{loading ? ( Cargando mapa… ) : ( )}

{loc.venue_name}

Dirección

{addressHtml}

Horarios

{loc.schedule_weekdays}{loc.schedule_saturday ? <>
{loc.schedule_saturday} : null}

Contacto

{loc.contact_phone}{loc.contact_email ? <>
{loc.contact_email} : null}

Abrir en Google Maps

{!getGoogleMapsApiKey() && (

Tip: agrega googleMapsApiKey en config.js para mapa interactivo con estilo neón.

)}

); }; /* CONTACTO / FORM INTERESADOS */ const EMPTY_INTEREST_FORM = { name: '', studentName: '', age: '', phone: '', email: '', message: '' }; const InterestedLeadFormContent = ({ theme, source = 'landing', onClose, columns = 2 }) => { const [sent, setSent] = React.useState(false); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); const [form, setForm] = React.useState({ ...EMPTY_INTEREST_FORM }); const [phoneDial, setPhoneDial] = React.useState(DEFAULT_PHONE_DIAL); const [phoneNational, setPhoneNational] = React.useState(''); const reset = () => { setForm({ ...EMPTY_INTEREST_FORM }); setPhoneDial(DEFAULT_PHONE_DIAL); setPhoneNational(''); setErr(''); setSent(false); }; const submit = async () => { if (!form.name.trim()) { setErr('Escribe tu nombre (tutor o responsable).'); return; } const phone = combinePhoneWithDial(phoneDial, phoneNational); if (!phone.trim()) { setErr('Escribe tu teléfono.'); return; } if (!isSupabaseReady()) { setErr('El formulario no está conectado a la base de datos. Contacta a la academia.'); return; } setBusy(true); setErr(''); try { if (typeof window.submitInterestedLead !== 'function') { throw new Error('El envío no está disponible. Recarga la página (F5).'); } await window.submitInterestedLead({ name: form.name.trim(), phone: phone.trim(), email: form.email.trim(), message: form.message.trim(), student_name: form.studentName.trim(), student_age: form.age.trim(), source, }); window.notifyLeadsChanged?.(); window.dispatchNotificationsChanged?.(); setSent(true); setForm({ ...EMPTY_INTEREST_FORM }); setPhoneDial(DEFAULT_PHONE_DIAL); setPhoneNational(''); } catch (e) { setErr(e.message || 'No se pudo enviar. Intenta de nuevo.'); } setBusy(false); }; if (sent) { return (

¡SOLICITUD ENVIADA!

Te contactaremos pronto al teléfono o correo que registraste.

{onClose && Cerrar} Enviar otra solicitud

); } return (

setForm(f => ({ ...f, name: e.target.value }))} /> setForm(f => ({ ...f, studentName: e.target.value }))} /> setForm(f => ({ ...f, age: e.target.value }))} /> setForm(f => ({ ...f, email: e.target.value }))} />

Mensaje

setForm(f => ({ ...f, message: e.target.value }))} style={{
          background: theme.bgInput, border: `1px solid ${theme.border}`,
          borderRadius: 10, padding: 12, color: theme.text, fontFamily: 'Inter, sans-serif',
          fontSize: 14, outline: 'none', resize: 'vertical',
        }} />
      </div>
      {err && <div style={{ gridColumn: '1 / -1', color: theme.danger, fontSize: 13, fontFamily: 'Inter, sans-serif' }}>{err}</div>}
      <div style={{ gridColumn: '1 / -1', display: 'flex', gap: 12, marginTop: 6, flexWrap: 'wrap' }}>
        <Btn theme={theme} size="lg" icon="send" onClick={submit} disabled={busy}>{busy ? 'Enviando…' : 'Enviar solicitud'}</Btn>
        <Btn theme={theme} size="lg" kind="ghost" onClick={onClose || reset} disabled={busy}>{onClose ? 'Cancelar' : 'Limpiar'}</Btn>
      </div>
    </div>
  );
};

const SolicitaInformacionModal = ({ open, onClose, theme }) => (
  <Modal open={open} onClose={onClose} theme={theme} width={640} innerScroll>
    <div style={{
      padding: '18px 22px', borderBottom: `1px solid ${theme.border}`,
      display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, flexShrink: 0,
    }}>
      <div>
        <div style={{ fontSize: 11, color: theme.textMute, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', fontFamily: 'Inter, sans-serif' }}>
          ¿Te interesa entrenar con nosotros?
        </div>
        <h3 style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 28, color: theme.text, margin: '4px 0 0', letterSpacing: 1, fontWeight: 400 }}>
          SOLICITA INFORMACIÓN
        </h3>
        <p style={{ margin: '6px 0 0', fontSize: 13, color: theme.textDim, fontFamily: 'Inter, sans-serif', lineHeight: 1.45 }}>
          Déjanos tus datos y un asesor te contactará en menos de 24 horas.
        </p>
      </div>
      <button type="button" onClick={onClose} style={{
        width: 36, height: 36, borderRadius: 8, background: theme.bgInput,
        border: `1px solid ${theme.border}`, color: theme.text, cursor: 'pointer',
        display: 'grid', placeItems: 'center', flexShrink: 0,
      }}><Icon name="x" size={16} /></button>
    </div>
    <div style={{ padding: 24, overflowY: 'auto', flex: 1, minHeight: 0 }}>
      {open && (
        <InterestedLeadFormContent key="login-interest-form" theme={theme} source="login" onClose={onClose} columns={1} />
      )}
    </div>
  </Modal>
);

/* FOOTER */
const footerLinkStyle = (theme) => ({
  background: 'none', border: 'none', padding: 0, margin: 0,
  color: theme.textDim, fontSize: 13, fontFamily: 'Inter, sans-serif',
  cursor: 'pointer', textAlign: 'left', textDecoration: 'none',
  display: 'inline-block', transition: 'color .2s',
});

const Footer = ({ theme, onNav, onOpenInscripcion }) => {
  const { settings: s, reload } = typeof useAcademySettings === 'function'
    ? useAcademySettings()
    : { settings: normalizeAcademySettings(null), reload: () => {} };

React.useEffect(() => {
    const onChange = () => reload();
    window.addEventListener('tecos:settings-changed', onChange);
    return () => window.removeEventListener('tecos:settings-changed', onChange);
  }, [reload]);

const academiaLinks = [
    { label: 'Inscripciones', onClick: () => onOpenInscripcion?.() },
    { label: 'Galería', onClick: () => onNav?.('galeria') },
    { label: 'Entrenadores', onClick: () => onNav?.('entrenadores') },
    { label: 'Login', onClick: () => onNav?.('login') },
  ];
  const serviciosLinks = [
    { label: 'Tienda online', href: 'tienda.html' },
    { label: 'Torneos', onClick: () => onNav?.('calendario') },
    { label: 'Campamentos', onClick: () => onNav?.('calendario') },
    { label: 'Eventos', onClick: () => onNav?.('calendario') },
    { label: 'Aviso de privacidad', href: 'aviso-de-privacidad.html' },
  ];

const contactLines = [
    s.contact_phone ? { value: s.contact_phone, href: `tel:${String(s.contact_phone).replace(/\s/g, '')}` } : null,
    s.contact_email ? { value: s.contact_email, href: `mailto:${s.contact_email}` } : null,
    s.footer_address_line1 ? { value: s.footer_address_line1 } : null,
    s.footer_address_line2 ? { value: s.footer_address_line2 } : null,
  ].filter(Boolean);

return (
    <footer className="tecos-site-footer" style={{
      background: theme.bgElev, borderTop: `1px solid ${theme.border}`,
      padding: '60px 40px 30px', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, opacity: 0.2 }}>
        <Net color={theme.primary} height={40} />
      </div>
      <div className="tecos-footer-grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <Logo size={72} theme={theme} />
          <p style={{ color: theme.textDim, fontSize: 13, marginTop: 16, fontFamily: 'Inter, sans-serif', maxWidth: 320, lineHeight: 1.6 }}>
            {s.footer_tagline}
          </p>
        </div>
        <div>
          <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 20, letterSpacing: 1, color: theme.text, marginBottom: 14 }}>Academia</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8 }}>
            {academiaLinks.map(item => <FooterLinkItem key={item.label} theme={theme} item={item} />)}
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 20, letterSpacing: 1, color: theme.text, marginBottom: 14 }}>Servicios</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8 }}>
            {serviciosLinks.map(item => <FooterLinkItem key={item.label} theme={theme} item={item} />)}
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 20, letterSpacing: 1, color: theme.text, marginBottom: 14 }}>Contacto</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8 }}>
            {contactLines.map((line, i) => (
              <li key={i}>
                {line.href ? (
                  <a href={line.href} style={footerLinkStyle(theme)}>{line.value}</a>
                ) : (
                  <span style={{ color: theme.textDim, fontSize: 13, fontFamily: 'Inter, sans-serif' }}>{line.value}</span>
                )}
              </li>
            ))}
          </ul>
          <SocialLinksRow theme={theme} settings={s} />
        </div>
      </div>
      <div
        className="tecos-footer-bottom-bar"
        style={{
          maxWidth: 1280, margin: '40px auto 0', paddingTop: 20,
          borderTop: `1px solid ${theme.border}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
        }}
      >
        <FooterCopyrightBadge theme={theme} text={s.footer_copyright_text} url={s.footer_copyright_url} />
        {isStudioCreditLink(s.footer_credit_text, s.footer_credit_url) ? (
          <FooterStudioCredit text={s.footer_credit_text} url={s.footer_credit_url} />
        ) : (
          <FooterBottomLine theme={theme} text={s.footer_credit_text} url={s.footer_credit_url} />
        )}
      </div>
    </footer>
  );
};

/* MODALS for event & coach */
const EventConfirmModal = ({ open, onClose, theme, eventId, eventColor, onConfirmed }) => {
  const [digits, setDigits] = React.useState('');
  const [pendingStudent, setPendingStudent] = React.useState(null);
  const [studentVerified, setStudentVerified] = React.useState(null);
  const [lookupBusy, setLookupBusy] = React.useState(false);
  const [checkBusy, setCheckBusy] = React.useState(false);
  const [alreadyRegistered, setAlreadyRegistered] = React.useState(false);
  const [registrationDone, setRegistrationDone] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [ok, setOk] = React.useState('');
  const lookupTimerRef = React.useRef(null);
  const glow = eventColor || theme.primary;

const fullCode = typeof buildTecStudentCode === 'function'
    ? buildTecStudentCode(digits)
    : (digits ? `TEC${digits.padStart(3, '0')}` : '');
  const locked = alreadyRegistered || registrationDone;

React.useEffect(() => {
    if (!open) return;
    setDigits('');
    setErr('');
    setOk('');
    setPendingStudent(null);
    setStudentVerified(null);
    setLookupBusy(false);
    setCheckBusy(false);
    setAlreadyRegistered(false);
    setRegistrationDone(false);
    if (lookupTimerRef.current) clearTimeout(lookupTimerRef.current);
  }, [open]);

const scheduleLookup = (d) => {
    if (lookupTimerRef.current) clearTimeout(lookupTimerRef.current);
    const code = typeof buildTecStudentCode === 'function' ? buildTecStudentCode(d) : '';
    if (!code) {
      setPendingStudent(null);
      setAlreadyRegistered(false);
      return;
    }
    lookupTimerRef.current = setTimeout(() => lookupStudentByCode(code), 450);
  };

const onDigitsChange = (d) => {
    setDigits(d);
    setStudentVerified(null);
    setPendingStudent(null);
    setOk('');
    setErr('');
    setAlreadyRegistered(false);
    scheduleLookup(d);
  };

const confirmYes = () => {
    if (!pendingStudent) return;
    setStudentVerified(pendingStudent);
    setDigits(digitsFromTecCode(pendingStudent.code));
    setPendingStudent(null);
  };

const confirmNo = () => {
    setPendingStudent(null);
    setStudentVerified(null);
  };

return (
    <Modal open={open} onClose={onClose} theme={theme} title="Confirmar asistencia" width={440}>
      <div style={{ padding: '8px 24px 24px', display: 'grid', gap: 14, fontFamily: 'Inter, sans-serif' }}>
        <p style={{ margin: 0, fontSize: 13, color: theme.textDim }}>
          Escribe solo el número de tu ID (prefijo TEC incluido). Si coincide con un registro, confirma tu identidad.
        </p>
        <TecStudentIdField
          theme={theme}
          label="Número de ID"
          icon="medal"
          digits={digits}
          onDigitsChange={onDigitsChange}
          onBlur={() => fullCode && lookupStudentByCode(fullCode)}
          disabled={locked}
        />
        {(lookupBusy || checkBusy) && (
          <p style={{ margin: 0, fontSize: 12, color: theme.textDim }}>
            {checkBusy ? 'Verificando registro…' : 'Buscando alumno…'}
          </p>
        )}
        {locked && !ok && (
          <div style={{
            padding: 12, borderRadius: 10, background: `${theme.warning}18`,
            border: `1px solid ${theme.warning}44`, fontSize: 13, color: theme.text,
          }}>
            Este ID ya confirmó asistencia a este evento. No se puede volver a enviar con el mismo número.
          </div>
        )}
        {pendingStudent && !studentVerified && !locked && (
          <StudentConfirmNeonBanner
            theme={theme}
            student={pendingStudent}
            glowColor={glow}
            onYes={confirmYes}
            onNo={confirmNo}
            subtitle="Si confirmas, registraremos tu asistencia a este evento."
          />
        )}
        {studentVerified && !locked && (
          <div style={{
            padding: 12, borderRadius: 10,
            background: `${theme.success}18`, border: `1px solid ${theme.success}44`,
            fontSize: 12, color: theme.text,
            boxShadow: `0 0 16px ${theme.success}33`,
          }}>
            Identidad confirmada: <strong>{studentVerified.code}</strong> — {studentVerified.full_name}
          </div>
        )}
        {err && <div style={{ color: theme.danger, fontSize: 13 }}>{err}</div>}
        {ok && <div style={{ color: theme.success, fontSize: 13 }}>{ok}</div>}
        <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
          <Btn theme={theme} kind="ghost" onClick={onClose}>Cerrar</Btn>
          <Btn theme={theme} icon="check" onClick={submit}
            disabled={saving || !eventId || locked || !fullCode}
            style={studentVerified && !locked ? { boxShadow: `0 0 18px ${glow}66` } : undefined}>
            {saving ? 'Confirmando…' : locked ? 'Ya confirmado' : 'Confirmar asistencia'}
          </Btn>
        </div>
      </div>
    </Modal>
  );
};

const EventModal = ({ open, onClose, ev, theme }) => {
  const closeModal = React.useCallback(bindModalClose(onClose), [onClose]);
  const [confirmOpen, setConfirmOpen] = React.useState(false);
  const display = React.useMemo(() => {
    if (!ev) return null;
    if (ev.title) return mapEventCalendar(ev, theme);
    if (ev._raw) return mapEventCalendar(ev._raw, theme);
    if (ev.name) return ev;
    return null;
  }, [ev, theme, open]);

const eventId = display?.id || ev?.id;

return (
    <>
      <Modal open={open} onClose={onClose} theme={theme} width={560}>
        {display && (
          <div>
            <div style={{
              height: 200, position: 'relative', overflow: 'hidden',
              background: display.imageUrl ? '#111' : `linear-gradient(135deg, ${display.color}, ${theme.bgElev})`,
            }}>
              {display.imageUrl ? (
                <img src={display.imageUrl} alt="" style={{
                  position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
                  objectPosition: `${display.imageFocusX}% ${display.imageFocusY}%`,
                }} />
              ) : (
                <>
                  <CourtLines color="#fff" opacity={0.2} />
                  <div style={{ position: 'absolute', bottom: -30, right: -30, opacity: 0.4 }}>
                    <Volleyball size={200} color="#fff" />
                  </div>
                </>
              )}
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75))' }} />
              <button type="button" tabIndex={-1} onMouseDown={(e) => e.preventDefault()} onClick={closeModal} style={{
                position: 'absolute', top: 14, right: 14, width: 36, height: 36, borderRadius: 8,
                background: 'rgba(0,0,0,0.4)', border: 'none', color: '#fff',
                cursor: 'pointer', display: 'grid', placeItems: 'center', outline: 'none', boxShadow: 'none',
              }}><Icon name="x" size={18} /></button>
              <div style={{ position: 'absolute', bottom: 16, left: 24, right: 24 }}>
                <Badge theme={theme} color="primary" soft={false} style={{ background: 'rgba(0,0,0,0.4)', color: '#fff', border: 'none' }}>{display.type}</Badge>
                <h3 style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 32, letterSpacing: 1, color: '#fff', margin: '6px 0 0', fontWeight: 400 }}>{display.name}</h3>
              </div>
            </div>
            <div style={{ padding: 24 }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 16, marginBottom: 20 }}>
                {[
                  { l: 'Fecha', v: display.dateLabel, i: 'cal' },
                  { l: 'Hora', v: display.time, i: 'clock' },
                  { l: 'Lugar', v: display.location || 'Por definir', i: 'pin' },
                ].map(it => (
                  <div key={it.l}>
                    <div style={{ color: theme.textMute, fontSize: 10, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'Inter, sans-serif' }}>
                      <Icon name={it.i} size={12} />{it.l}
                    </div>
                    <div style={{ color: theme.text, fontSize: 14, marginTop: 4, fontWeight: 600, fontFamily: 'Inter, sans-serif' }}>{it.v}</div>
                  </div>
                ))}
              </div>
              {display.mapsUrl && (
                <p style={{ margin: '0 0 16px' }}>
                  <a href={display.mapsUrl} target="_blank" rel="noopener noreferrer" style={{ color: theme.primary, fontSize: 13, fontFamily: 'Inter, sans-serif' }}>
                    Ver en Google Maps →
                  </a>
                </p>
              )}
              <h4 style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 1, color: theme.textMute, textTransform: 'uppercase', margin: '0 0 8px' }}>Descripción</h4>
              <p style={{ color: theme.textDim, fontSize: 14, lineHeight: 1.5, margin: 0, fontFamily: 'Inter, sans-serif', whiteSpace: 'pre-wrap' }}>
                {display.description || 'Sin descripción adicional.'}
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap' }}>
                <Btn theme={theme} icon="check" onClick={() => setConfirmOpen(true)} disabled={!eventId}>Confirmar asistencia</Btn>
                <Btn theme={theme} kind="ghost" onClick={closeModal}>Cerrar</Btn>
              </div>
            </div>
          </div>
        )}
      </Modal>
      <EventConfirmModal open={confirmOpen} onClose={() => setConfirmOpen(false)} theme={theme} eventId={eventId} eventColor={display?.color} />
    </>
  );
};

const CoachModal = ({ open, onClose, coach, theme }) => (
  <Modal open={open} onClose={onClose} theme={theme} width={560}>
    {coach && (
      <div>
        <div style={{
          padding: 22, display: 'flex', gap: 16, alignItems: 'center',
          background: `linear-gradient(135deg, ${theme.primary}22, ${theme.bgElev})`,
          position: 'relative', overflow: 'hidden',
        }}>
          <CourtLines color={theme.primary} opacity={0.2} />
          {coach.photoUrl ? (
            <img src={coach.photoUrl} alt="" style={{
              width: 72, height: 72, borderRadius: 12, objectFit: 'cover', flexShrink: 0,
              objectPosition: `${coach.photoFocusX ?? 50}% ${coach.photoFocusY ?? 50}%`,
            }} />
          ) : (
            <Avatar name={coach.name} size={72} color={theme.primary} />
          )}
          <div style={{ position: 'relative', minWidth: 0 }}>
            <Badge theme={theme} color="primary">{coach.role}</Badge>
            <h3 style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 28, letterSpacing: 1, color: theme.text, margin: '6px 0 2px', fontWeight: 400 }}>{coach.name}</h3>
            <div style={{ fontSize: 12, color: theme.textDim, fontFamily: 'Inter, sans-serif' }}>
              {coach.exp ? `${coach.exp} años de experiencia` : (coach.spec || '')}
            </div>
          </div>
          <button onClick={onClose} style={{
            position: 'absolute', top: 12, right: 12, width: 32, height: 32, borderRadius: 8,
            background: theme.bgInput, border: `1px solid ${theme.border}`, color: theme.text,
            cursor: 'pointer', display: 'grid', placeItems: 'center',
          }}><Icon name="x" size={16} /></button>
        </div>
        <div style={{ padding: 20, display: 'grid', gap: 16 }}>
          {coach.trajectory && (
            <div>
              <div style={{ color: theme.textMute, fontSize: 10, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6, fontFamily: 'Inter, sans-serif' }}>Trayectoria</div>
              <p style={{ color: theme.textDim, fontSize: 13, lineHeight: 1.6, margin: 0, fontFamily: 'Inter, sans-serif', whiteSpace: 'pre-wrap' }}>{coach.trajectory}</p>
            </div>
          )}
          {(coach.certifications?.length > 0 || coach.assignedGroups?.length > 0) && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {coach.certifications?.length > 0 && (
                <div>
                  <div style={{ color: theme.textMute, fontSize: 10, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6, fontFamily: 'Inter, sans-serif' }}>Certificaciones</div>
                  <ul style={{ color: theme.text, fontSize: 12, margin: 0, padding: '0 0 0 16px', lineHeight: 1.6, fontFamily: 'Inter, sans-serif' }}>
                    {coach.certifications.map((line, i) => <li key={i}>{line}</li>)}
                  </ul>
                </div>
              )}
              {coach.assignedGroups?.length > 0 && (
                <div>
                  <div style={{ color: theme.textMute, fontSize: 10, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6, fontFamily: 'Inter, sans-serif' }}>Grupos asignados</div>
                  <ul style={{ color: theme.text, fontSize: 12, margin: 0, padding: '0 0 0 16px', lineHeight: 1.6, fontFamily: 'Inter, sans-serif' }}>
                    {coach.assignedGroups.map((line, i) => <li key={i}>{line}</li>)}
                  </ul>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    )}
  </Modal>
);

Object.assign(window, {
  TopNav, Hero, LandingSectionAnchor, LazyWhenVisible, AvisosSection, CalendarioSection, EntrenadoresSection,
  GaleriaSection, MapaSection, FormSection, Footer, EventModal, AvisoModal, CoachModal,
  BirthdayCongratsModal, birthdayDisplayFromItem,
  SolicitaInformacionModal, InterestedLeadFormContent,
});

{s.hero_title_line1} {s.hero_title_line2} {s.hero_title_line3}

{a.title}

{a.title}

{(display.name || '').toUpperCase()}

EVENTOS DEL DÍA

{monthLabel(viewYear, viewMonth)}

{c.name}

{alb.title}

{loc.venue_name}

¡SOLICITUD ENVIADA!

{s.hero_title_line1}
{s.hero_title_line2}
{s.hero_title_line3}