// Interactive Rosary — arte realista e robusta
// Cordão sólido, contas com volume, medalha mariana e crucifixo detalhado.
// Mantém a API: onPrayerClick(prayerKey, label)
const PRAYER_CONTENT = {
'sign-cross': {
title: 'Sinal da Cruz',
body: 'Pelo sinal da Santa Cruz, livrai-nos Deus, Nosso Senhor, dos nossos inimigos. Em nome do Pai, e do Filho, e do Espírito Santo. Amém.',
},
'creed': {
title: 'Credo',
body: 'Creio em Deus Pai todo-poderoso, criador do céu e da terra. E em Jesus Cristo, seu único Filho, Nosso Senhor, que foi concebido pelo poder do Espírito Santo; nasceu da Virgem Maria; padeceu sob Pôncio Pilatos, foi crucificado, morto e sepultado; desceu à mansão dos mortos; ressuscitou ao terceiro dia; subiu aos céus; está sentado à direita de Deus Pai todo-poderoso, donde há de vir a julgar os vivos e os mortos. Creio no Espírito Santo, na santa Igreja Católica, na comunhão dos santos, na remissão dos pecados, na ressurreição da carne, na vida eterna. Amém.',
},
'our-father': {
title: 'Pai Nosso',
body: 'Pai nosso que estais nos céus, santificado seja o vosso nome. Venha a nós o vosso reino, seja feita a vossa vontade, assim na terra como no céu. O pão nosso de cada dia nos dai hoje; perdoai-nos as nossas ofensas, assim como nós perdoamos a quem nos tem ofendido; e não nos deixeis cair em tentação, mas livrai-nos do mal. Amém.',
},
'hail-mary': {
title: 'Ave Maria',
body: 'Ave Maria, cheia de graça, o Senhor é convosco. Bendita sois vós entre as mulheres e bendito é o fruto do vosso ventre, Jesus. Santa Maria, Mãe de Deus, rogai por nós, pecadores, agora e na hora da nossa morte. Amém.',
},
'glory': {
title: 'Glória ao Pai',
body: 'Glória ao Pai, ao Filho e ao Espírito Santo. Como era no princípio, agora e sempre. Amém.',
},
'fatima': {
title: 'Jaculatória de Fátima',
body: 'Ó meu Jesus, perdoai-nos, livrai-nos do fogo do inferno; levai as almas todas para o céu e socorrei principalmente as que mais precisarem da Vossa misericórdia.',
},
'salve': {
title: 'Salve Rainha',
body: 'Salve, Rainha, Mãe de misericórdia, vida, doçura e esperança nossa, salve! A vós bradamos, os degredados filhos de Eva; a vós suspiramos, gemendo e chorando neste vale de lágrimas. Eia, pois, advogada nossa, esses vossos olhos misericordiosos a nós volvei; e depois deste desterro, mostrai-nos Jesus, bendito fruto do vosso ventre, ó clemente, ó piedosa, ó doce sempre Virgem Maria. Rogai por nós, Santa Mãe de Deus, para que sejamos dignos das promessas de Cristo. Amém.',
},
};
const MYSTERIES = [
{ id: 'joyful', name: 'Gozosos', day: 'Segunda · Sábado',
list: ['A Anunciação','A Visitação','O Nascimento','A Apresentação','O Encontro no Templo'] },
{ id: 'sorrowful', name: 'Dolorosos', day: 'Terça · Sexta',
list: ['A Agonia no Horto','A Flagelação','A Coroação de Espinhos','O Caminho do Calvário','A Crucificação'] },
{ id: 'glorious', name: 'Gloriosos', day: 'Quarta · Domingo',
list: ['A Ressurreição','A Ascensão','A Vinda do Espírito Santo','A Assunção','A Coroação de Maria'] },
{ id: 'luminous', name: 'Luminosos', day: 'Quinta',
list: ['O Batismo no Jordão','As Bodas de Caná','O Anúncio do Reino','A Transfiguração','A Instituição da Eucaristia'] },
];
const InteractiveRosary = ({ onPrayerClick }) => {
const [hover, setHover] = React.useState(null);
// ── Geometria do laço (5 dezenas = 55 contas), com folga embaixo p/ medalha
const cx = 0, cy = -5, rx = 134, ry = 170;
const gap = 0.34; // folga angular na base
const startA = Math.PI / 2 + gap;
const endA = Math.PI / 2 + Math.PI * 2 - gap;
const loop = [];
const N = 55;
for (let i = 0; i < N; i++) {
const f = i / (N - 1);
const a = startA + f * (endA - startA);
const x = cx + Math.cos(a) * rx;
const y = cy + Math.sin(a) * ry;
const isPater = i % 11 === 0;
const decade = Math.floor(i / 11) + 1;
loop.push({
id: 'loop' + i, x, y, isPater,
prayer: isPater ? 'our-father' : 'hail-mary',
label: isPater ? `Pai Nosso · ${decade}ª dezena` : `Ave Maria · ${decade}ª dezena`,
});
}
// ── Pingente (cauda) descendo da medalha
const medalY = 172;
const tail = [
{ id: 't0', x: 0, y: 208, isPater: true, prayer: 'our-father', label: 'Pai Nosso' },
{ id: 't1', x: 0, y: 234, isPater: false, prayer: 'hail-mary', label: 'Ave Maria · Fé' },
{ id: 't2', x: 0, y: 256, isPater: false, prayer: 'hail-mary', label: 'Ave Maria · Esperança' },
{ id: 't3', x: 0, y: 278, isPater: false, prayer: 'hail-mary', label: 'Ave Maria · Caridade' },
{ id: 't4', x: 0, y: 308, isPater: true, prayer: 'creed', label: 'Credo' },
];
const crossY = 354;
// path do cordão do laço
const loopPath = (() => {
let d = '';
// elipse aproximada via beads + fechando a folga pela medalha
const pts = loop.map(b => `${b.x.toFixed(1)} ${b.y.toFixed(1)}`);
d = 'M ' + pts.join(' L ');
return d;
})();
const renderBead = (b) => {
const r = b.isPater ? 9 : 6.6;
const hr = hover === b.id ? r + 2.2 : r;
const fill = b.isPater ? 'url(#beadPater)' : 'url(#beadAve)';
const rim = b.isPater ? '#7A571B' : '#16345C';
return (
setHover(b.id)}
onMouseLeave={() => setHover(null)}
onClick={() => onPrayerClick(b.prayer, b.label)}>
{hover === b.id && (
)}
{/* corpo da conta */}
{/* faceta / anel equatorial (metal engastado) */}
{/* casquilhos dourados (onde a linha passa) */}
{/* brilho especular duplo */}
);
};
return (
);
};
window.InteractiveRosary = InteractiveRosary;
window.PRAYER_CONTENT = PRAYER_CONTENT;
window.MYSTERIES = MYSTERIES;