/*  === monstrance-data.jsx ===
    Data constants — parts, prayers, faith stops, palettes, clouds, sparkles, audio config, sprite paths, narration helpers.
    Loaded as <script type="text/babel" src="js/monstrance-data.jsx"></script>.
    Cross-file references work because babel-standalone evaluates each script in
    the document's global scope after compile; top-level const/let/function decls
    are visible to subsequent scripts loaded in this order.
*/

const { useState, useEffect, useRef, useCallback } = React;

const PARTS = [
  {
    id: 1,
    slug: "cross",
    name: "The Cross",
    hint: "On Top",
    short: "Right at the very top is a little cross.",
    long: 'It reminds us that Jesus loves us so much He gave His life for us. When we see the cross, we whisper, "Thank you, Jesus."',
    verse: '"Jesus loves you this much." (arms wide open)',
    position: { x: 50, y: 19 },
    cardSide: "right",
  },
  {
    id: 2,
    slug: "center",
    name: "The Center",
    hint: "The Most Special Part",
    short:
      "The little window in the middle is the most special part of all.",
    long: "The blessed Host (Jesus Himself) lives here. When we look at the center, we are looking right at Jesus, and He is looking right at us.",
    verse: '"This is My Body, given for you."',
    position: { x: 50, y: 37 },
    cardSide: "right",
  },
  {
    id: 3,
    slug: "sunburst",
    name: "The Sunburst",
    hint: "All The Gold Rays",
    short: "All the gold rays shooting out look like a big, shining sun.",
    long: "That is because Jesus is the Light of the World. He helps us see with our eyes, and with our hearts too.",
    verse: '"I am the Light of the World." (Jesus)',
    position: { x: 28, y: 37 },
    cardSide: "left",
  },
  {
    id: 4,
    slug: "stem",
    name: "The Stem",
    hint: "The Skinny Middle",
    short: "The skinny middle part is called the stem.",
    long: "The priest holds it very carefully, the way you would carry a butterfly. It lifts Jesus high so everyone can see Him.",
    verse: "Hold the holy things with quiet hands.",
    position: { x: 50, y: 76 },
    cardSide: "right",
  },
  {
    id: 5,
    slug: "base",
    name: "The Base",
    hint: "Strong & Wide",
    short:
      "The bottom is wide and strong so it can stand up tall on the altar.",
    long: "It reminds us that Jesus is our strong foundation. He holds us up, just like the base holds up the whole monstrance.",
    verse: '"Built on the rock that is Christ."',
    position: { x: 50, y: 88 },
    cardSide: "left",
  },
];

const PRAYERS = [
  {
    id: "quiet",
    name: "Quiet Time with Jesus",
    icon: "✨",
    eyebrow: "a quiet prayer in 5 small steps",
    steps: [
      { say: "Hello, Jesus.", do: "Look at the Host.", icon: "👁️" },
      { say: "Thank You, Jesus.", do: "Think of one good thing today.", icon: "🌻" },
      { say: "I love You, Jesus.", do: "Put your hand on your heart.", icon: "❤️" },
      { say: "Please bless...", do: "Whisper a name in your mind.", icon: "🕊️" },
      { say: "Amen.", do: "Smile. Jesus heard every word.", icon: "✨" },
    ],
  },
  {
    id: "cross",
    name: "Sign of the Cross",
    icon: "✝️",
    eyebrow: "the prayer we begin every prayer with",
    steps: [
      { say: "In the name of the Father,", do: "Touch your forehead.", icon: "☝️" },
      { say: "and of the Son,", do: "Touch the middle of your chest.", icon: "❤️" },
      { say: "and of the Holy Spirit.", do: "Touch your left shoulder, then right.", icon: "🕊️" },
      { say: "Amen.", do: "Fold your hands together.", icon: "🙏" },
    ],
  },
  {
    id: "angel",
    name: "Guardian Angel",
    icon: "👼",
    eyebrow: "a hello to your very own angel",
    steps: [
      { say: "Angel of God,", do: "Look up and smile.", icon: "👼" },
      { say: "my guardian dear,", do: "Whisper, like talking to a friend.", icon: "🤫" },
      { say: "to whom God's love commits me here,", do: "God sent your angel just for you.", icon: "💛" },
      { say: "ever this day be at my side,", do: "Pat the spot right next to you.", icon: "✨" },
      { say: "to light and guard, to rule and guide. Amen.", do: "Your angel is watching over you.", icon: "🛡️" },
    ],
  },
  {
    id: "grace",
    name: "Grace Before Meals",
    icon: "🍞",
    eyebrow: "say this before you eat",
    steps: [
      { say: "Bless us, O Lord,", do: "Fold your hands at the table.", icon: "🙏" },
      { say: "and these Your gifts,", do: "Look at the food in front of you.", icon: "🍞" },
      { say: "which we are about to receive", do: "Thank Jesus for the people who made it.", icon: "🌾" },
      { say: "from Your goodness,", do: "Remember every good thing comes from God.", icon: "🌟" },
      { say: "through Christ our Lord. Amen.", do: "Make a little sign of the cross.", icon: "✝️" },
    ],
  },
  {
    id: "bedtime",
    name: "Bedtime Prayer",
    icon: "🌙",
    eyebrow: "right before you fall asleep",
    steps: [
      { say: "Jesus, stay close to me tonight.", do: "Look at the moon or your pillow.", icon: "🌙" },
      { say: "Thank You for today.", do: "Remember one happy thing.", icon: "⭐" },
      { say: "I'm sorry if I was unkind.", do: "Whisper it just to Jesus.", icon: "💧" },
      { say: "Please bless my family.", do: "Name them in your heart, one by one.", icon: "🏠" },
      { say: "Goodnight, Jesus. Amen.", do: "Close your eyes softly.", icon: "😴" },
    ],
  },
  {
    id: "hail-mary",
    name: "Hail Mary",
    icon: "🌹",
    eyebrow: "a prayer to Jesus' mom",
    steps: [
      { say: "Hail Mary, full of grace,", do: "Smile, like saying hi to a friend.", icon: "🌹" },
      { say: "the Lord is with thee.", do: "Picture Mary holding baby Jesus.", icon: "👶" },
      { say: "Blessed art thou among women,", do: "Mary is the most special mom of all.", icon: "👑" },
      { say: "and blessed is the fruit of thy womb, Jesus.", do: "Whisper His name: Jesus.", icon: "✨" },
      { say: "Holy Mary, Mother of God, pray for us. Amen.", do: "Ask Mary to pray with you.", icon: "🙏" },
    ],
  },
  {
    id: "glory-be",
    name: "Glory Be",
    icon: "🌟",
    eyebrow: "a tiny song of praise",
    steps: [
      { say: "Glory be to the Father,", do: "Look up to heaven.", icon: "☝️" },
      { say: "and to the Son,", do: "Picture Jesus smiling at you.", icon: "✝️" },
      { say: "and to the Holy Spirit.", do: "Open your hands like a dove.", icon: "🕊️" },
      { say: "As it was in the beginning, is now, and ever shall be. Amen.", do: "Forever and ever!", icon: "✨" },
    ],
  },
];

