import React, { useState, useEffect, useRef } from 'react';
import { Heart, Lock, Volume2, VolumeX, Play, Pause, ChevronRight, MessageCircle } from 'lucide-react';
// --- CONFIGURAÇÃO ---
const MUSIC_URL = 'https://audio.jukehost.co.uk/AF7m6bh6olWHlMVSRWOsf4D4dhGrJYLH';
const COVER_IMAGE = 'https://i.postimg.cc/9Xx3JpSb/received-1291580337616632.jpg';
const LETTER_TEXT = `Meu amor,
Olhar para trás e ver tudo o que construímos me dá a certeza absoluta de que escolhi a pessoa certa.
Você é muito mais do que eu poderia sonhar: uma esposa maravilhosa e uma mãe incrível. O cuidado, o amor e o carinho que você dedica a cada um de nós enchem o meu coração de gratidão. Eu sinto a profundidade do seu amor em cada gesto, todos os dias.
Sou eternamente grato por você ter me guiado para o caminho de Deus. Sua fé é a luz da nossa casa. Ver você passando os ensinamentos necessários para a nossa filha e lutando incansavelmente pela nossa família me faz o homem mais orgulhoso do mundo.
Obrigado por ter acreditado em mim quando eu precisava, e por continuar acreditando todos os dias. Obrigado por nunca soltar a minha mão, nem por um segundo, e por estar sempre ao meu lado, independente de tudo.
Eu quero viver o resto da minha vida ao seu lado, com Deus nos guiando e mostrando o caminho que devemos seguir.
EU Te Amo mais que tudo.`;
// --- BANCO DE IMAGENS (GRID - VOLUME) ---
const GRID_IMAGES = [
'https://i.postimg.cc/y6fqvP5w/IMG-20160303-173725352.jpg',
'https://i.postimg.cc/HWSGB2K6/IMG-20170101-001157266.jpg',
'https://i.postimg.cc/7YbFczrf/IMG-20171124-WA0030.jpg',
'https://i.postimg.cc/Pf6G24cF/20170702-161950(0).jpg',
'https://i.postimg.cc/TYhzSbvm/20171125-221459.jpg',
'https://i.postimg.cc/0NGFmdD3/20171223-234449.jpg',
'https://i.postimg.cc/fbQ1JgtR/20171231-235101.jpg',
'https://i.postimg.cc/XYCTN0vh/20171210-203912.jpg',
'https://i.postimg.cc/pLFgVtdS/IMG-20171209-WA0040.jpg',
'https://i.postimg.cc/t4xLRHgM/IMG-20171209-WA0039.jpg',
'https://i.postimg.cc/7LrjfQGP/IMG-20171209-091246203.jpg',
'https://i.postimg.cc/xdVBcFJn/IMG-20180311-WA0012.jpg',
'https://i.postimg.cc/C55QW3tJ/00100s-PORTRAIT-00100-BURST20180331130133720-COVER.jpg',
'https://i.postimg.cc/xCtZpfsK/20180504-195114.jpg',
'https://i.postimg.cc/d14fNsWd/IMG-20180523-215943.jpg',
'https://i.postimg.cc/j5Z13x8D/20180708-164100.jpg',
'https://i.postimg.cc/0Qc4Xktb/00100s-PORTRAIT-00100-BURST20180721142007403-COVER.jpg',
'https://i.postimg.cc/pT27BhBb/IMG-20181012-WA0058.jpg',
'https://i.postimg.cc/fLwFvtvM/IMG-20181012-WA0026.jpg',
'https://i.postimg.cc/9Xx3JpSb/received-1291580337616632.jpg',
'https://i.postimg.cc/4dJM171Y/IMG-20181007-WA0036.jpg',
'https://i.postimg.cc/ryZbSpRT/IMG-20181012-WA0075.jpg',
'https://i.postimg.cc/prr6gw4M/IMG-20190615-225046.jpg',
'https://i.postimg.cc/9XgSGfRs/IMG-20181013-WA0005.jpg',
'https://i.postimg.cc/2j9J45b2/IMG-20190122-134428.jpg',
'https://i.postimg.cc/WzyHj9c0/IMG-20190302-172932.jpg',
'https://i.postimg.cc/sxxNtkqy/IMG-20190420-221904.jpg',
'https://i.postimg.cc/MHHFhCNZ/IMG-20190406-201454.jpg',
'https://i.postimg.cc/T1s4GkvG/IMG-20190305-161106.jpg',
'https://i.postimg.cc/5yXsPwYZ/IMG-20250522-140510.avif',
'https://i.postimg.cc/DyWN5K1J/IMG-20241231-200324.jpg',
'https://i.postimg.cc/tTCS60Xd/20221123-223704.jpg',
'https://i.postimg.cc/SQ15WKYn/IMG-20250125-131522-COLLAGE.jpg',
'https://i.postimg.cc/TwRScLJF/20171211-144454.jpg',
'https://i.postimg.cc/C1Ft4BsW/20171211-144447.jpg',
'https://i.postimg.cc/SKL387Cw/20171212-174931.jpg',
'https://i.postimg.cc/rpG3WCxJ/20171212-173534.jpg'
];
// --- DESTAQUES (HISTÓRIA) ---
const HIGHLIGHTS = [
{
image: 'https://i.postimg.cc/y6fqvP5w/IMG-20160303-173725352.jpg',
text: 'Tudo começou aqui. Sem luxo, apenas nós dois e muita vontade de fazer dar certo.',
timing: 2000
},
{
image: 'https://i.postimg.cc/Pf6G24cF/20170702-161950(0).jpg',
text: 'Éramos tão jovens... nem imaginávamos as batalhas e as vitórias que viriam.',
timing: 8000
},
{
image: 'https://i.postimg.cc/TYhzSbvm/20171125-221459.jpg',
text: 'Cada desafio serviu de alicerce para construirmos a nossa fortaleza.',
timing: 14000
},
{
image: 'https://i.postimg.cc/7YbFczrf/IMG-20171124-WA0030.jpg',
text: 'Quantas risadas, quantos planos, quantas noites a sonhar com o nosso futuro.',
timing: 20000
},
{
image: 'https://i.postimg.cc/0NGFmdD3/20171223-234449.jpg',
text: 'Obrigado por guiar os meus passos para o caminho de Deus. A tua fé transformou a minha.',
timing: 26000
},
{
image: 'https://i.postimg.cc/TwRScLJF/20171211-144454.jpg',
text: 'Com você, aprendi a orar e descobri o verdadeiro significado do Amor.',
timing: 32000
},
{
image: 'https://i.postimg.cc/fbQ1JgtR/20171231-235101.jpg',
text: 'Em 8 anos, você nunca soltou a minha mão. Nem por um segundo sequer.',
timing: 38000
},
{
image: 'https://i.postimg.cc/xdVBcFJn/IMG-20180311-WA0012.jpg',
text: 'Você é a minha base inabalável. Obrigado por me segurar sempre que precisei.',
timing: 44000
},
{
image: 'https://i.postimg.cc/pT27BhBb/IMG-20181012-WA0058.jpg',
text: 'Você é a melhor esposa do mundo. Obrigado por cuidar de mim e da nossa família com tanto carinho.',
timing: 50000
},
{
image: 'https://i.postimg.cc/xCtZpfsK/20180504-195114.jpg',
text: 'A sua alegria ilumina os meus dias mais cinzentos.',
timing: 56000
},
{
image: 'https://i.postimg.cc/prr6gw4M/IMG-20190615-225046.jpg',
text: 'Agradeço a Deus todos os dias pelo presente de ter você como esposa.',
timing: 62000
},
{
image: 'https://i.postimg.cc/tTCS60Xd/20221123-223704.jpg',
text: 'Olho para nós e sinto um orgulho imenso da família que estamos a construir.',
timing: 68000
},
{
image: 'https://i.postimg.cc/DyWN5K1J/IMG-20241231-200324.jpg',
text: 'Hoje olho para trás e vejo que cada segundo valeu a pena.',
timing: 74000
},
{
image: 'https://i.postimg.cc/SQ15WKYn/IMG-20250125-131522-COLLAGE.jpg',
text: 'E o melhor de tudo? A nossa história está apenas a começar.',
timing: 80000
},
{
image: 'https://i.postimg.cc/5yXsPwYZ/IMG-20250522-140510.avif',
text: 'EU Te Amo mais que tudo.',
timing: 86000
}
];
export default function MemoriesWall() {
const [screen, setScreen] = useState('lock'); // lock, intro, wall, letter
const [activeHighlight, setActiveHighlight] = useState(null);
const [typedText, setTypedText] = useState('');
const [isMuted, setIsMuted] = useState(false);
const [showLetterButton, setShowLetterButton] = useState(false);
const [showNotification, setShowNotification] = useState(false);
const [showUnlockButton, setShowUnlockButton] = useState(false);
const audioRef = useRef(null);
const [time, setTime] = useState(new Date());
// Relógio
useEffect(() => {
const t = setInterval(() => setTime(new Date()), 1000);
return () => clearInterval(t);
}, []);
// Notificação Delay
useEffect(() => {
if (screen === 'lock') {
const notifTimer = setTimeout(() => setShowNotification(true), 1000);
const btnTimer = setTimeout(() => setShowUnlockButton(true), 3500);
return () => { clearTimeout(notifTimer); clearTimeout(btnTimer); };
}
}, [screen]);
// Start
const startExperience = () => {
setScreen('intro');
if (audioRef.current) {
audioRef.current.volume = 0.6;
audioRef.current.play().catch(e => console.log("Audio play failed", e));
}
};
// Intro Typing
useEffect(() => {
if (screen === 'intro') {
const texts = [
"A nossa história começa bem antes destas fotos...",
"Éramos tão novos que nem imaginávamos o que vinha pela frente...",
"Mas Deus já cuidava de cada detalhe.",
"Feliz 8 anos, amor ❤️"
];
let currentTextIdx = 0;
let charIdx = 0;
let timeout;
const type = () => {
if (currentTextIdx >= texts.length) {
setTimeout(() => setScreen('wall'), 2000);
return;
}
const currentString = texts[currentTextIdx];
if (charIdx < currentString.length) {
setTypedText(currentString.slice(0, charIdx + 1));
charIdx++;
timeout = setTimeout(type, 50);
} else {
timeout = setTimeout(() => {
currentTextIdx++;
charIdx = 0;
setTypedText('');
type();
}, 2500);
}
};
type();
return () => clearTimeout(timeout);
}
}, [screen]);
// Wall Highlights Loop
useEffect(() => {
if (screen === 'wall') {
const timers = HIGHLIGHTS.map((highlight, index) => {
return setTimeout(() => {
setActiveHighlight(highlight);
setTimeout(() => {
setActiveHighlight(null);
if (index === HIGHLIGHTS.length - 1) {
setTimeout(() => setShowLetterButton(true), 1000);
}
}, 5500);
}, highlight.timing);
});
return () => timers.forEach(clearTimeout);
}
}, [screen]);
// Carta Typing
useEffect(() => {
if (screen === 'letter') {
let idx = 0;
setTypedText('');
const interval = setInterval(() => {
if (idx < LETTER_TEXT.length) {
setTypedText(prev => prev + LETTER_TEXT.charAt(idx));
idx++;
} else {
clearInterval(interval);
}
}, 75);
return () => clearInterval(interval);
}
}, [screen]);
const toggleMute = () => {
if (audioRef.current) {
audioRef.current.muted = !isMuted;
setIsMuted(!isMuted);
}
};
return (
{/* --- PRELOADER OCULTO (CRÍTICO PARA MOBILE) --- */}
)}
{showLetterButton && !activeHighlight && (
)}
)}
{/* --- TELA 4: CARTA --- */}
{screen === 'letter' && (
);
}
{HIGHLIGHTS.map(h => 
)}
{/* --- TELA 1: LOCK SCREEN --- */}
{screen === 'lock' && (
{time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
{time.toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long' })}
{showNotification && (
Amor ❤️
AgoraOi, meu amor! Tudo bem? Preparei uma surpresa especial para você... Toque no botão abaixo para ver. Ah, não esqueça de aumentar o volume! ❤️ Já adianto: eu te amo mais que tudo.
{showUnlockButton && (
)}
{typedText}
{[...GRID_IMAGES, ...GRID_IMAGES].map((img, idx) => (
))}
{[...GRID_IMAGES, ...GRID_IMAGES].reverse().map((img, idx) => (
))}
"{activeHighlight.text}"
{typedText}
{typedText.length === LETTER_TEXT.length && (
Para Sempre Nós