{/* PORTADA */}

{/* esquinas doradas */}

{/* monograma sello */}

Mis XV Años

Valentina

Sábado 24 de Mayo · 7:00 PM

Desliza para ver más

{/* CUENTA REGRESIVA */}

Falta poco para mi gran día

{cd.map(([l, v]) => (

{String(v).padStart(2, '0')}

{l}

))}

{/* FRASE */}

“Hoy una niña deja de serlo para empezar a escribir su propia historia.”

{/* ITINERARIO */} Itinerario

{[['church', 'Misa de acción de gracias', '6:00 PM'], ['drink', 'Recepción y coctel', '7:30 PM'], ['plate', 'Cena formal', '8:30 PM'], ['dance', 'Vals y baile', '9:30 PM']].map(([ic, t, h], i, a) => (

{i < a.length - 1 && }

{t}

{h}

))}

{/* DÓNDE */} Ubicación

Av. de las Fiestas 1200
Col. Jardines · Ciudad

{/* VESTIMENTA */} Código de vestimenta

Color reservado para la quinceañera:

{['#E8B4C2', '#C9A05C'].map(c => )}

{/* PADRINOS */} Con la bendición de

{[['Mis padres', 'Roberto & Carmen'], ['Mis padrinos', 'Jorge & Lucía']].map(([r, n]) => (

{r}

{n}

))}

{/* RSVP */} Confirma tu asistencia

Tu presencia es el mejor regalo. Por favor confírmanos antes del 10 de mayo.

{/* MESA DE REGALOS */} Mesa de regalos

{[['gift', 'Sobre'], ['gift', 'Liverpool'], ['gift', 'Amazon']].map(([ic, t]) => (

{t}

))}

{/* CIERRE */}

Valentina · Mis XV Años

Desliza dentro del celular para recorrer toda la invitación

); } function ItemDetalle({ name, accent, onGo, onClose }) { const info = VV.ITEM_INFO[name] || {}; const cort = info.cort ? VV.CORTESIAS.find(c => c.id === info.cort) : null; const fotos = info.fotos ? info.fotos : (cort && cort.gallery ? cort.gallery : null); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); return (

e.stopPropagation()}>

{name}

Incluido en tu paquete

{info.d || 'Elemento incluido en el paquete.'}

{info.invitacion && } {info.video && (

)} {!info.invitacion && !info.video && fotos && info.poster && (

)} {!info.invitacion && !info.video && fotos && !info.poster && (

{fotos.map((src, i) => ( {name}

))}

)}

{info.go && ( )}

); } function SecPaquetes({ onGo }) { const pkgs = VV.PAQUETES; const [activeId, setActiveId] = useState(() => localStorage.getItem('vv_pkgview') || 'diamante'); const [detalle, setDetalle] = useState(null); useEffect(() => { localStorage.setItem('vv_pkgview', activeId); }, [activeId]); const p = pkgs.find(x => x.id === activeId) || pkgs[0]; const parent = p.hereda ? pkgs.find(x => x.name === p.hereda) : null; const hasGal = (name) => { const info = VV.ITEM_INFO[name]; if (!info) return false; if (info.fotos && info.fotos.length) return true; if (!info.cort) return false; const c = VV.CORTESIAS.find(x => x.id === info.cort); return !!(c && c.gallery && c.gallery.length); }; return (

{detalle && setDetalle(null)} />}

Paquetes Todo Incluido 2026

Tres formas de celebrar

Elige un paquete para verlo a detalle. Toca cualquier elemento incluido para conocer más.

{/* Pestañas — una hoja por paquete */}

{pkgs.map(pk => { const on = pk.id === activeId; return ( ); })}

{/* Hoja del paquete activo */}

{/* Cabecera */}

{p.name} {p.popular && Más elegido para XV}

{p.tag}

{p.horasDet}

{p.priceFrom &&

${p.priceFrom}

}

${p.priceMain}

por persona

{p.priceNote}{p.priceNote2 ? ' · ' + p.priceNote2 : ''}

{/* Cuerpo */}

{parent && (

Incluye TODO lo del paquete {p.hereda}, y además:

)}

{parent ? 'Lo nuevo de este paquete' : 'Todo lo que incluye'} · toca un elemento para ver el detalle

{p.incluye.map((x, i) => { const info = VV.ITEM_INFO[x] || {}; return ( ); })}

{p.cortesias === 'Todas' ? 'Incluye TODAS las cortesías' : `Incluye ${p.cortesias} cortesía${p.cortesias > 1 ? 's' : ''} a elegir`}

{[{ i: 'users', t: 'Mínimo 100 invitados' }, { i: 'car', t: 'Estacionamiento 45 autos' }, { i: 'badge', t: 'Calidad garantizada' }].map((x, k) => (

{x.t}

))}

); } function ComparaTabla({ activeId, onPick }) { const pkgs = VV.PAQUETES; const Cell = ({ v, accent }) => { if (v === true) return ; if (v === false) return —; return {v}; }; return (

Compara los 3 paquetes

Todo de un vistazo. Toca un paquete para abrir su hoja completa arriba.

{pkgs.map(p => ( ))} {VV.COMPARA.map((row, i) => ( ))}

	onPick(p.id)} style={p.id === activeId ? { boxShadow: `inset 0 -3px 0 ${p.accent}` } : undefined}> {p.name} {p.popular && Más elegido}
{row.t}

Todos los paquetes incluyen absolutamente todo lo listado · sin costos ocultos.

); } /* ---------------- 7 · COTIZADOR ---------------- */ function ppFor(pkgId, guests) { if (pkgId === 'premium') return guests < 150 ? 470 : 420; if (pkgId === 'diamante') return 530; return 680; } function SecCotizador() { const [pkgId, setPkgId] = useState(() => localStorage.getItem('vv_pkg') || 'diamante'); const [guests, setGuests] = useState(() => +(localStorage.getItem('vv_guests') || 150)); const [cliente, setCliente] = useState(() => localStorage.getItem('vv_cliente') || ''); const [evento, setEvento] = useState(() => localStorage.getItem('vv_evento') || ''); useEffect(() => { localStorage.setItem('vv_pkg', pkgId); }, [pkgId]); useEffect(() => { localStorage.setItem('vv_guests', guests); }, [guests]); useEffect(() => { localStorage.setItem('vv_cliente', cliente); }, [cliente]); useEffect(() => { localStorage.setItem('vv_evento', evento); }, [evento]); const pkg = VV.PAQUETES.find(p => p.id === pkgId); const pp = ppFor(pkgId, guests); const total = pp * guests; const anticipo = 3000; const restante = total - anticipo; const fmt = (n) => '$' + n.toLocaleString('es-MX'); const minWarn = pkgId !== 'premium' && guests < 150; const minPax = pkgId === 'premium' ? 100 : 150; useEffect(() => { if (guests < minPax) setGuests(minPax); }, [minPax]); return (

Tu Inversión

Armemos tus números

Ajusta el paquete y los invitados. El total se calcula en vivo — recuerda que incluye absolutamente todo.

{/* Controles */}

1 · Elige paquete

{VV.PAQUETES.map(p => ( ))}

2 · Número de invitados

{guests} invitados

setGuests(+e.target.value)} className="vv-range" />

{minPax}400

{minWarn && (

{pkg.name} aplica desde 150 invitados. Premium desde 100.

)}

3 · Datos para la cotización

A nombre de setCliente(e.target.value)} /> Evento setEvento(e.target.value)} list="vv-eventos" />

