= s ? 'var(--gold)' : 'rgba(11,45,92,0.15)',
transition: 'background 0.3s',
}} />
))}
{step === 1 && (
<>
{Ti('reg.step1')}
{Ti('reg.step1')}
set('contactName', e.target.value)}
placeholder={Ti('reg.namePh')} style={inputStyle} required />
set('phone', e.target.value)}
placeholder={Ti('reg.phonePh')} style={inputStyle} required />
set('email', e.target.value)}
placeholder={Ti('reg.emailPh')} style={inputStyle} />
set('website', e.target.value)} style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
)}
{step === 2 && (
<>
{Ti('reg.step2')}
{Ti('reg.step2')}
set('churchName', e.target.value)}
placeholder={Ti('reg.churchPh')} style={inputStyle} required />
set('neighborhood', v)}
placeholder={Ti('reg.neighborhoodPh')}
options={NEIGHBORHOODS}
/>
{SIZES.map(s => (
))}
)}
{step === 3 && (() => {
const mIdx = cycleIndex % 12;
const yr = 2027 + Math.floor(cycleIndex / 12);
const track = mIdx % 2 === 0 ? 'A' : 'B';
const trackData = claimedDays[track] || {};
const getDayStatus = (d) => {
const info = trackData[d];
return info ? 'taken' : 'available';
};
const totalClaimed = Object.keys(claimedDays.A || {}).length + Object.keys(claimedDays.B || {}).length;
const totalSpots = 61;
const spotsLeft = totalSpots - totalClaimed;
const firstDow = new Date(yr, mIdx, 1).getDay();
const dim = new Date(yr, mIdx + 1, 0).getDate();
const lang = (window.__getLang && window.__getLang()) || 'en';
const mLabel = new Date(yr, mIdx, 1).toLocaleDateString(lang === 'es' ? 'es-US' : 'en-US', { month: 'long', year: 'numeric' });
const dh = lang === 'es' ? ['D','L','M','X','J','V','S'] : ['S','M','T','W','T','F','S'];
const cells = [];
for (let i = 0; i < firstDow; i++) cells.push(null);
for (let d = 1; d <= dim; d++) cells.push(d);
return (
<>
{Ti('reg.step3')}
{Ti('reg.step3')}
{Ti('reg.preferredDayNote')}
20 ? 'rgba(6,28,58,0.06)' : 'rgba(242,183,5,0.12)',
borderRadius: 8, padding: '8px 14px', marginBottom: 14,
}}>
{spotsLeft}
{lang === 'es' ? `de ${totalSpots} lugares disponibles` : `of ${totalSpots} spots available`}
{mLabel}
{dh.map((h, i) => (
{h}
))}
{cells.map((d, i) => {
if (d === null) return
;
const selected = form.preferredDay === d && form.cycleTrack === track;
const isTaken = getDayStatus(d) === 'taken';
const bg = selected ? 'var(--blue)' : isTaken ? 'rgba(11,45,92,0.08)' : 'transparent';
const color = selected ? 'var(--gold)' : isTaken ? 'rgba(11,45,92,0.35)' : 'var(--ink)';
return (
);
})}
{Ti('reg.dayAvailable')}
{Ti('reg.dayTaken')}
{form.preferredDay > 0 && form.preferredDay < 4 && form.cycleTrack === 'A' && (
{Ti('reg.earlyDayNote')}
)}
{form.preferredDay === 31 && form.cycleTrack === 'A' && (
{Ti('reg.edgeA31')}
)}
{form.preferredDay === 31 && form.cycleTrack === 'B' && (
{Ti('reg.edgeB31')}
)}
{form.preferredDay >= 29 && form.preferredDay <= 30 && form.cycleTrack === 'B' && (
{Ti('reg.edgeBFeb')}
)}
{form.preferredDay === 0 && (
{Ti('reg.skipDay')}
)}
{Ti('reg.intercessorQuestion')}
{form.hasIntercessor === false && (
{Ti('reg.intercessorNote')}
)}
{form.hasIntercessor === true && (
<>
set('intercessorName', e.target.value)}
placeholder={Ti('reg.intercessorNamePh')} style={inputStyle} />
set('intercessorPhone', e.target.value)}
placeholder={Ti('reg.intercessorPhonePh')} style={inputStyle} />
set('intercessorEmail', e.target.value)}
placeholder={Ti('reg.intercessorEmailPh')} style={inputStyle} />
)}
{err &&
{err}
}
);
})()}
{step === 4 && (() => {
const hasDates = form.preferredDay > 0;
const trackMonths = form.cycleTrack === 'B' ? [1, 3, 5, 7, 9, 11] : [0, 2, 4, 6, 8, 10];
const lang = (window.__getLang && window.__getLang()) || 'en';
const locale = lang === 'es' ? 'es-US' : 'en-US';
const dates = hasDates ? trackMonths.map(m => {
const dim = new Date(2027, m + 1, 0).getDate();
const day = Math.min(form.preferredDay, dim);
return new Date(2027, m, day).toLocaleDateString(locale, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
}) : [];
return (
✦
{Ti('reg.done.title')}
{Ti('reg.done.body')}
{hasDates ? (
<>
{Ti('reg.done.dates')}
{dates.map((d, i) => (
{d}
))}
{Ti('reg.done.screenshot')}
) : null}
);
})()}