const GROK_AUDIO = {
  root: "audio/grok",
  setupCommand: "python3 scripts/generate-grok-tts.py",
  manifest: "audio/grok/manifest.json",
  missing: "",
  intro: "audio/grok/intro.mp3",
  readAlong: "audio/grok/read-along-on.mp3",
};
const INTRO_NARRATION =
  "A monstrance is a beautiful golden vessel used in church to show the Eucharist during Adoration. Catholics believe Jesus is truly present in the Host, so the monstrance helps everyone look, pray, and spend quiet time with Him.";
const INTRO_AUDIO = GROK_AUDIO.intro;
const PART_ASSETS = [
  { id: 3, key: "rays", layer: 1 },
  { id: 4, key: "stem", layer: 2 },
  { id: 5, key: "base", layer: 3 },
  { id: 2, key: "center", layer: 4 },
  { id: 1, key: "cross", layer: 5 },
].map((asset) => ({
  ...asset,
  src: `images/monstrance-parts/${asset.key}.png`,
}));
const PART_ASSET_BY_ID = Object.fromEntries(
  PART_ASSETS.map((asset) => [asset.id, asset]),
);
const PART_SCENE_SRC = {
  1: "images/catholic-kids/part-cross.png?v=2",
  2: "images/catholic-kids/part-center.png?v=2",
  3: "images/catholic-kids/part-sunburst.png?v=2",
  4: "images/catholic-kids/part-stem.png?v=2",
  5: "images/catholic-kids/part-base.png?v=2",
};
const PRAYER_IMG_SRC = {
  quiet: "images/catholic-kids/prayer-quiet.png?v=2",
  cross: "images/catholic-kids/prayer-cross.png?v=2",
  angel: "images/catholic-kids/prayer-angel.png?v=2",
  grace: "images/catholic-kids/prayer-grace.png?v=2",
  bedtime: "images/catholic-kids/prayer-bedtime.png?v=2",
  "hail-mary": "images/catholic-kids/prayer-hail-mary.png?v=2",
  "glory-be": "images/catholic-kids/prayer-glory.png?v=2",
};
const audioForPart = (part) =>
  `${GROK_AUDIO.root}/part-${part.id}-${part.name
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/(^-|-$)/g, "")}.mp3`;
const audioForPrayerStep = (prayer, stepIndex) =>
  `${GROK_AUDIO.root}/prayer-${prayer.id}-step-${stepIndex + 1}.mp3`;
const narrationForPart = (part, { includeVerse = false } = {}) =>
  `Part ${part.id}. ${part.name}. ${part.short} ${part.long}${
    includeVerse ? ` ${part.verse}` : ""
  }`;
const narrationForPrayerStep = (step) => `${step.say} ${step.do}`;
const audioForFaithStop = (stop) =>
  `${GROK_AUDIO.root}/faith-${stop.slug}.mp3`;
const narrationForFaithStop = (stop) =>
  `${stop.title}. ${stop.summary} The big idea: ${stop.bigIdea}`;
