// App.jsx — Marcela & Manuel · v2 with envelope, gallery, RSVP form, music, advanced personalization
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ─── Palettes ─────────────────────────────────────────────────
const PALETTES = {
olivo: { '--cream':'#F5F1E8','--cream-deep':'#ECE5D3','--paper':'#FBF8F0','--olive':'#6B7D4F','--olive-light':'#9CA77A','--olive-pale':'#C4CCA9','--olive-soft':'#D9DEC4','--gold':'#B0904F','--gold-soft':'#D4B97A','--ink':'#3F4A2E','--ink-soft':'#6E6A55' },
rosa: { '--cream':'#FBEEE8','--cream-deep':'#F4DDD2','--paper':'#FFF7F2','--olive':'#A35D5A','--olive-light':'#C48986','--olive-pale':'#E8C5BF','--olive-soft':'#F1D9D4','--gold':'#B0904F','--gold-soft':'#D4B97A','--ink':'#5C2E2C','--ink-soft':'#8a605d' },
azul: { '--cream':'#EAEEF2','--cream-deep':'#D7DFE8','--paper':'#F4F7FA','--olive':'#3F5A78','--olive-light':'#6F88A3','--olive-pale':'#B7C6D6','--olive-soft':'#D4DCE5','--gold':'#B89766','--gold-soft':'#D4B97A','--ink':'#1F324A','--ink-soft':'#506378' },
borgona:{ '--cream':'#F2EAE6','--cream-deep':'#E2D2CC','--paper':'#FAF4F0','--olive':'#7A2E33','--olive-light':'#A35F62','--olive-pale':'#D4B0B2','--olive-soft':'#E5CFD0','--gold':'#B0904F','--gold-soft':'#D4B97A','--ink':'#3D1518','--ink-soft':'#73464a' },
dorado:{ '--cream':'#F5EFE3','--cream-deep':'#E8DCC2','--paper':'#FBF7EC','--olive':'#8A6E2F','--olive-light':'#B89766','--olive-pale':'#DCC79B','--olive-soft':'#EADBB7','--gold':'#9C6B30','--gold-soft':'#C99A55','--ink':'#3E2E12','--ink-soft':'#7a6440' },
noche: { '--cream':'#1E2418','--cream-deep':'#2A3122','--paper':'#252B1E','--olive':'#C4CCA9','--olive-light':'#9CA77A','--olive-pale':'#6B7D4F','--olive-soft':'#3F4A2E','--gold':'#D4B97A','--gold-soft':'#B0904F','--ink':'#F5F1E8','--ink-soft':'#C4CCA9' },
};
function applyPalette(name) {
const p = PALETTES[name] || PALETTES.olivo;
Object.entries(p).forEach(([k,v]) => document.documentElement.style.setProperty(k, v));
}
// ─── URL params ───────────────────────────────────────────────
function getParams() {
const p = new URLSearchParams(window.location.search);
const nombre = (p.get('nombre') || p.get('invitado') || '').trim();
const pases = parseInt(p.get('pases') || p.get('espacios') || '0', 10);
const mesa = (p.get('mesa') || '').trim();
const tipo = (p.get('tipo') || '').trim().toLowerCase();
const mensaje = (p.get('mensaje') || '').trim();
const tema = (p.get('tema') || p.get('palette') || 'olivo').trim().toLowerCase();
const token = (p.get('t') || p.get('token') || '').trim();
return {
nombre,
pases: Number.isFinite(pases) && pases > 0 ? pases : 0,
mesa,
tipo,
mensaje,
tema: PALETTES[tema] ? tema : 'olivo',
token,
};
}
// ─── Reveal hook ──────────────────────────────────────────────
function useReveal() {
useEffect(() => {
const io = new IntersectionObserver(es => es.forEach(e => e.isIntersecting && e.target.classList.add('in')), { threshold: 0.18, rootMargin: '0px 0px -40px 0px' });
const observeAll = () => document.querySelectorAll('.reveal:not(.in)').forEach(el => io.observe(el));
observeAll();
// La galería agrega elementos .reveal después del primer render
const mo = new MutationObserver(observeAll);
mo.observe(document.getElementById('root'), { childList: true, subtree: true });
return () => { io.disconnect(); mo.disconnect(); };
}, []);
}
// ─── Countdown ────────────────────────────────────────────────
const TARGET = new Date('2026-07-18T14:30:00-06:00');
function useCountdown() {
const [now, setNow] = useState(() => new Date());
useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []);
const diff = Math.max(0, TARGET - now);
return {
d: Math.floor(diff / 86400000),
h: Math.floor((diff / 3600000) % 24),
m: Math.floor((diff / 60000) % 60),
s: Math.floor((diff / 1000) % 60),
};
}
// ─── Petals ───────────────────────────────────────────────────
function PetalLayer() {
const petals = useMemo(() => Array.from({ length: 14 }).map((_, i) => ({
id: i, left: Math.random() * 100, delay: Math.random() * 18,
duration: 14 + Math.random() * 12, size: 8 + Math.random() * 8, type: i % 3,
})), []);
return (
{petals.map(p => (
{p.type === 0 ? (
))}
);
}
function MiniLeaf() {
return (
);
}
// ─── Icons ────────────────────────────────────────────────────
const ChurchIcon = () => (
{guestName}
Marcela& Manuel
— Te invitamos a —
Nuestra Boda
M&M
Toca para abrir
);
}
// ─── Music toggle ─────────────────────────────────────────────
function MusicToggle() {
const [playing, setPlaying] = useState(false);
const [hasAudio, setHasAudio] = useState(true);
const audioRef = useRef(null);
useEffect(() => {
const a = new Audio('fotos/audio.mp3');
a.loop = true; a.volume = 0.45;
a.addEventListener('error', () => setHasAudio(false));
audioRef.current = a;
return () => { a.pause(); audioRef.current = null; };
}, []);
const toggle = () => {
const a = audioRef.current; if (!a) return;
if (playing) { a.pause(); setPlaying(false); }
else { a.play().then(() => setPlaying(true)).catch(() => setHasAudio(false)); }
};
if (!hasAudio) return null;
return (
{playing ?
);
}
// ─── Gallery ──────────────────────────────────────────────────
function Gallery() {
const [photos, setPhotos] = useState(null);
const [active, setActive] = useState(0);
const railRef = useRef(null);
useEffect(() => {
// Primero las fotos subidas desde el panel (base de datos); si no hay,
// se usa el manifest estático (fotos/manifest.json) como respaldo.
fetch('api/photos', { cache: 'no-store' })
.then(r => r.ok ? r.json() : [])
.then(data => {
if (Array.isArray(data) && data.length) { setPhotos(data); return; }
return fetch('fotos/manifest.json', { cache: 'no-store' })
.then(r => r.ok ? r.json() : [])
.then(m => setPhotos(Array.isArray(m) ? m : []));
})
.catch(() => setPhotos([]));
}, []);
useEffect(() => {
const rail = railRef.current; if (!rail) return;
const onScroll = () => {
const w = rail.children[0]?.offsetWidth || 1;
const gap = 14;
const idx = Math.round(rail.scrollLeft / (w + gap));
setActive(idx);
};
rail.addEventListener('scroll', onScroll, { passive: true });
return () => rail.removeEventListener('scroll', onScroll);
}, [photos]);
if (photos === null) return null;
// If no photos, show 4 placeholders
const items = photos.length ? photos : Array.from({ length: 4 }).map((_, i) => ({ placeholder: i + 1 }));
return (
Nuestra historia
Galería
Algunos momentos que nos trajeron hasta aquí.
{items.map((p, i) => (
{p.placeholder ? (
{String(p.placeholder).padStart(2, '0')}
Foto · {p.placeholder}
agrega tus fotos
) : (
{ e.currentTarget.style.display = 'none'; }} />
)}
))}
{items.map((_, i) => (
))}
);
}
// ─── RSVP Form ────────────────────────────────────────────────
function RsvpForm({ defaultName, defaultPases, mesaText, guestToken, waNumber, onSubmitted }) {
// La confirmación se cachea por invitado (token o nombre del titular) para que
// una respuesta previa NO se muestre al abrir otra invitación en el mismo navegador.
const storageKey = `mm_rsvp_${guestToken || defaultName || 'anon'}`;
const [submitted, setSubmitted] = useState(() => {
try { return JSON.parse(localStorage.getItem(storageKey) || 'null'); } catch { return null; }
});
// Limpia la clave global antigua que dejaba el saludo "fijado" entre invitaciones.
useEffect(() => { try { localStorage.removeItem('mm_rsvp'); } catch {} }, []);
const [attending, setAttending] = useState('si');
const [name, setName] = useState(defaultName || '');
const [pases, setPases] = useState(defaultPases || 1);
const [notes, setNotes] = useState('');
const [busy, setBusy] = useState(false);
const submit = (e) => {
e.preventDefault();
if (busy) return;
setBusy(true);
const payload = {
attending, name: name.trim(), pases: attending === 'si' ? pases : 0,
notes: notes.trim(),
mesa: mesaText || '',
timestamp: new Date().toISOString(),
};
localStorage.setItem(storageKey, JSON.stringify(payload));
// Save to backend DB (best-effort — WhatsApp still works if the API is down)
const dbSave = fetch('api/rsvp', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
nombre: payload.name,
attending: payload.attending,
pases: payload.pases,
mesa: payload.mesa,
notes: payload.notes,
guest_token: guestToken || '',
}),
}).catch(() => {});
// Build WhatsApp message
const lines = [
`*RSVP — Boda Marcela & Manuel*`,
``,
`Nombre: ${payload.name || '(sin nombre)'}`,
attending === 'si' ? `✅ Confirmo mi asistencia` : `❌ No podré asistir`,
];
if (attending === 'si') {
lines.push(`Personas: ${payload.pases}`);
if (payload.mesa) lines.push(`Mesa: ${payload.mesa}`);
}
if (payload.notes) lines.push(``, `Mensaje: ${payload.notes}`);
const text = encodeURIComponent(lines.join('\n'));
const num = (waNumber || '50372470414').replace(/[^0-9]/g, '');
const wa = `https://wa.me/${num}?text=${text}`;
dbSave.finally(() => {
window.open(wa, '_blank');
setSubmitted(payload);
setBusy(false);
onSubmitted && onSubmitted(payload);
});
};
const reset = () => { localStorage.removeItem(storageKey); setSubmitted(null); };
if (submitted) {
return (
¡Gracias, {defaultName || submitted.name || 'invitado'}!
{submitted.attending === 'si'
? `Tu asistencia para ${submitted.pases} ${submitted.pases === 1 ? 'persona' : 'personas'} ha sido registrada. Nos vemos el 18 de julio.`
: 'Lamentamos que no puedas acompañarnos. Gracias por avisarnos.'}
Editar respuesta
);
}
return (
);
}
// ─── Main App ─────────────────────────────────────────────────
function App() {
useReveal();
const cd = useCountdown();
const urlParams = useMemo(() => getParams(), []);
const [guest, setGuest] = useState(null);
const [settings, setSettings] = useState(null);
// If the link carries a token (?t=abc123), pull the guest's data from the DB.
useEffect(() => {
if (!urlParams.token) return;
fetch(`api/guest-by-token/${encodeURIComponent(urlParams.token)}`)
.then(r => (r.ok ? r.json() : null))
.then(g => g && setGuest(g))
.catch(() => {});
}, [urlParams.token]);
// Configuración editable desde el panel (teléfonos, misal).
useEffect(() => {
fetch('api/settings')
.then(r => (r.ok ? r.json() : null))
.then(s => s && setSettings(s))
.catch(() => {});
}, []);
const telMarce = settings?.tel_marce || '+50372470414';
const telManuel = settings?.tel_manuel || '+50300000000';
const waRsvp = settings?.wa_rsvp || '50372470414';
const hasMisal = !!settings?.misal;
// DB values (via token) take precedence; URL params are the fallback.
const nombre = guest?.nombre || urlParams.nombre;
const pases = guest?.pases || urlParams.pases;
const mesa = guest?.mesa || urlParams.mesa;
const tipo = (guest?.tipo || urlParams.tipo || '').toLowerCase();
const mensaje = guest?.mensaje || urlParams.mensaje;
const guestName = nombre || 'Querido invitado';
const tipoLabel = tipo ? `Lado ${tipo}` : null;
return (
{/* HERO */}
{tipoLabel &&
{tipoLabel}
}
— Para —
{guestName}
Sábado · 18 Julio 2026
{pases > 0 && (
)}
{mesa &&
Mesa {mesa}
}
{mensaje &&
"{mensaje}"
}
{/* QUOTE */}
Te invitamos a nuestra boda
Dios ha llenado nuestros corazones con su inmenso amor y sabemos que con Él construiremos un hogar lleno de paz.
Acompáñanos a sellar nuestro amor.
{/* GALLERY */}
{/* SAVE THE DATE */}
{String(cd.h).padStart(2,'0')}
Horas
{String(cd.m).padStart(2,'0')}
Min
{String(cd.s).padStart(2,'0')}
Seg
{/* CEREMONY */}
Ceremonia
Religiosa
Parroquia El Calvario
Carretera Panamericana 5-3
{/* RECEPTION */}
Recepción
Cena & celebración
Quinta Las Tumbergias
Volcán de San Salvador
Referencia: arriba de Volcatenango
{/* MISAL */}
{hasMisal && (
Misal
Orden de la ceremonia
Sigue la celebración religiosa con nuestro misal. Puedes verlo o descargarlo aquí.
)}
{/* DRESS CODE */}
Código de vestimenta
Vestimenta formal
Mujeres — favor evitar
Estos son los colores de la novia y de la decoración.
{/* GIFT */}
Mesa de regalos
Lluvia de sobres
Agradecemos tus muestras de cariño en regalo de sobre. Tu presencia es nuestro mejor regalo.
{/* RSVP */}
Confirma tu asistencia
Para reservar tu espacio es indispensable confirmar tu asistencia.
Antes del 30 de junio 2026
{/* FOOTER */}
);
}
ReactDOM.createRoot(document.getElementById('root')).render( 
{ e.currentTarget.style.display = 'none'; }} />
)}