const { useState, useEffect, useRef, useCallback } = React; /* ============================================ DATA ============================================ */ const WEDDING = { date: new Date('2026-11-28T16:00:00-05:00'), names: { her: 'Camila', him: 'Mateo', short: 'C & M', hashtag: '#CAM&MAT' }, ceremony: { day: 'Sábado 28 de noviembre', year: '2026', time: '3:30 PM', arrive: '', venue: 'Casa Kapikua', address: 'Km 20 vía Santa Marta — Ciénaga', city: 'Santa Marta, Magdalena', mapsUrl: 'https://www.google.com/maps/search/?api=1&query=Casa+Kapikua+Santa+Marta', mapsEmbed: 'https://maps.google.com/maps?q=Casa%20Kapikua%20Santa%20Marta&t=m&z=15&output=embed&iwloc=near', coords: '11.0910° N 74.2185° W', }, preboda: { day: 'Viernes 27 de noviembre', year: '2026', time: '5:00 PM', venue: 'BK Restobar', address: 'Cra 1 # 1 - 104, Edificio Cascadas del Rodadero', city: 'Rodadero, Santa Marta, Magdalena', note: 'Entrada por el edificio Cascadas del Rodadero', mapsUrl: 'https://www.google.com/maps/search/?api=1&query=BK+Restobar+Rodadero+Santa+Marta', mapsEmbed: 'https://maps.google.com/maps?q=BK%20Restobar%20Rodadero%20Santa%20Marta&t=m&z=16&output=embed&iwloc=near', coords: '11.2000° N 74.2280° W', pinterestUrl: 'https://co.pinterest.com/tenoriocamila1/outfit-preboda/?invite_code=6efaf7edaee2413b8157842303891da9&sender=734227682908225709', }, spotify: { playlistUrl: 'https://open.spotify.com/playlist/4I081EXqNbXUrCdQdMiKuZ?si=ovrocmreQyq1JB2K2Q2NDQ&pt=af3ada4b9d60635ca334a2a35e53a7d4&pi=pT-BUTeiQl-vS', embedUrl: 'https://open.spotify.com/embed/playlist/4I081EXqNbXUrCdQdMiKuZ?utm_source=generator&theme=0', uri: 'spotify:playlist:4I081EXqNbXUrCdQdMiKuZ', }, rsvpEndpoint: 'https://script.google.com/macros/s/AKfycbzaBZLJr3AoCFxUyeeI-yExHvYqDBvYK6CFvJqLcjDQ9LgNFRldtMKzaTGjlTIB0uvPJQ/exec', rsvpSheetUrl: 'https://docs.google.com/spreadsheets/d/1-dwnS65m2dm5lLe1KW1gZBi3TIH3hwvVQdeHTnN1mWw/edit', pinterest: { ellos: 'https://co.pinterest.com/tenoriocamila1/outfits-ellos/', ellas: 'https://co.pinterest.com/tenoriocamila1/outfit-ellas/?invite_code=7d83154532bf4237807b99041fd2aee5&sender=734227682908225709', }, dresscode: { title: 'Playa Elegante', subtitle: 'Celebramos bajo el sol y las estrellas del Caribe. Ponte lindo, como siempre.', colors: [ { name: 'Blanco', hex: '#f3efe6' }, { name: 'Beige', hex: '#d8c9a8' }, { name: 'Arena', hex: '#c2a878' }, ], }, gallery: [ { src: 'photos/gallery-15.jpg', caption: 'Juntos mirando el horizonte', code: 'R001' }, { src: 'photos/gallery-100.jpg', caption: 'Beso entre jardines', code: 'R002' }, { src: 'photos/gallery-35.jpg', caption: 'Poniendo el anillo', code: 'R003' }, { src: 'photos/gallery-160.jpg', caption: 'Sonriendo frente al mar', code: 'R004' }, { src: 'photos/gallery-180.jpg', caption: 'Paseando juntos', code: 'R005' }, { src: 'photos/gallery-240.jpg', caption: 'Beso al atardecer', code: 'R006' }, { src: 'photos/gallery-120.jpg', caption: 'La propuesta', code: 'R007' }, { src: 'photos/foto3.jpg', caption: 'Luz dorada', code: 'R008' }, { src: 'photos/foto5.jpg', caption: 'Entre cipreses', code: 'R009' }, { src: 'photos/foto7.jpg', caption: 'De la mano', code: 'R010' }, ], polaroids: [ { src: 'photos/couple-hero.jpg', caption: 'el día que dijimos sí' }, { src: 'photos/foto4.jpg', caption: 'nuestro rincón' }, { src: 'photos/foto6.jpg', caption: 'bajo la luz dorada' }, { src: 'photos/foto8.jpg', caption: 'atardecer eterno' }, { src: 'photos/gallery-35.jpg', caption: 'el sí' }, ], hotels: [ { tag: 'Recomendado', name: 'Irotama Resort', meta: 'Santa Marta · 5★\nPlaya privada · 15 min al venue', url: '#', img: 'photos/breaker-10.jpg' }, { tag: 'Céntrico', name: 'Hotel Catalina', meta: 'Rodadero · 4★\nRestaurantes a pie · 20 min al venue', url: '#', img: 'photos/breaker-60.jpg' }, { tag: 'Boutique', name: 'Casa Carolina', meta: 'Taganga · 4★\nVista al mar · 25 min al venue', url: '#', img: 'photos/breaker-90.jpg' }, ], gifts: { cop: { titular: 'Mateo Arturo Rojas Guzman', tipoId: 'CC', nroId: '1020804682', banco: 'Global66', tipo: 'Depósito Electrónico', cuenta: '1020804682', }, usd: { titular: 'Mateo Arturo Rojas Guzman', cuenta: '8335822818', accountType: 'Checking', routing: '026073150', swift: 'CMFGUS33', banco: 'Community Federal Savings Bank', address: '5 Penn Plaza, 14th Floor, New York, NY 10001, US', }, }, initialPlaylist: [ { song: 'Crazy in Love', artist: 'Beyoncé', by: 'MARÍA P.' }, { song: 'Can\'t Help Falling in Love', artist: 'Elvis Presley', by: 'JUAN M.' }, { song: 'La Bicicleta', artist: 'Shakira & Carlos Vives', by: 'LA MAMÁ' }, ], }; /* ============================================ PARALLAX — wraps an image, translates it on scroll ============================================ */ function Parallax({ src, alt = '', speed = 0.12, className = '', style = {}, children, scale = 1.18 }) { const wrapRef = useRef(null); const imgRef = useRef(null); useEffect(() => { const wrap = wrapRef.current; const img = imgRef.current; if (!wrap || !img) return; let raf = 0; const update = () => { const rect = wrap.getBoundingClientRect(); const vh = window.innerHeight; // how far the element's center is from viewport center, in px const off = (rect.top + rect.height / 2) - vh / 2; // Cap the translate to at most (scale-1)/2 * rect.height so the image never leaves its container const maxY = Math.max(0, (scale - 1) / 2 * rect.height - 2); const y = Math.max(-maxY, Math.min(maxY, -off * speed)); img.style.transform = `translate3d(0, ${y.toFixed(1)}px, 0) scale(${scale})`; }; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; update(); }); }; update(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); }; }, [speed, scale]); return (
{alt} {children}
); } /* ============================================ PINTEREST ICON (small red logo) ============================================ */ function PinterestBadge({ url, label = 'Inspiración', size = 12 }) { return ( ); } /* ============================================ SPOTIFY LOGO ============================================ */ function SpotifyLogo({ size = 28, color = '#1DB954' }) { return ( ); } /* ============================================ BACKGROUND MUSIC — autoplays on envelope open, persistent mute toggle ============================================ */ function AudioPlayer({ active }) { const audioRef = useRef(null); const [muted, setMuted] = useState(false); useEffect(() => { if (!active) return; const a = audioRef.current; if (!a) return; a.volume = 0.6; a.loop = true; const tryPlay = () => a.play().catch(() => { /* autoplay blocked — will resume on first interaction */ }); tryPlay(); const resume = () => { tryPlay(); window.removeEventListener('pointerdown', resume); window.removeEventListener('keydown', resume); }; window.addEventListener('pointerdown', resume, { once: true }); window.addEventListener('keydown', resume, { once: true }); return () => { window.removeEventListener('pointerdown', resume); window.removeEventListener('keydown', resume); }; }, [active]); // Auto-mute when Spotify plays, unmute when it pauses useEffect(() => { if (!active) return; const onSpotify = (e) => { const playing = !!e.detail?.playing; const a = audioRef.current; if (!a) return; a.muted = playing; setMuted(playing); }; window.addEventListener('spotify-playback', onSpotify); return () => window.removeEventListener('spotify-playback', onSpotify); }, [active]); const toggle = () => { setMuted((m) => { const next = !m; if (audioRef.current) audioRef.current.muted = next; return next; }); }; if (!active) return null; return ( <>