const stopPathForPart = (part) => `#/stop/${part.slug}`;
const routeFromHash = (hash) => {
  const gamesMatch = (hash || "").match(/^#\/games(?:\/([a-z0-9-]+))?$/);
  if (gamesMatch) return { name: "games", game: gamesMatch[1] || null };
  const stopMatch = (hash || "").match(/^#\/stop\/([a-z0-9-]+)$/);
  if (stopMatch) return { name: "stop", slug: stopMatch[1] };
  const faithMatch = (hash || "").match(/^#\/faith\/([a-z0-9-]+)$/);
  if (faithMatch) return { name: "faith", slug: faithMatch[1] };
  return { name: "home" };
};
const FAITH_STOPS = [
  {
    slug: "mass",
    num: 2,
    icon: "⛪",
    imgDir: "images/catholic-kids/mass",
    title: "What Happens at Mass?",
    summary: 'The big steps from the opening song to "go in peace."',
    bigIdea:
      "At Mass, heaven and earth meet for an hour. Jesus comes to us under the appearance of bread and wine.",
    hero: "gospel.png",
    guide: {
      name: "Father Tom",
      img: "gospel.png",
      line: "Welcome. Let us walk through Mass together, one step at a time.",
    },
    teachings: [
      {
        title: "Same every time",
        text: "Mass has the same parts every Sunday, all over the world.",
        img: "gathering.png",
      },
      {
        title: "Two big halves",
        text: "First we listen (Word). Then Jesus comes on the altar (Eucharist).",
        img: "readings.png",
      },
      {
        title: "Heaven on earth",
        text: "For one hour, heaven touches earth at the altar.",
        img: "consecration.png",
      },
    ],
    game: {
      kind: "sequence",
      title: "Put the Mass in order",
      prompt: "Tap each part of Mass in the order it really happens.",
      success: "You did it! Now you can follow along anywhere.",
      items: [
        {
          id: "gathering",
          label: "Gathering",
          sub: "A song and a Sign of the Cross",
          img: "gathering.png",
          teach: "We come together as one family of God and ask for mercy.",
        },
        {
          id: "readings",
          label: "Readings",
          sub: "God speaks to us",
          img: "readings.png",
          teach: "A reader proclaims stories from the Bible.",
        },
        {
          id: "gospel",
          label: "Gospel",
          sub: "Jesus' own words",
          img: "gospel.png",
          teach: "We stand because Jesus Himself is speaking to us.",
        },
        {
          id: "offering",
          label: "Offering",
          sub: "Bread and wine brought up",
          img: "offering.png",
          teach: "We bring small gifts and our own hearts to the altar.",
        },
        {
          id: "consecration",
          label: "Consecration",
          sub: "Jesus arrives",
          img: "consecration.png",
          teach:
            'The priest says Jesus\' own words: "This is my Body." Bread becomes Jesus.',
        },
        {
          id: "communion",
          label: "Communion",
          sub: "We receive Him",
          img: "communion.png",
          teach: "Jesus feeds our soul with His own self.",
        },
      ],
    },
    checkpoint: {
      q: "When does Jesus come on the altar?",
      choices: [
        {
          text: "At the gathering song",
          correct: false,
          feedback:
            "Not yet. The gathering is when we say hello to God together.",
        },
        {
          text: "At the Consecration",
          correct: true,
          feedback: "Yes! Listen for the little bells at the Consecration.",
        },
        {
          text: "At the goodbye blessing",
          correct: false,
          feedback:
            "Earlier. Jesus comes at the Consecration, in the middle of Mass.",
        },
      ],
    },
    coPlay:
      "At Mass on Sunday, whisper to your grown-up which part is happening right now.",
    bridge:
      "Build a tiny paper altar at home: a small bowl, a cup, a candle (with help). Practice the order using stuffed animals as the people.",
  },
  {
    slug: "sacraments",
    num: 3,
    icon: "💧",
    imgDir: "images/catholic-kids/sacraments",
    title: "The 7 Sacraments",
    summary: "Seven special gifts Jesus gave His Church.",
    bigIdea:
      "A sacrament is an outward sign that gives a real, invisible gift: God's own life, which we call grace.",
    hero: "eucharist.png",
    guide: {
      name: "Sister Clare",
      img: "baptism.png",
      line: "Sacraments use things you can see — water, oil, bread — to give you a gift you cannot see. Watch carefully with me.",
    },
    teachings: [
      {
        title: "Outward signs",
        text: "Sacraments use things we can see and touch.",
        img: "baptism.png",
      },
      {
        title: "Inward grace",
        text: "God gives a real, invisible help to your soul.",
        img: "confirmation.png",
      },
      {
        title: "Seven gifts",
        text: "There are seven sacraments, given by Jesus Himself.",
        img: "eucharist.png",
      },
    ],
    game: {
      kind: "match",
      title: "Match the symbol to the sacrament",
      prompt:
        "Three small chapters. Match each symbol to the sacrament it belongs to.",
      success: "All seven gifts unwrapped!",
      phases: [
        {
          id: "init",
          title: "Sacraments of Initiation",
          blurb: "How we begin our life with Jesus.",
          itemIds: ["baptism", "confirmation", "eucharist"],
        },
        {
          id: "heal",
          title: "Sacraments of Healing",
          blurb: "When we need forgiveness or strength.",
          itemIds: ["reconciliation", "anointing"],
        },
        {
          id: "serve",
          title: "Sacraments of Service",
          blurb: "Promises that build the Church.",
          itemIds: ["orders", "matrimony"],
        },
      ],
      hints: [
        "Look at what the symbol does. Water washes. Fire warms. Bread feeds.",
        "Initiation = water, fire, bread. Healing = heart and oil. Service = rings and hands.",
      ],
      items: [
        {
          id: "baptism",
          label: "Baptism",
          sub: "We become God's child",
          img: "baptism.png",
          symbolEmoji: "💧",
          symbolName: "Water",
          teach: "Water washes the soul and welcomes you into God's family.",
        },
        {
          id: "confirmation",
          label: "Confirmation",
          sub: "Strength for the journey",
          img: "confirmation.png",
          symbolEmoji: "🔥",
          symbolName: "Fire & Oil",
          teach: "The Holy Spirit fills your heart with courage.",
        },
        {
          id: "eucharist",
          label: "Eucharist",
          sub: "We receive Jesus",
          img: "eucharist.png",
          symbolEmoji: "🍞",
          symbolName: "Bread & Wine",
          teach: "Bread and wine truly become Jesus.",
        },
        {
          id: "reconciliation",
          label: "Reconciliation",
          sub: "Jesus forgives",
          img: "reconciliation.png",
          symbolEmoji: "❤️",
          symbolName: "Healed Heart",
          teach: "Jesus forgives sins through the priest.",
        },
        {
          id: "anointing",
          label: "Anointing of the Sick",
          sub: "Strength when sick",
          img: "anointing.png",
          symbolEmoji: "🫒",
          symbolName: "Olive Oil",
          teach: "Jesus comforts and helps those who are sick.",
        },
        {
          id: "matrimony",
          label: "Matrimony",
          sub: "Forever promise",
          img: "matrimony.png",
          symbolEmoji: "💍",
          symbolName: "Wedding Rings",
          teach: "A man and woman promise their whole life to each other.",
        },
        {
          id: "orders",
          label: "Holy Orders",
          sub: "Ordained to serve",
          img: "holy-orders.png",
          symbolEmoji: "🙌",
          symbolName: "Laying on of Hands",
          teach: "A bishop ordains a man as priest or deacon.",
        },
      ],
    },
    checkpoint: {
      q: "What do the sacraments give us?",
      choices: [
        {
          text: "Magic points",
          correct: false,
          feedback: "Not magic. Sacraments give a real gift from God.",
        },
        {
          text: "Grace (God's life in our soul)",
          correct: true,
          feedback: "Yes! Grace is the real, invisible gift.",
        },
        {
          text: "Only a memory",
          correct: false,
          feedback: "More than a memory. Jesus really acts in each sacrament.",
        },
      ],
    },
    coPlay:
      'Ask: "Which sacrament have you received? Which one are you preparing for?"',
    bridge:
      "Look for water, oil, bread, wine, rings, or a blessing hand in church art the next time you go.",
  },
  {
    slug: "jesus",
    num: 4,
    icon: "😊",
    imgDir: "images/catholic-kids/jesus",
    title: "Who Is Jesus?",
    summary: "God's Son, our friend, and the One who never stops loving us.",
    bigIdea:
      "Jesus is true God and true man. He came to save us and bring us into friendship with God.",
    hero: "teaching.png",
    guide: {
      name: "Brother John",
      img: "teaching.png",
      line: "I walked with Jesus and listened to His words. Tap each picture and I will tell you the story.",
    },
    teachings: [
      {
        title: "Son of God",
        text: "Jesus is the Second Person of the Holy Trinity.",
        img: "baby.png",
      },
      {
        title: "Savior",
        text: "Jesus died on the Cross and rose again to save us.",
        img: "cross.png",
      },
      {
        title: "Friend",
        text: "Jesus knows you by name and loves you today.",
        img: "teaching.png",
      },
    ],
    game: {
      kind: "reveal",
      title: "The story of Jesus, in six scenes",
      prompt: "Tap each card to flip it over and meet Jesus.",
      success: "You have walked with Jesus from Christmas to Easter!",
      items: [
        {
          id: "baby",
          label: "Baby Jesus",
          sub: "Christmas",
          img: "baby.png",
          teach:
            "God became a tiny baby so we could see His love with our own eyes.",
        },
        {
          id: "calling",
          label: "Jesus Calls Friends",
          sub: "The Twelve",
          img: "calling.png",
          teach: "Jesus chose ordinary fishermen to be His closest helpers.",
        },
        {
          id: "healing",
          label: "Jesus Heals",
          sub: "Kindness for the sick",
          img: "healing.png",
          teach: "Jesus reached out and made sick people well, body and soul.",
        },
        {
          id: "teaching",
          label: "Jesus Teaches",
          sub: "Sermons & stories",
          img: "teaching.png",
          teach: "Jesus told stories that show us what God is like.",
        },
        {
          id: "cross",
          label: "Jesus on the Cross",
          sub: "Good Friday",
          img: "cross.png",
          teach: "Jesus loved us so much He gave His whole life for us.",
        },
        {
          id: "resurrection",
          label: "Jesus Risen!",
          sub: "Easter Sunday",
          img: "resurrection.png",
          teach:
            "Jesus rose from the dead. The tomb is empty. Death is beaten.",
        },
      ],
    },
    checkpoint: {
      q: "What happened on Easter?",
      choices: [
        {
          text: "Jesus rose from the dead",
          correct: true,
          feedback: "Yes! Easter is the greatest day in history.",
        },
        {
          text: "The apostles went fishing",
          correct: false,
          feedback: "Not yet. Easter is when Jesus rose from the dead.",
        },
        {
          text: "The Temple closed",
          correct: false,
          feedback: "No. On Easter, Jesus rose from the dead.",
        },
      ],
    },
    coPlay: 'Ask: "What is one Jesus story you love?"',
    bridge:
      "Draw one of the six scenes from Jesus' life and tape it to the fridge.",
  },
  {
    slug: "mary",
    num: 5,
    icon: "🌹",
    imgDir: "images/catholic-kids/mary",
    title: "Mary, Our Mother",
    summary: "Jesus' mom and our mom too. The kindest helper in heaven.",
    bigIdea:
      "Mary is the Mother of Jesus and the greatest saint. She always leads us closer to her Son.",
    arcade: {
      icon: "🌹",
      title: "Play: Marian Apparitions",
      blurb:
        "Explore Guadalupe, Lourdes, and Fatima while Mary leads each story back to Jesus.",
      href: "#/games/guadalupe",
    },
    hero: "queen.png",
    guide: {
      name: "St. Therese",
      img: "therese.png",
      line: "Mary is my mother and yours. Let me show you six moments from her life — little flowers from the Queen of Heaven.",
    },
    teachings: [
      {
        title: "Yes to God",
        text: "Mary said yes when the angel came.",
        img: "annunciation.png",
      },
      {
        title: "Mother of God",
        text: "Because Jesus is God, Mary is truly Mother of God.",
        img: "nativity.png",
      },
      {
        title: "She prays for us",
        text: "Catholics ask Mary to pray for us, like a holy friend.",
        img: "queen.png",
      },
    ],
    game: {
      kind: "reveal",
      title: "Mary's life, in six moments",
      prompt: "Tap each card to meet Mary at a special moment.",
      success: "You have walked with Mary from her yes to her crown!",
      items: [
        {
          id: "annunciation",
          label: "Annunciation",
          sub: "The angel comes",
          img: "annunciation.png",
          teach: "Angel Gabriel asks Mary to be Jesus' mom. Mary says yes.",
        },
        {
          id: "visitation",
          label: "Visitation",
          sub: "Mary visits Elizabeth",
          img: "visitation.png",
          teach:
            "Mary rushes to help her cousin Elizabeth, who is also expecting.",
        },
        {
          id: "nativity",
          label: "Nativity",
          sub: "Baby Jesus is born",
          img: "nativity.png",
          teach: "Mary tenderly lays baby Jesus in a manger.",
        },
        {
          id: "cana",
          label: "Wedding at Cana",
          sub: "Mary asks Jesus",
          img: "cana.png",
          teach:
            "Mary tells Jesus the wine is gone. Jesus does His first miracle.",
        },
        {
          id: "cross",
          label: "At the Cross",
          sub: "Standing close",
          img: "cross.png",
          teach: "Mary did not run away. She stayed with Jesus all the way.",
        },
        {
          id: "queen",
          label: "Queen of Heaven",
          sub: "Crowned with stars",
          img: "queen.png",
          teach:
            "Jesus brought His mother home to heaven and gave her a crown.",
        },
      ],
    },
    checkpoint: {
      q: "Why do Catholics honor Mary?",
      choices: [
        {
          text: "She is Jesus' mother and a saint",
          correct: true,
          feedback: "Yes. Honoring Mary helps us love Jesus more.",
        },
        {
          text: "She wrote the Gospels",
          correct: false,
          feedback:
            "No. The Gospels were written by Matthew, Mark, Luke, and John.",
        },
        {
          text: "She is more important than Jesus",
          correct: false,
          feedback: "No, Mary always points us to her Son.",
        },
      ],
    },
    coPlay: 'Ask: "What do you think Mary prayed when Jesus was little?"',
    bridge: "Pray one Hail Mary slowly. Listen for Jesus' name in the middle.",
  },
  {
    slug: "saints",
    num: 6,
    icon: "🕊️",
    imgDir: "images/catholic-kids/saints",
    title: "The Saints",
    summary: "Best friends in heaven who help us when we ask.",
    bigIdea:
      "Saints are friends of God in heaven. They show us many ways to love Jesus, and they pray for us.",
    arcade: {
      icon: "🪟",
      title: "Play: Saint Window Workshop",
      blurb:
        "Match each saint with a loving action and watch the stained glass light up.",
      href: "games/saint-window/",
    },
    hero: "francis.png",
    guide: {
      name: "St. Francis",
      img: "francis.png",
      line: "Meet your friends in heaven. Each saint loved God in their own way — tap to hear how.",
    },
    teachings: [
      {
        title: "Holy friends",
        text: "Saints show many different ways to follow Jesus.",
        img: "francis.png",
      },
      {
        title: "They pray for us",
        text: "Ask a saint to pray, the way you ask a friend.",
        img: "padre-pio.png",
      },
      {
        title: "We can be saints too",
        text: "Every Christian is called to become a saint.",
        img: "therese.png",
      },
    ],
    game: {
      kind: "reveal",
      title: "Meet eight friends in heaven",
      prompt: "Tap a saint's portrait to hear their story.",
      success: "You met eight friends in heaven!",
      items: [
        {
          id: "francis",
          label: "St. Francis",
          sub: "Friend of animals",
          img: "francis.png",
          teach:
            "He gave up everything to be poor like Jesus. Animals trusted him.",
        },
        {
          id: "therese",
          label: "St. Therese",
          sub: "The Little Flower",
          img: "therese.png",
          teach:
            "She did small things with great love and became a doctor of the Church.",
        },
        {
          id: "teresa-calcutta",
          label: "St. Teresa of Calcutta",
          sub: "Mother to the poor",
          img: "teresa-calcutta.png",
          teach:
            "She found Jesus in the poorest of the poor and cared for them.",
        },
        {
          id: "joseph",
          label: "St. Joseph",
          sub: "Jesus' earthly dad",
          img: "joseph.png",
          teach:
            "He was a quiet carpenter who taught Jesus how to work with wood.",
        },
        {
          id: "padre-pio",
          label: "St. Padre Pio",
          sub: "Man of prayer",
          img: "padre-pio.png",
          teach:
            "He carried the wounds of Jesus on his body and prayed all day.",
        },
        {
          id: "juan-diego",
          label: "St. Juan Diego",
          sub: "Our Lady of Guadalupe",
          img: "juan-diego.png",
          teach: "Mary appeared to him and left her image on his cloak.",
        },
        {
          id: "anthony",
          label: "St. Anthony",
          sub: "Helper of lost things",
          img: "anthony.png",
          teach: "When you can't find something, ask St. Anthony for help.",
        },
        {
          id: "michael",
          label: "St. Michael",
          sub: "Defender angel",
          img: "michael.png",
          teach: "The mighty archangel who fights for us against evil.",
        },
      ],
    },
    checkpoint: {
      q: "Who can become a saint?",
      choices: [
        {
          text: "Only priests and nuns",
          correct: false,
          feedback: "Not just them. Every Christian is called to be a saint.",
        },
        {
          text: "Anyone who loves God",
          correct: true,
          feedback: "Yes! Even kids can be saints, right now.",
        },
        {
          text: "Only people from long ago",
          correct: false,
          feedback: "Saints can be alive today, including kids.",
        },
      ],
    },
    coPlay: 'Ask: "Which saint\'s courage do you want to borrow today?"',
    bridge:
      "Pick one saint and do one small act of love like that saint would.",
  },
  {
    slug: "trinity",
    num: 7,
    icon: "☘️",
    imgDir: "images/catholic-kids/trinity",
    title: "The Holy Trinity",
    summary: "One God in three Persons: Father, Son, and Holy Spirit.",
    bigIdea:
      "There is only ONE God, but God is three Persons: Father, Son, and Holy Spirit. This is the biggest mystery, and it is love.",
    hero: "shamrock.png",
    guide: {
      name: "St. Patrick",
      img: "shamrock.png",
      line: "When I taught people about God, I used a shamrock — three leaves, one plant. Three Persons, one God. Watch with me.",
    },
    teachings: [
      {
        title: "The Father",
        text: "The Father made everything out of love.",
        img: "creation.png",
      },
      {
        title: "The Son",
        text: "Jesus, God's Son, became a man to save us.",
        img: "savior.png",
      },
      {
        title: "The Holy Spirit",
        text: "The Spirit lives in your heart and gives courage.",
        img: "spirit-flame.png",
      },
    ],
    game: {
      kind: "match",
      title: "Match each Person to a moment we see",
      prompt:
        "Each Person of the Trinity shows up in two moments. Tap a Person, then tap the moment.",
      success: "Three Persons, one God — six moments of love!",
      hints: [
        "Three Persons, one God. Two clues belong to each Person.",
        "Father: Sun + Voice. Son: Cross + Bread. Spirit: Dove + Fire.",
      ],
      items: [
        {
          id: "father-creates",
          label: "The Father",
          sub: "Makes all things",
          img: "creation.png",
          symbolEmoji: "☀️",
          symbolName: "Sun & stars",
          teach: "The Father created the world and loves us as His children.",
        },
        {
          id: "father-speaks",
          label: "The Father",
          sub: "Speaks at Jesus' Baptism",
          img: "creation.png",
          symbolEmoji: "☁️",
          symbolName: "Voice from heaven",
          teach: "'This is my beloved Son.' The Father shows us who Jesus is.",
        },
        {
          id: "son-saves",
          label: "The Son",
          sub: "Saves us on the Cross",
          img: "savior.png",
          symbolEmoji: "✝️",
          symbolName: "The Cross",
          teach:
            "Jesus is the Son. He gave His life so we could be with God forever.",
        },
        {
          id: "son-bread",
          label: "The Son",
          sub: "Comes to us as Bread",
          img: "savior.png",
          symbolEmoji: "🍞",
          symbolName: "The Host",
          teach: "At Mass, the Son becomes truly present in the Eucharist.",
        },
        {
          id: "spirit-hearts",
          label: "The Holy Spirit",
          sub: "Lives in our hearts",
          img: "spirit-flame.png",
          symbolEmoji: "🕊️",
          symbolName: "Dove",
          teach: "The Holy Spirit fills our hearts with God's love and peace.",
        },
        {
          id: "spirit-pentecost",
          label: "The Holy Spirit",
          sub: "Tongues of fire at Pentecost",
          img: "spirit-flame.png",
          symbolEmoji: "🔥",
          symbolName: "Tongues of fire",
          teach:
            "At Pentecost the Holy Spirit came as fire and gave the disciples courage.",
        },
      ],
    },
    checkpoint: {
      q: "How many Gods do Christians believe in?",
      choices: [
        {
          text: "Three gods",
          correct: false,
          feedback: "No, just one God in three Persons.",
        },
        {
          text: "One God",
          correct: true,
          feedback: "Exactly! One God, three Persons, one mystery of love.",
        },
        {
          text: "Zero gods",
          correct: false,
          feedback: "There is one God: Father, Son, and Holy Spirit.",
        },
      ],
    },
    coPlay: "Together, make the Sign of the Cross slowly and name each Person.",
    bridge:
      "Find a shamrock or draw one. Tape it on your bedroom door this week.",
  },
  {
    slug: "angels",
    num: 8,
    icon: "👼",
    imgDir: "images/catholic-kids/angels",
    title: "Heaven & Angels",
    summary: "What heaven is like, and the angels God sends to help us.",
    bigIdea:
      "Angels are spiritual creatures God made before us. They worship Him and help us on the way to heaven.",
    hero: "guardian-watch.png",
    guide: {
      name: "St. Michael",
      img: "michael.png",
      line: "I am Michael, captain of the angels. Let me show you how God's helpers serve Him — and you.",
    },
    teachings: [
      {
        title: "Messengers",
        text: 'The word "angel" means messenger.',
        img: "gabriel.png",
      },
      {
        title: "Your guardian",
        text: "God gave you your own angel to watch over you.",
        img: "guardian-watch.png",
      },
      {
        title: "Heaven is real",
        text: "Heaven is life with God forever, full of joy.",
        img: "heaven.png",
      },
    ],
    game: {
      kind: "match",
      title: "Match the archangel to their job",
      prompt: "Tap an archangel on the left, then the job God gave them.",
      success: "All four heavenly helpers!",
      items: [
        {
          id: "michael",
          label: "Michael",
          sub: "Archangel",
          img: "michael.png",
          symbolEmoji: "🛡️",
          symbolName: "Defender",
          teach: "St. Michael protects us in spiritual battle.",
        },
        {
          id: "gabriel",
          label: "Gabriel",
          sub: "Archangel",
          img: "gabriel.png",
          symbolEmoji: "📜",
          symbolName: "Messenger",
          teach: "Gabriel told Mary she would be Jesus' mother.",
        },
        {
          id: "raphael",
          label: "Raphael",
          sub: "Archangel",
          img: "raphael.png",
          symbolEmoji: "🩺",
          symbolName: "Healer & Guide",
          teach: "Raphael healed Tobit and guided his son on a journey.",
        },
        {
          id: "guardian",
          label: "Guardian Angel",
          sub: "Your own helper",
          img: "guardian-watch.png",
          symbolEmoji: "👼",
          symbolName: "Friend at your side",
          teach: "Your guardian angel is with you every moment.",
        },
      ],
    },
    checkpoint: {
      q: "Which archangel told Mary about Jesus?",
      choices: [
        {
          text: "Michael",
          correct: false,
          feedback: "Michael is the defender. The messenger was Gabriel.",
        },
        {
          text: "Gabriel",
          correct: true,
          feedback: "Yes! Gabriel is the messenger angel.",
        },
        {
          text: "Raphael",
          correct: false,
          feedback: "Raphael is the healer. Gabriel brought the news to Mary.",
        },
      ],
    },
    coPlay:
      "At bedtime, thank God for your guardian angel and ask for help tomorrow.",
    bridge: "Draw a picture of your guardian angel and keep it by your bed.",
  },
  {
    slug: "rosary",
    num: 9,
    icon: "📿",
    imgDir: "images/catholic-kids/rosary",
    title: "The Rosary",
    summary: "A string of beads you pray with, like a hug for your heart.",
    bigIdea:
      "The Rosary is a prayer with Mary that helps us meditate on the life of Jesus.",
    arcade: {
      icon: "📿",
      title: "Play: Rosary Garden",
      blurb:
        "Find the golden bead in each mystery to bloom a flower in Mary's garden.",
      href: "games/rosary-garden/",
    },
    hero: "beads.png",
    guide: {
      name: "Mother Teresa",
      img: "teresa-calcutta.png",
      line: "I prayed the Rosary every day. Each bead is one Hail Mary. Each ten beads is one mystery from Jesus' life. Pray with me.",
    },
    teachings: [
      {
        title: "Beads keep our place",
        text: "The beads help our fingers and heart pray together. Start at the crucifix and pray your way along.",
        img: "beads.png",
      },
      {
        title: "The Our Father",
        text: "On the big beads we say the prayer Jesus Himself taught us.",
        img: "our-father.png",
      },
      {
        title: "The Hail Mary",
        text: "On the small beads we ask Mary to pray with us, ten times for each mystery.",
        img: "praying.png",
      },
      {
        title: "Crowning of Mary",
        text: "Jesus crowns Mary as Queen at the end of the Glorious Mysteries.",
        img: "mary-crown.png",
      },
      {
        title: "Pray with family",
        text: "The Rosary is even sweeter prayed together with people you love.",
        img: "praying.png",
      },
    ],
    game: {
      kind: "reveal",
      title: "Walk the four mysteries",
      prompt: "Tap each mystery group to see a chapter of Jesus' life.",
      success: "You walked with Jesus through every mystery!",
      hints: [
        "Four mystery groups. Each is a chapter of Jesus' life.",
        "Joyful = the beginning. Luminous = Jesus' ministry. Sorrowful = the Cross. Glorious = Easter and beyond.",
      ],
      items: [
        {
          id: "joyful",
          label: "Joyful Mysteries",
          sub: "Jesus' coming",
          img: "joyful.png",
          teach:
            "The Annunciation, Visitation, Nativity, Presentation, Finding in the Temple.",
        },
        {
          id: "luminous",
          label: "Luminous Mysteries",
          sub: "Jesus' ministry",
          img: "luminous.png",
          teach:
            "Jesus' Baptism, Cana, the Kingdom, Transfiguration, Eucharist.",
        },
        {
          id: "sorrowful",
          label: "Sorrowful Mysteries",
          sub: "Holy Week",
          img: "sorrowful.png",
          teach:
            "The Agony, Scourging, Crown of Thorns, Carrying the Cross, Crucifixion.",
        },
        {
          id: "glorious",
          label: "Glorious Mysteries",
          sub: "Easter and after",
          img: "glorious.png",
          teach:
            "Resurrection, Ascension, Pentecost, Assumption, Crowning of Mary.",
        },
      ],
    },
    checkpoint: {
      q: "Who is the Rosary mostly about?",
      choices: [
        {
          text: "Jesus",
          correct: true,
          feedback: "Yes. Mary always points us to her Son.",
        },
        {
          text: "Only Mary",
          correct: false,
          feedback: "Mary walks with us, but the Rosary is about Jesus' life.",
        },
        {
          text: "A game score",
          correct: false,
          feedback: "Not a game. The Rosary is a prayer.",
        },
      ],
    },
    coPlay: "Pray one decade (ten Hail Marys) together as a family.",
    bridge:
      "Hold a small string of ten objects (cheerios, beads) and pray one decade slowly.",
  },
];
const STOP_ACTIVITIES = {
  cross: {
    title: "Cross Builder",
    prompt: "Tap the four cross tips to remember Jesus' love reaching every direction.",
    action: "Build the cross",
    target: 4,
  },
  center: {
    title: "Quiet Focus",
    prompt: "Tap the glowing Host five times slowly, like taking five quiet breaths with Jesus.",
    action: "Quiet tap",
    target: 5,
  },
  sunburst: {
    title: "Ray Collector",
    prompt: "Collect eight rays and send the light outward, because Jesus is the Light of the World.",
    action: "Collect a ray",
    target: 8,
  },
  stem: {
    title: "Steady Hands",
    prompt: "Practice careful hands by keeping the monstrance steady for three gentle taps.",
    action: "Steady tap",
    target: 3,
  },
  base: {
    title: "Strong Foundation",
    prompt: "Stack five foundation stones to remember that Jesus holds us up.",
    action: "Place a stone",
    target: 5,
  },
};

const PALETTES = [
  { value: "golden", label: "Golden hour" },
  { value: "glass", label: "Stained glass" },
  { value: "dawn", label: "Dawn sky" },
];

const CLOUDS_DISTANT = [
  {
    top: "8%",
    left: "12%",
    w: 90,
    delay: -3,
    drift: 22,
    dx: 14,
    dy: -4,
    rot: -4,
  },
  {
    top: "14%",
    left: "46%",
    w: 70,
    delay: -9,
    drift: 18,
    dx: -8,
    dy: 6,
    rot: 6,
  },
  {
    top: "5%",
    right: "20%",
    w: 110,
    delay: -6,
    drift: 24,
    dx: 12,
    dy: -6,
    rot: -2,
  },
  {
    top: "24%",
    right: "4%",
    w: 80,
    delay: -11,
    drift: 20,
    dx: -10,
    dy: 8,
    rot: 3,
  },
  {
    top: "36%",
    left: "6%",
    w: 60,
    delay: -4,
    drift: 16,
    dx: 6,
    dy: -3,
    rot: 0,
  },
];
const CLOUDS_WING_LEFT = [
  {
    top: "12%",
    left: "-18%",
    w: 560,
    opacity: 0.98,
    delay: -2,
    drift: 26,
    dx: 10,
    dy: -4,
    rot: -5,
  },
  {
    top: "31%",
    left: "-13%",
    w: 470,
    opacity: 1,
    delay: -8,
    drift: 22,
    dx: 8,
    dy: 6,
    rot: 4,
  },
  {
    top: "52%",
    left: "-20%",
    w: 520,
    opacity: 0.95,
    delay: -12,
    drift: 28,
    dx: 12,
    dy: -6,
    rot: -2,
  },
  {
    bottom: "4%",
    left: "-10%",
    w: 390,
    opacity: 0.9,
    delay: -15,
    drift: 24,
    dx: 8,
    dy: 5,
    rot: 2,
  },
];
const CLOUDS_WING_RIGHT = [
  {
    top: "13%",
    right: "-18%",
    w: 540,
    opacity: 0.98,
    delay: -5,
    drift: 24,
    dx: -12,
    dy: -4,
    rot: 6,
  },
  {
    top: "35%",
    right: "-20%",
    w: 560,
    opacity: 1,
    delay: -10,
    drift: 26,
    dx: -10,
    dy: 6,
    rot: -3,
  },
  {
    top: "58%",
    right: "-10%",
    w: 430,
    opacity: 0.96,
    delay: -3,
    drift: 22,
    dx: -8,
    dy: -6,
    rot: 4,
  },
  {
    bottom: "5%",
    right: "-12%",
    w: 410,
    opacity: 0.9,
    delay: -13,
    drift: 25,
    dx: -10,
    dy: 5,
    rot: -2,
  },
];
const CLOUDS_FRONT = [
  {
    bottom: "-9%",
    right: "-13%",
    w: 640,
    opacity: 0.94,
    delay: -7,
    drift: 22,
    dx: -10,
    dy: 4,
    rot: 3,
    soft: true,
  },
  {
    bottom: "7%",
    left: "-12%",
    w: 500,
    opacity: 0.9,
    delay: -4,
    drift: 20,
    dx: 12,
    dy: -6,
    rot: -4,
    soft: true,
  },
  {
    top: "49%",
    left: "8%",
    w: 150,
    opacity: 0.75,
    delay: -11,
    drift: 14,
    dx: 8,
    dy: -4,
    rot: -6,
  },
  {
    bottom: "-5%",
    left: "19%",
    w: 360,
    opacity: 0.82,
    delay: -9,
    drift: 19,
    dx: -8,
    dy: 5,
    rot: 1,
    soft: true,
  },
];

const SPARKLES = [
  { x: 12, y: 30, d: 0 },
  { x: 88, y: 22, d: 0.6 },
  { x: 22, y: 78, d: 1.2 },
  { x: 78, y: 70, d: 1.6 },
  { x: 8, y: 52, d: 2.1 },
  { x: 92, y: 50, d: 2.5 },
  { x: 34, y: 88, d: 0.9 },
  { x: 64, y: 6, d: 1.8 },
];

function cloudStyle(c) {
  return {
    top: c.top,
    left: c.left,
    right: c.right,
    bottom: c.bottom,
    width: c.w + "px",
    opacity: c.opacity != null ? c.opacity : 1,
    "--delay": c.delay + "s",
    "--drift": c.drift + "s",
    "--dx": (c.dx || 0) + "px",
    "--dy": (c.dy || 0) + "px",
    "--rot": (c.rot || 0) + "deg",
  };
}