{/* Resultado */}

Paquete {pkg.name}

{fmt(pp)} por persona × {guests}

Inversión total

{fmt(total)}

Todo incluido · sin costos ocultos

Anticipo para apartar {fmt(anticipo)}

Restante (a meses) {fmt(restante)}

Genera una hoja formal con el resumen, sus cortesías favoritas y la fecha elegida.

); } /* ---------------- 9 · DISPONIBILIDAD ---------------- */ const MESES = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre']; function statusFor(y, m, d) { const dow = new Date(y, m, d).getDay(); // 0 dom ... 6 sab if (dow !== 5 && dow !== 6) return 'week'; // entre semana const h = (m * 31 + d * 7) % 10; if (h < 3) return 'taken'; if (h < 6) return 'few'; return 'open'; } function SecFechas() { const [mi, setMi] = useState(0); const months = [[2026,6],[2026,7],[2026,8],[2026,9],[2026,10],[2026,11]]; const [y, m] = months[mi]; const [picked, setPicked] = useState(() => localStorage.getItem('vv_fecha') || ''); const first = new Date(y, m, 1).getDay(); const days = new Date(y, m + 1, 0).getDate(); const cells = [...Array(first).fill(null), ...Array.from({ length: days }, (_, i) => i + 1)]; const pick = (d) => { const k = `${d} ${MESES[m]} ${y}`; setPicked(k); localStorage.setItem('vv_fecha', k); }; return (

Disponibilidad

Aparta tu fecha

Las fechas de temporada vuelan. Estas son las disponibles — elige la tuya antes de que alguien más lo haga.

{MESES[m]} {y}

{['D','L','M','M','J','V','S'].map((d, i) =>

{d}

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

; const st = statusFor(y, m, d); const key = `${d} ${MESES[m]} ${y}`; const isPicked = picked === key; return ( ); })}

{[['open','Disponible','var(--vv-emerald)'],['few','Pocas fechas','var(--vv-gold)'],['taken','Apartado','var(--vv-muted-2)'],['week','Entre semana','var(--vv-line-strong)']].map((l,i)=>( {l[1]} ))}

Fecha elegida

{picked || 'Toca una fecha disponible'}

Te aparto la fecha tentativa hasta por 48 h sin compromiso mientras lo platican.

); } /* ---------------- 10 · CIERRE ---------------- */ function SecCierre({ onGo }) { const pkgId = localStorage.getItem('vv_pkg') || 'diamante'; const pkg = VV.PAQUETES.find(p => p.id === pkgId); const guests = +(localStorage.getItem('vv_guests') || 150); const mantel = VV.MANTELES.find(m => m.id === (localStorage.getItem('vv_mantel') || 'verde')); const fecha = localStorage.getItem('vv_fecha') || 'Por definir'; const pp = ppFor(pkgId, guests); const total = pp * guests; const fmt = (n) => '$' + n.toLocaleString('es-MX'); const resumen = [ { i: 'diamond', l: 'Paquete', v: pkg.name, c: pkg.accent }, { i: 'users', l: 'Invitados', v: guests + ' personas' }, { i: 'sparkle', l: 'Mantelería', v: mantel ? mantel.name : '—', c: mantel && mantel.hex }, { i: 'calendar', l: 'Fecha', v: fecha }, ]; return (

El momento es ahora

Hagamos tu fiesta realidad

Con solo $3,000 de anticipo apartas tu fecha y congelas el precio 2026. Esto es lo que diseñamos juntos:

{resumen.map((r, i) => (

{r.l}

{r.v}

))}

Inversión total estimada

{fmt(total)}

{pkg.name} · {guests} invitados · todo incluido

{/* Contacto */}

Ubicación

{VV.CONTACTO.lugar}

{VV.CONTACTO.whats}

Horario

Lun–Sáb · 10–12 y 3–6 pm

); } Object.assign(window, { SecPaquetes, SecCotizador, SecFechas, SecCierre, ppFor });