// Tela principal: Versículo do dia com animação dos anjos + Modo aleatório
const { useState: useStateHome, useEffect: useEffectHome, useMemo: useMemoHome, useRef: useRefHome } = React;
// Renaissance cherub silhouette — minimal, elegant, monochrome gold
// Inspired by Raphael's putti: head, two wings, no body. Always faces card.
function Cherub({ side = 'left', flap = 0 }) {
const flip = side === 'left' ? 1 : -1;
const wingRotate = -8 + flap * 6;
return (
);
}
// Mensagens de conforto personalizadas por tema e idioma
const COMFORT = {
graca: {
en: "You don't have to earn it. Grace is freely given. You are already enough, exactly as you are.",
pt: "Você não precisa merecê-la. A graça é dada livremente. Você já é suficiente, exatamente como é.",
es: "No tienes que ganártela. La gracia se da libremente. Ya eres suficiente, exactamente como eres."
},
fe: {
en: "Your faith moves mountains. Even the smallest step forward is an act of trust in God's plan for you.",
pt: "Sua fé move montanhas. Até o menor passo à frente é um ato de confiança no plano de Deus.",
es: "Tu fe mueve montañas. Incluso el paso más pequeño hacia adelante es un acto de confianza en el plan de Dios."
},
amor: {
en: "You are deeply and completely loved — not for what you do, but simply for who you are.",
pt: "Você é profundamente amado — não pelo que faz, mas simplesmente por quem você é.",
es: "Eres profunda y completamente amado — no por lo que haces, sino simplemente por quien eres."
},
esperanca: {
en: "Your story is not over. The best chapters are still being written by the Author of life.",
pt: "Sua história não acabou. Os melhores capítulos ainda estão sendo escritos pelo Autor da vida.",
es: "Tu historia no ha terminado. Los mejores capítulos aún están siendo escritos por el Autor de la vida."
},
sabedoria: {
en: "Every challenge you face is shaping you into exactly who you're meant to become.",
pt: "Cada desafio que você enfrenta está moldando você em exatamente quem você deve se tornar.",
es: "Cada desafío que enfrentas te está moldeando exactamente en quien estás destinado a convertirte."
},
paz: {
en: "In the middle of every storm, there is a place of perfect stillness. Let this verse guide you there.",
pt: "No meio de toda tempestade, há um lugar de perfeita quietude. Deixe este versículo guiá-lo até lá.",
es: "En medio de toda tormenta, hay un lugar de perfecta quietud. Deja que este versículo te guíe allí."
},
gratidao: {
en: "Gratitude unlocks the fullness of life. Today, even one blessing counted is enough to change everything.",
pt: "A gratidão abre a plenitude da vida. Hoje, até uma bênção contada é suficiente para mudar tudo.",
es: "La gratitud desbloquea la plenitud de la vida. Hoy, incluso una bendición contada es suficiente para cambiarlo todo."
},
};
function VerseScreen({ t, lang, mode, profile, onShare, onFavToggle, isFav, onNewRandom, randomSeed, animateOnMount }) {
const today = new Date();
const data = useMemoHome(() => {
if (mode === 'random') return window.getRandomVerse(randomSeed);
return window.getVerseForDate(today);
}, [mode, randomSeed, today.toDateString()]);
// Reveal sequence:
// 0 = deck closed, 1 = card lifting, 2 = card open & content visible
const [phase, setPhase] = useStateHome(animateOnMount ? 0 : 2);
const [flap, setFlap] = useStateHome(0);
const cardKey = data.verse.ref.pt + mode;
const isFirstRender = useRefHome(true);
useEffectHome(() => {
// Re-rolls no modo especial pulam a animação — botão sempre visível
if (mode === 'random' && !isFirstRender.current) {
setPhase(2);
return;
}
isFirstRender.current = false;
if (!animateOnMount) { setPhase(2); return; }
setPhase(0);
const t1 = setTimeout(() => setPhase(1), 350);
const t2 = setTimeout(() => setPhase(2), 2150);
return () => { clearTimeout(t1); clearTimeout(t2); };
}, [cardKey, animateOnMount]);
// Wing flap loop while phase 1
useEffectHome(() => {
if (phase !== 1) return;
let raf, start = performance.now();
const tick = (now) => {
setFlap(0.5 + 0.5 * Math.sin((now - start) / 320));
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [phase]);
const themeName = data.theme[lang];
const dateLabel = mode === 'random'
? t.special_verse
: `${t.days[today.getDay()]}, ${today.getDate()} ${t.months[today.getMonth()]}`;
const verseText = data.verse[lang];
const verseRef = data.verse.ref[lang];
const fav = isFav(verseRef);
const cardStyle = {
'--card-paper': data.theme.paper,
'--card-edge': data.theme.edge,
'--card-accent': data.theme.accent,
'--card-ink': data.theme.ink,
'--card-glow': data.theme.glow,
};
return (
= 2 ? ' is-on' : '')} style={cardStyle}>
{data.theme.icon}{themeName}{dateLabel}
{/* Glow halo behind the rising card */}
{/* Deck of background cards (other days) */}