const { useState, useEffect, useRef } = React;

const iconAttrs = (attrs = {}) =>
  Object.fromEntries(
    Object.entries(attrs).map(([key, value]) => [
      key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()),
      value
    ])
  );

const renderIconNode = ([tag, attrs, children], key) =>
  React.createElement(
    tag,
    { key, ...iconAttrs(attrs) },
    children ? children.map((child, index) => renderIconNode(child, `${key}-${index}`)) : null
  );

const makeIcon = (name) => {
  const nodes = lucide.icons[name] || lucide[name];
  return React.forwardRef(({ className = "", size = 24, color = "currentColor", strokeWidth = 2, ...props }, ref) =>
    React.createElement(
      "svg",
      {
        ref,
        xmlns: "http://www.w3.org/2000/svg",
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: color,
        strokeWidth,
        strokeLinecap: "round",
        strokeLinejoin: "round",
        className,
        ...props
      },
      nodes ? nodes.map((node, index) => renderIconNode(node, index)) : null
    )
  );
};

const BookOpen = makeIcon("BookOpen");
const Feather = makeIcon("Feather");
const ScrollText = makeIcon("ScrollText");
const Mail = makeIcon("Mail");
const Scale = makeIcon("Scale");
const MessageCircle = makeIcon("MessageCircle");
const Eye = makeIcon("Eye");
const Menu = makeIcon("Menu");
const X = makeIcon("X");
const ChevronRight = makeIcon("ChevronRight");
const ChevronLeft = makeIcon("ChevronLeft");
const ChevronDown = makeIcon("ChevronDown");
const BookMarked = makeIcon("BookMarked");
const Sparkles = makeIcon("Sparkles");
const Search = makeIcon("Search");
const Loader2 = makeIcon("Loader2");
const GitMerge = makeIcon("GitMerge");
const AlignLeft = makeIcon("AlignLeft");
const ListTree = makeIcon("ListTree");
const Lightbulb = makeIcon("Lightbulb");
const CheckCircle2 = makeIcon("CheckCircle2");
const Compass = makeIcon("Compass");
const Clipboard = makeIcon("Clipboard");
const Printer = makeIcon("Printer");
const Download = makeIcon("Download");
const RotateCcw = makeIcon("RotateCcw");
const FileText = makeIcon("FileText");

const H1 = ({ children }) => <h1 className="text-3xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-900 to-purple-800 mb-6 leading-tight">{children}</h1>;
const H2 = ({ children }) => <h2 className="text-2xl md:text-3xl font-bold text-slate-800 mt-12 mb-6 pb-2 border-b-2 border-indigo-100 flex items-center gap-3">{children}</h2>;
const H3 = ({ children }) => <h3 className="text-xl font-bold text-indigo-700 mt-8 mb-4 flex items-center gap-2">{children}</h3>;
const P = ({ children }) => <p className="text-slate-700 leading-relaxed mb-5 text-lg">{children}</p>;
const Quote = ({ children }) => (
  <blockquote className="relative p-6 my-10 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-2xl border-l-4 border-indigo-600 shadow-sm">
    <div className="absolute top-4 left-4 text-indigo-200 opacity-50">
      <svg className="w-12 h-12" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
        <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.896 3.456-8.352 9.12-8.352 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
      </svg>
    </div>
    <div className="relative z-10 text-lg italic text-slate-800 font-medium ml-6">{children}</div>
  </blockquote>
);
const Ul = ({ children }) => <ul className="list-none space-y-4 mb-8 text-slate-700">{children}</ul>;

const ruleColorClasses = [
  { card: "bg-sky-50 border-sky-200", badge: "bg-sky-500", title: "text-sky-900" },
  { card: "bg-indigo-50 border-indigo-200", badge: "bg-indigo-600", title: "text-indigo-900" },
  { card: "bg-amber-50 border-amber-200", badge: "bg-amber-500", title: "text-amber-900" },
  { card: "bg-emerald-50 border-emerald-200", badge: "bg-emerald-600", title: "text-emerald-900" },
  { card: "bg-purple-50 border-purple-200", badge: "bg-purple-600", title: "text-purple-900" },
  { card: "bg-rose-50 border-rose-200", badge: "bg-rose-500", title: "text-rose-900" },
  { card: "bg-orange-50 border-orange-200", badge: "bg-orange-500", title: "text-orange-900" },
  { card: "bg-teal-50 border-teal-200", badge: "bg-teal-600", title: "text-teal-900" },
  { card: "bg-pink-50 border-pink-200", badge: "bg-pink-600", title: "text-pink-900" }
];

let ruleGuidanceByTitle = {};
let methodGuidanceByTitle = {};

const getNodeText = (node) => {
  if (node == null || typeof node === "boolean") return "";
  if (typeof node === "string" || typeof node === "number") return String(node);
  if (Array.isArray(node)) return node.map(getNodeText).join("");
  if (React.isValidElement(node)) return getNodeText(node.props.children);
  return "";
};

const getRuleNumber = (node) => {
  const text = getNodeText(node).trim();
  const match = text.match(/^(\d+)\.\s/);
  return match ? match[1] : null;
};

const stripLeadingRuleNumber = (node, state = { stripped: false }) => {
  if (node == null || typeof node === "boolean") return node;
  if (typeof node === "string") {
    if (!state.stripped && /^\s*\d+\.\s+/.test(node)) {
      state.stripped = true;
      return node.replace(/^(\s*)\d+\.\s+/, "$1");
    }
    return node;
  }
  if (typeof node === "number") return node;
  if (Array.isArray(node)) return React.Children.map(node, (child) => stripLeadingRuleNumber(child, state));
  if (!React.isValidElement(node)) return node;
  return React.cloneElement(
    node,
    node.props,
    stripLeadingRuleNumber(node.props.children, state)
  );
};

const normalizeGuidanceTitle = (title) =>
  title.replace(/^\s*\d+\.\s+/, "").replace(/\.\s*$/, "").trim();

const getRuleGuidanceFor = (node) => {
  const text = normalizeGuidanceTitle(getNodeText(node));
  const match = Object.keys(ruleGuidanceByTitle)
    .sort((a, b) => b.length - a.length)
    .find((title) => text.startsWith(title));
  return match ? ruleGuidanceByTitle[match] : null;
};

const getMethodGuidance = (title) => methodGuidanceByTitle[normalizeGuidanceTitle(title)];

const RuleGuidance = ({ ask, lookFor, avoid, columnsClass = "md:grid-cols-3", className = "" }) => (
  <div className={`mt-5 grid ${columnsClass} gap-3 text-sm ${className}`}>
    <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4 shadow-sm">
      <strong className="text-indigo-900 block mb-1">Ask</strong>
      <p className="text-slate-700 leading-relaxed">{ask}</p>
    </div>
    <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4 shadow-sm">
      <strong className="text-emerald-900 block mb-1">Look For</strong>
      <p className="text-slate-700 leading-relaxed">{lookFor}</p>
    </div>
    <div className="bg-rose-50 border border-rose-100 rounded-xl p-4 shadow-sm">
      <strong className="text-rose-900 block mb-1">Avoid</strong>
      <p className="text-slate-700 leading-relaxed">{avoid}</p>
    </div>
  </div>
);

const MethodStepGuidance = ({ title, compact = false }) => {
  const guidance = getMethodGuidance(title);
  return guidance ? <RuleGuidance {...guidance} columnsClass={compact ? "xl:grid-cols-3" : "md:grid-cols-3"} /> : null;
};

const Li = ({ children }) => (
  (() => {
    const ruleNumber = getRuleNumber(children);
    if (!ruleNumber) {
      return (
        <li className="flex items-start gap-3 text-lg bg-white p-4 rounded-xl shadow-sm border border-slate-100">
          <div className="mt-1 text-indigo-500 min-w-[20px]"><ChevronRight className="w-5 h-5" /></div>
          <div className="w-full">{children}</div>
        </li>
      );
    }

    const colors = ruleColorClasses[(Number(ruleNumber) - 1) % ruleColorClasses.length];
    const guidance = getRuleGuidanceFor(children);
    return (
      <li className={`flex items-start gap-4 text-lg p-5 rounded-xl shadow-sm border ${colors.card}`}>
        <div className={`${colors.badge} text-white w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm`}>
          {ruleNumber}
        </div>
        <div className={`w-full [&>strong:first-child]:${colors.title}`}>
          {stripLeadingRuleNumber(children)}
          {guidance && <RuleGuidance {...guidance} />}
        </div>
      </li>
    );
  })()
);
const Strong = ({ children }) => <strong className="font-bold text-indigo-900">{children}</strong>;

const GrammarDropdown = ({ title, children }) => (
  <details className="group [&_summary::-webkit-details-marker]:hidden bg-white border border-sky-100 rounded-xl mb-3 overflow-hidden shadow-sm">
    <summary className="flex items-center justify-between px-5 py-3 cursor-pointer hover:bg-sky-50 transition-colors">
      <strong className="text-sky-900 text-sm tracking-wide">{title}</strong>
      <span className="transition duration-300 group-open:rotate-180 text-sky-600">
        <ChevronDown className="w-5 h-5" />
      </span>
    </summary>
    <div className="px-5 py-4 text-sm text-slate-700 border-t border-sky-50 bg-slate-50/50 leading-relaxed">
      {children}
    </div>
  </details>
);

const allBibleBooksData = [
  // Pentateuch
  { name: "Genesis", group: "Pentateuch", author: "Moses", audience: "The generation of Israelites preparing to enter the Promised Land.", date: "c. 1446-1406 BC", occasion: "To provide Israel with their foundational history, explaining their origins, the nature of God, the fall of humanity, and the covenant promises made to their patriarchs.", theme: "Beginnings, Creation, Fall, and the Covenant Promise." },
  { name: "Exodus", group: "Pentateuch", author: "Moses", audience: "The Israelites in the wilderness.", date: "c. 1446-1406 BC", occasion: "To record the historical deliverance of Israel from Egyptian slavery and the establishment of the Mosaic Covenant at Mount Sinai.", theme: "Deliverance, Redemption, and Covenant." },
  { name: "Leviticus", group: "Pentateuch", author: "Moses", audience: "The Israelites and the Levitical priests.", date: "c. 1446-1406 BC", occasion: "To instruct the newly redeemed people of Israel on how to live holy lives and properly worship a holy God residing in their midst.", theme: "Holiness, Atonement, and the Priesthood." },
  { name: "Numbers", group: "Pentateuch", author: "Moses", audience: "The Israelites in the wilderness.", date: "c. 1446-1406 BC", occasion: "To record the tragedy of Israel's unbelief at Kadesh-Barnea and the subsequent 40 years of wilderness wandering.", theme: "Wilderness Wandering and God's Faithfulness to Rebellious People." },
  { name: "Deuteronomy", group: "Pentateuch", author: "Moses", audience: "The second generation of Israelites.", date: "c. 1406 BC", occasion: "Moses' farewell sermons, renewing the covenant with the new generation before they cross the Jordan into the Promised Land.", theme: "Covenant Renewal and the Call to Obedience." },
  
  // Historical Books
  { name: "Joshua", group: "Historical Books", author: "Likely Joshua (and subsequent editors)", audience: "The Israelites settling the Promised Land.", date: "c. 1370 BC", occasion: "To record the faithful fulfillment of God's promise to give the land of Canaan to Abraham's descendants.", theme: "Conquest, Faithfulness, and the Promised Land." },
  { name: "Judges", group: "Historical Books", author: "Unknown (traditionally Samuel)", audience: "Israelites during the early monarchy.", date: "c. 1050-1000 BC", occasion: "To demonstrate the disastrous consequences of Israel's cycle of apostasy and their desperate need for a righteous king.", theme: "The Cycle of Apostasy, Judgment, and Deliverance." },
  { name: "Ruth", group: "Historical Books", author: "Unknown", audience: "Israelites during the monarchy.", date: "c. 1000 BC", occasion: "To highlight God's sovereign providence in the life of a faithful Moabitess, tracing the royal lineage of King David.", theme: "Kinsman-Redeemer, Providence, and Covenant Loyalty." },
  { name: "1 & 2 Samuel", group: "Historical Books", author: "Unknown (incorporating records of Samuel, Nathan, Gad)", audience: "The nation of Israel.", date: "c. 930 BC", occasion: "To record the transition from the era of the judges to the monarchy, highlighting the reigns of Saul and David.", theme: "The Establishment of the Monarchy and the Davidic Covenant." },
  { name: "1 & 2 Kings", group: "Historical Books", author: "Unknown (traditionally Jeremiah)", audience: "Israelites in Babylonian exile.", date: "c. 550 BC", occasion: "To explain why Israel and Judah went into exile: a theological history showing the consequences of royal and national idolatry.", theme: "The Decline, Division, and Fall of the Kingdoms due to Idolatry." },
  { name: "1 & 2 Chronicles", group: "Historical Books", author: "Unknown (traditionally Ezra)", audience: "The returned Jewish exiles in Jerusalem.", date: "c. 450-400 BC", occasion: "To encourage the struggling post-exilic community by recounting Israel's history with a focus on the temple, the priesthood, and the Davidic promise.", theme: "Worship, the Temple, and the Hope of the Davidic Line." },
  { name: "Ezra", group: "Historical Books", author: "Ezra", audience: "The post-exilic Jewish community.", date: "c. 440 BC", occasion: "To record the return of the exiles and the rebuilding of the physical temple in Jerusalem under Zerubbabel and Ezra.", theme: "Restoration, Temple Rebuilding, and Spiritual Renewal." },
  { name: "Nehemiah", group: "Historical Books", author: "Nehemiah (and Ezra)", audience: "The post-exilic Jewish community.", date: "c. 430 BC", occasion: "To record the rebuilding of Jerusalem's walls and the physical and spiritual restoration of the city.", theme: "Rebuilding the Walls and Covenant Restoration." },
  { name: "Esther", group: "Historical Books", author: "Unknown", audience: "The Jewish people.", date: "c. 470 BC", occasion: "To explain the origins of the Feast of Purim and demonstrate God's unseen, sovereign protection of His people in exile.", theme: "Divine Providence and the Preservation of the Jews." },
  
  // Wisdom & Poetry
  { name: "Job", group: "Wisdom & Poetry", author: "Unknown", audience: "All people wrestling with suffering.", date: "Unknown (likely patriarchal era)", occasion: "To explore the profound question of why the righteous suffer and to vindicate God's sovereign wisdom.", theme: "The Mystery of Suffering and the Sovereignty of God." },
  { name: "Psalms", group: "Wisdom & Poetry", author: "David, Asaph, Sons of Korah, Solomon, Moses, etc.", audience: "The worshipping community of Israel.", date: "c. 1440-400 BC", occasion: "To serve as the hymnal and prayer book of the second temple, giving voice to every human emotion before God.", theme: "Worship, Lament, Praise, and the Messianic King." },
  { name: "Proverbs", group: "Wisdom & Poetry", author: "Solomon, Agur, Lemuel", audience: "The youth of Israel.", date: "c. 950 BC", occasion: "To provide practical, ethical instruction for daily living based on the fear of the Lord.", theme: "Practical Wisdom and the Fear of the Lord." },
  { name: "Ecclesiastes", group: "Wisdom & Poetry", author: "Solomon (The Preacher)", audience: "Israelites seeking meaning in life.", date: "c. 935 BC", occasion: "To demonstrate the ultimate futility and emptiness of life 'under the sun' when lived apart from God.", theme: "The Vanity of Earthly Pursuits and the Meaning Found in God." },
  { name: "Song of Solomon", group: "Wisdom & Poetry", author: "Solomon", audience: "The people of Israel.", date: "c. 950 BC", occasion: "To celebrate the beauty, intimacy, and exclusivity of marital love as designed by God.", theme: "The Beauty of Marital Love." },
  
  // Major Prophets
  { name: "Isaiah", group: "Major Prophets", author: "Isaiah", audience: "The kingdom of Judah.", date: "c. 740-680 BC", occasion: "To warn Judah of coming Assyrian and Babylonian judgment due to their rebellion, while offering magnificent promises of a future Messianic Redeemer.", theme: "Judgment, Comfort, and the Suffering Servant." },
  { name: "Jeremiah", group: "Major Prophets", author: "Jeremiah", audience: "The final generations of Judah before the exile.", date: "c. 627-586 BC", occasion: "To desperately warn Judah of the inevitable Babylonian conquest and to promise a future New Covenant.", theme: "The Weeping Prophet, Inevitable Judgment, and the New Covenant." },
  { name: "Lamentations", group: "Major Prophets", author: "Jeremiah", audience: "The devastated survivors of the fall of Jerusalem.", date: "c. 586 BC", occasion: "To provide a structured, poetic mourning over the horrific destruction of Jerusalem and the temple.", theme: "Mourning over Jerusalem and the Faithfulness of God." },
  { name: "Ezekiel", group: "Major Prophets", author: "Ezekiel", audience: "The Jewish exiles in Babylon.", date: "c. 593-571 BC", occasion: "To explain the theological reasons for the exile, shatter their false hopes of an early return, and provide visions of ultimate spiritual restoration.", theme: "The Glory of God, Judgment, and Future Restoration." },
  { name: "Daniel", group: "Major Prophets", author: "Daniel", audience: "The Jewish exiles in Babylon and future generations.", date: "c. 605-530 BC", occasion: "To show that God is sovereign over all earthly empires and to provide apocalyptic visions of the sweep of world history until the Messianic Kingdom.", theme: "The Sovereignty of God over Human Empires." },
  
  // Minor Prophets
  { name: "Hosea", group: "Minor Prophets", author: "Hosea", audience: "The northern kingdom of Israel.", date: "c. 750-715 BC", occasion: "To visually demonstrate God's loyal love for a spiritually adulterous nation by commanding Hosea to marry a prostitute.", theme: "Spiritual Adultery and God's Relentless Love." },
  { name: "Joel", group: "Minor Prophets", author: "Joel", audience: "The kingdom of Judah.", date: "Unknown (possibly c. 835 BC)", occasion: "To use a devastating historical locust plague as a warning of the coming eschatological 'Day of the Lord'.", theme: "The Day of the Lord and the Outpouring of the Spirit." },
  { name: "Amos", group: "Minor Prophets", author: "Amos", audience: "The northern kingdom of Israel.", date: "c. 760 BC", occasion: "To condemn the social injustice, oppression of the poor, and religious hypocrisy of prosperous Israel.", theme: "Social Justice and the Plumb Line of God." },
  { name: "Obadiah", group: "Minor Prophets", author: "Obadiah", audience: "The nation of Edom (and Judah).", date: "c. 586 BC", occasion: "To pronounce total divine judgment upon Edom for their treacherous betrayal of Judah during the Babylonian invasion.", theme: "The Doom of Edom and the Deliverance of Zion." },
  { name: "Jonah", group: "Minor Prophets", author: "Jonah", audience: "Israel and Nineveh.", date: "c. 760 BC", occasion: "To rebuke Israel's ethnocentric nationalism by demonstrating God's radical compassion for their worst enemies, the Assyrians.", theme: "God's Universal Grace vs. Human Prejudice." },
  { name: "Micah", group: "Minor Prophets", author: "Micah", audience: "Israel and Judah.", date: "c. 735-700 BC", occasion: "To indict the corrupt leaders of Israel and Judah for their social abuses and false religion, predicting the birth of a ruler in Bethlehem.", theme: "Divine Lawsuit, True Religion, and the Shepherd King." },
  { name: "Nahum", group: "Minor Prophets", author: "Nahum", audience: "Judah and Nineveh.", date: "c. 660-612 BC", occasion: "To comfort Judah by prophesying the utter and final destruction of their cruel oppressors, the Assyrian empire at Nineveh.", theme: "The Just Vengeance of God upon Nineveh." },
  { name: "Habakkuk", group: "Minor Prophets", author: "Habakkuk", audience: "The kingdom of Judah.", date: "c. 610-599 BC", occasion: "A philosophical dialogue with God, asking why He allows the wicked Babylonians to punish the less-wicked Judeans.", theme: "The Problem of Evil and Living by Faith." },
  { name: "Zephaniah", group: "Minor Prophets", author: "Zephaniah", audience: "The kingdom of Judah.", date: "c. 640-621 BC", occasion: "To fiercely warn of the coming, universal 'Day of the Lord' and call the humble remnant to repentance.", theme: "The Day of the Lord and the Purified Remnant." },
  { name: "Haggai", group: "Minor Prophets", author: "Haggai", audience: "The returned exiles in Jerusalem.", date: "520 BC", occasion: "To sharply rebuke the exiles for building their own paneled houses while neglecting the reconstruction of God's temple.", theme: "Rebuilding the Temple and Right Priorities." },
  { name: "Zechariah", group: "Minor Prophets", author: "Zechariah", audience: "The returned exiles in Jerusalem.", date: "520-480 BC", occasion: "To encourage the temple builders through highly symbolic apocalyptic visions and promises of the coming Messiah.", theme: "Apocalyptic Encouragement and the Coming King." },
  { name: "Malachi", group: "Minor Prophets", author: "Malachi", audience: "The post-exilic Jewish community.", date: "c. 430 BC", occasion: "To confront the spiritual apathy, corrupt priesthood, and marital unfaithfulness of the returned exiles, closing the OT with a warning.", theme: "Spiritual Apathy and the Coming Messenger." },
  
  // Gospels & History
  { name: "Matthew", group: "Gospels & History", author: "Matthew (Levi)", audience: "Primarily Jewish Christians.", date: "c. AD 50-70", occasion: "To prove to a Jewish audience that Jesus of Nazareth is the long-awaited Messianic King, demonstrating how He fulfills OT prophecy.", theme: "Jesus as the promised Jewish Messiah and King." },
  { name: "Mark", group: "Gospels & History", author: "John Mark (recording Peter's account)", audience: "Primarily Roman/Gentile Christians.", date: "c. AD 50-60", occasion: "To present a fast-paced, action-oriented account of Jesus as the Suffering Servant to a pragmatic Roman audience.", theme: "Jesus as the Suffering Servant and the active Son of God." },
  { name: "Luke", group: "Gospels & History", author: "Luke (a Gentile physician)", audience: "Theophilus and Gentile Christians.", date: "c. AD 60-62", occasion: "To provide an orderly, historically verified account of Jesus' life, emphasizing His compassion for the marginalized, women, and outcasts.", theme: "Jesus as the Son of Man and the Universal Savior." },
  { name: "John", group: "Gospels & History", author: "John the Apostle", audience: "Both Jews and Gentiles.", date: "c. AD 80-90", occasion: "Written specifically 'so that you may believe that Jesus is the Christ, the Son of God, and that by believing you may have life in his name' (John 20:31).", theme: "Jesus as the Divine Son of God (The Word Made Flesh)." },
  { name: "Acts", group: "Gospels & History", author: "Luke", audience: "Theophilus and Gentile Christians.", date: "c. AD 62-64", occasion: "To provide a historical record of the birth and rapid expansion of the early Church through the power of the Holy Spirit, from Jerusalem to Rome.", theme: "The Holy Spirit and the Spread of the Gospel." },
  
  // Pauline Epistles
  { name: "Romans", group: "Pauline Epistles", author: "Paul", audience: "The church in Rome.", date: "c. AD 57", occasion: "To prepare for his upcoming visit to Rome, present a comprehensive summary of his gospel, and address tensions between Jewish and Gentile believers.", theme: "The Righteousness of God, Justification by Faith." },
  { name: "1 Corinthians", group: "Pauline Epistles", author: "Paul", audience: "The church in Corinth.", date: "c. AD 53-55", occasion: "To address severe problems reported by Chloe's household (divisions, immorality) and answer questions regarding marriage, idols, and spiritual gifts.", theme: "Correction of Carnal and Worldly Behavior." },
  { name: "2 Corinthians", group: "Pauline Epistles", author: "Paul", audience: "The church in Corinth.", date: "c. AD 55-56", occasion: "Written after a painful visit to express joy at their repentance and to fiercely defend his apostolic authority against invading 'super-apostles'.", theme: "The Ministry of Reconciliation and Apostolic Authority." },
  { name: "Galatians", group: "Pauline Epistles", author: "Paul", audience: "Churches in the region of Galatia.", date: "c. AD 48-49", occasion: "False teachers (Judaizers) had convinced Gentile Christians they needed to be circumcised and obey the Torah to be saved. A fiery defense of grace.", theme: "Justification by Faith Alone vs. Legalism." },
  { name: "Ephesians", group: "Pauline Epistles", author: "Paul", audience: "The church in Ephesus (circular letter).", date: "c. AD 60-62", occasion: "Written from prison to encourage unity in Christ, explain the believer's immense spiritual blessings, and equip them for spiritual warfare.", theme: "The Unity of the Church and Riches in Christ." },
  { name: "Philippians", group: "Pauline Epistles", author: "Paul", audience: "The church in Philippi.", date: "c. AD 60-62", occasion: "Written from prison to thank the church for a financial gift, warn against false teachers, and encourage a mindset of unity and joy.", theme: "Joy in the Lord and the Mind of Christ." },
  { name: "Colossians", group: "Pauline Epistles", author: "Paul", audience: "The church in Colossae.", date: "c. AD 60-62", occasion: "Written from prison to combat the 'Colossian heresy' (a dangerous mix of Jewish legalism, asceticism, and early Gnosticism).", theme: "The Absolute Supremacy and Sufficiency of Jesus Christ." },
  { name: "1 Thessalonians", group: "Pauline Epistles", author: "Paul", audience: "The church in Thessalonica.", date: "c. AD 50-51", occasion: "To encourage newly converted believers facing severe persecution and comfort them regarding the fate of Christians who died before the Second Coming.", theme: "Comfort in Persecution and the Second Coming." },
  { name: "2 Thessalonians", group: "Pauline Epistles", author: "Paul", audience: "The church in Thessalonica.", date: "c. AD 51-52", occasion: "Written to correct false teaching that the 'Day of the Lord' had already come, outline events preceding the end, and discipline idle members.", theme: "Clarification on the Day of the Lord." },
  { name: "1 Timothy", group: "Pauline Epistles", author: "Paul", audience: "Timothy (pastoring in Ephesus).", date: "c. AD 62-64", occasion: "To instruct his young protégé on how to confront false teachers, organize public worship, and appoint qualified church leadership.", theme: "Pastoral Instruction and Church Order." },
  { name: "2 Timothy", group: "Pauline Epistles", author: "Paul", audience: "Timothy.", date: "c. AD 64-67", occasion: "Paul's final letter, written from a Roman dungeon facing imminent execution. Urges Timothy to remain faithful and endure suffering.", theme: "A Final Charge to Faithfulness in Ministry." },
  { name: "Titus", group: "Pauline Epistles", author: "Paul", audience: "Titus (pastoring in Crete).", date: "c. AD 62-64", occasion: "To instruct Titus to appoint elders and organize the chaotic churches on the island of Crete, teaching sound doctrine leading to godly living.", theme: "Sound Doctrine and Good Works." },
  { name: "Philemon", group: "Pauline Epistles", author: "Paul", audience: "Philemon.", date: "c. AD 60-62", occasion: "A personal letter urging Philemon to forgive and welcome back his runaway slave, Onesimus, who had converted to Christ.", theme: "Forgiveness, Reconciliation, and Christian Brotherhood." },
  { name: "Hebrews", group: "Pauline Epistles", author: "Unknown (Apollos, Barnabas, Paul?)", audience: "Jewish Christians facing persecution.", date: "c. AD 60-69", occasion: "Written to Jewish Christians who were tempted to abandon Christ and revert to Judaism due to severe societal pressure.", theme: "The Absolute Superiority of Christ over the Old Covenant." },
  
  // General Epistles
  { name: "James", group: "General Epistles", author: "James (half-brother of Jesus)", audience: "Jewish Christians scattered abroad.", date: "c. AD 45-50", occasion: "To correct a misunderstanding of faith that lacked works. Addresses highly practical issues like trials, the tongue, and wealth.", theme: "True Faith Evidenced by Works." },
  { name: "1 Peter", group: "General Epistles", author: "Peter", audience: "Christians scattered across Asia Minor.", date: "c. AD 60-64", occasion: "Written to encourage believers who were facing intense societal marginalization and persecution, reminding them of their 'living hope'.", theme: "Suffering for Christ as Elect Exiles." },
  { name: "2 Peter", group: "General Epistles", author: "Peter", audience: "The church at large.", date: "c. AD 64-68", occasion: "Peter's farewell address warning the church against stealthy false teachers denying the Second Coming and promoting immorality.", theme: "Warning Against False Teachers and the Day of the Lord." },
  { name: "1 John", group: "General Epistles", author: "John the Apostle", audience: "Churches around Ephesus.", date: "c. AD 85-90", occasion: "Written to reassure believers of their salvation and combat early proto-Gnostic teachers denying the physical incarnation of Jesus.", theme: "Fellowship with God, the Tests of True Faith, and Love." },
  { name: "2 John", group: "General Epistles", author: "John the Apostle", audience: "The 'elect lady and her children' (a local church).", date: "c. AD 85-90", occasion: "Warning a local church not to offer hospitality or a platform to traveling false teachers who deceive the flock.", theme: "Walking in Truth and Rejecting False Teachers." },
  { name: "3 John", group: "General Epistles", author: "John the Apostle", audience: "Gaius.", date: "c. AD 85-90", occasion: "To commend Gaius for his faithful hospitality to missionaries, and condemn the dictatorial behavior of a church leader named Diotrephes.", theme: "Christian Hospitality and Church Leadership." },
  { name: "Jude", group: "General Epistles", author: "Jude (half-brother of Jesus)", audience: "The church at large.", date: "c. AD 65-80", occasion: "Jude urgently changed his topic to urge believers to 'contend for the faith' against stealthy false teachers perverting grace into sensuality.", theme: "Contending for the Faith Against Apostates." },
  { name: "Revelation", group: "General Epistles", author: "John the Apostle", audience: "The Seven Churches of Asia Minor.", date: "c. AD 90-95", occasion: "To provide a cosmic, apocalyptic vision of the spiritual war between Christ and Satan, encouraging the persecuted church that God wins in the end.", theme: "The Ultimate Triumph of Christ and the Consummation of All Things." }
];

const BibleBookContextGuide = () => {
  const [selectedBook, setSelectedBook] = useState(allBibleBooksData[0].name);
  const book = allBibleBooksData.find(b => b.name === selectedBook);

  // Group books for the select dropdown
  const groupedBooks = allBibleBooksData.reduce((acc, book) => {
    if (!acc[book.group]) acc[book.group] = [];
    acc[book.group].push(book);
    return acc;
  }, {});

  return (
    <div className="bg-white border border-slate-200 rounded-2xl p-6 mt-6 shadow-sm">
      <div className="flex items-center gap-3 mb-5 border-b border-slate-100 pb-4">
        <div className="bg-indigo-100 p-2 rounded-lg text-indigo-700">
          <BookOpen className="w-5 h-5" />
        </div>
        <div>
          <h4 className="font-bold text-slate-800 text-lg leading-tight">66-Book Contextual Guide</h4>
          <p className="text-xs text-slate-500 font-medium mt-0.5">Select any book of the Bible to view its historical background.</p>
        </div>
      </div>
      
      <div className="flex flex-col md:flex-row gap-6">
        <div className="w-full md:w-1/3">
          <label className="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Select a Book</label>
          <select 
            className="w-full bg-slate-50 border border-slate-300 text-slate-800 text-sm rounded-xl focus:ring-indigo-500 focus:border-indigo-500 block p-3 font-semibold outline-none cursor-pointer shadow-inner"
            value={selectedBook}
            onChange={(e) => setSelectedBook(e.target.value)}
          >
            {Object.keys(groupedBooks).map((groupName) => (
              <optgroup key={groupName} label={groupName} className="font-bold text-indigo-900">
                {groupedBooks[groupName].map((b) => (
                  <option key={b.name} value={b.name} className="font-medium text-slate-800">{b.name}</option>
                ))}
              </optgroup>
            ))}
          </select>
        </div>
        
        <div className="w-full md:w-2/3 bg-slate-50 rounded-xl p-6 border border-slate-100 relative overflow-hidden shadow-inner">
          <div className="absolute top-0 left-0 w-1.5 h-full bg-indigo-500"></div>
          
          <div className="flex justify-between items-start mb-4 border-b border-slate-200 pb-3">
            <div>
              <h5 className="font-black text-indigo-950 text-2xl">{book.name}</h5>
              <span className="text-indigo-600 text-xs font-bold uppercase tracking-widest">{book.group}</span>
            </div>
            <span className="bg-indigo-100 text-indigo-800 text-xs font-bold px-3 py-1.5 rounded-full border border-indigo-200 whitespace-nowrap">
              {book.date}
            </span>
          </div>

          <div className="grid grid-cols-2 gap-4 mb-4">
            <div className="bg-white p-3 rounded-lg border border-slate-100 shadow-sm">
              <strong className="block text-[10px] uppercase tracking-widest text-slate-400 mb-1">Author</strong>
              <span className="text-sm font-semibold text-slate-800">{book.author}</span>
            </div>
            <div className="bg-white p-3 rounded-lg border border-slate-100 shadow-sm">
              <strong className="block text-[10px] uppercase tracking-widest text-slate-400 mb-1">Original Audience</strong>
              <span className="text-sm font-semibold text-slate-800">{book.audience}</span>
            </div>
          </div>
          
          <div className="space-y-4">
            <div>
              <strong className="block text-xs uppercase tracking-widest text-indigo-400 mb-1">Specific Occasion & Purpose</strong>
              <p className="text-sm text-slate-700 leading-relaxed bg-white p-4 rounded-xl border border-slate-100 shadow-sm">
                {book.occasion}
              </p>
            </div>
            <div>
              <strong className="block text-xs uppercase tracking-widest text-emerald-400 mb-1">Primary Theme</strong>
              <p className="text-sm text-slate-700 leading-relaxed bg-emerald-50 p-4 rounded-xl border border-emerald-100 text-emerald-900 font-medium">
                {book.theme}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const workbookGenreOptions = [
  { value: "poetry", label: "Poetry", pageId: "poetry", icon: Feather, color: "indigo" },
  { value: "history", label: "Historical Narrative", pageId: "history", icon: ScrollText, color: "sky" },
  { value: "gospelsActs", label: "Gospels & Acts", pageId: "gospels-acts", icon: GitMerge, color: "indigo" },
  { value: "epistles", label: "Epistles", pageId: "epistles", icon: Mail, color: "purple" },
  { value: "law", label: "Law", pageId: "law", icon: Scale, color: "amber" },
  { value: "parables", label: "Parables", pageId: "parables", icon: MessageCircle, color: "emerald" },
  { value: "prophecy", label: "Prophecy", pageId: "prophecy", icon: Eye, color: "rose" },
  { value: "wisdom", label: "Wisdom Literature", pageId: "wisdom", icon: Compass, color: "teal" }
];

const workbookGenreConfig = {
  poetry: {
    label: "Poetry",
    pageId: "poetry",
    summary: "Poetry guides worship, lament, wisdom, longing, and hope through imagery, structure, repetition, and emotional movement.",
    ruleKeys: [
      "Master the Structure of Parallelism",
      "Decode the Imagery and Figures of Speech",
      "Identify the Speaker, Audience, and Voice Shifts",
      "Interpret Images in Clusters, Not Isolation",
      "Read Poetry as Worship and Prayer Before Proposition"
    ],
    prompts: {
      context: "Where does this poem sit in worship, lament, wisdom, exile, kingship, or personal prayer?",
      observation: "List repeated words, refrains, images, voice shifts, parallel lines, and emotional turns.",
      genreRules: "Which poetic rules most shape your reading, and why?",
      interpretation: "State the poem's main movement in your own words without flattening its emotion.",
      application: "How does this poem train prayer, worship, grief, hope, repentance, or trust today?",
      commonMistakes: "What quick readings should you avoid, such as treating imagery woodenly or skipping lament?"
    }
  },
  history: {
    label: "Historical Narrative",
    pageId: "history",
    summary: "Historical narrative is theological history: selected and arranged events that reveal God, covenant, character, conflict, and redemptive movement.",
    ruleKeys: [
      "Narrative Has Three Levels",
      "Trace the Plot Movement",
      "Distinguish Between Descriptive and Prescriptive",
      "Identify the Narrator's Theological Emphasis",
      "Read OT Narrative Through Christ Responsibly",
      "Read Characters Through Contrast, Dialogue, and Development",
      "Treat Speeches, Prayers, and Songs as Interpretive Clues",
      "Use Historical, Cultural, Political, and Geographical Background Carefully"
    ],
    prompts: {
      context: "Where does this story sit in the book, covenant setting, and larger biblical storyline?",
      observation: "Track setting, plot movement, conflict, dialogue, repetition, character contrast, and consequences.",
      genreRules: "Which narrative rules help you avoid turning the story into a shallow moral example?",
      interpretation: "What theological emphasis does the narrator want readers to see?",
      application: "What enduring principle carries forward without copying every ancient action?",
      commonMistakes: "What descriptive details should not be treated as direct commands?"
    }
  },
  gospelsActs: {
    label: "Gospels & Acts",
    pageId: "gospels-acts",
    summary: "The Gospels reveal Jesus' identity and mission; Acts shows the risen Jesus continuing His mission through the Spirit-empowered church.",
    ruleKeys: [
      "Read the Gospels as Theological Biography",
      "Read Acts as Luke's Second Volume",
      "Follow Each Gospel's Distinct Portrait of Jesus",
      "Watch Old Testament Fulfillment",
      "Trace the Movement from Jesus to Mission"
    ],
    prompts: {
      context: "Where does this episode sit in the Gospel or Acts movement?",
      observation: "Note setting, conflict, dialogue, fulfillment clues, responses to Jesus, Spirit activity, and mission movement.",
      genreRules: "Which Gospels/Acts rules help you read the episode on its own terms?",
      interpretation: "How does this passage reveal Jesus, fulfillment, discipleship, witness, or the Spirit's mission?",
      application: "What response of faith, repentance, witness, worship, or obedience does the passage call for?",
      commonMistakes: "What would flatten the Gospel writer's emphasis or turn Acts into a mechanical rulebook?"
    }
  },
  epistles: {
    label: "Epistles",
    pageId: "epistles",
    summary: "Epistles are occasional letters that teach through argument, pastoral correction, gospel logic, and Spirit-shaped application.",
    ruleKeys: [
      "Read the Letter as Occasional Communication",
      "Follow the Whole-Letter Movement",
      "Trace the Paragraph Logic",
      "Let Gospel Indicatives Ground Imperatives",
      "Cross the Principlizing Bridge Carefully",
      "Apply to the Church, Not Only Isolated Individuals",
      "Recognize Rhetorical and Literary Forms"
    ],
    prompts: {
      context: "What situation, problem, question, or pastoral concern might this letter be addressing?",
      observation: "Track conjunctions, commands, reasons, contrasts, repeated words, grammar, and the paragraph's flow.",
      genreRules: "Which epistle rules help you move from verse to argument?",
      interpretation: "What is the author's main point in this paragraph, and how is it supported?",
      application: "How does the gospel ground the command or response today?",
      commonMistakes: "What proof-texting, moralism, or speculative background should you avoid?"
    }
  },
  law: {
    label: "Law",
    pageId: "law",
    summary: "Biblical law reveals God's values, covenant holiness, justice, worship, neighbor love, and moral wisdom fulfilled through Christ.",
    ruleKeys: [
      "Recognize the Traditional Distinctions",
      "Principlize for Contemporary Application",
      "Start with Values Before Laws",
      "Distinguish Regulation from Endorsement",
      "Carry the Law Forward Through Christlike Love"
    ],
    prompts: {
      context: "Where does this law sit in covenant life, worship, justice, holiness, or community protection?",
      observation: "Identify the command form, stated reason, protected value, people affected, and covenant setting.",
      genreRules: "Which law rules help you move from ancient form to enduring value?",
      interpretation: "What value or theological principle is the law teaching?",
      application: "How does this value carry forward through Christlike love today?",
      commonMistakes: "What would be legalistic copying, careless dismissal, or confusing regulation with endorsement?"
    }
  },
  parables: {
    label: "Parables",
    pageId: "parables",
    summary: "Parables are vivid kingdom stories that expose assumptions, surprise hearers, and demand a response.",
    ruleKeys: [
      "Seek the Central Truth (Avoid Over-Allegorizing)",
      "Identify the Original Audience and Occasion",
      "Look for the \"Hook\" or Unexpected Twist",
      "Read the Parable in its Gospel Context",
      "Let the Parable Demand a Response"
    ],
    prompts: {
      context: "Who hears the parable, what prompts it, and where does it sit in the Gospel?",
      observation: "Track main characters, conflict, surprise, reversal, cultural details, and the final punch.",
      genreRules: "Which parable rules protect the central point from over-allegorizing?",
      interpretation: "What central truth is Jesus pressing on the hearers?",
      application: "What response does this parable demand from disciples today?",
      commonMistakes: "What incidental details should not become major doctrine?"
    }
  },
  prophecy: {
    label: "Prophecy",
    pageId: "prophecy",
    summary: "Prophecy speaks covenant lawsuit, judgment, hope, restoration, and apocalyptic vision with Christ, worship, endurance, and God's kingdom at the center.",
    ruleKeys: [
      "First Identify the Kind of Prophecy",
      "Let Classical Prophecy Function as Covenant Lawsuit",
      "Watch for Conditional Prophecy",
      "Recognize Near-View and Far-View Fulfillment",
      "Let Scripture Decode Prophetic Symbols",
      "Trace Old Testament Quotations, Citations, Allusions, and Echoes",
      "Use the Historicist Framework for Daniel and Revelation",
      "Follow the Continuous Historical Sequence",
      "Use Recapitulation: Repeat and Enlarge",
      "Apply the Day-Year Principle Carefully",
      "Recognize Literary and Rhetorical Design",
      "Keep Christ, the Sanctuary, and the Great Controversy at the Center"
    ],
    prompts: {
      context: "What kind of prophecy is this: covenant lawsuit, judgment oracle, restoration promise, or apocalyptic vision?",
      observation: "Track symbols, sequence, covenant charges, Old Testament quotations or echoes, time markers, literary patterns, heavenly scenes, repeated visions, and explanations inside the text.",
      genreRules: "Which prophetic rules keep your interpretation text-governed and Christ-centered?",
      interpretation: "What does this prophecy reveal about God's rule, judgment, mercy, Christ, worship, or final restoration?",
      application: "How should this passage form faithfulness, repentance, endurance, mission, or hope today?",
      commonMistakes: "What speculation, headline-reading, arbitrary symbol use, ignored literary structure, or timeline confusion should you avoid?"
    }
  },
  wisdom: {
    label: "Wisdom Literature",
    pageId: "wisdom",
    summary: "Wisdom literature forms people who fear the Lord, discern life well, speak rightly, endure suffering, and live with humility.",
    ruleKeys: [
      "Identify the Wisdom Form Before Applying It",
      "Read Proverbs as General Wisdom, Not Mechanical Promises",
      "Keep the Fear of the Lord at the Center",
      "Let the Wisdom Books Balance One Another",
      "Apply Wisdom as Character Formation"
    ],
    prompts: {
      context: "What wisdom form is this, and who is speaking?",
      observation: "Notice contrasts, comparisons, repeated themes, poetic structure, speaker, and life situation.",
      genreRules: "Which wisdom rules keep this from becoming a mechanical promise or self-help slogan?",
      interpretation: "What kind of wise character or reverent discernment is the text forming?",
      application: "How should this wisdom shape speech, habits, humility, work, relationships, or worship?",
      commonMistakes: "What overpromising, misquoting, or speaker-confusion should you avoid?"
    }
  }
};

const workbookBookEntries = [
  { aliases: ["genesis", "gen"], dataName: "Genesis", genre: "history", note: "Genesis is primarily theological narrative." },
  { aliases: ["exodus", "exod", "ex"], dataName: "Exodus", genre: "law", note: "Exodus mixes narrative and law. Use the manual override if your passage is a narrative scene." },
  { aliases: ["leviticus", "lev"], dataName: "Leviticus", genre: "law", note: "Leviticus is the clearest Pentateuch example of law and worship instruction." },
  { aliases: ["numbers", "num"], dataName: "Numbers", genre: "law", note: "Numbers mixes wilderness narrative and law. Use the manual override if your passage is mostly narrative." },
  { aliases: ["deuteronomy", "deut", "dt"], dataName: "Deuteronomy", genre: "law", note: "Deuteronomy is covenant instruction and law in sermon form." },
  { aliases: ["joshua", "josh"], dataName: "Joshua", genre: "history" },
  { aliases: ["judges", "judg"], dataName: "Judges", genre: "history" },
  { aliases: ["ruth"], dataName: "Ruth", genre: "history" },
  { aliases: ["1 samuel", "1 sam", "i samuel", "2 samuel", "2 sam", "ii samuel"], dataName: "1 & 2 Samuel", genre: "history" },
  { aliases: ["1 kings", "1 kgs", "i kings", "2 kings", "2 kgs", "ii kings"], dataName: "1 & 2 Kings", genre: "history" },
  { aliases: ["1 chronicles", "1 chron", "1 chr", "i chronicles", "2 chronicles", "2 chron", "2 chr", "ii chronicles"], dataName: "1 & 2 Chronicles", genre: "history" },
  { aliases: ["ezra"], dataName: "Ezra", genre: "history" },
  { aliases: ["nehemiah", "neh"], dataName: "Nehemiah", genre: "history" },
  { aliases: ["esther", "esth"], dataName: "Esther", genre: "history" },
  { aliases: ["job"], dataName: "Job", genre: "wisdom" },
  { aliases: ["psalm", "psalms", "ps"], dataName: "Psalms", genre: "poetry" },
  { aliases: ["proverbs", "prov", "pr"], dataName: "Proverbs", genre: "wisdom" },
  { aliases: ["ecclesiastes", "eccl", "qoheleth"], dataName: "Ecclesiastes", genre: "wisdom" },
  { aliases: ["song of solomon", "song of songs", "canticles", "song"], dataName: "Song of Solomon", genre: "poetry" },
  { aliases: ["isaiah", "isa"], dataName: "Isaiah", genre: "prophecy" },
  { aliases: ["jeremiah", "jer"], dataName: "Jeremiah", genre: "prophecy" },
  { aliases: ["lamentations", "lam"], dataName: "Lamentations", genre: "poetry" },
  { aliases: ["ezekiel", "ezek"], dataName: "Ezekiel", genre: "prophecy" },
  { aliases: ["daniel", "dan"], dataName: "Daniel", genre: "prophecy", special: "daniel" },
  { aliases: ["hosea", "hos"], dataName: "Hosea", genre: "prophecy" },
  { aliases: ["joel"], dataName: "Joel", genre: "prophecy" },
  { aliases: ["amos"], dataName: "Amos", genre: "prophecy" },
  { aliases: ["obadiah", "obad"], dataName: "Obadiah", genre: "prophecy" },
  { aliases: ["jonah", "jon"], dataName: "Jonah", genre: "history", note: "Jonah is in the Minor Prophets, but the book itself is largely prophetic narrative." },
  { aliases: ["micah", "mic"], dataName: "Micah", genre: "prophecy" },
  { aliases: ["nahum", "nah"], dataName: "Nahum", genre: "prophecy" },
  { aliases: ["habakkuk", "hab"], dataName: "Habakkuk", genre: "prophecy" },
  { aliases: ["zephaniah", "zeph"], dataName: "Zephaniah", genre: "prophecy" },
  { aliases: ["haggai", "hag"], dataName: "Haggai", genre: "prophecy" },
  { aliases: ["zechariah", "zech"], dataName: "Zechariah", genre: "prophecy" },
  { aliases: ["malachi", "mal"], dataName: "Malachi", genre: "prophecy" },
  { aliases: ["matthew", "matt", "mt"], dataName: "Matthew", genre: "gospelsActs" },
  { aliases: ["mark", "mk"], dataName: "Mark", genre: "gospelsActs" },
  { aliases: ["luke", "lk"], dataName: "Luke", genre: "gospelsActs" },
  { aliases: ["john", "jn"], dataName: "John", genre: "gospelsActs" },
  { aliases: ["acts"], dataName: "Acts", genre: "gospelsActs" },
  { aliases: ["romans", "rom"], dataName: "Romans", genre: "epistles" },
  { aliases: ["1 corinthians", "1 cor", "i corinthians"], dataName: "1 Corinthians", genre: "epistles" },
  { aliases: ["2 corinthians", "2 cor", "ii corinthians"], dataName: "2 Corinthians", genre: "epistles" },
  { aliases: ["galatians", "gal"], dataName: "Galatians", genre: "epistles" },
  { aliases: ["ephesians", "eph"], dataName: "Ephesians", genre: "epistles" },
  { aliases: ["philippians", "phil"], dataName: "Philippians", genre: "epistles" },
  { aliases: ["colossians", "col"], dataName: "Colossians", genre: "epistles" },
  { aliases: ["1 thessalonians", "1 thess", "i thessalonians"], dataName: "1 Thessalonians", genre: "epistles" },
  { aliases: ["2 thessalonians", "2 thess", "ii thessalonians"], dataName: "2 Thessalonians", genre: "epistles" },
  { aliases: ["1 timothy", "1 tim", "i timothy"], dataName: "1 Timothy", genre: "epistles" },
  { aliases: ["2 timothy", "2 tim", "ii timothy"], dataName: "2 Timothy", genre: "epistles" },
  { aliases: ["titus"], dataName: "Titus", genre: "epistles" },
  { aliases: ["philemon", "phlm"], dataName: "Philemon", genre: "epistles" },
  { aliases: ["hebrews", "heb"], dataName: "Hebrews", genre: "epistles" },
  { aliases: ["james", "jas"], dataName: "James", genre: "epistles" },
  { aliases: ["1 peter", "1 pet", "i peter"], dataName: "1 Peter", genre: "epistles" },
  { aliases: ["2 peter", "2 pet", "ii peter"], dataName: "2 Peter", genre: "epistles" },
  { aliases: ["1 john", "1 jn", "i john"], dataName: "1 John", genre: "epistles" },
  { aliases: ["2 john", "2 jn", "ii john"], dataName: "2 John", genre: "epistles" },
  { aliases: ["3 john", "3 jn", "iii john"], dataName: "3 John", genre: "epistles" },
  { aliases: ["jude"], dataName: "Jude", genre: "epistles" },
  { aliases: ["revelation", "rev", "apocalypse"], dataName: "Revelation", genre: "prophecy" }
];

const workbookAliasEntries = workbookBookEntries
  .flatMap((entry) => entry.aliases.map((alias) => ({ ...entry, alias })))
  .sort((a, b) => b.alias.length - a.alias.length);

const emptyWorkbookResponses = {
  context: "",
  observation: "",
  genreRules: "",
  interpretation: "",
  application: "",
  commonMistakes: ""
};

const workbookStorageKey = "guidedHermeneuticsWorkbook:v2";

const getInitialWorkbookState = () => {
  if (typeof window === "undefined") return {};
  try {
    const saved = window.localStorage.getItem(workbookStorageKey);
    const parsed = saved ? JSON.parse(saved) : {};
    return parsed && typeof parsed === "object" ? parsed : {};
  } catch {
    return {};
  }
};

const normalizeReferenceInput = (reference) =>
  reference
    .toLowerCase()
    .replace(/[.,;]/g, " ")
    .replace(/\s+/g, " ")
    .trim();

const parseBibleReference = (reference) => {
  const normalized = normalizeReferenceInput(reference);
  if (!normalized) return null;
  const matched = workbookAliasEntries.find((entry) => normalized === entry.alias || normalized.startsWith(`${entry.alias} `));
  if (!matched) return null;
  const rest = normalized.slice(matched.alias.length).trim();
  const chapter = rest.match(/^(\d+)/)?.[1] ? Number(rest.match(/^(\d+)/)[1]) : null;
  return {
    ...matched,
    chapter,
    bookData: allBibleBooksData.find((book) => book.name === matched.dataName) || null
  };
};

const getDanielGenre = (chapter) => {
  if (!chapter) {
    return {
      genre: "unknown",
      mixed: true,
      needsChapter: true,
      secondaryGenre: "prophecy",
      note: "Daniel contains both court narrative and apocalyptic prophecy. Enter a chapter or choose a manual genre before starting."
    };
  }
  if ([1, 3, 5, 6].includes(chapter)) {
    return {
      genre: "history",
      note: `Daniel ${chapter} is primarily historical narrative. Read the court setting, character contrast, speeches, and God's sovereignty.`
    };
  }
  if (chapter === 2) {
    return {
      genre: "history",
      secondaryGenre: "prophecy",
      mixed: true,
      note: "Daniel 2 is mixed: the chapter is framed as court narrative, but the dream requires apocalyptic prophecy prompts."
    };
  }
  if (chapter === 4) {
    return {
      genre: "history",
      secondaryGenre: "prophecy",
      mixed: true,
      note: "Daniel 4 is mixed: royal testimony and narrative frame surround a prophetic dream."
    };
  }
  if ([7, 8, 10, 11, 12].includes(chapter)) {
    return {
      genre: "prophecy",
      note: `Daniel ${chapter} is apocalyptic prophecy. Pay close attention to symbols, sequence, angelic explanation, and repeat-and-enlarge patterns.`
    };
  }
  if (chapter === 9) {
    return {
      genre: "prophecy",
      secondaryGenre: "history",
      mixed: true,
      note: "Daniel 9 is mixed: prayer and covenant context lead into prophecy. The workbook defaults to Prophecy while keeping historical context in view."
    };
  }
  return {
    genre: "prophecy",
    note: "Daniel has mixed material. Because this chapter is outside the usual range, confirm the genre manually if needed."
  };
};

const analyzeWorkbookReference = (reference, manualGenre) => {
  const parsed = parseBibleReference(reference);
  const manualOverride = manualGenre && manualGenre !== "auto";
  if (!parsed) {
    return {
      parsed: null,
      genre: manualOverride ? manualGenre : "unknown",
      detectedGenre: "unknown",
      manualOverride,
      needsManual: !manualOverride,
      note: reference.trim()
        ? "I could not match that reference to a Bible book. Choose the genre manually to keep working."
        : "Enter a Bible reference to begin."
    };
  }

  const special = parsed.special === "daniel" ? getDanielGenre(parsed.chapter) : null;
  const detectedGenre = special?.genre || parsed.genre;
  return {
    parsed,
    genre: manualOverride ? manualGenre : detectedGenre,
    detectedGenre,
    secondaryGenre: manualOverride ? null : special?.secondaryGenre,
    manualOverride,
    mixed: Boolean(!manualOverride && special?.mixed),
    needsChapter: Boolean(!manualOverride && special?.needsChapter),
    needsManual: false,
    note: manualOverride
      ? `Manual genre override selected. Original detection was ${workbookGenreConfig[detectedGenre]?.label || "uncertain"}.`
      : special?.note || parsed.note || null
  };
};

const getWorkbookRuleKeys = (analysis) => {
  const primary = workbookGenreConfig[analysis.genre]?.ruleKeys || [];
  const secondary = analysis.secondaryGenre ? workbookGenreConfig[analysis.secondaryGenre]?.ruleKeys || [] : [];
  const combined = [...new Set([...primary, ...secondary.slice(0, 3)])];
  return ["history", "epistles", "prophecy"].includes(analysis.genre) ? combined : combined.slice(0, 6);
};

const getWorkbookRuleGuidance = (key) => {
  const direct = ruleGuidanceByTitle[key];
  if (direct) return direct;
  const gospelRule = gospelsActsRules.find((rule) => rule.title === key);
  if (gospelRule) return { ask: gospelRule.ask, lookFor: gospelRule.lookFor, avoid: gospelRule.avoid };
  const poetryRule = additionalPoetryRules.find((rule) => rule.title === key);
  if (poetryRule) return { ask: poetryRule.ask, lookFor: poetryRule.lookFor, avoid: poetryRule.avoid };
  return null;
};

const workbookConfidenceItems = [
  { key: "genre", label: "I identified the genre.", summary: "Identified genre" },
  { key: "context", label: "I checked the passage context.", summary: "Checked context" },
  { key: "observation", label: "I made text-based observations.", summary: "Made observations" },
  { key: "genreRules", label: "I used the relevant genre rules.", summary: "Used genre rules" },
  { key: "mistakes", label: "I named common mistakes to avoid.", summary: "Avoided common mistakes" },
  { key: "bridge", label: "I crossed the principlizing bridge carefully.", summary: "Crossed the principlizing bridge" },
  { key: "application", label: "I wrote a faithful application.", summary: "Wrote faithful application" }
];

const getDefaultConfidenceChecks = () =>
  Object.fromEntries(workbookConfidenceItems.map((item) => [item.key, false]));

const getWorkbookSummaryMarkdown = ({ reference, notes, analysis, responses, confidenceChecks = {}, learningLevel = defaultLearningLevel }) => {
  const config = workbookGenreConfig[analysis.genre];
  const parsed = analysis.parsed;
  const book = parsed?.bookData;
  const ruleLines = getWorkbookRuleKeys(analysis)
    .map((key) => `- ${key}`)
    .join("\n");
  const confidenceLines = workbookConfidenceItems
    .map((item) => `- ${confidenceChecks[item.key] ? "[x]" : "[ ]"} ${item.summary}`)
    .join("\n");
  const valueOrBlank = (value) => value.trim() || "[No user entry yet]";
  return [
    `# Guided Hermeneutics Summary: ${reference.trim() || "Untitled Passage"}`,
    "",
    "This summary was not generated by AI. It was compiled from the user's workbook notes and the hermeneutics guide prompts.",
    "",
    `- Reference: ${reference.trim() || "[No reference entered]"}`,
    `- Workbook genre: ${config?.label || "Manual/uncertain"}`,
    `- Learning level: ${getLearningLevelLabel(learningLevel)}`,
    `- Detected book: ${book?.name || parsed?.dataName || "[Unknown]"}`,
    `- Mixed genre note: ${analysis.mixed ? "Yes" : "No"}`,
    analysis.note ? `- Detection note: ${analysis.note}` : null,
    book?.author ? `- Author: ${book.author}` : null,
    book?.audience ? `- Original audience: ${book.audience}` : null,
    book?.occasion ? `- Occasion: ${book.occasion}` : null,
    "",
    "## Confidence Checklist",
    confidenceLines,
    "",
    "## Starting Notes",
    valueOrBlank(notes),
    "",
    "## Context",
    valueOrBlank(responses.context),
    "",
    "## Observation",
    valueOrBlank(responses.observation),
    "",
    "## Genre Rules Considered",
    ruleLines || "[No rule prompts selected]",
    "",
    valueOrBlank(responses.genreRules),
    "",
    "## Interpretation",
    valueOrBlank(responses.interpretation),
    "",
    "## Application",
    valueOrBlank(responses.application),
    "",
    "## Common Mistakes to Avoid",
    valueOrBlank(responses.commonMistakes)
  ].filter(Boolean).join("\n");
};

const downloadTextFile = (filename, text) => {
  const blob = new Blob([text], { type: "text/markdown;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
};

const glossaryTerms = [
  ["Allegory", "A reading that treats details as hidden spiritual symbols. Responsible interpretation avoids uncontrolled allegory."],
  ["Allusion", "A clear but indirect reference to an earlier biblical text, image, event, or phrase without directly quoting it."],
  ["Analogy of Faith", "The principle that Scripture interprets Scripture, so clearer passages help explain more difficult ones without forcing contradiction."],
  ["Apocalyptic", "Symbolic prophecy that often uses visions, angels, beasts, time periods, heavenly scenes, and broad historical movement."],
  ["Application", "The faithful response the text calls for today after interpretation has been done carefully."],
  ["Authorial Intent", "The meaning the biblical author intended to communicate, under the inspiration of the Holy Spirit."],
  ["Canon", "The whole collection of Scripture, which helps individual passages be read within the full biblical witness."],
  ["Chiasm", "A mirrored literary pattern, often described as A-B-C-B-A, that may highlight the center or boundaries of a unit."],
  ["Citation", "An explicit reference to another biblical text or source, sometimes named directly and sometimes signaled by an introductory formula."],
  ["Clause", "A group of words with a subject and verbal idea. Main clauses carry the thought; subordinate clauses depend on another clause."],
  ["Contemporization", "Restating or illustrating a biblical situation in today's world so the original force of the passage becomes concrete for modern hearers."],
  ["Context", "The surrounding words, paragraphs, book setting, historical situation, and canonical location of a passage."],
  ["Covenant Lawsuit", "A prophetic form where God brings charges against His people for covenant unfaithfulness and calls them to return."],
  ["Day-Year Principle", "A principle used carefully in symbolic apocalyptic prophecy where a prophetic day represents a literal year."],
  ["Deductive Study", "A study approach that starts with a conclusion or topic and then looks for texts to support it."],
  ["Descriptive", "Material that tells what happened without automatically commanding the reader to imitate it."],
  ["Echo", "A subtle biblical resonance that recalls an earlier theme, image, or phrase. Echoes should be held more cautiously than direct quotations."],
  ["Genre", "The kind of literature a passage is, such as poetry, narrative, law, parable, epistle, prophecy, or wisdom."],
  ["Great Controversy", "The Bible's cosmic conflict theme, centered on God's character, Christ's victory, Satan's rebellion, sin, judgment, and restoration."],
  ["Hermeneutics", "The art and science of interpreting Scripture faithfully."],
  ["Imagination", "Thoughtfully entering a passage's scene, emotion, and concrete world without inventing meaning beyond the text."],
  ["Inclusio", "A bookend pattern where a section begins and ends with similar words or themes."],
  ["Inductive Study", "A method that moves from observation of the text toward interpretation and application."],
  ["Interpretation", "The work of explaining what the passage meant in its own setting before applying it today."],
  ["Observation", "Careful attention to what the text says: words, structure, repetition, grammar, setting, and movement."],
  ["Parable", "A vivid kingdom story or comparison that exposes assumptions and demands a response."],
  ["Phrase", "A meaningful group of words that does not always contain a full subject and verb but supports a main thought."],
  ["Preunderstanding", "The assumptions, experiences, traditions, habits, and prior teaching a reader brings to the text before studying it."],
  ["Principlizing Bridge", "A process for moving from original meaning to a timeless theological principle and then to modern application."],
  ["Prescriptive", "Material that gives a command, instruction, or intended pattern for God's people."],
  ["Proposition", "A complete thought or claim that can be related to other thoughts in argument diagramming."],
  ["Quotation", "A direct use of earlier biblical wording. Quotations usually carry the earlier passage's context into the new passage."],
  ["Reader Response", "A reading approach where the reader's feelings, needs, or experience controls the meaning instead of the author's intended meaning."],
  ["Recapitulation", "A repeat-and-enlarge pattern where later visions revisit the same historical span with added detail."],
  ["Rhetorical Question", "A question asked to persuade, expose, or advance an argument rather than simply request information."],
  ["Semantic Range", "The range of possible meanings a word can have; context determines which meaning is intended in a specific passage."],
  ["S.P.A.C.E.P.E.T.S.", "A simple application checklist: Sin, Promise, Attitude, Command, Example, Prayer, Error, Truth, and Something to thank God for."],
  ["Typology", "A biblical pattern where a real person, event, or institution foreshadows a greater fulfillment, usually in Christ."]
].map(([term, definition]) => ({ term, definition })).sort((a, b) => a.term.localeCompare(b.term));

const glossaryDefinitionMap = glossaryTerms.reduce((map, item) => {
  map[item.term.toLowerCase()] = item.definition;
  return map;
}, {});

const GlossaryTerm = ({ term, children, definition, variant = "default" }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [tooltipStyle, setTooltipStyle] = useState({});
  const triggerRef = useRef(null);
  const label = getNodeText(children) || term;
  const resolvedDefinition = definition || glossaryDefinitionMap[term.toLowerCase()] || "A key term used in this guide.";
  const isDark = variant === "dark";

  const updateTooltipPosition = () => {
    if (!triggerRef.current || typeof window === "undefined" || typeof document === "undefined") return;
    const rect = triggerRef.current.getBoundingClientRect();
    const mainRect = document.querySelector("main")?.getBoundingClientRect();
    const viewportPadding = 16;
    const safeLeft = Math.max(viewportPadding, (mainRect?.left || 0) + viewportPadding);
    const safeRight = Math.min(window.innerWidth - viewportPadding, (mainRect?.right || window.innerWidth) - viewportPadding);
    const availableWidth = Math.max(220, safeRight - safeLeft);
    const tooltipWidth = Math.min(320, availableWidth);
    const desiredLeft = rect.left + rect.width / 2 - tooltipWidth / 2;
    const left = Math.min(Math.max(desiredLeft, safeLeft), safeRight - tooltipWidth);
    const top = rect.bottom + 8;

    setTooltipStyle({
      left: `${left}px`,
      top: `${top}px`,
      width: `${tooltipWidth}px`
    });
  };

  useEffect(() => {
    if (!isOpen) return undefined;
    updateTooltipPosition();
    window.addEventListener("resize", updateTooltipPosition);
    window.addEventListener("scroll", updateTooltipPosition, true);
    return () => {
      window.removeEventListener("resize", updateTooltipPosition);
      window.removeEventListener("scroll", updateTooltipPosition, true);
    };
  }, [isOpen]);

  return (
    <span ref={triggerRef} className="relative inline-flex align-baseline overflow-visible">
      <button
        type="button"
        onMouseEnter={() => {
          updateTooltipPosition();
          setIsOpen(true);
        }}
        onMouseLeave={() => setIsOpen(false)}
        onFocus={() => {
          updateTooltipPosition();
          setIsOpen(true);
        }}
        onClick={() => {
          updateTooltipPosition();
          setIsOpen(true);
        }}
        onBlur={() => setIsOpen(false)}
        className={`inline rounded-sm border-b border-dotted px-0.5 font-bold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${
          isDark
            ? "border-yellow-300/90 bg-white/10 text-white hover:bg-white/20 focus-visible:ring-yellow-300 focus-visible:ring-offset-indigo-900"
            : "border-indigo-500/80 bg-indigo-50/80 text-indigo-900 hover:bg-indigo-100 focus-visible:ring-indigo-400 focus-visible:ring-offset-white"
        }`}
        aria-label={`${label}: ${resolvedDefinition}`}
      >
        {children || term}
      </button>
      {isOpen && typeof document !== "undefined" && ReactDOM.createPortal(
        <span
          role="tooltip"
          style={tooltipStyle}
          className="pointer-events-none fixed z-[9999] rounded-xl border border-indigo-100 bg-white p-3 text-left text-xs font-medium leading-relaxed text-slate-700 shadow-xl ring-1 ring-slate-900/5"
        >
          <span className="mb-1 block text-sm font-black text-indigo-900">{label}</span>
          {resolvedDefinition}
        </span>,
        document.body
      )}
    </span>
  );
};

const masterChecklistSections = [
  ["Observation", ["Read the passage more than once.", "Mark repeated words, contrasts, commands, questions, and structure.", "List what is clear before asking what it means."]],
  ["Context", ["Check the paragraph, book movement, author, audience, and occasion.", "Notice covenant setting and historical background.", "Avoid isolating a verse from its argument or story."]],
  ["Genre", ["Name the genre before applying the passage.", "Use the correct genre rules and common mistakes.", "Check whether the passage includes mixed genre features."]],
  ["Structure", ["Trace plot, poetic movement, argument logic, legal reasoning, or prophetic sequence.", "Identify the main idea and supporting details.", "Notice literary design without forcing hidden meanings."]],
  ["Theology", ["Ask what the passage reveals about God, Christ, covenant, sin, grace, worship, mission, judgment, or hope.", "Confirm major conclusions with the wider canon.", "Avoid building doctrine from incidental details."]],
  ["Application", ["Move from original meaning to a timeless principle.", "Apply personally and communally.", "Name one concrete faithful response."]],
  ["Mistake Audit", ["Check for proof-texting, genre flattening, moralism, speculation, over-allegorizing, and premature application.", "Ask what a careful reader might challenge.", "Revise the summary if needed."]]
];

const practiceLibrary = [
  { genre: "Poetry", icon: Feather, purpose: "Practice hearing imagery, repetition, voice, emotion, and worshipful movement before extracting propositions.", exercises: [
    {
      reference: "Psalm 1",
      level: "Beginner",
      time: "10 min",
      skill: "Image contrast",
      prompt: "Trace the two paths and note the tree/chaff image contrast.",
      steps: ["Mark the two kinds of people.", "Circle the two images.", "Write the poem's main contrast in one sentence."],
      answer: "The psalm contrasts rooted delight in God's instruction with unstable wickedness. Application should focus on worshipful formation, not merely productivity.",
      commonMistake: "Turning the tree into a generic success formula instead of reading it as covenant-shaped delight and stability.",
      groupUse: "Split the room into tree and chaff groups; each group lists what the image communicates."
    },
    {
      reference: "Lamentations 3:19-24",
      level: "Beginner",
      time: "12 min",
      skill: "Emotional movement",
      prompt: "Notice the movement from affliction to remembered mercy.",
      steps: ["List the grief words.", "Find the turning point.", "Name the theological truth the speaker remembers."],
      answer: "Hope does not erase grief. It rises because the speaker remembers God's covenant mercy and faithfulness.",
      commonMistake: "Rushing to hope so quickly that lament becomes embarrassment rather than faithful prayer.",
      groupUse: "Ask learners to write one sentence that preserves both grief and hope."
    },
    {
      reference: "Psalm 23",
      level: "Beginner",
      time: "12 min",
      skill: "Image cluster",
      prompt: "Track shepherd, path, table, oil, cup, and house imagery.",
      steps: ["Group the images by provision, protection, hospitality, and presence.", "Ask how each image deepens trust.", "Write the psalm's movement from guidance to dwelling."],
      answer: "The psalm pictures the Lord's care through a cluster of images: shepherding care, dangerous paths, protected hospitality, and final dwelling with God.",
      commonMistake: "Treating each image as a separate doctrine instead of seeing the whole poem's portrait of the Lord's presence.",
      groupUse: "Have each person choose one image and explain what it adds to the whole."
    },
    {
      reference: "Job 38:1-11",
      level: "Intermediate",
      time: "15 min",
      skill: "Rhetorical questions",
      prompt: "Observe how God's questions reframe Job's suffering and limits.",
      steps: ["Count the questions.", "Notice creation imagery.", "Ask what the questions do to human certainty."],
      answer: "The questions do not give Job a simple explanation; they re-situate him before God's wisdom, power, and creaturely limits.",
      commonMistake: "Reading the passage as if God is merely scolding rather than revealing divine wisdom beyond Job's reach.",
      groupUse: "Invite the group to name what kind of humility the questions create."
    }
  ] },
  { genre: "Historical Narrative", icon: ScrollText, purpose: "Practice plot, character, narrator emphasis, covenant context, and the difference between description and prescription.", exercises: [
    {
      reference: "Genesis 22:1-19",
      level: "Intermediate",
      time: "20 min",
      skill: "Plot and covenant",
      prompt: "Track setting, test, dialogue, climax, and provision.",
      steps: ["Map exposition, rising action, climax, and resolution.", "List covenant promises at stake.", "Explain why provision matters."],
      answer: "The story reveals tested faith and God's provision. Read it within covenant promise and canonical movement, not as a command to imitate Abraham's exact action.",
      commonMistake: "Making the story mainly about extreme obedience without attending to promise, testing, provision, and God's covenant faithfulness.",
      groupUse: "Assign one table plot movement and another table covenant context, then compare."
    },
    {
      reference: "2 Kings 5:1-14",
      level: "Beginner",
      time: "15 min",
      skill: "Character contrast",
      prompt: "Observe character contrast, pride, humility, and prophetic instruction.",
      steps: ["Compare Naaman, the servant girl, Elisha, and the servants.", "Notice who speaks wisdom.", "Name the turning point."],
      answer: "Naaman's healing comes through humble obedience to a simple prophetic word, exposing pride and displaying God's mercy beyond Israel.",
      commonMistake: "Making the river itself the point instead of the humbling trust required by the prophetic word.",
      groupUse: "Ask learners to identify which character they would have ignored and why."
    },
    {
      reference: "Ruth 1:1-18",
      level: "Beginner",
      time: "15 min",
      skill: "Setting and dialogue",
      prompt: "Track famine, loss, return, and covenant loyalty in dialogue.",
      steps: ["Name the crisis.", "Mark repeated return language.", "Notice Ruth's speech and covenant commitment."],
      answer: "The opening movement places loyal love inside grief, emptiness, and return. Ruth's speech signals covenant allegiance before the larger redemption story unfolds.",
      commonMistake: "Reading Ruth only as romance and missing famine, exile-like emptiness, covenant loyalty, and return.",
      groupUse: "Read Naomi's and Ruth's words aloud with different readers so the voice contrast is heard."
    },
    {
      reference: "Nehemiah 8:1-12",
      level: "Intermediate",
      time: "18 min",
      skill: "Speeches and response",
      prompt: "Observe public reading, explanation, grief, joy, and community response.",
      steps: ["List the repeated actions around Scripture.", "Notice the people's emotional response.", "Explain why joy follows understanding."],
      answer: "The narrative highlights communal hearing, explanation, conviction, and restored joy. It models reverent response without turning every detail into a rigid worship formula.",
      commonMistake: "Copying the event mechanically while missing the theological emphasis on understanding and covenant renewal.",
      groupUse: "Ask the group what healthy responses to Scripture appear in the passage."
    }
  ] },
  { genre: "Gospels & Acts", icon: GitMerge, purpose: "Practice reading episodes as theological narrative that reveals Jesus, fulfillment, discipleship, Spirit, witness, and mission.", exercises: [
    {
      reference: "Mark 2:1-12",
      level: "Beginner",
      time: "15 min",
      skill: "Conflict and identity",
      prompt: "Watch conflict, authority, healing, and response.",
      steps: ["Identify the conflict.", "Notice Jesus' claim.", "Ask how the miracle confirms the claim."],
      answer: "The miracle reveals Jesus' authority to forgive sins, not merely His power to heal bodies.",
      commonMistake: "Making the friends' persistence the main point while Jesus' authority moves to the background.",
      groupUse: "Have one group track conflict and another track revelation of Jesus' identity."
    },
    {
      reference: "Acts 10:34-48",
      level: "Intermediate",
      time: "20 min",
      skill: "Mission movement",
      prompt: "Trace Spirit, witness, nations, and boundary crossing.",
      steps: ["Identify Peter's main announcement.", "Notice Gentile inclusion.", "Mark the Spirit's role."],
      answer: "The risen Jesus expands mission to the nations through Spirit-confirmed witness.",
      commonMistake: "Treating Acts as random church history instead of Luke's account of Jesus' continuing mission through the Spirit.",
      groupUse: "Ask what changes for Peter, Cornelius, and the church."
    },
    {
      reference: "Luke 10:25-37",
      level: "Beginner",
      time: "15 min",
      skill: "Question and reversal",
      prompt: "Follow the lawyer's question, Jesus' story, and the reversal of neighbor-love.",
      steps: ["Name the question that starts the exchange.", "Identify the surprising character.", "State the demanded response."],
      answer: "Jesus reframes neighbor-love from defining limits to showing mercy. The story exposes self-justification and calls for costly compassion.",
      commonMistake: "Reducing the passage to kindness in general while missing Jesus' confrontation of the questioner's evasive posture.",
      groupUse: "Ask learners to rewrite the final question in their own words."
    },
    {
      reference: "Acts 17:16-34",
      level: "Intermediate",
      time: "20 min",
      skill: "Speech and audience",
      prompt: "Observe how Paul addresses an idolatrous, philosophical audience.",
      steps: ["Notice what provokes Paul.", "Track his bridge from creation to judgment.", "Compare the different responses."],
      answer: "Paul contextualizes without surrendering the message: God as Creator, human dependence, repentance, judgment, and resurrection remain central.",
      commonMistake: "Treating contextualization as either compromise or mere cleverness instead of Spirit-shaped witness to the living God.",
      groupUse: "Ask the group which parts of Paul's speech connect and which parts confront."
    }
  ] },
  { genre: "Epistles", icon: Mail, purpose: "Practice reading letters as pastoral arguments where gospel truth grounds commands for churches.", exercises: [
    {
      reference: "Philippians 2:1-11",
      level: "Intermediate",
      time: "20 min",
      skill: "Indicative and imperative",
      prompt: "Trace the command to humility and its grounding in Christ.",
      steps: ["Find the commands.", "Find the reason or model.", "Explain how Christ grounds the community's posture."],
      answer: "Paul grounds communal humility in the self-giving pattern and exaltation of Christ.",
      commonMistake: "Admiring Christ's humility without seeing Paul's pastoral aim for the church's unity.",
      groupUse: "Have learners draw one arrow from the Christ hymn back to the command."
    },
    {
      reference: "1 Thessalonians 5:16-18",
      level: "Beginner",
      time: "10 min",
      skill: "Command series",
      prompt: "Identify the command series and the reason clause.",
      steps: ["Divide the short commands.", "Group them as a series.", "Identify the ground introduced by because."],
      answer: "Rejoice, pray, and give thanks form a series grounded in God's will for believers in Christ.",
      commonMistake: "Treating each command as isolated instead of seeing the shared ground for the whole series.",
      groupUse: "Let learners practice arcing, bracketing, or phrasing with the same passage."
    },
    {
      reference: "Ephesians 2:8-10",
      level: "Beginner",
      time: "15 min",
      skill: "Gospel logic",
      prompt: "Trace grace, faith, gift, not works, and good works.",
      steps: ["Mark what salvation is from.", "Mark what salvation is not from.", "Explain how good works fit after grace."],
      answer: "Grace is the ground of salvation, faith receives the gift, works do not cause salvation, and good works are the intended fruit of God's workmanship.",
      commonMistake: "Using the passage either to dismiss obedience or to make works the basis of acceptance.",
      groupUse: "Ask learners to write the gospel logic as one sentence with because and therefore."
    },
    {
      reference: "Romans 14:1-12",
      level: "Intermediate",
      time: "25 min",
      skill: "Principlizing bridge",
      prompt: "Follow Paul's reasoning about disputable matters, conscience, and accountability to the Lord.",
      steps: ["Name the original issue.", "Find Paul's theological reasons.", "Write a modern principle without copying the ancient issue exactly."],
      answer: "Paul teaches believers to receive one another in disputable matters because each belongs to the Lord and will answer to God. The principle carries into modern conscience issues that are not settled by direct command.",
      commonMistake: "Applying the passage to any disagreement whatsoever instead of distinguishing disputable matters from clear moral commands.",
      groupUse: "Give groups one modern scenario and ask whether Romans 14 applies."
    }
  ] },
  { genre: "Argument Diagramming", icon: ListTree, purpose: "Practice tracing thought-flow with propositions, phrases, relationships, and simple visual summaries.", exercises: [
    {
      reference: "1 Thessalonians 5:16-18",
      level: "Beginner",
      time: "15 min",
      skill: "Arcing or bracketing",
      prompt: "Diagram the three commands as a series and the final reason as the ground.",
      steps: ["Divide into four lines.", "Group rejoice, pray, and give thanks.", "Label the final clause as ground."],
      answer: "The three commands belong together as a series; the reason is that this pattern reflects God's will for believers in Christ.",
      commonMistake: "Labeling because as a result instead of a ground.",
      groupUse: "Have one pair arc it and another pair bracket it, then compare the same logic."
    },
    {
      reference: "Ephesians 4:31-32",
      level: "Beginner",
      time: "15 min",
      skill: "Contrast",
      prompt: "Trace the contrast between what is put away and what is practiced.",
      steps: ["List the old behaviors.", "List the new behaviors.", "Identify the gospel reason for forgiveness."],
      answer: "Paul contrasts destructive speech and attitudes with kindness, tenderheartedness, and forgiveness grounded in God's forgiveness in Christ.",
      commonMistake: "Treating the virtues as general niceness rather than gospel-shaped community life.",
      groupUse: "Ask learners to turn the diagram into a two-point outline."
    },
    {
      reference: "Colossians 3:1-4",
      level: "Intermediate",
      time: "20 min",
      skill: "Ground and inference",
      prompt: "Trace the command to seek things above and the reasons tied to union with Christ.",
      steps: ["Find the main command.", "Mark the reasons about being raised, dying, and hidden with Christ.", "Summarize the flow."],
      answer: "Because believers have been raised with Christ and their life is hidden with Him, they are to seek and set their minds on the things above.",
      commonMistake: "Separating the command from the identity statements that ground it.",
      groupUse: "Give each group one relationship label to defend from the text."
    }
  ] },
  { genre: "Law", icon: Scale, purpose: "Practice moving from ancient command form to protected value, covenant setting, and Christ-shaped application.", exercises: [
    {
      reference: "Leviticus 19:9-18",
      level: "Beginner",
      time: "20 min",
      skill: "Protected values",
      prompt: "List the values protected by the commands.",
      steps: ["Group commands by worship, justice, speech, and neighbor love.", "Find repeated holiness language.", "Write one enduring value."],
      answer: "The commands protect holiness, generosity, justice, truthfulness, and neighbor love.",
      commonMistake: "Treating the laws as random rules instead of a portrait of holy community life.",
      groupUse: "Assign each table one value and ask for a modern equivalent."
    },
    {
      reference: "Deuteronomy 22:8",
      level: "Beginner",
      time: "10 min",
      skill: "Principlizing",
      prompt: "Move from roof parapet to enduring principle.",
      steps: ["Explain the ancient setting.", "Name the protected value.", "Apply the value in a modern setting."],
      answer: "The ancient form changes, but the enduring value is proactive neighbor protection.",
      commonMistake: "Either copying the form woodenly or dismissing the law because modern roofs differ.",
      groupUse: "Ask for modern examples in homes, churches, workplaces, and online spaces."
    },
    {
      reference: "Exodus 20:8-11",
      level: "Intermediate",
      time: "20 min",
      skill: "Command and reason",
      prompt: "Observe the command, who is included, and the creation reason.",
      steps: ["List who receives rest.", "Find the stated theological reason.", "Ask what the command reveals about God and human limits."],
      answer: "The Sabbath command protects worship, rest, dependence, and justice for the whole household because God Himself anchors time in creation.",
      commonMistake: "Reducing the command either to bare legalism or to vague self-care.",
      groupUse: "Discuss what the command protects for people with little social power."
    },
    {
      reference: "Deuteronomy 24:17-22",
      level: "Intermediate",
      time: "18 min",
      skill: "Memory and mercy",
      prompt: "Trace justice for the vulnerable and the reason grounded in Israel's memory.",
      steps: ["Identify vulnerable groups.", "Notice harvest practices.", "Explain how redemption memory grounds mercy."],
      answer: "Israel's memory of slavery and redemption becomes the reason to protect the sojourner, fatherless, and widow through concrete justice.",
      commonMistake: "Treating mercy as optional generosity rather than covenant-shaped justice.",
      groupUse: "Ask what kind of community memory should shape Christian mercy today."
    }
  ] },
  { genre: "Parables", icon: MessageCircle, purpose: "Practice finding audience, occasion, surprise, central truth, and demanded response without over-allegorizing.", exercises: [
    {
      reference: "Luke 15:11-32",
      level: "Beginner",
      time: "20 min",
      skill: "Audience and reversal",
      prompt: "Identify the audience, reversal, and demanded response.",
      steps: ["Read the setup in Luke 15:1-2.", "Track both sons.", "Ask which hearer is being confronted."],
      answer: "The parable exposes resentment and invites joy over repentant sinners.",
      commonMistake: "Focusing only on the younger son and missing the older brother's connection to Jesus' critics.",
      groupUse: "Assign one group the younger son, one the father, and one the older son."
    },
    {
      reference: "Matthew 13:44-46",
      level: "Beginner",
      time: "10 min",
      skill: "Central comparison",
      prompt: "Find the central comparison.",
      steps: ["Identify what is compared to the kingdom.", "Notice joy and value.", "State the main response."],
      answer: "The kingdom is worth joyful, total reorientation of value and allegiance.",
      commonMistake: "Debating incidental details about treasure law while missing the central comparison.",
      groupUse: "Ask each person to name what the parable says the kingdom is worth."
    },
    {
      reference: "Luke 18:9-14",
      level: "Beginner",
      time: "15 min",
      skill: "Stated purpose",
      prompt: "Use Luke's introduction to identify the target and response.",
      steps: ["Read the opening purpose statement.", "Compare the two prayers.", "State the reversal."],
      answer: "Jesus confronts self-righteous contempt and commends humble dependence on God's mercy.",
      commonMistake: "Turning the tax collector into a new performance model instead of seeing humble mercy as the point.",
      groupUse: "Ask how the introduction controls the whole parable."
    },
    {
      reference: "Matthew 20:1-16",
      level: "Intermediate",
      time: "20 min",
      skill: "Unexpected generosity",
      prompt: "Trace expectation, complaint, and the landowner's surprising generosity.",
      steps: ["Track who works when.", "Notice the complaint.", "Explain how the ending reverses normal expectations."],
      answer: "The parable exposes resentment toward grace and shows the kingdom's generosity as God's right, not human entitlement.",
      commonMistake: "Reading the parable as a wage policy rather than a kingdom story about grace and envy.",
      groupUse: "Have learners identify where they feel the story is unfair and why."
    }
  ] },
  { genre: "Prophecy", icon: Eye, purpose: "Practice distinguishing classical and apocalyptic prophecy, reading symbols carefully, and keeping Christ-centered hope in view.", exercises: [
    {
      reference: "Amos 5:18-24",
      level: "Beginner",
      time: "18 min",
      skill: "Classical prophecy",
      prompt: "Read this as covenant critique before prediction.",
      steps: ["Identify the false confidence.", "Notice worship and justice language.", "State the demanded response."],
      answer: "The oracle confronts false worship and injustice. The response is repentance and justice, not date-setting.",
      commonMistake: "Treating the day of the Lord only as a future timeline item while ignoring the covenant indictment.",
      groupUse: "Ask what religious activity the passage critiques and what God requires."
    },
    {
      reference: "Daniel 7:9-14",
      level: "Intermediate",
      time: "25 min",
      skill: "Apocalyptic vision",
      prompt: "Mark vision elements, heavenly court, and kingdom transfer.",
      steps: ["List symbolic figures and scenes.", "Notice the heavenly court.", "Trace the kingdom transfer."],
      answer: "The vision reveals heavenly judgment and the final kingdom given through the Son of Man figure.",
      commonMistake: "Speculating about symbols while skipping the vision's main movement toward judgment and God's kingdom.",
      groupUse: "Assign one group beasts, one group court, and one group Son of Man movement."
    },
    {
      reference: "Isaiah 1:10-20",
      level: "Beginner",
      time: "18 min",
      skill: "Covenant lawsuit",
      prompt: "Notice charge, worship critique, repentance, and promise.",
      steps: ["Mark the accusation.", "Identify rejected worship.", "List the commands for repentance and justice."],
      answer: "The prophecy exposes worship divorced from justice and calls for repentance, cleansing, and care for the vulnerable.",
      commonMistake: "Using the passage only to criticize ritual without seeing God's call to repentance and restoration.",
      groupUse: "Ask what worship practices can become hollow when justice is absent."
    },
    {
      reference: "Revelation 12:1-17",
      level: "Advanced",
      time: "30 min",
      skill: "Symbolic conflict",
      prompt: "Trace woman, child, dragon, wilderness, war, and remnant witness.",
      steps: ["List symbols without decoding too quickly.", "Follow the conflict sequence.", "Ask how the chapter frames the church's endurance."],
      answer: "The chapter presents the cosmic conflict behind history: the dragon opposes Christ and His people, but God's purposes prevail and His faithful witnesses endure.",
      commonMistake: "Making one symbol the whole point while missing the chapter's conflict, protection, and faithful witness.",
      groupUse: "Use the decision tree for apocalyptic prophecy before discussing symbol meanings."
    }
  ] },
  { genre: "Wisdom", icon: Compass, purpose: "Practice reading wisdom as discernment, character formation, and reverent trust rather than mechanical formulas.", exercises: [
    {
      reference: "Proverbs 26:4-5",
      level: "Beginner",
      time: "10 min",
      skill: "Situational discernment",
      prompt: "Explain why both sayings can be wise.",
      steps: ["Compare the two commands.", "Identify the danger each one avoids.", "Name the role of discernment."],
      answer: "Wisdom discerns whether answering a fool will dignify folly or expose folly.",
      commonMistake: "Assuming Proverbs contradicts itself instead of training situational judgment.",
      groupUse: "Ask for two modern scenarios: one where silence is wise and one where response is wise."
    },
    {
      reference: "Ecclesiastes 3:1-8",
      level: "Beginner",
      time: "12 min",
      skill: "Poetic rhythm",
      prompt: "Observe the poem's repeated rhythm and limits.",
      steps: ["Mark the repeated pattern.", "List the contrasts.", "Ask what the poem says about human control."],
      answer: "The poem teaches human life as season-bound under God's sovereignty, not human control.",
      commonMistake: "Reading it as permission to do anything at the right time instead of a meditation on limits and seasons.",
      groupUse: "Ask learners which pair feels hardest to accept and why."
    },
    {
      reference: "Job 2:11-13; 42:7-9",
      level: "Intermediate",
      time: "20 min",
      skill: "Speaker evaluation",
      prompt: "Compare the friends' silence with God's later evaluation of their speech.",
      steps: ["Observe what the friends do well first.", "Notice God's evaluation later.", "Ask how this affects quoting Job's friends."],
      answer: "The friends begin with compassionate presence but later speak wrongly about God and suffering. Their words must be read through the book's final evaluation.",
      commonMistake: "Quoting every statement in Job as if every speaker is equally trustworthy.",
      groupUse: "Discuss what wise comfort sounds like before explanations begin."
    },
    {
      reference: "Proverbs 10:19; 15:1; 18:21",
      level: "Beginner",
      time: "15 min",
      skill: "Theme synthesis",
      prompt: "Synthesize several proverbs about speech.",
      steps: ["Name the speech pattern each proverb highlights.", "Compare restraint, gentleness, and power.", "Write one character-forming principle."],
      answer: "Wisdom trains speech that is restrained, gentle, life-giving, and aware of consequences.",
      commonMistake: "Treating each proverb as a slogan instead of letting repeated themes form character.",
      groupUse: "Have each person write one speech habit to practice this week."
    }
  ] }
];

const decisionTrees = [
  { title: "What Genre Am I Reading?", steps: ["Is it arranged as lines/images? Poetry or Wisdom.", "Is it telling selected events? Historical Narrative, Gospels, or Acts.", "Is it a letter argument? Epistle.", "Is it covenant instruction? Law.", "Is it a kingdom story from Jesus? Parable.", "Is it oracle, vision, symbol, or future hope? Prophecy."] },
  { title: "Classical or Apocalyptic Prophecy?", steps: ["Is the prophet preaching covenant crisis, justice, idolatry, repentance, or restoration? Start with classical prophecy rules.", "Is the passage a symbolic dream or vision with beasts, angels, time periods, or heavenly scenes? Start with apocalyptic rules.", "If both are present, identify the dominant frame and use the secondary rules as support."] },
  { title: "Description or Prescription?", steps: ["Does the text command, teach, or commend the action?", "Is the pattern repeated and reinforced elsewhere?", "Does the narrator evaluate the action positively or negatively?", "If not, treat it as description and seek the theological principle."] },
  { title: "Principlizing Bridge", steps: ["State the original meaning.", "Name the cultural and covenant distance.", "Write the enduring theological principle.", "Confirm with the wider canon.", "Apply faithfully in today's setting."] },
  { title: "Diagramming Method Choice", steps: ["Need the easiest visual start? Use phrasing.", "Need to trace logical relationships tightly? Use arcing.", "Need a clean outline from propositions? Use bracketing.", "Need basic preparation? Review grammar and conjunctions first."] }
];

const teacherSessionFormats = [
  {
    title: "10-Minute Warm-Up",
    plan: ["Read one short passage.", "Ask for three observations.", "Name the genre and one rule.", "End with one faithful application question."]
  },
  {
    title: "30-Minute Group Practice",
    plan: ["Teach one concept for five minutes.", "Work one Practice Library exercise in pairs.", "Compare suggested answers.", "Use the mistake audit before application."]
  },
  {
    title: "60-Minute Workshop",
    plan: ["Begin with context and genre.", "Assign groups different worksheet steps.", "Build one shared interpretation summary.", "Discuss application for individuals and the church."]
  },
  {
    title: "Sermon or Class Prep",
    plan: ["Use the Master Checklist as a planning audit.", "Use a genre page for guardrails.", "Use the Guided Workbook to collect notes.", "Use the Practice Library to design discussion."]
  }
];

const teacherFacilitationTips = [
  "Keep learners in the text before moving to opinions.",
  "Ask quieter people for observations before asking confident people for interpretation.",
  "When answers differ, ask which textual clue supports each answer.",
  "Use suggested answers as calibration, not as a script to memorize.",
  "End every session by naming one interpretive mistake the group avoided."
];

const teacherGuides = [
  {
    title: "General Hermeneutics",
    aim: "Help learners distinguish observation, interpretation, and application.",
    teach: "Use one familiar verse that is often quoted out of context, then rebuild the meaning from paragraph and book context.",
    practice: "Have the group mark repeated words, commands, connectors, and context clues before anyone gives an application.",
    discussion: ["What did we notice that we usually skip?", "How did context change the way we heard the verse?", "What would be a premature application?"],
    leaderNote: "Do not let the session become a lecture on method. Keep returning to one concrete passage."
  },
  {
    title: "Poetry",
    aim: "Help learners hear imagery, emotion, repetition, and worshipful movement.",
    teach: "Explain that poetry is not less true because it is emotional or image-rich. It teaches through compressed, memorable language.",
    practice: "Use Psalm 1 or Psalm 23 from the Practice Library and ask learners to cluster images before summarizing meaning.",
    discussion: ["What image carries the most weight?", "Who is speaking, and to whom?", "How does the poem form prayer or worship?"],
    leaderNote: "Resist flattening images too quickly. Let the group feel the poem's movement."
  },
  {
    title: "Historical Narrative",
    aim: "Help learners read stories as theological narrative instead of shallow moral examples.",
    teach: "Show the difference between plot movement, character contrast, narrator emphasis, and descriptive/prescriptive discernment.",
    practice: "Assign Genesis 22 or 2 Kings 5. One group maps plot; one group studies characters; one group asks what is descriptive and prescriptive.",
    discussion: ["Where is the turning point?", "What does the narrator emphasize?", "What should we imitate, avoid, or simply observe?"],
    leaderNote: "When someone says, 'This means we should...', ask how the narrator supports that conclusion."
  },
  {
    title: "Gospels & Acts",
    aim: "Help learners see Jesus' identity, fulfillment, discipleship, Spirit, and mission.",
    teach: "Explain that the Gospels are theological biography and Acts is Luke's second volume about Jesus' continuing mission.",
    practice: "Use Mark 2 or Acts 10. Ask one group to track conflict, one group to track revelation of Jesus, and one group to track response.",
    discussion: ["What does this reveal about Jesus?", "How does the episode move the story forward?", "What response is invited?"],
    leaderNote: "Keep Acts from becoming either a rulebook for every church practice or mere history trivia."
  },
  {
    title: "Epistles",
    aim: "Help learners trace pastoral argument and gospel-grounded obedience.",
    teach: "Show how letters address real situations through reasons, commands, contrasts, and theological grounding.",
    practice: "Use Ephesians 2:8-10 or Philippians 2:1-11. Ask learners to identify commands, reasons, and gospel logic.",
    discussion: ["What is the main command or claim?", "What reason supports it?", "How does the gospel ground the application?"],
    leaderNote: "Slow the group down when they jump from one verse to doctrine without following the paragraph."
  },
  {
    title: "Epistles Diagramming Unit",
    aim: "Help learners see how thoughts connect without being overwhelmed by technical terms.",
    teach: "Start with phrasing because it is the most visual and beginner-friendly, then show that arcing and bracketing answer the same relationship questions.",
    practice: "Use 1 Thessalonians 5:16-18. Divide the passage into lines, group the commands, and label the reason.",
    discussion: ["Which line is main?", "Which line supports another line?", "What relationship label best explains the connection?"],
    leaderNote: "Do not grade diagrams like math problems. Focus on whether the learner can explain the flow clearly."
  },
  {
    title: "Law",
    aim: "Help learners move from ancient command form to protected value and Christ-shaped application.",
    teach: "Explain that law reveals God's values for worship, holiness, justice, neighbor love, and community life.",
    practice: "Use Deuteronomy 22:8 or Leviticus 19:9-18. Ask groups to identify the ancient form, protected value, and modern expression.",
    discussion: ["What value does the command protect?", "What changes across covenant and culture?", "How does love fulfill this value today?"],
    leaderNote: "Keep the group from both legalistic copying and careless dismissal."
  },
  {
    title: "Parables",
    aim: "Help learners find audience, occasion, surprise, central truth, and response.",
    teach: "Explain that parables are not puzzles where every detail has a secret meaning; they are kingdom stories that confront hearers.",
    practice: "Use Luke 15 or Luke 18. Begin with the stated audience or occasion before interpreting the story.",
    discussion: ["Who first heard this?", "Where is the surprise?", "What response does Jesus demand?"],
    leaderNote: "When the group allegorizes minor details, ask what the story's main punch is."
  },
  {
    title: "Prophecy",
    aim: "Help learners distinguish classical prophecy from apocalyptic prophecy before interpreting details.",
    teach: "Show the difference between covenant lawsuit, restoration promise, symbolic vision, sequence, and repeat-and-enlarge patterns.",
    practice: "Compare Amos 5 and Daniel 7. Ask what kind of prophetic material each passage is before discussing meaning.",
    discussion: ["Is this classical or apocalyptic?", "What symbols or covenant charges appear?", "How does the passage center worship, judgment, hope, or Christ?"],
    leaderNote: "Keep the group from speculative headlines by asking what the passage itself explains."
  },
  {
    title: "Wisdom",
    aim: "Help learners read wisdom as discernment and character formation, not mechanical promises.",
    teach: "Compare Proverbs, Job, and Ecclesiastes so learners see normal patterns, suffering exceptions, and human limits.",
    practice: "Use Proverbs 26:4-5 or Ecclesiastes 3:1-8. Ask when the wise response changes by situation.",
    discussion: ["What kind of person does this text form?", "What situation does this wisdom fit?", "How do other wisdom books balance this passage?"],
    leaderNote: "If the group wants a formula, remind them that wisdom trains discernment before God."
  },
  {
    title: "Guided Workbook",
    aim: "Help learners build a summary without AI by using the site's interpretive prompts.",
    teach: "Explain that the workbook does not generate interpretation; it organizes the learner's own observations, genre work, and application.",
    practice: "Let each person fill one step, then compare answers and build one shared summary panel.",
    discussion: ["Which step was hardest?", "Which genre rule changed the interpretation?", "What confidence-check item still needs work?"],
    leaderNote: "Use the confidence checklist before copying, printing, or exporting the summary."
  }
];

const learningLevels = [
  {
    id: "beginner",
    title: "Beginner",
    icon: Compass,
    tagline: "Start small and stay text-centered.",
    summary: "Use the simplest path: learn the basic method, identify the genre, apply one or two core rules, and complete the Guided Workbook.",
    badge: "Start here"
  },
  {
    id: "intermediate",
    title: "Intermediate",
    icon: Clipboard,
    tagline: "Practice the full method with help.",
    summary: "Use the full genre rules, compare case studies, complete Practice Library exercises, and audit your work with the Master Checklist.",
    badge: "Build skill"
  },
  {
    id: "advanced",
    title: "Advanced",
    icon: ListTree,
    tagline: "Use deeper tools carefully.",
    summary: "Use argument diagramming, reference shelves, rhetorical features, prophecy tools, and teaching helps when the passage calls for them.",
    badge: "Go deeper"
  }
];

const learningLevelStyles = {
  beginner: {
    card: "bg-emerald-50 border-emerald-100",
    icon: "bg-emerald-600 text-white",
    badge: "bg-emerald-100 text-emerald-800 border-emerald-200",
    button: "bg-emerald-600 text-white hover:bg-emerald-700"
  },
  intermediate: {
    card: "bg-indigo-50 border-indigo-100",
    icon: "bg-indigo-600 text-white",
    badge: "bg-indigo-100 text-indigo-800 border-indigo-200",
    button: "bg-indigo-600 text-white hover:bg-indigo-700"
  },
  advanced: {
    card: "bg-purple-50 border-purple-100",
    icon: "bg-purple-600 text-white",
    badge: "bg-purple-100 text-purple-800 border-purple-200",
    button: "bg-purple-600 text-white hover:bg-purple-700"
  }
};

const getLearningLevelLabel = (level) =>
  learningLevels.find((item) => item.id === level)?.title || "Beginner";

const defaultLearningLevel = "beginner";

const normalizeLearningStep = (step) =>
  Array.isArray(step) ? { summary: null, items: step } : step;

const learningStepPresets = {
  default: {
    beginner: {
      summary: "Notice the clearest features before opening every tool.",
      items: ["Name the genre.", "Read the surrounding paragraph or scene.", "Choose one or two rules that obviously fit.", "Write one plain main idea sentence."]
    },
    intermediate: {
      summary: "Use the full genre method and compare your work with examples.",
      items: ["Work through the numbered rules.", "Use the case study as a model.", "Practice one similar passage.", "Check your interpretation against the Master Checklist."]
    },
    advanced: {
      summary: "Use specialized tools only when the passage needs them.",
      items: ["Trace structure, rhetoric, allusions, or argument flow.", "Use reference shelves and decision trees.", "Test complex claims against context and canon.", "Prepare teaching notes or group questions."]
    }
  },
  poetry: {
    beginner: {
      summary: "Read the poem slowly as prayer, worship, and image-rich speech.",
      items: ["Notice repeated words or refrains.", "Name the main emotion or movement.", "Ask who is speaking and to whom.", "Do not turn images into secret codes."]
    },
    intermediate: {
      summary: "Trace how the poem's form shapes its meaning.",
      items: ["Map parallel lines and image clusters.", "Follow voice shifts and emotional turns.", "Compare the psalm with similar laments or praises.", "Let the whole poem guide application."]
    },
    advanced: {
      summary: "Connect the poem to canon and Christ without flattening its original voice.",
      items: ["Study superscriptions, setting, and canonical placement.", "Trace allusions and recurring biblical images.", "Connect responsibly to Christ, worship, and hope.", "Use poetic structure in teaching or preaching."]
    }
  },
  history: {
    beginner: {
      summary: "Follow the story before drawing lessons from it.",
      items: ["Identify setting, characters, conflict, and resolution.", "Ask what the narrator emphasizes.", "Distinguish what happened from what is commanded.", "Avoid moralizing every character detail."]
    },
    intermediate: {
      summary: "Read the episode within the book and covenant storyline.",
      items: ["Trace plot movement and repeated themes.", "Compare speeches, prayers, songs, and narrator comments.", "Locate the scene within covenant promises and failures.", "Use background details to clarify, not control, the text."]
    },
    advanced: {
      summary: "Move from narrative theology to Christ and canon carefully.",
      items: ["Test typology against biblical confirmation.", "Connect the story to the whole redemptive movement.", "Compare character contrasts and narrative irony.", "Prepare applications that respect the story's level and location."]
    }
  },
  gospelsActs: {
    beginner: {
      summary: "Watch what each episode reveals about Jesus and response.",
      items: ["Name the scene, conflict, and response.", "Ask what this reveals about Jesus, the kingdom, or the Spirit.", "Notice who recognizes or resists Jesus.", "Do not flatten Acts into automatic rules for every church situation."]
    },
    intermediate: {
      summary: "Read each episode in the Gospel or Acts storyline.",
      items: ["Follow each Gospel's portrait of Jesus.", "Compare parallel accounts without erasing emphases.", "Track fulfillment, discipleship, resurrection, and mission.", "Ask whether Acts is describing, prescribing, or modeling wisdom."]
    },
    advanced: {
      summary: "Trace fulfillment and mission across Luke-Acts and the canon.",
      items: ["Study Old Testament echoes and fulfillment patterns.", "Trace movement from Jesus to Spirit-empowered witness.", "Watch irony, dialogue, geography, and characterization.", "Use background cautiously to clarify the text."]
    }
  },
  epistles: {
    beginner: {
      summary: "Begin with letters as real pastoral communication.",
      items: ["Identify sender, audience, and occasion.", "Follow the paragraph before using technical tools.", "Use grammar basics and phrasing first.", "Look for commands and the reasons that support them."]
    },
    intermediate: {
      summary: "Practice paragraph logic and gospel-grounded application.",
      items: ["Trace the whole-letter movement.", "Use phrasing practice before arcing or bracketing.", "Work the Romans 12 case study.", "Cross the principlizing bridge before applying."]
    },
    advanced: {
      summary: "Use diagramming and rhetorical forms when the argument is dense.",
      items: ["Try arcing and bracketing for argument flow.", "Use relationship and phrasing reference shelves.", "Recognize chiasm, inclusio, diatribe, lists, hymns, and doxologies.", "Turn diagrams into clear theological summaries."]
    }
  },
  law: {
    beginner: {
      summary: "Look for the value a command protects.",
      items: ["Name the command and original setting.", "Ask what worship, justice, holiness, or neighbor-love value is protected.", "Notice whether it is civil, ceremonial, moral, or mixed.", "Avoid copying or dismissing too quickly."]
    },
    intermediate: {
      summary: "Move through covenant context toward faithful application.",
      items: ["Compare the law with surrounding commands.", "Ask how the New Testament treats this value.", "Use the principlizing bridge carefully.", "Apply the protected value in a Christ-shaped way."]
    },
    advanced: {
      summary: "Study law within covenant, canon, and biblical theology.",
      items: ["Trace creation, exodus, sanctuary, covenant, and kingdom themes.", "Compare similar laws across the Pentateuch.", "Distinguish continuity, fulfillment, and transformation.", "Teach the law as revelation of God's character."]
    }
  },
  parables: {
    beginner: {
      summary: "Find the audience, occasion, surprise, and main point.",
      items: ["Ask why Jesus told this story here.", "Name the main contrast or twist.", "Look for the response Jesus wants.", "Avoid assigning secret meaning to every detail."]
    },
    intermediate: {
      summary: "Read the parable within Jesus' kingdom teaching.",
      items: ["Track setting, audience, conflict, and ending.", "Compare related parables carefully.", "Notice reversal, exaggeration, and shock.", "State the central truth in one sentence."]
    },
    advanced: {
      summary: "Use parables to teach confrontation and invitation.",
      items: ["Study Old Testament background images.", "Trace how the parable exposes hearers.", "Connect kingdom truth to Christ and discipleship.", "Design application that preserves the parable's force."]
    }
  },
  prophecy: {
    beginner: {
      summary: "First identify what kind of prophecy you are reading.",
      items: ["Ask whether it is classical or apocalyptic.", "Notice judgment, hope, covenant, vision, or symbolic sequence.", "Let Scripture explain symbols when it does.", "Avoid headline-driven speculation."]
    },
    intermediate: {
      summary: "Read symbols, time, structure, and fulfillment carefully.",
      items: ["Trace vision scenes and repeated patterns.", "Use the Prophetic Symbol Dictionary when symbols are central.", "Watch Old Testament quotations, allusions, and echoes.", "Compare near, typological, and final fulfillment."]
    },
    advanced: {
      summary: "Study prophetic rhetoric and apocalyptic structure.",
      items: ["Look for chiasm, recapitulation, throne scenes, covenant lawsuits, and symbolic geography.", "Compare Daniel, Revelation, and the prophets canonically.", "Test interpretations against the text's own explanations.", "Keep Christ, worship, judgment, and hope central."]
    }
  },
  wisdom: {
    beginner: {
      summary: "Read wisdom as formation, not as a formula.",
      items: ["Ask what kind of person this text trains you to become.", "Notice whether it is proverb, dialogue, reflection, or lament.", "Read neighboring sayings or speeches.", "Avoid treating every proverb as an unconditional promise."]
    },
    intermediate: {
      summary: "Compare Proverbs, Job, and Ecclesiastes.",
      items: ["Ask what situation the wisdom fits.", "Balance normal patterns with suffering and human limits.", "Track speakers and arguments in Job.", "Apply wisdom with discernment before God."]
    },
    advanced: {
      summary: "Connect wisdom to creation, fear of the Lord, and Christ.",
      items: ["Trace creation order, limits, justice, and mystery.", "Compare wisdom with law, poetry, and prophecy.", "Study canonical tensions without forcing easy answers.", "Teach wisdom as character formation in God's world."]
    }
  },
  diagramming: {
    beginner: {
      summary: "Start with grammar basics and phrasing.",
      items: ["Find the main clause.", "Break the passage into short thought lines.", "Indent supporting phrases.", "State the main idea before labeling every relationship."]
    },
    intermediate: {
      summary: "Practice before adding more labels.",
      items: ["Complete the phrasing practice page.", "Use 1 Thessalonians 5:16-18 for repetition.", "Compare your work with the suggested answer.", "Use Romans 12 only after you understand the simpler passage."]
    },
    advanced: {
      summary: "Use arcing, bracketing, and relationship labels for dense arguments.",
      items: ["Divide propositions carefully.", "Label support and main idea relationships.", "Use arcing or bracketing to group the flow.", "Consult the relationship shelves when stuck."]
    }
  }
};

const LearningSteps = ({ steps = learningStepPresets.default, title = "Learning Ladder", intro = "Use the level that fits your current confidence. Nothing is locked; the labels simply show what to do first." }) => (
  <div className="bg-white border border-slate-200 rounded-2xl p-5 md:p-6 shadow-sm my-8">
    <div className="mb-4">
      <strong className="text-indigo-950 block text-xl">{title}</strong>
      <p className="text-sm text-slate-600 leading-relaxed mt-1">{intro}</p>
    </div>
    <div className="grid lg:grid-cols-3 gap-4">
      {learningLevels.map((level) => {
        const Icon = level.icon;
        const style = learningLevelStyles[level.id];
        const step = normalizeLearningStep(steps[level.id] || learningStepPresets.default[level.id]);
        return (
          <div key={level.id} className={`${style.card} border rounded-2xl p-4`}>
            <div className="flex items-start gap-3 mb-3">
              <div className={`${style.icon} w-10 h-10 rounded-xl flex items-center justify-center shrink-0`}>
                <Icon className="w-5 h-5" />
              </div>
              <div>
                <span className={`${style.badge} border rounded-full px-2 py-0.5 text-[10px] uppercase tracking-widest font-black`}>{level.badge}</span>
                <strong className="text-slate-950 block text-lg mt-1">{level.title}</strong>
              </div>
            </div>
            {step.summary && <p className="text-sm text-slate-700 leading-relaxed mb-3">{step.summary}</p>}
            <ul className="space-y-2 text-sm text-slate-700">
              {step.items.map((item) => (
                <li key={item} className="flex gap-2 items-start">
                  <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0 mt-0.5" />
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>
        );
      })}
    </div>
  </div>
);

const LearningLevelSelector = ({ value, onChange, compact = false }) => (
  <div className={compact ? "" : "my-5"}>
    <label className="block text-sm font-bold text-indigo-900 mb-3 uppercase tracking-wide">Choose Your Level</label>
    <div className="grid sm:grid-cols-3 gap-2">
      {learningLevels.map((level) => {
        const Icon = level.icon;
        const active = value === level.id;
        return (
          <button
            key={level.id}
            type="button"
            onClick={() => onChange(level.id)}
            className={`text-left rounded-xl border p-3 transition-all ${
              active ? "bg-indigo-600 text-white border-indigo-600 shadow-md" : "bg-white text-slate-700 border-slate-200 hover:border-indigo-300 hover:bg-indigo-50"
            }`}
          >
            <span className="flex items-center gap-2 font-black">
              <Icon className="w-4 h-4" />
              {level.title}
            </span>
            <span className={`block text-xs leading-relaxed mt-1 ${active ? "text-indigo-100" : "text-slate-500"}`}>{level.tagline}</span>
          </button>
        );
      })}
    </div>
  </div>
);

const defaultNextItems = [
  { label: "Practice Library", target: "practice-library", text: "Try a short exercise in the same genre." },
  { label: "Guided Workbook", target: "ai-interpreter", text: "Build a passage summary with prompts." },
  { label: "Master Checklist", target: "master-checklist", text: "Audit your interpretation before sharing." }
];

const WhereToGoNext = ({ navigate, title = "Where to Go Next", items = defaultNextItems }) => (
  <div className="no-print bg-slate-900 text-white rounded-2xl p-5 md:p-6 shadow-lg mt-10">
    <strong className="text-emerald-300 block text-lg mb-2">{title}</strong>
    <p className="text-sm text-slate-200 leading-relaxed mb-4">Use one next step instead of trying to master the whole guide at once.</p>
    <div className="grid md:grid-cols-3 gap-3">
      {items.map((item) => (
        <button
          key={item.target}
          type="button"
          onClick={() => navigate(item.target)}
          className="text-left bg-white/10 border border-white/10 rounded-xl p-4 hover:bg-white/15 transition-colors"
        >
          <strong className="block text-white mb-1">{item.label}</strong>
          <span className="text-xs text-slate-300 leading-relaxed">{item.text}</span>
        </button>
      ))}
    </div>
  </div>
);

const learningPathPageData = {
  beginner: {
    sectionNum: "1.1",
    eyebrow: "Learning Path",
    title: "Beginner Path",
    headline: "Learn the method without getting buried in details.",
    who: "This path is for someone who is new to biblical interpretation, unsure where to begin, or easily overwhelmed by charts, labels, and technical terms.",
    promise: "By the end, you should be able to identify a passage's genre, make careful observations, use one or two genre rules, avoid the most common mistakes, and build a simple interpretation summary.",
    route: [
      { title: "Start With the Basic Method", body: "Read General Hermeneutics for the big movement: observation, context, genre, interpretation, imagination, and application.", target: "intro", button: "Open General Hermeneutics" },
      { title: "Identify the Genre", body: "Use the genre overview pages to decide whether the passage is poetry, narrative, Gospels/Acts, epistle, law, parable, prophecy, or wisdom.", target: "decision-trees", button: "Open Decision Trees" },
      { title: "Use One or Two Core Rules", body: "Do not try to master every rule at once. Pick the rules that clearly fit the passage and answer the Ask / Look For / Avoid prompts.", target: "poetry", button: "Open a Genre Page" },
      { title: "Practice With Easier Exercises", body: "Use the Beginner filter in the Practice Library. Start with short passages and compare your answer with the suggested answer.", target: "practice-library", button: "Open Practice Library" },
      { title: "Build a Guided Summary", body: "Use the Guided Workbook at Beginner level. Let it organize your notes without generating interpretation for you.", target: "ai-interpreter", button: "Open Guided Workbook" }
    ],
    pages: [
      { label: "General Hermeneutics", target: "intro", note: "The basic method." },
      { label: "Decision Trees", target: "decision-trees", note: "Genre and method choices." },
      { label: "Practice Library", target: "practice-library", note: "Beginner exercises." },
      { label: "Guided Workbook", target: "ai-interpreter", note: "Summary builder." },
      { label: "Glossary", target: "glossary", note: "Definitions when terms feel unfamiliar." }
    ],
    practice: [
      "Psalm 1 for poetry basics: repetition, contrast, image, and main idea.",
      "Mark 2:1-12 for Gospels: scene, conflict, Jesus' identity, and response.",
      "1 Thessalonians 5:16-18 for Epistles: short commands and one grounding reason.",
      "Proverbs 26:4-5 for wisdom: discernment instead of formula."
    ],
    skipTitle: "Do Not Worry About Yet",
    skip: [
      "Arcing and bracketing. Start with plain observation and phrasing later.",
      "Dense relationship charts and symbol dictionaries unless a page tells you to use them.",
      "Trying to teach or preach the passage before writing a simple main idea.",
      "Solving every historical background question before reading the paragraph carefully."
    ],
    nextItems: [
      { label: "Guided Workbook", target: "ai-interpreter", text: "Build your first simple interpretation summary." },
      { label: "Practice Library", target: "practice-library", text: "Choose the Beginner filter and work one exercise." },
      { label: "Intermediate Path", target: "intermediate-path", text: "Move here after the beginner route feels comfortable." }
    ]
  },
  intermediate: {
    sectionNum: "1.2",
    eyebrow: "Learning Path",
    title: "Intermediate Path",
    headline: "Move from simple summaries to full genre-shaped interpretation.",
    who: "This path is for someone who knows the basic method but wants more confidence using genre rules, case studies, practice exercises, and interpretation checks.",
    promise: "By the end, you should be able to work through a whole genre page, compare your work with a case study, practice a similar passage, and audit your interpretation before applying it.",
    route: [
      { title: "Use the Full Genre Rules", body: "Read the whole genre page for your passage. Work through the numbered rules instead of only skimming the overview.", target: "poetry", button: "Open Genre Pages" },
      { title: "Compare the Case Study", body: "Open the matching case study and notice how the guide moves from observation to interpretation and application.", target: "poetry-case-study", button: "Open a Case Study" },
      { title: "Practice Repetition", body: "Use the Intermediate filter in the Practice Library. Practice the same kind of passage more than once.", target: "practice-library", button: "Open Practice Library" },
      { title: "Use Decision Trees When Stuck", body: "Use the decision trees for genre identification, prophecy type, description vs. prescription, and the principlizing bridge.", target: "decision-trees", button: "Open Decision Trees" },
      { title: "Audit With the Master Checklist", body: "Before teaching or exporting a summary, check observation, context, genre, theology, application, and common mistakes.", target: "master-checklist", button: "Open Master Checklist" }
    ],
    pages: [
      { label: "All Genre Pages", target: "poetry", note: "Full rule lists." },
      { label: "Case Studies", target: "poetry-case-study", note: "Worked examples." },
      { label: "Practice Library", target: "practice-library", note: "Intermediate repetition." },
      { label: "Decision Trees", target: "decision-trees", note: "When unsure what to do next." },
      { label: "Master Checklist", target: "master-checklist", note: "Final audit." }
    ],
    practice: [
      "Genesis 22:1-19 for narrative levels, plot movement, and theological emphasis.",
      "Acts 10:34-48 for Gospels/Acts mission movement and descriptive/prescriptive care.",
      "Philippians 2:1-11 for Epistles: argument flow, gospel grounding, and application.",
      "Amos 5:18-24 for classical prophecy: covenant warning, worship critique, and justice."
    ],
    skipTitle: "Do Not Worry About Yet",
    skip: [
      "Mastering every rhetorical form before you can explain the main argument.",
      "Using arcing and bracketing on every epistle passage. Use them when the logic is dense.",
      "Advanced prophecy structures before distinguishing classical and apocalyptic prophecy.",
      "Turning the Practice Library answers into scripts. Use them to calibrate your own work."
    ],
    nextItems: [
      { label: "Practice Library", target: "practice-library", text: "Use the Intermediate filter and practice one genre." },
      { label: "Master Checklist", target: "master-checklist", text: "Audit a finished interpretation." },
      { label: "Advanced Path", target: "advanced-path", text: "Move here when you need technical tools." }
    ]
  },
  advanced: {
    sectionNum: "1.3",
    eyebrow: "Learning Path",
    title: "Advanced Path",
    headline: "Use deeper tools when the passage calls for deeper tools.",
    who: "This path is for someone who is ready to analyze argument flow, grammar, rhetorical forms, prophecy structures, biblical allusions, and teaching strategy.",
    promise: "By the end, you should be able to use technical tools without letting the tools overpower the passage's plain context, authorial intent, genre, and theological center.",
    route: [
      { title: "Prepare With Grammar", body: "Use Grammar & Conjunctions to identify main clauses, subordinate clauses, phrases, modifiers, and connector clues.", target: "grammar-conjunctions", button: "Open Grammar" },
      { title: "Start Diagramming With Phrasing", body: "Use phrasing first because it makes main thoughts and supporting phrases visible without requiring every relationship label.", target: "phrasing", button: "Open Phrasing" },
      { title: "Add Arcing and Bracketing", body: "Use arcing and bracketing when an epistle passage has dense logical relationships that need visual grouping.", target: "arcing", button: "Open Arcing" },
      { title: "Use Reference Shelves Carefully", body: "Consult phrasing relationships, rhetorical forms, prophetic symbols, allusions, and decision trees when they clarify the text.", target: "phrasing-relationships", button: "Open Phrasing Relationships" },
      { title: "Turn Study Into Teaching", body: "Use Teacher & Small Group Mode to convert interpretation into teachable sessions, questions, and group practice.", target: "teacher-group", button: "Open Teacher Mode" }
    ],
    pages: [
      { label: "Grammar & Conjunctions", target: "grammar-conjunctions", note: "Line breaks and connectors." },
      { label: "Phrasing", target: "phrasing", note: "Best first diagramming method." },
      { label: "Arcing", target: "arcing", note: "Logical relationships." },
      { label: "Bracketing", target: "bracketing", note: "Argument grouping." },
      { label: "Prophecy", target: "prophecy", note: "Classical/apocalyptic tools." },
      { label: "Teacher Mode", target: "teacher-group", note: "Turn study into instruction." }
    ],
    practice: [
      "Romans 12:1-2 for Epistles: argument diagramming, gospel grounding, and application.",
      "Revelation 12:1-17 for symbolic conflict, Old Testament allusions, and apocalyptic structure.",
      "Daniel 7:9-14 for apocalyptic prophecy, throne-room imagery, judgment, and kingdom hope.",
      "Philippians 2:1-11 for rhetorical form, hymn/confession, and paraenetic argument."
    ],
    skipTitle: "Use Carefully",
    skip: [
      "Do not let technical labels replace the author's main point.",
      "Do not use rhetorical forms, chiasm, or symbol dictionaries to create meanings the passage does not support.",
      "Do not jump to advanced tools before context, genre, and observation are stable.",
      "Do not teach complex findings unless you can explain them in plain language."
    ],
    nextItems: [
      { label: "Grammar & Conjunctions", target: "grammar-conjunctions", text: "Prepare for careful diagramming." },
      { label: "Phrasing Practice", target: "phrasing-practice", text: "Practice before adding heavier tools." },
      { label: "Teacher Mode", target: "teacher-group", text: "Turn advanced study into teachable help." }
    ]
  }
};

const LearningPathPage = ({ level, navigate }) => {
  const path = learningPathPageData[level];
  const levelInfo = learningLevels.find((item) => item.id === level) || learningLevels[0];
  const Icon = levelInfo.icon;
  const style = learningLevelStyles[level] || learningLevelStyles.beginner;

  return (
    <div className="animate-in fade-in duration-500">
      <div className="mb-8">
        <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page {path.sectionNum}: {path.eyebrow}</div>
        <H1>{path.title}</H1>
      </div>

      <div className={`${style.card} border rounded-3xl p-6 md:p-8 shadow-sm mb-8`}>
        <div className="flex flex-col md:flex-row md:items-start gap-5">
          <div className={`${style.icon} w-14 h-14 rounded-2xl flex items-center justify-center shrink-0 shadow-sm`}>
            <Icon className="w-7 h-7" />
          </div>
          <div>
            <span className={`${style.badge} border rounded-full px-3 py-1 text-xs uppercase tracking-widest font-black`}>{levelInfo.badge}</span>
            <h2 className="text-2xl md:text-3xl font-black text-slate-950 mt-3 mb-3">{path.headline}</h2>
            <p className="text-slate-700 leading-relaxed mb-3">{path.who}</p>
            <p className="text-sm md:text-base text-slate-700 leading-relaxed bg-white/70 border border-white rounded-xl p-4">
              <strong className="text-indigo-950 block mb-1">Goal</strong>
              {path.promise}
            </p>
          </div>
        </div>
      </div>

      <H2>Step-by-Step Route</H2>
      <div className="space-y-4 mb-10">
        {path.route.map((step, index) => (
          <div key={step.title} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
            <div className="grid md:grid-cols-[56px_1fr_auto] gap-4 items-start">
              <span className={`${style.icon} w-10 h-10 rounded-full flex items-center justify-center text-sm font-black shrink-0`}>{index + 1}</span>
              <div>
                <strong className="text-indigo-950 block text-xl mb-2">{step.title}</strong>
                <p className="text-sm md:text-base text-slate-700 leading-relaxed">{step.body}</p>
              </div>
              <button
                type="button"
                onClick={() => navigate(step.target)}
                className={`${style.button} rounded-xl px-4 py-3 text-sm font-black transition-colors whitespace-nowrap`}
              >
                {step.button}
              </button>
            </div>
          </div>
        ))}
      </div>

      <H2>Use These Pages</H2>
      <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4 mb-10">
        {path.pages.map((page) => (
          <button
            key={page.label}
            type="button"
            onClick={() => navigate(page.target)}
            className="text-left bg-white border border-slate-200 rounded-2xl p-5 shadow-sm hover:border-indigo-300 hover:shadow-md transition-all"
          >
            <strong className="text-indigo-950 block text-lg mb-2">{page.label}</strong>
            <span className="text-sm text-slate-700 leading-relaxed">{page.note}</span>
          </button>
        ))}
      </div>

      <div className="grid lg:grid-cols-2 gap-5">
        <div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-5 shadow-sm">
          <strong className="text-emerald-950 block text-xl mb-4">Practice Next</strong>
          <ul className="space-y-3 text-sm text-slate-700">
            {path.practice.map((item) => (
              <li key={item} className="flex items-start gap-3">
                <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0 mt-0.5" />
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="bg-amber-50 border border-amber-100 rounded-2xl p-5 shadow-sm">
          <strong className="text-amber-950 block text-xl mb-4">{path.skipTitle}</strong>
          <ul className="space-y-3 text-sm text-slate-700">
            {path.skip.map((item) => (
              <li key={item} className="flex items-start gap-3">
                <Lightbulb className="w-4 h-4 text-amber-600 shrink-0 mt-0.5" />
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <WhereToGoNext navigate={navigate} items={path.nextItems} />
    </div>
  );
};

const generalHermeneuticsLevelData = {
  beginner: {
    sectionNum: "2.1",
    title: "Beginner General Hermeneutics",
    headline: "Learn the basic method before adding technical tools.",
    who: "This page is for someone who is new to Bible interpretation or who wants a simple route through the full General Hermeneutics page.",
    goal: "By the end, you should be able to begin with preunderstanding, then observe, interpret, imagine carefully, and apply the passage without feeling lost.",
    focus: [
      {
        title: "Preunderstanding",
        body: "Name the assumptions you bring to the passage, then let the author's intended meaning correct and guide you. Everyone brings cultural habits, church background, emotions, and expectations to the text.",
        prompt: "Simple question: What am I assuming before I let the passage speak?"
      },
      {
        title: "Observation",
        body: "Look carefully at repeated words, people, places, commands, contrasts, and reasons before explaining the passage.",
        prompt: "Simple question: What do I actually see in the text?"
      },
      {
        title: "Context",
        body: "Read the verse in its paragraph, the paragraph in its book, and the book in the whole Bible story.",
        prompt: "Simple question: What comes before and after this passage?"
      },
      {
        title: "Genre",
        body: "Identify what kind of literature you are reading so you use the right expectations.",
        prompt: "Simple question: Am I reading poetry, story, Gospel, letter, law, parable, prophecy, or wisdom?"
      },
      {
        title: "Main Idea and Simple Application",
        body: "State the passage's central point in one sentence, then ask what faithful response follows from that meaning.",
        prompt: "Simple template: Because this passage teaches ___, I should ___ in ___."
      }
    ],
    steps: [
      {
        title: "Acknowledge preunderstanding",
        body: "Name the assumptions, habits, emotions, and church background you bring to the passage. You are not trying to become neutral; you are trying to become teachable so the author's intended meaning can correct you.",
        actions: ["Write your first impression of the passage.", "Name one assumption you may be bringing to it.", "Ask what the author wanted the original audience to understand, believe, feel, or do.", "Hold your assumption loosely while you observe the text."],
        example: "A highly individualistic reader may assume every 'you' is singular, even when the author is addressing the church community.",
        avoid: "Do not assume familiarity equals understanding or begin with personal impression as the final meaning."
      },
      {
        title: "Pray and observe what the text says",
        body: "Observation asks, 'What does the text actually say?' Before explaining the passage, slow down and notice its words, people, actions, commands, reasons, and repeated ideas.",
        actions: ["Pray for humility and illumination.", "Mark repeated words or ideas.", "List people, places, commands, contrasts, and reasons.", "Ask the 5 W's and how."],
        example: "In John 15, repeated language about abiding shows that remaining in Christ is central to the passage.",
        avoid: "Do not rush to application before you have gathered observations.",
        details: [
          {
            title: "Prayer & Illumination",
            body: "Begin observation with dependence on the Holy Spirit. Prayer does not replace careful reading; it prepares you to read humbly.",
            lookFor: ["Biases you need to surrender.", "A teachable posture before the text.", "A willingness to let the passage correct you."],
            howTo: ["Pray briefly before marking anything.", "Ask God to help you see what is actually there.", "Then read slowly with a pencil or notes open."],
            example: "Before studying a familiar psalm, pray that familiarity will not make you skip what the psalm actually says."
          },
          {
            title: "The 5 W's and How",
            body: "Use simple reporter questions to gather facts before explaining meaning.",
            lookFor: ["Who is speaking or acting.", "What is happening or being argued.", "When and where the passage takes place.", "Why something happens and how it unfolds."],
            howTo: ["Write short answers in the margin.", "Do not solve every question yet.", "Let unanswered questions become things to study later."],
            example: "In John 3, noticing that Nicodemus comes by night gives you an observation to test in the rest of John's Gospel."
          },
          {
            title: "Repeated & Related Words",
            body: "Repetition is often the author's highlighter. Related words can also show the passage's main concern.",
            lookFor: ["Exact repeated words.", "Words from the same family.", "Repeated images, commands, or emotions."],
            howTo: ["Circle repeated words.", "Group related words together.", "Ask what subject keeps returning."],
            example: "In John 15, repeated language about abiding or remaining shows that union with Christ is central."
          },
          {
            title: "People, Places, Actions, Commands, and Reasons",
            body: "Basic observation starts with the visible furniture of the passage: who is there, where they are, what happens, what is commanded, and why.",
            lookFor: ["Names, groups, and speakers.", "Locations and movements.", "Commands, promises, warnings, and stated reasons."],
            howTo: ["Make a simple list.", "Separate what the text says from what you infer.", "Mark reasons introduced by words like for or because."],
            example: "In a Gospel healing story, list the needy person, the crowd, Jesus' action, and the response before drawing a lesson."
          },
          {
            title: "Comparisons, Contrasts, and Opposites",
            body: "Authors often clarify meaning by placing things side by side or against each other.",
            lookFor: ["Words like like, as, also, but, yet, and instead.", "Opposites such as light and darkness, wisdom and folly, flesh and Spirit.", "Two people, responses, or paths being compared."],
            howTo: ["Draw two columns when you see contrast.", "Ask what the contrast teaches.", "Do not flatten the difference too quickly."],
            example: "Romans 6:23 contrasts wages with gift and death with life."
          },
          {
            title: "Cause, Effect, and Purpose",
            body: "Observation should notice why something happens, what results from it, and what goal it serves.",
            lookFor: ["Cause words such as because, for, and since.", "Result words such as therefore and so.", "Purpose words such as so that and in order that."],
            howTo: ["Mark the connector word.", "Ask what thought comes before and after it.", "Write the relationship in your own words."],
            example: "John 3:16 moves from God's love to his giving of the Son, and then to the purpose of eternal life."
          },
          {
            title: "Definitions, Explanations, and Questions",
            body: "Sometimes the passage explains itself through definitions, descriptions, rhetorical questions, or direct answers.",
            lookFor: ["Words such as is, means, because, which, and that is.", "Questions the author asks and answers.", "Statements that explain a previous line."],
            howTo: ["Do not skip explanatory phrases.", "Write the question and answer in your notes.", "Let the author's own explanation guide you."],
            example: "Hebrews 11:1 begins by defining faith before giving examples of faith."
          }
        ]
      },
      {
        title: "Read the immediate context",
        body: "A verse belongs inside a paragraph, scene, argument, poem, or speech. Immediate context is usually the first guardrail against misunderstanding.",
        actions: ["Read the paragraph before and after.", "Ask what question, problem, or movement surrounds the passage.", "Notice whether the next verse explains the verse you are studying."],
        example: "Philippians 4:13 sits in a paragraph about contentment in need and plenty, not a promise of winning every challenge.",
        avoid: "Do not detach a sentence from the paragraph that gives it meaning."
      },
      {
        title: "Identify the genre",
        body: "Genre tells you how the passage communicates. Poetry, narrative, law, prophecy, parables, wisdom, Gospels, Acts, and epistles all need slightly different reading habits.",
        actions: ["Name the book and passage type.", "Ask how this genre normally communicates.", "Use the matching genre page for one or two basic rules."],
        example: "A proverb usually gives general wisdom, while a promise in a covenant speech works differently.",
        avoid: "Do not read every passage as if it were a direct command or a modern textbook paragraph."
      },
      {
        title: "State the main idea",
        body: "After observing context and genre, summarize the passage in one plain sentence. The main idea should come from the passage's central emphasis, not from a favorite detail.",
        actions: ["Ask what the passage is mainly about.", "Ask what it says about that subject.", "Write one sentence beginning, 'This passage teaches that...'"],
        example: "For a lament psalm, the main idea may include both honest grief and renewed trust in God.",
        avoid: "Do not make the main idea so vague that it could fit any passage."
      },
      {
        title: "Enter the passage carefully with imagination",
        body: "Imagination helps you slow down and enter the scene, emotion, or argument without inventing meaning. Let the text control what you picture, feel, and notice.",
        actions: ["Picture the setting when the genre invites it.", "Notice emotion, tension, and response.", "Keep every imagined detail accountable to the passage."],
        example: "In a Gospel scene, imagine the crowd, the need, and Jesus' response so the moment is not flattened.",
        avoid: "Do not use imagination to add details that change the meaning."
      },
      {
        title: "Write a simple application",
        body: "Application asks how the passage's meaning should shape faithful response today. Keep it concrete and connected to the text.",
        actions: ["Use the template: Because this passage teaches ___, I should ___ in ___.", "Name one response of belief, repentance, obedience, prayer, or hope.", "Place the application in a real setting."],
        example: "Because this passage teaches God's mercy toward repentant sinners, I should welcome repentant people with humility in my church relationships.",
        avoid: "Do not apply a passage in a way that ignores its original meaning."
      }
    ],
    route: [
      { label: "Read the Master Page Overview", target: "intro", text: "Use only the opening overview and the phase headings at first." },
      { label: "Use Decision Trees", target: "decision-trees", text: "Use the genre tree when you are unsure what kind of passage you are reading." },
      { label: "Try Beginner Practice", target: "practice-library", text: "Filter the Practice Library to Beginner and complete one short exercise." },
      { label: "Build a Guided Summary", target: "ai-interpreter", text: "Use the Guided Workbook at Beginner level and keep your answers short." }
    ],
    practice: [
      "Psalm 1: notice repeated contrasts and state the main idea in one sentence.",
      "Mark 2:1-12: identify the scene, conflict, Jesus' action, and response.",
      "1 Thessalonians 5:16-18: list the commands and the reason that supports them.",
      "Proverbs 26:4-5: ask why two nearby sayings might both be wise in different situations."
    ],
    cautionTitle: "Do Not Worry About Yet",
    cautions: [
      "Do not start with commentaries before making your own observations.",
      "Do not try to master every application model at once.",
      "Do not worry about Greek/Hebrew word studies, syntax labels, or rhetorical forms yet.",
      "Do not use arcing, bracketing, or prophecy tools until the basic method feels familiar."
    ],
    nextItems: [
      { label: "Guided Workbook", target: "ai-interpreter", text: "Build a simple summary from your own notes." },
      { label: "Beginner Path", target: "beginner-path", text: "Use the broader beginner route through the whole site." },
      { label: "Intermediate General", target: "general-intermediate", text: "Move here when the basics feel comfortable." }
    ]
  },
  intermediate: {
    sectionNum: "2.2",
    title: "Intermediate General Hermeneutics",
    headline: "Deepen observation, context, and application without losing clarity.",
    who: "This page is for someone who understands the basic method and wants to use the full General Hermeneutics page more carefully.",
    goal: "By the end, you should be able to deepen the same master method with translation comparison, context circles, genre controls, word studies, and principled application.",
    focus: [
      {
        title: "Historical Context",
        body: "Ask about the original audience, setting, problem, covenant location, and cultural background.",
        prompt: "Use background to clarify the passage, not to replace what the passage says."
      },
      {
        title: "Concentric Context Circles",
        body: "Move from the immediate verse to the paragraph, section, whole book, author, testament, and canon.",
        prompt: "Check whether your interpretation fits the nearest context before using distant cross-references."
      },
      {
        title: "Translation Comparison",
        body: "Compare a more formal translation with a more readable translation to spot wording, structure, and interpretation decisions.",
        prompt: "Ask: Where do the translations differ, and why might that matter?"
      },
      {
        title: "Repeated Words, Contrasts, and Cause/Effect",
        body: "Track repeated terms, opposing ideas, reasons, results, purposes, and turning points.",
        prompt: "Look for words like but, therefore, because, so that, for, and in order that."
      },
      {
        title: "Basic Word Studies",
        body: "Study key words in context instead of building meaning from a dictionary entry alone.",
        prompt: "Ask how this author uses the word in this paragraph, book, and similar contexts."
      },
      {
        title: "Principlizing Bridge and SPACEPETS",
        body: "Move from original meaning to a timeless theological principle, then use SPACEPETS to find concrete response categories.",
        prompt: "Ask: What truth carries forward, and what kind of response does it call for?"
      }
    ],
    steps: [
      {
        title: "Recheck preunderstanding and original audience",
        body: "Intermediate study begins by returning to preunderstanding and historical setting. Ask what you may be assuming and what the original audience needed to hear.",
        actions: ["Name the original audience if possible.", "Identify the setting, problem, or occasion.", "Write one modern assumption that could distort your reading."],
        example: "Before applying 1 Corinthians, remember Paul is addressing a real church with divisions, moral confusion, and worship problems.",
        avoid: "Do not treat the Bible as if every book was written directly to your modern setting first."
      },
      {
        title: "Compare translations carefully",
        body: "Translation comparison helps you notice wording, structure, and interpretive decisions. Use it to ask better questions, not to cherry-pick your favorite wording.",
        actions: ["Compare one formal translation with one readable translation.", "Notice repeated words, connector words, and paragraph breaks.", "Mark differences that affect interpretation."],
        example: "If one translation says 'flesh' and another says 'sinful nature,' ask what the original term may be emphasizing in context.",
        avoid: "Do not choose the translation that simply supports your preferred conclusion."
      },
      {
        title: "Observe repeated words, contrasts, cause/effect, and purpose",
        body: "Go beyond basic observation by tracing how the author develops thought. Repetition, contrast, reasons, results, and purposes often reveal the passage's structure.",
        actions: ["Circle repeated words and related ideas.", "Underline contrasts such as but, yet, instead, light and darkness.", "Mark cause, effect, and purpose words such as because, therefore, so that, and for."],
        example: "Romans often uses therefore, for, and but to show how Paul's argument moves from doctrine to response.",
        avoid: "Do not treat sentences as disconnected sayings when the author is building an argument.",
        details: [
          {
            title: "Bible Translations: Formal vs. Functional",
            body: "Translation comparison helps you see where wording, grammar, and interpretation decisions may affect observation.",
            lookFor: ["Differences in repeated words.", "Different connector words.", "Paragraph breaks or punctuation that shape the flow."],
            howTo: ["Compare one more formal translation with one more readable translation.", "Mark differences that affect meaning.", "Use differences as questions, not instant conclusions."],
            example: "If one translation repeats the same word and another varies it, ask whether the repetition matters in the passage."
          },
          {
            title: "The 5 W's and How",
            body: "Intermediate observation uses basic questions with more precision, especially when setting, speakers, and purpose shape meaning.",
            lookFor: ["Who speaks, acts, receives, or responds.", "What problem or argument is unfolding.", "When, where, why, and how details that affect interpretation."],
            howTo: ["Answer each question from the text first.", "Then note what background information might clarify.", "Keep observation separate from explanation."],
            example: "In Acts, asking where a speech occurs often helps you see the mission movement from Jerusalem toward the nations."
          },
          {
            title: "Repeated & Related Words",
            body: "Repeated words, related terms, and repeated ideas often reveal emphasis, structure, and theological concern.",
            lookFor: ["Exact repetition.", "Synonyms or related concepts.", "Repeated commands, images, emotions, or titles."],
            howTo: ["Group repeated words by theme.", "Ask whether repetition marks a section boundary.", "Notice whether repetition intensifies or develops the idea."],
            example: "In Philippians 2, repeated language about humility, mind, and exaltation helps trace the passage's movement."
          },
          {
            title: "Comparisons, Contrasts, and Opposites",
            body: "Comparison and contrast show how the author wants readers to evaluate two people, paths, behaviors, or realities.",
            lookFor: ["Connector words like but, yet, as, just as, also, and rather.", "Opposite ideas such as old/new, death/life, wisdom/folly, flesh/Spirit.", "Characters or groups set beside each other."],
            howTo: ["Make a two-column list.", "Ask what the author praises, warns against, or clarifies.", "Do not erase the tension too quickly."],
            example: "Romans often contrasts Adam and Christ, sin and grace, death and life."
          },
          {
            title: "Cause & Effect and Purpose",
            body: "Reasons, results, and purposes help you follow the author's logic instead of reading each sentence by itself.",
            lookFor: ["Reason words: for, because, since.", "Result words: therefore, so, then.", "Purpose words: so that, in order that, that."],
            howTo: ["Mark the connector.", "Identify the thought it connects.", "State the relationship in a short sentence."],
            example: "A command followed by for usually means the author gives a theological reason for obedience."
          },
          {
            title: "Literary Structure: Climax, Pivot, and Interchange",
            body: "Structure tracks how a passage moves. A climax rises to a high point, a pivot turns the direction, and interchange moves back and forth between speakers or themes.",
            lookFor: ["Rising intensity.", "A turning point or hinge.", "Alternating speeches, scenes, or ideas."],
            howTo: ["Mark section breaks.", "Look for a center or turning point.", "Ask how the structure supports the main idea."],
            example: "Esther turns on the king's sleepless night, which reverses the direction of the story."
          },
          {
            title: "Proportion and General-to-Specific",
            body: "The amount of space an author gives to something often signals importance. Authors may also move from a broad principle to examples, or from examples to a broad conclusion.",
            lookFor: ["Large sections devoted to one event or theme.", "A general statement followed by examples.", "Specific examples that build toward a principle."],
            howTo: ["Notice what receives the most attention.", "Track whether the passage narrows or broadens.", "Ask why the author spends time there."],
            example: "The Gospels devote major space to Jesus' final week, showing the centrality of his death and resurrection."
          },
          {
            title: "Definitions, Explanations, and Q&A",
            body: "A passage may interpret itself through definitions, explanations, descriptions, or rhetorical questions and answers.",
            lookFor: ["Definition words such as is or are.", "Explanatory clauses introduced by for or because.", "Questions followed by answers."],
            howTo: ["Let the author's explanation carry weight.", "Write the question and answer in your own words.", "Use definitions from the passage before importing outside ones."],
            example: "Romans 6 uses questions and answers to guide the reader through a possible misunderstanding."
          }
        ]
      },
      {
        title: "Trace concentric context circles",
        body: "Read outward from the closest context to the larger biblical context. The nearest context usually has the strongest control over meaning.",
        actions: ["Check the sentence and paragraph.", "Check the section and whole book.", "Then compare same-author and whole-Bible connections."],
        example: "Before using a distant cross-reference, ask how the paragraph itself explains the verse.",
        avoid: "Do not let a distant topical connection overpower the immediate context."
      },
      {
        title: "Identify genre controls before interpretation",
        body: "Before explaining the passage, ask how its genre shapes meaning and what mistakes that genre warns against.",
        actions: ["Name the genre.", "Open the matching genre page if needed.", "Choose the genre rules that directly fit the passage."],
        example: "A psalm should be read with attention to image, emotion, repetition, and worship before reducing it to propositions.",
        avoid: "Do not apply epistle logic, poetry, prophecy, and narrative in the same way."
      },
      {
        title: "Do basic word studies responsibly",
        body: "A word study helps when a key word is repeated, unclear, or central to the argument. Study actual usage in context rather than collecting possible meanings.",
        actions: ["Choose only key words.", "Ask how the word functions in this sentence.", "Compare use in the same book or author first."],
        example: "If studying 'justify' in Romans, prioritize Paul's argument in Romans before jumping to unrelated uses.",
        avoid: "Do not import every dictionary meaning into one verse."
      },
      {
        title: "Cross the principlizing bridge",
        body: "Move from the ancient setting to a timeless theological principle before applying the passage today. This protects against copying ancient forms too woodenly or dismissing commands too quickly.",
        actions: ["State what the text meant then.", "Identify differences between then and now.", "Write the enduring theological principle.", "Check that principle against the rest of Scripture."],
        example: "A culturally located instruction may still reveal a lasting principle about holiness, love, order, justice, or worship.",
        avoid: "Do not skip from ancient command to modern action without naming the principle."
      },
      {
        title: "Use SPACEPETS and application circles for concrete response",
        body: "After interpretation, use SPACEPETS and the application circles to make response concrete and appropriately broad.",
        actions: ["Ask whether there is a sin, promise, attitude, command, example, prayer, error, truth, or thanks.", "Ask whether the response is personal, family, church, society, mission, or Great Controversy related.", "Write one specific response."],
        example: "A passage may call first for a truth to believe and then for obedience in church relationships.",
        avoid: "Do not create applications that are disconnected from the passage's meaning."
      }
    ],
    route: [
      { label: "Open General Hermeneutics", target: "intro", text: "Work through the observation, interpretation, and application phases more fully." },
      { label: "Use the Master Checklist", target: "master-checklist", text: "Audit observation, context, genre, theology, and application." },
      { label: "Practice Repetition", target: "practice-library", text: "Use the Intermediate filter and practice one passage from two genres." },
      { label: "Use Decision Trees", target: "decision-trees", text: "Clarify genre, description/prescription, prophecy type, and application decisions." }
    ],
    practice: [
      "Genesis 22:1-19: trace context, repeated themes, and narrative development.",
      "Philippians 2:1-11: compare translations, mark cause/effect, and state the theological principle.",
      "Leviticus 19:9-18: move from ancient command to enduring value and modern application.",
      "Amos 5:18-24: distinguish historical setting, covenant warning, and continuing theological message."
    ],
    cautionTitle: "Watch the Balance",
    cautions: [
      "Do not turn every observation into a long word study.",
      "Do not let background information overpower the author's flow of thought.",
      "Do not skip genre just because the passage already feels familiar.",
      "Do not apply the text until you can state what it meant in its original setting."
    ],
    nextItems: [
      { label: "Master Checklist", target: "master-checklist", text: "Use it to audit a full interpretation." },
      { label: "Practice Library", target: "practice-library", text: "Practice the same skill in another genre." },
      { label: "Advanced General", target: "general-advanced", text: "Move here when you need deeper tools." }
    ]
  },
  advanced: {
    sectionNum: "2.3",
    title: "Advanced General Hermeneutics",
    headline: "Use deeper interpretive tools with humility and restraint.",
    who: "This page is for someone preparing to teach, preach, write, or work through difficult passages where structure, theology, and resources matter more.",
    goal: "By the end, you should be able to use technical tools under authorial intent so syntax, structure, theology, and resources serve the text rather than control it.",
    focus: [
      {
        title: "Syntax and Literary Structure",
        body: "Study how clauses, phrases, paragraphs, repetition, inclusio, chiasm, and argument movement shape meaning.",
        prompt: "Ask: How does the author arrange the passage to make the point clear?"
      },
      {
        title: "Word-Study Fallacies",
        body: "Avoid root fallacies, illegitimate totality transfer, selective evidence, and meanings that ignore immediate context.",
        prompt: "Ask: Is this meaning actually possible and likely here?"
      },
      {
        title: "Same-Author Cross-References",
        body: "Give special weight to how the same author uses words, themes, and arguments elsewhere.",
        prompt: "Start nearby: same paragraph, same book, same author, then wider canon."
      },
      {
        title: "Analogy of Faith",
        body: "Let clearer passages help interpret less clear passages while still respecting the unique contribution of the passage you are studying.",
        prompt: "Ask: Does my interpretation cohere with the whole counsel of Scripture?"
      },
      {
        title: "Theological Synthesis and Redemptive History",
        body: "Connect the passage to creation, fall, covenant, Christ, church, mission, judgment, restoration, and the Great Controversy where the text warrants it.",
        prompt: "Ask: Where does this passage stand in the unfolding biblical story?"
      },
      {
        title: "Commentaries and Resource Checking",
        body: "Consult trusted resources after you have observed the text, then compare their arguments rather than merely collecting conclusions.",
        prompt: "Ask: What evidence does this source give, and does the passage support it?"
      }
    ],
    steps: [
      {
        title: "Submit assumptions to the text and authorial intent",
        body: "Advanced tools must stay under the authority of authorial intent. Begin by naming your assumptions and submitting them to the passage.",
        actions: ["State your provisional reading.", "Name what could bias that reading.", "Ask what the author is actually doing in this unit."],
        example: "A favorite theological theme may be true but still not be the main point of this passage.",
        avoid: "Do not let technical tools justify a meaning the text does not support."
      },
      {
        title: "Trace syntax and clause relationships",
        body: "Advanced interpretation studies how clauses and phrases relate to one another. This helps you distinguish main assertions from supporting reasons, means, purposes, and results.",
        actions: ["Find the main clause or main command.", "Identify subordinate clauses and phrases.", "Label reasons, purposes, conditions, means, results, and contrasts."],
        example: "In an epistle, a command may be grounded in a theological reason introduced by for or therefore.",
        avoid: "Do not let technical grammar labels replace a plain explanation of the author's point.",
        details: [
          {
            title: "Main Clauses and Subordinate Clauses",
            body: "A main clause can stand as the backbone of a sentence. A subordinate clause depends on another clause and usually supplies support, reason, purpose, condition, or result.",
            lookFor: ["The main subject and verb.", "Commands or central assertions.", "Dependent clauses introduced by words such as because, if, when, so that, although, and since."],
            howTo: ["Underline the main clause first.", "Indent or bracket the subordinate material.", "Ask how the dependent clause supports the main thought."],
            example: "In Romans 12:1, 'present your bodies' carries the main exhortation, while 'by the mercies of God' gives the ground."
          },
          {
            title: "Phrases, Modifiers, and Connectors",
            body: "Phrases and modifiers add detail to a main thought. Connectors signal how one thought relates to another.",
            lookFor: ["Prepositional phrases such as by, in, through, with, and according to.", "Descriptive words that qualify a noun or action.", "Connectors such as for, therefore, but, so that, and because."],
            howTo: ["Ask what each phrase attaches to.", "Do not let a modifier float unattached.", "Use connector words as clues, then verify the relationship in context."],
            example: "The phrase 'by the renewing of your mind' explains the means by which transformation takes shape."
          },
          {
            title: "Clause Relationships",
            body: "Clause relationships show the logic of a passage: why, how, when, under what condition, with what result, or for what purpose.",
            lookFor: ["Ground, result, purpose, condition, means, concession, comparison, contrast, and inference.", "Repeated connector words.", "A command supported by a reason."],
            howTo: ["Label the relationship in plain English first.", "Ask whether the label explains the connection between both thoughts.", "Revise the label if the context points another direction."],
            example: "A because clause often gives ground, but context decides whether it is reason, explanation, or evidence."
          },
          {
            title: "Word-Study Warning Signs",
            body: "Advanced syntax often leads into word study. Use word studies only when a word is repeated, unclear, central, or debated.",
            lookFor: ["Key repeated words.", "Words that carry the argument.", "Terms whose meaning changes the interpretation."],
            howTo: ["Study usage in the immediate context first.", "Compare the same author before broader searches.", "Let context choose one likely meaning."],
            example: "Do not load every possible meaning of a word into one verse; choose the meaning that fits the sentence."
          }
        ]
      },
      {
        title: "Analyze literary structure",
        body: "Structure shows how the author arranged the passage. Look for repeated sections, pivots, climax, inclusio, chiasm, parallel panels, and argument movement.",
        actions: ["Mark repeated words or phrases at the beginning and end of a unit.", "Look for turning points or center points.", "Ask how the structure emphasizes the message."],
        example: "A chiasm may highlight the center of a passage, but only if the structure is clear and textually supported.",
        avoid: "Do not invent a structure that is neater than the passage itself.",
        details: [
          {
            title: "Literary Structure and Movement",
            body: "Literary structure asks how the passage is arranged and how it moves from beginning to end.",
            lookFor: ["Opening and closing markers.", "Repeated topics or phrases.", "A movement from problem to answer, command to reason, lament to hope, or vision to explanation."],
            howTo: ["Mark paragraph or scene boundaries.", "Write a short outline.", "Ask why the author arranged the material this way."],
            example: "A lament psalm may move from complaint to remembrance to renewed hope."
          },
          {
            title: "Chiasm, Inclusio, and Parallel Patterns",
            body: "Some passages use deliberate patterning. Chiasm mirrors ideas, inclusio bookends a unit, and parallelism places related lines or sections side by side.",
            lookFor: ["A-B-B-A or A-B-C-B-A patterns.", "A repeated phrase at the beginning and end of a section.", "Balanced or parallel lines, speeches, visions, or arguments."],
            howTo: ["Confirm the pattern with clear textual evidence.", "Ask what the center or bookends emphasize.", "Keep the structure simple enough to explain."],
            example: "Daniel and Revelation sometimes use patterned visions, but the pattern should arise from the text, not from a forced chart."
          },
          {
            title: "Clause Relationships",
            body: "Structure and syntax work together. A passage's outline should respect how clauses and paragraphs connect.",
            lookFor: ["Therefore, for, but, so that, if, because, and although.", "Main commands supported by reasons.", "Sections that repeat the same logic."],
            howTo: ["Use clause relationships to test your outline.", "Do not separate thoughts the grammar joins.", "Do not join thoughts the passage keeps distinct."],
            example: "In an epistle, a paragraph outline should follow the author's argument, not only the topics you prefer."
          },
          {
            title: "Word-Study Warning Signs",
            body: "Literary structure can keep word studies from becoming isolated. A word's meaning should fit the passage's movement and emphasis.",
            lookFor: ["Words repeated at structural turning points.", "Terms defined or explained by nearby lines.", "Words that carry a section's theme."],
            howTo: ["Ask how the word functions in the structure.", "Avoid root-based meanings that ignore the passage.", "Check whether the proposed meaning strengthens the author's flow."],
            example: "A repeated word near the beginning and end of a unit may be part of an inclusio, not a random repetition."
          }
        ]
      },
      {
        title: "Avoid word-study fallacies",
        body: "Advanced word study requires restraint. A word's root, history, or full range of meanings does not automatically determine its meaning in one verse.",
        actions: ["Prioritize immediate context.", "Check actual usage rather than root speculation.", "Choose the meaning that best fits this sentence and argument."],
        example: "A Greek or Hebrew root may be interesting, but usage in context is more important for interpretation.",
        avoid: "Do not commit illegitimate totality transfer by pouring every possible meaning into one occurrence."
      },
      {
        title: "Prioritize same-author cross-references",
        body: "When comparing Scripture with Scripture, start close. The same author often uses vocabulary, themes, and arguments in related ways.",
        actions: ["Check the same paragraph and book first.", "Then compare other writings by the same author.", "Only then move to broader canonical parallels."],
        example: "For Johannine language like light, life, truth, and abide, compare John's writings before broader topical searches.",
        avoid: "Do not use distant cross-references to silence the passage's own argument."
      },
      {
        title: "Use the analogy of faith responsibly",
        body: "The analogy of faith means Scripture coheres with Scripture. Clearer passages can help with less clear passages, but every passage still deserves to be heard in its own context.",
        actions: ["Identify what is clear in the passage itself.", "Compare with clearer biblical teaching.", "Ask whether your reading fits the whole counsel of Scripture."],
        example: "A difficult symbolic prophecy should be interpreted in harmony with clearer biblical teaching about Christ, judgment, worship, and hope.",
        avoid: "Do not flatten different passages as if they all say the same thing in the same way."
      },
      {
        title: "Build theological synthesis",
        body: "Theological synthesis asks how the passage contributes to the Bible's teaching about God, humanity, sin, covenant, Christ, Spirit, church, mission, judgment, and restoration.",
        actions: ["State the passage's doctrine in one sentence.", "Connect that doctrine to the passage's genre and context.", "Check whether the doctrine is confirmed elsewhere in Scripture."],
        example: "A narrative may teach theology through plot, dialogue, and divine action rather than through direct doctrinal statements.",
        avoid: "Do not extract doctrine in a way that ignores how the passage communicates."
      },
      {
        title: "Locate the passage in redemptive history and the Great Controversy",
        body: "Place the passage within the unfolding story of creation, fall, covenant, Christ, church, mission, judgment, and restoration. Where appropriate, notice how it reveals worship, allegiance, deception, vindication, and God's character.",
        actions: ["Ask where the passage stands in the biblical storyline.", "Ask how it points backward or forward in Scripture.", "Ask how it reveals God's character in the conflict between good and evil."],
        example: "Daniel's visions should be read in relation to God's kingdom, judgment, worship, and final restoration.",
        avoid: "Do not force a redemptive-historical or Great Controversy connection that the passage does not support."
      },
      {
        title: "Consult commentaries and resources last",
        body: "Use resources after you have done your own observation and interpretation. Good resources help test, sharpen, and correct your reading.",
        actions: ["Write your own summary first.", "Consult study Bibles, commentaries, lexicons, maps, or background tools.", "Compare the evidence each resource gives."],
        example: "A commentary is most useful when you can evaluate its argument from the passage instead of merely accepting its conclusion.",
        avoid: "Do not outsource interpretation to resources before wrestling with the text."
      }
    ],
    route: [
      { label: "Use the Full Master Page", target: "intro", text: "Return to the complete General Hermeneutics page as the central reference." },
      { label: "Study Grammar & Conjunctions", target: "grammar-conjunctions", text: "Use grammar tools when structure affects interpretation." },
      { label: "Use Advanced Epistles Tools", target: "phrasing", text: "Practice phrasing before arcing or bracketing dense arguments." },
      { label: "Use Teaching Helps", target: "teacher-group", text: "Convert advanced study into teachable questions and group practice." }
    ],
    practice: [
      "Romans 12:1-2: trace syntax, theological grounding, application, and church-shaped response.",
      "Daniel 7:9-14: compare apocalyptic structure, Old Testament allusions, and canonical hope.",
      "Revelation 12:1-17: test symbol interpretation against Scripture and literary structure.",
      "Psalm 42: connect poetry, lament, canon, Christ, and hope without flattening the original emotion."
    ],
    cautionTitle: "Use Carefully",
    cautions: [
      "Do not use advanced labels to make the passage sound more certain than it is.",
      "Do not use chiasm, typology, word studies, or cross-references to create unsupported meanings.",
      "Do not let commentaries replace your own observation and reasoning.",
      "Do not teach advanced findings unless you can explain their value in plain language."
    ],
    nextItems: [
      { label: "Grammar & Conjunctions", target: "grammar-conjunctions", text: "Use syntax tools where they clarify meaning." },
      { label: "Advanced Path", target: "advanced-path", text: "Follow the broader advanced route through the site." },
      { label: "Teacher Mode", target: "teacher-group", text: "Turn careful study into a lesson flow." }
    ]
  }
};

const GeneralHermeneuticsLevelCards = ({ navigate, compact = false }) => (
  <div className={`bg-white border border-slate-200 rounded-2xl shadow-sm ${compact ? "p-5 my-8" : "p-6 md:p-8 my-8"}`}>
    <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-3 mb-5">
      <div>
        <strong className="text-indigo-600 uppercase tracking-widest text-xs font-black">Choose Your Level</strong>
        <h2 className="text-2xl font-black text-slate-950 mt-1 mb-1">General Hermeneutics Learning Routes</h2>
        <p className="text-sm text-slate-600 leading-relaxed">The full page stays below as the master reference. These routes simply tell you what to focus on first.</p>
      </div>
      <button
        type="button"
        onClick={() => navigate("master-checklist")}
        className="rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-black text-indigo-900 hover:bg-indigo-100 transition-colors"
      >
        Open Master Checklist
      </button>
    </div>
    <div className="grid lg:grid-cols-3 gap-4">
      {[
        { level: "beginner", target: "general-beginner", title: "Beginner General", text: "Preunderstanding, observation, context, genre, main idea, careful imagination, and simple application." },
        { level: "intermediate", target: "general-intermediate", title: "Intermediate General", text: "Historical context, context circles, translation comparison, repeated words, word studies, and application bridge." },
        { level: "advanced", target: "general-advanced", title: "Advanced General", text: "Syntax, literary structure, word-study fallacies, cross-references, theology, redemptive history, and resources." }
      ].map((item) => {
        const level = learningLevels.find((entry) => entry.id === item.level);
        const Icon = level.icon;
        const style = learningLevelStyles[item.level];
        return (
          <button
            key={item.target}
            type="button"
            onClick={() => navigate(item.target)}
            className={`${style.card} text-left border rounded-2xl p-5 hover:shadow-md transition-all`}
          >
            <div className="flex items-center gap-3 mb-3">
              <div className={`${style.icon} w-10 h-10 rounded-xl flex items-center justify-center`}>
                <Icon className="w-5 h-5" />
              </div>
              <div>
                <span className={`${style.badge} border rounded-full px-2 py-0.5 text-[10px] uppercase tracking-widest font-black`}>{level.badge}</span>
                <strong className="block text-lg text-slate-950 mt-1">{item.title}</strong>
              </div>
            </div>
            <p className="text-sm text-slate-700 leading-relaxed mb-4">{item.text}</p>
            <span className="text-sm font-black text-indigo-800">Open route</span>
          </button>
        );
      })}
    </div>
  </div>
);

const generalHermeneuticsStepDetails = {
  "Acknowledge preunderstanding": [
    {
      title: "Name Your Starting Point",
      body: "Preunderstanding is the set of assumptions, memories, habits, and expectations you bring to a passage before you study it.",
      lookFor: ["A verse you already think you know.", "A doctrine, tradition, or experience that shapes your first reaction.", "A feeling of certainty before you have observed the text."],
      howTo: ["Write your first impression in one sentence.", "Name one assumption that may be shaping that impression.", "Hold that assumption loosely while the passage speaks."],
      example: "A reader may assume 'you' always means an individual, even when a letter is addressing the whole church."
    },
    {
      title: "Let Authorial Intent Correct You",
      body: "The goal is not to erase your background but to let the biblical author's intended meaning correct and guide your reading.",
      lookFor: ["Who wrote or spoke.", "Who first received the message.", "What response the passage appears to call for."],
      howTo: ["Ask what the author wanted the original audience to understand.", "Separate that question from what you personally feel first.", "Return to authorial intent whenever your application feels detached from the text."],
      example: "Before applying Philippians 4:13 to achievement, ask what Paul meant while discussing contentment in need and plenty."
    },
    {
      title: "Watch the Cultural Lens",
      body: "Culture can make some readings feel obvious even when the text points another direction.",
      lookFor: ["Individualistic assumptions.", "Modern political or social categories.", "Church phrases that may not be the passage's own language."],
      howTo: ["Ask how a first-century or ancient Israelite audience might hear the passage.", "Check whether the passage speaks to a community, not only to an individual.", "Let context test your first reading."],
      example: "Paul often writes to churches as communities, so a command may be corporate before it is merely private."
    }
  ],
  "Read the immediate context": [
    {
      title: "Start With the Paragraph",
      body: "Immediate context is the first guardrail against misunderstanding. A verse is usually explained by the paragraph around it.",
      lookFor: ["The sentence before and after.", "Repeated words in the paragraph.", "A question, problem, or command that frames the verse."],
      howTo: ["Read the paragraph aloud.", "Summarize the paragraph in one sentence.", "Ask how the verse contributes to that paragraph."],
      example: "Philippians 4:13 belongs to Paul's paragraph about contentment in both need and abundance."
    },
    {
      title: "Follow the Section Flow",
      body: "A paragraph also belongs inside a larger section. The section often shows why the paragraph appears where it does.",
      lookFor: ["Section headings in your Bible, but verify them.", "Repeated topics before and after.", "A movement from problem to response or teaching to application."],
      howTo: ["Read the larger section once.", "Ask what changes when the author moves into your paragraph.", "Note whether your passage begins, develops, or concludes a unit."],
      example: "Romans 12 begins a major application section after Paul's long explanation of God's mercies."
    },
    {
      title: "Avoid Context Mistakes",
      body: "Context can be ignored in two opposite ways: isolating a verse or drowning it in distant cross-references.",
      lookFor: ["A favorite verse quoted without the paragraph.", "A distant cross-reference used before the local context is clear.", "An application that does not fit the paragraph."],
      howTo: ["Use nearby context first.", "Move outward slowly.", "Only use distant passages after the immediate context is stable."],
      example: "Do not use a topical verse from another book to override what the paragraph itself is saying."
    }
  ],
  "Identify the genre": [
    {
      title: "Ask What Kind of Writing This Is",
      body: "Genre is the kind of literature you are reading. It tells you how the passage communicates.",
      lookFor: ["Poetry, narrative, Gospel, Acts, epistle, law, parable, prophecy, wisdom, or apocalyptic material.", "Features like commands, story movement, imagery, symbols, or argument logic.", "Whether the passage teaches directly or indirectly."],
      howTo: ["Name the book and passage type.", "Ask how this genre normally communicates.", "Choose only the genre rules that fit your passage."],
      example: "A proverb usually gives wisdom for normal life patterns; it should not be read like an unconditional promise."
    },
    {
      title: "Let Genre Set Expectations",
      body: "Different genres make meaning in different ways. Reading every passage the same way creates confusion.",
      lookFor: ["Images in poetry.", "Plot and dialogue in narrative.", "Logic and commands in epistles.", "Symbolic visions in apocalyptic prophecy."],
      howTo: ["Ask what the genre asks you to notice first.", "Use the matching genre page as a guide.", "Do not force one genre's rules onto another."],
      example: "A parable usually has a central punch, not equal symbolic meaning in every detail."
    },
    {
      title: "Where to Go Next",
      body: "Genre identification should send you to the right tools without overwhelming the study.",
      lookFor: ["The genre page in the sidebar.", "A case study that matches your passage type.", "The Guided Workbook's detected genre card."],
      howTo: ["Open the related genre page only if you need help.", "Pick one or two rules at first.", "Return to the passage and practice immediately."],
      example: "For Psalm 42, use the Poetry page and focus first on repetition, image clusters, and voice shifts."
    }
  ],
  "State the main idea": [
    {
      title: "Find the Subject",
      body: "The subject is what the passage is mainly talking about.",
      lookFor: ["Repeated words or themes.", "The main character, command, question, or problem.", "The idea that holds the paragraph together."],
      howTo: ["Ask, 'What is this passage mainly about?'", "Keep the answer short.", "Avoid choosing a small detail as the subject."],
      example: "In a lament psalm, the subject may be the believer's distress before God, not merely one image like tears or enemies."
    },
    {
      title: "Add the Complement",
      body: "The complement says what the passage teaches about the subject.",
      lookFor: ["The author's claim, command, warning, promise, or response.", "The passage's central movement.", "The result the author wants in the reader."],
      howTo: ["Ask, 'What does the passage say about that subject?'", "Join subject and complement into one sentence.", "Use language that fits the passage, not a generic slogan."],
      example: "Psalm 42 teaches that deep distress should be brought honestly to God while hope is repeatedly renewed in him."
    },
    {
      title: "Test the Summary",
      body: "A good main idea is specific enough to fit this passage and broad enough to account for the whole unit.",
      lookFor: ["Details your summary ignores.", "A summary that could fit almost any text.", "An application pretending to be the main idea."],
      howTo: ["Compare the summary with the whole paragraph.", "Revise it if a major detail does not fit.", "Keep it to one plain sentence."],
      example: "Instead of 'God is good,' say how this passage shows God's goodness."
    }
  ],
  "Enter the passage carefully with imagination": [
    {
      title: "Enter the Scene",
      body: "Imagination helps you slow down and inhabit the passage's world, especially in narrative, Gospel scenes, poetry, and prophecy.",
      lookFor: ["Setting, movement, emotion, tension, and response.", "What the characters see, fear, hope, or misunderstand.", "Images and sensory language the text actually gives."],
      howTo: ["Picture only what the passage supports.", "Move slowly through the scene.", "Ask how the scene prepares you to understand the point."],
      example: "In Mark 2, imagine the crowded house and the lowered man, but let Mark's details control the scene."
    },
    {
      title: "Feel the Text Without Rewriting It",
      body: "Biblical texts often aim at affections as well as ideas. Imagination helps you feel the weight of what is written.",
      lookFor: ["Grief, fear, joy, wonder, shame, hope, or conflict.", "Tone shifts.", "Words that create pressure or relief."],
      howTo: ["Name the emotion the passage creates.", "Ask why the author wants the reader to feel it.", "Connect emotion back to meaning."],
      example: "Psalm 42 should be felt as lament and hope, not flattened into a quick emotional fix."
    },
    {
      title: "Guardrails for Imagination",
      body: "Imagination serves interpretation only when it stays accountable to the text.",
      lookFor: ["Details you are adding without textual support.", "Speculation about motives the text does not reveal.", "A scene that changes the author's point."],
      howTo: ["Mark what the text says.", "Distinguish observation from possible inference.", "Do not build doctrine or application from invented details."],
      example: "Imagining the crowd around Jesus is useful; inventing a character's hidden motive may not be."
    }
  ],
  "Write a simple application": [
    {
      title: "Use the Meaning-to-Response Template",
      body: "Application should grow from meaning. A simple sentence can keep the connection clear.",
      lookFor: ["The passage's main idea.", "A response that fits the main idea.", "A real-life setting where obedience, faith, repentance, or hope is needed."],
      howTo: ["Use: Because this passage teaches ___, I should ___ in ___.", "Keep the response specific.", "Make sure the response fits the passage."],
      example: "Because this passage teaches God's mercy toward repentant sinners, I should welcome repentant people with humility in my church relationships."
    },
    {
      title: "SPACEPETS Basics",
      body: "SPACEPETS is a response finder. It helps you ask what kind of faithful response the passage may call for.",
      lookFor: ["Sin to confess.", "Promise to claim.", "Attitude to change.", "Command to obey.", "Example to follow or avoid.", "Prayer, error, truth, or thanks."],
      howTo: ["Use only the categories that fit the passage.", "Do not force all categories.", "Turn one fitting category into a concrete response."],
      example: "A passage may call first for a truth to believe before it calls for an action to perform."
    },
    {
      title: "Make It Concrete",
      body: "A faithful application should be specific enough to practice.",
      lookFor: ["A person, relationship, habit, church setting, or mission setting.", "A response that can be acted on this week.", "A prayer that matches the passage."],
      howTo: ["Name where the response belongs.", "Avoid vague words like 'be better.'", "Write one next step."],
      example: "Instead of 'love others,' write, 'I will reconcile with the person I have avoided.'"
    }
  ],
  "Recheck preunderstanding and original audience": [
    {
      title: "Recheck Your Assumptions",
      body: "Intermediate study returns to preunderstanding because deeper tools can still be guided by hidden assumptions.",
      lookFor: ["A conclusion you reached too quickly.", "A modern question the passage may not be answering.", "A theological category that may be true but not central here."],
      howTo: ["Write your provisional interpretation.", "Name what could bias it.", "Ask whether the text itself supports it."],
      example: "A passage about church unity may be weakened if read only as private spiritual advice."
    },
    {
      title: "Identify the Original Audience",
      body: "The original audience helps you hear the passage in its first setting before crossing into modern application.",
      lookFor: ["Named recipients.", "Historical situation.", "Problem, crisis, question, or occasion."],
      howTo: ["Use book introductions cautiously.", "Look inside the passage for audience clues.", "Ask what the audience needed to hear."],
      example: "1 Corinthians addresses a real church with divisions, moral confusion, and worship problems."
    },
    {
      title: "Watch Modern Blind Spots",
      body: "Modern readers may flatten ancient settings into familiar categories.",
      lookFor: ["Individualism, consumerism, political categories, or denominational assumptions.", "A tendency to skip communal or covenant language.", "Background claims that overpower the text."],
      howTo: ["Let the passage define the problem.", "Use background to clarify, not control.", "Ask how the first audience would hear the message."],
      example: "A household code should be read in its ancient setting before modern application is formed."
    }
  ],
  "Compare translations carefully": [
    {
      title: "Formal and Functional Translations",
      body: "Formal translations tend to preserve wording and structure. Functional translations aim to communicate meaning in natural English.",
      lookFor: ["Where formal translations sound less smooth.", "Where functional translations explain or smooth out structure.", "Places where wording affects interpretation."],
      howTo: ["Compare one formal and one functional translation.", "Mark differences without deciding too quickly.", "Ask what question the difference raises."],
      example: "A formal translation may preserve repeated wording that a functional translation varies for readability."
    },
    {
      title: "Wording Differences",
      body: "Different English renderings can reveal interpretive choices or ambiguity in the original language.",
      lookFor: ["Different verbs, nouns, pronouns, or connector words.", "Footnotes about alternate translations.", "Differences that change who acts or why."],
      howTo: ["List only meaningful differences.", "Check whether the difference changes the main idea.", "Use a study note or lexicon only after observing the context."],
      example: "If one translation says 'flesh' and another says 'sinful nature,' ask what the word means in that paragraph."
    },
    {
      title: "Paragraph Breaks and Flow",
      body: "Paragraph breaks are added by editors, but they can help you notice structure.",
      lookFor: ["Where translations divide paragraphs differently.", "A connector word at the start of a paragraph.", "A shift in topic, speaker, or command."],
      howTo: ["Compare paragraph breaks.", "Ask whether the flow supports the break.", "Do not treat headings as inspired text."],
      example: "A therefore at the start of a paragraph usually points back to a prior argument."
    }
  ],
  "Trace concentric context circles": [
    {
      title: "The Near-to-Far Order",
      body: "Context should move outward in circles. The closest context normally has the strongest interpretive control.",
      lookFor: ["Sentence, paragraph, section, book, author, testament, and whole canon.", "Repeated language in the same unit.", "A book-level theme that shapes the passage."],
      howTo: ["Start with the sentence and paragraph.", "Move to the section and whole book.", "Use wider biblical connections after the local context is clear."],
      example: "Before using a distant cross-reference, ask how the paragraph itself explains the verse."
    },
    {
      title: "Book Flow",
      body: "A passage sits inside a book's argument, plot, or poetic movement.",
      lookFor: ["Where the passage appears in the book.", "What comes before and after.", "Whether it begins, develops, or concludes a theme."],
      howTo: ["Read a book outline.", "Summarize the surrounding section.", "Ask why this passage appears here."],
      example: "Romans 12 follows Romans 1-11, so its commands rest on God's mercies already explained."
    },
    {
      title: "Same Author and Canon",
      body: "Wider Scripture matters, but it should be used in a disciplined order.",
      lookFor: ["Same-author vocabulary.", "Clearer passages on the same theme.", "Canonical connections that fit the local context."],
      howTo: ["Compare the same author before broader topical searches.", "Let clearer passages help without silencing this passage.", "Return to the local text after using cross-references."],
      example: "John's language of light and life should first be compared with John's own writings."
    }
  ],
  "Identify genre controls before interpretation": [
    {
      title: "Choose the Active Genre",
      body: "Some books contain more than one genre. Identify what kind of passage you are actually studying.",
      lookFor: ["Story, speech, poem, command, proverb, parable, letter argument, oracle, or vision.", "Genre shifts inside a book.", "Mixed passages that need more than one tool."],
      howTo: ["Name the book genre and passage genre.", "If mixed, identify the primary genre first.", "Use secondary genre tools only where needed."],
      example: "Daniel includes historical narrative and apocalyptic prophecy, so chapter-level genre matters."
    },
    {
      title: "Use Genre Rules Selectively",
      body: "Genre rules are tools, not a checklist to force onto every passage.",
      lookFor: ["The rules that directly match the passage's features.", "A common mistake the genre warns against.", "One or two rules that clarify the main issue."],
      howTo: ["Open the matching genre page.", "Pick the most relevant rules.", "Return to the passage and test them."],
      example: "For a parable, focus on the main punch before assigning meaning to every detail."
    },
    {
      title: "Common Genre Mistakes",
      body: "Genre mistakes happen when readers use the wrong expectations.",
      lookFor: ["Treating poetry like a textbook.", "Treating narrative description as automatic prescription.", "Treating apocalyptic symbols as literal before checking Scripture."],
      howTo: ["Ask how the genre communicates.", "Name the likely mistake before interpreting.", "Use the guide's Ask / Look For / Avoid cards."],
      example: "A proverb gives wisdom for ordinary life, not a mechanical guarantee with no exceptions."
    }
  ],
  "Do basic word studies responsibly": [
    {
      title: "Choose Key Words Only",
      body: "Not every word needs a word study. Choose words that carry weight in the passage.",
      lookFor: ["Repeated words.", "Theologically important words.", "Words that are unclear or debated.", "Words that affect the main idea."],
      howTo: ["Limit yourself to one or two words.", "Explain why the word matters.", "Study the word in context first."],
      example: "In Romans, justify is worth studying because it carries major argument weight."
    },
    {
      title: "Context Decides Meaning",
      body: "A dictionary gives possible meanings; context decides the likely meaning in a specific sentence.",
      lookFor: ["How the word functions in the sentence.", "Nearby explanations or contrasts.", "How the same author uses the word."],
      howTo: ["Read the sentence and paragraph first.", "Compare same-book usage.", "Choose the meaning that best fits the argument."],
      example: "A word may have several possible meanings, but only one is intended in a given context."
    },
    {
      title: "Avoid Common Fallacies",
      body: "Word studies can mislead when they become detached from usage.",
      lookFor: ["Root fallacy.", "Illegitimate totality transfer.", "Reading later meanings into earlier words.", "Choosing only evidence that supports your view."],
      howTo: ["Do not build meaning from roots alone.", "Do not import every dictionary meaning.", "Check actual usage."],
      example: "Dynamis does not mean dynamite in Romans 1:16 just because the English word dynamite came later."
    }
  ],
  "Cross the principlizing bridge": [
    {
      title: "Original Meaning",
      body: "The bridge begins by stating what the passage meant in its original setting.",
      lookFor: ["Original audience.", "Historical or covenant setting.", "The author's stated reason or purpose."],
      howTo: ["Summarize the passage in past-tense original context.", "Avoid modern application language at this stage.", "Ask what the first audience was called to understand or do."],
      example: "A food-related command may first address Israel's holiness and covenant identity."
    },
    {
      title: "Differences Between Then and Now",
      body: "The bridge notices what has changed between the biblical setting and today.",
      lookFor: ["Covenant changes.", "Cultural forms.", "Temple, priesthood, land, civil law, or local church situation.", "Fulfillment in Christ."],
      howTo: ["List key differences.", "Ask whether the command is repeated, transformed, or fulfilled elsewhere.", "Do not skip this step."],
      example: "A command tied to Israel's civil law may carry a continuing principle without the same civil form."
    },
    {
      title: "Timeless Principle and Canonical Check",
      body: "The principle carries forward because it is grounded in God's character, creation, gospel truth, love, holiness, justice, worship, or mission.",
      lookFor: ["The theological reason beneath the command.", "Confirmation elsewhere in Scripture.", "A principle broad enough for today but specific to this passage."],
      howTo: ["Write the principle in one sentence.", "Check it against the whole Bible.", "Apply the principle in a concrete modern setting."],
      example: "Gleaning laws reveal God's concern for generosity, justice, and care for the vulnerable."
    }
  ],
  "Use SPACEPETS and application circles for concrete response": [
    {
      title: "Response Categories",
      body: "SPACEPETS helps you find the type of response the passage calls for after interpretation is clear.",
      lookFor: ["Sin, promise, attitude, command, example, prayer, error, truth, or thanks.", "The response category that best fits the main idea.", "A response grounded in the passage, not imagination."],
      howTo: ["Try each category quickly.", "Keep only the ones that fit.", "Turn one category into a concrete action or prayer."],
      example: "A passage may call for a truth to believe before it calls for a command to obey."
    },
    {
      title: "Application Circles",
      body: "Application should ask where the response belongs, not only what the response is.",
      lookFor: ["Personal life.", "Family or close relationships.", "Church community.", "Society and justice.", "Mission and witness.", "Great Controversy themes."],
      howTo: ["Start with the closest fitting circle.", "Do not make every passage apply to every circle.", "Name one real-life setting."],
      example: "A command about unity may apply first to church relationships before private feelings."
    },
    {
      title: "Faithful Specificity",
      body: "Concrete application is specific without becoming legalistic.",
      lookFor: ["A real person or situation.", "A measurable next step.", "A response that flows from grace and truth."],
      howTo: ["Avoid vague application.", "Avoid adding rules the passage does not require.", "Write a response you can actually practice."],
      example: "Instead of 'be more loving,' write how love should show up in one strained relationship."
    }
  ],
  "Submit assumptions to the text and authorial intent": [
    {
      title: "State the Provisional Reading",
      body: "Advanced readers often form interpretations quickly. Naming a provisional reading keeps it open to correction.",
      lookFor: ["Your first thesis.", "The evidence you think supports it.", "The part of the passage that could challenge it."],
      howTo: ["Write your reading in one sentence.", "Mark it as provisional.", "Revise it as observations accumulate."],
      example: "A favorite theological theme may be true but still not be this passage's main point."
    },
    {
      title: "Bias Audit",
      body: "Technical tools do not remove bias. They can even make bias sound more convincing if not submitted to the text.",
      lookFor: ["A preferred system controlling the passage.", "Selective evidence.", "Confidence that outruns the data."],
      howTo: ["Ask what evidence would change your reading.", "Look for counter-evidence in the passage.", "Keep authorial intent above your framework."],
      example: "Do not use a possible chiasm to force a meaning the plain flow does not support."
    },
    {
      title: "Ask What the Author Is Doing",
      body: "Authorial intent includes purpose, strategy, and effect, not only information.",
      lookFor: ["Argument, exhortation, warning, comfort, worship, correction, or narration.", "How the passage aims to move the audience.", "The genre strategy the author uses."],
      howTo: ["Name the author's action: arguing, warning, comforting, narrating, praising.", "Ask why this unit exists here.", "Let that purpose govern advanced tools."],
      example: "Paul may quote Scripture not merely as decoration but as proof within an argument."
    }
  ],
  "Avoid word-study fallacies": [
    {
      title: "Root Fallacy",
      body: "The root fallacy assumes a word's meaning is determined by its root parts. Usage matters more than roots.",
      lookFor: ["Meaning claims based mainly on word parts.", "A definition that ignores sentence context.", "A clever etymology doing too much work."],
      howTo: ["Check actual usage.", "Ask whether the proposed meaning fits the sentence.", "Use roots only as background, not proof."],
      example: "A butterfly is not a fly made of butter; roots do not automatically determine meaning."
    },
    {
      title: "Illegitimate Totality Transfer",
      body: "This fallacy imports every possible meaning of a word into one occurrence.",
      lookFor: ["A long dictionary list treated as one verse's meaning.", "Multiple meanings stacked into one word.", "A sermon point based on every possible nuance."],
      howTo: ["Choose the meaning that fits the context.", "Do not overload one occurrence.", "Let the author's usage decide."],
      example: "A word may have a broad semantic range, but the author normally intends one meaning in a specific sentence."
    },
    {
      title: "Anachronism and Selective Evidence",
      body: "Anachronism reads later meanings into earlier texts. Selective evidence quotes only examples that support your conclusion.",
      lookFor: ["Modern meanings read backward.", "Later theological terms forced into ancient usage.", "Examples chosen from only one side of the evidence."],
      howTo: ["Check time period and author.", "Compare similar contexts.", "Include evidence that complicates your view."],
      example: "Do not read the modern idea of dynamite into Paul's word for power."
    }
  ],
  "Prioritize same-author cross-references": [
    {
      title: "Near-to-Far Cross-Reference Order",
      body: "Cross-references are strongest when they start close to the passage.",
      lookFor: ["Same paragraph.", "Same book.", "Same author.", "Then broader testament and canon."],
      howTo: ["Start with the nearest evidence.", "Move outward only as needed.", "Do not let distant parallels override local meaning."],
      example: "For John's language of life and light, check John's writings before a broad topical search."
    },
    {
      title: "Vocabulary Patterns",
      body: "Authors often use important terms in recognizable ways across their writings.",
      lookFor: ["Repeated words in the same book.", "Themes the author returns to.", "Definitions or explanations by the author."],
      howTo: ["Build a small same-author list.", "Compare similar contexts.", "Ask whether the same meaning fits your passage."],
      example: "Paul's use of mystery in Ephesians can clarify his use of mystery in Colossians."
    },
    {
      title: "Misuse Warnings",
      body: "Cross-references can become shortcuts that avoid the passage you are studying.",
      lookFor: ["A distant verse used too quickly.", "A topical chain with no local explanation.", "A cross-reference that changes the passage's subject."],
      howTo: ["Explain your passage first.", "Use cross-references to confirm or clarify.", "Return to the original text and test the connection."],
      example: "Scripture interprets Scripture, but not by silencing the actual paragraph in front of you."
    }
  ],
  "Use the analogy of faith responsibly": [
    {
      title: "Clear and Less Clear Passages",
      body: "The analogy of faith lets clearer passages help with less clear passages while still honoring each passage's context.",
      lookFor: ["A difficult or symbolic text.", "Clearer biblical teaching on the same doctrine.", "A possible interpretation that conflicts with major biblical teaching."],
      howTo: ["State what is clear in your passage.", "Compare with clearer texts.", "Do not erase the unique contribution of the difficult text."],
      example: "Symbolic prophecy should harmonize with clear biblical teaching about Christ, worship, judgment, and hope."
    },
    {
      title: "Canonical Coherence",
      body: "Because Scripture is unified, interpretations should cohere with the whole counsel of Scripture.",
      lookFor: ["Doctrinal consistency.", "Fulfillment in Christ.", "Covenant and canonical development."],
      howTo: ["Compare major biblical themes.", "Account for development across Scripture.", "Let clear teaching set boundaries."],
      example: "James and Paul should be harmonized by context, not set against each other."
    },
    {
      title: "Avoid Flattening",
      body: "Harmony does not mean every passage says the same thing in the same way.",
      lookFor: ["Different genre, audience, or covenant setting.", "A passage's distinct emphasis.", "A forced theological shortcut."],
      howTo: ["Let each passage speak in its own voice.", "Ask what this text uniquely contributes.", "Avoid making every passage repeat your favorite doctrine."],
      example: "A narrative may teach theology through plot rather than direct doctrinal formulation."
    }
  ],
  "Build theological synthesis": [
    {
      title: "Use Doctrinal Categories Carefully",
      body: "Theological synthesis asks how the passage contributes to biblical teaching without ignoring how the passage communicates.",
      lookFor: ["God, humanity, sin, covenant, Christ, Spirit, church, mission, judgment, restoration.", "A doctrine directly taught or implied by the passage.", "A theological emphasis that fits the genre."],
      howTo: ["Name the doctrine in one sentence.", "Connect it to the passage's words and structure.", "Avoid making doctrine detached from exegesis."],
      example: "A psalm may teach about God through prayer and emotion rather than a formal doctrinal statement."
    },
    {
      title: "Genre-Sensitive Theology",
      body: "Different genres teach theology differently.",
      lookFor: ["Plot and divine action in narrative.", "Images and worship in poetry.", "Argument in epistles.", "Symbols and visions in apocalyptic prophecy."],
      howTo: ["Ask how this genre communicates theology.", "Do not force every passage into proposition form too quickly.", "Preserve the passage's emotional and literary shape."],
      example: "A lament teaches theology by showing faithful prayer under distress."
    },
    {
      title: "Synthesis Limits",
      body: "Synthesis should gather what the passage supports, not everything a doctrine includes.",
      lookFor: ["Claims that outrun the passage.", "Doctrinal systems doing more work than the text.", "Missing canonical checks."],
      howTo: ["State what this passage contributes.", "Then compare with broader Scripture.", "Be clear about what the passage does not answer."],
      example: "A passage may contribute one part of a doctrine without addressing every related question."
    }
  ],
  "Locate the passage in redemptive history and the Great Controversy": [
    {
      title: "Place It in the Storyline",
      body: "Redemptive history locates the passage within creation, fall, covenant, Christ, church, mission, judgment, and restoration.",
      lookFor: ["Where the passage stands in the biblical timeline.", "Covenant setting.", "Promises, fulfillment, judgment, worship, or restoration themes."],
      howTo: ["Ask what has already happened in the story.", "Ask what fulfillment still lies ahead.", "Connect the passage to the storyline only where the text gives warrant."],
      example: "Daniel's visions should be read in relation to God's kingdom, judgment, worship, and final restoration."
    },
    {
      title: "Christ, Covenant, and Restoration",
      body: "Christ-centered and canonical reading asks how the passage relates to God's saving work without erasing its first meaning.",
      lookFor: ["Promise and fulfillment.", "Covenant patterns.", "Temple, priesthood, sacrifice, kingdom, exile, return, or restoration."],
      howTo: ["Start with original meaning.", "Trace legitimate biblical connections.", "Ask how Christ fulfills, deepens, or clarifies the theme."],
      example: "The Passover lamb is a legitimate type because Scripture itself develops that connection."
    },
    {
      title: "Great Controversy Guardrails",
      body: "Great Controversy themes can illuminate passages where the text speaks of worship, allegiance, deception, accusation, judgment, vindication, or God's character.",
      lookFor: ["Conflict between truth and deception.", "Worship and allegiance.", "God's character being revealed or challenged.", "Judgment and vindication."],
      howTo: ["Use the theme where the passage supports it.", "Do not force it into every detail.", "Keep Christ and Scripture's storyline central."],
      example: "Revelation's worship conflict naturally belongs in a Great Controversy frame."
    }
  ],
  "Consult commentaries and resources last": [
    {
      title: "Do Your Own Work First",
      body: "Resources are most helpful after observation, context, genre, and a provisional interpretation.",
      lookFor: ["Your own notes before commentary notes.", "A clear question you need help answering.", "A passage summary written in your words."],
      howTo: ["Write your interpretation first.", "List questions that remain.", "Then consult resources to test and refine."],
      example: "A commentary is easier to evaluate when you already know the passage's flow."
    },
    {
      title: "Check the Evidence",
      body: "Do not only collect conclusions from resources. Look for the evidence they provide.",
      lookFor: ["Grammar, historical background, cross-references, structure, and argument.", "Claims that explain the text.", "Claims that sound confident without evidence."],
      howTo: ["Ask why the resource reaches its conclusion.", "Compare evidence with the passage.", "Prefer arguments over assertions."],
      example: "A good commentary should show how its interpretation arises from the text."
    },
    {
      title: "When Resources Disagree",
      body: "Disagreement can clarify the real interpretive issue.",
      lookFor: ["Different readings of grammar, background, structure, or theology.", "Which evidence each view prioritizes.", "Whether the disagreement affects the main idea."],
      howTo: ["Summarize each view fairly.", "Compare the textual evidence.", "Choose the view that best accounts for the passage."],
      example: "If two commentaries disagree, ask which one better explains the immediate context."
    }
  ]
};

const GeneralHermeneuticsStepDetailShelf = ({ details }) => {
  if (!details?.length) return null;

  return (
    <div className="mt-5 pt-5 border-t border-white/70">
      <div className="mb-3">
        <strong className="text-sky-950 block text-base">Step Detail Shelf</strong>
        <p className="text-sm text-slate-600 leading-relaxed">Open the pieces you need while working through this step.</p>
      </div>
      <div className="space-y-3">
        {details.map((detail) => (
          <GrammarDropdown key={detail.title} title={detail.title}>
            <p className="mb-3">{detail.body}</p>
            {detail.lookFor?.length > 0 && (
              <div className="mb-3">
                <strong className="text-slate-800 block mb-1">Look for:</strong>
                <ul className="list-disc pl-5 space-y-1">
                  {detail.lookFor.map((item) => <li key={item}>{item}</li>)}
                </ul>
              </div>
            )}
            {detail.howTo?.length > 0 && (
              <div className="mb-3">
                <strong className="text-slate-800 block mb-1">How to use it:</strong>
                <ul className="list-disc pl-5 space-y-1">
                  {detail.howTo.map((item) => <li key={item}>{item}</li>)}
                </ul>
              </div>
            )}
            {detail.example && (
              <p className="italic text-sky-800 border-l-2 border-sky-300 pl-3 mt-3">
                <strong>Example:</strong> {detail.example}
              </p>
            )}
          </GrammarDropdown>
        ))}
      </div>
    </div>
  );
};

const GeneralHermeneuticsStepList = ({ steps }) => (
  <div className="mb-10">
    <H2>Step-by-Step Method</H2>
    <div className="space-y-5">
      {steps.map((step, index) => {
        const colors = ruleColorClasses[index % ruleColorClasses.length];
        return (
          <div key={step.title} className={`${colors.card} border rounded-2xl p-5 md:p-6 shadow-sm`}>
            <div className="flex flex-col md:flex-row gap-4">
              <div className={`${colors.badge} text-white w-10 h-10 rounded-full flex items-center justify-center font-black text-sm shrink-0 shadow-sm`}>
                {index + 1}
              </div>
              <div className="w-full">
                <strong className={`${colors.title} block text-xl md:text-2xl mb-2`}>{step.title}</strong>
                <p className="text-slate-700 leading-relaxed mb-4">{step.body}</p>

                <div className="grid lg:grid-cols-[1.2fr_1fr_1fr] gap-4 text-sm">
                  <div className="bg-white/80 border border-white rounded-xl p-4 shadow-sm">
                    <strong className="text-indigo-950 block mb-2">What to do</strong>
                    <ul className="space-y-2 text-slate-700">
                      {step.actions.map((action) => (
                        <li key={action} className="flex items-start gap-2">
                          <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0 mt-0.5" />
                          <span>{action}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <div className="bg-white/80 border border-white rounded-xl p-4 shadow-sm">
                    <strong className="text-emerald-900 block mb-2">Practice</strong>
                    <p className="text-slate-700 leading-relaxed">{step.example}</p>
                  </div>

                  <div className="bg-white/80 border border-white rounded-xl p-4 shadow-sm">
                    <strong className="text-rose-900 block mb-2">Avoid</strong>
                    <p className="text-slate-700 leading-relaxed">{step.avoid}</p>
                  </div>
                </div>
                <GeneralHermeneuticsStepDetailShelf details={step.details || generalHermeneuticsStepDetails[step.title]} />
              </div>
            </div>
          </div>
        );
      })}
    </div>
  </div>
);

const GeneralHermeneuticsLevelPage = ({ level, navigate }) => {
  const data = generalHermeneuticsLevelData[level];
  const levelInfo = learningLevels.find((item) => item.id === level) || learningLevels[0];
  const Icon = levelInfo.icon;
  const style = learningLevelStyles[level] || learningLevelStyles.beginner;

  return (
    <div className="animate-in fade-in duration-500">
      <div className="mb-8">
        <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page {data.sectionNum}</div>
        <H1>{data.title}</H1>
      </div>

      <div className={`${style.card} border rounded-3xl p-6 md:p-8 shadow-sm mb-8`}>
        <div className="flex flex-col md:flex-row md:items-start gap-5">
          <div className={`${style.icon} w-14 h-14 rounded-2xl flex items-center justify-center shrink-0`}>
            <Icon className="w-7 h-7" />
          </div>
          <div>
            <span className={`${style.badge} border rounded-full px-3 py-1 text-xs uppercase tracking-widest font-black`}>{levelInfo.badge}</span>
            <h2 className="text-2xl md:text-3xl font-black text-slate-950 mt-3 mb-3">{data.headline}</h2>
            <p className="text-slate-700 leading-relaxed mb-3">{data.who}</p>
            <div className="bg-white/75 border border-white rounded-xl p-4 text-sm md:text-base text-slate-700 leading-relaxed">
              <strong className="text-indigo-950 block mb-1">Goal</strong>
              {data.goal}
            </div>
          </div>
        </div>
      </div>

      <GeneralHermeneuticsStepList steps={data.steps} />

      <H2>Use These Pages</H2>
      <div className="grid md:grid-cols-2 gap-4 mb-10">
        {data.route.map((item) => (
          <button
            key={item.label}
            type="button"
            onClick={() => navigate(item.target)}
            className="text-left bg-white border border-slate-200 rounded-2xl p-5 shadow-sm hover:border-indigo-300 hover:shadow-md transition-all"
          >
            <strong className="text-indigo-950 block text-lg mb-2">{item.label}</strong>
            <span className="text-sm text-slate-700 leading-relaxed">{item.text}</span>
          </button>
        ))}
      </div>

      <div className="grid lg:grid-cols-2 gap-5">
        <div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-5 shadow-sm">
          <strong className="text-emerald-950 block text-xl mb-4">Practice Next</strong>
          <ul className="space-y-3 text-sm text-slate-700">
            {data.practice.map((item) => (
              <li key={item} className="flex items-start gap-3">
                <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0 mt-0.5" />
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>
        <div className="bg-amber-50 border border-amber-100 rounded-2xl p-5 shadow-sm">
          <strong className="text-amber-950 block text-xl mb-4">{data.cautionTitle}</strong>
          <ul className="space-y-3 text-sm text-slate-700">
            {data.cautions.map((item) => (
              <li key={item} className="flex items-start gap-3">
                <Lightbulb className="w-4 h-4 text-amber-600 shrink-0 mt-0.5" />
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <WhereToGoNext navigate={navigate} items={data.nextItems} />
    </div>
  );
};

const StartHerePage = ({ navigate }) => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 1</div>
      <H1>Start Here</H1>
    </div>
    <P>This guide is large on purpose, but you do not need to read it like an encyclopedia. Choose a path, practice with a passage, and come back to the reference pages when a question arises.</P>

    <div className="bg-indigo-950 text-white rounded-3xl p-6 md:p-8 shadow-xl my-8">
      <div className="flex items-start gap-4 mb-6">
        <div className="bg-white/10 border border-white/10 rounded-2xl p-3">
          <Compass className="w-7 h-7 text-emerald-300" />
        </div>
        <div>
          <strong className="text-emerald-300 uppercase tracking-widest text-xs font-black">Choose a Learning Path</strong>
          <h2 className="text-2xl md:text-3xl font-black mt-1 mb-2">Begin where you are, then move deeper.</h2>
          <p className="text-indigo-100 leading-relaxed">The levels do not hide content. They simply tell you what to do first so the guide feels like a path instead of a pile.</p>
        </div>
      </div>
      <div className="grid lg:grid-cols-3 gap-4">
        {[
          {
            level: "beginner",
            heading: "Beginner Path",
            target: "beginner-path",
            button: "Open Beginner Path",
            steps: ["Learn the basic method.", "Identify the genre.", "Use one or two core rules.", "Complete the Guided Workbook."]
          },
          {
            level: "intermediate",
            heading: "Intermediate Path",
            target: "intermediate-path",
            button: "Open Intermediate Path",
            steps: ["Use the full genre rules.", "Compare the case studies.", "Practice with guided exercises.", "Finish with the Master Checklist."]
          },
          {
            level: "advanced",
            heading: "Advanced Path",
            target: "advanced-path",
            button: "Open Advanced Path",
            steps: ["Use argument diagramming.", "Consult reference shelves.", "Study rhetorical and literary features.", "Use prophecy tools and teaching helps."]
          }
        ].map((path) => {
          const level = learningLevels.find((item) => item.id === path.level);
          const Icon = level.icon;
          const style = learningLevelStyles[path.level];
          return (
            <div key={path.level} className="bg-white/10 border border-white/10 rounded-2xl p-5">
              <div className="flex items-center gap-3 mb-4">
                <div className={`${style.icon} w-10 h-10 rounded-xl flex items-center justify-center`}>
                  <Icon className="w-5 h-5" />
                </div>
                <div>
                  <span className="text-xs uppercase tracking-widest font-black text-indigo-200">{level.badge}</span>
                  <strong className="block text-white text-xl">{path.heading}</strong>
                </div>
              </div>
              <ol className="space-y-2 text-sm text-indigo-100 mb-5">
                {path.steps.map((step, index) => (
                  <li key={step} className="flex gap-2">
                    <span className="text-emerald-300 font-black">{index + 1}.</span>
                    <span>{step}</span>
                  </li>
                ))}
              </ol>
              <button onClick={() => navigate(path.target)} className={`${style.button} w-full rounded-xl px-4 py-3 text-sm font-black transition-colors`}>
                {path.button}
              </button>
            </div>
          );
        })}
      </div>
    </div>

    <LearningSteps
      title="The Whole Guide in Three Levels"
      intro="Use this as the mental map for the rest of the site. A beginner can stop after the first lane; a teacher or advanced student can keep moving."
      steps={learningStepPresets.default}
    />

    <H2>Quick Links</H2>
    <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
      {[
        ["Guided Workbook", "ai-interpreter"],
        ["Glossary", "glossary"],
        ["Master Interpretation Checklist", "master-checklist"],
        ["Practice Library", "practice-library"]
      ].map(([label, target]) => (
        <button key={label} onClick={() => navigate(target)} className="bg-indigo-50 border border-indigo-100 rounded-xl px-4 py-3 text-indigo-900 font-bold hover:bg-indigo-100 transition-colors">{label}</button>
      ))}
    </div>
  </div>
);

const MasterChecklistPage = ({ navigate }) => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 12</div>
      <H1>Master Interpretation Checklist</H1>
    </div>
    <P>Use this as the final audit before teaching, preaching, sharing, or exporting a workbook summary.</P>
    <div className="space-y-4">
      {masterChecklistSections.map(([title, items], index) => (
        <div key={title} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
          <div className="flex items-center gap-3 mb-3">
            <span className="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">{index + 1}</span>
            <strong className="text-indigo-950 text-xl">{title}</strong>
          </div>
          <ul className="grid md:grid-cols-3 gap-3 text-sm text-slate-700">
            {items.map((item) => <li key={item} className="bg-slate-50 border border-slate-100 rounded-xl p-3">{item}</li>)}
          </ul>
        </div>
      ))}
    </div>
    <WhereToGoNext navigate={navigate} items={[
      { label: "Guided Workbook", target: "ai-interpreter", text: "Use the checklist while building a passage summary." },
      { label: "Practice Library", target: "practice-library", text: "Practice one genre before using the checklist again." },
      { label: "Decision Trees", target: "decision-trees", text: "Use a flowchart when you are unsure what step comes next." }
    ]} />
  </div>
);

const PracticeLibraryPage = ({ navigate }) => {
  const [selectedLevel, setSelectedLevel] = useState("all");
  const visibleGroups = practiceLibrary
    .map((group) => ({
      ...group,
      exercises: selectedLevel === "all"
        ? group.exercises
        : group.exercises.filter((exercise) => exercise.level.toLowerCase() === selectedLevel)
    }))
    .filter((group) => group.exercises.length);

  return (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 13</div>
      <H1>Practice Library</H1>
    </div>
    <P>These exercises help learners practice the guide's principles without the app doing the interpretation for them. Use them alone, in pairs, or as small-group assignments. Each card gives a focused skill, a short prompt, practice steps, a suggested answer, and a common mistake to avoid.</P>
    <div className="grid md:grid-cols-4 gap-3 my-8">
      {[
        ["Choose", "Pick the genre or method your group is studying."],
        ["Observe", "Work the practice steps before opening the answer."],
        ["Compare", "Use the suggested answer to calibrate, not to memorize."],
        ["Apply", "Name the interpretive mistake the exercise helped you avoid."]
      ].map(([title, text], index) => (
        <div key={title} className="bg-indigo-50 border border-indigo-100 rounded-xl p-4 text-sm text-slate-700">
          <span className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold mb-3">{index + 1}</span>
          <strong className="block text-indigo-950 text-base mb-1">{title}</strong>
          {text}
        </div>
      ))}
    </div>
    <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm mb-8">
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <strong className="text-indigo-950 block text-lg">Filter by Learning Level</strong>
          <p className="text-sm text-slate-600 leading-relaxed mt-1">All exercises remain available. Use the filter when you want a recommended path instead of browsing everything.</p>
        </div>
        <div className="flex flex-wrap gap-2">
          {["all", ...learningLevels.map((level) => level.id)].map((levelId) => (
            <button
              key={levelId}
              type="button"
              onClick={() => setSelectedLevel(levelId)}
              className={`rounded-full px-4 py-2 text-sm font-black border transition-colors ${
                selectedLevel === levelId
                  ? "bg-indigo-600 text-white border-indigo-600"
                  : "bg-white text-slate-700 border-slate-200 hover:border-indigo-300 hover:text-indigo-700"
              }`}
            >
              {levelId === "all" ? "All Levels" : getLearningLevelLabel(levelId)}
            </button>
          ))}
        </div>
      </div>
    </div>
    <div className="space-y-5">
      {visibleGroups.map((group) => {
        const Icon = group.icon;
        return (
          <div key={group.genre} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
            <div className="flex flex-col md:flex-row md:items-start gap-3 mb-4">
              <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-3 self-start">
                <Icon className="w-6 h-6 text-indigo-600" />
              </div>
              <div>
                <strong className="text-indigo-950 text-xl block">{group.genre}</strong>
                <p className="text-sm text-slate-700 leading-relaxed mt-1">{group.purpose}</p>
              </div>
            </div>
            <div className="grid md:grid-cols-2 gap-4">
              {group.exercises.map((exercise) => (
                <details key={exercise.reference} className="group bg-slate-50 border border-slate-200 rounded-xl p-4">
                  <summary className="cursor-pointer list-none flex justify-between gap-3">
                    <span>
                      <span className="flex flex-wrap gap-2 mb-2">
                        <span className="bg-white border border-indigo-100 text-indigo-800 rounded-full px-2 py-0.5 text-[11px] font-bold">{exercise.level}</span>
                        {exercise.level === "Beginner" && <span className="bg-emerald-100 border border-emerald-200 text-emerald-800 rounded-full px-2 py-0.5 text-[11px] font-black">Start here</span>}
                        <span className="bg-white border border-emerald-100 text-emerald-800 rounded-full px-2 py-0.5 text-[11px] font-bold">{exercise.time}</span>
                        <span className="bg-white border border-slate-200 text-slate-700 rounded-full px-2 py-0.5 text-[11px] font-bold">{exercise.skill}</span>
                      </span>
                      <strong className="text-indigo-900 block">{exercise.reference}</strong>
                      <span className="text-sm text-slate-700">{exercise.prompt}</span>
                    </span>
                    <ChevronDown className="w-4 h-4 text-indigo-600 mt-1 transition-transform group-open:rotate-180" />
                  </summary>
                  <div className="mt-4 space-y-3 text-sm text-slate-700">
                    <div className="bg-white border border-slate-200 rounded-lg p-3">
                      <strong className="text-indigo-900 block mb-2">Practice Steps</strong>
                      <ol className="list-decimal pl-5 space-y-1">
                        {exercise.steps.map((step) => <li key={step}>{step}</li>)}
                      </ol>
                    </div>
                    <div className="bg-emerald-50 border border-emerald-100 rounded-lg p-3">
                      <strong className="text-emerald-800 block mb-1">Suggested Answer</strong>
                      {exercise.answer}
                    </div>
                    <div className="grid md:grid-cols-2 gap-3">
                      <div className="bg-rose-50 border border-rose-100 rounded-lg p-3">
                        <strong className="text-rose-800 block mb-1">Common Mistake</strong>
                        {exercise.commonMistake}
                      </div>
                      <div className="bg-indigo-50 border border-indigo-100 rounded-lg p-3">
                        <strong className="text-indigo-800 block mb-1">Group Use</strong>
                        {exercise.groupUse}
                      </div>
                    </div>
                  </div>
                </details>
              ))}
            </div>
          </div>
        );
      })}
    </div>
    <WhereToGoNext navigate={navigate} items={[
      { label: "Guided Workbook", target: "ai-interpreter", text: "Use an exercise passage in the workbook." },
      { label: "Master Checklist", target: "master-checklist", text: "Check your finished interpretation." },
      { label: "Teacher Mode", target: "teacher-group", text: "Turn an exercise into a group session." }
    ]} />
  </div>
  );
};

const DecisionTreesPage = ({ navigate }) => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 14</div>
      <H1>Decision Trees</H1>
    </div>
    <P>Use these quick flows when you know something matters but are not sure which interpretive tool to use first.</P>
    <div className="space-y-6">
      {decisionTrees.map((tree) => (
        <div key={tree.title} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
          <strong className="text-indigo-950 block text-xl mb-4">{tree.title}</strong>
          <div className="grid md:grid-cols-3 gap-3">
            {tree.steps.map((step, index) => (
              <div key={step} className="relative bg-indigo-50 border border-indigo-100 rounded-xl p-4 text-sm text-slate-700">
                <span className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold mb-3">{index + 1}</span>
                {step}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
    <WhereToGoNext navigate={navigate} items={[
      { label: "Guided Workbook", target: "ai-interpreter", text: "Use the right decision tree while filling a passage summary." },
      { label: "Glossary", target: "glossary", text: "Review terms like genre, typology, and allusion." },
      { label: "Practice Library", target: "practice-library", text: "Practice the decision on a short passage." }
    ]} />
  </div>
);

const GlossaryPage = ({ navigate }) => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 15</div>
      <H1>Glossary</H1>
    </div>
    <P>A compact reference for terms that appear throughout the guide.</P>
    <div className="grid md:grid-cols-2 gap-4">
      {glossaryTerms.map((item) => (
        <div key={item.term} className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
          <strong className="text-indigo-950 block text-lg mb-1">{item.term}</strong>
          <p className="text-sm text-slate-700 leading-relaxed">{item.definition}</p>
        </div>
      ))}
    </div>
    <WhereToGoNext navigate={navigate} items={[
      { label: "Start Here", target: "start-here", text: "Choose a beginner, intermediate, or advanced route." },
      { label: "Guided Workbook", target: "ai-interpreter", text: "Use glossary terms while writing your own notes." },
      { label: "Decision Trees", target: "decision-trees", text: "Pair definitions with step-by-step choices." }
    ]} />
  </div>
);

const TeacherGroupModePage = ({ navigate }) => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 16</div>
      <H1>Teacher & Small Group Mode</H1>
    </div>
    <P>This page is for someone leading others through the guide: a Sabbath school teacher, Bible study leader, pastor, parent, mentor, or small-group facilitator. It turns the guide into teachable sessions with a clear aim, a practice plan, discussion questions, and leader notes.</P>

    <div className="bg-indigo-950 text-white rounded-2xl p-6 shadow-lg mb-8">
      <strong className="text-yellow-300 block text-xl mb-2">How to Use This Page</strong>
      <p className="text-indigo-100 leading-relaxed mb-4">Choose one genre or method, teach only the essential idea, then move quickly into practice. The goal is not to cover everything; it is to train people to read one passage more faithfully.</p>
      <div className="grid md:grid-cols-3 gap-3 text-sm">
        {[
          ["Before", "Choose a passage and one skill from the Practice Library."],
          ["During", "Keep asking, 'What in the text makes you say that?'"],
          ["After", "Use the Master Checklist or Guided Workbook to consolidate learning."]
        ].map(([title, text]) => (
          <div key={title} className="bg-white/10 border border-white/10 rounded-xl p-3">
            <strong className="text-white block mb-1">{title}</strong>
            <span className="text-indigo-100">{text}</span>
          </div>
        ))}
      </div>
    </div>

    <H2>Session Formats</H2>
    <div className="grid md:grid-cols-2 gap-4 mb-8">
      {teacherSessionFormats.map((format) => (
        <div key={format.title} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
          <strong className="text-indigo-950 block text-xl mb-3">{format.title}</strong>
          <ol className="list-decimal pl-5 space-y-2 text-sm text-slate-700">
            {format.plan.map((step) => <li key={step}>{step}</li>)}
          </ol>
        </div>
      ))}
    </div>

    <H2>Leader Habits</H2>
    <div className="grid sm:grid-cols-2 xl:grid-cols-3 gap-4 mb-8">
      {teacherFacilitationTips.map((tip, index) => (
        <div key={tip} className="bg-emerald-50 border border-emerald-100 rounded-xl p-4 text-sm text-slate-700">
          <span className="bg-emerald-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold mb-3">{index + 1}</span>
          {tip}
        </div>
      ))}
    </div>

    <H2>Teaching Guides by Section</H2>
    <div className="space-y-5">
      {teacherGuides.map((guide, index) => (
        <div key={guide.title} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
          <div className="flex items-start gap-4 mb-4">
            <span className="bg-indigo-600 text-white w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold shrink-0">{index + 1}</span>
            <div>
              <strong className="text-indigo-950 block text-xl">{guide.title}</strong>
              <p className="text-sm text-slate-700 leading-relaxed mt-1">{guide.aim}</p>
            </div>
          </div>
          <div className="grid md:grid-cols-2 gap-4 text-sm">
            <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4">
              <strong className="text-indigo-900 block mb-1">Teach</strong>
              {guide.teach}
            </div>
            <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4">
              <strong className="text-emerald-900 block mb-1">Practice</strong>
              {guide.practice}
            </div>
            <div className="bg-slate-50 border border-slate-200 rounded-xl p-4">
              <strong className="text-slate-900 block mb-2">Discussion Questions</strong>
              <ul className="list-disc pl-5 space-y-1">
                {guide.discussion.map((question) => <li key={question}>{question}</li>)}
              </ul>
            </div>
            <div className="bg-amber-50 border border-amber-100 rounded-xl p-4">
              <strong className="text-amber-900 block mb-1">Leader Note</strong>
              {guide.leaderNote}
            </div>
          </div>
        </div>
      ))}
    </div>
    <WhereToGoNext navigate={navigate} items={[
      { label: "Practice Library", target: "practice-library", text: "Choose a passage for your next group exercise." },
      { label: "Master Checklist", target: "master-checklist", text: "Use the checklist as a closing group audit." },
      { label: "Guided Workbook", target: "ai-interpreter", text: "Have the group build a shared interpretation summary." }
    ]} />
  </div>
);

const workbookGeneralHelp = [
  {
    title: "Authorial Intent",
    purpose: "Keep meaning anchored in what the inspired author communicated, rather than what a modern reader first feels or wants the passage to say.",
    use: [
      "Ask who wrote or spoke, who first heard it, and what issue or situation the passage addresses.",
      "Let repeated words, argument flow, plot movement, or poetic structure show the author's emphasis.",
      "Test your interpretation by asking whether the first audience could reasonably have understood it."
    ],
    write: "In the workbook, write one sentence beginning: The author is showing/teaching/warning/comforting...",
    avoid: "Avoid making your personal response the meaning of the text."
  },
  {
    title: "Context",
    purpose: "Meaning lives in a setting. A verse belongs to a sentence, paragraph, book, historical moment, covenant setting, and whole-Bible story.",
    use: [
      "Read the paragraph before and after the passage.",
      "Ask how this scene, poem, law, argument, or vision contributes to the book's movement.",
      "Notice whether the passage looks backward to earlier Scripture or forward to fulfillment in Christ."
    ],
    write: "In the workbook, note what comes before, what comes after, and why that location matters.",
    avoid: "Avoid treating the passage as a free-floating quote."
  },
  {
    title: "Observation Before Interpretation",
    purpose: "Observation protects you from guessing. Before explaining what a passage means, gather what the passage actually says and emphasizes.",
    use: [
      "Mark repeated words, commands, contrasts, questions, images, names, places, and time markers.",
      "Watch structure: beginning/end, turning point, repeated refrain, argument connectors, or vision sequence.",
      "Separate what you see in the text from what you infer from it."
    ],
    write: "In the workbook, list 5-8 concrete observations before writing an interpretation.",
    avoid: "Avoid jumping from one interesting word straight to application."
  },
  {
    title: "Genre Controls Method",
    purpose: "Different kinds of Scripture communicate differently. Poetry images, narrative plots, law instructs, parables confront, epistles argue, and prophecy warns or unveils.",
    use: [
      "Name the primary genre before choosing your method.",
      "If the passage is mixed, let the main genre lead and the secondary genre support.",
      "Use the genre's Ask / Look For / Avoid rules as reading guardrails."
    ],
    write: "In the workbook, name the genre and the one or two rules that most affect your passage.",
    avoid: "Avoid flattening every passage into the same kind of devotional paragraph."
  },
  {
    title: "Principlizing Bridge",
    purpose: "The bridge helps you move from the original situation to faithful application today without either wooden copying or careless dismissal.",
    use: [
      "Start with original meaning: What did this mean then?",
      "Identify what is culturally specific and what theological reason stands underneath it.",
      "State the enduring principle in a way that fits the whole Bible and can be practiced today."
    ],
    write: "Use this sentence: Because this passage teaches ______, God's people today should ______.",
    avoid: "Avoid applying the ancient form before identifying the enduring value."
  },
  {
    title: "Application",
    purpose: "Faithful application is a response to meaning. It should be concrete, gospel-shaped, and accountable to the whole counsel of Scripture.",
    use: [
      "Ask what the passage calls for: worship, repentance, faith, courage, mercy, endurance, obedience, or hope.",
      "Move from general truth to a specific practice, habit, decision, prayer, or community response.",
      "Check whether your application fits the passage's main point, not just a side detail."
    ],
    write: "In the workbook, write one specific response for personal life and one for church/community life where appropriate.",
    avoid: "Avoid applications so vague that no one could practice them."
  }
];

const workbookGenreShelfGuides = {
  poetry: {
    start: "Enter the poem slowly. Poetry often teaches by image, emotion, repetition, voice, and movement before it gives you a tidy proposition.",
    workflow: [
      "Mark repeated words, refrains, parallel lines, and image clusters.",
      "Identify who is speaking, who is addressed, and where the voice shifts.",
      "Describe the poem's emotional movement before turning it into doctrine.",
      "Ask how the poem trains prayer, worship, hope, lament, or wisdom."
    ],
    output: "A good poetry summary names the emotional-theological movement: from ___ through ___ toward ___."
  },
  history: {
    start: "Read narrative as theological history. The narrator selects scenes, dialogue, contrast, pacing, and outcomes to reveal God's purposes.",
    workflow: [
      "Locate the scene in the book, covenant setting, and larger biblical story.",
      "Trace plot movement: setting, conflict, turning point, consequence, and resolution.",
      "Notice what the narrator approves, critiques, repeats, slows down, or leaves unexplained.",
      "Move from the story's theological emphasis to a principle, not straight to imitation."
    ],
    output: "A good narrative summary says what God reveals or does through the story, not merely what a character did."
  },
  gospelsActs: {
    start: "Read the Gospels as theological biography and Acts as the continuation of Jesus' mission through the Spirit.",
    workflow: [
      "Place the episode in the Gospel or Acts storyline.",
      "Watch conflict, dialogue, miracles, fulfillment language, and responses to Jesus.",
      "Ask what this reveals about Jesus, discipleship, witness, Spirit, or mission.",
      "In Acts, distinguish unique moments, repeated patterns, and teaching-supported norms."
    ],
    output: "A good Gospels/Acts summary connects the episode to Jesus' identity, fulfillment, discipleship, and mission."
  },
  epistles: {
    start: "Read letters as pastoral arguments written to real churches or people. A verse belongs to a paragraph, and a paragraph belongs to the whole letter.",
    workflow: [
      "Reconstruct the occasion only as far as the letter supports.",
      "Follow paragraph logic: therefore, for, but, so that, because, if, then.",
      "Ask what gospel truth grounds the command or correction.",
      "Apply the principle to the church body, not only to isolated private life."
    ],
    output: "A good epistle summary names the claim, the reason supporting it, and the response it calls for."
  },
  law: {
    start: "Read biblical law as covenant instruction that reveals God's values: worship, holiness, justice, mercy, neighbor love, and community order.",
    workflow: [
      "Identify the command, the stated reason, and the people protected or formed by it.",
      "Ask what value the law protects before asking how to practice it today.",
      "Distinguish regulation in a fallen world from God's ideal design.",
      "Carry the value forward through Christlike love and the whole biblical witness."
    ],
    output: "A good law summary moves from ancient form to enduring value to faithful modern expression."
  },
  parables: {
    start: "Read parables as kingdom stories that expose assumptions and demand response. They are not puzzles where every detail needs a secret meaning.",
    workflow: [
      "Identify the audience, occasion, and question or conflict that prompted the parable.",
      "Track the main characters, reversal, surprise, and final punch.",
      "Look for the central truth Jesus presses on the hearer.",
      "Ask what response the parable demands: repentance, mercy, humility, watchfulness, or faith."
    ],
    output: "A good parable summary states the central confrontation and the response Jesus demands."
  },
  prophecy: {
    start: "Read prophecy by first identifying its kind: classical covenant prophecy, restoration promise, judgment oracle, mixed material, or apocalyptic vision.",
    workflow: [
      "Separate classical and apocalyptic features before building an interpretation.",
      "Let Scripture explain symbols, especially through the passage itself and earlier biblical patterns.",
      "Trace Old Testament quotations, citations, allusions, and echoes.",
      "Keep Christ, worship, judgment, endurance, and final restoration at the center."
    ],
    output: "A good prophecy summary explains what God reveals, warns, promises, judges, or restores, and how that forms faithful endurance."
  },
  wisdom: {
    start: "Read wisdom as formation in the fear of the Lord. Wisdom teaches discernment, not automatic formulas for controlling life.",
    workflow: [
      "Identify the wisdom form: proverb, reflection, dialogue, poem, or disputation.",
      "Ask who is speaking and whether the book endorses that voice.",
      "Look for contrasts, patterns, tensions, and life situations.",
      "Apply wisdom as character formation: humility, speech, work, suffering, timing, and trust."
    ],
    output: "A good wisdom summary names the situation, the wise response, and the character it forms."
  }
};

const workbookRuleShelfDetails = {
  "Cross the Principlizing Bridge Carefully": {
    why: "This rule prevents two opposite errors: copying first-century forms without thought, or dismissing commands because they feel culturally distant.",
    steps: [
      "State the original meaning in the author's setting.",
      "Name what is culturally local: social custom, local problem, ancient practice, or temporary circumstance.",
      "Find the theological reason Paul gives or assumes.",
      "Confirm the principle with the wider canon.",
      "Apply the principle in a concrete modern setting."
    ],
    write: "Write: Original meaning: ___. Enduring principle: ___. Today's faithful response: ___."
  },
  "Let Scripture Decode Prophetic Symbols": {
    why: "Prophetic symbols should be interpreted by the Bible's own usage before using charts, headlines, or imagination.",
    steps: [
      "Check whether the immediate passage explains the symbol.",
      "Look for angelic interpretation, repeated symbols, or parallel visions.",
      "Search earlier Scripture for the same image or phrase.",
      "Ask whether the symbol functions consistently in this context.",
      "Hold uncertain meanings with humility."
    ],
    write: "Write the symbol, the biblical evidence for its meaning, and your confidence level."
  },
  "Trace Old Testament Quotations, Citations, Allusions, and Echoes": {
    why: "Prophecy often reuses earlier Scripture. The old context can explain the image, warning, promise, worship issue, or hope being intensified.",
    steps: [
      "Mark direct quotations, named prophets, repeated phrases, and unusual images.",
      "Read the earlier Old Testament context, not only the matching phrase.",
      "Ask what is reused: wording, story pattern, covenant theme, sanctuary image, creation language, or judgment scene.",
      "Compare what stays the same and what is escalated in the prophetic passage.",
      "Use echoes carefully; they support interpretation but should not carry it alone."
    ],
    write: "Write: This passage recalls ___. In the earlier context, ___. Here it contributes ___."
  },
  "Trace the Plot Movement": {
    why: "Plot shows how tension, conflict, turning point, and resolution reveal the narrator's theological emphasis.",
    steps: [
      "Name the setting and problem.",
      "Track rising conflict or repeated tension.",
      "Identify the turning point.",
      "Watch the consequences and resolution.",
      "Ask what the plot teaches about God, covenant, faith, sin, or deliverance."
    ],
    write: "Write the plot in five words or phrases: setting, conflict, climax, consequence, resolution."
  },
  "Master the Structure of Parallelism": {
    why: "Parallel lines are one of poetry's main ways of emphasizing, intensifying, contrasting, or completing a thought.",
    steps: [
      "Pair the lines that belong together.",
      "Ask whether the second line repeats, contrasts, develops, or completes the first.",
      "Notice whether the poem builds through repeated parallel patterns.",
      "Let structure guide meaning before extracting a doctrine."
    ],
    write: "Write what the second line does to the first: restates, sharpens, contrasts, completes, or intensifies."
  },
  "Seek the Central Truth (Avoid Over-Allegorizing)": {
    why: "Parables press a main kingdom point. Over-reading every detail can hide the very response Jesus wants.",
    steps: [
      "Find the audience and occasion.",
      "Identify the main characters and turning point.",
      "Look for the surprise, reversal, or final question.",
      "State the central truth before assigning meaning to details.",
      "Apply the parable's demanded response."
    ],
    write: "Write: Jesus is confronting ___ and calling for ___."
  }
};

const getWorkbookRuleShelfDetail = (key, genre, guidance) => {
  if (workbookRuleShelfDetails[key]) return workbookRuleShelfDetails[key];
  const config = workbookGenreConfig[genre];
  return {
    why: `This rule helps you read ${config?.label || "the passage"} according to the way this kind of biblical literature communicates.`,
    steps: [
      `Start with the diagnostic question: ${guidance.ask}`,
      `Mark concrete evidence in the passage: ${guidance.lookFor}`,
      `Name the mistake this rule guards against: ${guidance.avoid}`,
      "Write one sentence explaining how this rule changed or confirmed your interpretation."
    ],
    write: "Write the rule name, the textual evidence you found, and the interpretive difference it makes."
  };
};

const getWorkbookMistakeDiagnostic = (mistake) => {
  const lower = mistake.toLowerCase();
  if (lower.includes("proof-text")) {
    return {
      check: "Have I read the paragraph and argument around the phrase?",
      correction: "Return to the surrounding unit and restate the passage's flow before using the verse."
    };
  }
  if (lower.includes("genre")) {
    return {
      check: "Am I reading this passage as the kind of literature it actually is?",
      correction: "Name the genre and apply the genre rules before writing application."
    };
  }
  if (lower.includes("application") || lower.includes("moral")) {
    return {
      check: "Have I moved from original meaning to enduring principle before application?",
      correction: "Write the theological principle first, then the modern response."
    };
  }
  if (lower.includes("symbol") || lower.includes("headline") || lower.includes("speculation")) {
    return {
      check: "Did Scripture itself control the symbol, sequence, or prophetic claim?",
      correction: "Use internal explanations, earlier Scripture, and the passage's structure before outside systems."
    };
  }
  if (lower.includes("allegor")) {
    return {
      check: "Am I assigning hidden meaning to details the text does not emphasize?",
      correction: "Return to the main point, plot, or central truth before interpreting smaller details."
    };
  }
  return {
    check: "Can I point to textual evidence for my conclusion?",
    correction: "Slow down, name the evidence, and revise any claim the passage does not support."
  };
};

const workbookStepHelp = {
  context: [
    "Read the paragraph before and after the passage.",
    "Ask what problem, scene, poem, law, vision, or argument the passage belongs to.",
    "Use book metadata as a starting point, not as a replacement for observing the text."
  ],
  observation: [
    "Write down repeated words, contrasts, commands, questions, images, and shifts in speaker.",
    "Notice structure before explaining meaning.",
    "Mark what the text emphasizes by space, repetition, placement, or surprise."
  ],
  genreRules: [
    "Choose the rules that actually affect this passage, not every rule in the guide.",
    "Use Ask / Look For / Avoid as a diagnostic checklist.",
    "When the passage is mixed, let the primary genre lead and the secondary genre support."
  ],
  interpretation: [
    "State the main idea in one plain sentence.",
    "Explain how your observations support the meaning.",
    "Keep the interpretation tied to the author's flow, not a favorite topic."
  ],
  application: [
    "Move from meaning to principle before deciding what to do.",
    "Ask how the passage forms worship, character, mission, repentance, hope, or obedience.",
    "Keep application specific enough to practice."
  ],
  commonMistakes: [
    "Name the reading mistake you are most tempted toward.",
    "Check whether you are proof-texting, flattening genre, moralizing, or rushing to modern application.",
    "Write one sentence explaining how you will avoid that mistake."
  ]
};

const workbookCommonMistakes = {
  general: [
    "Proof-texting a phrase without reading the surrounding argument or story.",
    "Treating every genre as if it communicates the same way.",
    "Jumping to application before observation and interpretation.",
    "Letting modern assumptions control what the passage is allowed to mean."
  ],
  poetry: [
    "Flattening imagery into literal prose.",
    "Skipping emotional movement and worship function.",
    "Ignoring repetition, refrain, and voice shifts."
  ],
  history: [
    "Turning description into prescription.",
    "Making the main character the automatic moral model.",
    "Missing the narrator's theological emphasis."
  ],
  gospelsActs: [
    "Flattening the distinct Gospel writer's emphasis.",
    "Reading Acts as a mechanical rulebook for every church practice.",
    "Missing how the episode reveals Jesus and moves the mission forward."
  ],
  epistles: [
    "Lifting a command out of the letter's argument.",
    "Making ethics moralistic instead of gospel-grounded.",
    "Inventing an occasion beyond what the letter supports."
  ],
  law: [
    "Copying ancient form without carrying forward the value.",
    "Dismissing the law before asking what it reveals about God and neighbor.",
    "Confusing regulation with endorsement."
  ],
  parables: [
    "Allegorizing every detail.",
    "Ignoring the original audience and occasion.",
    "Softening the twist so the parable no longer confronts."
  ],
  prophecy: [
    "Reading symbols from imagination or headlines.",
    "Skipping the covenant context or the vision sequence.",
    "Ignoring Old Testament quotations, allusions, echoes, and story patterns.",
    "Letting speculation replace Christ-centered faithfulness."
  ],
  wisdom: [
    "Treating proverbs as mechanical promises.",
    "Quoting speakers without checking context.",
    "Reducing wisdom to self-help tips."
  ]
};

const workbookCaseStudyMap = {
  poetry: "poetry",
  history: "history",
  gospelsActs: "gospelsActs",
  epistles: "epistles",
  law: "law",
  parables: "parables",
  prophecy: "prophecy",
  wisdom: "wisdom"
};

const getWorkbookGenreStack = (analysis) =>
  [...new Set([analysis.genre, analysis.secondaryGenre].filter((genre) => workbookGenreConfig[genre]))];

const workbookLevelGuidance = {
  beginner: {
    shelf: "Beginner focus: answer the plain questions first. You do not need every rule; use the clearest ones and write simple sentences.",
    steps: {
      context: "Beginner: write what comes before and after the passage, plus one sentence about the original situation if you know it.",
      observation: "Beginner: list repeated words, commands, contrasts, images, people, places, and questions without trying to explain everything yet.",
      genreRules: "Beginner: choose one or two genre rules that obviously fit this passage and answer their Ask questions.",
      interpretation: "Beginner: write one main idea sentence using words from the passage as much as possible.",
      application: "Beginner: move from meaning to principle to faithful response. Keep the application concrete but not forced.",
      commonMistakes: "Beginner: name the one mistake you are most likely to make, then write how you will avoid it."
    }
  },
  intermediate: {
    shelf: "Intermediate focus: use the full genre lens, compare the case study, and test your reading with the Master Checklist.",
    steps: {
      context: "Intermediate: connect immediate context, book movement, historical setting, and covenant or canonical location.",
      observation: "Intermediate: group observations into patterns such as structure, repetition, contrast, logic, imagery, and movement.",
      genreRules: "Intermediate: work through the full rule list and note which rules shape the interpretation most.",
      interpretation: "Intermediate: explain how context, structure, and genre combine to support your main idea.",
      application: "Intermediate: cross the principlizing bridge and test the principle against the wider canon.",
      commonMistakes: "Intermediate: audit your interpretation for proof-texting, genre flattening, premature application, and missing context."
    }
  },
  advanced: {
    shelf: "Advanced focus: use specialized tools only where they clarify the text: rhetoric, diagramming, symbols, allusions, typology, or teaching design.",
    steps: {
      context: "Advanced: include literary structure, canonical echoes, historical background, and the passage's role in biblical theology.",
      observation: "Advanced: mark argument flow, rhetorical forms, allusions, symbolic patterns, or narrative/poetic architecture where present.",
      genreRules: "Advanced: use the deeper rules and reference shelves, but let the passage's own emphasis control the amount of technical detail.",
      interpretation: "Advanced: state the main idea, defend it from textual evidence, and show how alternate readings were weighed.",
      application: "Advanced: move from exegesis to theology to church-shaped application, naming limits and safeguards.",
      commonMistakes: "Advanced: check whether a complex tool has clarified the passage or merely made the reading sound impressive."
    }
  }
};

const stripLearningLevelPrefix = (text) =>
  text.replace(/^(Beginner|Intermediate|Advanced):\s*/, "");

const getWorkbookLevelPrompt = (stepKey, learningLevel) =>
  stripLearningLevelPrefix(workbookLevelGuidance[learningLevel]?.steps?.[stepKey] || workbookLevelGuidance.beginner.steps[stepKey] || "");

const getWorkbookStepHelpItems = (stepKey, activeConfig, analysis, learningLevel = defaultLearningLevel) => {
  const base = workbookStepHelp[stepKey] || [];
  const levelPrompt = getWorkbookLevelPrompt(stepKey, learningLevel) ? [`${getLearningLevelLabel(learningLevel)} focus: ${getWorkbookLevelPrompt(stepKey, learningLevel)}`] : [];
  const genrePrompt = activeConfig?.prompts?.[stepKey] ? [`For ${activeConfig.label}: ${activeConfig.prompts[stepKey]}`] : [];
  const secondary = analysis.secondaryGenre && workbookGenreConfig[analysis.secondaryGenre]?.prompts?.[stepKey]
    ? [`Secondary ${workbookGenreConfig[analysis.secondaryGenre].label} lens: ${workbookGenreConfig[analysis.secondaryGenre].prompts[stepKey]}`]
    : [];
  return [...levelPrompt, ...genrePrompt, ...secondary, ...base].slice(0, 4);
};

const WorkbookStepHelp = ({ stepKey, activeConfig, analysis, learningLevel }) => {
  const items = getWorkbookStepHelpItems(stepKey, activeConfig, analysis, learningLevel);
  if (!items.length) return null;
  return (
    <details className="group bg-indigo-50 border border-indigo-100 rounded-xl mb-4 overflow-hidden">
      <summary className="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer text-indigo-900 font-bold text-sm">
        <span>Need Help?</span>
        <ChevronDown className="w-4 h-4 transition-transform group-open:rotate-180" />
      </summary>
      <ul className="px-5 pb-4 text-sm text-slate-700 list-disc pl-8 space-y-2 leading-relaxed">
        {items.map((item) => <li key={item}>{item}</li>)}
      </ul>
    </details>
  );
};

const WorkbookReferenceShelf = ({ analysis, activeConfig, ruleKeys, learningLevel = defaultLearningLevel }) => {
  const [activeTab, setActiveTab] = useState("rules");
  const genreStack = getWorkbookGenreStack(analysis);
  const tabs = [
    { id: "rules", label: "Genre Rules" },
    { id: "general", label: "General Hermeneutics" },
    { id: "mistakes", label: "Common Mistakes" },
    { id: "case", label: "Case Study" }
  ];
  const mistakeItems = [
    ...workbookCommonMistakes.general,
    ...genreStack.flatMap((genre) => workbookCommonMistakes[genre] || []),
    ...genreStack.flatMap((genre) => caseStudies[workbookCaseStudyMap[genre]]?.mistakes || [])
  ];
  const uniqueMistakes = [...new Set(mistakeItems)].slice(0, 10);

  return (
    <aside className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden lg:sticky lg:top-6">
      <div className="bg-slate-900 text-white p-5">
        <strong className="block text-lg">Reference Shelf</strong>
        <p className="text-xs text-slate-300 mt-1 leading-relaxed">
          Keep the workbook open while you consult detailed rules, guardrails, and examples.
        </p>
      </div>

      <div className="grid grid-cols-2 gap-2 p-3 bg-slate-50 border-b border-slate-200">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`px-3 py-2 rounded-xl text-xs font-black transition-colors ${
              activeTab === tab.id ? "bg-indigo-600 text-white shadow-sm" : "bg-white text-slate-600 border border-slate-200 hover:text-indigo-700"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      <div className="p-4 max-h-[740px] overflow-y-auto">
        <div className="mb-4 bg-indigo-50 border border-indigo-100 rounded-xl p-4">
          <div className="flex items-center gap-2 mb-2">
            <span className="bg-indigo-600 text-white rounded-full px-2 py-1 text-[10px] uppercase tracking-widest font-black">{getLearningLevelLabel(learningLevel)}</span>
            <strong className="text-indigo-950 text-sm">Reference Shelf Focus</strong>
          </div>
          <p className="text-sm text-slate-700 leading-relaxed">{workbookLevelGuidance[learningLevel]?.shelf || workbookLevelGuidance.beginner.shelf}</p>
        </div>

        {activeTab === "rules" && (
          <div className="space-y-4">
            {genreStack.map((genre, genreIndex) => {
              const config = workbookGenreConfig[genre];
              const genreGuide = workbookGenreShelfGuides[genre];
              const keys = genre === analysis.genre
                ? ruleKeys.filter((key) => config.ruleKeys.includes(key))
                : config.ruleKeys.slice(0, 3);
              return (
                <div key={genre} className="space-y-3">
                  <div className="flex items-center justify-between gap-3">
                    <strong className="text-indigo-950">{config.label}</strong>
                    {genreIndex > 0 && <span className="text-[10px] uppercase tracking-widest font-black text-amber-700 bg-amber-50 border border-amber-100 rounded-full px-2 py-1">Secondary</span>}
                  </div>
                  <p className="text-xs text-slate-600 leading-relaxed">{config.summary}</p>
                  {genreGuide && (
                    <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4 text-sm text-slate-700">
                      <strong className="text-indigo-950 block mb-2">How to use this lens</strong>
                      <p className="leading-relaxed mb-3">{genreGuide.start}</p>
                      <ol className="list-decimal pl-5 space-y-1.5 leading-relaxed">
                        {genreGuide.workflow.map((step) => <li key={step}>{step}</li>)}
                      </ol>
                      <div className="mt-3 bg-white border border-indigo-100 rounded-lg p-3">
                        <strong className="text-indigo-900 block mb-1">What to write</strong>
                        {genreGuide.output}
                      </div>
                    </div>
                  )}
                  {keys.map((key, keyIndex) => {
                    const guidance = getWorkbookRuleGuidance(key);
                    if (!guidance) return null;
                    const detail = getWorkbookRuleShelfDetail(key, genre, guidance);
                    return (
                      <details key={key} open={genreIndex === 0 && keyIndex === 0} className="group bg-slate-50 border border-slate-200 rounded-xl overflow-hidden">
                        <summary className="cursor-pointer list-none px-4 py-3 flex items-start justify-between gap-3">
                          <div>
                            <strong className="text-sm text-slate-900 block">{key}</strong>
                            <span className="text-xs text-slate-500">Open for purpose, steps, and worksheet wording.</span>
                          </div>
                          <ChevronDown className="w-4 h-4 text-indigo-600 mt-1 shrink-0 transition-transform group-open:rotate-180" />
                        </summary>
                        <div className="px-4 pb-4">
                          <p className="text-sm text-slate-700 leading-relaxed bg-white border border-slate-200 rounded-lg p-3 mb-3">
                            <strong className="text-indigo-900 block mb-1">Why this matters</strong>
                            {detail.why}
                          </p>
                          <div className="bg-white border border-slate-200 rounded-lg p-3 mb-3">
                            <strong className="text-indigo-900 block text-sm mb-2">How to use it</strong>
                            <ol className="list-decimal pl-5 text-sm text-slate-700 space-y-1.5 leading-relaxed">
                              {detail.steps.map((step) => <li key={step}>{step}</li>)}
                            </ol>
                          </div>
                          <RuleGuidance {...guidance} columnsClass="grid-cols-1" className="mt-2" />
                          <div className="mt-3 bg-emerald-50 border border-emerald-100 rounded-lg p-3 text-sm text-slate-700 leading-relaxed">
                            <strong className="text-emerald-900 block mb-1">Worksheet wording</strong>
                            {detail.write}
                          </div>
                        </div>
                      </details>
                    );
                  })}
                </div>
              );
            })}
          </div>
        )}

        {activeTab === "general" && (
          <div className="space-y-3">
            {workbookGeneralHelp.map((item, index) => (
              <details key={item.title} open={index === 0} className="group bg-indigo-50 border border-indigo-100 rounded-xl overflow-hidden">
                <summary className="cursor-pointer list-none px-4 py-3 flex items-center justify-between gap-3">
                  <strong className="text-indigo-950">{item.title}</strong>
                  <ChevronDown className="w-4 h-4 text-indigo-600 shrink-0 transition-transform group-open:rotate-180" />
                </summary>
                <div className="px-4 pb-4 space-y-3 text-sm text-slate-700">
                  <p className="leading-relaxed">{item.purpose}</p>
                  <div className="bg-white border border-indigo-100 rounded-lg p-3">
                    <strong className="text-indigo-900 block mb-2">Use it like this</strong>
                    <ul className="list-disc pl-5 space-y-1.5 leading-relaxed">
                      {item.use.map((point) => <li key={point}>{point}</li>)}
                    </ul>
                  </div>
                  <div className="bg-emerald-50 border border-emerald-100 rounded-lg p-3">
                    <strong className="text-emerald-900 block mb-1">What to write</strong>
                    {item.write}
                  </div>
                  <div className="bg-rose-50 border border-rose-100 rounded-lg p-3">
                    <strong className="text-rose-900 block mb-1">Avoid</strong>
                    {item.avoid}
                  </div>
                </div>
              </details>
            ))}
          </div>
        )}

        {activeTab === "mistakes" && (
          <div className="space-y-3">
            <p className="text-sm text-slate-700 leading-relaxed">
              Use this as a final guardrail before building your summary. Each warning includes a diagnostic question and a repair step.
            </p>
            {uniqueMistakes.map((mistake, index) => (
              <div key={mistake} className="bg-rose-50 border border-rose-100 rounded-xl p-3 flex gap-3 items-start">
                <span className="bg-rose-500 text-white w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold shrink-0">{index + 1}</span>
                <div className="text-sm text-slate-700 leading-relaxed">
                  <p className="font-semibold text-slate-800">{mistake}</p>
                  <div className="mt-2 grid gap-2">
                    <p className="bg-white/80 border border-rose-100 rounded-lg p-2">
                      <strong className="text-rose-900 block mb-0.5">Diagnostic</strong>
                      {getWorkbookMistakeDiagnostic(mistake).check}
                    </p>
                    <p className="bg-white/80 border border-rose-100 rounded-lg p-2">
                      <strong className="text-emerald-900 block mb-0.5">Repair</strong>
                      {getWorkbookMistakeDiagnostic(mistake).correction}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        {activeTab === "case" && (
          <div className="space-y-4">
            {genreStack.map((genre) => {
              const study = caseStudies[workbookCaseStudyMap[genre]];
              if (!study) return null;
              return (
                <div key={genre} className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <span className="text-[10px] uppercase tracking-widest font-black text-indigo-500">{study.genre}</span>
                  <strong className="text-indigo-950 block text-lg mt-1">{study.passage}</strong>
                  <p className="text-sm text-slate-700 leading-relaxed mt-2">{study.subtitle}</p>
                  <div className="mt-3 bg-emerald-50 border border-emerald-100 rounded-xl p-3">
                    <strong className="text-emerald-900 block text-xs uppercase tracking-widest mb-1">Big Idea</strong>
                    <p className="text-sm text-slate-700 leading-relaxed">{study.bigIdea}</p>
                  </div>
                  <div className="mt-3 bg-indigo-50 border border-indigo-100 rounded-xl p-3">
                    <strong className="text-indigo-900 block text-xs uppercase tracking-widest mb-1">How to imitate the case study</strong>
                    <p className="text-sm text-slate-700 leading-relaxed">{study.focus}</p>
                  </div>
                  <ul className="mt-3 list-disc pl-5 text-sm text-slate-700 space-y-2">
                    {study.passageNotes.slice(0, 3).map((note) => <li key={note}>{note}</li>)}
                  </ul>
                  {study.workbook?.slice(0, 3).map((section) => (
                    <details key={section.title} className="group mt-3 bg-slate-50 border border-slate-200 rounded-xl overflow-hidden">
                      <summary className="cursor-pointer list-none px-3 py-2 flex items-center justify-between gap-3">
                        <strong className="text-sm text-slate-900">{section.title}</strong>
                        <ChevronDown className="w-4 h-4 text-indigo-600 transition-transform group-open:rotate-180" />
                      </summary>
                      <div className="px-3 pb-3 text-sm text-slate-700 leading-relaxed">
                        <p className="mb-2">{section.description}</p>
                        <ul className="list-disc pl-5 space-y-1.5">
                          {section.items.slice(0, 3).map((item) => <li key={item}>{item}</li>)}
                        </ul>
                      </div>
                    </details>
                  ))}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </aside>
  );
};

const AiInterpreter = ({ navigate }) => {
  const [storedInitial] = useState(getInitialWorkbookState);
  const [reference, setReference] = useState(storedInitial.reference || "");
  const [notes, setNotes] = useState(storedInitial.notes || "");
  const [manualGenre, setManualGenre] = useState(storedInitial.manualGenre || "auto");
  const [learningLevel, setLearningLevel] = useState(storedInitial.learningLevel || defaultLearningLevel);
  const [started, setStarted] = useState(Boolean(storedInitial.started));
  const [summaryBuilt, setSummaryBuilt] = useState(Boolean(storedInitial.summaryBuilt));
  const [copyStatus, setCopyStatus] = useState("");
  const [responses, setResponses] = useState({
    ...emptyWorkbookResponses,
    ...(storedInitial.responses || {})
  });
  const [confidenceChecks, setConfidenceChecks] = useState({
    ...getDefaultConfidenceChecks(),
    ...(storedInitial.confidenceChecks || {})
  });

  const analysis = analyzeWorkbookReference(reference, manualGenre);
  const activeConfig = workbookGenreConfig[analysis.genre];
  const canShowWorkbook = started && activeConfig && !analysis.needsChapter;
  const ruleKeys = canShowWorkbook ? getWorkbookRuleKeys(analysis) : [];
  const summaryMarkdown = getWorkbookSummaryMarkdown({ reference, notes, analysis, responses, confidenceChecks, learningLevel });
  const ActiveIcon = workbookGenreOptions.find((genre) => genre.value === analysis.genre)?.icon || FileText;

  useEffect(() => {
    try {
      window.localStorage.setItem(workbookStorageKey, JSON.stringify({
        reference,
        notes,
        manualGenre,
        learningLevel,
        started,
        summaryBuilt,
        responses,
        confidenceChecks
      }));
    } catch {
      // Local storage is only a convenience for returning from guide pages.
    }
  }, [reference, notes, manualGenre, learningLevel, started, summaryBuilt, responses, confidenceChecks]);

  const updateResponse = (key, value) => {
    setResponses((current) => ({ ...current, [key]: value }));
    setSummaryBuilt(false);
  };

  const handleStart = () => {
    if (!reference.trim()) return;
    setStarted(true);
    setSummaryBuilt(false);
    setCopyStatus("");
  };

  const handleReset = () => {
    try {
      window.localStorage.removeItem(workbookStorageKey);
    } catch {
      // Ignore storage failures; the visible state still resets.
    }
    setReference("");
    setNotes("");
    setManualGenre("auto");
    setLearningLevel(defaultLearningLevel);
    setStarted(false);
    setSummaryBuilt(false);
    setCopyStatus("");
    setResponses(emptyWorkbookResponses);
    setConfidenceChecks(getDefaultConfidenceChecks());
  };

  const handleCopySummary = async () => {
    try {
      await navigator.clipboard.writeText(summaryMarkdown);
      setCopyStatus("Summary copied.");
    } catch {
      setCopyStatus("Copy failed. You can select the summary text manually.");
    }
  };

  const handlePrintSummary = () => {
    setSummaryBuilt(true);
    setTimeout(() => window.print(), 50);
  };

  const handleExportMarkdown = () => {
    const slug = (reference.trim() || "guided-hermeneutics-summary")
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, "-")
      .replace(/^-|-$/g, "");
    downloadTextFile(`${slug || "guided-hermeneutics-summary"}.md`, summaryMarkdown);
  };

  const workbookSteps = activeConfig ? [
    { key: "context", title: "Context", prompt: activeConfig.prompts.context, levelPrompt: getWorkbookLevelPrompt("context", learningLevel) },
    { key: "observation", title: "Observation", prompt: activeConfig.prompts.observation, levelPrompt: getWorkbookLevelPrompt("observation", learningLevel) },
    { key: "genreRules", title: "Genre Rules", prompt: activeConfig.prompts.genreRules, levelPrompt: getWorkbookLevelPrompt("genreRules", learningLevel) },
    { key: "interpretation", title: "Interpretation", prompt: activeConfig.prompts.interpretation, levelPrompt: getWorkbookLevelPrompt("interpretation", learningLevel) },
    { key: "application", title: "Application", prompt: activeConfig.prompts.application, levelPrompt: getWorkbookLevelPrompt("application", learningLevel) },
    { key: "commonMistakes", title: "Common Mistakes", prompt: activeConfig.prompts.commonMistakes, levelPrompt: getWorkbookLevelPrompt("commonMistakes", learningLevel) }
  ] : [];

  return (
    <div className="animate-in fade-in duration-500">
      <div className="mb-8 no-print">
        <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Interactive Workbook</div>
        <H1>Guided Hermeneutics Workbook</H1>
      </div>

      <div className="no-print">
        <P>
          This tool uses no AI and no API. It helps you interpret by walking through the principles in this guide. The app detects the likely genre, gives genre-specific prompts, and then compiles your own notes into a summary.
        </P>

        <div className="bg-emerald-50 border border-emerald-200 rounded-2xl p-5 mb-8 shadow-sm">
          <strong className="text-emerald-900 block mb-2">No-AI Promise</strong>
          <p className="text-sm text-slate-700 leading-relaxed">
            The workbook does not generate an interpretation for you. It gives questions, warnings, and structure so that you practice sound interpretation yourself.
          </p>
        </div>

        <div className="bg-white p-6 md:p-8 rounded-2xl shadow-lg border border-slate-100 my-8">
          <div className="grid md:grid-cols-[1.2fr_0.8fr] gap-5 mb-5">
            <div>
              <label className="block text-sm font-bold text-indigo-900 mb-3 uppercase tracking-wide">Bible Reference</label>
              <input
                type="text"
                value={reference}
                onChange={(e) => {
                  setReference(e.target.value);
                  setStarted(false);
                  setSummaryBuilt(false);
                  setCopyStatus("");
                }}
                placeholder="e.g., Psalm 42, Romans 12:1-2, Daniel 7..."
                className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all text-lg"
                onKeyDown={(e) => e.key === "Enter" && handleStart()}
              />
            </div>
            <div>
              <label className="block text-sm font-bold text-indigo-900 mb-3 uppercase tracking-wide">Manual Genre Override</label>
              <select
                value={manualGenre}
                onChange={(e) => {
                  setManualGenre(e.target.value);
                  setStarted(false);
                  setSummaryBuilt(false);
                }}
                className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all text-lg"
              >
                <option value="auto">Auto-detect</option>
                {workbookGenreOptions.map((genre) => (
                  <option key={genre.value} value={genre.value}>{genre.label}</option>
                ))}
              </select>
            </div>
          </div>

          <label className="block text-sm font-bold text-indigo-900 mb-3 uppercase tracking-wide">Optional Notes or Initial Observations</label>
          <textarea
            value={notes}
            onChange={(e) => {
              setNotes(e.target.value);
              setSummaryBuilt(false);
            }}
            rows={4}
            placeholder="Add repeated words, questions, historical notes, first impressions, or things you want to test..."
            className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all text-base leading-relaxed"
          />

          <LearningLevelSelector
            value={learningLevel}
            onChange={(level) => {
              setLearningLevel(level);
              setSummaryBuilt(false);
            }}
          />

          <div className="mt-5 flex flex-col sm:flex-row gap-3">
            <button
              onClick={handleStart}
              disabled={!reference.trim()}
              className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:from-indigo-700 hover:to-purple-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg"
            >
              <Search className="w-5 h-5" />
              Start Workbook
            </button>
            <button
              onClick={handleReset}
              className="bg-white border-2 border-slate-200 text-slate-700 px-6 py-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:border-indigo-400 hover:text-indigo-700 transition-all shadow-sm"
            >
              <RotateCcw className="w-5 h-5" />
              Reset
            </button>
          </div>
        </div>
      </div>

      {started && (
        <div className="no-print bg-white border border-slate-200 rounded-2xl p-5 shadow-sm mb-8">
          <div className="flex flex-col md:flex-row md:items-start gap-4">
            <div className="bg-indigo-100 text-indigo-700 w-12 h-12 rounded-xl flex items-center justify-center shrink-0">
              <ActiveIcon className="w-6 h-6" />
            </div>
            <div className="flex-1">
              <strong className="text-indigo-950 block text-xl mb-1">{activeConfig?.label || "Genre Needed"}</strong>
              <p className="text-sm text-slate-700 leading-relaxed mb-3">{activeConfig?.summary || "Choose a manual genre to continue."}</p>
              {analysis.parsed?.bookData && (
                <div className="grid md:grid-cols-3 gap-3 text-sm mb-3">
                  <div className="bg-slate-50 border border-slate-100 rounded-xl p-3"><strong className="block text-slate-900">Book</strong>{analysis.parsed.bookData.name}</div>
                  <div className="bg-slate-50 border border-slate-100 rounded-xl p-3"><strong className="block text-slate-900">Author</strong>{analysis.parsed.bookData.author}</div>
                  <div className="bg-slate-50 border border-slate-100 rounded-xl p-3"><strong className="block text-slate-900">Audience</strong>{analysis.parsed.bookData.audience}</div>
                </div>
              )}
              {analysis.note && (
                <div className={`${analysis.needsChapter || analysis.mixed ? "bg-amber-50 border-amber-200 text-amber-900" : "bg-indigo-50 border-indigo-100 text-indigo-900"} border rounded-xl p-4 text-sm leading-relaxed`}>
                  <strong className="block mb-1">{analysis.mixed ? "Mixed Genre Notice" : analysis.manualOverride ? "Manual Override" : "Detection Note"}</strong>
                  {analysis.note}
                </div>
              )}
              {activeConfig && !analysis.needsChapter && (
                <div className="mt-4 flex flex-col sm:flex-row sm:items-center gap-3">
                  <button
                    onClick={() => navigate(activeConfig.pageId)}
                    className="bg-indigo-50 border border-indigo-100 text-indigo-800 px-4 py-3 rounded-xl font-bold text-sm hover:bg-indigo-100 transition-colors"
                  >
                    Open Full Guide Page
                  </button>
                  <span className="text-xs text-slate-500 leading-relaxed">Your workbook entries stay here when you return.</span>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {started && analysis.needsChapter && (
        <div className="no-print bg-amber-50 border border-amber-200 rounded-2xl p-5 shadow-sm mb-8">
          <strong className="text-amber-950 block text-lg mb-2">Daniel Needs a Chapter</strong>
          <p className="text-sm text-slate-700 leading-relaxed">
            Try a reference like Daniel 1, Daniel 2, Daniel 7, or Daniel 9. Daniel contains historical narrative, mixed court-story visions, prayer-context prophecy, and apocalyptic prophecy.
          </p>
        </div>
      )}

      {canShowWorkbook && (
        <div className="no-print">
          <details className="lg:hidden mb-8 bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden" open>
            <summary className="flex items-center justify-between gap-3 px-5 py-4 cursor-pointer text-indigo-950 font-black">
              <span>Reference Shelf</span>
              <ChevronDown className="w-5 h-5" />
            </summary>
            <div className="border-t border-slate-100">
              <WorkbookReferenceShelf analysis={analysis} activeConfig={activeConfig} ruleKeys={ruleKeys} learningLevel={learningLevel} />
            </div>
          </details>
          <div className="grid lg:grid-cols-[minmax(0,1fr)_420px] gap-6 items-start">
            <div>
              <H2>Guided Workflow</H2>
              <div className="grid md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4 mb-10">
                {workbookSteps.map((step, index) => (
                  <div key={step.key} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
                    <div className="flex items-center gap-3 mb-3">
                      <span className="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold shrink-0">{index + 1}</span>
                      <strong className="text-indigo-950 text-lg">{step.title}</strong>
                    </div>
                    <p className="text-sm text-slate-700 leading-relaxed mb-4">{step.prompt}</p>
                    <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-3 mb-4 text-sm text-slate-700 leading-relaxed">
                      <strong className="text-indigo-900 block mb-1">{getLearningLevelLabel(learningLevel)} Focus</strong>
                      {step.levelPrompt}
                    </div>
                    <WorkbookStepHelp stepKey={step.key} activeConfig={activeConfig} analysis={analysis} learningLevel={learningLevel} />
                    <textarea
                      value={responses[step.key]}
                      onChange={(e) => updateResponse(step.key, e.target.value)}
                      rows={5}
                      placeholder={`Write your ${step.title.toLowerCase()} notes here...`}
                      className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all text-sm leading-relaxed"
                    />
                  </div>
                ))}
              </div>

              <div className="bg-white border border-emerald-200 rounded-2xl p-5 shadow-sm mb-10">
                <div className="flex items-start gap-3 mb-4">
                  <div className="bg-emerald-100 text-emerald-700 w-10 h-10 rounded-xl flex items-center justify-center shrink-0">
                    <CheckCircle2 className="w-5 h-5" />
                  </div>
                  <div>
                    <strong className="text-emerald-950 block text-lg">Confidence Checklist</strong>
                    <p className="text-sm text-slate-700 leading-relaxed">Check these before building the summary. They will appear in the copied, printed, and Markdown export.</p>
                  </div>
                </div>
                <div className="grid md:grid-cols-2 gap-3">
                  {workbookConfidenceItems.map((item) => (
                    <label key={item.key} className="flex items-start gap-3 bg-emerald-50 border border-emerald-100 rounded-xl p-3 text-sm text-slate-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={Boolean(confidenceChecks[item.key])}
                        onChange={(e) => {
                          setConfidenceChecks((current) => ({ ...current, [item.key]: e.target.checked }));
                          setSummaryBuilt(false);
                        }}
                        className="mt-1 h-4 w-4 accent-emerald-600"
                      />
                      <span>{item.label}</span>
                    </label>
                  ))}
                </div>
              </div>

              <div className="bg-slate-900 text-white rounded-2xl p-6 shadow-xl mb-10">
                <strong className="text-emerald-300 block text-lg mb-2">Ready to Compile?</strong>
                <p className="text-sm text-slate-100 leading-relaxed mb-4">
                  Build My Summary will not invent content. It will assemble the reference, detected genre, book context, selected guide prompts, and your own worksheet entries.
                </p>
                <button
                  onClick={() => setSummaryBuilt(true)}
                  className="bg-emerald-400 text-slate-950 px-6 py-3 rounded-xl font-black hover:bg-emerald-300 transition-colors shadow-md"
                >
                  Build My Summary
                </button>
              </div>
            </div>

            <div className="hidden lg:block">
              <WorkbookReferenceShelf analysis={analysis} activeConfig={activeConfig} ruleKeys={ruleKeys} learningLevel={learningLevel} />
            </div>
          </div>

          <H2>Core Genre Rule Prompts</H2>
          <div className="space-y-4 mb-10">
            {ruleKeys.map((key) => {
              const guidance = getWorkbookRuleGuidance(key);
              if (!guidance) return null;
              return (
                <div key={key} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
                  <strong className="text-indigo-950 block text-lg mb-2">{key}</strong>
                  <RuleGuidance {...guidance} />
                </div>
              );
            })}
          </div>
        </div>
      )}

      {summaryBuilt && (
        <div className="print-summary bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-100">
          <div className="bg-gradient-to-r from-indigo-900 to-purple-900 px-6 md:px-8 py-6 text-white flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div className="flex items-center gap-3">
              <FileText className="w-6 h-6 text-indigo-300" />
              <div>
                <h3 className="text-xl font-bold">Guided Summary: {reference || "Untitled Passage"}</h3>
                <p className="text-sm text-indigo-100">Compiled from your notes. Not AI-generated.</p>
              </div>
            </div>
            <div className="no-print flex flex-wrap gap-2">
              <button onClick={handleCopySummary} className="bg-white/10 border border-white/20 text-white px-4 py-2 rounded-xl font-bold text-sm hover:bg-white/20 flex items-center gap-2">
                <Clipboard className="w-4 h-4" />
                Copy
              </button>
              <button onClick={handlePrintSummary} className="bg-white/10 border border-white/20 text-white px-4 py-2 rounded-xl font-bold text-sm hover:bg-white/20 flex items-center gap-2">
                <Printer className="w-4 h-4" />
                Print
              </button>
              <button onClick={handleExportMarkdown} className="bg-white/10 border border-white/20 text-white px-4 py-2 rounded-xl font-bold text-sm hover:bg-white/20 flex items-center gap-2">
                <Download className="w-4 h-4" />
                Markdown
              </button>
            </div>
          </div>
          <div className="p-6 md:p-8 bg-slate-50">
            {copyStatus && <div className="no-print mb-4 bg-emerald-50 border border-emerald-100 text-emerald-900 rounded-xl p-3 text-sm font-bold">{copyStatus}</div>}
            <pre className="whitespace-pre-wrap text-sm md:text-base leading-relaxed text-slate-800 bg-white border border-slate-200 rounded-2xl p-5 font-sans shadow-sm">
              {summaryMarkdown}
            </pre>
          </div>
        </div>
      )}
    </div>
  );
};

const epistlesData = [
  { name: "Romans", year: "c. AD 57", occasion: "Paul wrote to prepare for his upcoming visit to Rome, to present a comprehensive summary of his gospel, and to address tensions between Jewish and Gentile believers in the Roman church." },
  { name: "1 Corinthians", year: "c. AD 53-55", occasion: "Paul wrote to address severe problems reported by Chloe's household (divisions, sexual immorality, lawsuits) and to answer specific questions the church had written to him regarding marriage, food offered to idols, and spiritual gifts." },
  { name: "2 Corinthians", year: "c. AD 55-56", occasion: "Written after a painful visit, Paul writes to express joy at their repentance, to encourage the collection for the poor in Jerusalem, and to fiercely defend his apostolic authority against invading 'super-apostles'." },
  { name: "Galatians", year: "c. AD 48-49", occasion: "False teachers (Judaizers) had infiltrated the churches in Galatia, convincing Gentile Christians that they needed to be circumcised and obey the Mosaic Law to be truly saved. Paul wrote a fiery defense of justification by faith alone." },
  { name: "Ephesians", year: "c. AD 60-62", occasion: "Written from prison as a circular letter to churches in Asia Minor to encourage unity in Christ, explain the believer's spiritual blessings, and equip them for spiritual warfare." },
  { name: "Philippians", year: "c. AD 60-62", occasion: "Written from prison to thank the church for their generous financial gift, to update them on his circumstances, to warn against false teachers, and to encourage unity and joy." },
  { name: "Colossians", year: "c. AD 60-62", occasion: "Written from prison to combat the 'Colossian heresy' (a dangerous mix of Jewish legalism, asceticism, and early Gnosticism) by exalting the absolute supremacy and sufficiency of Jesus Christ." },
  { name: "1 Thessalonians", year: "c. AD 50-51", occasion: "Paul wrote to encourage newly converted believers who were facing severe persecution, to defend his motives, and to comfort them regarding the fate of Christians who had died before the Second Coming." },
  { name: "2 Thessalonians", year: "c. AD 51-52", occasion: "Written shortly after his first letter to correct false teaching that the 'Day of the Lord' had already come, to outline events preceding the end, and to discipline church members who were living in idleness." },
  { name: "1 Timothy", year: "c. AD 62-64", occasion: "Paul writes to his young protégé Timothy, instructing him on how to confront false teachers, organize public worship, and appoint qualified church leadership (elders and deacons) in Ephesus." },
  { name: "2 Timothy", year: "c. AD 64-67", occasion: "Paul's final letter, written from a cold Roman dungeon facing imminent execution. He writes to urge Timothy to remain faithful, endure suffering, and faithfully preach the Word in a time of growing apostasy." },
  { name: "Titus", year: "c. AD 62-64", occasion: "Paul writes to instruct Titus to appoint elders and organize the chaotic churches on the island of Crete, and to teach sound doctrine that leads to godly living." },
  { name: "Philemon", year: "c. AD 60-62", occasion: "A highly personal letter written from prison. Paul urges Philemon, a wealthy Christian, to forgive and welcome back his runaway slave, Onesimus, who had recently converted to Christ—receiving him now as a beloved brother." },
  { name: "Hebrews", year: "c. AD 60-69", occasion: "Written to Jewish Christians who were facing severe persecution and were tempted to abandon Christ and revert to Judaism. The author passionately argues for the absolute superiority of Christ over the angels, Moses, the priesthood, and the Old Covenant." },
  { name: "James", year: "c. AD 45-50", occasion: "Likely the earliest New Testament book, written to Jewish Christians scattered abroad to correct a misunderstanding of faith that lacked works. James addresses practical issues like trials, favoritism, the tongue, and wealth." },
  { name: "1 Peter", year: "c. AD 60-64", occasion: "Written to encourage Christians across Asia Minor who were facing intense societal marginalization and persecution. Peter reminds them of their 'living hope' and calls them to holy living as elect exiles." },
  { name: "2 Peter", year: "c. AD 64-68", occasion: "Written as Peter's farewell address to warn the church against stealthy false teachers who were denying the Second Coming of Christ and using God's grace as a license for immorality." },
  { name: "1 John", year: "c. AD 85-90", occasion: "Written to reassure believers of their salvation and to combat early proto-Gnostic false teachers who had left the church and were denying the physical incarnation of Jesus Christ." },
  { name: "2 John", year: "c. AD 85-90", occasion: "Written to 'the elect lady and her children' (likely a local church) warning them not to offer hospitality or a platform to traveling false teachers who deceive the flock." },
  { name: "3 John", year: "c. AD 85-90", occasion: "Written to commend a believer named Gaius for his faithful hospitality to traveling missionaries, and to condemn the dictatorial behavior of a church leader named Diotrephes." },
  { name: "Jude", year: "c. AD 65-80", occasion: "Jude intended to write a peaceful letter about salvation but urgently changed his topic, urging believers to 'contend for the faith' against stealthy false teachers who were perverting grace into sensuality." }
];

const EpistleOccasionGuide = () => {
  const [selectedEpistle, setSelectedEpistle] = useState(epistlesData[0].name);
  const epistle = epistlesData.find(e => e.name === selectedEpistle);

  return (
    <div className="bg-white border border-slate-200 rounded-2xl p-6 mt-6 shadow-sm">
      <div className="flex items-center gap-3 mb-5 border-b border-slate-100 pb-4">
        <div className="bg-indigo-100 p-2 rounded-lg text-indigo-700">
          <BookOpen className="w-5 h-5" />
        </div>
        <h4 className="font-bold text-slate-800 text-lg">Epistle Occasion & Dating Guide</h4>
      </div>
      
      <div className="flex flex-col md:flex-row gap-6">
        <div className="w-full md:w-1/3">
          <label className="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Select an Epistle</label>
          <select 
            className="w-full bg-slate-50 border border-slate-300 text-slate-800 text-sm rounded-xl focus:ring-indigo-500 focus:border-indigo-500 block p-3 font-medium outline-none cursor-pointer"
            value={selectedEpistle}
            onChange={(e) => setSelectedEpistle(e.target.value)}
          >
            {epistlesData.map((e) => (
              <option key={e.name} value={e.name}>{e.name}</option>
            ))}
          </select>
        </div>
        
        <div className="w-full md:w-2/3 bg-slate-50 rounded-xl p-5 border border-slate-100 relative overflow-hidden">
          <div className="absolute top-0 left-0 w-1 h-full bg-indigo-500"></div>
          <div className="flex justify-between items-start mb-3">
            <h5 className="font-bold text-indigo-950 text-xl">{epistle.name}</h5>
            <span className="bg-indigo-100 text-indigo-800 text-xs font-bold px-3 py-1.5 rounded-full border border-indigo-200">
              {epistle.year}
            </span>
          </div>
          <p className="text-sm text-slate-700 leading-relaxed">
            <strong className="text-slate-900">Historical Occasion:</strong> {epistle.occasion}
          </p>
        </div>
      </div>
    </div>
  );
};

const EpistleLearningPath = ({ navigate }) => {
  const steps = [
    { title: "Learn how letters work", body: "Start with occasion, audience, and whole-letter movement.", target: null },
    { title: "Prepare with grammar", body: "Use grammar and conjunctions only enough to divide the passage well.", target: "grammar-conjunctions" },
    { title: "Start with phrasing", body: "Phrasing is usually the easiest first diagramming method.", target: "phrasing" },
    { title: "Try arcing or bracketing later", body: "Use these when the argument is layered or you need a cleaner outline.", target: "arcing" },
    { title: "Use reference shelves only when stuck", body: "Relationship lists are tools, not the lesson itself.", target: "phrasing-relationships" },
    { title: "Finish with Romans 12", body: "Use the case study to see everything working together.", target: "epistles-case-study" }
  ];

  return (
    <div className="bg-white border border-indigo-100 rounded-2xl p-5 shadow-sm my-8">
      <strong className="text-indigo-950 block text-lg mb-4">Recommended Learning Path</strong>
      <div className="grid md:grid-cols-2 gap-3">
        {steps.map((step, index) => (
          <div key={step.title} className="bg-indigo-50 border border-indigo-100 rounded-xl p-4">
            <div className="flex items-start gap-3">
              <span className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold shrink-0">{index + 1}</span>
              <div>
                <strong className="text-indigo-900 block mb-1">{step.title}</strong>
                <p className="text-sm text-slate-700 leading-relaxed">{step.body}</p>
                {step.target && navigate && (
                  <button
                    type="button"
                    onClick={() => navigate(step.target)}
                    className="mt-3 text-xs font-bold uppercase tracking-widest text-indigo-700 hover:text-indigo-950"
                  >
                    Open page
                  </button>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const EpistleLetterFormSummary = () => (
  <div className="mt-4 bg-slate-50 border border-slate-200 rounded-xl p-5 shadow-sm">
    <strong className="text-indigo-900 block text-base mb-3">Simple Letter Map</strong>
    <div className="grid md:grid-cols-4 gap-3 text-sm">
      <div className="bg-white border border-slate-100 rounded-xl p-4 shadow-sm">
        <strong className="text-slate-900 block mb-1">Opening</strong>
        Sender, recipients, grace, peace, and identity clues.
      </div>
      <div className="bg-white border border-slate-100 rounded-xl p-4 shadow-sm">
        <strong className="text-slate-900 block mb-1">Prayer</strong>
        Thanksgiving, intercession, and early hints about the letter's burden.
      </div>
      <div className="bg-white border border-slate-100 rounded-xl p-4 shadow-sm">
        <strong className="text-slate-900 block mb-1">Body</strong>
        Theology, correction, argument, warning, and pastoral appeal.
      </div>
      <div className="bg-white border border-slate-100 rounded-xl p-4 shadow-sm">
        <strong className="text-slate-900 block mb-1">Closing</strong>
        Travel plans, greetings, commendations, final commands, and blessing.
      </div>
    </div>
  </div>
);

const epistleRhetoricalColorStyles = {
  indigo: { section: "bg-indigo-50 border-indigo-200", title: "text-indigo-950", chip: "bg-indigo-600" },
  purple: { section: "bg-purple-50 border-purple-200", title: "text-purple-950", chip: "bg-purple-600" },
  emerald: { section: "bg-emerald-50 border-emerald-200", title: "text-emerald-950", chip: "bg-emerald-600" },
  rose: { section: "bg-rose-50 border-rose-200", title: "text-rose-950", chip: "bg-rose-600" },
  amber: { section: "bg-amber-50 border-amber-200", title: "text-amber-950", chip: "bg-amber-600" }
};

const epistleRhetoricalFormGroups = [
  {
    group: "Structural Forms",
    description: "These forms show how a passage is arranged so readers can see the center, boundary, or repeated topic.",
    color: "indigo",
    forms: [
      {
        name: "Chiasm / Chiasmus",
        definition: "A mirrored structure where ideas appear and then return in reverse order, often as A-B-C-B'-A'.",
        lookFor: "Repeated words or ideas arranged in reverse order, with a center that receives special emphasis.",
        why: "It can show the turning point or central burden of a paragraph.",
        example: "Philemon can be read as a carefully balanced appeal that centers on receiving Onesimus as a beloved brother."
      },
      {
        name: "Inclusio / Bookending",
        definition: "A section begins and ends with the same word, phrase, or idea.",
        lookFor: "Matching opening and closing ideas that frame everything between them.",
        why: "It marks the boundaries of a unit and tells you what holds the passage together.",
        example: "James 2 frames its discussion with faith and works so the whole unit answers what living faith looks like."
      },
      {
        name: "Topos / Repeated Topic",
        definition: "A recognizable topic is treated as a sustained unit of instruction.",
        lookFor: "A paragraph group that keeps returning to one issue, such as food, gifts, suffering, money, or false teaching.",
        why: "It keeps you from isolating one sentence from the larger treatment of the issue.",
        example: "1 Corinthians 8-10 treats idol food, conscience, love, freedom, and idolatry as one sustained pastoral topic."
      }
    ]
  },
  {
    group: "Argument Forms",
    description: "These forms prove a point, answer an objection, defend a ministry, or expose false reasoning.",
    color: "purple",
    forms: [
      {
        name: "Diatribe / Question-Answer",
        definition: "The author raises an imagined question or objection and then answers it.",
        lookFor: "Rhetorical questions, imagined opponents, and short replies that move the argument forward.",
        why: "It helps you hear the argument as persuasion, not as random topic changes.",
        example: "Romans repeatedly asks and answers objections so readers cannot misuse grace, law, or election."
      },
      {
        name: "Apologia / Defense",
        definition: "A formal defense of an apostle's ministry, motives, authority, or gospel.",
        lookFor: "Personal explanation, appeal to witnesses, defense against accusation, and strong contrasts with opponents.",
        why: "It shows why biography and theology are tied together in the letter.",
        example: "2 Corinthians 10-13 defends Paul's apostolic ministry against rival claims in Corinth."
      },
      {
        name: "Syncrisis / Comparison",
        definition: "A side-by-side comparison that shows one person, covenant, office, or reality is greater than another.",
        lookFor: "Better-than, greater-than, like/unlike, old/new, former/final, or shadow/substance comparisons.",
        why: "It reveals the author's central contrast and prevents flattening two things into the same category.",
        example: "Hebrews compares Jesus with angels, Moses, priests, and sacrifices to show His superiority."
      },
      {
        name: "Typology / Midrash",
        definition: "The author uses Old Testament persons, events, or institutions as patterns that instruct the new-covenant people.",
        lookFor: "Old Testament stories applied to the church, especially with warning, fulfillment, or pattern language.",
        why: "It lets Scripture interpret Scripture without inventing hidden meanings.",
        example: "1 Corinthians 10 uses Israel's wilderness story as a warning for the Corinthian church."
      },
      {
        name: "Reductio ad Absurdum",
        definition: "The author shows that a false claim leads to an impossible or destructive conclusion.",
        lookFor: "If-this-then-that logic that exposes where an argument collapses.",
        why: "It helps you see why the author thinks an error is not merely incomplete but disastrous.",
        example: "1 Corinthians 15 argues that denying resurrection empties preaching, faith, and Christian hope."
      }
    ]
  },
  {
    group: "Teaching and Exhortation Forms",
    description: "These forms train the church in practical obedience, shared life, and doctrinal memory.",
    color: "emerald",
    forms: [
      {
        name: "Paraenesis",
        definition: "A compact chain of moral exhortations or community instructions.",
        lookFor: "Short commands, rapid imperatives, and practical instructions clustered together.",
        why: "It shows how the gospel becomes ordinary habits, speech, relationships, and worship.",
        example: "Romans 12:9-21 gives a concentrated picture of sincere love in action."
      },
      {
        name: "Vice and Virtue Lists",
        definition: "Lists of behaviors to reject and qualities to cultivate.",
        lookFor: "Catalogs of sins, virtues, fruit, works, old-life patterns, or new-life habits.",
        why: "They show the moral contrast between the old age and life in Christ.",
        example: "Galatians 5 contrasts the works of the flesh with the fruit of the Spirit."
      },
      {
        name: "Household Codes",
        definition: "Instructions for relationships within households, reshaped by allegiance to Christ.",
        lookFor: "Commands to spouses, children, parents, enslaved persons, masters, or household leaders.",
        why: "They show how the gospel reorders power, responsibility, love, and service in real social structures.",
        example: "Ephesians 5-6 and Colossians 3 address household relationships under the lordship of Christ."
      },
      {
        name: "Hymns, Creeds, and Confessions",
        definition: "Compact worship or confession material that summarizes Christ, salvation, or the gospel.",
        lookFor: "Rhythmic, elevated, memorable statements about Christ's identity and work.",
        why: "They often carry dense theology in a form meant to be confessed, sung, remembered, and obeyed.",
        example: "Philippians 2:6-11 uses Christ's humiliation and exaltation to shape humble community life."
      }
    ]
  },
  {
    group: "Sound and Emphasis Forms",
    description: "These forms shape rhythm, emotional force, and memorable emphasis, especially because letters were read aloud.",
    color: "rose",
    forms: [
      {
        name: "Anaphora",
        definition: "Repeating the same word or phrase at the beginning of successive clauses.",
        lookFor: "Repeated openings that create rhythm, emphasis, or accumulation.",
        why: "It slows the reader down and marks the repeated idea as important.",
        example: "1 Corinthians 13 repeats love language to press the character of love into the hearers."
      },
      {
        name: "Prosopopoeia / Personification",
        definition: "Giving voice, agency, or human-like action to an abstract concept, absent person, or power.",
        lookFor: "Sin, death, law, wisdom, creation, or another concept acting like a personal agent.",
        why: "It helps readers feel the power or drama of a theological reality.",
        example: "Romans 5-7 portrays Sin and Death as ruling powers that reign, deceive, and enslave."
      },
      {
        name: "Asyndeton",
        definition: "Omitting conjunctions to create speed, urgency, or a piling-up effect.",
        lookFor: "Rapid lists where items arrive without normal connectors.",
        why: "It can make a vice list feel relentless or an exhortation feel urgent.",
        example: "Romans 1 piles up descriptions of corruption so the effect feels overwhelming."
      }
    ]
  },
  {
    group: "Letter-Closing Forms",
    description: "These forms are not throwaway endings; they often summarize theology, strengthen relationships, and locate the church inside a wider mission network.",
    color: "amber",
    forms: [
      {
        name: "Doxology",
        definition: "A burst of praise directed to God.",
        lookFor: "Glory, praise, wisdom, power, dominion, forever, and worshipful conclusion.",
        why: "It shows that doctrine and exhortation should end in worship.",
        example: "Romans 11 closes Paul's argument about mercy with praise before moving into ethical appeal."
      },
      {
        name: "Benediction",
        definition: "A blessing or prayer pronounced over the readers.",
        lookFor: "Grace, peace, love, fellowship, sanctification, perseverance, and God's presence.",
        why: "It reminds readers that obedience depends on God's continuing grace.",
        example: "2 Corinthians 13 closes with a blessing centered on grace, love, and fellowship."
      },
      {
        name: "Greetings and Commendations",
        definition: "Named greetings, endorsed messengers, and relational notes in a letter's closing.",
        lookFor: "Names, coworkers, hosts, letter carriers, churches, travel plans, and requests for welcome.",
        why: "They show the embodied network of gospel partnership behind the letter.",
        example: "Romans 16 commends Phoebe and greets many coworkers, revealing a broad ministry network."
      }
    ]
  }
];

const logicalRelationships = [
  { name: "Series", code: "S", family: "Coordinate", signals: "and, also, moreover, neither/nor", question: "Are these items simply listed together?", example: "Mercy, worship, mind, and will may appear as linked ideas." },
  { name: "Progression", code: "P", family: "Coordinate", signals: "then, furthermore, next, and then", question: "Does one line move the thought forward toward a climax?", example: "Mercy leads to offering, then to discernment." },
  { name: "Alternative", code: "A", family: "Coordinate", signals: "or, either/or, on the other hand", question: "Does the text give different possible paths?", example: "Conformed to this age or transformed by renewal." },
  { name: "Action-Manner / Means", code: "Ac/Mn", family: "Support by Restatement", signals: "by, through, in this way, participles", question: "Does one line show how an action is carried out?", example: "Transformation happens by renewal of the mind." },
  { name: "Comparison", code: "Cf", family: "Support by Restatement", signals: "as, like, just as, even as", question: "Are two things being likened?", example: "Living sacrifice language compares Christian life to worship." },
  { name: "Negative-Positive", code: "-/+", family: "Support by Restatement", signals: "not/but, rather, instead", question: "Is one statement denied so the other is enforced?", example: "Do not be conformed, but be transformed." },
  { name: "Idea-Explanation", code: "Id/Exp", family: "Support by Restatement", signals: "that is, in other words, for, because", question: "Does one line clarify the meaning of another?", example: "A living sacrifice is explained as worship." },
  { name: "Question-Answer", code: "Q/A", family: "Support by Restatement", signals: "question and reply", question: "Does one line ask and another answer?", example: "What does renewal produce? Discernment." },
  { name: "Ground", code: "G", family: "Support by Distinct Statement", signals: "for, because, since, due to", question: "Does one line give the reason for another?", example: "The mercies of God ground the appeal." },
  { name: "Inference", code: "Inf", family: "Support by Distinct Statement", signals: "therefore, accordingly, so, consequently", question: "Does one line draw a conclusion from another?", example: "Because of mercy, therefore present your bodies." },
  { name: "Bilateral", code: "BL", family: "Support by Distinct Statement", signals: "for, because, therefore, so", question: "Does one proposition support both the line before and the line after it?", example: "A middle reason can explain a command and prepare the next command." },
  { name: "Action-Result", code: "Ac/Res", family: "Support by Distinct Statement", signals: "so that, with the result that, that", question: "Does one action produce an outcome?", example: "Renewal results in testing and approving God's will." },
  { name: "Action-Purpose", code: "Ac/Pur", family: "Support by Distinct Statement", signals: "in order that, so that, lest, in order to", question: "Does one action state the intended goal?", example: "Be transformed so that you may discern God's will." },
  { name: "Conditional", code: "If/Th", family: "Support by Distinct Statement", signals: "if/then, unless, provided that, except", question: "Does one line state an if-then relationship?", example: "If the mind is renewed, discernment follows." },
  { name: "Temporal", code: "T", family: "Support by Distinct Statement", signals: "when, whenever, after, before, while", question: "Does one line tell when another happens?", example: "After the mercies are explained, the appeal begins." },
  { name: "Locative", code: "L", family: "Support by Distinct Statement", signals: "where, wherever, in, among", question: "Does one line tell where something happens?", example: "Some texts locate action in Christ, in the church, or in the world." },
  { name: "Concessive", code: "Csv", family: "Support by Contrary Statement", signals: "although, though, yet, nevertheless, however", question: "Does one line concede something while another remains true?", example: "Even amid pressure from this age, transformation is possible." },
  { name: "Situation-Response", code: "Sit/R", family: "Support by Contrary Statement", signals: "and, yet, but", question: "Does a situation receive a surprising or counter-intuitive response?", example: "God's mercy is offered, and human resistance may still appear." }
];

const relationshipFamilies = [
  {
    name: "Coordinate",
    range: "1-3",
    summary: "The lines stand beside one another. Neither line is clearly subordinate to the other.",
    color: "indigo"
  },
  {
    name: "Support by Restatement",
    range: "4-8",
    summary: "One line clarifies, restates, compares, contrasts, or answers another line.",
    color: "emerald"
  },
  {
    name: "Support by Distinct Statement",
    range: "9-16",
    summary: "One line supports another by giving a reason, conclusion, result, purpose, condition, time, or location.",
    color: "amber"
  },
  {
    name: "Support by Contrary Statement",
    range: "17-18",
    summary: "One line remains true even though another contrary circumstance is admitted.",
    color: "rose"
  }
];

const methodComparisonRows = [
  {
    method: "Arcing",
    bestFor: "Layered logic and tight arguments",
    display: "Curved arcs connect propositions.",
    beginnerMove: "Start by pairing nearby lines, then group those pairs into larger units.",
    caution: "Do not make the page look complex unless the logic actually requires it."
  },
  {
    method: "Bracketing",
    bestFor: "Tidy outlines and visual order",
    display: "Straight brackets group propositions.",
    beginnerMove: "Use the same labels as arcing, but stack the relationships vertically.",
    caution: "Do not confuse neat brackets with a settled interpretation; labels still need reasons."
  },
  {
    method: "Phrasing",
    bestFor: "Beginners, teaching notes, and sermon outlines",
    display: "Indentation shows main clauses and supporting phrases.",
    beginnerMove: "Keep main clauses on the left and indent whatever supports or modifies them.",
    caution: "Do not indent by instinct alone; ask what each phrase actually modifies."
  }
];

const beginnerEssentials = [
  {
    term: "Thought",
    plain: "One meaningful idea in the passage.",
    example: "God has shown mercy."
  },
  {
    term: "Clause",
    plain: "A group of words with a subject and a verb.",
    example: "Paul urges believers."
  },
  {
    term: "Main Clause",
    plain: "The line that can stand on its own and carries the sentence forward.",
    example: "Present your bodies."
  },
  {
    term: "Subordinate Clause",
    plain: "A clause that depends on another line to complete its meaning.",
    example: "So that you may discern God's will."
  },
  {
    term: "Phrase",
    plain: "A smaller word group that supports a clause but may not have its own subject and verb.",
    example: "By the mercies of God."
  },
  {
    term: "Proposition",
    plain: "A statement or command that makes one complete point.",
    example: "Be transformed by the renewing of your mind."
  },
  {
    term: "Support",
    plain: "A line that gives the reason, way, result, purpose, or explanation for another line.",
    example: "Mercy supports the appeal."
  },
  {
    term: "Relationship",
    plain: "The label that names how two lines connect.",
    example: "Ground, contrast, means, purpose."
  }
];

const everydayArgumentLines = [
  { id: "1", text: "I took an umbrella.", label: "Main action" },
  { id: "2", text: "because the clouds were dark.", label: "Ground" },
  { id: "3", text: "so that I would stay dry.", label: "Purpose" }
];

const grammarEssentials = [
  {
    title: "Main Clause",
    plain: "A clause that can stand by itself.",
    question: "Can this line make sense alone?",
    example: "Present your bodies."
  },
  {
    title: "Subordinate Clause",
    plain: "A clause that leans on another line.",
    question: "Does this line need another thought to complete it?",
    example: "So that you may discern God's will."
  },
  {
    title: "Phrase",
    plain: "A word group that adds detail but may not be a full clause.",
    question: "What line does this phrase describe, explain, or support?",
    example: "By the renewing of your mind."
  },
  {
    title: "Conjunction",
    plain: "A connector that often hints at a relationship.",
    question: "Does this word point backward, forward, or sideways?",
    example: "Therefore, but, for, because, so that."
  },
  {
    title: "Modifier",
    plain: "A word or phrase that adds detail to another word or line.",
    question: "What does this detail attach to?",
    example: "Living, holy, and pleasing describe the sacrifice."
  }
];

const grammarPracticePrompts = [
  {
    prompt: "I brought a lamp because the room was dark.",
    answer: "Main clause: I brought a lamp. Ground: because the room was dark."
  },
  {
    prompt: "Do not copy the pattern, but learn a new way.",
    answer: "Two coordinated commands stand in contrast: negative first, positive second."
  },
  {
    prompt: "Be transformed by renewed thinking so that you can discern wisely.",
    answer: "Main clause: Be transformed. Means: by renewed thinking. Purpose/result: so that you can discern wisely."
  }
];

const relationshipChooserQuestions = [
  { question: "Why is this true?", label: "Ground", example: "By the mercies of God grounds the appeal." },
  { question: "What happens because of this?", label: "Result", example: "Renewed thinking produces changed discernment." },
  { question: "What is the goal?", label: "Purpose", example: "Transformation aims at discerning God's will." },
  { question: "How does it happen?", label: "Means or Manner", example: "Transformation happens by renewed thinking." },
  { question: "When or where is it true?", label: "Temporal, Locative, or Context", example: "A phrase may locate action in time, place, or sphere." },
  { question: "What does this explain or restate?", label: "Explanation or Content", example: "Your worshipful service explains the living sacrifice." },
  { question: "What is being contrasted?", label: "Negative or Distinction", example: "Not conformed, but transformed." }
];

const relationshipFamilyStyles = {
  "Coordinate": "bg-indigo-50 border-indigo-200 text-indigo-900",
  "Support by Restatement": "bg-emerald-50 border-emerald-200 text-emerald-900",
  "Support by Distinct Statement": "bg-amber-50 border-amber-200 text-amber-900",
  "Support by Contrary Statement": "bg-rose-50 border-rose-200 text-rose-900"
};

const grammarBreakRules = [
  {
    component: "Verb",
    role: "Names an action or state of being.",
    rule: "New verbal ideas usually become new propositions.",
    example: "Paul urges; believers present; minds are renewed."
  },
  {
    component: "Subject",
    role: "Names who or what performs the verb.",
    rule: "Do not break off a subject by itself unless a larger clause requires it.",
    example: "Paul urges the brothers and sisters."
  },
  {
    component: "Object",
    role: "Names what receives the action.",
    rule: "Keep normal objects with their verbs unless the object becomes a complex phrase.",
    example: "Present your bodies."
  },
  {
    component: "Infinitive",
    role: "Uses a verbal idea as a purpose, result, or complement.",
    rule: "Break off purpose infinitives when they clarify the aim of the main action.",
    example: "He wrote to encourage the church."
  },
  {
    component: "Participle",
    role: "An -ing verbal form that can act like an adjective, noun, or adverb.",
    rule: "Break off adverbial participles when they explain how, why, or when the action happens.",
    example: "They served God, encouraging one another."
  },
  {
    component: "Relative Clause",
    role: "A clause introduced by who, which, that, or whom.",
    rule: "Break off complex or non-defining relative clauses when they carry interpretive weight.",
    example: "God, who is rich in mercy, made us alive."
  },
  {
    component: "Prepositional Phrase",
    role: "A phrase beginning with a preposition.",
    rule: "Break it off only when it significantly affects the logic of the text.",
    example: "By the mercies of God; by the renewing of your mind."
  }
];

const conjunctionLookup = [
  { signal: "and / also / moreover", likely: "Series or Progression", caution: "A simple 'and' can list, advance, or even create a surprising response. Context decides." },
  { signal: "for / because / since", likely: "Ground", caution: "Look backward: what claim is being supported?" },
  { signal: "therefore / accordingly / consequently", likely: "Inference", caution: "Look backward for the evidence that produced the conclusion." },
  { signal: "but / rather / instead", likely: "Negative-Positive or Alternative", caution: "Ask whether the author is contrasting, replacing, or offering options." },
  { signal: "so that / in order that / lest", likely: "Purpose or Result", caution: "Purpose asks intention; result asks outcome. Sometimes both are present." },
  { signal: "if / unless / provided that", likely: "Conditional", caution: "Identify both the condition and the consequence." },
  { signal: "when / after / before / while", likely: "Temporal", caution: "Do not treat a time marker as the main point." },
  { signal: "where / wherever / in", likely: "Locative or Context", caution: "Location may be physical, relational, or spiritual." },
  { signal: "although / though / nevertheless", likely: "Concessive", caution: "The main claim stands despite the contrary circumstance." },
  { signal: "by / through / in this way", likely: "Means or Manner", caution: "Ask whether the phrase names the instrument or the way the action happens." }
];

const phraseTypes = [
  { name: "Conjunction Phrase", description: "A phrase introduced by a connector that signals how lines relate." },
  { name: "Appositional Phrase", description: "A phrase that restates or renames another phrase." },
  { name: "Participle Phrase", description: "A verbal phrase that often explains manner, time, cause, or circumstance." },
  { name: "Infinitive Phrase", description: "A verbal phrase often used for purpose, result, or complement." },
  { name: "Prepositional Phrase", description: "A phrase that can express means, source, location, reference, advantage, and more." },
  { name: "Substantival Phrase", description: "A phrase functioning like a noun, often as a subject or object." },
  { name: "Unmarked Phrase", description: "A phrase whose relationship is clear from meaning even without an obvious connector." }
];

const phraseRelationshipGroups = [
  {
    group: "Reason, Goal, and Outcome",
    labels: [
      {
        name: "Ground",
        definition: "Gives the reason, argument, or basis for the anchor phrase.",
        question: "Why is the anchor true or appropriate?",
        example: "by the mercies of God"
      },
      {
        name: "Result",
        definition: "Shows the consequence or outcome that flows from the anchor phrase.",
        question: "What happens because of the anchor?",
        example: "with the result that the church is strengthened"
      },
      {
        name: "Purpose",
        definition: "Names the goal, aim, or intended outcome of the anchor phrase.",
        question: "For what goal is the anchor done?",
        example: "so that you may discern God's will"
      },
      {
        name: "Condition",
        definition: "States what must be true for the anchor phrase to be true or active.",
        question: "Under what condition does the anchor hold?",
        example: "if you continue in the word"
      }
    ],
    question: "Why does this happen, what does it aim at, or what must be true?"
  },
  {
    group: "Time, Place, and Sphere",
    labels: [
      {
        name: "Temporal",
        definition: "Indicates when the anchor phrase occurs or is true.",
        question: "When does the anchor happen?",
        example: "when you pray"
      },
      {
        name: "Locative",
        definition: "Indicates where the anchor phrase occurs or is true.",
        question: "Where does the anchor happen?",
        example: "in the house"
      },
      {
        name: "Context",
        definition: "Names the sphere, realm, or setting in which the anchor phrase is true.",
        question: "In what sphere is the anchor true?",
        example: "in Christ"
      },
      {
        name: "Reference",
        definition: "Shows what the anchor phrase is connected to, about, or with respect to.",
        question: "With reference to what is the anchor true?",
        example: "concerning spiritual gifts"
      }
    ],
    question: "When, where, in what sphere, or with reference to what is the anchor phrase true?"
  },
  {
    group: "How the Action Happens",
    labels: [
      {
        name: "Manner",
        definition: "Describes the way the anchor phrase is carried out.",
        question: "In what way is the anchor done?",
        example: "with joy"
      },
      {
        name: "Means",
        definition: "Identifies the instrument, method, or channel by which the anchor phrase is accomplished.",
        question: "By what means does the anchor happen?",
        example: "by the renewing of your mind"
      },
      {
        name: "Agency",
        definition: "Identifies the personal agent by whom the anchor phrase is executed.",
        question: "By whom is the action carried out?",
        example: "through the Spirit"
      },
      {
        name: "Standard",
        definition: "Gives the point of reference, rule, or measure to which the anchor phrase conforms.",
        question: "According to what standard is the anchor measured?",
        example: "according to the Scriptures"
      },
      {
        name: "Accompaniment",
        definition: "Indicates who or what is included along with the anchor phrase.",
        question: "With whom or with what does the anchor happen?",
        example: "with all the saints"
      }
    ],
    question: "How, by what instrument, by whom, according to what standard, or with whom?"
  },
  {
    group: "Clarifying the Anchor Phrase",
    labels: [
      {
        name: "Explanation",
        definition: "Clarifies, restates, or unpacks the meaning of the anchor phrase.",
        question: "Is this saying the anchor again more clearly?",
        example: "your worshipful service"
      },
      {
        name: "Content",
        definition: "Functions as the stated content, subject, object, or message of the anchor phrase.",
        question: "What is being said, urged, known, believed, or asked?",
        example: "to present your bodies"
      },
      {
        name: "Comparison",
        definition: "Clarifies the anchor phrase by showing what it is like or unlike.",
        question: "What is the anchor being compared with?",
        example: "as a living sacrifice"
      },
      {
        name: "Negative",
        definition: "Clarifies the anchor by denying the opposite or saying the same point negatively.",
        question: "Is the phrase saying what the anchor is not?",
        example: "not conformed to this age"
      },
      {
        name: "Answer",
        definition: "Provides the reply to a question raised by the anchor phrase or context.",
        question: "What question does this line answer?",
        example: "What kind of sacrifice? Living and holy."
      },
      {
        name: "Example",
        definition: "Gives a specific instance that illustrates the anchor phrase.",
        question: "Is this a concrete example of the anchor?",
        example: "such as hospitality or generosity"
      },
      {
        name: "Distinction",
        definition: "Clarifies the anchor phrase by distinguishing it from another object or concept.",
        question: "What difference is being marked?",
        example: "not the old pattern, but the renewed one"
      }
    ],
    question: "Does the phrase explain, restate, answer, exemplify, compare, or distinguish the anchor?"
  },
  {
    group: "Movement and Exchange",
    labels: [
      {
        name: "Source",
        definition: "Indicates the point of origin from which the anchor phrase derives or depends.",
        question: "Where does this come from?",
        example: "from God"
      },
      {
        name: "Destination",
        definition: "Indicates the endpoint toward which the anchor phrase moves or arrives.",
        question: "Toward what goal or place does this move?",
        example: "to God"
      },
      {
        name: "Separation",
        definition: "Indicates that the anchor phrase moves away from, is removed from, or is distinct from something.",
        question: "From what is the anchor separated?",
        example: "from this age"
      },
      {
        name: "Substitution",
        definition: "Indicates what something in the anchor phrase is given in place of or in exchange for.",
        question: "What replaces what?",
        example: "grace instead of wages"
      }
    ],
    question: "Where does something come from, move toward, move away from, or replace?"
  },
  {
    group: "Benefit, Harm, and Tension",
    labels: [
      {
        name: "Advantage",
        definition: "Indicates who or what benefits from the anchor phrase.",
        question: "For whose benefit is this done?",
        example: "for the church"
      },
      {
        name: "Disadvantage",
        definition: "Indicates who or what is harmed, opposed, or disadvantaged by the anchor phrase.",
        question: "Against whom or to whose disadvantage is this done?",
        example: "against the powers"
      },
      {
        name: "Concessive",
        definition: "Acknowledges a seemingly contrary point while the anchor phrase still remains true.",
        question: "Despite what is the anchor still true?",
        example: "although the world pressures you"
      }
    ],
    question: "Who benefits, who is harmed, or what contrary fact is conceded?"
  }
];

const genitiveRelationshipGroups = [
  {
    group: "Ownership and Part-Whole",
    labels: ["Possessive", "Partitive", "Relationship"],
    question: "Does the genitive show ownership, a part of a whole, or a personal relationship?"
  },
  {
    group: "Description and Identity",
    labels: ["Attributive", "Attributed", "Descriptive", "Epexegetical", "Material", "Contents"],
    question: "Does the genitive describe, rename, identify, specify material, or name contents?"
  },
  {
    group: "Verbal Nouns",
    labels: ["Subjective", "Objective", "Plenary"],
    question: "If the anchor noun contains a verbal idea, is the genitive doing the action, receiving it, or both?"
  },
  {
    group: "Direction and Reference",
    labels: ["Source", "Destination", "Separation", "Reference"],
    question: "Does the genitive show origin, endpoint, removal from, or connection with something?"
  },
  {
    group: "Production and Rule",
    labels: ["Producer", "Product", "Subordination"],
    question: "Does the genitive produce the anchor, result from it, or fall under its rule?"
  }
];

const romansProvisionalOutline = [
  {
    title: "The Ground of Christian Obedience",
    reference: "Romans 12:1a",
    point: "God's mercies in Romans 1-11 are the reason Paul can appeal for whole-life worship."
  },
  {
    title: "The Main Appeal",
    reference: "Romans 12:1b",
    point: "Believers present their embodied lives to God as living, holy, pleasing sacrifice."
  },
  {
    title: "The Necessary Contrast",
    reference: "Romans 12:2a",
    point: "The church must refuse formation by the present age and receive transformation from God."
  },
  {
    title: "The Purpose of Renewal",
    reference: "Romans 12:2b",
    point: "Renewed minds learn to discern the good, pleasing, and mature will of God."
  }
];

const romansPropositions = [
  { id: "1", text: "Because of God's mercies, Paul appeals to the church.", label: "Ground" },
  { id: "2", text: "Present your bodies as a living sacrifice.", label: "Main appeal" },
  { id: "3", text: "This is your whole-life worship.", label: "Explanation" },
  { id: "4", text: "Do not be conformed to this age.", label: "Negative command" },
  { id: "5", text: "Be transformed by the renewing of your mind.", label: "Positive contrast / means" },
  { id: "6", text: "So that you may discern God's good, pleasing, and perfect will.", label: "Purpose / result" }
];

const thessPracticeParaphrase = "Rejoice always; keep praying; give thanks in every circumstance, because this is God's will for you in Christ Jesus.";

const thessPracticePropositions = [
  { id: "1", text: "Rejoice always.", label: "Command" },
  { id: "2", text: "Keep praying.", label: "Command" },
  { id: "3", text: "Give thanks in every circumstance.", label: "Command" },
  { id: "4", text: "This is God's will for you in Christ Jesus.", label: "Ground" }
];

const practiceWarmupLines = [
  { id: "1", text: "Read the paragraph.", label: "Command" },
  { id: "2", text: "Mark the repeated words.", label: "Command" },
  { id: "3", text: "because repeated words often show emphasis.", label: "Ground" }
];

const practiceGuidedLines = [
  { id: "1", text: "Encourage the discouraged.", label: "Command" },
  { id: "2", text: "Help the weak.", label: "Command" },
  { id: "3", text: "Be patient with everyone.", label: "Command" },
  { id: "4", text: "because love moves slowly with people.", label: "Ground" }
];

const MethodCard = ({ title, children, color = "indigo" }) => {
  const colors = {
    indigo: "bg-indigo-50 border-indigo-200 text-indigo-900",
    emerald: "bg-emerald-50 border-emerald-200 text-emerald-900",
    amber: "bg-amber-50 border-amber-200 text-amber-900",
    rose: "bg-rose-50 border-rose-200 text-rose-900",
    sky: "bg-sky-50 border-sky-200 text-sky-900"
  };
  return (
    <div className={`${colors[color]} border rounded-2xl p-5 shadow-sm`}>
      <strong className="block text-lg mb-2">{title}</strong>
      <div className="text-sm text-slate-700 leading-relaxed">{children}</div>
    </div>
  );
};

const PropositionList = () => (
  <div className="space-y-2">
    {romansPropositions.map((line) => (
      <div key={line.id} className="bg-white border border-slate-200 rounded-xl p-3 flex gap-3 items-start shadow-sm">
        <span className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold shrink-0">{line.id}</span>
        <div>
          <p className="text-sm text-slate-800 font-medium leading-relaxed">{line.text}</p>
          <span className="text-[11px] uppercase tracking-widest text-indigo-500 font-bold">{line.label}</span>
        </div>
      </div>
    ))}
  </div>
);

const CalloutKey = ({ items }) => (
  <div className="mb-4 grid sm:grid-cols-2 lg:grid-cols-4 gap-2">
    {items.map((item, index) => (
      <div key={item} className="bg-white/10 border border-white/10 rounded-xl px-3 py-2 flex items-start gap-2 text-xs leading-relaxed">
        <span className="bg-emerald-300 text-slate-950 w-5 h-5 rounded-full flex items-center justify-center font-black shrink-0">{index + 1}</span>
        <span>{item}</span>
      </div>
    ))}
  </div>
);

const LightCalloutKey = ({ items }) => (
  <div className="mb-4 grid sm:grid-cols-2 lg:grid-cols-4 gap-2">
    {items.map((item, index) => (
      <div key={item} className="bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 flex items-start gap-2 text-xs text-slate-700 leading-relaxed">
        <span className="bg-indigo-600 text-white w-5 h-5 rounded-full flex items-center justify-center font-black shrink-0">{index + 1}</span>
        <span>{item}</span>
      </div>
    ))}
  </div>
);

const BeginnerMiniDiagram = () => (
  <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm overflow-x-auto">
    <div className="min-w-[620px]">
      <div className="grid grid-cols-[1fr_160px_1fr] gap-4 items-center">
        <div className="bg-sky-50 border border-sky-100 rounded-xl p-4">
          <span className="bg-sky-600 text-white w-7 h-7 rounded-full inline-flex items-center justify-center text-xs font-bold mb-2">1</span>
          <strong className="text-sky-950 block mb-1">Main thought</strong>
          <p className="text-sm text-slate-700">I took an umbrella.</p>
        </div>
        <div className="text-center">
          <div className="bg-emerald-100 text-emerald-900 border border-emerald-200 rounded-full px-3 py-2 text-xs font-black uppercase tracking-widest">Because</div>
          <div className="h-8 border-l-2 border-dashed border-slate-300 mx-auto my-2 w-0"></div>
          <div className="bg-amber-100 text-amber-900 border border-amber-200 rounded-full px-3 py-2 text-xs font-black uppercase tracking-widest">So that</div>
        </div>
        <div className="space-y-3">
          {everydayArgumentLines.slice(1).map((line, index) => (
            <div key={line.id} className="bg-slate-50 border border-slate-200 rounded-xl p-4">
              <span className="bg-indigo-600 text-white w-7 h-7 rounded-full inline-flex items-center justify-center text-xs font-bold mb-2">{index + 2}</span>
              <strong className="text-slate-900 block mb-1">{line.label}</strong>
              <p className="text-sm text-slate-700">{line.text}</p>
            </div>
          ))}
        </div>
      </div>
      <div className="mt-4 bg-indigo-50 border border-indigo-100 rounded-xl p-4 text-sm text-slate-700 leading-relaxed">
        <strong className="text-indigo-900">What you are seeing:</strong> one main action, one reason that supports it, and one purpose that shows the aim. Biblical arguments work the same way, but with richer meaning.
      </div>
    </div>
  </div>
);

const ArcDiagram = () => (
  <div className="bg-slate-950 text-slate-100 rounded-2xl p-5 shadow-xl overflow-x-auto">
    <CalloutKey items={[
      "Numbered lines are propositions.",
      "Small arcs connect nearby thoughts first.",
      "Labels name the logical relationship.",
      "The largest arc summarizes the main flow."
    ]} />
    <div className="min-w-[720px] grid grid-cols-[1fr_260px] gap-5">
      <div className="space-y-2">
        {romansPropositions.map((line) => (
          <div key={line.id} className="h-12 bg-white/10 border border-white/10 rounded-xl px-4 flex items-center gap-3">
            <span className="text-emerald-300 font-black w-5">{line.id}</span>
            <span className="text-sm">{line.text}</span>
          </div>
        ))}
      </div>
      <div className="relative h-[320px]">
        <svg viewBox="0 0 260 320" className="absolute inset-0 w-full h-full" aria-hidden="true">
          <path d="M25 28 C150 28 150 84 25 84" fill="none" stroke="#34d399" strokeWidth="3" />
          <path d="M25 142 C165 142 165 198 25 198" fill="none" stroke="#a78bfa" strokeWidth="3" />
          <path d="M25 198 C190 198 190 254 25 254" fill="none" stroke="#fbbf24" strokeWidth="3" />
          <path d="M25 84 C225 84 225 254 25 254" fill="none" stroke="#38bdf8" strokeWidth="3" strokeDasharray="8 7" />
        </svg>
        <div className="absolute left-[145px] top-[42px] bg-emerald-400 text-slate-950 text-xs font-bold rounded-full px-3 py-1">Ground</div>
        <div className="absolute left-[160px] top-[158px] bg-purple-400 text-slate-950 text-xs font-bold rounded-full px-3 py-1">Contrast</div>
        <div className="absolute left-[185px] top-[214px] bg-amber-300 text-slate-950 text-xs font-bold rounded-full px-3 py-1">Purpose</div>
        <div className="absolute left-[118px] top-[278px] bg-sky-300 text-slate-950 text-xs font-bold rounded-full px-3 py-1">Main flow</div>
      </div>
    </div>
  </div>
);

const BracketDiagram = () => (
  <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm overflow-x-auto">
    <LightCalloutKey items={[
      "The bracket label names the relationship.",
      "Grouped lines belong together.",
      "Smaller brackets can become larger units.",
      "The stack can become a teaching outline."
    ]} />
    <div className="min-w-[680px] space-y-4">
      <div className="grid grid-cols-[160px_1fr] gap-4 items-stretch">
        <div className="border-l-4 border-t-4 border-b-4 border-emerald-500 rounded-l-xl flex items-center pl-4 text-emerald-800 font-black">Ground</div>
        <div className="space-y-2">
          <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-3 text-sm"><strong>1.</strong> Because of God's mercies, Paul appeals to the church.</div>
          <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-3 text-sm"><strong>2.</strong> Present your bodies as a living sacrifice.</div>
        </div>
      </div>
      <div className="grid grid-cols-[160px_1fr] gap-4 items-stretch">
        <div className="border-l-4 border-t-4 border-b-4 border-indigo-500 rounded-l-xl flex items-center pl-4 text-indigo-800 font-black">Explanation</div>
        <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-3 text-sm"><strong>3.</strong> This is your whole-life worship.</div>
      </div>
      <div className="grid grid-cols-[160px_1fr] gap-4 items-stretch">
        <div className="border-l-4 border-t-4 border-b-4 border-purple-500 rounded-l-xl flex items-center pl-4 text-purple-800 font-black">Contrast</div>
        <div className="space-y-2">
          <div className="bg-purple-50 border border-purple-100 rounded-xl p-3 text-sm"><strong>4.</strong> Do not be conformed to this age.</div>
          <div className="bg-purple-50 border border-purple-100 rounded-xl p-3 text-sm"><strong>5.</strong> Be transformed by the renewing of your mind.</div>
        </div>
      </div>
      <div className="grid grid-cols-[160px_1fr] gap-4 items-stretch">
        <div className="border-l-4 border-t-4 border-b-4 border-amber-500 rounded-l-xl flex items-center pl-4 text-amber-800 font-black">Purpose</div>
        <div className="bg-amber-50 border border-amber-100 rounded-xl p-3 text-sm"><strong>6.</strong> So that you may discern God's good, pleasing, and perfect will.</div>
      </div>
    </div>
  </div>
);

const PhraseDiagram = () => (
  <div className="bg-slate-950 text-slate-100 rounded-2xl p-5 md:p-7 shadow-xl font-mono text-sm overflow-x-auto">
    <CalloutKey items={[
      "Left-edge lines carry the main flow.",
      "Indented lines support the line above.",
      "Labels explain how each phrase functions.",
      "The outline emerges from the indentation."
    ]} />
    <div className="min-w-[680px] space-y-2">
      <div className="flex gap-4 p-2 rounded bg-white/5"><span className="text-emerald-300 font-bold w-32 shrink-0">Ground</span><span>Therefore, by the mercies of God,</span></div>
      <div className="flex gap-4 p-2 rounded bg-white/10"><span className="text-sky-300 font-bold w-32 shrink-0">Main Appeal</span><span>I urge you to present your bodies as a living sacrifice,</span></div>
      <div className="flex gap-4 p-2 rounded bg-white/5"><span className="text-indigo-300 font-bold w-32 shrink-0">Explanation</span><span className="pl-8">holy and pleasing to God, your worshipful service.</span></div>
      <div className="flex gap-4 p-2 rounded bg-white/10"><span className="text-rose-300 font-bold w-32 shrink-0">Negative</span><span>Do not be conformed to this age,</span></div>
      <div className="flex gap-4 p-2 rounded bg-white/10"><span className="text-purple-300 font-bold w-32 shrink-0">Contrast</span><span>but be transformed</span></div>
      <div className="flex gap-4 p-2 rounded bg-white/5"><span className="text-amber-300 font-bold w-32 shrink-0">Means</span><span className="pl-8">by the renewing of your mind,</span></div>
      <div className="flex gap-4 p-2 rounded bg-white/5"><span className="text-emerald-300 font-bold w-32 shrink-0">Purpose</span><span className="pl-16">so that you may discern the will of God.</span></div>
    </div>
  </div>
);

const ArgumentDiagramLab = ({ compact = false }) => (
  <div className="space-y-6">
    {!compact && (
      <P>
        The same passage can be displayed three ways. Arcing and bracketing are especially good at showing logical relationships. Phrasing is especially good at showing main ideas and supporting phrases at a glance.
      </P>
    )}
    <div className="grid md:grid-cols-2 gap-4">
      <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
        <strong className="text-indigo-900 block mb-3 text-lg">Proposition List</strong>
        <PropositionList />
      </div>
      <div className="bg-indigo-50 border border-indigo-200 rounded-2xl p-5 shadow-sm">
        <strong className="text-indigo-900 block mb-2 text-lg">What the Diagram Shows</strong>
        <ul className="space-y-2 text-sm text-slate-700">
          <li><strong>Ground:</strong> God's mercies support the whole appeal.</li>
          <li><strong>Main appeal:</strong> believers offer their embodied lives to God.</li>
          <li><strong>Contrast:</strong> the age conforms, but God transforms.</li>
          <li><strong>Purpose:</strong> renewed minds learn to discern God's will.</li>
        </ul>
      </div>
    </div>
    <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
      <strong className="text-indigo-900 block mb-4 text-lg">From Diagram to Main Idea</strong>
      <div className="grid md:grid-cols-4 gap-3">
        {romansProvisionalOutline.map((line, index) => (
          <div key={line.title} className="bg-slate-50 border border-slate-100 rounded-xl p-4">
            <div className="flex items-center justify-between gap-2 mb-2">
              <span className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold">{index + 1}</span>
              <span className="text-[11px] uppercase tracking-widest font-bold text-indigo-500">{line.reference}</span>
            </div>
            <strong className="text-slate-900 text-sm block mb-2">{line.title}</strong>
            <p className="text-xs text-slate-700 leading-relaxed">{line.point}</p>
          </div>
        ))}
      </div>
      <div className="mt-4 bg-indigo-50 border border-indigo-100 rounded-xl p-4 text-sm text-slate-700 leading-relaxed">
        <strong className="text-indigo-900">Main idea:</strong> Because God has shown mercy, believers offer their whole embodied lives to Him, reject the age's pattern, receive transformation through renewed thinking, and grow in discernment of God's will.
      </div>
    </div>
    <div>
      <strong className="text-indigo-900 block mb-3 text-lg">Simplified Arc</strong>
      <ArcDiagram />
    </div>
    <div>
      <strong className="text-indigo-900 block mb-3 text-lg">Simplified Bracket</strong>
      <BracketDiagram />
    </div>
    <div>
      <strong className="text-indigo-900 block mb-3 text-lg">Phrase Diagram</strong>
      <PhraseDiagram />
    </div>
  </div>
);

const PracticeLineList = ({ lines }) => (
  <div className="space-y-2">
    {lines.map((line) => (
      <div key={line.id} className="bg-white border border-slate-200 rounded-xl p-3 flex gap-3 items-start shadow-sm">
        <span className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold shrink-0">{line.id}</span>
        <div>
          <p className="text-sm text-slate-800 font-medium leading-relaxed">{line.text}</p>
          <span className="text-[11px] uppercase tracking-widest text-indigo-500 font-bold">{line.label}</span>
        </div>
      </div>
    ))}
  </div>
);

const PracticeExerciseBlock = ({ title, lines, prompt, answer, color = "indigo" }) => {
  const styles = {
    indigo: "bg-indigo-50 border-indigo-100 text-indigo-900",
    sky: "bg-sky-50 border-sky-100 text-sky-900",
    emerald: "bg-emerald-50 border-emerald-100 text-emerald-900",
    amber: "bg-amber-50 border-amber-100 text-amber-900",
    purple: "bg-purple-50 border-purple-100 text-purple-900"
  };
  return (
    <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
      <strong className="text-indigo-900 block text-lg mb-3">{title}</strong>
      <div className="grid lg:grid-cols-[1fr_1fr] gap-4 items-start">
        <PracticeLineList lines={lines} />
        <div className="space-y-3">
          <div className={`${styles[color]} border rounded-xl p-4 text-sm leading-relaxed`}>
            <strong className="block mb-1">Try</strong>
            {prompt}
          </div>
          <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 text-sm text-slate-700 leading-relaxed">
            <strong className="text-slate-900 block mb-1">Suggested Check</strong>
            {answer}
          </div>
        </div>
      </div>
    </div>
  );
};

const ThessArcPracticeDiagram = () => (
  <div className="bg-slate-950 text-slate-100 rounded-2xl p-5 shadow-xl overflow-x-auto">
    <CalloutKey items={[
      "Lines 1-3 form a series of short commands.",
      "Line 4 gives the reason for the whole series.",
      "The large arc shows the ground supporting all three commands.",
      "The summary should connect joy, prayer, and thanks to God's will."
    ]} />
    <div className="min-w-[700px] grid grid-cols-[1fr_250px] gap-5">
      <div className="space-y-2">
        {thessPracticePropositions.map((line) => (
          <div key={line.id} className="h-12 bg-white/10 border border-white/10 rounded-xl px-4 flex items-center gap-3">
            <span className="text-emerald-300 font-black w-5">{line.id}</span>
            <span className="text-sm">{line.text}</span>
          </div>
        ))}
      </div>
      <div className="relative h-[230px]">
        <svg viewBox="0 0 250 230" className="absolute inset-0 w-full h-full" aria-hidden="true">
          <path d="M20 28 C118 28 118 84 20 84" fill="none" stroke="#38bdf8" strokeWidth="3" />
          <path d="M20 84 C138 84 138 140 20 140" fill="none" stroke="#38bdf8" strokeWidth="3" />
          <path d="M20 28 C218 28 218 196 20 196" fill="none" stroke="#34d399" strokeWidth="3" strokeDasharray="8 7" />
        </svg>
        <div className="absolute left-[112px] top-[50px] bg-sky-300 text-slate-950 text-xs font-bold rounded-full px-3 py-1">Series</div>
        <div className="absolute left-[138px] top-[112px] bg-sky-300 text-slate-950 text-xs font-bold rounded-full px-3 py-1">Series</div>
        <div className="absolute left-[150px] top-[176px] bg-emerald-300 text-slate-950 text-xs font-bold rounded-full px-3 py-1">Ground</div>
      </div>
    </div>
  </div>
);

const ThessBracketPracticeDiagram = () => (
  <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm overflow-x-auto">
    <LightCalloutKey items={[
      "The first bracket groups the three commands.",
      "The second bracket shows the reason for the command series.",
      "The large idea is a life of joy, prayer, and thanks.",
      "The outline can use only two major points."
    ]} />
    <div className="min-w-[680px] space-y-4">
      <div className="grid grid-cols-[150px_1fr] gap-4 items-stretch">
        <div className="border-l-4 border-t-4 border-b-4 border-sky-500 rounded-l-xl flex items-center pl-4 text-sky-800 font-black">Series</div>
        <div className="space-y-2">
          <div className="bg-sky-50 border border-sky-100 rounded-xl p-3 text-sm"><strong>1.</strong> Rejoice always.</div>
          <div className="bg-sky-50 border border-sky-100 rounded-xl p-3 text-sm"><strong>2.</strong> Keep praying.</div>
          <div className="bg-sky-50 border border-sky-100 rounded-xl p-3 text-sm"><strong>3.</strong> Give thanks in every circumstance.</div>
        </div>
      </div>
      <div className="grid grid-cols-[150px_1fr] gap-4 items-stretch">
        <div className="border-l-4 border-t-4 border-b-4 border-emerald-500 rounded-l-xl flex items-center pl-4 text-emerald-800 font-black">Ground</div>
        <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-3 text-sm"><strong>4.</strong> This is God's will for you in Christ Jesus.</div>
      </div>
    </div>
  </div>
);

const ThessPhrasePracticeDiagram = () => (
  <div className="bg-slate-950 text-slate-100 rounded-2xl p-5 md:p-7 shadow-xl font-mono text-sm overflow-x-auto">
    <CalloutKey items={[
      "The commands stay aligned on the left.",
      "The ground line is indented under the full series.",
      "The repeated command shape makes the series visible.",
      "The outline moves from commands to reason."
    ]} />
    <div className="min-w-[680px] space-y-2">
      <div className="flex gap-4 p-2 rounded bg-white/10"><span className="text-sky-300 font-bold w-32 shrink-0">Command</span><span>Rejoice always;</span></div>
      <div className="flex gap-4 p-2 rounded bg-white/10"><span className="text-sky-300 font-bold w-32 shrink-0">Command</span><span>keep praying;</span></div>
      <div className="flex gap-4 p-2 rounded bg-white/10"><span className="text-sky-300 font-bold w-32 shrink-0">Command</span><span>give thanks in every circumstance,</span></div>
      <div className="flex gap-4 p-2 rounded bg-white/5"><span className="text-emerald-300 font-bold w-32 shrink-0">Ground</span><span className="pl-8">because this is God's will for you in Christ Jesus.</span></div>
    </div>
  </div>
);

const PracticePageShell = ({ pageLabel, title, intro, focusItems, children }) => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">{pageLabel}</div>
      <H1>{title}</H1>
    </div>
    <P>{intro}</P>
    <div className="bg-indigo-50 border border-indigo-200 rounded-2xl p-5 shadow-sm mb-10">
      <strong className="text-indigo-950 block text-lg mb-3">Practice Passage</strong>
      <p className="text-slate-800 font-semibold leading-relaxed mb-2">1 Thessalonians 5:16-18 practice paraphrase</p>
      <p className="text-sm text-slate-700 leading-relaxed">{thessPracticeParaphrase}</p>
    </div>
    <div className="grid md:grid-cols-4 gap-3 mb-10">
      {focusItems.map((item, index) => (
        <div key={item} className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
          <span className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold mb-3">{index + 1}</span>
          <p className="text-sm text-slate-700 leading-relaxed">{item}</p>
        </div>
      ))}
    </div>
    {children}
  </div>
);

const ArcingPracticeSection = () => (
  <PracticePageShell
    pageLabel="Page 6.3.1: Arcing Practice"
    title="Arcing Practice"
    intro="Use this page to practice arcing on a passage short enough that the logic stays visible. The goal is to see a command series and the reason that supports it."
    focusItems={[
      "Divide the passage into propositions.",
      "See the three commands as a series.",
      "Label the final reason as ground.",
      "Read the completed arc as one argument."
    ]}
  >
    <div className="space-y-8">
      <PracticeExerciseBlock
        title="Warm-Up: Everyday Sentence"
        lines={practiceWarmupLines}
        color="sky"
        prompt="Draw one series arc over lines 1-2, then connect line 3 as the ground for why those actions matter."
        answer="Lines 1 and 2 stand side by side as commands. Line 3 gives the reason: repeated words often reveal emphasis."
      />
      <PracticeExerciseBlock
        title="Guided Exercise: Short Bible-Style Sentence"
        lines={practiceGuidedLines}
        color="emerald"
        prompt="Arc lines 1-3 as a series. Then ask whether line 4 supports one command or the whole series."
        answer="Line 4 supports the whole command series. The reason for encouraging, helping, and being patient is that love moves slowly with people."
      />
      <div>
        <H2>1 Thessalonians 5:16-18 Practice</H2>
        <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm mb-5">
          <strong className="text-indigo-900 block text-lg mb-2">Try Before You Look</strong>
          <p className="text-sm text-slate-700 leading-relaxed">
            Put each command on its own line. Arc the three commands together as a series, then draw one larger arc showing that God's will grounds the whole pattern.
          </p>
        </div>
        <ThessArcPracticeDiagram />
      </div>
      <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
        <strong className="text-indigo-900 block text-lg mb-3">Check Your Work</strong>
        <div className="grid md:grid-cols-2 gap-4 text-sm text-slate-700">
          <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4">
            <strong className="text-emerald-900 block mb-1">Suggested Answer</strong>
            The three commands form a series. The final line gives the ground: this thankful, prayerful, joyful life fits God's will for believers in Christ.
          </div>
          <div className="bg-rose-50 border border-rose-100 rounded-xl p-4">
            <strong className="text-rose-900 block mb-1">Common Mistake</strong>
            Do not make "in every circumstance" the ground. It modifies thanksgiving; the ground is the final reason about God's will.
          </div>
        </div>
      </div>
    </div>
  </PracticePageShell>
);

const BracketingPracticeSection = () => (
  <PracticePageShell
    pageLabel="Page 6.4.1: Bracketing Practice"
    title="Bracketing Practice"
    intro="Use this page to practice grouping short propositions with brackets. The goal is to see how a simple bracket can become a simple outline."
    focusItems={[
      "Group the three short commands together.",
      "Show that the ground supports the command series.",
      "Keep the structure visually simple.",
      "Turn the bracket into an outline."
    ]}
  >
    <div className="space-y-8">
      <PracticeExerciseBlock
        title="Warm-Up: Everyday Sentence"
        lines={practiceWarmupLines}
        color="purple"
        prompt="Put one bracket around lines 1-2 as a command series. Put a second bracket beside line 3 as the ground."
        answer="The bracket should show two actions supported by one reason: repeated words often show emphasis."
      />
      <PracticeExerciseBlock
        title="Guided Exercise: Short Bible-Style Sentence"
        lines={practiceGuidedLines}
        color="emerald"
        prompt="Bracket lines 1-3 as a series. Then bracket line 4 as the ground for the entire series."
        answer="The first bracket names the repeated commands. The ground bracket explains why patient help belongs with love."
      />
      <div>
        <H2>1 Thessalonians 5:16-18 Practice</H2>
        <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm mb-5">
          <strong className="text-indigo-900 block text-lg mb-2">Try Before You Look</strong>
          <p className="text-sm text-slate-700 leading-relaxed">
            Make one bracket for the command series and one bracket for the ground. Then write a two-point outline from those brackets.
          </p>
        </div>
        <ThessBracketPracticeDiagram />
      </div>
      <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
        <strong className="text-indigo-900 block text-lg mb-3">Check Your Work</strong>
        <div className="grid md:grid-cols-2 gap-4 text-sm text-slate-700">
          <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4">
            <strong className="text-emerald-900 block mb-1">Suggested Answer</strong>
            Outline: 1. The church practices joy, prayer, and thanks. 2. This pattern is grounded in God's will for believers in Christ.
          </div>
          <div className="bg-rose-50 border border-rose-100 rounded-xl p-4">
            <strong className="text-rose-900 block mb-1">Common Mistake</strong>
            Do not bracket the commands as if they compete with each other. They are a series of mutually reinforcing habits.
          </div>
        </div>
      </div>
    </div>
  </PracticePageShell>
);

const PhrasingPracticeSection = () => (
  <PracticePageShell
    pageLabel="Page 6.5.1: Phrasing Practice"
    title="Phrasing Practice"
    intro="Use this page to practice keeping main commands aligned and indenting the supporting reason. This is the simplest way to see the passage's structure."
    focusItems={[
      "Keep the main commands aligned.",
      "Indent the ground under the whole command series.",
      "Attach phrases to the right anchor.",
      "Draft a provisional outline."
    ]}
  >
    <div className="space-y-8">
      <PracticeExerciseBlock
        title="Warm-Up: Everyday Sentence"
        lines={practiceWarmupLines}
        color="indigo"
        prompt="Keep lines 1-2 aligned as commands. Indent line 3 underneath them as the ground."
        answer="The phrase diagram should show two main actions and one supporting reason. The reason explains why those actions help interpretation."
      />
      <PracticeExerciseBlock
        title="Guided Exercise: Short Bible-Style Sentence"
        lines={practiceGuidedLines}
        color="amber"
        prompt="Keep the three commands aligned. Indent line 4 as the reason supporting the whole command series."
        answer="The commands remain on the left edge. The reason is indented because it supports the series rather than replacing any one command."
      />
      <div>
        <H2>1 Thessalonians 5:16-18 Practice</H2>
        <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm mb-5">
          <strong className="text-indigo-900 block text-lg mb-2">Try Before You Look</strong>
          <p className="text-sm text-slate-700 leading-relaxed">
            Place rejoice, pray, and give thanks on the same left margin. Indent the final ground line under the whole series, not merely under the last command.
          </p>
        </div>
        <ThessPhrasePracticeDiagram />
      </div>
      <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
        <strong className="text-indigo-900 block text-lg mb-3">Check Your Work</strong>
        <div className="grid md:grid-cols-2 gap-4 text-sm text-slate-700">
          <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4">
            <strong className="text-emerald-900 block mb-1">Suggested Answer</strong>
            Provisional outline: 1. Practice continual joy, prayer, and thanks. 2. Practice them because this way of life fits God's will in Christ.
          </div>
          <div className="bg-rose-50 border border-rose-100 rounded-xl p-4">
            <strong className="text-rose-900 block mb-1">Common Mistake</strong>
            Do not indent "give thanks" under "pray." All three commands are parallel and should stay aligned.
          </div>
        </div>
      </div>
    </div>
  </PracticePageShell>
);

const ArgumentDiagrammingOverview = () => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 6.1: Argument Diagramming</div>
      <H1>Argument Diagramming Overview</H1>
    </div>

    <LearningSteps
      title="Argument Diagramming Learning Path"
      intro="Start with the simplest visual method first, then add more technical tools only when the argument needs them."
      steps={learningStepPresets.diagramming}
    />

    <H2>What Is Argument Diagramming?</H2>
    <P>
      Argument diagramming is the practice of displaying the logical flow of a passage. You divide the text into propositions and phrases, then ask how each line relates to the others. The goal is not to make the Bible look complicated; the goal is to slow down long enough to see what the author is actually doing.
    </P>

    <H2>Start Here: Seeing How Thoughts Connect</H2>
    <P>
      Before using labels like ground, inference, means, or purpose, learn the basic instinct: every sentence is doing something. Some lines make the main point. Other lines give the reason, explain the meaning, show the way, or name the goal.
    </P>
    <BeginnerMiniDiagram />

    <H2>Beginner Vocabulary</H2>
    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-10">
      {beginnerEssentials.map((item) => (
        <div key={item.term} className="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm">
          <strong className="text-indigo-900 block mb-2">{item.term}</strong>
          <p className="text-sm text-slate-700 leading-relaxed mb-3">{item.plain}</p>
          <p className="text-xs text-slate-500 italic">{item.example}</p>
        </div>
      ))}
    </div>

    <div className="grid md:grid-cols-3 gap-4 mb-10">
      <MethodCard title="Proposition" color="indigo">A proposition is a verbal idea that states something. In a simple sentence, it often centers on a verb: God acts, Paul urges, believers present, minds are renewed.</MethodCard>
      <MethodCard title="Phrase" color="emerald">A phrase is a smaller unit that may not be a full sentence but still modifies or supports another line: by mercy, as worship, by renewal, for discernment.</MethodCard>
      <MethodCard title="Logical Relationship" color="amber">A relationship names how two lines connect: one may give a reason, explain an idea, contrast another line, show a purpose, or state a result.</MethodCard>
    </div>

    <H2>From Text to Diagram</H2>
    <div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm mb-10">
      <div className="grid gap-4">
        {[
          ["1. Set the passage limits.", "Choose the sentence, paragraph, or short section you are tracing. A paragraph is usually best for beginners."],
          ["2. Divide the text into workable lines.", "A line may be a full proposition with a subject and predicate, or a phrase that meaningfully supports another line."],
          ["3. Find the main clauses.", "Main clauses carry the backbone of the thought. Subordinate clauses and phrases depend on them."],
          ["4. Label the relationships.", "Ask whether each line gives a reason, conclusion, means, purpose, result, contrast, explanation, or another relationship."],
          ["5. Summarize the argument.", "The finished diagram should lead to a clear sentence: This passage says this, because this, so that this."]
        ].map(([title, text]) => (
          <div key={title} className="grid md:grid-cols-[240px_1fr] gap-3 md:gap-5 items-start border-b border-slate-100 last:border-b-0 pb-4 last:pb-0">
            <strong className="text-indigo-900">{title}</strong>
            <div>
              <p className="text-sm text-slate-700 leading-relaxed">{text}</p>
              <MethodStepGuidance title={title} />
            </div>
          </div>
        ))}
      </div>
    </div>

    <H2>Why Is It Important?</H2>
    <div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm mb-10">
      <div className="grid md:grid-cols-2 gap-4">
        {[
          ["It prevents proof-texting.", "Instead of lifting one phrase out of context, you see how every line fits the author's argument."],
          ["It exposes the main idea.", "You learn which line carries the weight and which lines support, explain, or apply it."],
          ["It clarifies application.", "If you see the logic clearly, you are less likely to apply the text in a shallow or legalistic way."],
          ["It trains careful reading.", "Diagramming makes you ask better questions: Why? How? For what purpose? In contrast to what?"]
        ].map(([title, text]) => (
          <div key={title} className="bg-slate-50 border border-slate-100 rounded-xl p-4">
            <strong className="text-slate-900 block mb-1">{title}</strong>
            <p className="text-sm text-slate-700">{text}</p>
          </div>
        ))}
      </div>
    </div>

    <H2>Argument Diagramming vs. Sentence Diagramming</H2>
    <div className="grid md:grid-cols-2 gap-4 mb-10">
      <MethodCard title="Sentence Diagramming" color="rose">Focuses on how every word functions grammatically inside a sentence. It is useful for close grammar work, but it can become too detailed when your goal is to trace a paragraph's argument.</MethodCard>
      <MethodCard title="Argument Diagramming" color="sky">Focuses on how propositions and phrases relate across a sentence, paragraph, or section. It is better for seeing the big-picture flow of thought.</MethodCard>
    </div>

    <H2>Which Method Should I Use?</H2>
    <div className="grid md:grid-cols-3 gap-4 mb-10">
      {methodComparisonRows.map((method) => (
        <div key={method.method} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
          <strong className="text-indigo-900 block text-lg mb-2">{method.method}</strong>
          <p className="text-sm text-slate-700 mb-3">{method.display}</p>
          <div className="space-y-3 text-sm">
            <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-3">
              <strong className="text-indigo-800 block text-xs uppercase tracking-widest mb-1">Best For</strong>
              {method.bestFor}
            </div>
            <div className="bg-slate-50 border border-slate-100 rounded-xl p-3">
              <strong className="text-slate-800 block text-xs uppercase tracking-widest mb-1">Beginner Move</strong>
              {method.beginnerMove}
            </div>
            <div className="bg-rose-50 border border-rose-100 rounded-xl p-3">
              <strong className="text-rose-800 block text-xs uppercase tracking-widest mb-1">Caution</strong>
              {method.caution}
            </div>
          </div>
        </div>
      ))}
    </div>

    <details className="group bg-white border border-slate-200 rounded-2xl p-5 shadow-sm mb-10">
      <summary className="cursor-pointer list-none flex items-center justify-between gap-4">
        <div>
          <strong className="text-indigo-950 block text-lg">Reference Shelf: Eighteen Logical Relationships</strong>
          <p className="text-sm text-slate-600 mt-1">You do not have to memorize these. Open this chart only when a simple label is not enough.</p>
        </div>
        <ChevronDown className="w-5 h-5 text-indigo-600 transition-transform group-open:rotate-180" />
      </summary>
      <div className="mt-5">
        <div className="grid md:grid-cols-4 gap-3 mb-6">
          {relationshipFamilies.map((family) => (
            <div key={family.name} className={`${relationshipFamilyStyles[family.name]} border rounded-2xl p-4 shadow-sm`}>
              <div className="flex items-center justify-between gap-2 mb-2">
                <strong className="text-sm">{family.name}</strong>
                <span className="text-[11px] font-black uppercase tracking-widest">#{family.range}</span>
              </div>
              <p className="text-xs leading-relaxed text-slate-700">{family.summary}</p>
            </div>
          ))}
        </div>
        <div className="grid md:grid-cols-2 gap-3">
          {logicalRelationships.map((rel, index) => (
            <div key={rel.name} className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
              <div className="flex flex-wrap items-center gap-3 mb-2">
                <span className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold">{index + 1}</span>
                <strong className="text-indigo-900">{rel.name}</strong>
                <span className="text-[11px] font-black uppercase tracking-widest text-slate-500">{rel.code}</span>
                <span className={`text-[11px] font-bold px-2 py-1 rounded-full border ${relationshipFamilyStyles[rel.family]}`}>{rel.family}</span>
              </div>
              <p className="text-sm text-slate-700 mb-1">{rel.question}</p>
              <p className="text-xs text-slate-600 mb-1"><strong>Common signals:</strong> {rel.signals}</p>
              <p className="text-xs text-slate-500 italic">{rel.example}</p>
            </div>
          ))}
        </div>
      </div>
    </details>

    <H2>Next Step</H2>
    <div className="grid md:grid-cols-3 gap-4">
      <MethodCard title="Need grammar help?" color="indigo">Go to Grammar & Conjunctions before diagramming if you are unsure where to break lines.</MethodCard>
      <MethodCard title="Need the easiest method?" color="emerald">Start with Phrasing because the left edge and indentation make the flow easier to see.</MethodCard>
      <MethodCard title="Need a fuller example?" color="amber">Use Romans 12:1-2 in the Epistles case study after practicing the methods.</MethodCard>
    </div>
  </div>
);

const ArcingSection = ({ navigate }) => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 6.3: Argument Diagramming</div>
      <H1>Arcing</H1>
    </div>

    <LearningSteps
      title="Before You Arc"
      intro="Arcing is powerful, but it is not the first step for most beginners. Learn the flow, practice phrasing, then arc when you need tighter logic."
      steps={learningStepPresets.diagramming}
    />

    <H2>Learn: What Is Arcing?</H2>
    <P>
      Arcing is an argument diagram that divides a passage into propositions and connects them with curved lines. Each arc labels how two thoughts relate: ground, inference, contrast, purpose, result, and so on.
    </P>

    <div className="bg-indigo-50 border border-indigo-200 rounded-2xl p-6 shadow-sm mb-10">
      <strong className="text-indigo-950 block text-lg mb-2">Why Arcing Helps</strong>
      <p className="text-sm text-slate-700 leading-relaxed">Use arcing when you want to see what supports what. Start with nearby lines, then connect larger units only when the smaller relationships are clear.</p>
    </div>

    <H2>See: A Tiny Arc Before Romans</H2>
    <div className="grid md:grid-cols-2 gap-4 mb-10">
      <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
        <strong className="text-indigo-900 block text-lg mb-3">Everyday Sentence</strong>
        <div className="space-y-2 text-sm text-slate-700">
          <p><strong>1.</strong> I took an umbrella.</p>
          <p><strong>2.</strong> because the clouds were dark. <span className="text-emerald-700 font-bold">(Ground)</span></p>
          <p><strong>3.</strong> so that I would stay dry. <span className="text-amber-700 font-bold">(Purpose)</span></p>
        </div>
      </div>
      <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
        <strong className="text-indigo-900 block text-lg mb-3">Short Scripture Pattern</strong>
        <p className="text-sm text-slate-700 leading-relaxed mb-3">
          Many biblical sentences work this way: a command, a reason, and an aim. In Romans 12:1-2, mercy gives the reason, presenting the body is the appeal, and discernment is the aim.
        </p>
        <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-3 text-sm text-slate-700">
          <strong className="text-indigo-900">Beginner move:</strong> Find the main command first, then ask what supports it and where it leads.
        </div>
      </div>
    </div>

    <H2>Try: How to Arc a Passage</H2>
    <div className="space-y-4 mb-10">
      {[
        ["Choose a short unit.", "Begin with one sentence or paragraph. Do not start with a whole chapter."],
        ["Divide the unit into propositions.", "Put each verbal idea on its own line."],
        ["Pair the nearest related lines.", "Start small. Ask which two lines most obviously belong together before you try to solve the whole paragraph."],
        ["Decide whether the relationship is coordinate or subordinate.", "Ask whether the lines stand side by side or whether one supports the other."],
        ["Draw and label curved arcs.", "Use labels only when they explain the logic clearly."],
        ["Summarize the argument.", "Write one sentence explaining the passage's flow."]
      ].map(([title, text], index) => (
        <div key={title} className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex gap-4">
          <span className="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold shrink-0">{index + 1}</span>
          <div>
            <strong className="text-slate-900 block mb-1">{title}</strong>
            <p className="text-sm text-slate-700">{text}</p>
            <MethodStepGuidance title={title} />
          </div>
        </div>
      ))}
    </div>

    <H2>Check: Romans 12:1-2 Suggested Arc</H2>
    <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm mb-5">
      <strong className="text-indigo-900 block text-lg mb-2">Try Before You Look</strong>
      <p className="text-sm text-slate-700 leading-relaxed">
        On your own paper, connect lines 1-2 first, then 4-5, then 5-6. After that, ask how the whole unit moves from mercy to worship to transformation to discernment.
      </p>
    </div>
    <ArcDiagram />

    <div className="mt-8 bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
      <strong className="text-indigo-900 block text-lg mb-3">How to Read This Arc</strong>
      <div className="grid md:grid-cols-2 gap-4 text-sm text-slate-700">
        <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4">
          <strong className="text-emerald-900 block mb-1">First Arc: Ground</strong>
          God's mercies are not a side note. They are the reason the appeal can be made.
        </div>
        <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4">
          <strong className="text-indigo-900 block mb-1">Second Arc: Explanation</strong>
          The offering of the body is worshipful service, not a replacement for worship.
        </div>
        <div className="bg-purple-50 border border-purple-100 rounded-xl p-4">
          <strong className="text-purple-900 block mb-1">Third Arc: Contrast and Means</strong>
          Conformity to the age and transformation by renewed thinking are rival patterns of formation.
        </div>
        <div className="bg-amber-50 border border-amber-100 rounded-xl p-4">
          <strong className="text-amber-900 block mb-1">Final Arc: Purpose</strong>
          Renewal aims at discernment: knowing and approving God's will in concrete life.
        </div>
      </div>
    </div>

    <div className="mt-8 grid md:grid-cols-2 gap-4">
      <MethodCard title="Novice Tip" color="emerald">Do not try to label every relationship perfectly on your first pass. Start by identifying the main appeal, then ask what grounds it and what flows out of it.</MethodCard>
      <MethodCard title="Common Mistake" color="rose">Do not draw arcs merely because the diagram looks impressive. Every arc should answer a real interpretive question.</MethodCard>
    </div>
    {navigate && (
      <div className="mt-8 bg-indigo-50 border border-indigo-100 rounded-2xl p-5 shadow-sm flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <strong className="text-indigo-950 block mb-1">Ready for repetition?</strong>
          <p className="text-sm text-slate-700">Use the next page to practice arcing with the simpler 1 Thessalonians 5:16-18 passage.</p>
        </div>
        <button
          type="button"
          onClick={() => navigate('arcing-practice')}
          className="bg-indigo-600 text-white px-5 py-3 rounded-xl font-bold hover:bg-indigo-700 transition-all text-sm"
        >
          Go to Arcing Practice
        </button>
      </div>
    )}
  </div>
);

const BracketingSection = ({ navigate }) => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 6.4: Argument Diagramming</div>
      <H1>Bracketing</H1>
    </div>

    <LearningSteps
      title="Before You Bracket"
      intro="Bracketing answers the same relationship questions as arcing. Use it after you can identify main thoughts and supports."
      steps={learningStepPresets.diagramming}
    />

    <H2>Learn: What Is Bracketing?</H2>
    <P>
      Bracketing traces the same logical relationships as arcing, but it uses straight bracket shapes instead of curved arcs. If arcing feels visually busy, bracketing can make the structure feel cleaner and more orderly.
    </P>

    <div className="grid md:grid-cols-2 gap-4 mb-10">
      <MethodCard title="Same Goal as Arcing" color="indigo">Both methods divide the passage into propositions and label how the lines relate logically.</MethodCard>
      <MethodCard title="Different Display" color="amber">Arcing uses curved lines. Bracketing uses straight brackets. The method is different visually, not logically.</MethodCard>
    </div>

    <H2>See: A Tiny Bracket Before Romans</H2>
    <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm mb-10 overflow-x-auto">
      <div className="min-w-[620px] grid grid-cols-[140px_1fr] gap-4 items-stretch">
        <div className="border-l-4 border-t-4 border-b-4 border-emerald-500 rounded-l-xl flex items-center pl-4 text-emerald-800 font-black">Ground</div>
        <div className="space-y-2">
          <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-3 text-sm"><strong>1.</strong> I took an umbrella.</div>
          <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-3 text-sm"><strong>2.</strong> because the clouds were dark.</div>
        </div>
      </div>
      <div className="min-w-[620px] grid grid-cols-[140px_1fr] gap-4 items-stretch mt-4">
        <div className="border-l-4 border-t-4 border-b-4 border-amber-500 rounded-l-xl flex items-center pl-4 text-amber-800 font-black">Purpose</div>
        <div className="bg-amber-50 border border-amber-100 rounded-xl p-3 text-sm"><strong>3.</strong> so that I would stay dry.</div>
      </div>
      <div className="mt-4 bg-indigo-50 border border-indigo-100 rounded-xl p-4 text-sm text-slate-700">
        Bracketing uses the same relationship labels as arcing. The difference is that the visual grouping looks more like an outline.
      </div>
    </div>

    <H2>Try: How to Bracket a Passage</H2>
    <div className="space-y-4 mb-10">
      {[
        ["List the propositions.", "Put each proposition on its own line. Number the lines so you can discuss the diagram easily."],
        ["Group the closest relationships first.", "Start with obvious pairs: a command and reason, an idea and explanation, or a contrast."],
        ["Label each bracket.", "Use simple labels like ground, contrast, means, result, or purpose."],
        ["Stack smaller brackets into larger brackets.", "Let small groups become larger units only when the logic is clear."],
        ["Notice the main bracket.", "The largest bracket should show the passage's overall movement."],
        ["Turn the bracket into an outline.", "State the main idea and supports in a teachable form."]
      ].map(([title, text], index) => (
        <div key={title} className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex gap-4">
          <span className="bg-purple-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold shrink-0">{index + 1}</span>
          <div>
            <strong className="text-slate-900 block mb-1">{title}</strong>
            <p className="text-sm text-slate-700">{text}</p>
            <MethodStepGuidance title={title} />
          </div>
        </div>
      ))}
    </div>

    <H2>Check: Romans 12:1-2 Suggested Bracket</H2>
    <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm mb-5">
      <strong className="text-indigo-900 block text-lg mb-2">Try Before You Look</strong>
      <p className="text-sm text-slate-700 leading-relaxed">
        Group the closest pairs first: mercy with the appeal, nonconformity with transformation, and renewal with discernment. Then ask what the largest bracket says about the whole paragraph.
      </p>
    </div>
    <BracketDiagram />

    <div className="mt-8 grid md:grid-cols-3 gap-4">
      <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
        <strong className="text-indigo-900 block mb-2">Small Brackets</strong>
        <p className="text-sm text-slate-700">Begin with nearby pairs: mercy and appeal, conformity and transformation, renewal and discernment.</p>
      </div>
      <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
        <strong className="text-indigo-900 block mb-2">Large Brackets</strong>
        <p className="text-sm text-slate-700">Then ask how those pairs form the bigger appeal: worship grounded in mercy and expressed through transformation.</p>
      </div>
      <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
        <strong className="text-indigo-900 block mb-2">Outline Brackets</strong>
        <p className="text-sm text-slate-700">A good bracket can become a teaching outline because the structure already shows main point and supports.</p>
      </div>
    </div>

    <div className="mt-8 bg-slate-900 text-white rounded-2xl p-6 shadow-lg">
      <strong className="text-emerald-300 block mb-2">Interpretive Payoff</strong>
      <p className="text-sm text-slate-100 leading-relaxed">The bracket makes the logic visible: mercy grounds the appeal, worship explains the offering, transformation contrasts with conformity, and renewed thinking aims at discerning God's will.</p>
    </div>
    {navigate && (
      <div className="mt-8 bg-purple-50 border border-purple-100 rounded-2xl p-5 shadow-sm flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <strong className="text-purple-950 block mb-1">Practice the outline shape</strong>
          <p className="text-sm text-slate-700">Use the next page to bracket 1 Thessalonians 5:16-18 and turn it into a simple outline.</p>
        </div>
        <button
          type="button"
          onClick={() => navigate('bracketing-practice')}
          className="bg-purple-600 text-white px-5 py-3 rounded-xl font-bold hover:bg-purple-700 transition-all text-sm"
        >
          Go to Bracketing Practice
        </button>
      </div>
    )}
  </div>
);

const PhrasingSection = ({ navigate }) => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 6.5: Argument Diagramming</div>
      <H1>Phrasing</H1>
    </div>

    <LearningSteps
      title="Phrasing Learning Path"
      intro="For most beginners, phrasing is the best first diagramming method because it shows main thoughts and supports without requiring many labels."
      steps={learningStepPresets.diagramming}
    />

    <H2>Learn: What Is Phrasing?</H2>
    <P>
      Phrasing is an argument diagram that formats a passage line by line. Main clauses stay to the left. Subordinate clauses and supporting phrases are indented underneath what they modify. For many beginners, this is the easiest argument-diagramming method to start using immediately.
    </P>

    <div className="bg-amber-50 border-l-4 border-amber-500 p-5 rounded-r-xl my-8 shadow-sm">
      <div className="flex items-center gap-2 mb-2 text-amber-900 font-bold">
        <Lightbulb className="w-5 h-5" />
        <span>The Basic Rule</span>
      </div>
      <p className="text-sm text-amber-800">
        Put the main idea on the left. Indent whatever supports, modifies, explains, gives the reason for, or gives the purpose of that main idea.
      </p>
    </div>

    <H2>See: A Tiny Phrase Diagram Before Romans</H2>
    <div className="bg-slate-950 text-slate-100 rounded-2xl p-5 md:p-7 shadow-xl font-mono text-sm overflow-x-auto mb-10">
      <div className="min-w-[600px] space-y-2">
        <div className="flex gap-4 p-2 rounded bg-white/10"><span className="text-sky-300 font-bold w-28 shrink-0">Main</span><span>I took an umbrella</span></div>
        <div className="flex gap-4 p-2 rounded bg-white/5"><span className="text-emerald-300 font-bold w-28 shrink-0">Ground</span><span className="pl-8">because the clouds were dark</span></div>
        <div className="flex gap-4 p-2 rounded bg-white/5"><span className="text-amber-300 font-bold w-28 shrink-0">Purpose</span><span className="pl-8">so that I would stay dry</span></div>
      </div>
      <div className="mt-4 bg-white/10 border border-white/10 rounded-xl p-3 text-xs leading-relaxed">
        The main action stays left. The reason and purpose are indented because they support the main action.
      </div>
    </div>

    <H2>Try: Eight Steps for Phrasing</H2>
    <div className="space-y-4 mb-10">
      {[
        ["Establish the limits of the passage.", "Work with a sentence, paragraph, or short section."],
        ["Divide the passage into propositions and phrases.", "Break the text into manageable lines before worrying about labels."],
        ["Identify the main clauses.", "Find the verbal ideas that can stand as the backbone."],
        ["Indent subordinate clauses and phrases.", "Move supporting lines under the line they modify."],
        ["Line up parallel words or phrases.", "Make repeated or balanced ideas visible."],
        ["Add relationship labels.", "Start with simple labels: ground, means, contrast, purpose, result, explanation."],
        ["Use a form-based translation if helpful.", "Use a more literal translation when structure is hard to see."],
        ["Draft a provisional outline.", "Turn the diagram into a simple summary of the passage's flow."]
      ].map(([title, text], index) => (
        <div key={title} className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex gap-4">
          <span className="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold shrink-0">{index + 1}</span>
          <div>
            <strong className="text-slate-900 block mb-1">{title}</strong>
            <p className="text-sm text-slate-700">{text}</p>
            <MethodStepGuidance title={title} />
          </div>
        </div>
      ))}
    </div>

    <H2>How to Find the Main Clause</H2>
    <div className="grid md:grid-cols-3 gap-4 mb-10">
      <MethodCard title="Look for the Main Verb" color="indigo">Ask which verb carries the sentence's main action. In Romans 12:1, the main appeal is Paul's urging that believers present their bodies.</MethodCard>
      <MethodCard title="Treat Supports as Supports" color="emerald">Phrases like "by the mercies of God" and "by the renewing of your mind" are crucial, but they support the main action rather than replacing it.</MethodCard>
      <MethodCard title="Do Not Fear Revision" color="amber">Your first phrase diagram is provisional. Move lines, combine lines, or separate lines as the passage becomes clearer.</MethodCard>
    </div>

    <H2>Check: Romans 12:1-2 Suggested Phrase Diagram</H2>
    <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm mb-5">
      <strong className="text-indigo-900 block text-lg mb-2">Try Before You Look</strong>
      <p className="text-sm text-slate-700 leading-relaxed">
        Put the main appeal on the left. Indent "by the mercies of God" under the appeal as its ground, and indent "by the renewing of your mind" under transformation as its means.
      </p>
    </div>
    <PhraseDiagram />

    <div className="mt-8 bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
      <strong className="text-indigo-900 block text-lg mb-4">Provisional Outline From the Phrase Diagram</strong>
      <div className="space-y-3">
        {romansProvisionalOutline.map((line, index) => (
          <div key={line.title} className="grid md:grid-cols-[42px_1fr] gap-3 items-start bg-slate-50 border border-slate-100 rounded-xl p-4">
            <span className="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">{index + 1}</span>
            <div>
              <div className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 mb-1">
                <strong className="text-slate-900">{line.title}</strong>
                <span className="text-xs font-bold uppercase tracking-widest text-indigo-500">{line.reference}</span>
              </div>
              <p className="text-sm text-slate-700 leading-relaxed">{line.point}</p>
            </div>
          </div>
        ))}
      </div>
    </div>

    <div className="mt-8 grid md:grid-cols-3 gap-4">
      <MethodCard title="Simple" color="emerald">You can phrase with a word processor or notebook. You do not need special software.</MethodCard>
      <MethodCard title="Clear" color="sky">The left edge shows the main ideas. Indented lines show support and modification.</MethodCard>
      <MethodCard title="Flexible" color="amber">You can add labels, arrows, colors, parallel alignment, or brief comments as your skill grows.</MethodCard>
    </div>
    {navigate && (
      <div className="mt-8 bg-amber-50 border border-amber-100 rounded-2xl p-5 shadow-sm flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <strong className="text-amber-950 block mb-1">Start practicing here</strong>
          <p className="text-sm text-slate-700">Use the next page to phrase the shorter 1 Thessalonians 5:16-18 practice passage.</p>
        </div>
        <button
          type="button"
          onClick={() => navigate('phrasing-practice')}
          className="bg-amber-600 text-white px-5 py-3 rounded-xl font-bold hover:bg-amber-700 transition-all text-sm"
        >
          Go to Phrasing Practice
        </button>
      </div>
    )}
  </div>
);

const GrammarConjunctionsSection = () => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 6.2: Argument Diagramming</div>
      <H1>Grammar & Conjunctions</H1>
    </div>

    <LearningSteps
      title="Grammar Before Diagramming"
      intro="This page prepares you for the diagramming pages. Beginners should focus on main clauses, phrases, and conjunction clues before moving on."
      steps={learningStepPresets.diagramming}
    />

    <H2>Why This Page Matters</H2>
    <P>
      Argument diagrams are only as good as the line breaks beneath them. These grammar and conjunction guides help you decide where a proposition begins, when a phrase deserves its own line, and which logical relationship a connector may be signaling.
    </P>

    <H2>Five Grammar Things You Need Before Diagramming</H2>
    <div className="space-y-4 mb-10">
      {grammarEssentials.map((item) => (
        <div key={item.title} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
          <div className="grid lg:grid-cols-[240px_1fr] gap-5 items-start">
            <div>
              <strong className="text-indigo-900 block text-xl mb-2">{item.title}</strong>
              <p className="text-sm md:text-base text-slate-700 leading-relaxed">{item.plain}</p>
            </div>
            <div>
              <div className="grid md:grid-cols-2 gap-3 mb-4">
                <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4 text-sm text-slate-700">
                  <strong className="text-indigo-900 block mb-1">Quick Question</strong>
                  {item.question}
                </div>
                <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 text-sm text-slate-600 italic">
                  <strong className="not-italic text-slate-800 block mb-1">Tiny Example</strong>
                  {item.example}
                </div>
              </div>
              <MethodStepGuidance title={item.title} />
            </div>
          </div>
        </div>
      ))}
    </div>

    <div className="bg-amber-50 border-l-4 border-amber-500 p-5 rounded-r-xl my-8 shadow-sm">
      <div className="flex items-center gap-2 mb-2 text-amber-900 font-bold">
        <Lightbulb className="w-5 h-5" />
        <span>Conjunctions Are Clues, Not Commands</span>
      </div>
      <p className="text-sm text-amber-800">
        A connector can point you in the right direction, but it cannot decide the relationship by itself. The same English word can signal different relationships in different contexts, so always confirm the label by the meaning of the lines.
      </p>
    </div>

    <H2>When Should I Break a Line?</H2>
    <div className="grid md:grid-cols-2 gap-4 mb-10">
      {grammarBreakRules.map((item) => (
        <div key={item.component} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
          <div className="flex items-center justify-between gap-3 mb-3">
            <strong className="text-indigo-900 text-lg">{item.component}</strong>
            <span className="text-[11px] uppercase tracking-widest font-bold text-slate-500">Grammar</span>
          </div>
          <p className="text-sm text-slate-700 leading-relaxed mb-3">{item.role}</p>
          <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-3 text-sm text-slate-700 mb-3">
            <strong className="text-indigo-900 block mb-1">Break Rule</strong>
            {item.rule}
          </div>
          <p className="text-xs text-slate-500 italic">{item.example}</p>
          <MethodStepGuidance title={item.component} compact />
        </div>
      ))}
    </div>

    <H2>English Connector Lookup</H2>
    <P>
      Use this as a first-pass diagnostic when arcing or bracketing. The goal is not to match a word mechanically, but to ask the right relationship question.
    </P>
    <div className="space-y-3 mb-10">
      {conjunctionLookup.map((item) => (
        <div key={item.signal} className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm grid md:grid-cols-[220px_220px_1fr] gap-3 md:gap-5 items-start">
          <div>
            <strong className="text-slate-900 block text-sm uppercase tracking-widest mb-1">Signal</strong>
            <span className="text-indigo-900 font-bold">{item.signal}</span>
          </div>
          <div>
            <strong className="text-slate-900 block text-sm uppercase tracking-widest mb-1">Likely Relationship</strong>
            <span className="text-slate-700">{item.likely}</span>
          </div>
          <div className="text-sm text-slate-700 leading-relaxed">
            <strong className="text-rose-800">Check: </strong>{item.caution}
          </div>
        </div>
      ))}
    </div>

    <H2>Small Example: Romans 12:1-2</H2>
    <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm mb-10">
      <p className="text-sm text-slate-700 leading-relaxed mb-4">
        Use this as a quick grammar check, not a full case study. The full Romans 12 lab comes at the end of the Epistles unit.
      </p>
      <div className="grid md:grid-cols-2 gap-3 text-sm">
        <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-3"><strong className="text-indigo-900 block">Therefore</strong>points back to the mercies explained earlier in Romans.</div>
        <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-3"><strong className="text-emerald-900 block">By the Mercies of God</strong>gives the basis for the appeal.</div>
        <div className="bg-rose-50 border border-rose-100 rounded-xl p-3"><strong className="text-rose-900 block">Do Not... But Be...</strong>sets up a negative-positive contrast.</div>
        <div className="bg-amber-50 border border-amber-100 rounded-xl p-3"><strong className="text-amber-900 block">By the Renewing</strong>names the means of transformation.</div>
      </div>
    </div>

    <H2>Tiny Practice: Break the Line, Then Check</H2>
    <div className="space-y-3">
      {grammarPracticePrompts.map((item, index) => (
        <div key={item.prompt} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
          <div className="flex items-start gap-4">
            <span className="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold shrink-0">{index + 1}</span>
            <div className="flex-1">
              <strong className="text-slate-900 block mb-2">{item.prompt}</strong>
              <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-3 text-sm text-slate-700">
                <strong className="text-emerald-900">Suggested check: </strong>{item.answer}
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const PhrasingRelationshipsSection = () => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 6.5.2: Phrasing</div>
      <H1>Phrasing Relationships</H1>
    </div>

    <H2>Phrase Types</H2>
    <P>
      Phrasing works by anchoring smaller phrases to the line they support. First identify the type of phrase, then ask how it relates to its anchor phrase.
    </P>
    <div className="bg-amber-50 border-l-4 border-amber-500 p-5 rounded-r-xl my-8 shadow-sm">
      <div className="flex items-center gap-2 mb-2 text-amber-900 font-bold">
        <Lightbulb className="w-5 h-5" />
        <span>Reference Shelf, Not First Lesson</span>
      </div>
      <p className="text-sm text-amber-800">
        You do not need to master every relationship before phrasing. Start with the obvious ones, then return here when you need a sharper label for how a phrase supports its anchor.
      </p>
    </div>
    <div className="grid md:grid-cols-2 gap-4 mb-10">
      {phraseTypes.map((type) => (
        <div key={type.name} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
          <strong className="text-indigo-900 block text-lg mb-2">{type.name}</strong>
          <p className="text-sm text-slate-700 leading-relaxed">{type.description}</p>
        </div>
      ))}
    </div>

    <H2>Relationship Chooser</H2>
    <P>
      When you are stuck, ask a plain question before choosing a technical label. The question usually points toward the relationship.
    </P>
    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 mb-10">
      {relationshipChooserQuestions.map((item) => (
        <div key={item.question} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
          <strong className="text-indigo-900 block mb-2">{item.question}</strong>
          <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-3 text-sm text-slate-700 mb-3">
            <strong className="text-indigo-900">Likely label: </strong>{item.label}
          </div>
          <p className="text-xs text-slate-500 italic">{item.example}</p>
        </div>
      ))}
    </div>

    <H2>Reference Shelf: Relationship Palette for Phrasing</H2>
    <P>
      Phrase relationships are more granular than arc labels because small phrases can support their anchor in many ways. Start with the question, then choose the simplest label that explains the phrase.
    </P>
    <div className="space-y-4 mb-10">
      {phraseRelationshipGroups.map((group) => (
        <section key={group.group} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
          <div className="grid lg:grid-cols-[260px_1fr] gap-5 lg:gap-7 items-start">
            <div className="lg:sticky lg:top-6">
              <strong className="text-indigo-900 block text-xl mb-2">{group.group}</strong>
              <p className="text-sm md:text-base text-slate-700 leading-relaxed">{group.question}</p>
            </div>
            <div className="grid sm:grid-cols-2 xl:grid-cols-3 gap-3">
              {group.labels.map((label) => (
                <div key={label.name} className="bg-indigo-50 border border-indigo-100 rounded-xl p-4">
                  <strong className="text-indigo-900 block text-base mb-2">{label.name}</strong>
                  <p className="text-sm text-slate-700 leading-relaxed mb-3">{label.definition}</p>
                  <div className="bg-white/70 border border-indigo-100 rounded-lg p-3 text-xs text-slate-700 mb-2">
                    <strong className="text-indigo-900 block mb-1">Ask</strong>
                    {label.question}
                  </div>
                  <p className="text-xs text-slate-500 italic"><strong>Example:</strong> {label.example}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      ))}
    </div>

    <details className="group bg-white border border-slate-200 rounded-2xl p-5 shadow-sm mb-10">
      <summary className="cursor-pointer list-none flex items-center justify-between gap-4">
        <div>
          <strong className="text-indigo-950 block text-lg">Advanced Reference: Genitive Relationship Guide</strong>
          <p className="text-sm text-slate-600 mt-1">Open this when an "of" phrase is important and possession does not explain it well.</p>
        </div>
        <ChevronDown className="w-5 h-5 text-indigo-600 transition-transform group-open:rotate-180" />
      </summary>
      <p className="text-sm text-slate-700 leading-relaxed mt-5 mb-4">
        A genitive phrase often appears in English with "of." That small word can mean many things, so use these question prompts instead of assuming every "of" means possession.
      </p>
      <div className="grid md:grid-cols-2 gap-4">
        {genitiveRelationshipGroups.map((group) => (
          <div key={group.group} className="bg-slate-50 border border-slate-200 rounded-2xl p-5 shadow-sm">
            <strong className="text-indigo-900 block text-lg mb-2">{group.group}</strong>
            <p className="text-sm text-slate-700 leading-relaxed mb-4">{group.question}</p>
            <div className="flex flex-wrap gap-2">
              {group.labels.map((label) => (
                <span key={label} className="bg-white border border-slate-200 text-slate-800 px-3 py-2 rounded-xl text-sm font-semibold">
                  {label}
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </details>

    <H2>Romans 12:1-2 Phrasing Practice</H2>
    <div className="bg-slate-950 text-slate-100 rounded-2xl p-5 md:p-7 shadow-xl overflow-x-auto">
      <div className="min-w-[720px] space-y-3 text-sm">
        <div className="grid grid-cols-[180px_1fr_220px] gap-4 bg-white/10 border border-white/10 rounded-xl p-3">
          <strong className="text-emerald-300">Ground</strong>
          <span>by the mercies of God</span>
          <span className="text-slate-300">basis for the appeal</span>
        </div>
        <div className="grid grid-cols-[180px_1fr_220px] gap-4 bg-white/10 border border-white/10 rounded-xl p-3">
          <strong className="text-sky-300">Content</strong>
          <span>to present your bodies</span>
          <span className="text-slate-300">what Paul urges</span>
        </div>
        <div className="grid grid-cols-[180px_1fr_220px] gap-4 bg-white/10 border border-white/10 rounded-xl p-3">
          <strong className="text-purple-300">Negative-Positive</strong>
          <span>not conformed... but transformed</span>
          <span className="text-slate-300">contrast in formation</span>
        </div>
        <div className="grid grid-cols-[180px_1fr_220px] gap-4 bg-white/10 border border-white/10 rounded-xl p-3">
          <strong className="text-amber-300">Means</strong>
          <span>by the renewing of your mind</span>
          <span className="text-slate-300">how transformation occurs</span>
        </div>
        <div className="grid grid-cols-[180px_1fr_220px] gap-4 bg-white/10 border border-white/10 rounded-xl p-3">
          <strong className="text-emerald-300">Purpose / Result</strong>
          <span>so that you may discern God's will</span>
          <span className="text-slate-300">aim of renewal</span>
        </div>
      </div>
    </div>
  </div>
);

const caseStudyColorStyles = [
  { wrap: "bg-sky-50 border-sky-200", badge: "bg-sky-500", title: "text-sky-900" },
  { wrap: "bg-indigo-50 border-indigo-200", badge: "bg-indigo-600", title: "text-indigo-900" },
  { wrap: "bg-amber-50 border-amber-200", badge: "bg-amber-500", title: "text-amber-900" },
  { wrap: "bg-emerald-50 border-emerald-200", badge: "bg-emerald-600", title: "text-emerald-900" },
  { wrap: "bg-purple-50 border-purple-200", badge: "bg-purple-600", title: "text-purple-900" },
  { wrap: "bg-rose-50 border-rose-200", badge: "bg-rose-500", title: "text-rose-900" }
];

const caseStudies = {
  poetry: {
    genre: "Poetry",
    passage: "Psalm 42",
    subtitle: "A lament that moves from spiritual thirst to disciplined hope.",
    focus: "Lament structure, imagery, refrain, emotional movement, and hope in God.",
    setup: "Psalm 42 gives voice to a worshiper who feels separated from God's presence, mocked by enemies, and emotionally overwhelmed. The poem does not silence grief; it teaches grief how to speak honestly before God.",
    passageNotes: [
      "Notice the repeated refrain: the psalmist speaks to his own soul and commands it to hope in God.",
      "Track the movement from longing, memory, tears, and turmoil toward renewed trust.",
      "Read the images as poetry: thirst, tears, waterfalls, waves, and a downcast soul are emotional-theological pictures."
    ],
    workbook: [
      {
        title: "Preunderstanding Check",
        description: "Do not assume faithful people must sound emotionally calm. This psalm shows that faith can pray from anguish without becoming unbelief.",
        items: [
          "Name the modern reflex: many readers rush to application and skip the pain.",
          "Submit that reflex to the text: the psalm makes room for grief, memory, questions, and hope.",
          "Ask what the inspired poet is doing emotionally before extracting a doctrine."
        ]
      },
      {
        title: "Observation",
        description: "Begin with what the poem repeats, pictures, and contrasts.",
        items: [
          "Repeated refrain: the psalmist asks why his soul is cast down and then calls it to hope.",
          "Key images: thirst for God, tears as food, deep calling to deep, waves passing over him.",
          "Major contrast: remembered worship with the assembly versus present distance and taunting."
        ]
      },
      {
        title: "Genre-Specific Interpretation",
        description: "Use the poetry rules: structure, parallelism, imagery, emotional context, and refrain.",
        items: [
          "The refrain divides the poem into movements and gives the main pastoral response.",
          "The water imagery intensifies: thirst first communicates longing, then waves communicate being overwhelmed.",
          "The poem does not solve pain by explanation; it disciplines pain through prayer and hope."
        ]
      },
      {
        title: "Theological Synthesis",
        description: "Bring the poem into the larger biblical story without flattening its emotional force.",
        items: [
          "The psalm assumes God is the living God, not a religious idea or mere comfort object.",
          "The exile-like distance from worship points to the deep human need for restored presence with God.",
          "In Christ, lament is not rejected; Jesus Himself prays Scripture from the depths of suffering."
        ]
      },
      {
        title: "Contemporary Application",
        description: "Apply the psalm as a pattern for faithful lament.",
        items: [
          "Speak honestly to God rather than pretending spiritual pain is not real.",
          "Preach hope to your own soul when emotions are telling only part of the truth.",
          "Remember past evidence of God's faithfulness while waiting for renewed praise."
        ]
      }
    ],
    mistakes: [
      "Treating the psalm as a quick cure for sadness.",
      "Reading the images literalistically instead of poetically.",
      "Skipping the repeated refrain, which carries the pastoral center of the poem."
    ],
    bigIdea: "Psalm 42 teaches believers to bring deep emotional thirst to the living God and to answer despair with remembered worship, honest prayer, and disciplined hope."
  },
  history: {
    genre: "Historical Narrative",
    passage: "1 Samuel 17",
    subtitle: "David and Goliath as theological narrative, not a slogan about self-confidence.",
    focus: "Plot, characterization, narrator emphasis, avoiding shallow moralizing, and God's covenant deliverance.",
    setup: "The story is set in Israel's conflict with the Philistines, while Saul's kingship is already failing. The narrative contrasts fear-driven leadership with covenant-shaped trust in the Lord.",
    passageNotes: [
      "Track the plot tension: Israel is immobilized by fear while Goliath defies the armies of the living God.",
      "Compare characters: Saul looks impressive but fears; David looks unimpressive but sees the theological issue clearly.",
      "Notice the narrator's emphasis on God's reputation and covenant deliverance."
    ],
    workbook: [
      {
        title: "Preunderstanding Check",
        description: "The common reflex is to make the passage mainly about facing your giants. That application is too small if it ignores God's covenant honor.",
        items: [
          "Ask what the narrator highlights, not what motivational reading feels inspiring.",
          "Remember that David is not merely an underdog; he is the Lord's anointed servant in the story.",
          "Avoid making yourself the hero before seeing what God is doing for His people."
        ]
      },
      {
        title: "Observation",
        description: "Historical narrative communicates through plot, setting, conflict, dialogue, and characterization.",
        items: [
          "The repeated challenge of Goliath creates the central conflict: the living God is being defied.",
          "Saul and Israel respond with fear; David responds with covenant memory and zeal for God's name.",
          "David's speeches interpret the event before the battle happens."
        ]
      },
      {
        title: "Genre-Specific Interpretation",
        description: "Read the narrative as theological history selected and shaped to reveal God's action.",
        items: [
          "The story is not random hero material; it advances the contrast between Saul and David.",
          "The narrator uses characterization to show the kind of king Israel needs.",
          "The battle demonstrates that deliverance does not rest on conventional military power."
        ]
      },
      {
        title: "Theological Synthesis",
        description: "Set David's victory inside the larger biblical storyline.",
        items: [
          "David acts as the representative deliverer for Israel.",
          "The story anticipates the theme of God's chosen king defeating enemies on behalf of fearful people.",
          "The deeper pattern finds its fulfillment in Christ, the greater Son of David."
        ]
      },
      {
        title: "Contemporary Application",
        description: "Apply the text through the theological principle, not by copying the ancient battle scene.",
        items: [
          "Trust God's covenant faithfulness when visible circumstances make obedience look foolish.",
          "Measure crises by God's character and promises, not only by the size of the threat.",
          "Lead with courage that protects others and honors God's name."
        ]
      }
    ],
    mistakes: [
      "Reducing Goliath to any personal inconvenience.",
      "Ignoring the Saul-David contrast in the surrounding narrative.",
      "Making David only an example instead of also seeing him as a representative deliverer."
    ],
    bigIdea: "1 Samuel 17 shows that the Lord saves His people through His chosen servant, exposing fear-driven unbelief and calling God's people to covenant courage."
  },
  gospelsActs: {
    genre: "Gospels and Acts",
    passage: "Luke 24:13-49",
    subtitle: "The risen Jesus opens Scripture, reveals Himself, and commissions witnesses.",
    focus: "Resurrection recognition, Scripture fulfillment, Gospel narrative, Acts trajectory, Spirit-empowered mission.",
    setup: "Luke 24 moves from confusion and disappointment to recognition, opened Scripture, resurrection witness, and the promise of power from on high. It closes Luke's Gospel and prepares readers for the mission that continues in Acts.",
    passageNotes: [
      "Watch how Jesus interprets His death and resurrection from Moses, the Prophets, and the Psalms.",
      "Notice the movement from hidden recognition to opened eyes, opened Scriptures, and opened mission.",
      "Read the ending of Luke as the doorway into Acts: witness to all nations will require the promised Spirit."
    ],
    workbook: [
      {
        title: "Preunderstanding Check",
        description: "Do not read the resurrection appearance as a sentimental ending. Luke is showing how the risen Jesus reinterprets Scripture, suffering, mission, and hope.",
        items: [
          "Name assumptions you bring about disappointment, proof, and recognition.",
          "Notice that Jesus corrects the disciples' reading of Scripture before He sends them.",
          "Resist separating personal comfort from missionary witness."
        ]
      },
      {
        title: "Observation",
        description: "Begin with movement, repeated ideas, and the disciples' changing perception.",
        items: [
          "The disciples move from downcast confusion to burning hearts and public witness.",
          "Jesus opens Scripture before the disciples fully grasp the event.",
          "The passage repeats witness, fulfillment, repentance, forgiveness, nations, and promised power."
        ]
      },
      {
        title: "Genre-Specific Interpretation",
        description: "Read the passage as Gospel narrative that prepares for Acts.",
        items: [
          "The scene is theological biography: it reveals who Jesus is and what His resurrection means.",
          "The Emmaus road and Jerusalem commission belong together: recognition leads to witness.",
          "The promised Spirit points forward to Acts, where the mission begins to spread."
        ]
      },
      {
        title: "Theological Synthesis",
        description: "Connect resurrection, Scripture fulfillment, and mission.",
        items: [
          "Jesus' suffering and glory were not a failed plan but the fulfillment of Scripture.",
          "The message to the nations centers on repentance and forgiveness in His name.",
          "The church's mission depends on the risen Christ and the promised Spirit."
        ]
      },
      {
        title: "Contemporary Application",
        description: "Apply the passage by reading Scripture with Christ at the center and bearing witness in dependence on the Spirit.",
        items: [
          "Let Christ correct disappointed or partial readings of Scripture.",
          "Move from private recognition of Jesus to public witness about Him.",
          "Depend on God's promised power rather than technique or confidence alone."
        ]
      }
    ],
    mistakes: [
      "Treating Luke 24 as only a comforting resurrection story without mission.",
      "Reading the Old Testament without the fulfillment pattern Jesus teaches.",
      "Jumping to Acts-style activity without waiting for Spirit-empowered witness."
    ],
    bigIdea: "Luke 24:13-49 teaches that the risen Jesus fulfills Scripture, opens His disciples' understanding, and sends them as Spirit-empowered witnesses to the nations."
  },
  epistles: {
    genre: "Epistles",
    passage: "Romans 12:1-2",
    subtitle: "A compact example of doctrine becoming embodied worship.",
    focus: "\"Therefore,\" indicatives grounding imperatives, body and mind language, transformation, and application.",
    setup: "Romans 12 begins the major ethical turn of the letter. Paul does not start Christian obedience in Romans 12 from guilt or self-improvement, but from the mercies of God unfolded in Romans 1-11.",
    passageNotes: [
      "The word \"therefore\" connects the command to the whole argument that came before.",
      "Paul addresses the body, the mind, and the community-shaped life of worship.",
      "The commands are plural and communal, even when they apply personally."
    ],
    workbook: [
      {
        title: "Preunderstanding Check",
        description: "Do not read these verses as generic advice about being different. Paul grounds transformation in God's mercy.",
        items: [
          "Ask what the command rests on: the mercies of God.",
          "Avoid separating spiritual worship from bodily obedience.",
          "Resist individualistic reading; Paul is forming a church community."
        ]
      },
      {
        title: "Observation",
        description: "Epistles develop arguments through logic, grammar, and theological connections.",
        items: [
          "\"Therefore\" signals that Romans 12 depends on Romans 1-11.",
          "The main appeal is to present bodies as living sacrifice.",
          "Two contrasting patterns appear: conformity to this age and transformation by renewed mind."
        ]
      },
      {
        title: "Genre-Specific Interpretation",
        description: "Trace Paul's sentence logic and let gospel indicatives ground ethical imperatives.",
        items: [
          "The command flows from mercy, not from an attempt to earn mercy.",
          "The body language means worship includes ordinary embodied life.",
          "The renewed mind enables discernment of God's will, not mere information accumulation."
        ]
      },
      {
        title: "Theological Synthesis",
        description: "Connect the passage to worship, sacrifice, and new-covenant transformation.",
        items: [
          "The sacrificial language is fulfilled in Christ and transformed into whole-life worship.",
          "Grace produces obedience as gratitude, not legalism.",
          "The Spirit renews the mind so believers can live as the people of the coming age."
        ]
      },
      {
        title: "Contemporary Application",
        description: "Move from principle to specific embodied obedience.",
        items: [
          "Offer habits, speech, sexuality, money, time, and relationships to God as worship.",
          "Identify where the present age is shaping desires and assumptions.",
          "Practice discernment by testing decisions against God's revealed character and will."
        ]
      }
    ],
    mistakes: [
      "Reading Romans 12 without Romans 1-11.",
      "Turning transformation into self-help.",
      "Treating worship as only music or church attendance."
    ],
    bigIdea: "Romans 12:1-2 teaches that God's mercy creates a worshiping people whose whole embodied life is transformed by a renewed mind."
  },
  law: {
    genre: "Law",
    passage: "Deuteronomy 22:8",
    subtitle: "A rooftop safety law that reveals neighbor-love and responsibility.",
    focus: "Cultural context, law form, underlying value, principlizing, and modern application.",
    setup: "This law tells Israelites to build a protective parapet around a roof. In the ancient setting, flat roofs were used as living space, so the command protected neighbors, guests, and household members from preventable harm.",
    passageNotes: [
      "The command is concrete and culturally located.",
      "The reason clause reveals the value: prevent bloodguilt by preventing avoidable harm.",
      "The modern application requires carrying the value forward, not copying the exact architecture."
    ],
    workbook: [
      {
        title: "Preunderstanding Check",
        description: "Do not dismiss the law as irrelevant because you do not have an ancient flat roof.",
        items: [
          "Ask what value the law protects before deciding how it applies.",
          "Recognize that Old Testament laws often reveal God's concern for life, justice, and neighbor-love.",
          "Avoid both legalistic copying and careless dismissal."
        ]
      },
      {
        title: "Observation",
        description: "Study the command, situation, and stated purpose.",
        items: [
          "The command: build a parapet around a new roof.",
          "The cultural situation: roofs functioned as usable household space.",
          "The stated concern: prevent someone from falling and bringing guilt on the household."
        ]
      },
      {
        title: "Genre-Specific Interpretation",
        description: "Read the law through covenant context, form, and underlying value.",
        items: [
          "This is a case-like command addressing a concrete home-building situation.",
          "The form teaches proactive responsibility before harm happens.",
          "The underlying value is love of neighbor expressed through practical safety."
        ]
      },
      {
        title: "Theological Synthesis",
        description: "Carry the value forward through the whole biblical witness.",
        items: [
          "Human life matters because people bear God's image.",
          "Love for neighbor includes preventing foreseeable harm.",
          "Jesus' command to love our neighbor confirms and deepens the moral value beneath the law."
        ]
      },
      {
        title: "Contemporary Application",
        description: "Translate the principle into modern responsibility.",
        items: [
          "Install railings, fences, smoke alarms, safe wiring, and child protection where needed.",
          "In workplaces and churches, address known hazards before someone gets hurt.",
          "Practice neighbor-love by spending money and attention on prevention, not only reaction."
        ]
      }
    ],
    mistakes: [
      "Saying the verse has no relevance because the architecture is ancient.",
      "Applying the ancient form while missing the moral value.",
      "Using law study only for rules instead of learning God's character."
    ],
    bigIdea: "Deuteronomy 22:8 teaches that God's people must love their neighbors by taking practical responsibility for preventable harm."
  },
  parables: {
    genre: "Parables",
    passage: "Luke 10:25-37",
    subtitle: "The Good Samaritan as a story that overturns self-protective religion.",
    focus: "Original question, audience, twist, central truth, and mercy across boundaries.",
    setup: "Jesus tells this parable in response to a lawyer who wants to define the limits of neighbor-love. The story changes the question from identifying who qualifies as neighbor to becoming the kind of person who shows mercy.",
    passageNotes: [
      "The setup matters: a legal question about eternal life leads to a test of neighbor-love.",
      "The shocking figure is the Samaritan, an outsider expected to be despised by many Jewish hearers.",
      "The ending presses a response: go and do likewise."
    ],
    workbook: [
      {
        title: "Preunderstanding Check",
        description: "Do not reduce the parable to generic kindness. Jesus is confronting boundary-making and religious evasion.",
        items: [
          "Ask why the lawyer wants to justify himself.",
          "Notice that the parable attacks selective compassion.",
          "Let the story expose the reader, not merely inform the reader."
        ]
      },
      {
        title: "Observation",
        description: "Identify the characters, conflict, movement, and closing command.",
        items: [
          "Characters: wounded man, priest, Levite, Samaritan, innkeeper, and questioning lawyer.",
          "Movement: need appears, expected helpers pass by, despised outsider shows costly mercy.",
          "Closing question: Jesus asks who became a neighbor to the wounded man."
        ]
      },
      {
        title: "Genre-Specific Interpretation",
        description: "Find the central truth and the unexpected twist without over-allegorizing details.",
        items: [
          "The central contrast is not between bad people and nice people, but between religious status and actual mercy.",
          "The Samaritan is the hook: the outsider becomes the model of covenant love.",
          "Do not assign hidden meanings to every object; follow the story's main pressure."
        ]
      },
      {
        title: "Theological Synthesis",
        description: "Place the parable within Jesus' kingdom ethic.",
        items: [
          "Love for God cannot be separated from love for neighbor.",
          "Mercy crosses ethnic, religious, social, and personal boundaries.",
          "Jesus reveals the kind of love that fulfills the law."
        ]
      },
      {
        title: "Contemporary Application",
        description: "Let the parable demand a concrete response.",
        items: [
          "Identify the people you are tempted to define outside your circle of concern.",
          "Choose costly mercy where compassion interrupts convenience.",
          "Ask not only \"Who is my neighbor?\" but \"To whom must I become a neighbor?\""
        ]
      }
    ],
    mistakes: [
      "Turning every minor detail into a symbol.",
      "Missing the original lawyer's self-justifying question.",
      "Softening the scandal of the Samaritan."
    ],
    bigIdea: "Luke 10:25-37 teaches that true neighbor-love is costly mercy shown across the very boundaries we are tempted to use as excuses."
  },
  prophecy: {
    genre: "Prophecy",
    passage: "Daniel 7",
    subtitle: "An apocalyptic vision that moves from beastly empires to heavenly judgment and God's kingdom.",
    focus: "Apocalyptic symbols, historicist sequence, recapitulation, heavenly judgment, and Christ-centered reading.",
    setup: "Daniel 7 presents symbolic beasts, a little horn, a heavenly court, and the Son of Man receiving dominion. In the historicist framework of this guide, the vision traces a continuous historical sweep and enlarges the kingdom sequence introduced in Daniel 2.",
    passageNotes: [
      "The vision itself identifies beasts as kings or kingdoms.",
      "The sequence matters: beastly kingdoms rise, the little horn appears, the heavenly court sits, and God's kingdom is given to the saints.",
      "The center of hope is not speculation, but God's judgment and the reign of the Son of Man."
    ],
    workbook: [
      {
        title: "Preunderstanding Check",
        description: "Do not start with headlines or fear. Start with Daniel, the symbols, and the biblical explanations.",
        items: [
          "Ask what the text identifies directly before consulting outside systems.",
          "Stay within the apocalyptic genre: symbols, sequence, and heavenly interpretation matter.",
          "Keep Christ and God's final kingdom at the center."
        ]
      },
      {
        title: "Observation",
        description: "Map the vision before interpreting the symbols.",
        items: [
          "Four beasts arise from the sea, each distinct from the others.",
          "A little horn speaks arrogantly and opposes the saints.",
          "The Ancient of Days sits in judgment, and the Son of Man receives everlasting dominion."
        ]
      },
      {
        title: "Genre-Specific Interpretation",
        description: "Use the rules for apocalyptic prophecy: Scripture decodes symbols, sequence, recapitulation, and historicist continuity.",
        items: [
          "Beasts represent kingdoms, as Daniel 7 itself explains.",
          "Daniel 7 repeats and enlarges Daniel 2's kingdom sequence with new judgment details.",
          "The vision moves through history toward heavenly judgment and the final kingdom of God."
        ]
      },
      {
        title: "Theological Synthesis",
        description: "Read the vision as revelation of God's rule over history.",
        items: [
          "Earthly empires appear beastly when they oppose God's rule and people.",
          "The heavenly court shows that history is morally accountable to God.",
          "The Son of Man receives the kingdom, centering the hope of the prophecy in Christ."
        ]
      },
      {
        title: "Contemporary Application",
        description: "Apply prophecy as faithful endurance, not chart curiosity.",
        items: [
          "Resist fear when earthly powers look dominant.",
          "Remain faithful under pressure because God judges justly.",
          "Let prophecy deepen confidence in Christ's final victory."
        ]
      }
    ],
    mistakes: [
      "Starting with current events before interpreting the text.",
      "Ignoring Daniel's own explanations of symbols.",
      "Treating prophecy as fear fuel rather than Christ-centered hope."
    ],
    bigIdea: "Daniel 7 reveals that beastly powers rise and oppose God's people, but heaven's court rules over history and the Son of Man receives the everlasting kingdom."
  },
  wisdom: {
    genre: "Wisdom Literature",
    passage: "Proverbs 26:4-5",
    subtitle: "Two neighboring proverbs that teach discernment instead of mechanical rule-keeping.",
    focus: "Wisdom as discernment, proverbs as situational guidance, and avoiding mechanical application.",
    setup: "These two proverbs appear to give opposite instructions about answering a fool. Their placement forces the reader to learn wisdom as situational discernment under the fear of the Lord.",
    passageNotes: [
      "The tension is intentional: sometimes answering a fool makes you like him; sometimes silence lets folly appear wise.",
      "The reader must learn when each proverb applies.",
      "This is a perfect example of why proverbs are wisdom principles, not mechanical promises or universal scripts."
    ],
    workbook: [
      {
        title: "Preunderstanding Check",
        description: "Do not panic when wisdom sayings seem to pull in different directions. That is part of how wisdom trains discernment.",
        items: [
          "Reject the assumption that every proverb works like a rigid command.",
          "Ask what kind of situation each proverb imagines.",
          "Remember that wisdom requires maturity, timing, tone, and character."
        ]
      },
      {
        title: "Observation",
        description: "Read the two sayings together because their placement is part of the lesson.",
        items: [
          "One proverb warns that answering foolishly can pull you into foolishness.",
          "The next warns that not answering can allow the fool to remain wise in his own eyes.",
          "Both sayings are concerned with the effect of your response."
        ]
      },
      {
        title: "Genre-Specific Interpretation",
        description: "Read Proverbs as practical wisdom for normally recurring situations.",
        items: [
          "The question is not \"Which verse is true?\" Both are true in fitting circumstances.",
          "Wisdom asks which danger is greater in the moment: being dragged into folly or letting folly go unchallenged.",
          "The fear of the Lord shapes not only whether we speak, but how and why we speak."
        ]
      },
      {
        title: "Theological Synthesis",
        description: "Connect speech wisdom to the Bible's larger concern for truth and love.",
        items: [
          "God cares about truthful speech, but also about humility and self-control.",
          "Jesus models both silence before hostile accusation and direct rebuke when truth requires it.",
          "The Spirit forms people who speak with wisdom rather than impulse."
        ]
      },
      {
        title: "Contemporary Application",
        description: "Apply the paired proverbs to conversations, conflict, and public discourse.",
        items: [
          "Sometimes do not answer: refuse to mirror sarcasm, rage, or bad-faith argument.",
          "Sometimes answer: correct harmful folly when silence would mislead others.",
          "Before speaking, ask what love, truth, timing, and humility require."
        ]
      }
    ],
    mistakes: [
      "Forcing one proverb to cancel the other.",
      "Treating Proverbs as absolute scripts with no need for discernment.",
      "Using the text to justify either cowardly silence or quarrelsome speech."
    ],
    bigIdea: "Proverbs 26:4-5 teaches that wisdom is not automatic rule-following but Spirit-shaped discernment about when speech will restrain folly and when silence will avoid becoming foolish."
  }
};

const caseStudyExpansions = {
  "Psalm 42": {
    orientation: [
      { title: "Genre Identification", text: "Psalm 42 is a lament psalm. It is poetic, emotional, prayerful, and structured around repeated self-address: the psalmist speaks to his own soul and calls it back to hope." },
      { title: "Historical-Liturgical Setting", text: "The speaker remembers joining the worshiping assembly but now feels far from the sanctuary, mocked by opponents, and inwardly disoriented. The exact occasion is not named, so the internal evidence should guide interpretation." },
      { title: "Movement of the Passage", text: "The poem moves from thirst, tears, and memory to turmoil, prayer, and renewed hope. The refrain creates the interpretive spine: grief is real, but it must be answered by hope in God." },
      { title: "Interpretive Aim", text: "The goal is not to flatten lament into a happy slogan. The goal is to understand how biblical poetry teaches faithful people to pray honestly when God feels absent." }
    ],
    posture: [
      "Begin with humility: this psalm may challenge the assumption that mature believers should never feel spiritual depression, thirst, or confusion.",
      "Seek authorial intent: the inspired poet is not merely reporting feelings; he is shaping those feelings into worship.",
      "Pray for illumination without bypassing study: ask God to expose both sentimental readings and coldly analytical readings."
    ],
    phases: [
      {
        title: "Phase 1: Preparation",
        summary: "Psalm 42 confronts modern impatience with grief. Before interpreting, name the assumptions you bring to sadness, worship, and spiritual dryness.",
        groups: [
          { title: "Likely Reflexes", body: "A reader may rush to make the psalm say, \"Just hope harder,\" or treat sorrow as a failure of faith.", items: ["Notice whether you are uncomfortable with unanswered pain.", "Refuse to silence the psalmist's questions too quickly.", "Let lament be a faithful form of speech, not an embarrassment."] },
          { title: "Cultural Baggage", body: "Modern therapeutic language can help name pain, but it can also make the self the final authority.", items: ["The psalmist speaks to his soul, but he does not worship his emotions.", "He remembers corporate worship, not only private spirituality.", "His hope is anchored in God, not in emotional self-management."] },
          { title: "Submission to the Text", body: "Let the poem set the pace: longing, tears, memory, questions, and hope all belong to the inspired movement.", items: ["Do not skip the tears.", "Do not skip the refrain.", "Do not separate honest prayer from disciplined hope."] }
        ]
      },
      {
        title: "Phase 2: Observation",
        summary: "Observe repeated language, poetic images, structure, contrasts, and emotional movement before drawing conclusions.",
        groups: [
          { title: "Repeated Words and Refrain", body: "The repeated question about the downcast soul and the command to hope in God mark the poem's main movement.", items: ["The refrain appears as self-address.", "The soul is both troubled and teachable.", "Hope is commanded while sorrow is still present."] },
          { title: "Key Images", body: "The psalm is full of water imagery: thirst, tears, waterfalls, waves, and breakers.", items: ["Thirst pictures longing for the living God.", "Tears as food picture sustained sorrow.", "Waves picture being overwhelmed, not gently refreshed."] },
          { title: "Contrasts", body: "The poem contrasts past worship with present distance, public praise with hostile taunts, and inner turmoil with renewed hope.", items: ["Past: procession and praise.", "Present: tears and mockery.", "Future: yet I shall praise Him."] },
          { title: "Observation Questions", body: "Use these questions to slow the reading.", items: ["What does the psalmist remember?", "What does he ask God?", "What does he say to his own soul?", "Where does the poem refuse easy answers?"] }
        ]
      },
      {
        title: "Phase 3: Interpretation",
        summary: "Interpret the psalm as poetry and lament: structure, imagery, emotional honesty, context, theology, and cross references work together.",
        groups: [
          { title: "Genre Analysis", body: "As lament, the psalm gives faithful language for pain. It is not failed praise; it is praise fighting through absence.", items: ["Do not read lament as unbelief.", "Do not read images woodenly.", "Follow the emotional progression."] },
          { title: "Contextual Circles", body: "The immediate context is the psalm's own refrain and images. The broader Psalter gives many examples of complaint moving toward trust.", items: ["Psalm 42 and Psalm 43 share the same refrain.", "The Psalter normalizes both lament and praise.", "The canonical context teaches worshipers to bring all emotions before God."] },
          { title: "Language and Imagery", body: "The phrase \"living God\" matters: the psalmist longs not for an idea but for personal communion with the active God.", items: ["\"Thirst\" communicates spiritual need.", "\"Downcast\" communicates inner collapse.", "\"Hope\" is active trust, not vague optimism."] },
          { title: "Cross References", body: "Compare other laments and thirst texts after doing the initial work.", items: ["Psalm 63 also uses thirst imagery.", "Psalm 13 shows lament moving toward trust.", "John 7 deepens the Bible's living-water theme in Christ and the Spirit."] },
          { title: "Theological Synthesis", body: "The poem teaches that God's people can experience real spiritual anguish while still addressing God as their hope.", items: ["God is present even when He feels absent.", "Memory can become a means of faith.", "Hope is practiced in the middle of unresolved sorrow."] },
          { title: "Resource Check", body: "After your own observations, consult trusted resources to confirm the lament structure, Psalm 42-43 connection, and poetic imagery.", items: ["Check historical notes cautiously because the exact occasion is uncertain.", "Look for commentary on refrain and structure.", "Do not let a resource erase the poem's emotional complexity."] }
        ]
      },
      {
        title: "Phase 4: Imagination",
        summary: "Enter the poem's emotional world so the imagery is felt, not merely defined.",
        groups: [
          { title: "Sensory Reconstruction", body: "Imagine bodily thirst, a dry throat, tear-filled nights, and the roar of overwhelming water.", items: ["Feel the contrast between thirst and flood.", "Hear the taunt: Where is your God?", "Picture remembered worship as both comfort and ache."] },
          { title: "Emotional Identification", body: "Stand with the psalmist as someone who knows what is true but does not yet feel whole.", items: ["He does not deny pain.", "He does not surrender to pain.", "He speaks hope to his soul."] },
          { title: "Spiritual Imagination", body: "Imagine using the refrain as a practiced discipline in prayer.", items: ["Why are you cast down?", "Hope in God.", "I shall again praise Him."] }
        ]
      },
      {
        title: "Phase 5: Application",
        summary: "Apply Psalm 42 as a pattern for faithful lament, not as a quick emotional fix.",
        groups: [
          { title: "Principle", body: "God invites His people to bring spiritual thirst and turmoil into honest prayer while actively calling the soul back to hope.", items: ["Lament is faithful speech.", "Memory strengthens hope.", "Hope can be chosen before relief is felt."] },
          { title: "Concrete Practice", body: "When spiritually dry, pray the shape of the psalm: name longing, remember God's faithfulness, ask honest questions, and speak hope.", items: ["Journal the repeated refrain in your own words.", "Recall past worship without living in nostalgia.", "Ask for restored praise, not merely restored comfort."] }
        ],
        spacepets: [
          { key: "S", label: "Sin to confess", text: "Confess any refusal to bring real pain to God, or any habit of letting emotions become the final authority." },
          { key: "P", label: "Promise to claim", text: "God remains the living God even when the soul feels dry." },
          { key: "A", label: "Attitude to change", text: "Move from shame about sorrow to honest, hopeful dependence." },
          { key: "C", label: "Command to obey", text: "Hope in God; speak truth to your soul." },
          { key: "E", label: "Example to follow", text: "Follow the psalmist's honest prayer and disciplined remembrance." },
          { key: "P", label: "Prayer to pray", text: "Ask God to restore praise and sustain hope while sorrow remains." },
          { key: "E", label: "Error to avoid", text: "Avoid treating lament as spiritual failure." },
          { key: "T", label: "Truth to believe", text: "God receives faithful lament." },
          { key: "S", label: "Something to thank God for", text: "Thank God for giving His people words for pain." }
        ],
        applicationLevels: [
          { title: "Personal", text: "Practice honest prayer during discouragement instead of pretending." },
          { title: "Family", text: "Make home a place where grief can be spoken faithfully." },
          { title: "Church", text: "Include lament in worship, testimony, pastoral care, and prayer." },
          { title: "Nation", text: "Let public grief over suffering become prayerful pursuit of mercy and justice." },
          { title: "World", text: "Pray for communities whose worship has been disrupted by exile, war, persecution, or disaster." },
          { title: "Great Controversy", text: "Hope in God testifies that darkness does not have the final word over the soul." }
        ]
      }
    ],
    extraMistakes: [
      "Using the refrain as a slogan while ignoring the lament around it.",
      "Treating the psalm as private therapy with no connection to worshiping community.",
      "Assuming the psalmist's questions mean he has lost faith."
    ]
  },
  "1 Samuel 17": {
    orientation: [
      { title: "Genre Identification", text: "1 Samuel 17 is historical narrative. It communicates theology through plot, dialogue, characterization, contrast, and the narrator's arrangement of events." },
      { title: "Narrative Setting", text: "Israel faces Philistine intimidation while Saul's kingship is spiritually hollow. David has already been anointed, but he is still outwardly insignificant." },
      { title: "Movement of the Passage", text: "The story moves from fear and paralysis to David's theological clarity, public confrontation, and the Lord's deliverance through His chosen servant." },
      { title: "Interpretive Aim", text: "The goal is not merely to say, \"Face your giants.\" The goal is to see God's honor, God's anointed deliverer, and covenant courage." }
    ],
    posture: [
      "Pray for freedom from shallow moralizing, because this story is often reduced to motivational advice.",
      "Seek the narrator's intent: watch what the story emphasizes through repetition, dialogue, and contrast.",
      "Let David point beyond himself without erasing the historical event."
    ],
    phases: [
      {
        title: "Phase 1: Preparation",
        summary: "Name the reflex to make yourself David and every problem Goliath. That reading can miss the God-centered and king-centered purpose of the story.",
        groups: [
          { title: "Likely Reflexes", body: "Readers often turn the text into a formula for personal victory.", items: ["Your giant might be debt, fear, exams, or career pressure.", "That application may contain a small truth but is not the main meaning.", "The passage is first about God's name and God's deliverance."] },
          { title: "Cultural Baggage", body: "Modern underdog stories train us to admire human courage and self-belief.", items: ["David's confidence is not self-confidence.", "He reasons from God's covenant faithfulness.", "The focus is not technique but trust in the living God."] },
          { title: "Submission to the Text", body: "Let the story's speeches interpret the action.", items: ["Goliath defies God.", "David says the battle belongs to the Lord.", "The outcome teaches all the earth that there is a God in Israel."] }
        ]
      },
      {
        title: "Phase 2: Observation",
        summary: "Read the narrative slowly: setting, conflict, repetition, dialogue, characters, and turning points carry the meaning.",
        groups: [
          { title: "Characters and Contrasts", body: "The narrator contrasts Saul, Israel, Goliath, Eliab, and David.", items: ["Saul is tall and armed but afraid.", "Goliath is powerful but blasphemous.", "David is young but theologically clear."] },
          { title: "Repeated Emphasis", body: "Goliath's challenge and Israel's fear are repeated, building tension.", items: ["The army hears and fears.", "David hears and interprets differently.", "The same event exposes different hearts."] },
          { title: "Dialogue as Interpretation", body: "David's words explain the meaning of the battle before the stone is thrown.", items: ["Who is this uncircumcised Philistine?", "The Lord delivered me before.", "The battle is the Lord's."] },
          { title: "Observation Questions", body: "Use narrative questions instead of rushing to doctrine.", items: ["What problem does David see that others miss?", "How does Saul misunderstand strength?", "What does the narrator want us to admire?"] }
        ]
      },
      {
        title: "Phase 3: Interpretation",
        summary: "Interpret the story as theological history within 1 Samuel's larger concern about kingship, faith, and God's chosen deliverer.",
        groups: [
          { title: "Genre Analysis", body: "Historical narrative teaches by showing. The narrator rarely pauses to state every lesson directly.", items: ["Watch plot movement.", "Watch characterization.", "Watch repeated speeches."] },
          { title: "Historical Background", body: "The Philistine threat is military, political, and theological. Goliath's taunts shame Israel and defy Israel's God.", items: ["Ancient warfare often used champions.", "Armor and size symbolize visible strength.", "David's shepherd background becomes preparation, not accident."] },
          { title: "Contextual Circles", body: "The story sits after David's anointing and in contrast to Saul's failure.", items: ["Immediate: Israel's fear in the valley.", "Book context: Saul is rejected; David is rising.", "Canonical: God's king delivers God's people."] },
          { title: "Language and Details", body: "Terms like \"living God\" and \"battle is the Lord's\" are theological keys.", items: ["David sees covenant identity where others see military odds.", "Goliath's size matters, but his defiance matters more.", "The stone is not magic; deliverance is from the Lord."] },
          { title: "Cross References", body: "After observing, connect David to the larger Davidic promise and Christological pattern.", items: ["1 Samuel 16 introduces David as the anointed one.", "2 Samuel 7 develops the Davidic covenant.", "The New Testament presents Jesus as the Son of David who defeats enemies for His people."] },
          { title: "Theological Synthesis", body: "God saves fearful people through His chosen representative, not through impressive human power.", items: ["Faith sees reality in relation to God.", "God's honor is central.", "The anointed servant wins for the many."] },
          { title: "Resource Check", body: "Consult resources after tracing narrative flow yourself.", items: ["Check the Saul-David contrast.", "Check ancient battle customs carefully.", "Avoid resources that flatten the story into motivational speech."] }
        ]
      },
      {
        title: "Phase 4: Imagination",
        summary: "Enter the scene: fear in the valley, armor clanking, taunts echoing, and a young shepherd interpreting everything through God's covenant.",
        groups: [
          { title: "Sensory Reconstruction", body: "Imagine the standoff, the silence of Israel's army, and Goliath's daily taunts.", items: ["Hear the challenge.", "Feel the public shame.", "See the contrast between armor and sling."] },
          { title: "Character Identification", body: "Stand briefly with each character to feel the moral contrast.", items: ["Saul calculates visibly.", "Eliab misreads David.", "David sees God's reputation at stake."] },
          { title: "Theological Imagination", body: "Imagine how the event would reshape Israel's memory.", items: ["Fearful people learn God's deliverance.", "The anointed servant becomes visible.", "God's name is vindicated before enemies."] }
        ]
      },
      {
        title: "Phase 5: Application",
        summary: "Apply the theological principle: God calls His people to courage rooted in His covenant faithfulness and centered on His honor.",
        groups: [
          { title: "Principle", body: "The passage calls believers to trust God's power and honor when visible odds produce fear.", items: ["Do not copy David's exact role.", "Do learn David's God-centered perception.", "Do see Christ as the greater representative deliverer."] },
          { title: "Concrete Practice", body: "When a threat dominates your imagination, ask what God has revealed about Himself.", items: ["Name the fear honestly.", "Ask what is at stake for faithfulness.", "Act from trust, not bravado."] }
        ],
        spacepets: [
          { key: "S", label: "Sin to confess", text: "Confess fear that measures reality without reference to God." },
          { key: "P", label: "Promise to claim", text: "The Lord is able to deliver and defend His name." },
          { key: "A", label: "Attitude to change", text: "Move from self-protection to God-centered courage." },
          { key: "C", label: "Command to obey", text: "Stand faithfully where God's honor and neighbor protection require it." },
          { key: "E", label: "Example to follow", text: "Follow David's covenant memory and zeal for God's name." },
          { key: "P", label: "Prayer to pray", text: "Ask for courage that trusts God's power rather than visible strength." },
          { key: "E", label: "Error to avoid", text: "Avoid making yourself the savior of the story." },
          { key: "T", label: "Truth to believe", text: "The battle belongs to the Lord." },
          { key: "S", label: "Something to thank God for", text: "Thank God for the greater Son of David, Christ our deliverer." }
        ],
        applicationLevels: [
          { title: "Personal", text: "Face fear by rehearsing God's faithfulness, not by inflating self-confidence." },
          { title: "Family", text: "Teach children that courage grows from knowing God, not from pretending danger is small." },
          { title: "Church", text: "Resist institutional fear when obedience looks costly." },
          { title: "Nation", text: "Value leaders who protect the vulnerable with humility rather than image-driven bravado." },
          { title: "World", text: "Pray for believers facing public intimidation and violent opposition." },
          { title: "Great Controversy", text: "The story previews God's pattern of defeating proud powers through His chosen servant." }
        ]
      }
    ],
    extraMistakes: [
      "Treating David as a model of self-esteem instead of covenant faith.",
      "Ignoring how the passage develops Saul's failure and David's rise.",
      "Forgetting that David acts representatively for fearful Israel."
    ]
  },
  "Luke 24:13-49": {
    orientation: [
      { title: "Genre Identification", text: "Luke 24:13-49 is Gospel narrative. It is theological biography that reveals the risen Jesus, interprets Scripture, and prepares the reader for the mission of Acts." },
      { title: "Canonical Location", text: "The passage closes Luke and points directly toward Acts. Jesus' followers move from Jerusalem confusion to worldwide witness, but only after receiving promised power." },
      { title: "Movement of the Passage", text: "The narrative moves from hidden recognition on the road, to opened Scripture at the table, to gathered witness in Jerusalem, to commission and promise." },
      { title: "Interpretive Aim", text: "The goal is to see how resurrection, Scripture fulfillment, repentance, forgiveness, nations, and the Spirit belong together." }
    ],
    posture: [
      "Pray for humility because familiar resurrection stories can become sentimental if detached from Jesus' interpretation of Scripture.",
      "Seek Luke's intent across Luke-Acts: the risen Jesus forms witnesses whose message goes to the nations.",
      "Let the passage correct both despairing disappointment and self-reliant mission."
    ],
    phases: [
      {
        title: "Phase 1: Preparation",
        summary: "Luke 24 challenges modern assumptions about proof, disappointment, Scripture, and mission.",
        groups: [
          { title: "Likely Reflexes", body: "Readers may focus only on the emotional comfort of the Emmaus story and miss the commission that follows.", items: ["Comfort is present, but it leads to witness.", "Recognition of Jesus reshapes the disciples' understanding of the whole Bible.", "The story does not end with private spiritual warmth."] },
          { title: "Cultural Baggage", body: "Modern readers often separate Bible study, personal experience, and mission into separate compartments.", items: ["Jesus joins Scripture and resurrection.", "He joins recognition and witness.", "He joins mission and dependence on divine power."] },
          { title: "Submission to the Text", body: "Let Jesus define what the resurrection means.", items: ["The Messiah had to suffer and enter glory.", "Repentance and forgiveness are proclaimed in His name.", "The witnesses wait for the promised Spirit."] }
        ]
      },
      {
        title: "Phase 2: Observation",
        summary: "Observe repeated verbs, changing perception, location shifts, and Luke's movement from road to table to gathered commission.",
        groups: [
          { title: "Perception Words", body: "The passage turns on seeing, recognizing, opening, and understanding.", items: ["Their eyes are kept from recognizing Him.", "Their hearts burn as Scripture is opened.", "Their eyes are opened at the breaking of bread.", "Their minds are opened to understand Scripture."] },
          { title: "Scripture Fulfillment", body: "Jesus interprets His suffering and glory from the whole Old Testament witness.", items: ["Moses and the Prophets are mentioned on the road.", "The Law, Prophets, and Psalms are mentioned in Jerusalem.", "Luke wants readers to see continuity, not surprise."] },
          { title: "Mission Language", body: "The ending pushes beyond recognition toward witness.", items: ["Repentance and forgiveness are proclaimed.", "The message goes to all nations.", "The disciples are witnesses.", "Power from on high is promised."] },
          { title: "Observation Questions", body: "Use narrative questions before drawing doctrine.", items: ["What changes in the disciples?", "How does Jesus interpret the cross?", "What does the risen Jesus command?", "How does this ending prepare Acts?"] }
        ]
      },
      {
        title: "Phase 3: Interpretation",
        summary: "Interpret Luke 24 as the hinge between Gospel fulfillment and Acts mission.",
        groups: [
          { title: "Genre Analysis", body: "As Gospel narrative, the passage reveals Jesus through plot, dialogue, recognition, and commission.", items: ["Do not reduce the passage to a proof text.", "Follow the sequence of the story.", "Let Jesus' speeches interpret the events."] },
          { title: "Luke-Acts Context", body: "Luke's second volume begins with the same themes: resurrection proof, witness, promise, Spirit, and mission from Jerusalem outward.", items: ["Luke ends in Jerusalem.", "Acts begins in Jerusalem.", "The promise of power connects the two volumes."] },
          { title: "Language and Details", body: "The details of opening, breaking bread, peace, touch, witness, and promise reveal both bodily resurrection and scriptural fulfillment.", items: ["Jesus is not a ghost.", "The resurrection is bodily.", "The mission is scriptural, not improvised."] },
          { title: "Cross References", body: "Read Luke 24 with Luke 1-4, Luke 9, Luke 22-23, Acts 1-2, and the wider biblical promises of nations receiving blessing.", items: ["Luke's Gospel has prepared for reversal and salvation.", "Acts shows the commission unfolding.", "The Abrahamic promise reaches the nations through Christ."] },
          { title: "Theological Synthesis", body: "The risen Christ fulfills Scripture and creates witnesses who proclaim forgiveness to the nations by the Spirit's power.", items: ["Resurrection validates Jesus' identity.", "Scripture explains Jesus' suffering and glory.", "Mission flows from fulfillment."] },
          { title: "Resource Check", body: "After observation, consult resources on Luke-Acts unity, resurrection appearances, and Old Testament fulfillment.", items: ["Do not flatten Luke into Matthew, Mark, or John.", "Do not detach Acts from Luke.", "Check claims about historical background without making them control the text."] }
        ]
      },
      {
        title: "Phase 4: Imagination",
        summary: "Enter the emotional world of disappointed disciples, a surprising companion, an opened table, and a commissioned community.",
        groups: [
          { title: "Sensory Reconstruction", body: "Imagine the long road, heavy conversation, evening hospitality, shared meal, sudden recognition, and urgent return to Jerusalem.", items: ["Feel the weight of 'we had hoped.'", "Hear Jesus patiently re-teach the story.", "Feel the shock of recognition and disappearance."] },
          { title: "Character Identification", body: "Stand with disciples whose expectations were too small for resurrection.", items: ["They knew facts but not their meaning.", "They needed Scripture opened.", "They moved from confusion to witness."] },
          { title: "Mission Imagination", body: "Imagine hearing the commission before knowing how Acts will unfold.", items: ["The message is bigger than Jerusalem.", "The witnesses are not self-sufficient.", "The Spirit's promise is essential."] }
        ]
      },
      {
        title: "Phase 5: Application",
        summary: "Apply the passage by reading Scripture through Christ, receiving resurrection hope, and bearing Spirit-dependent witness.",
        groups: [
          { title: "Principle", body: "The risen Jesus opens Scripture and sends His people to proclaim repentance and forgiveness to the nations in dependence on God's power.", items: ["Christ is the center of Scripture.", "Witness flows from recognition.", "Mission depends on promise, not self-confidence."] },
          { title: "Concrete Practice", body: "Study Scripture with Christ at the center, name places of disappointed hope, and practice witness that announces forgiveness in Jesus' name.", items: ["Write how a text points to Christ without forcing it.", "Turn discouragement into prayerful re-reading.", "Share the gospel as witness, not self-display."] }
        ],
        spacepets: [
          { key: "S", label: "Sin to confess", text: "Confess reading Scripture without expecting it to testify to Christ." },
          { key: "P", label: "Promise to claim", text: "The risen Jesus gives power for witness through the promised Spirit." },
          { key: "A", label: "Attitude to change", text: "Move from disappointed resignation to resurrection-shaped hope." },
          { key: "C", label: "Command to obey", text: "Bear witness to repentance and forgiveness in Jesus' name." },
          { key: "E", label: "Example to follow", text: "Follow the disciples' move from recognition to testimony." },
          { key: "P", label: "Prayer to pray", text: "Ask Christ to open Scripture and make your witness Spirit-dependent." },
          { key: "E", label: "Error to avoid", text: "Avoid separating Bible knowledge from mission." },
          { key: "T", label: "Truth to believe", text: "Jesus' suffering, resurrection, and mission fulfill Scripture." },
          { key: "S", label: "Something to thank God for", text: "Thank God that the risen Christ meets confused disciples and sends them with purpose." }
        ],
        applicationLevels: [
          { title: "Personal", text: "Let Christ reinterpret disappointed hopes through Scripture and resurrection." },
          { title: "Family", text: "Read Bible stories as part of the one Christ-centered story." },
          { title: "Church", text: "Keep preaching and mission tied to repentance, forgiveness, resurrection, and Spirit dependence." },
          { title: "Nation", text: "Witness publicly with humility, hope, and truth rather than coercion." },
          { title: "World", text: "Join God's mission to all nations with prayerful dependence on the Spirit." },
          { title: "Great Controversy", text: "The risen Christ defeats despair and sends witnesses into contested territory with the promise of divine power." }
        ]
      }
    ],
    extraMistakes: [
      "Stopping with personal comfort on the Emmaus road and ignoring the commission.",
      "Treating Acts as detached church history instead of Luke's continuation.",
      "Reading mission as human strategy rather than Spirit-empowered witness."
    ]
  },
  "Romans 12:1-2": {
    orientation: [
      { title: "Genre Identification", text: "Romans 12:1-2 is epistolary exhortation. It is theological, logical, pastoral, and built on the argument that came before it." },
      { title: "Letter Context", text: "Romans 1-11 unfolds sin, justification, grace, union with Christ, Israel and Gentiles, and God's mercy. Romans 12 begins the ethical response." },
      { title: "Movement of the Passage", text: "Paul moves from God's mercies to bodily offering, from nonconformity to transformation, and from renewed thinking to discerning God's will." },
      { title: "Interpretive Aim", text: "The goal is to see Christian obedience as whole-life worship grounded in mercy, not moralism or self-improvement." }
    ],
    posture: [
      "Pray for humility because familiar verses can become detached from their argument.",
      "Seek Paul's intent in the letter: he is forming a gospel-shaped community.",
      "Resist individualistic and disembodied readings of worship."
    ],
    phases: [
      {
        title: "Phase 1: Preparation",
        summary: "Romans 12:1-2 exposes assumptions about worship, bodies, and transformation.",
        groups: [
          { title: "Likely Reflexes", body: "Many readers treat the passage as a generic call to try harder or be different.", items: ["The text begins with mercy, not willpower.", "The command is plural and communal.", "Transformation is worship, not self-branding."] },
          { title: "Cultural Baggage", body: "Modern culture often separates body, mind, and spirituality.", items: ["Paul joins bodily obedience and spiritual worship.", "The mind must be renewed, not merely informed.", "Nonconformity is not contrarianism; it is kingdom-shaped discernment."] },
          { title: "Submission to the Text", body: "Let the word \"therefore\" force you backward into Romans 1-11.", items: ["Ask what mercies Paul has explained.", "Ask why mercy produces worship.", "Ask how worship becomes embodied."] }
        ]
      },
      {
        title: "Phase 2: Observation",
        summary: "Observe grammar, commands, contrasts, repeated ideas, and logical flow.",
        groups: [
          { title: "Logical Connectors", body: "\"Therefore\" and \"by the mercies of God\" establish the foundation for the appeal.", items: ["Command follows doctrine.", "Imperative follows indicative.", "Ethics follows mercy."] },
          { title: "Key Commands", body: "Paul calls believers to present their bodies and not be conformed but transformed.", items: ["Present your bodies.", "Do not be conformed.", "Be transformed.", "Discern God's will."] },
          { title: "Contrasts", body: "Two patterns of formation are contrasted.", items: ["This age presses believers into its mold.", "God renews the mind for discernment.", "The result is tested, embodied obedience."] },
          { title: "Observation Questions", body: "Use grammar to slow interpretation.", items: ["What does \"therefore\" connect to?", "What is offered to God?", "Who acts in transformation?", "What does renewal produce?"] },
          { title: "Argument Diagramming Check", body: "Before applying the passage, display the logic with propositions, brackets, arcs, or phrasing.", items: ["Line 1 grounds the whole appeal in God's mercies.", "Line 2 carries the main appeal: present your bodies.", "Lines 4 and 5 form a contrast: do not be conformed, but be transformed.", "Line 6 states the purpose or result: discern God's will."] }
        ]
      },
      {
        title: "Phase 3: Interpretation",
        summary: "Interpret the exhortation through letter context, grammar, theology, and the gospel pattern of indicatives grounding imperatives.",
        groups: [
          { title: "Genre Analysis", body: "Epistles are occasional, logical, and pastoral. Commands are embedded in arguments.", items: ["Do not isolate the verse.", "Trace the paragraph's function.", "Ask how the command serves the letter."] },
          { title: "Historical Background", body: "The Roman church included Jewish and Gentile believers learning unity under the gospel.", items: ["Bodily worship challenged both pagan sacrifice and empty religiosity.", "Community ethics matter in Romans 12-15.", "Paul is forming a merciful people."] },
          { title: "Contextual Circles", body: "Romans 12:1-2 turns doctrine into life.", items: ["Immediate: beginning of exhortation.", "Letter: response to God's righteousness and mercy.", "Canon: grace produces Spirit-shaped obedience."] },
          { title: "Language and Grammar", body: "The body is presented as a living sacrifice. Transformation is passive in form: believers are acted upon by God's renewing work.", items: ["\"Bodies\" means concrete embodied life.", "\"Living sacrifice\" reworks worship language.", "\"Renewal\" points to changed perception and desire."] },
          { title: "Cross References", body: "Compare passages where identity in Christ grounds obedience.", items: ["Ephesians 4 moves from calling to walk.", "Colossians 3 moves from resurrection identity to new conduct.", "Titus 3 grounds good works in saving mercy."] },
          { title: "Theological Synthesis", body: "Mercy does not make obedience optional; it makes obedience worship.", items: ["Grace is the root.", "Embodied worship is the fruit.", "Renewed discernment is the path."] },
          { title: "Resource Check", body: "After tracing the logic, consult commentaries on Romans' structure and sacrificial language.", items: ["Check how Romans 12 relates to Romans 1-11.", "Look for grammar notes on transformation.", "Avoid resources that turn the passage into legalism."] }
        ]
      },
      {
        title: "Phase 4: Imagination",
        summary: "Reconstruct the social and worship world behind Paul's language.",
        groups: [
          { title: "Worship World", body: "Imagine believers familiar with temple sacrifice hearing that their bodies are now offered as living worship.", items: ["Worship leaves the altar and enters daily life.", "The sacrifice is living, not dead.", "The whole person belongs to God."] },
          { title: "Rhetorical Moment", body: "Hear Romans 12 as the turn from explanation to appeal.", items: ["Paul has built a mercy-saturated argument.", "Now he pleads, not merely commands.", "Ethics becomes gratitude made visible."] },
          { title: "Social World", body: "Imagine a mixed church learning not to be formed by Rome's values, honor games, and divisions.", items: ["The church needs a renewed mind.", "The body of Christ needs humble members.", "Discernment will be practiced in community."] }
        ]
      },
      {
        title: "Phase 5: Application",
        summary: "Apply Romans 12:1-2 as mercy-grounded, embodied, communal worship.",
        groups: [
          { title: "Principle", body: "Because of God's mercy, believers offer their whole embodied lives to God and resist formation by the present age.", items: ["Obedience is response.", "Worship is whole-life.", "Discernment requires renewal."] },
          { title: "Concrete Practice", body: "Ask where your body, habits, media, spending, sexuality, and ambitions are being conformed to this age.", items: ["Name one pattern of conformity.", "Practice one habit of renewal.", "Test one decision by God's will."] }
        ],
        spacepets: [
          { key: "S", label: "Sin to confess", text: "Confess reducing worship to songs while withholding ordinary life from God." },
          { key: "P", label: "Promise to claim", text: "God's mercy is the foundation for transformed living." },
          { key: "A", label: "Attitude to change", text: "Move from self-improvement pressure to grateful surrender." },
          { key: "C", label: "Command to obey", text: "Present your body and resist conformity to this age." },
          { key: "E", label: "Example to follow", text: "Follow Paul's pattern of grounding every command in gospel mercy." },
          { key: "P", label: "Prayer to pray", text: "Ask God to renew your mind and expose patterns of conformity." },
          { key: "E", label: "Error to avoid", text: "Avoid moralism that disconnects obedience from mercy." },
          { key: "T", label: "Truth to believe", text: "The Christian life is worship shaped by grace." },
          { key: "S", label: "Something to thank God for", text: "Thank God that mercy comes before transformation." }
        ],
        applicationLevels: [
          { title: "Personal", text: "Offer your schedule, body, attention, and habits to God as worship." },
          { title: "Family", text: "Build household rhythms that renew the mind rather than copy the age." },
          { title: "Church", text: "Teach doctrine and practice together so obedience flows from mercy." },
          { title: "Nation", text: "Resist public values that treat bodies, success, and identity as self-owned." },
          { title: "World", text: "Witness to a different way of being human: surrendered, renewed, merciful." },
          { title: "Great Controversy", text: "Every surrendered life testifies that God's mercy transforms rather than coerces." }
        ]
      }
    ],
    extraMistakes: [
      "Ignoring the word \"therefore.\"",
      "Making transformation a self-help project.",
      "Treating bodily obedience as less spiritual than inner devotion."
    ]
  },
  "Deuteronomy 22:8": {
    orientation: [
      { title: "Genre Identification", text: "Deuteronomy 22:8 is Old Testament law, specifically a concrete covenant instruction that protects life through proactive responsibility." },
      { title: "Cultural Setting", text: "Ancient Israelite homes often had flat roofs used for work, rest, storage, and gatherings. A parapet was a low protective barrier." },
      { title: "Movement of the Passage", text: "The law moves from building a house to preventing bloodguilt. It links ordinary construction with moral responsibility." },
      { title: "Interpretive Aim", text: "The goal is to identify the divine value beneath the ancient form and carry that value forward through Christlike love." }
    ],
    posture: [
      "Pray for patience with laws that feel culturally distant.",
      "Seek the law's purpose before deciding relevance.",
      "Avoid both legalistic copying and dismissive irrelevance."
    ],
    phases: [
      {
        title: "Phase 1: Preparation",
        summary: "Modern readers may assume obscure laws are primitive, irrelevant, or merely ceremonial. This text challenges that reflex.",
        groups: [
          { title: "Likely Reflexes", body: "Because most readers do not use flat roofs as living space, they may skip the verse.", items: ["Do not confuse ancient form with irrelevant value.", "Ask what the law protects.", "Notice the explicit reason clause."] },
          { title: "Cultural Baggage", body: "Modern individualism can treat private property as disconnected from neighbor responsibility.", items: ["The homeowner is accountable for others' safety.", "Love includes prevention.", "Negligence has moral weight."] },
          { title: "Submission to the Text", body: "Let the law teach God's concern for ordinary life.", items: ["God cares about architecture.", "God cares about guests.", "God cares about preventable harm."] }
        ]
      },
      {
        title: "Phase 2: Observation",
        summary: "Observe command, situation, purpose, implied danger, and moral logic.",
        groups: [
          { title: "Command", body: "When building a new house, the Israelite must build a parapet around the roof.", items: ["The command is proactive.", "It applies before an accident happens.", "It assumes responsibility for design."] },
          { title: "Situation", body: "Flat roofs created useful space but also risk.", items: ["People could gather on the roof.", "A fall could cause serious harm.", "The builder can reduce the danger."] },
          { title: "Purpose Clause", body: "The stated reason concerns bloodguilt if someone falls.", items: ["The law links negligence and guilt.", "The neighbor's life matters.", "Safety is a covenant concern."] },
          { title: "Observation Questions", body: "Ask simple legal-context questions.", items: ["What action is commanded?", "Who is protected?", "What harm is prevented?", "What value does the law reveal?"] }
        ]
      },
      {
        title: "Phase 3: Interpretation",
        summary: "Interpret the law through covenant context, law form, cultural background, moral value, and New Testament fulfillment.",
        groups: [
          { title: "Genre Analysis", body: "This is not a universal building code in ancient form; it is a covenant law revealing God's value for life and neighbor protection.", items: ["Do not copy form mechanically.", "Do not discard the moral value.", "Principlize from the stated reason."] },
          { title: "Historical Background", body: "Flat roofs were common usable spaces in the ancient Near East.", items: ["The risk was ordinary and foreseeable.", "The remedy was simple and practical.", "The law teaches prevention, not only punishment."] },
          { title: "Contextual Circles", body: "Deuteronomy applies covenant faithfulness to everyday life.", items: ["Immediate context includes neighbor-related responsibilities.", "Book context calls Israel to covenant obedience in the land.", "Canonical context grounds neighbor-love in God's character."] },
          { title: "Language and Legal Logic", body: "The phrase about bloodguilt shows that negligence can make one morally accountable.", items: ["The law is not merely advice.", "Responsibility attaches to foreseeable harm.", "Love acts before injury."] },
          { title: "Cross References", body: "Read with other texts about love of neighbor, image of God, and protecting life.", items: ["Genesis 1 gives human dignity.", "Leviticus 19 commands love of neighbor.", "Jesus deepens neighbor-love in His teaching."] },
          { title: "Theological Synthesis", body: "God's holiness reaches ordinary construction, property, and public safety.", items: ["Love is practical.", "Justice can be preventative.", "Holiness includes responsibility for others."] },
          { title: "Resource Check", body: "After identifying the principle, consult resources on ancient houses and Deuteronomic law.", items: ["Confirm roof usage.", "Check civil-law context.", "Avoid interpretations that detach law from love."] }
        ]
      },
      {
        title: "Phase 4: Imagination",
        summary: "Reconstruct the legal and household world behind the command.",
        groups: [
          { title: "Household Scene", body: "Imagine a family using the roof for work, rest, conversation, or guests.", items: ["Children may play there.", "Visitors may not know the danger.", "A low wall changes the safety of the space."] },
          { title: "Moral Imagination", body: "Feel the difference between saying, \"It is my house,\" and asking, \"Who could be harmed by my negligence?\"", items: ["The law trains foresight.", "The neighbor's body matters.", "Prevention is love made visible."] },
          { title: "Modern Translation", body: "Imagine analogous spaces: stairs, balconies, pools, electrical systems, church nurseries, parking lots.", items: ["Where is harm foreseeable?", "Who is vulnerable?", "What simple action would protect life?"] }
        ]
      },
      {
        title: "Phase 5: Application",
        summary: "Apply the law by preserving its value: proactive neighbor-love that prevents foreseeable harm.",
        groups: [
          { title: "Principle", body: "God's people must take practical responsibility for safety when their choices create risk for others.", items: ["Love protects.", "Negligence matters.", "Ordinary spaces are morally significant."] },
          { title: "Concrete Practice", body: "Translate parapets into modern safeguards.", items: ["Install railings and pool fences.", "Fix hazards at home, church, and workplace.", "Do not postpone repairs that protect vulnerable people."] }
        ],
        spacepets: [
          { key: "S", label: "Sin to confess", text: "Confess negligence, indifference, or cost-saving that endangers others." },
          { key: "P", label: "Promise to claim", text: "God's commands reveal a wise and life-protecting character." },
          { key: "A", label: "Attitude to change", text: "Move from \"my property\" to \"my responsibility before God.\" " },
          { key: "C", label: "Command to obey", text: "Take proactive steps to protect others from preventable harm." },
          { key: "E", label: "Example to follow", text: "Follow the law's pattern of prevention before damage." },
          { key: "P", label: "Prayer to pray", text: "Ask God to make you attentive to hazards others may face." },
          { key: "E", label: "Error to avoid", text: "Avoid dismissing the law because its ancient form differs from yours." },
          { key: "T", label: "Truth to believe", text: "Neighbor-love includes practical responsibility." },
          { key: "S", label: "Something to thank God for", text: "Thank God that His law protects ordinary human life." }
        ],
        applicationLevels: [
          { title: "Personal", text: "Inspect your home, car, habits, and digital life for preventable harm." },
          { title: "Family", text: "Teach children that safety rules can be expressions of love." },
          { title: "Church", text: "Create safe spaces for children, elderly members, guests, and volunteers." },
          { title: "Nation", text: "Support just public standards that protect life without exploiting the vulnerable." },
          { title: "World", text: "Care about unsafe labor, housing, and infrastructure conditions globally." },
          { title: "Great Controversy", text: "Proactive love reflects God's life-protecting character against destructive negligence." }
        ]
      }
    ],
    extraMistakes: [
      "Treating the law as random trivia.",
      "Keeping the ancient form while missing neighbor-love.",
      "Using grace as an excuse for carelessness."
    ]
  },
  "Luke 10:25-37": {
    orientation: [
      { title: "Genre Identification", text: "Luke 10:25-37 is a parable embedded in a dialogue. The story uses everyday imagery and a shocking reversal to demand response." },
      { title: "Occasion", text: "A lawyer tests Jesus and asks who qualifies as neighbor. Jesus answers by telling a story that exposes the lawyer's desire to limit love." },
      { title: "Movement of the Passage", text: "The passage moves from legal question to story, from expected helpers to unexpected mercy, and from definition to command: go and do likewise." },
      { title: "Interpretive Aim", text: "The goal is to hear the parable as Jesus' challenge to selective compassion, not merely as a pleasant story about kindness." }
    ],
    posture: [
      "Pray for openness because parables often expose the reader.",
      "Seek Jesus' intent in the conversation, especially the lawyer's self-justifying question.",
      "Resist over-allegorizing details while still feeling the story's shock."
    ],
    phases: [
      {
        title: "Phase 1: Preparation",
        summary: "The Good Samaritan is familiar, and familiarity can soften its offense.",
        groups: [
          { title: "Likely Reflexes", body: "Readers often turn the parable into a generic call to be nice.", items: ["Jesus is answering a self-justifying question.", "The Samaritan is socially shocking.", "Mercy is costly and boundary-crossing."] },
          { title: "Cultural Baggage", body: "Modern readers may miss Jewish-Samaritan hostility or reduce neighbor-love to private charity.", items: ["The outsider is the model.", "The religious insiders fail.", "The wounded man's need overrides social boundary."] },
          { title: "Submission to the Text", body: "Let Jesus change the question.", items: ["The lawyer asks who counts as neighbor.", "Jesus asks who became neighbor.", "The command is active: go and do likewise."] }
        ]
      },
      {
        title: "Phase 2: Observation",
        summary: "Observe setting, dialogue, characters, reversal, repeated actions, and final command.",
        groups: [
          { title: "Dialogue Frame", body: "The parable is not free-floating. It answers a conversation about law, life, love, and self-justification.", items: ["The lawyer tests Jesus.", "Jesus points him to the law.", "The lawyer seeks to justify himself."] },
          { title: "Characters", body: "The story uses four main figures: wounded man, priest, Levite, Samaritan.", items: ["The wounded man is helpless.", "The priest and Levite see and pass by.", "The Samaritan sees, has compassion, and acts."] },
          { title: "Actions", body: "The verbs of mercy pile up around the Samaritan.", items: ["He comes near.", "He binds wounds.", "He transports and pays.", "He promises continued care."] },
          { title: "Observation Questions", body: "Let the story interrogate the reader.", items: ["Who is expected to help?", "Who actually helps?", "What does mercy cost?", "How does Jesus answer the original question?"] }
        ]
      },
      {
        title: "Phase 3: Interpretation",
        summary: "Interpret the parable through occasion, central truth, cultural shock, and Jesus' kingdom ethic.",
        groups: [
          { title: "Genre Analysis", body: "A parable presses a central truth through story. Do not decode every object as a hidden symbol.", items: ["The road is setting, not necessarily an allegory.", "The oil, wine, and inn show costly care.", "The main point is mercy that crosses boundaries."] },
          { title: "Historical Background", body: "Jewish-Samaritan hostility makes the Samaritan's role shocking.", items: ["The outsider becomes the example.", "Religious office does not guarantee obedience.", "Compassion overturns social contempt."] },
          { title: "Contextual Circles", body: "In Luke, Jesus repeatedly highlights mercy, reversal, outsiders, and true hearing.", items: ["Immediate: lawyer's question.", "Gospel context: Jesus welcomes the marginalized.", "Canonical context: love of God and neighbor fulfills the law."] },
          { title: "Language and Story Logic", body: "Jesus' final question changes neighbor from category to action.", items: ["Neighbor is not merely identified; neighbor is practiced.", "Mercy is the decisive evidence.", "The command requires imitation."] },
          { title: "Cross References", body: "Connect to love commandments and Jesus' broader mercy ethic.", items: ["Leviticus 19 commands love of neighbor.", "Micah 6:8 joins justice, mercy, humility.", "Jesus embodies mercy toward enemies and outsiders."] },
          { title: "Theological Synthesis", body: "Love for God is inseparable from costly mercy toward the person in need.", items: ["The law aims at love.", "Mercy reveals true obedience.", "Grace dismantles boundary-based excuses."] },
          { title: "Resource Check", body: "After your own reading, consult resources on Samaritans, road danger, and parable function.", items: ["Use background to sharpen the shock.", "Do not let background distract from the command.", "Avoid allegorical overreach."] }
        ]
      },
      {
        title: "Phase 4: Imagination",
        summary: "Enter the road, the danger, the avoidance, and the costly interruption.",
        groups: [
          { title: "Scene Reconstruction", body: "Imagine the dangerous road, the wounded body, and the social risk of stopping.", items: ["Dust, blood, exposure, urgency.", "Religious travelers calculating distance.", "A despised outsider choosing compassion."] },
          { title: "Emotional Identification", body: "Stand in the place of each character.", items: ["The wounded man needs mercy from anyone.", "The priest and Levite preserve themselves.", "The Samaritan lets compassion become action."] },
          { title: "Contemporary Reversal", body: "Imagine Jesus choosing the person your community is tempted to despise as the model of obedience.", items: ["The parable should unsettle social pride.", "It should expose selective compassion.", "It should move the hearer toward concrete mercy."] }
        ]
      },
      {
        title: "Phase 5: Application",
        summary: "Apply the parable by becoming a neighbor through costly mercy across boundaries.",
        groups: [
          { title: "Principle", body: "The neighbor is the one to whom I show mercy, especially when love crosses social, ethnic, religious, or personal boundaries.", items: ["Do not ask how little love is required.", "Ask where mercy is needed.", "Act at cost."] },
          { title: "Concrete Practice", body: "Identify one avoided person or group and one practical act of mercy.", items: ["Move toward need.", "Give time, money, attention, or advocacy.", "Refuse to let religious busyness excuse lovelessness."] }
        ],
        spacepets: [
          { key: "S", label: "Sin to confess", text: "Confess selective compassion and self-justifying questions." },
          { key: "P", label: "Promise to claim", text: "God's mercy reshapes those who receive it." },
          { key: "A", label: "Attitude to change", text: "Move from boundary-making to mercy-seeking." },
          { key: "C", label: "Command to obey", text: "Go and do likewise." },
          { key: "E", label: "Example to follow", text: "Follow the Samaritan's costly compassion." },
          { key: "P", label: "Prayer to pray", text: "Ask God to show you whom you are passing by." },
          { key: "E", label: "Error to avoid", text: "Avoid turning the parable into vague niceness." },
          { key: "T", label: "Truth to believe", text: "Love of God is verified in mercy toward neighbor." },
          { key: "S", label: "Something to thank God for", text: "Thank God for Christ's mercy toward enemies and outsiders." }
        ],
        applicationLevels: [
          { title: "Personal", text: "Interrupt convenience to help someone in concrete need." },
          { title: "Family", text: "Teach mercy by practicing hospitality and service together." },
          { title: "Church", text: "Organize ministry around wounded neighbors, not only comfortable insiders." },
          { title: "Nation", text: "Let public policy concerns be shaped by mercy for vulnerable neighbors." },
          { title: "World", text: "Recognize suffering across ethnic, national, and religious boundaries." },
          { title: "Great Controversy", text: "Boundary-crossing mercy displays God's character against Satan's logic of contempt." }
        ]
      }
    ],
    extraMistakes: [
      "Making the parable only about random acts of kindness.",
      "Ignoring the lawyer's desire to justify himself.",
      "Removing the scandal of a Samaritan as the model neighbor."
    ]
  },
  "Daniel 7": {
    orientation: [
      { title: "Genre Identification", text: "Daniel 7 is apocalyptic prophecy. It uses symbolic beasts, heavenly court imagery, angelic interpretation, and a panoramic sequence of kingdoms." },
      { title: "Prophetic Framework", text: "Within this guide, Daniel 7 is read historically and apocalyptically: it repeats and enlarges Daniel 2's kingdom sequence and moves toward judgment and God's final kingdom." },
      { title: "Movement of the Passage", text: "The vision moves from chaotic sea and beastly powers to arrogant opposition, heavenly judgment, the Son of Man, and the saints receiving the kingdom." },
      { title: "Interpretive Aim", text: "The goal is not speculation but confidence: beastly powers are temporary, heaven judges, and Christ's kingdom endures." }
    ],
    posture: [
      "Pray for sobriety and humility because apocalyptic texts are easily hijacked by fear or headline speculation.",
      "Let Scripture decode symbols before importing external systems.",
      "Keep Christ, judgment, sanctuary themes, and the Great Controversy at the center."
    ],
    phases: [
      {
        title: "Phase 1: Preparation",
        summary: "Daniel 7 confronts sensationalism, fear, and overly confident prophetic systems.",
        groups: [
          { title: "Likely Reflexes", body: "Readers may start with current events instead of the text.", items: ["Do not begin with newspapers.", "Do not flatten symbols into guesses.", "Do not use prophecy to create fear."] },
          { title: "Theological Baggage", body: "Different prophetic schools read Daniel differently. This guide uses the historicist approach.", items: ["Continuous historical sequence matters.", "Recapitulation matters.", "The heavenly judgment scene matters."] },
          { title: "Submission to the Text", body: "Let Daniel's own explanations govern interpretation.", items: ["Beasts are kings or kingdoms.", "The little horn opposes God and the saints.", "The court sits and judgment is given."] }
        ]
      },
      {
        title: "Phase 2: Observation",
        summary: "Map the symbols, sequence, contrasts, heavenly scenes, and interpretation given in the chapter.",
        groups: [
          { title: "Symbol Sequence", body: "Four beasts arise from the sea, followed by attention to horns and the little horn.", items: ["Lion-like beast.", "Bear-like beast.", "Leopard-like beast.", "Terrifying fourth beast with horns."] },
          { title: "Major Contrast", body: "Earthly powers are beastly and chaotic; the heavenly court is ordered and sovereign.", items: ["Sea below versus court above.", "Beasts devour; the Ancient of Days judges.", "Human arrogance meets divine authority."] },
          { title: "Turning Points", body: "The little horn's arrogance is answered by the sitting of the heavenly court.", items: ["Oppression is real.", "Judgment intervenes.", "The kingdom is transferred to the Son of Man and saints."] },
          { title: "Observation Questions", body: "Do not interpret until you have mapped the vision.", items: ["What symbols are interpreted in the chapter?", "What is the order of events?", "Where does the scene move from earth to heaven?", "What is the final outcome?"] }
        ]
      },
      {
        title: "Phase 3: Interpretation",
        summary: "Use apocalyptic rules: symbolic interpretation, historicist sequence, day-year caution, recapitulation, and Christ-centered theology.",
        groups: [
          { title: "Genre Analysis", body: "Apocalyptic prophecy uses symbolic visions that reveal the sweep of history and the conflict behind it.", items: ["Expect symbols.", "Expect angelic interpretation.", "Expect heavenly perspective."] },
          { title: "Historical Background", body: "Daniel's visions address God's people under foreign empire and reveal that empire is not ultimate.", items: ["Exile shapes the question of sovereignty.", "World powers appear impressive but beastly.", "God rules beyond imperial visibility."] },
          { title: "Contextual Circles", body: "Daniel 7 repeats and enlarges Daniel 2.", items: ["Daniel 2 gives metal kingdoms.", "Daniel 7 gives beast kingdoms and judgment.", "Daniel 8 continues sanctuary and judgment concerns."] },
          { title: "Symbol and Language Work", body: "The chapter itself identifies beasts as kingdoms. Horns represent powers. The Son of Man receives dominion.", items: ["Let Daniel 7 define its own symbols first.", "Use Revelation carefully as canonical expansion.", "Avoid arbitrary symbol meanings."] },
          { title: "Historicist Reading", body: "Read the vision as a continuous historical sequence from Daniel's era toward God's final kingdom.", items: ["Follow the order of kingdoms.", "Recognize repeat-and-enlarge structure.", "Keep the judgment scene as a central event, not a footnote."] },
          { title: "Cross References", body: "Connect Daniel 7 with Daniel 2, Daniel 8, Revelation 13, Revelation 14, and the Son of Man language in the Gospels.", items: ["Daniel 2 anchors sequence.", "Revelation reuses beast imagery.", "Jesus applies Son of Man language to Himself."] },
          { title: "Theological Synthesis", body: "God judges beastly power and gives the kingdom to the Son of Man and the saints.", items: ["History is morally accountable.", "Persecution is not final.", "Christ's dominion is everlasting."] },
          { title: "Resource Check", body: "After inductive work, consult Adventist and historicist resources, then compare responsibly with other views.", items: ["Confirm symbol definitions.", "Check historical sequence arguments.", "Reject interpretations driven by fear rather than text."] }
        ]
      },
      {
        title: "Phase 4: Imagination",
        summary: "Reconstruct the symbolic world: chaos below, violent powers, arrogant speech, and a calm heavenly courtroom.",
        groups: [
          { title: "Symbolic Scene", body: "Imagine the emotional effect of beasts rising from a stormy sea.", items: ["Power feels monstrous.", "History feels unstable.", "The saints appear vulnerable."] },
          { title: "Heavenly Court", body: "Then imagine the scene shifting upward to thrones, books, and divine judgment.", items: ["Heaven is not frantic.", "God is not threatened.", "Judgment answers arrogance."] },
          { title: "Hope Formation", body: "Let the final kingdom reshape how you see present powers.", items: ["Empires pass.", "Christ reigns.", "The saints endure because the kingdom is sure."] }
        ]
      },
      {
        title: "Phase 5: Application",
        summary: "Apply Daniel 7 as faithful endurance, prophetic sobriety, and confidence in Christ's final kingdom.",
        groups: [
          { title: "Principle", body: "Beastly powers oppose God, but heaven judges and Christ receives the everlasting kingdom.", items: ["Do not fear arrogant power.", "Do not worship political power.", "Do not use prophecy as entertainment."] },
          { title: "Concrete Practice", body: "Let prophecy produce endurance, worship, mission, and moral clarity.", items: ["Pray for persecuted saints.", "Resist compromise with beastly values.", "Proclaim Christ's kingdom with hope."] }
        ],
        spacepets: [
          { key: "S", label: "Sin to confess", text: "Confess fear, sensationalism, or trust in earthly power." },
          { key: "P", label: "Promise to claim", text: "The Son of Man receives an everlasting kingdom." },
          { key: "A", label: "Attitude to change", text: "Move from anxiety to sober confidence." },
          { key: "C", label: "Command to obey", text: "Remain faithful under pressure and worship God alone." },
          { key: "E", label: "Example to follow", text: "Follow Daniel's faithful witness under empire." },
          { key: "P", label: "Prayer to pray", text: "Ask for endurance, discernment, and Christ-centered prophetic understanding." },
          { key: "E", label: "Error to avoid", text: "Avoid headline-driven interpretation." },
          { key: "T", label: "Truth to believe", text: "Heaven rules over history." },
          { key: "S", label: "Something to thank God for", text: "Thank God that judgment vindicates His people and His character." }
        ],
        applicationLevels: [
          { title: "Personal", text: "Refuse fear-based spirituality; cultivate steady hope in Christ's reign." },
          { title: "Family", text: "Teach prophecy as confidence in God, not panic about the future." },
          { title: "Church", text: "Preach Daniel with Christ, judgment, mission, and endurance at the center." },
          { title: "Nation", text: "Evaluate political power morally; no nation is ultimate." },
          { title: "World", text: "Stand with believers suffering under oppressive powers." },
          { title: "Great Controversy", text: "Daniel 7 unveils the cosmic conflict and the final triumph of God's kingdom." }
        ]
      }
    ],
    extraMistakes: [
      "Treating Daniel 7 as a puzzle detached from worship and faithfulness.",
      "Skipping the heavenly judgment scene.",
      "Reading the beasts through speculation rather than biblical symbol patterns."
    ]
  },
  "Proverbs 26:4-5": {
    orientation: [
      { title: "Genre Identification", text: "Proverbs 26:4-5 is wisdom literature. It teaches discernment through paired sayings that appear contradictory but are situationally wise." },
      { title: "Wisdom Setting", text: "Proverbs forms character under the fear of the Lord. It does not give mechanical scripts for every situation." },
      { title: "Movement of the Passage", text: "One proverb warns against answering a fool in a way that makes you foolish. The next warns against silence that lets the fool remain wise in his own eyes." },
      { title: "Interpretive Aim", text: "The goal is to learn wise discernment: when speech helps and when speech only multiplies folly." }
    ],
    posture: [
      "Pray for wisdom, because the passage itself requires discernment.",
      "Seek the intent of wisdom literature: character formation, not simplistic rule collection.",
      "Avoid using one proverb to cancel the other."
    ],
    phases: [
      {
        title: "Phase 1: Preparation",
        summary: "These paired proverbs expose the desire for simple formulas.",
        groups: [
          { title: "Likely Reflexes", body: "Readers may ask, \"Which verse is correct?\" as though wisdom cannot hold tension.", items: ["Both sayings are true.", "Different situations require different responses.", "Wisdom discerns the fitting word."] },
          { title: "Cultural Baggage", body: "Digital culture rewards instant replies, public correction, and winning arguments.", items: ["Not every foolish claim deserves engagement.", "Silence can be wise or cowardly.", "Speech can be courageous or self-indulgent."] },
          { title: "Submission to the Text", body: "Let the side-by-side placement train judgment.", items: ["Ask what danger each proverb prevents.", "Ask what love requires.", "Ask what outcome your answer may produce."] }
        ]
      },
      {
        title: "Phase 2: Observation",
        summary: "Observe the parallel structure, repeated phrase, contrast, and situational logic.",
        groups: [
          { title: "Repeated Phrase", body: "Both sayings concern answering a fool according to his folly.", items: ["The same phrase is used in opposite instructions.", "The repetition forces comparison.", "The issue is not speech alone but fitting speech."] },
          { title: "Contrasting Dangers", body: "Verse 4 warns that answering can make you like the fool. Verse 5 warns that not answering can confirm the fool's pride.", items: ["Danger 1: becoming foolish.", "Danger 2: enabling foolishness.", "Wisdom weighs both dangers."] },
          { title: "Implied Situations", body: "The text assumes different contexts.", items: ["Private argument may not deserve reply.", "Public harm may require correction.", "Tone and motive matter."] },
          { title: "Observation Questions", body: "Ask questions that expose the situation.", items: ["Who will be helped by an answer?", "Will silence mislead others?", "Will speaking make me imitate folly?", "Am I motivated by love or ego?"] }
        ]
      },
      {
        title: "Phase 3: Interpretation",
        summary: "Interpret Proverbs as wisdom for normally recurring situations under the fear of the Lord.",
        groups: [
          { title: "Genre Analysis", body: "Proverbs are compact wisdom sayings, not exhaustive laws.", items: ["They train perception.", "They require fitting application.", "They assume reverence for God."] },
          { title: "Historical Background", body: "Wisdom instruction formed young people for community life, speech, work, family, and justice.", items: ["Speech could protect or damage the community.", "Folly is moral, not merely intellectual.", "The wise person learns restraint."] },
          { title: "Contextual Circles", body: "Proverbs 26 contains several sayings about fools, laziness, and speech.", items: ["Immediate context warns about folly's social danger.", "Book context begins with fear of the Lord.", "Canonical context joins speech with heart character."] },
          { title: "Language and Parallelism", body: "The paired structure is the point. The interpreter must not harmonize away the tension.", items: ["Verse 4 emphasizes avoiding likeness to folly.", "Verse 5 emphasizes correcting foolish self-confidence.", "Together they teach discernment."] },
          { title: "Cross References", body: "Compare biblical speech wisdom after observing the pair.", items: ["James warns about the tongue.", "Jesus sometimes stays silent and sometimes rebukes directly.", "Paul calls for speech that is gracious and fitting."] },
          { title: "Theological Synthesis", body: "Godly wisdom is not automatic reaction but reverent judgment shaped by truth and love.", items: ["Truth matters.", "Humility matters.", "Timing matters.", "Motive matters."] },
          { title: "Resource Check", body: "Consult wisdom commentaries to confirm proverb form and situational application.", items: ["Avoid readings that make Proverbs mechanical.", "Look for discussion of adjacent placement.", "Compare with broader biblical theology of speech."] }
        ]
      },
      {
        title: "Phase 4: Imagination",
        summary: "Reconstruct the social and rhetorical world of foolish speech.",
        groups: [
          { title: "Conversation Scene", body: "Imagine a foolish claim in a family dispute, public meeting, classroom, or online thread.", items: ["A reply may escalate folly.", "Silence may let harm stand.", "Wisdom asks what response serves truth and love."] },
          { title: "Inner Posture", body: "Feel the pull of ego: wanting to win, shame, mock, or prove intelligence.", items: ["Wisdom restrains ego.", "Wisdom protects hearers.", "Wisdom speaks when love requires it."] },
          { title: "Community Impact", body: "Imagine who is watching and what they will learn from your response.", items: ["Will your answer dignify foolishness?", "Will silence abandon the vulnerable?", "Will your tone reflect the fear of the Lord?"] }
        ]
      },
      {
        title: "Phase 5: Application",
        summary: "Apply the paired proverbs as a discernment grid for speech.",
        groups: [
          { title: "Principle", body: "Wisdom discerns when answering folly would imitate it and when not answering would enable it.", items: ["Ask about outcome.", "Ask about audience.", "Ask about motive."] },
          { title: "Concrete Practice", body: "Before responding to foolishness, pause and choose between faithful silence and faithful correction.", items: ["If reply will only mirror folly, stay silent.", "If silence will harm others, answer clearly.", "If you answer, do so with humility and restraint."] }
        ],
        spacepets: [
          { key: "S", label: "Sin to confess", text: "Confess quarrelsomeness, cowardly silence, pride, or careless speech." },
          { key: "P", label: "Promise to claim", text: "God gives wisdom to those who fear Him and seek His ways." },
          { key: "A", label: "Attitude to change", text: "Move from reactive speech to discerning speech." },
          { key: "C", label: "Command to obey", text: "Answer or refrain according to wisdom, not impulse." },
          { key: "E", label: "Example to follow", text: "Follow Jesus' pattern of both wise silence and truthful correction." },
          { key: "P", label: "Prayer to pray", text: "Ask God for timing, tone, courage, and restraint." },
          { key: "E", label: "Error to avoid", text: "Avoid making one proverb cancel the other." },
          { key: "T", label: "Truth to believe", text: "Wise speech depends on fittingness before God." },
          { key: "S", label: "Something to thank God for", text: "Thank God for wisdom that trains more than rule-following." }
        ],
        applicationLevels: [
          { title: "Personal", text: "Pause before replying to provocation, especially online." },
          { title: "Family", text: "Teach children when to ignore foolish teasing and when to tell the truth." },
          { title: "Church", text: "Correct harmful teaching without adopting harsh or foolish methods." },
          { title: "Nation", text: "Practice public discourse that values truth over outrage." },
          { title: "World", text: "Use communication platforms responsibly across cultural and ideological divides." },
          { title: "Great Controversy", text: "Wise speech resists Satan's patterns of accusation, deception, pride, and chaos." }
        ]
      }
    ],
    extraMistakes: [
      "Demanding a single automatic rule where the text teaches discernment.",
      "Using silence to avoid costly truth.",
      "Using correction as an excuse for prideful argument."
    ]
  }
};

const caseStudyDeepDives = {
  "Psalm 42": {
    closeReading: [
      { title: "Detailed Structure Map", body: "Read the psalm as movements rather than isolated verses. The refrain functions like a chorus that gathers the grief and redirects it toward God.", items: ["Movement 1: thirst for God and remembered worship.", "Movement 2: tears, taunts, and inner collapse.", "Movement 3: waves and breakers, then prayer to the God of life.", "Refrain: the soul is questioned, corrected, and pointed toward future praise."] },
      { title: "Poetic Texture", body: "The images are not decorative. They carry the argument of the poem by making spiritual experience visible.", items: ["Thirst shows need, not casual interest.", "Tears as food show sorrow that has become daily provision.", "Deep calling to deep shows overwhelming chaos.", "The downcast soul shows the inner life as something that must be shepherded."] },
      { title: "Exegetical Decision", body: "The interpreter must decide whether the psalm is teaching immediate emotional victory or faithful hope in unresolved distress. The refrain supports the second reading.", items: ["The psalmist is not instantly fixed.", "He keeps speaking hope while pain remains.", "The final note is confidence in future praise, not denial of present grief."] },
      { title: "Genre Caution", body: "Because this is poetry, the interpreter should not demand literal precision from images or turn every image into a separate doctrine.", items: ["Images should be felt and interpreted together.", "The emotional movement matters as much as individual words.", "The refrain is the clearest guide to meaning."] }
    ],
    bridge: [
      { title: "1. Their Town", text: "For the original worshiper, Psalm 42 named the pain of being cut off from worship, mocked by enemies, and spiritually thirsty for the living God." },
      { title: "2. Width of the River", text: "Modern readers may not share the same temple setting, but they know spiritual dryness, remembered worship, public shame, and emotional turmoil." },
      { title: "3. Timeless Principle", text: "When believers are grieving, they do not have to pretend everything is fine. They can bring sorrow honestly to God, remember what He has already done, and tell their own hearts to keep hoping in Him even before the situation improves." },
      { title: "4. Biblical Map", text: "This principle fits the Psalms, the laments of the prophets, Jesus' own suffering prayers, and the New Testament call to hope." },
      { title: "5. Our Town", text: "A believer can practice Psalm 42 by praying honestly, recalling God's past faithfulness, and refusing to let despair have the final word." }
    ],
    exercises: [
      "Mark every emotional word in the psalm and group them into longing, memory, sorrow, and hope.",
      "Write the refrain in your own words without weakening its honesty.",
      "List three memories of God's faithfulness that can answer a downcast soul.",
      "Identify one place where you tend to hide pain instead of praying it.",
      "Explain why the water imagery both comforts and overwhelms.",
      "Write one contemporary lament using Psalm 42's movement: longing, complaint, remembrance, hope."
    ],
    teachingOutline: [
      "Open with the problem of spiritual thirst.",
      "Show how poetic images make inner anguish visible.",
      "Trace the refrain as the pastoral center.",
      "Apply the psalm as a discipline of honest hope."
    ]
  },
  "1 Samuel 17": {
    narrativeArc: [
      { title: "Exposition", text: "Israel and the Philistines face each other in the Valley of Elah. The armies are arranged for battle, but the real crisis is spiritual: Goliath publicly defies the armies of the living God." },
      { title: "Inciting Conflict", text: "Goliath's repeated challenge exposes Israel's fear and Saul's failure. The king who should represent Israel cannot answer the enemy's threat." },
      { title: "Rising Action", text: "David arrives from the sheepfold, hears the taunt, asks covenant-shaped questions, and is misunderstood by Eliab and underestimated by Saul." },
      { title: "Turning Point", text: "David refuses Saul's armor and interprets the battle from memory: the Lord delivered him before, and the Lord can deliver again." },
      { title: "Climax", text: "David confronts Goliath with theological clarity: the battle belongs to the Lord. The stone strikes Goliath, and the feared champion falls." },
      { title: "Resolution", text: "Israel's fear turns into pursuit. David's representative victory becomes the people's victory, revealing what kind of deliverer Israel truly needs." },
      { title: "Theological Emphasis", text: "The arc moves from fear under failed kingship to deliverance through God's anointed servant. The narrative trains readers to see God's power, God's honor, and God's chosen deliverer." }
    ],
    closeReading: [
      { title: "Detailed Plot Map", body: "The story builds tension by repeating Israel's fear before David appears as a contrasting reader of the situation.", items: ["Philistine challenge and Israelite fear.", "David arrives as an outsider to the battlefield.", "David interprets the crisis theologically.", "David defeats Goliath as representative deliverer."] },
      { title: "Character Contrast", body: "The narrator teaches through contrast. Saul has the appearance of a champion, but David has covenant perception.", items: ["Saul is armed but fearful.", "Goliath is large but defiant against God.", "Eliab judges David's motives wrongly.", "David sees God's reputation at stake."] },
      { title: "Exegetical Decision", body: "The key decision is whether to read David mainly as a moral example or as the anointed representative through whom God delivers Israel.", items: ["David is an example of faith.", "David is also more than an example.", "He fights while Israel watches.", "His victory becomes Israel's victory."] },
      { title: "Genre Caution", body: "Narrative does not teach by detachable slogans. It teaches through the shape of the whole story.", items: ["Do not isolate the sling from the speeches.", "Do not ignore the Saul-David context.", "Do not make Goliath stand for any ordinary inconvenience."] }
    ],
    bridge: [
      { title: "1. Their Town", text: "Israel faced a real military and theological crisis: an enemy champion defied the armies of the living God while Saul and the army trembled." },
      { title: "2. Width of the River", text: "Modern readers are not ancient Israel and are not the anointed Davidic king, but they face fears that test whether they interpret reality by visible power or by God's character." },
      { title: "3. Timeless Principle", text: "God's people should face intimidating opposition with courage rooted in God's covenant faithfulness, while looking to God's chosen deliverer." },
      { title: "4. Biblical Map", text: "This fits the Bible's pattern of representative deliverance, culminating in Christ, the Son of David, who wins for His fearful people." },
      { title: "5. Our Town", text: "Believers apply the story by trusting Christ, resisting fear-driven disobedience, and acting faithfully when God's honor and neighbor protection are at stake." }
    ],
    exercises: [
      "List every speech in the chapter and summarize what each speaker believes about the situation.",
      "Compare Saul's view of strength with David's view of strength.",
      "Identify what repeated details create suspense.",
      "Explain why 'the battle is the Lord's' is the interpretive center.",
      "Write a paragraph correcting the shallow phrase 'face your giants.'",
      "Name one current fear and reinterpret it in light of God's character."
    ],
    teachingOutline: [
      "Begin with Israel's fear and Goliath's defiance.",
      "Contrast Saul's visible strength with David's covenant faith.",
      "Show David as representative deliverer.",
      "Lead to Christ, the greater Son of David."
    ]
  },
  "Luke 24:13-49": {
    narrativeArc: [
      { title: "Exposition", text: "Two disciples leave Jerusalem confused and downcast after Jesus' death and reports of the empty tomb." },
      { title: "Inciting Encounter", text: "The risen Jesus draws near, but they do not recognize Him. Their words reveal disappointed hope and incomplete understanding." },
      { title: "Scripture Reorientation", text: "Jesus rebukes their slowness and explains from the Scriptures that the Messiah had to suffer and enter glory." },
      { title: "Recognition", text: "At the table, their eyes are opened in the breaking of bread, and they realize their hearts had burned while He opened the Scriptures." },
      { title: "Gathered Witness", text: "They return to Jerusalem and join the gathered disciples, where Jesus appears, gives peace, and proves His bodily resurrection." },
      { title: "Commission", text: "Jesus opens their minds, announces repentance and forgiveness for all nations, names them witnesses, and promises power from on high." },
      { title: "Theological Emphasis", text: "The arc moves from confused hope to Scripture-shaped witness: the risen Christ fulfills the Bible and sends Spirit-empowered messengers." }
    ],
    closeReading: [
      { title: "Detailed Plot Map", body: "Luke arranges the passage as a movement from misunderstanding to recognition to mission.", items: ["Road: disappointment and hidden recognition.", "Table: opened eyes and burning hearts.", "Jerusalem: bodily resurrection and opened minds.", "Commission: witness to the nations and promised power."] },
      { title: "Scripture Fulfillment", body: "Jesus does not merely prove He is alive; He teaches that His suffering and glory are the story Scripture had been telling.", items: ["Moses and the Prophets are interpreted on the road.", "Law, Prophets, and Psalms are named in Jerusalem.", "Repentance and forgiveness flow from fulfillment.", "The nations are included in the mission."] },
      { title: "Exegetical Decision", body: "The interpreter must decide whether this is only a resurrection appearance or a bridge from Gospel fulfillment to Acts mission. Luke's ending supports the bridge reading.", items: ["The promise of power points forward.", "Witness language points forward.", "Jerusalem as starting point points forward.", "The content of mission is repentance and forgiveness."] },
      { title: "Genre Caution", body: "Do not flatten Luke's account into a generic resurrection proof or merge all Gospel accounts so quickly that Luke's emphases disappear.", items: ["Let Luke's sequence matter.", "Let the speeches interpret the events.", "Let Luke-Acts shape the mission emphasis.", "Do not skip the disciples' slow learning."] }
    ],
    bridge: [
      { title: "1. Their Town", text: "The first disciples needed to understand that Jesus' death was not the failure of hope but the fulfilled path to resurrection, forgiveness, and mission." },
      { title: "2. Width of the River", text: "Modern readers are not eyewitnesses in Jerusalem, but they still struggle with disappointed expectations, fragmented Bible reading, and self-reliant mission." },
      { title: "3. Timeless Principle", text: "The risen Jesus opens Scripture and sends His people to proclaim repentance and forgiveness in His name through the Spirit's power." },
      { title: "4. Biblical Map", text: "This principle fits the whole Bible's movement from promise to fulfillment, from Israel to the nations, and from Christ's resurrection to the Spirit-empowered church." },
      { title: "5. Our Town", text: "Believers apply Luke 24 by reading Scripture Christologically, receiving resurrection hope, and bearing humble witness to the nations." }
    ],
    exercises: [
      "List every phrase that shows confusion, recognition, opening, or witness.",
      "Create a two-column chart: what the disciples thought versus what Jesus taught.",
      "Trace how Scripture is described in the road scene and the Jerusalem scene.",
      "Explain why Jesus' bodily resurrection matters in the passage.",
      "Write one paragraph connecting Luke 24 to Acts 1-2.",
      "Summarize the commission in one sentence.",
      "Name one way mission can become self-reliant if the promise of the Spirit is ignored."
    ],
    teachingOutline: [
      "Begin with disappointed hope on the road.",
      "Show Jesus opening Scripture around suffering and glory.",
      "Move from recognition to gathered witness.",
      "End with repentance, forgiveness, nations, and promised power."
    ]
  },
  "Romans 12:1-2": {
    closeReading: [
      { title: "Sentence Logic", body: "Paul's appeal is built on the mercies of God. Every command in these verses rests on the gospel logic of Romans 1-11.", items: ["Therefore points backward.", "Mercies provide the ground.", "Present your bodies is the main appeal.", "Discernment is the result of renewed thinking."] },
      { title: "Key Contrasts", body: "The passage contrasts two kinds of formation: pressure from this age and transformation through renewal.", items: ["Conformity is external pressure into a mold.", "Transformation is deep change in perception and desire.", "Renewal of the mind produces tested obedience.", "God's will is discerned by a transformed people."] },
      { title: "Exegetical Decision", body: "The interpreter must decide whether worship means a religious event or whole-life surrender. Paul's body language supports whole-life worship.", items: ["Bodies include habits and concrete life.", "Living sacrifice reworks temple language.", "Spiritual worship is embodied worship.", "Ethics is gratitude made visible."] },
      { title: "Genre Caution", body: "Because this is an epistle, the verse must be read inside the argument of the letter.", items: ["Do not detach Romans 12 from Romans 1-11.", "Do not make the command legalistic.", "Do not treat transformation as individual self-help."] }
    ],
    bridge: [
      { title: "1. Their Town", text: "Roman believers needed to understand that God's mercy creates a new worshiping community whose bodies, minds, and relationships belong to God." },
      { title: "2. Width of the River", text: "Modern readers live in different cultural pressures, but still face formation by the present age and the temptation to separate worship from daily life." },
      { title: "3. Timeless Principle", text: "Because of God's mercy, believers offer their whole embodied lives to God and resist the age through renewed minds." },
      { title: "4. Biblical Map", text: "This agrees with the New Testament pattern: grace saves, then grace trains believers for godliness, love, and discernment." },
      { title: "5. Our Town", text: "Apply the passage by identifying concrete areas of conformity and practicing habits that renew the mind under God's mercy." }
    ],
    exercises: [
      "Write out what 'therefore' refers to in Romans 1-11.",
      "Divide Romans 12:1-2 into six propositions or phrases.",
      "Label the logical relationship between God's mercies and Paul's appeal.",
      "Create a simple arc, bracket, or phrase diagram before writing your application.",
      "List five bodily habits that can become worship.",
      "Identify one pressure from this age that shapes your thinking.",
      "Explain the difference between moralism and mercy-grounded obedience.",
      "Write a one-sentence principle for Romans 12:1-2.",
      "Create a seven-day practice for renewing the mind."
    ],
    teachingOutline: [
      "Start with mercy as the foundation.",
      "Define embodied worship.",
      "Contrast conformity and transformation.",
      "Apply discernment to ordinary life."
    ]
  },
  "Deuteronomy 22:8": {
    closeReading: [
      { title: "Legal Form", body: "The command is concrete, but its reason clause reveals its moral logic. The law protects life through prevention.", items: ["Situation: building a new house.", "Command: make a parapet.", "Danger: someone may fall.", "Moral issue: bloodguilt through negligence."] },
      { title: "Cultural Detail", body: "Flat roofs were usable space in ancient Israel. The law assumes ordinary social life on the roof.", items: ["Roofs could be used for rest.", "Guests or family members could gather there.", "The danger was foreseeable.", "The protective wall was practical and simple."] },
      { title: "Exegetical Decision", body: "The interpreter must decide whether to copy the form or carry forward the value. The stated reason points to the value.", items: ["The form is ancient roof protection.", "The value is proactive neighbor-love.", "The application changes with context.", "The moral concern remains."] },
      { title: "Genre Caution", body: "Old Testament law should not be dismissed because it is culturally distant.", items: ["Look for God's value under the law.", "Distinguish Israel's civil form from enduring moral wisdom.", "Interpret through love of God and neighbor."] }
    ],
    bridge: [
      { title: "1. Their Town", text: "An Israelite builder had to protect people using a flat roof by building a parapet, preventing foreseeable injury and bloodguilt." },
      { title: "2. Width of the River", text: "Most modern readers do not share ancient roof customs, but they do create spaces, systems, and habits that can endanger others." },
      { title: "3. Timeless Principle", text: "God's people must practice proactive neighbor-love by preventing foreseeable harm." },
      { title: "4. Biblical Map", text: "This principle fits the image of God, love of neighbor, Jesus' ethical teaching, and the New Testament concern for others' good." },
      { title: "5. Our Town", text: "Apply the law through safety, accountability, and repair in homes, churches, workplaces, and public life." }
    ],
    exercises: [
      "Identify the command, reason, danger, and protected person in the verse.",
      "List five modern equivalents of a roof without a parapet.",
      "Explain why negligence can be a moral issue.",
      "Write a timeless principle in one sentence.",
      "Apply the principle to a church building or ministry setting.",
      "Apply the principle to digital life, transportation, or workplace practice."
    ],
    teachingOutline: [
      "Explain the ancient roof setting.",
      "Show the stated moral reason.",
      "Extract the neighbor-love principle.",
      "Translate the principle into modern safeguards."
    ]
  },
  "Luke 10:25-37": {
    closeReading: [
      { title: "Dialogue Frame", body: "The parable answers a test question and a self-justifying follow-up. The frame controls the meaning.", items: ["The lawyer asks about inheriting eternal life.", "Jesus points to love of God and neighbor.", "The lawyer seeks to justify himself.", "The parable exposes the desire to limit love."] },
      { title: "Story Movement", body: "The story moves from need to avoidance to costly mercy. The shock is that the despised outsider becomes the model.", items: ["The wounded man is helpless.", "The priest and Levite pass by.", "The Samaritan has compassion.", "Mercy becomes action, expense, and follow-through."] },
      { title: "Exegetical Decision", body: "The interpreter must decide whether Jesus defines neighbor as a category or transforms neighbor into a vocation.", items: ["The lawyer asks who qualifies.", "Jesus asks who acted as neighbor.", "The answer is mercy.", "The command is go and do likewise."] },
      { title: "Genre Caution", body: "Parables should not be over-allegorized. The details serve the central pressure of the story.", items: ["Do not turn every object into a symbol.", "Do not soften the Samaritan shock.", "Do not separate interpretation from response."] }
    ],
    bridge: [
      { title: "1. Their Town", text: "Jesus' hearers were confronted with a story where religious insiders failed and a socially despised Samaritan embodied neighbor-love." },
      { title: "2. Width of the River", text: "Modern readers may not feel Jewish-Samaritan hostility directly, but they still create boundaries around compassion." },
      { title: "3. Timeless Principle", text: "True love of neighbor is costly mercy shown to the person in need, especially across boundaries we use to excuse ourselves." },
      { title: "4. Biblical Map", text: "This principle fits the law's command to love, the prophets' call to mercy, and Jesus' own enemy-embracing grace." },
      { title: "5. Our Town", text: "Apply the parable by identifying avoided neighbors and taking practical action that costs time, money, reputation, or convenience." }
    ],
    exercises: [
      "Underline every question in the dialogue and explain how Jesus changes the question.",
      "List what the Samaritan does in order.",
      "Identify the modern group that would make the story feel shocking in your setting.",
      "Write the central truth in one sentence without allegorizing.",
      "Name one way religious activity can become an excuse for lovelessness.",
      "Plan one concrete act of boundary-crossing mercy."
    ],
    teachingOutline: [
      "Begin with the lawyer's self-justifying question.",
      "Tell the story through expectation and reversal.",
      "Show mercy as the central evidence of neighbor-love.",
      "End with Jesus' command to go and do likewise."
    ]
  },
  "Daniel 7": {
    closeReading: [
      { title: "Vision Sequence", body: "Daniel 7 must be mapped before it is decoded. The order of symbols is part of the message.", items: ["Four beasts arise from the sea.", "The fourth beast receives special attention.", "The little horn speaks arrogantly and persecutes.", "The heavenly court sits and the Son of Man receives dominion."] },
      { title: "Symbol Controls", body: "The text gives interpretive controls. Beasts represent kingdoms, and the court scene interprets history from heaven's perspective.", items: ["Beasts are political powers.", "Horns represent powers within the fourth beast setting.", "The little horn opposes God and the saints.", "Judgment reverses the apparent victory of evil."] },
      { title: "Exegetical Decision", body: "The interpreter must decide whether Daniel 7 is a disconnected end-time puzzle or a repeat-and-enlarge historical vision. This guide follows the historicist repeat-and-enlarge reading.", items: ["Daniel 2 supplies the sequence foundation.", "Daniel 7 adds beast imagery and judgment.", "Daniel 8 continues sanctuary and judgment themes.", "The vision moves toward God's final kingdom."] },
      { title: "Genre Caution", body: "Apocalyptic prophecy should be interpreted by Scripture, not speculation.", items: ["Do not start with current events.", "Do not assign arbitrary symbol meanings.", "Do not ignore the heavenly court.", "Do not make prophecy Christless."] }
    ],
    bridge: [
      { title: "1. Their Town", text: "Daniel's audience needed assurance that beastly empires do not control history and that God will judge arrogant powers." },
      { title: "2. Width of the River", text: "Modern readers live after many historical developments, but still need to see political power through heaven's court and Christ's kingdom." },
      { title: "3. Timeless Principle", text: "Earthly powers rise and oppose God, but heaven judges, Christ receives the kingdom, and God's people are finally vindicated." },
      { title: "4. Biblical Map", text: "This principle fits Daniel's visions, Revelation's beast imagery, Jesus' Son of Man identity, and the final judgment hope." },
      { title: "5. Our Town", text: "Apply Daniel 7 through endurance, worship, moral discernment about power, and hope in Christ's final reign." }
    ],
    exercises: [
      "Make a sequence chart of Daniel 7 before interpreting any symbol.",
      "List every explanation the chapter itself provides.",
      "Compare Daniel 2 and Daniel 7 in a two-column chart.",
      "Explain why the heavenly court is central, not optional.",
      "Write a paragraph on how Daniel 7 points to Christ.",
      "Name one way prophecy should produce faithfulness rather than fear."
    ],
    teachingOutline: [
      "Map the vision from sea to court to kingdom.",
      "Let Daniel interpret Daniel.",
      "Explain historicist repeat-and-enlarge structure.",
      "Center the study on the Son of Man and God's judgment."
    ]
  },
  "Proverbs 26:4-5": {
    closeReading: [
      { title: "Paired Saying Structure", body: "The power of the passage is in the side-by-side placement. The tension is intentional.", items: ["Verse 4 warns against answering folly foolishly.", "Verse 5 warns against leaving folly unchallenged.", "Both sayings concern the effect of a response.", "The reader must discern which danger is present."] },
      { title: "Wisdom Logic", body: "Proverbs trains perception, not automatic reaction. The wise person asks which action fits the moment.", items: ["Silence can be wise.", "Silence can be cowardly.", "Speech can be faithful.", "Speech can become foolish."] },
      { title: "Exegetical Decision", body: "The interpreter must decide whether contradiction is a problem or the teaching method. Wisdom literature supports the second reading.", items: ["The verses do not cancel each other.", "They name two different risks.", "The fear of the Lord guides fitting response.", "Mature speech requires judgment."] },
      { title: "Genre Caution", body: "Do not read proverbs as mechanical laws or absolute promises.", items: ["Proverbs describe wise patterns.", "Application requires context.", "Character matters as much as the rule.", "Speech must serve truth and love."] }
    ],
    bridge: [
      { title: "1. Their Town", text: "The original learner was being trained to discern when answering a fool would spread folly and when silence would let folly appear wise." },
      { title: "2. Width of the River", text: "Modern readers face new communication settings, especially online, but the problem of foolish speech remains." },
      { title: "3. Timeless Principle", text: "Wise speech discerns whether silence or answer will best serve truth, humility, love, and the good of hearers." },
      { title: "4. Biblical Map", text: "This principle fits Proverbs' fear of the Lord, James on the tongue, Jesus' wise silence and rebuke, and Paul's call for gracious speech." },
      { title: "5. Our Town", text: "Apply the passage by pausing before responding, evaluating motive and audience, and choosing either faithful silence or faithful correction." }
    ],
    exercises: [
      "Describe two situations where verse 4 should guide you.",
      "Describe two situations where verse 5 should guide you.",
      "Write a decision tree for responding to foolish speech.",
      "Identify one motive that corrupts correction.",
      "Rewrite a harsh response into a wise response.",
      "Explain how Jesus models both silence and correction."
    ],
    teachingOutline: [
      "Begin with the apparent contradiction.",
      "Explain proverbs as situational wisdom.",
      "Show the two dangers: becoming foolish and enabling foolishness.",
      "Apply to speech, conflict, and online communication."
    ]
  }
};

const CaseStudyBulletList = ({ items }) => (
  <ul className="space-y-2 mt-3">
    {items.map((item, index) => (
      <li key={index} className="flex gap-2 text-sm text-slate-700 leading-relaxed">
        <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />
        <span>{item}</span>
      </li>
    ))}
  </ul>
);

const CaseStudyPage = ({ study, navigate }) => {
  const detail = caseStudyExpansions[study.passage];
  const deepDive = caseStudyDeepDives[study.passage];
  const allMistakes = [...study.mistakes, ...(detail.extraMistakes || [])];

  return (
    <div className="animate-in fade-in duration-500">
      <div className="mb-8">
        <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Deep Case Study Workbook</div>
        <H1>{study.genre} Case Study</H1>
      </div>

      <div className="bg-white border border-slate-200 rounded-2xl p-6 md:p-8 shadow-sm mb-8">
        <div className="flex flex-col md:flex-row md:items-start gap-5">
          <div className="bg-indigo-100 text-indigo-700 p-3 rounded-xl shrink-0">
            <BookOpen className="w-7 h-7" />
          </div>
          <div>
            <div className="text-xs font-bold uppercase tracking-widest text-indigo-500 mb-2">Passage</div>
            <h2 className="text-2xl md:text-3xl font-black text-indigo-950 mb-2">{study.passage}</h2>
            <p className="text-slate-700 text-lg font-medium leading-relaxed">{study.subtitle}</p>
            <div className="mt-4 grid md:grid-cols-2 gap-3">
              <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 text-sm text-slate-700">
                <strong className="text-slate-900 block mb-1">Focus</strong>
                {study.focus}
              </div>
              <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4 text-sm text-indigo-900">
                <strong className="block mb-1">Reading Goal</strong>
                Apply the full hermeneutics process: preunderstanding, observation, interpretation, imagination, and application.
              </div>
            </div>
          </div>
        </div>
      </div>

      <H2>Passage Orientation & Genre Identification</H2>
      <P>{study.setup}</P>
      <div className="grid md:grid-cols-2 gap-4 mb-10">
        {detail.orientation.map((item) => (
          <div key={item.title} className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
            <strong className="text-indigo-900 block mb-2 text-base">{item.title}</strong>
            <p className="text-sm text-slate-700 leading-relaxed">{item.text}</p>
          </div>
        ))}
      </div>

      <H2>Reading Posture: Prayerful Humility & Authorial Intent</H2>
      <div className="bg-indigo-950 text-white rounded-2xl p-6 md:p-8 shadow-lg mb-10">
        <div className="flex items-center gap-3 mb-4">
          <Lightbulb className="w-6 h-6 text-yellow-300" />
          <strong className="text-yellow-300 uppercase tracking-widest text-sm">Before Interpretation</strong>
        </div>
        <div className="grid md:grid-cols-3 gap-3">
          {detail.posture.map((item, index) => (
            <div key={index} className="bg-white/10 border border-white/10 rounded-xl p-4 text-sm text-indigo-50 leading-relaxed">
              {item}
            </div>
          ))}
        </div>
      </div>

      <H2>Genre Structure & Close Reading</H2>
      {deepDive.narrativeArc && (
        <div className="bg-white border border-slate-200 rounded-2xl p-5 md:p-7 shadow-sm mb-5">
          <div className="flex items-center gap-3 mb-5">
            <div className="bg-indigo-100 text-indigo-700 p-2 rounded-lg">
              <GitMerge className="w-5 h-5" />
            </div>
            <div>
              <strong className="text-indigo-950 text-lg block">Narrative Arc</strong>
              <p className="text-sm text-slate-600">The plot movement belongs here because narrative meaning is discovered by tracing the story's shape before extracting principles.</p>
            </div>
          </div>
          <div className="space-y-4">
            {deepDive.narrativeArc.map((point, index) => (
              <div key={point.title} className="grid md:grid-cols-[150px_1fr] gap-3 md:gap-5 items-start border-b border-slate-100 last:border-b-0 pb-4 last:pb-0">
                <div className="flex items-center gap-3">
                  <span className="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold shrink-0">{index + 1}</span>
                  <strong className="text-indigo-900 text-sm">{point.title}</strong>
                </div>
                <p className="text-sm md:text-base text-slate-700 leading-relaxed">{point.text}</p>
              </div>
            ))}
          </div>
        </div>
      )}
      <div className="grid md:grid-cols-2 gap-4 mb-10">
        {deepDive.closeReading.map((section) => (
          <div key={section.title} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
            <strong className="text-indigo-900 block mb-2 text-lg">{section.title}</strong>
            <p className="text-sm text-slate-700 leading-relaxed">{section.body}</p>
            <CaseStudyBulletList items={section.items} />
          </div>
        ))}
      </div>

      {study.passage === "Romans 12:1-2" && (
        <>
          <H2>Argument Diagramming Lab</H2>
          <div className="bg-white border border-slate-200 rounded-2xl p-5 md:p-7 shadow-sm mb-10">
            <div className="flex items-start gap-4 mb-5">
              <div className="bg-indigo-100 text-indigo-700 p-3 rounded-xl shrink-0">
                <GitMerge className="w-6 h-6" />
              </div>
              <div>
                <strong className="text-indigo-950 text-lg block">Romans 12:1-2: Trace the Argument Before Applying It</strong>
                <p className="text-sm text-slate-700 leading-relaxed mt-1">
                  This lab practices the three methods from the Epistles argument-diagramming pages. The diagrams show that Paul's commands are not floating moral advice: God's mercies ground embodied worship, and renewed thinking produces discernment.
                </p>
              </div>
            </div>
            <div className="grid md:grid-cols-3 gap-4 mb-6">
              <div className="bg-sky-50 border border-sky-100 rounded-xl p-4">
                <strong className="text-sky-900 block mb-2">Pass 1: Observe</strong>
                <p className="text-sm text-slate-700 leading-relaxed">Mark the connectors: therefore, by, not/but, by, so that. These are clues to the argument's movement.</p>
              </div>
              <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4">
                <strong className="text-indigo-900 block mb-2">Pass 2: Compare Methods</strong>
                <p className="text-sm text-slate-700 leading-relaxed">Use arcing for logical flow, bracketing for grouped structure, and phrasing for main clauses and supporting phrases.</p>
              </div>
              <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4">
                <strong className="text-emerald-900 block mb-2">Pass 3: Interpret</strong>
                <p className="text-sm text-slate-700 leading-relaxed">State the main idea in one sentence before moving to application.</p>
              </div>
            </div>
            <ArgumentDiagramLab compact />
            <div className="mt-6 bg-slate-900 text-white rounded-2xl p-5 shadow-lg">
              <strong className="text-emerald-300 block mb-3 text-lg">What You Should See by the End</strong>
              <ul className="space-y-2 text-sm text-slate-100">
                <li><strong>Mercy grounds worship:</strong> Paul's appeal rests on God's prior mercies.</li>
                <li><strong>Worship involves the body:</strong> the response is embodied, holy, and pleasing to God.</li>
                <li><strong>Formation has two paths:</strong> the age presses conformity, but God works transformation.</li>
                <li><strong>Renewed thinking has a purpose:</strong> believers learn to discern and approve God's will.</li>
              </ul>
            </div>
          </div>
        </>
      )}

      {study.passage === "Psalm 42" && (
        <>
          <H2>Poetry Interpretation Lab</H2>
          <div className="bg-white border border-slate-200 rounded-2xl p-5 md:p-7 shadow-sm mb-10">
            <div className="flex items-start gap-4 mb-5">
              <div className="bg-indigo-100 text-indigo-700 p-3 rounded-xl shrink-0">
                <Feather className="w-6 h-6" />
              </div>
              <div>
                <strong className="text-indigo-950 text-lg block">Psalm 42: Practice the Poetry Rules Slowly</strong>
                <p className="text-sm text-slate-700 leading-relaxed mt-1">
                  This lab practices the expanded poetry rules. The goal is to see how repetition, voice shifts, image clusters, prayer, and canonical hope work together without turning the psalm into a quick emotional fix.
                </p>
              </div>
            </div>

            <div className="grid md:grid-cols-2 gap-4 mb-6">
              <div className="bg-sky-50 border border-sky-100 rounded-xl p-4 shadow-sm">
                <strong className="text-sky-900 block mb-2">1. Map Repetition and Refrain</strong>
                <p className="text-sm text-slate-700 leading-relaxed mb-3">Mark repeated words and repeated movements. The refrain returns because the soul needs repeated shepherding.</p>
                <ul className="list-disc pl-5 text-sm text-slate-700 space-y-1">
                  <li>Repeated emotional state: downcast and disturbed.</li>
                  <li>Repeated response: hope in God and future praise.</li>
                  <li>Repeated pressure: absence, memory, taunts, turmoil.</li>
                </ul>
              </div>

              <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4 shadow-sm">
                <strong className="text-indigo-900 block mb-2">2. Identify Voice Shifts</strong>
                <p className="text-sm text-slate-700 leading-relaxed mb-3">Notice who is being addressed. The poem is not one flat speech.</p>
                <div className="grid sm:grid-cols-2 gap-2 text-sm text-slate-700">
                  <div className="bg-white border border-indigo-100 rounded-lg p-3"><strong className="text-indigo-700 block">About God</strong>The living God is the object of thirst.</div>
                  <div className="bg-white border border-indigo-100 rounded-lg p-3"><strong className="text-indigo-700 block">To God</strong>The psalmist turns anguish into prayer.</div>
                  <div className="bg-white border border-indigo-100 rounded-lg p-3"><strong className="text-indigo-700 block">To the Soul</strong>The psalmist questions and commands his inner life.</div>
                  <div className="bg-white border border-indigo-100 rounded-lg p-3"><strong className="text-indigo-700 block">From Enemies</strong>Their taunt pressures faith with shame.</div>
                </div>
              </div>

              <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4 shadow-sm">
                <strong className="text-emerald-900 block mb-2">3. Trace the Image Cluster</strong>
                <p className="text-sm text-slate-700 leading-relaxed mb-3">Read the water images together. They move from longing to overwhelm.</p>
                <div className="space-y-2 text-sm text-slate-700">
                  <div className="bg-white border border-emerald-100 rounded-lg p-3"><strong className="text-emerald-700">Thirst:</strong> the soul needs God, not merely relief.</div>
                  <div className="bg-white border border-emerald-100 rounded-lg p-3"><strong className="text-emerald-700">Tears:</strong> sorrow has become daily provision.</div>
                  <div className="bg-white border border-emerald-100 rounded-lg p-3"><strong className="text-emerald-700">Deep and waves:</strong> the pain feels larger than the worshiper can master.</div>
                </div>
              </div>

              <div className="bg-amber-50 border border-amber-100 rounded-xl p-4 shadow-sm">
                <strong className="text-amber-900 block mb-2">4. Read as Prayer and Worship</strong>
                <p className="text-sm text-slate-700 leading-relaxed mb-3">Psalm 42 does not simply tell you facts about sadness. It gives you a faithful way to pray sadness.</p>
                <ul className="list-disc pl-5 text-sm text-slate-700 space-y-1">
                  <li>Name longing before God honestly.</li>
                  <li>Remember worship without pretending memory removes grief.</li>
                  <li>Speak hope to the soul while waiting for renewed praise.</li>
                </ul>
              </div>
            </div>

            <div className="bg-purple-50 border border-purple-200 rounded-2xl p-5 shadow-sm mb-6">
              <strong className="text-purple-950 block mb-3 text-lg">5. Connect Canonically Without Flattening the Lament</strong>
              <p className="text-sm text-slate-700 leading-relaxed mb-4">
                Psalm 42 belongs with other laments, the Bible's living-water hope, Christ's suffering prayers, and Christian endurance. But the connection should deepen the lament, not erase it.
              </p>
              <div className="grid md:grid-cols-4 gap-3 text-sm text-slate-700">
                <div className="bg-white border border-purple-100 rounded-xl p-4 shadow-sm">
                  <strong className="text-purple-800 block mb-1">Other Laments</strong>
                  Compare Psalms that move through complaint, remembrance, and trust.
                </div>
                <div className="bg-white border border-purple-100 rounded-xl p-4 shadow-sm">
                  <strong className="text-purple-800 block mb-1">Living Water</strong>
                  Later Scripture develops thirst for God into a richer hope of life from God.
                </div>
                <div className="bg-white border border-purple-100 rounded-xl p-4 shadow-sm">
                  <strong className="text-purple-800 block mb-1">Christ</strong>
                  Jesus enters real suffering and teaches His people to pray Scripture honestly.
                </div>
                <div className="bg-white border border-purple-100 rounded-xl p-4 shadow-sm">
                  <strong className="text-purple-800 block mb-1">Hope</strong>
                  Christian hope does not deny sorrow; it refuses to let sorrow speak the final word.
                </div>
              </div>
            </div>

            <div className="bg-slate-900 text-white rounded-2xl p-5 shadow-lg">
              <strong className="text-emerald-300 block mb-3 text-lg">What You Should See by the End</strong>
              <ul className="space-y-2 text-sm text-slate-100">
                <li><strong>Repetition carries the center:</strong> the refrain keeps returning the soul to hope.</li>
                <li><strong>Voice shifts matter:</strong> the psalmist speaks about God, to God, to himself, and in the presence of enemy taunts.</li>
                <li><strong>Images work together:</strong> thirst, tears, deep water, and waves portray longing and overwhelm.</li>
                <li><strong>Prayer shapes interpretation:</strong> the psalm forms faithful lament before it becomes application.</li>
                <li><strong>Canonical hope deepens lament:</strong> Christ and biblical hope do not silence grief; they carry it toward future praise.</li>
              </ul>
            </div>
          </div>
        </>
      )}

      <H2>Full Hermeneutics Walkthrough</H2>
      <div className="space-y-8 mb-10">
        {detail.phases.map((phase, index) => {
          const colors = caseStudyColorStyles[index % caseStudyColorStyles.length];
          return (
            <section key={phase.title} className={`border rounded-2xl p-5 md:p-7 shadow-sm ${colors.wrap}`}>
              <div className="flex items-start gap-4 mb-5">
                <div className={`${colors.badge} text-white w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm shrink-0 shadow-sm`}>
                  {index + 1}
                </div>
                <div>
                  <h3 className={`text-2xl font-black m-0 ${colors.title}`}>{phase.title}</h3>
                  <p className="text-sm md:text-base text-slate-700 mt-2 leading-relaxed">{phase.summary}</p>
                </div>
              </div>

              <div className="grid md:grid-cols-2 gap-4">
                {phase.groups.map((group) => (
                  <div key={group.title} className="bg-white/85 border border-white rounded-xl p-5 shadow-sm">
                    <strong className={`${colors.title} block mb-2 text-base`}>{group.title}</strong>
                    <p className="text-sm text-slate-700 leading-relaxed">{group.body}</p>
                    <CaseStudyBulletList items={group.items} />
                  </div>
                ))}
              </div>

              {phase.spacepets && (
                <div className="mt-6 bg-white/80 border border-white rounded-2xl p-5 shadow-sm">
                  <strong className={`${colors.title} block mb-4 text-lg`}>S.P.A.C.E.P.E.T.S. Application Diagnostic</strong>
                  <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
                    {phase.spacepets.map((item, itemIndex) => (
                      <div key={`${item.key}-${item.label}-${itemIndex}`} className="bg-white border border-slate-100 rounded-xl p-4 shadow-sm">
                        <div className="flex items-center gap-2 mb-2">
                          <span className={`${colors.badge} text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold`}>{item.key}</span>
                          <strong className="text-slate-900 text-sm">{item.label}</strong>
                        </div>
                        <p className="text-sm text-slate-700 leading-relaxed">{item.text}</p>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {phase.applicationLevels && (
                <div className="mt-6 bg-white/80 border border-white rounded-2xl p-5 shadow-sm">
                  <strong className={`${colors.title} block mb-4 text-lg`}>Six Levels of Application</strong>
                  <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-3">
                    {phase.applicationLevels.map((item) => (
                      <div key={item.title} className="bg-white border border-slate-100 rounded-xl p-4 shadow-sm">
                        <strong className="text-slate-900 block mb-1 text-sm">{item.title}</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">{item.text}</p>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </section>
          );
        })}
      </div>

      <H2>Principlizing Bridge</H2>
      <div className="bg-slate-900 text-white rounded-2xl p-5 md:p-8 shadow-xl mb-10">
        <div className="space-y-4">
          {deepDive.bridge.map((step) => (
            <div key={step.title} className="bg-white/10 border border-white/10 rounded-xl p-4 md:p-5 flex flex-col md:flex-row md:items-start gap-4">
              <div className="bg-emerald-400 text-slate-950 w-10 h-10 rounded-full flex items-center justify-center font-black text-sm shrink-0">
                {step.title.split(".")[0]}
              </div>
              <div className="min-w-0">
                <strong className="text-emerald-300 block mb-2 text-base md:text-lg">{step.title.replace(/^\d+\.\s*/, "")}</strong>
                <p className="text-sm md:text-base text-slate-100 leading-relaxed">{step.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <H2>Workbook Exercises</H2>
      <div className="grid md:grid-cols-2 gap-4 mb-10">
        <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
          <strong className="text-indigo-900 block mb-4 text-lg">Reader Practice Questions</strong>
          <ol className="list-decimal pl-5 space-y-3 text-sm text-slate-700">
            {deepDive.exercises.map((question, index) => (
              <li key={index} className="pl-1 leading-relaxed">{question}</li>
            ))}
          </ol>
        </div>
        <div className="bg-indigo-50 border border-indigo-200 rounded-2xl p-5 shadow-sm">
          <strong className="text-indigo-900 block mb-4 text-lg">Teaching or Small Group Outline</strong>
          <div className="space-y-3">
            {deepDive.teachingOutline.map((point, index) => (
              <div key={index} className="bg-white border border-indigo-100 rounded-xl p-4 flex gap-3 items-start">
                <span className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold shrink-0">{index + 1}</span>
                <p className="text-sm text-slate-700 leading-relaxed">{point}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      <H2>Common Mistakes to Avoid</H2>
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 mb-10">
        {allMistakes.map((mistake, index) => (
          <div key={index} className="bg-rose-50 border border-rose-200 rounded-xl p-5 shadow-sm">
            <strong className="text-rose-800 block mb-2 text-sm uppercase tracking-widest">Avoid</strong>
            <p className="text-sm text-slate-700 leading-relaxed">{mistake}</p>
          </div>
        ))}
      </div>

      <div className="bg-gradient-to-r from-indigo-900 to-purple-900 text-white rounded-2xl p-6 md:p-8 shadow-xl">
        <div className="flex items-center gap-3 mb-3">
          <CheckCircle2 className="w-6 h-6 text-emerald-300" />
          <strong className="text-emerald-300 uppercase tracking-widest text-sm">Final Big Idea</strong>
        </div>
        <p className="text-indigo-50 text-lg md:text-xl leading-relaxed font-medium">{study.bigIdea}</p>
      </div>

      <WhereToGoNext navigate={navigate} items={[
        { label: "Guided Workbook", target: "ai-interpreter", text: `Try ${study.passage} or a similar passage in the workbook.` },
        { label: "Practice Library", target: "practice-library", text: "Practice the same genre with a shorter guided exercise." },
        { label: "Master Checklist", target: "master-checklist", text: "Audit the case study method before using it yourself." }
      ]} />
    </div>
  );
};

const gospelPortraits = [
  { name: "Matthew", portrait: "Jesus as the promised Messiah and King who fulfills Scripture and forms a kingdom people." },
  { name: "Mark", portrait: "Jesus as the suffering Son of God whose authority is revealed through service and the cross." },
  { name: "Luke", portrait: "Jesus as the Savior for all peoples, with special attention to the marginalized and the Spirit's mission." },
  { name: "John", portrait: "Jesus as the eternal Son and Word made flesh, revealed through signs, discourses, and witness." },
  { name: "Acts", portrait: "The risen Jesus continuing His mission through the Spirit-empowered church from Jerusalem toward the nations." }
];

const gospelsActsRules = [
  {
    title: "Read the Gospels as Theological Biography",
    body: "The Gospels are not modern biographies that record every detail in strict chronological order. They are selective, arranged, Spirit-inspired portraits of Jesus that reveal His identity, mission, death, resurrection, and call to discipleship.",
    example: "Matthew groups major teachings into large discourse sections so readers can hear Jesus as the authoritative teacher and Messianic King.",
    ask: "What has this Gospel writer chosen to include, arrange, repeat, or emphasize about Jesus?",
    lookFor: "Genealogy, title, repeated theme, conflict scene, fulfillment note, sermon block, miracle cluster, passion emphasis.",
    avoid: "Do not judge the Gospel by modern biography expectations. Selection and arrangement are part of the inspired message."
  },
  {
    title: "Read Acts as Luke's Second Volume",
    body: "Acts continues the story Luke began. The risen Jesus remains central, but His mission now advances through witnesses empowered by the Holy Spirit.",
    example: "Luke ends with the promise of power from on high; Acts begins with the same promise and then shows Pentecost launching the mission.",
    ask: "How does this scene continue what Jesus began in Luke, and how does the Spirit move the mission forward?",
    lookFor: "Prayer, Spirit empowerment, resurrection witness, speeches, opposition, boundary-crossing mission, church formation.",
    avoid: "Do not make Acts only a manual of church techniques. It is first a witness to the risen Jesus advancing His mission."
  },
  {
    title: "Follow Each Gospel's Distinct Portrait of Jesus",
    body: "Do not flatten Matthew, Mark, Luke, and John into one generic Gospel. Each writer selects, arranges, and emphasizes material to communicate a distinct theological portrait of Jesus.",
    example: "John calls his miracles signs because they reveal Jesus' glory and invite faith in Him as the Son of God.",
    ask: "What does this Gospel especially want me to see about Jesus here?",
    lookFor: "Favorite titles for Jesus, repeated questions, opening and closing themes, unique scenes, distinctive vocabulary.",
    avoid: "Do not rush to harmonize before listening to each Gospel on its own terms."
  },
  {
    title: "Read Each Episode in Narrative Context",
    body: "A miracle, parable, conflict, or saying should be read where the Gospel writer placed it. Ask what comes before, what follows, and how the episode advances the plot.",
    example: "A healing may reveal compassion, but in context it may also provoke conflict, disclose Jesus' authority, or prepare a teaching about the kingdom.",
    ask: "Why does this event appear here, between these surrounding episodes?",
    lookFor: "Scene boundaries, repeated words, rising conflict, misunderstanding, response of disciples, response of opponents.",
    avoid: "Do not detach a saying from the scene that gives it force."
  },
  {
    title: "Compare Parallel Accounts Without Flattening Them",
    body: "Parallel Gospel accounts can illuminate one another, but each Gospel's wording and arrangement should be heard on its own terms first.",
    example: "The feeding miracles appear in multiple Gospels, but each writer uses the event to highlight particular themes such as compassion, wilderness provision, or Jesus as bread of life.",
    ask: "What does this account share with the parallels, and what does this writer uniquely stress?",
    lookFor: "Added detail, omitted detail, different ordering, repeated title, changed emphasis, unique audience response.",
    avoid: "Do not blend all accounts so quickly that each author's theological emphasis disappears."
  },
  {
    title: "Watch Old Testament Fulfillment",
    body: "The Gospels and Acts constantly present Jesus as the fulfillment of Scripture, Israel's story, temple hopes, kingdom promises, suffering servant themes, and the blessing of the nations.",
    example: "Luke 24 shows Jesus interpreting His suffering and glory through Moses, the Prophets, and the Psalms.",
    ask: "What earlier Scripture, covenant, promise, pattern, or hope is being brought to fulfillment?",
    lookFor: "Direct quotations, allusions, exodus echoes, Davidic kingship, temple language, servant suffering, nations language.",
    avoid: "Do not treat fulfillment as a loose word association. Anchor it in real biblical patterns and authorial clues."
  },
  {
    title: "Interpret Miracles and Signs Theologically",
    body: "Miracles are not raw displays of power. They reveal Jesus' identity, compassion, authority, kingdom arrival, and restoration of creation.",
    example: "Jesus' authority over storms, demons, disease, and death reveals the inbreaking reign of God.",
    ask: "What does this miracle reveal about Jesus, the kingdom, human need, and the response of faith or unbelief?",
    lookFor: "The problem, Jesus' word or touch, witnesses' reaction, opposition, creation-restoration imagery, faith response.",
    avoid: "Do not reduce miracles to motivational stories about getting what we want from God."
  },
  {
    title: "Notice Plot, Dialogue, Irony, and Characterization",
    body: "Gospel and Acts narratives teach through story craft: setting, conflict, repeated misunderstanding, questions, speeches, irony, reversals, and character contrasts.",
    example: "The soldiers mock Jesus as king, unaware that their insult testifies to a truth deeper than they understand.",
    ask: "How is the story teaching through what characters say, misunderstand, fear, notice, or fail to notice?",
    lookFor: "Questions, repeated misunderstandings, reversal, irony, contrasts between insiders and outsiders, speeches in Acts.",
    avoid: "Do not skip the narrative artistry on the way to a quick doctrine statement."
  },
  {
    title: "Distinguish Descriptive and Prescriptive Material in Acts",
    body: "Acts records what happened in the early church, but not every event is a command to repeat. Ask whether Luke presents an event as a unique moment, a repeated pattern, or a norm reinforced by teaching.",
    example: "Casting lots in Acts 1 is descriptive; devotion to apostolic teaching, fellowship, breaking bread, and prayer in Acts 2:42 reflects an enduring church pattern.",
    ask: "Is Luke showing a one-time event, a repeated pattern, or an example reinforced by direct teaching elsewhere?",
    lookFor: "Repetition across Acts, approval or correction, apostolic teaching, connection to broader New Testament commands.",
    avoid: "Do not copy every narrative event as a required church practice."
  },
  {
    title: "Trace the Movement from Jesus to Mission",
    body: "The Gospels move toward Jesus' death and resurrection; Acts moves outward through witness. Together they show fulfillment becoming proclamation to the nations.",
    example: "Luke 24 names repentance and forgiveness in Jesus' name for all nations; Acts shows that mission beginning in Jerusalem and spreading outward.",
    ask: "How does this passage move from Jesus' identity and work toward witness, discipleship, and mission?",
    lookFor: "Resurrection witness, repentance and forgiveness, nations, Jerusalem, Spirit, sending, opposition, boundary crossing.",
    avoid: "Do not end with private inspiration when the text is moving toward public witness and faithful mission."
  }
];

const GospelsActsSection = () => (
  <div className="animate-in fade-in duration-500">
    <div className="mb-8">
      <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 5</div>
      <H1>Interpreting the Gospels and Acts</H1>
    </div>

    <LearningSteps
      title="Gospels & Acts Learning Path"
      intro="Start by seeing what the episode reveals about Jesus, then deepen the reading through fulfillment, mission, and careful Acts application."
      steps={learningStepPresets.gospelsActs}
    />

    <H2>Overview: Jesus' Story and Continuing Mission</H2>
    <P>
      The Gospels and Acts are narrative, but they deserve focused attention because they tell the climactic story of Jesus and the mission that flows from His resurrection. The Gospels reveal who Jesus is, what His kingdom means, and why His death and resurrection fulfill Scripture. Acts shows the risen Jesus continuing His work through the Spirit-empowered church.
    </P>
    <P><Strong>Books Included:</Strong> Matthew, Mark, Luke, John, and Acts.</P>

    <div className="bg-indigo-50 border border-indigo-200 rounded-2xl p-5 md:p-6 shadow-sm mb-10">
      <strong className="text-indigo-950 block text-lg mb-2">Why Acts Belongs Here</strong>
      <p className="text-sm md:text-base text-slate-700 leading-relaxed">
        Acts is historical narrative in the broad sense, but in this guide it belongs with the Gospels because Luke and Acts form a two-volume work. Luke tells what Jesus began to do and teach; Acts shows that same mission continuing through witnesses empowered by the Holy Spirit.
      </p>
    </div>

    <H2>Unique Features of the Gospels and Acts</H2>
    <div className="grid md:grid-cols-2 gap-4 mb-10">
      <div className="bg-sky-50 border border-sky-200 p-5 rounded-xl shadow-sm">
        <h4 className="font-bold text-sky-900 flex items-center gap-2 mb-2"><BookOpen className="w-5 h-5"/> The Gospels</h4>
        <ul className="text-sm text-slate-700 list-disc pl-5 space-y-2">
          <li><strong>Theological biography:</strong> The Gospel writers select and arrange material to reveal Jesus, not to satisfy every modern biographical curiosity.</li>
          <li><strong>Topical arrangement:</strong> Events and teachings may be arranged thematically to highlight a theological point.</li>
          <li><strong>Narrative irony and reversal:</strong> Characters often say more than they know, misunderstand Jesus, or reveal truth through opposition.</li>
          <li><strong>Memorable speech:</strong> Hyperbole, parables, questions, and vivid images press hearers toward repentance and discipleship.</li>
        </ul>
      </div>
      <div className="bg-indigo-50 border border-indigo-200 p-5 rounded-xl shadow-sm">
        <h4 className="font-bold text-indigo-900 flex items-center gap-2 mb-2"><GitMerge className="w-5 h-5"/> The Book of Acts</h4>
        <ul className="text-sm text-slate-700 list-disc pl-5 space-y-2">
          <li><strong>Continuation:</strong> Acts continues Luke's Gospel by showing the risen Jesus directing His people through the Spirit.</li>
          <li><strong>Mission movement:</strong> The story moves from Jerusalem toward the nations, crossing ethnic, cultural, and geographic boundaries.</li>
          <li><strong>Discipleship and church life:</strong> Acts forms believers by showing worship, witness, prayer, suffering, generosity, and community.</li>
          <li><strong>Descriptive vs. prescriptive:</strong> Acts requires careful discernment about what is unique, repeated, or intended as an enduring pattern.</li>
        </ul>
      </div>
    </div>

    <H2>Distinct Portraits and Mission Movement</H2>
    <div className="grid sm:grid-cols-2 xl:grid-cols-3 gap-4 mb-10">
      {gospelPortraits.map((item) => (
        <div key={item.name} className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
          <strong className="text-indigo-900 block text-lg mb-2">{item.name}</strong>
          <p className="text-sm text-slate-700 leading-relaxed">{item.portrait}</p>
        </div>
      ))}
    </div>

    <H2>A Simple Reading Workflow</H2>
    <div className="bg-white border border-slate-200 rounded-2xl p-5 md:p-6 shadow-sm mb-10">
      <p className="text-sm md:text-base text-slate-700 leading-relaxed mb-5">
        When a Gospel or Acts passage feels familiar, slow down and move through these questions before application.
      </p>
      <div className="grid sm:grid-cols-2 xl:grid-cols-3 gap-4 text-sm">
        {[
          { step: "1", title: "Locate", text: "Where does this scene sit in the book's movement?" },
          { step: "2", title: "Observe", text: "What words, actions, conflict, and responses stand out?" },
          { step: "3", title: "Connect", text: "How does this reveal Jesus or continue His mission?" },
          { step: "4", title: "Fulfill", text: "What Scripture, promise, or biblical pattern is being fulfilled?" },
          { step: "5", title: "Respond", text: "What kind of faith, witness, repentance, worship, or obedience does the passage call for?" }
        ].map((item) => (
          <div key={item.title} className="bg-slate-50 border border-slate-200 rounded-xl p-4 shadow-sm">
            <span className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold mb-3">{item.step}</span>
            <strong className="text-indigo-900 block mb-1">{item.title}</strong>
            <p className="text-slate-700 leading-relaxed">{item.text}</p>
          </div>
        ))}
      </div>
    </div>

    <H2>Rules for Interpreting the Gospels and Acts</H2>
    <Ul>
      {gospelsActsRules.map((rule, index) => (
        <Li key={rule.title}>
          <div className="w-full">
            <Strong>{index + 1}. {rule.title}</Strong>
            <p className="mt-2 text-slate-700">{rule.body}</p>
            <div className="mt-4 bg-white border border-slate-200 rounded-xl p-4 shadow-sm text-sm text-slate-700">
              <strong className="text-indigo-900 block mb-1">Example</strong>
              {rule.example}
            </div>
            <RuleGuidance ask={rule.ask} lookFor={rule.lookFor} avoid={rule.avoid} />
          </div>
        </Li>
      ))}
    </Ul>

    <div className="bg-slate-900 text-white rounded-2xl p-6 shadow-lg mt-10">
      <strong className="text-emerald-300 block mb-2">Interpretive Payoff</strong>
      <p className="text-sm md:text-base text-slate-100 leading-relaxed">
        Gospels and Acts interpretation asks: How does this passage reveal Jesus, fulfill Scripture, form disciples, and move the mission forward? That question keeps the reader from reducing these books to isolated moral examples or disconnected church history.
      </p>
    </div>
  </div>
);

const additionalPoetryRules = [
  {
    title: "Track Repetition, Keywords, and Sound Patterns",
    body: "Poets repeat words, images, sounds, and sentence patterns to guide the reader's attention. In poetry, repetition is often the author's highlighter. A repeated line may divide the poem, a repeated image may carry the emotional weight, and repeated sounds may slow the reader down or intensify the feeling.",
    ask: "What words, phrases, images, or patterns keep returning?",
    lookFor: "Refrains, repeated names for God, repeated emotions, parallel phrases, intensification, wordplay, rhythm, and memorable sound patterns.",
    avoid: "Do not treat repetition as filler. In poetry, repeated language usually marks emphasis, structure, or emotional pressure.",
    example: "In Psalm 42, the repeated self-address to the downcast soul becomes the poem's pastoral center: grief is answered again and again with hope in God."
  },
  {
    title: "Identify the Speaker, Audience, and Voice Shifts",
    body: "Poems often move between voices. A poet may speak to God, about God, to the congregation, to enemies, to creation, or even to his own soul. Tracking these shifts helps you follow the poem's movement instead of treating every line as the same kind of speech.",
    ask: "Who is speaking, and to whom are they speaking in this line or stanza?",
    lookFor: "Direct address, questions, commands, quotations from enemies, self-address, communal language, and shifts from 'I' to 'we' or 'you.'",
    avoid: "Do not flatten every voice into the author's direct statement. Sometimes the poem records taunts, questions, or inner dialogue that must be interpreted carefully.",
    example: "Psalm 42 moves from longing for God, to remembering worship, to hearing enemies ask where God is, to commanding the soul to hope."
  },
  {
    title: "Interpret Images in Clusters, Not Isolation",
    body: "A single poetic image rarely carries the whole meaning by itself. Images gather force as they appear together. Read them like a network: each picture adds texture to the others and helps you feel the poem's theological weight.",
    ask: "How do the images in this poem work together to create one emotional and theological picture?",
    lookFor: "Related image fields such as water, light, darkness, rock, refuge, path, dust, breath, shepherding, harvest, exile, or storm.",
    avoid: "Do not assign a separate hidden meaning to every small image. First ask how the images cooperate inside the poem.",
    example: "Psalm 42's thirst, tears, deep waters, waves, and downcast soul all work together to portray spiritual longing and emotional overwhelm."
  },
  {
    title: "Read Poetry as Worship and Prayer Before Proposition",
    body: "Biblical poetry teaches truth, but it often teaches by training worship, grief, repentance, awe, and hope. Before turning a poem into a doctrinal outline, ask how it is shaping the heart's speech before God.",
    ask: "What kind of prayer, worship, lament, confession, praise, or longing is this poem teaching me to practice?",
    lookFor: "Praise, complaint, confession, remembrance, vow, blessing, thanksgiving, longing, petition, and surrendered trust.",
    avoid: "Do not extract cold propositions so quickly that the poem's prayerful force disappears.",
    example: "Lamentations teaches God's people to grieve devastation honestly while still naming God's mercy and faithfulness."
  },
  {
    title: "Connect the Poem to Canon, Christ, and Hope Responsibly",
    body: "Poems belong to the whole Bible, so we should read them canonically and, where appropriate, Christologically. But responsible canonical reading preserves the poem's original voice, genre, and emotional movement before drawing larger connections.",
    ask: "How does this poem fit the wider biblical story without erasing its immediate meaning?",
    lookFor: "Shared themes, later biblical echoes, messianic patterns, lament and hope, temple and exile, creation and new creation, and Christ's own use of the Psalms.",
    avoid: "Do not jump to Christ-centered application in a way that skips the poem's first meaning, pain, praise, or historical setting.",
    example: "Psalm 42 can connect to other laments, living-water imagery, Jesus' suffering prayers, and Christian hope while still remaining a real lament of spiritual thirst."
  }
];

ruleGuidanceByTitle = {
  "Master the Structure of Parallelism": {
    ask: "How do the paired or grouped lines relate to each other?",
    lookFor: "Synonymous, antithetic, synthetic, illustrative, formal, acrostic, chiasm, intensification, and repeated line patterns.",
    avoid: "Do not interpret one poetic line in isolation when the nearby line is completing, sharpening, or contrasting it."
  },
  "Decode the Imagery and Figures of Speech": {
    ask: "What picture is the poet using, and what truth or emotion does that picture communicate?",
    lookFor: "Simile, metaphor, personification, anthropomorphism, hyperbole, metonymy, synecdoche, apostrophe, and wordplay.",
    avoid: "Do not read every poetic image woodenly or turn every detail into a secret symbolic code."
  },
  "Engage the Emotional Context & Sub-Genres": {
    ask: "What kind of poem is this, and what emotional movement does it invite?",
    lookFor: "Lament, praise, thanksgiving, imprecation, wisdom, royal hope, complaint, vow, trust, confession, and blessing.",
    avoid: "Do not extract doctrine so quickly that you miss the poem's prayer, grief, joy, or worship."
  },
  "Analyze the Macro-Structure (Stanzas and Refrains)": {
    ask: "How is the poem divided, and where does it turn?",
    lookFor: "Stanzas, refrains, repeated lines, Selah, changes in speaker, shifts in mood, and movement from complaint to trust.",
    avoid: "Do not treat the poem as a loose collection of beautiful lines without structure."
  },
  "Ground the Poem in its Historical Context (When Possible)": {
    ask: "What known setting or internal clue helps explain the poem?",
    lookFor: "Superscriptions, named enemies, exile, temple setting, kingship, crisis, worship context, and covenant language.",
    avoid: "Do not invent a historical setting when the text does not give enough evidence."
  },
  "Narrative Has Three Levels": {
    ask: "How does this episode fit the immediate scene, the book or covenant setting, and the Bible's whole redemptive story?",
    lookFor: "Immediate scene details, book storyline, covenant setting, creation, fall, Abrahamic promise, exodus, Sinai, land, monarchy, exile, return, prophetic hope, and Christ.",
    avoid: "Do not turn an isolated episode into a free-standing moral lesson or flatten every Old Testament narrative into the same covenant moment."
  },
  "Trace the Plot Movement": {
    ask: "How does the story move from setting and conflict toward climax, resolution, and theological point?",
    lookFor: "Exposition, rising action, conflict, repeated tension, climax, falling action, resolution, and the narrator's final emphasis.",
    avoid: "Do not jump to a lesson before following how the story builds, turns, and resolves."
  },
  "Distinguish Between Descriptive and Prescriptive": {
    ask: "Is the narrator reporting what happened, commending what happened, or giving a pattern to follow?",
    lookFor: "Narrator approval or disapproval, consequences, repeated patterns, direct commands, and later biblical teaching.",
    avoid: "Do not copy every action of a biblical character as if narrative automatically equals command."
  },
  "Identify the Narrator's Theological Emphasis": {
    ask: "What does the narrator want me to notice about God, covenant, sin, faith, judgment, mercy, or leadership?",
    lookFor: "Repetition, pacing, speeches, omissions, inclusions, irony, evaluation statements, and where the story slows down.",
    avoid: "Do not focus only on plot events while missing the narrator's theological guidance."
  },
  "Read OT Narrative Through Christ Responsibly": {
    ask: "How does this story contribute to the biblical storyline that finds its fulfillment in Christ?",
    lookFor: "Promise, covenant, priesthood, kingship, sacrifice, exile, deliverance, temple, faithful remnant, and patterns the New Testament itself develops.",
    avoid: "Do not allegorize every small detail or force Christ-centered meaning in a way that ignores the story's first context."
  },
  "Read Characters Through Contrast, Dialogue, and Development": {
    ask: "How does the narrator evaluate characters through what they say, choose, become, and contrast with others?",
    lookFor: "Dialogue, repeated choices, character pairs, reversals, hidden motives, growth, decline, and consequences.",
    avoid: "Do not make every main character either a simple hero to imitate or villain to reject."
  },
  "Treat Speeches, Prayers, and Songs as Interpretive Clues": {
    ask: "How do speeches, prayers, songs, or blessings explain the meaning of the surrounding story?",
    lookFor: "Covenant summaries, prayers of confession, victory songs, farewell speeches, blessings, curses, and prophetic words.",
    avoid: "Do not skip long speeches or songs as interruptions to the action."
  },
  "Use Historical, Cultural, Political, and Geographical Background Carefully": {
    ask: "What background information clarifies the passage without taking control of it?",
    lookFor: "Ancient customs, geography, tribal locations, royal politics, treaty forms, warfare practices, economics, and archaeology that illuminate the text.",
    avoid: "Do not let background speculation override what the biblical narrator actually says."
  },
  "Reconstruct the Occasion": {
    ask: "What situation likely prompted this letter or paragraph?",
    lookFor: "Problem statements, thanksgiving themes, repeated corrections, named people, travel plans, opponents, and pastoral concerns.",
    avoid: "Do not invent a detailed background story beyond what the letter can reasonably support."
  },
  "Read the Letter as Occasional Communication": {
    ask: "Who is writing, who is receiving the letter, and what situation seems to require this message?",
    lookFor: "Sender, recipients, explicit reports, questions, rebukes, encouragements, pressures, travel plans, and repeated pastoral concerns.",
    avoid: "Do not invent a hidden background story or read the letter as if it dropped from the sky."
  },
  "Understand the Form": {
    ask: "What part of the letter am I reading, and how does that form shape its function?",
    lookFor: "Opening, thanksgiving, prayer, argument, exhortation, warning, household instruction, travel plan, greeting, or benediction.",
    avoid: "Do not read every part of a letter as if it functions the same way."
  },
  "Follow the Whole-Letter Movement": {
    ask: "How does this paragraph fit the opening, prayer, body, major transitions, and closing concerns of the whole letter?",
    lookFor: "Letter form, repeated vocabulary, opening themes, major transitions, theology-to-practice movement, warnings, and final exhortations.",
    avoid: "Do not treat a familiar verse as a stand-alone saying detached from the letter's argument."
  },
  "Trace the Logical Flow of Arguments": {
    ask: "How does each clause or paragraph connect to what comes before and after it?",
    lookFor: "Therefore, for, because, but, so that, if, then, repeated terms, contrasts, grounds, inferences, and commands.",
    avoid: "Do not treat individual verses as detached slogans."
  },
  "Trace the Paragraph Logic": {
    ask: "What is the main point of this paragraph, and how do the surrounding clauses support it?",
    lookFor: "Main verbs, commands, reasons, contrasts, conjunctions, repeated words, subordinate clauses, means, purpose, result, and explanation.",
    avoid: "Do not let grammar study become a word-by-word maze that loses the paragraph's main point."
  },
  "Determine Authorial Intent and Timeless Principles": {
    ask: "What did the author intend this instruction to do for the original readers, and what enduring principle carries forward?",
    lookFor: "The original problem, the author's stated purpose, gospel logic, repeated commands, and principles supported elsewhere in Scripture.",
    avoid: "Do not jump from ancient instruction to modern application without identifying the principle underneath it."
  },
  "Cross the Principlizing Bridge Carefully": {
    ask: "What did this instruction mean there, what principle carries forward, and what faithful application fits here?",
    lookFor: "Original situation, cultural difference, theological rationale, gospel logic, repeated biblical witness, and contemporary parallels.",
    avoid: "Do not copy ancient applications woodenly or skip straight to modern advice without the author's reason."
  },
  "Read the Whole Letter Before the Passage": {
    ask: "How does this paragraph serve the message of the whole letter?",
    lookFor: "Opening themes, repeated vocabulary, major transitions, summary statements, commands grounded in doctrine, and closing concerns.",
    avoid: "Do not let a familiar paragraph set its own agenda apart from the letter's larger argument."
  },
  "Reconstruct the Situation Carefully": {
    ask: "What can I know about the audience's situation from the letter itself?",
    lookFor: "Explicit reports, questions answered by the author, rebukes, encouragements, named conflicts, and repeated pastoral burdens.",
    avoid: "Do not build interpretation on a speculative mirror-reading of every phrase."
  },
  "Recognize Rhetorical Forms": {
    ask: "What persuasive form is the writer using to move the readers?",
    lookFor: "Diatribe, questions and answers, vice and virtue lists, household codes, hymns, creeds, slogans, examples, and appeals.",
    avoid: "Do not flatten persuasive strategy into bare information."
  },
  "Recognize Rhetorical and Literary Forms": {
    ask: "What literary or rhetorical form is shaping how this passage persuades, teaches, or emphasizes its point?",
    lookFor: "Chiasm, inclusio, topoi, question-answer, defense, comparison, typology, vice and virtue lists, household codes, hymns, repetition, personification, doxology, benediction, and greetings.",
    avoid: "Do not treat rhetorical forms as decorative trivia or force a technical label where the passage gives no clear evidence."
  },
  "Trace Grammar, Clauses, and Sentence Logic": {
    ask: "Which clause carries the main idea, and which clauses support it?",
    lookFor: "Main verbs, subordinate clauses, participles, infinitives, prepositional phrases, conjunctions, and repeated grammatical patterns.",
    avoid: "Do not let long sentences blur the difference between main point and support."
  },
  "Let Gospel Indicatives Ground Ethical Imperatives": {
    ask: "What has God done in Christ, and how does that ground the command?",
    lookFor: "Statements of grace, union with Christ, identity language, mercy, redemption, Spirit, then commands, exhortations, and ethical appeals.",
    avoid: "Do not turn apostolic commands into moralism detached from the gospel."
  },
  "Let Gospel Indicatives Ground Imperatives": {
    ask: "What has God done in Christ, and how does that ground the command?",
    lookFor: "Grace, mercy, union with Christ, identity language, redemption, Spirit, then commands, exhortations, and ethical appeals.",
    avoid: "Do not turn apostolic commands into self-improvement or moral pressure detached from the gospel."
  },
  "Apply to the Church, Not Only Isolated Individuals": {
    ask: "How would this passage form a community, not just a private reader?",
    lookFor: "Plural commands, one-another language, church order, unity, worship, witness, shared holiness, and corporate identity in Christ.",
    avoid: "Do not shrink every epistle application into individual advice with no church-shaped obedience."
  },
  "Recognize the Traditional Distinctions": {
    ask: "What kind of law am I reading, and how has it functioned in biblical theology?",
    lookFor: "Moral, ceremonial, civil, purity, sacrificial, social, and worship-related instructions.",
    avoid: "Do not apply every Old Testament law in the same direct way."
  },
  "Principlize for Contemporary Application": {
    ask: "What enduring moral, theological, or worship principle stands behind this law?",
    lookFor: "God's character, neighbor love, justice, holiness, worship, mercy, covenant identity, and social protection.",
    avoid: "Do not ignore the law as obsolete or apply it without considering covenant fulfillment in Christ."
  },
  "Start with Values Before Laws": {
    ask: "What value does this command protect, teach, or train?",
    lookFor: "Life, worship, justice, faithfulness, holiness, rest, compassion, truth, purity, and protection of the vulnerable.",
    avoid: "Do not reduce law interpretation to a checklist of ancient regulations."
  },
  "Know the Form of the Law": {
    ask: "What legal form is being used, and how does that form communicate wisdom?",
    lookFor: "Apodictic commands, case laws, penalties, motive clauses, covenant stipulations, and repeated legal formulas.",
    avoid: "Do not miss how form changes the way a law teaches."
  },
  "Treat the Ten Commandments as Value Centers": {
    ask: "What larger moral world does this command summarize?",
    lookFor: "Love for God, love for neighbor, worship, truth, fidelity, life, contentment, family, and social trust.",
    avoid: "Do not limit each commandment to the narrowest possible wording."
  },
  "Use Progressive Moral Wisdom": {
    ask: "How does the Bible move this issue toward God's fuller moral intention?",
    lookFor: "Creation design, concessions to hardness, prophetic critique, Jesus' teaching, apostolic fulfillment, and love as the law's goal.",
    avoid: "Do not confuse a regulated ancient practice with God's ideal."
  },
  "Distinguish Regulation from Endorsement": {
    ask: "Is the law approving this practice or limiting harm in a fallen social setting?",
    lookFor: "Protective limits, penalties, rights for the vulnerable, comparison with surrounding cultures, and later biblical correction.",
    avoid: "Do not assume that because Scripture regulates something, it morally celebrates it."
  },
  "Carry the Law Forward Through Christlike Love": {
    ask: "How does Christ fulfill, deepen, or redirect this law toward love of God and neighbor?",
    lookFor: "Jesus' teaching, the cross, Spirit-formed obedience, mercy, justice, holiness, and apostolic moral instruction.",
    avoid: "Do not use the law in a way that bypasses Christ or neglects love."
  },
  "Seek the Central Truth (Avoid Over-Allegorizing)": {
    ask: "What main point is the parable pressing on its hearers?",
    lookFor: "The central conflict, final punch, surprising reversal, repeated emphasis, and response demanded.",
    avoid: "Do not assign a symbolic meaning to every object, animal, coin, road, or minor detail."
  },
  "Identify the Original Audience and Occasion": {
    ask: "Who first heard this parable, and what prompted Jesus to tell it?",
    lookFor: "Pharisees, disciples, crowds, tax collectors, opponents, questions, complaints, and surrounding conflict.",
    avoid: "Do not read the parable as a generic story detached from its Gospel setting."
  },
  "Look for the \"Hook\" or Unexpected Twist": {
    ask: "Where does the story surprise, expose, reverse, or confront the audience?",
    lookFor: "Unexpected hero, shocking mercy, exaggerated debt, reversal of status, delayed justice, and uncomfortable ending.",
    avoid: "Do not domesticate the parable so it loses its edge."
  },
  "Read the Parable in its Gospel Context": {
    ask: "How does this parable contribute to the Gospel writer's larger portrait of Jesus and the kingdom?",
    lookFor: "Nearby miracles, conflicts, teaching blocks, journey settings, audience reactions, and repeated kingdom themes.",
    avoid: "Do not move the parable into a different context before listening to its present one."
  },
  "Identify the Main Characters and Main Points": {
    ask: "Which characters carry the main comparison or contrast?",
    lookFor: "Primary actors, repeated actions, final speeches, contrasting responses, and the character who receives the story's weight.",
    avoid: "Do not make every minor character or prop equally important."
  },
  "Understand the Cultural World of the Story": {
    ask: "What cultural detail would the first hearers have recognized immediately?",
    lookFor: "Honor and shame, land ownership, debt, patronage, shepherding, weddings, banquets, servants, inheritance, and purity customs.",
    avoid: "Do not impose modern assumptions on ancient social scenes."
  },
  "Notice Contrast, Reversal, and Exaggeration": {
    ask: "How does the parable use contrast or exaggeration to reveal the kingdom?",
    lookFor: "Great vs. small, lost vs. found, insider vs. outsider, expected vs. unexpected, huge debts, lavish mercy, and sharp reversals.",
    avoid: "Do not smooth out the exaggeration as if Jesus were telling a flat realistic anecdote."
  },
  "Do Not Build Doctrine from Incidental Details": {
    ask: "Is this detail central to the parable's point or just part of the story world?",
    lookFor: "Details explained by Jesus, repeated features, plot-driving details, and connections to the main punch.",
    avoid: "Do not build major doctrine from decorative or incidental details."
  },
  "Let the Parable Demand a Response": {
    ask: "What response does this parable demand from its hearers and from me?",
    lookFor: "Repentance, faith, mercy, watchfulness, humility, forgiveness, generosity, joy, or costly discipleship.",
    avoid: "Do not leave a parable as an interesting story without receiving its summons."
  },
  "First Identify the Kind of Prophecy": {
    ask: "What kind of prophetic material am I reading?",
    lookFor: "Covenant lawsuit, oracle of judgment, promise of restoration, messianic hope, symbolic vision, apocalyptic sequence, or call to repentance.",
    avoid: "Do not interpret all prophetic passages with one method."
  },
  "Let Classical Prophecy Function as Covenant Lawsuit": {
    ask: "How is the prophet prosecuting covenant faithfulness or unfaithfulness?",
    lookFor: "Charges, witnesses, covenant blessings and curses, idolatry, injustice, call to return, and announced judgment.",
    avoid: "Do not skip the covenant context and turn every oracle straight into end-time prediction."
  },
  "Watch for Conditional Prophecy": {
    ask: "Does the prophecy include or imply a condition tied to repentance or rebellion?",
    lookFor: "If/then language, calls to repent, delayed judgment, narrative response, and examples like Jonah or Jeremiah 18.",
    avoid: "Do not treat every announced outcome as mechanically unconditional."
  },
  "Recognize Near-View and Far-View Fulfillment": {
    ask: "Is this prophecy fulfilled in stages, with an immediate horizon and a fuller future horizon?",
    lookFor: "Historical fulfillment, later biblical reuse, messianic development, already/not-yet patterns, and language bigger than the first event.",
    avoid: "Do not collapse every fulfillment into only the prophet's day or only the distant future."
  },
  "Let Scripture Decode Prophetic Symbols": {
    ask: "How does Scripture itself use or explain this symbol?",
    lookFor: "Repeated biblical images, angelic explanations, Old Testament echoes, sanctuary imagery, beasts, horns, mountains, waters, stars, and lampstands.",
    avoid: "Do not assign meanings from imagination, headlines, or private association before checking biblical usage."
  },
  "Trace Old Testament Quotations, Citations, Allusions, and Echoes": {
    ask: "What earlier Scripture is this prophecy reusing, and how does that earlier context shape the meaning here?",
    lookFor: "Direct quotations, named sources, rare phrases, shared images, covenant language, Exodus or creation language, sanctuary terms, Daniel/Revelation links, and repeated Old Testament story patterns.",
    avoid: "Do not treat every verbal similarity as certain proof or ignore a clear Old Testament background when the prophecy depends on it."
  },
  "Use the Historicist Framework for Daniel and Revelation": {
    ask: "How does this vision trace history from the prophet's time toward God's final kingdom?",
    lookFor: "Sequential kingdoms, symbolic beasts or metals, sanctuary scenes, judgment, persecution, and movement toward final restoration.",
    avoid: "Do not detach Daniel and Revelation from their own symbolic sequences."
  },
  "Follow the Continuous Historical Sequence": {
    ask: "What comes before and after this symbol or scene in the prophetic sequence?",
    lookFor: "Numbered visions, repeated timelines, transitions, angelic interpretation, kingdom succession, and chronological markers.",
    avoid: "Do not rearrange symbols randomly to fit a preferred system."
  },
  "Use Recapitulation: Repeat and Enlarge": {
    ask: "Is this vision retelling the same period from a new angle with added detail?",
    lookFor: "Repeated endpoints, repeated enemies, similar sequences, expanded symbols, and scenes that revisit earlier ground.",
    avoid: "Do not assume every new vision starts after the previous one chronologically."
  },
  "Recognize Literary and Rhetorical Design": {
    ask: "How does the prophet's literary design shape the message before I build a timeline or decode symbols?",
    lookFor: "Chiasm, inclusio, repeated cycles, parallel scenes, contrast pairs, throne hymns, woe oracles, taunts, symbolic actions, interpreting angels, repeated words, and Old Testament echoes.",
    avoid: "Do not treat structure as a secret code or ignore literary design while collecting isolated symbols."
  },
  "Apply the Day-Year Principle Carefully": {
    ask: "Does this symbolic time period belong to apocalyptic prophecy where the day-year principle is appropriate?",
    lookFor: "Symbolic context, apocalyptic setting, parallel time periods, historical scope, and internal biblical precedent.",
    avoid: "Do not apply the day-year principle everywhere without genre and context controls."
  },
  "Keep Christ, the Sanctuary, and the Great Controversy at the Center": {
    ask: "How does this prophecy reveal Christ's victory, priestly ministry, judgment, and final restoration?",
    lookFor: "Lamb, Son of Man, priestly scenes, sanctuary imagery, judgment, worship, cosmic conflict, perseverance, and new creation.",
    avoid: "Do not make prophecy mainly about speculation while Christ and faithful witness move to the margins."
  },
  "Identify the Wisdom Form Before Applying It": {
    ask: "What wisdom form am I reading, and how does that form teach?",
    lookFor: "Proverb, dialogue, lament, poem, instruction, numerical saying, acrostic, riddle, or reflection.",
    avoid: "Do not apply Job, Proverbs, Ecclesiastes, and Song of Songs with one identical method."
  },
  "Read Proverbs as General Wisdom, Not Mechanical Promises": {
    ask: "What pattern of wise living does this proverb teach?",
    lookFor: "Contrast, comparison, cause and effect, character patterns, repeated themes, and life-order observations.",
    avoid: "Do not treat every proverb as an unconditional guarantee."
  },
  "Keep the Fear of the Lord at the Center": {
    ask: "How does this passage train reverence, trust, humility, and obedience before God?",
    lookFor: "Fear of the Lord, wisdom vs. folly, humility, teachability, discipline, righteousness, and dependence on God.",
    avoid: "Do not turn biblical wisdom into secular self-improvement advice."
  },
  "Pay Attention to Context and Speaker": {
    ask: "Who is speaking, and how should that voice be evaluated in context?",
    lookFor: "Job's friends, divine speeches, the Teacher in Ecclesiastes, parental instruction, bride and groom voices, and narrative framing.",
    avoid: "Do not quote every speaker as if every statement has the same authority or perspective."
  },
  "Let the Wisdom Books Balance One Another": {
    ask: "How do other wisdom books qualify, deepen, or balance this passage?",
    lookFor: "Proverbs' order, Job's suffering, Ecclesiastes' limits, Song's embodied love, and Psalms' worshipful wisdom.",
    avoid: "Do not force one wisdom text to say everything the Bible says about the topic."
  },
  "Read the Poetry Carefully": {
    ask: "How does poetic form shape this wisdom text?",
    lookFor: "Parallelism, imagery, repetition, metaphor, acrostic, rhetorical questions, and emotional movement.",
    avoid: "Do not flatten wisdom poetry into prose advice."
  },
  "Apply Wisdom as Character Formation": {
    ask: "What kind of person is this text training me to become before God?",
    lookFor: "Habits, desires, speech, work, friendship, sexuality, money, justice, patience, discipline, and worship.",
    avoid: "Do not reduce wisdom to quick tips while missing long-term formation."
  }
};

methodGuidanceByTitle = {
  "Set the passage limits": {
    ask: "What unit am I tracing, and does it have a clear beginning and ending?",
    lookFor: "Paragraph breaks, repeated words, shifts in topic, sentence boundaries, and discourse markers.",
    avoid: "Do not start with a unit so large that the logic becomes impossible to follow."
  },
  "Divide the text into workable lines": {
    ask: "Where does one meaningful thought end and the next begin?",
    lookFor: "Verbs, clauses, conjunctions, purpose phrases, reasons, contrasts, and repeated units.",
    avoid: "Do not make every word its own line or keep a long sentence as one unexamined block."
  },
  "Find the main clauses": {
    ask: "Which lines can stand on their own and carry the backbone of the thought?",
    lookFor: "Main verbs, subjects, imperatives, independent clauses, and clauses other lines depend on.",
    avoid: "Do not let supporting phrases replace the author's main assertion or command."
  },
  "Label the relationships": {
    ask: "How does this line relate to the line before it or the unit above it?",
    lookFor: "Ground, inference, contrast, means, manner, purpose, result, condition, explanation, and series.",
    avoid: "Do not label relationships mechanically from conjunctions alone."
  },
  "Summarize the argument": {
    ask: "Can I explain the flow of the passage in one clear sentence?",
    lookFor: "Main idea, supporting reason, means, purpose, result, contrast, and final pastoral force.",
    avoid: "Do not finish with a diagram that cannot become a plain-language summary."
  },
  "Main Clause": {
    ask: "Can this clause make sense as the backbone of the sentence?",
    lookFor: "A subject and main verb that can stand without another clause completing it.",
    avoid: "Do not bury the main clause under interesting but supporting details."
  },
  "Subordinate Clause": {
    ask: "Does this clause lean on another clause to complete its meaning?",
    lookFor: "Because, although, when, if, so that, who, which, that, and other dependent markers.",
    avoid: "Do not treat a dependent clause as if it carries the same weight as the main clause."
  },
  "Phrase": {
    ask: "What word, clause, or idea does this phrase support?",
    lookFor: "Prepositional phrases, participial phrases, infinitive phrases, modifiers, and repeated phrase patterns.",
    avoid: "Do not detach a phrase from the line it modifies."
  },
  "Conjunction": {
    ask: "What clue does this connector give about the relationship?",
    lookFor: "For, therefore, but, and, so that, because, if, when, since, although, and similarly.",
    avoid: "Do not assume one conjunction always means the same relationship."
  },
  "Modifier": {
    ask: "What does this word or phrase describe, qualify, or limit?",
    lookFor: "Adjectives, adverbs, appositions, prepositional phrases, participles, and relative clauses.",
    avoid: "Do not let modifiers float without attaching them to the right anchor."
  },
  "Verb": {
    ask: "What action, state, or verbal idea drives this line?",
    lookFor: "Finite verbs, imperatives, participles, infinitives, and repeated verbal actions.",
    avoid: "Do not divide a line without first noticing its verb."
  },
  "Subject": {
    ask: "Who or what is doing the action or being described?",
    lookFor: "Nouns, pronouns, implied subjects in commands, and subject changes.",
    avoid: "Do not separate a subject from its verb unless the structure really requires it."
  },
  "Object": {
    ask: "What receives the action of the verb?",
    lookFor: "Direct objects, indirect objects, complements, and object phrases.",
    avoid: "Do not detach normal objects from the verbs they complete."
  },
  "Infinitive": {
    ask: "Is this infinitive giving a purpose, result, or complement?",
    lookFor: "To plus verb forms, especially when they explain the aim of an action.",
    avoid: "Do not assume every infinitive has the same function."
  },
  "Participle": {
    ask: "Does this -ing idea describe, explain, or support the main action?",
    lookFor: "Adverbial, adjectival, or nominal uses and clues of time, manner, means, or cause.",
    avoid: "Do not give a participle the force of the main verb too quickly."
  },
  "Relative Clause": {
    ask: "What noun or idea does this clause identify or explain?",
    lookFor: "Who, whom, whose, which, and that clauses tied to an anchor noun.",
    avoid: "Do not read a relative clause without finding its anchor."
  },
  "Prepositional Phrase": {
    ask: "What relationship does this phrase show, and what does it attach to?",
    lookFor: "By, in, with, through, for, from, to, under, according to, and similar phrases.",
    avoid: "Do not break off every prepositional phrase just to make the diagram look detailed."
  },
  "Choose a short unit": {
    ask: "Is this passage small enough for a beginner arc?",
    lookFor: "One sentence, one paragraph, or one compact argument with clear boundaries.",
    avoid: "Do not begin arcing with a long chapter when one paragraph would teach the method better."
  },
  "Divide the unit into propositions": {
    ask: "What lines state complete verbal ideas?",
    lookFor: "Commands, assertions, reasons, contrasts, results, and purpose clauses.",
    avoid: "Do not split so finely that the thought becomes fragmented."
  },
  "Pair the nearest related lines": {
    ask: "Which two lines most clearly belong together first?",
    lookFor: "A command with its reason, a statement with its explanation, or two balanced lines in a series.",
    avoid: "Do not try to solve the whole arc before grouping the closest relationships."
  },
  "Decide whether the relationship is coordinate or subordinate": {
    ask: "Do these lines stand beside each other, or does one support the other?",
    lookFor: "Series, progression, alternative, ground, inference, means, purpose, result, and concession.",
    avoid: "Do not treat every pair as equal when one line is clearly serving another."
  },
  "Draw and label curved arcs": {
    ask: "What label best explains why these lines are connected?",
    lookFor: "Small arcs first, then larger arcs that connect units into the paragraph's full flow.",
    avoid: "Do not draw arcs as decoration; every arc should answer a logic question."
  },
  "List the propositions": {
    ask: "What are the numbered thought-units I need to bracket?",
    lookFor: "Verbal ideas, commands, reasons, contrasts, explanations, and purpose/result clauses.",
    avoid: "Do not bracket before the lines are clear enough to discuss."
  },
  "Group the closest relationships first": {
    ask: "Which nearby lines form the smallest meaningful unit?",
    lookFor: "Command-reason pairs, contrast pairs, explanation pairs, series, and cause-result movement.",
    avoid: "Do not start with the largest bracket before the small relationships are visible."
  },
  "Label each bracket": {
    ask: "What does this bracketed unit do?",
    lookFor: "Ground, inference, means, contrast, purpose, result, explanation, condition, and series.",
    avoid: "Do not leave brackets unlabeled if the goal is understanding."
  },
  "Stack smaller brackets into larger brackets": {
    ask: "How do the smaller units combine into the passage's larger movement?",
    lookFor: "Units that support, explain, contrast, or advance the main idea together.",
    avoid: "Do not keep small brackets disconnected from the paragraph's overall logic."
  },
  "Notice the main bracket": {
    ask: "Which bracket shows the passage's biggest movement?",
    lookFor: "The largest support relationship, the main appeal, the final inference, or the controlling contrast.",
    avoid: "Do not let minor brackets distract from the passage's main point."
  },
  "Turn the bracket into an outline": {
    ask: "How can this structure become a simple teaching or study outline?",
    lookFor: "Main point, subpoints, reasons, means, purpose, and pastoral response.",
    avoid: "Do not make an outline that ignores the brackets you just traced."
  },
  "Establish the limits of the passage": {
    ask: "What unit should be phrased, and why does it belong together?",
    lookFor: "Paragraph divisions, sentence boundaries, repeated terms, conjunctions, and topic shifts.",
    avoid: "Do not phrase too much text before learning the indentation pattern."
  },
  "Divide the passage into propositions and phrases": {
    ask: "Which parts should become separate lines for clarity?",
    lookFor: "Main clauses, subordinate clauses, prepositional phrases, participles, infinitives, and repeated phrases.",
    avoid: "Do not preserve the paragraph as one block when the structure needs to be seen."
  },
  "Identify the main clauses": {
    ask: "Which lines should stay farthest left because they carry the main thought?",
    lookFor: "Independent clauses, main commands, main assertions, and verbs other clauses depend on.",
    avoid: "Do not indent the main clause under its own support."
  },
  "Indent subordinate clauses and phrases": {
    ask: "What does this supporting line modify or explain?",
    lookFor: "Grounds, means, purposes, results, conditions, explanations, and descriptive phrases.",
    avoid: "Do not indent randomly; every indentation should show attachment."
  },
  "Line up parallel words or phrases": {
    ask: "What repeated or balanced elements should line up visually?",
    lookFor: "Series, repeated commands, matched phrases, contrasts, and recurring grammatical forms.",
    avoid: "Do not hide parallel structure by placing matching lines at unrelated levels."
  },
  "Add relationship labels": {
    ask: "What is the function of this indented or aligned line?",
    lookFor: "Ground, means, manner, purpose, result, explanation, content, comparison, negative, and series.",
    avoid: "Do not label before you have observed the grammar and attachment."
  },
  "Use a form-based translation if helpful": {
    ask: "Would a more literal translation reveal the grammar more clearly?",
    lookFor: "Repeated words, conjunctions, participles, infinitives, relative clauses, and clause order.",
    avoid: "Do not depend on one translation if the structure remains unclear."
  },
  "Draft a provisional outline": {
    ask: "How does the phrase diagram turn into a clear summary of the passage?",
    lookFor: "Main clause, supports, repeated patterns, relationship labels, and the final movement of thought.",
    avoid: "Do not make the outline final too soon; revise it as the diagram becomes clearer."
  }
};

const sourceCredits = [
  "Biblearc.com - arcing, bracketing, phrasing, and argument-diagramming resources",
  "Biblical Hermeneutics - Frank M. Hasel",
  "Canonical Theology: The Biblical Canon, Sola Scriptura, and Theological Method - John C. Peckham",
  "Grasping God's Word, Fourth Edition - J. Scott Duvall and J. Daniel Hays",
  "Hermeneutical Spiral: A Comprehensive Introduction to Biblical Interpretation - Grant R. Osborne",
  "How to Read the Bible for All Its Worth - Gordon D. Fee and Douglas Stuart",
  "How to Understand and Apply the New Testament: Twelve Steps from Exegesis to Theology - Andrew David Naselli",
  "How to Understand and Apply the Old Testament: Twelve Steps from Exegesis to Theology - Jason S. DeRouchie",
  "Introduction to Biblical Hermeneutics: The Search for Meaning - Walter C. Kaiser Jr. and Moises Silva",
  "Old Testament Law for Christians - Roy E. Gane",
  "The Art of Biblical Poetry - Robert Alter",
  "The Desire of Ages - Ellen G. White",
  "The Wisdom of Proverbs, Job and Ecclesiastes - Derek Kidner",
  "Thoughts from the Mount of Blessing - Ellen G. White",
  "Understanding Scripture: An Adventist Approach - George W. Reid, ed.",
].sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }));

const CreditsSourcesPage = () => {
  return (
    <div className="animate-in fade-in duration-500">
      <div className="mb-8">
        <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 17</div>
        <H1>Credits & Sources</H1>
      </div>

      <P>
        These are the resources directly cited, quoted, or used in this website.
      </P>

      <ol className="bg-white border border-slate-200 rounded-2xl shadow-sm divide-y divide-slate-100 overflow-hidden my-8">
        {sourceCredits.map((title) => (
          <li key={title} className="p-4 text-slate-700 leading-relaxed">
            {title}
          </li>
        ))}
      </ol>
    </div>
  );
};

const pages = [
  {
    id: 'start-here',
    sectionNum: '1',
    title: 'Start Here',
    icon: Compass,
    content: StartHerePage
  },
  {
    id: 'beginner-path',
    sectionNum: '1.1',
    title: 'Beginner Path',
    icon: Compass,
    isSubSection: true,
    content: ({ navigate }) => <LearningPathPage level="beginner" navigate={navigate} />
  },
  {
    id: 'intermediate-path',
    sectionNum: '1.2',
    title: 'Intermediate Path',
    icon: Clipboard,
    isSubSection: true,
    content: ({ navigate }) => <LearningPathPage level="intermediate" navigate={navigate} />
  },
  {
    id: 'advanced-path',
    sectionNum: '1.3',
    title: 'Advanced Path',
    icon: ListTree,
    isSubSection: true,
    content: ({ navigate }) => <LearningPathPage level="advanced" navigate={navigate} />
  },
  {
    id: 'intro',
    sectionNum: '2',
    title: 'General Hermeneutics',
    icon: BookOpen,
    content: ({ navigate }) => (
      <div className="animate-in fade-in duration-500">
        <div className="mb-8">
          <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 2</div>
          <H1>General Hermeneutics</H1>
        </div>
        
        <H2>Overview: The Art and Science of Biblical Interpretation</H2>
        <P>
          Welcome to the foundational guide on biblical interpretation. The term <GlossaryTerm term="Hermeneutics">hermeneutics</GlossaryTerm> refers to the art and science of interpreting the Scriptures. As Walter C. Kaiser Jr. and Moisés Silva define it in <em className="italic">Introduction to Biblical Hermeneutics</em>, it is the discipline that seeks to bridge the gap between the ancient text and the modern reader. It is considered a <em className="italic">science</em> because it is governed by structured, observable rules and methodologies; it is an <em className="italic">art</em> because its application requires flexibility, spiritual sensitivity, and thoughtful imagination.
        </P>
        
        <div className="bg-indigo-900 text-white p-6 rounded-2xl mb-8 shadow-lg">
          <strong className="text-yellow-400 block text-xl mb-2 flex items-center gap-2"><BookOpen className="w-5 h-5"/> Who Controls the Meaning?</strong>
          <p className="text-indigo-100 mb-4 leading-relaxed">When approaching the Bible, there are two primary approaches to meaning: <GlossaryTerm term="Authorial Intent" variant="dark">Authorial Intent</GlossaryTerm> (the author determines the meaning) and <GlossaryTerm term="Reader Response" variant="dark">Reader Response</GlossaryTerm> (the reader determines the meaning based on their feelings). Because the Bible is the Word of God, we must absolutely reject Reader Response and fiercely pursue Authorial Intent. We do not <em>create</em> meaning; we seek to <em>discover</em> the meaning placed there by the Holy Spirit and the human author.</p>
          <div className="bg-indigo-950 p-3 rounded-xl border border-indigo-800 text-sm italic text-indigo-200">
            <strong>Example:</strong> If a student reads Philippians 4:13 ("I can do all things through Christ...") and decides it means they will win a football game (Reader Response), they miss Paul's actual intent about finding supernatural contentment during starvation and poverty in a Roman prison (Authorial Intent).
          </div>
        </div>

        <P>
          When we read the Bible, we are separated from its original authors by vast chasms of time, culture, geography, and language. A sound hermeneutical methodology is vital because it builds a bridge across these gaps, preventing us from twisting the text to fit our own modern biases.
        </P>

        <GeneralHermeneuticsLevelCards navigate={navigate} compact />
        
        <Quote>
          <p className="mb-2">"The primary goal of biblical hermeneutics is to discover the author's intended meaning. We do not create meaning; we seek to discover the meaning that the Holy Spirit and the human author placed into the text."</p>
          <footer className="text-sm font-bold text-indigo-800">— J. Scott Duvall and J. Daniel Hays, Grasping God's Word</footer>
        </Quote>

        <H2>The Inductive Bible Study Method</H2>
        <P>Faithful biblical exegesis is not a random exercise; it is a systematic journey. The gold standard for studying Scripture is the <GlossaryTerm term="Inductive Study">Inductive Bible Study</GlossaryTerm> method.</P>
        
        <div className="bg-slate-100 p-6 rounded-2xl border border-slate-200 mb-8 text-sm shadow-inner">
          <strong className="text-indigo-900 block text-lg mb-2">Inductive vs. Deductive Reading</strong>
          <p className="text-slate-700 mb-3">A <GlossaryTerm term="Deductive Study">deductive</GlossaryTerm> Bible study begins with a theological point that a person is trying to make, and then searches for scripture verses and examples to support that preconceived conclusion. An <GlossaryTerm term="Inductive Study">inductive</GlossaryTerm> Bible study begins with the raw text of Scripture, encouraging the reader to draw conclusions directly from what the text itself says.</p>
          <p className="text-slate-700 italic border-l-4 border-indigo-400 pl-3">
            As John Peckham notes in Canonical Theology, we must "suspend presuppositions in those areas that might be reasonably expected to impinge upon the study in the attempt to let the text speak for itself rather than being forced into an alien mold." This requires "a commitment to self-examination, self-criticism, and willingness to follow the canonical data wherever it leads." Because preconceptions will always remain, the hermeneutical spiral is never truly complete!
          </p>
        </div>

        <P>The Inductive Method is built upon four foundational pillars: <GlossaryTerm term="Observation">Observation</GlossaryTerm>, <GlossaryTerm term="Interpretation">Interpretation</GlossaryTerm>, <GlossaryTerm term="Imagination">Imagination</GlossaryTerm>, and <GlossaryTerm term="Application">Application</GlossaryTerm>.</P>

        <div className="space-y-8 mt-8 mb-12">
          
          {/* PREUNDERSTANDING */}
          <div className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
            <div className="bg-rose-50 border-b border-rose-100 px-6 py-4 flex items-center gap-3">
              <Eye className="w-6 h-6 text-rose-600" />
              <h3 className="text-xl font-bold text-rose-950 m-0">Phase 1: Preparation</h3>
            </div>
            <div className="p-6">
              <p className="text-slate-600 mb-5 font-medium italic border-l-4 border-rose-400 pl-3">The foundational reality: We are not neutral or objective readers.</p>

              <div className="flex items-start gap-4 mb-6">
                <div className="bg-rose-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">1</div>
                <div>
                  <strong className="text-slate-800 block text-lg mb-1">Prayer & Illumination</strong>
                  <p className="text-sm text-slate-600 leading-relaxed">The Bible is not merely a historical document; it is spiritually discerned. Always begin your study by asking the Holy Spirit to remove your biases, illuminate your mind, and open your eyes to the objective reality of the text.</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="bg-rose-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">2</div>
                <div className="w-full">
                  <strong className="text-slate-800 block text-lg mb-2">Cultural Baggage & The Interpretational Reflex</strong>
                  <p className="text-sm text-slate-600 leading-relaxed mb-4">We bring preconceived notions, Sabbath school lessons, pop culture, and personal agendas to the text. Our "interpretational reflex" is the automatic transportation of the biblical text into our cultural world. Pride encourages us to think we have the correct meaning before making the effort to recover it. We must consciously submit our <GlossaryTerm term="Preunderstanding">preunderstanding</GlossaryTerm> to the text!</p>
                  <div className="bg-rose-50 p-4 rounded-xl border border-rose-100 text-sm text-slate-700 shadow-sm">
                    <strong className="text-rose-900 block mb-1">Example of Cultural Baggage:</strong>
                    Western readers are steeped in deep individualism. When an American reads 1 Corinthians 3:16, "You are God's temple," they almost always assume "you" means their individual physical body. But in the original Greek, "you" is plural (y'all)! Paul is saying the <em>corporate church community</em> is God's temple. Our cultural lens blinded us to the text's communal reality.
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* OBSERVATION */}
          <div className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
            <div className="bg-sky-50 border-b border-sky-100 px-6 py-4 flex items-center gap-3">
              <Search className="w-6 h-6 text-sky-600" />
              <h3 className="text-xl font-bold text-sky-950 m-0">Phase 2: Observation</h3>
            </div>
            <div className="p-6">
              <p className="text-slate-600 mb-5 font-medium italic border-l-4 border-sky-400 pl-3">The foundational question: "What does the text actually say?"</p>
              <ul className="space-y-5">
                <li className="flex items-start gap-4">
                  <div className="bg-sky-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">3</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-lg mb-1">Lexical & Syntactical Analysis (Grammar & Structure)</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-5">In order to accurately observe the scriptures, you must look closely at the actual words. Meticulously map out the grammatical structure, look for patterns, and note the author's flow of thought.</p>
                    
                    <div className="w-full space-y-3">
                      <GrammarDropdown title="Bible Translations (Formal vs. Functional)">
                        <p className="mb-2"><strong className="text-slate-800">The Challenge:</strong> Translation transfers a message from a source language (Hebrew/Greek) into a receptor language (English). Because no two languages are identical in structure or vocabulary, translators must choose a philosophy.</p>
                        <p className="mb-2"><strong className="text-slate-800">Formal Approach (Literal):</strong> Stays as close to the structure and words of the source language as possible. Great for deep study, but can be clunky to read.</p>
                        <p className="mb-2"><strong className="text-slate-800">Functional Approach (Thought-for-thought):</strong> Expresses the meaning of the original text in smooth, contemporary English. Great for devotional reading, but may lose structural nuances.</p>
                        <p className="italic text-sky-800 border-l-2 border-sky-300 pl-3 mt-3"><strong>Example:</strong> The ESV, NASB, and KJV are <em>Formal</em> translations. The NLT and NIV lean more toward <em>Functional</em> translations. (Note: A paraphrase like "The Message" is a restatement of an English translation, not a direct translation from original languages, and should not be used for rigorous inductive study).</p>
                      </GrammarDropdown>

                      <GrammarDropdown title="The 5 W's and How">
                        <p className="mb-2"><strong className="text-slate-800">The Core Questions:</strong> As you read, actively ask: <strong>who</strong> (who are the people?), <strong>what</strong> (what are the events/arguments?), <strong>when, where, why, and how?</strong></p>
                        <p className="italic text-sky-800 border-l-2 border-sky-300 pl-3 mt-2 mb-4"><strong>Example:</strong> In John 3:1-2, asking these questions reveals crucial details: <strong>Who?</strong> Nicodemus, a Pharisee. <strong>When?</strong> By night. <strong>What?</strong> He came to speak to Jesus. Noting "by night" (the <em>when</em>) is a key observation that might suggest he was afraid of being seen by other Jewish leaders.</p>
                      </GrammarDropdown>

                      <GrammarDropdown title="Repeated & Related Words">
                        <p className="mb-2"><strong className="text-slate-800">How to identify:</strong> Scan the passage for exact words, root words, or <strong>similar, related words based upon the textual setting</strong>.</p>
                        <p className="mb-2"><strong className="text-slate-800">Why it matters:</strong> Repetition is the biblical author's highlighter. It reveals the primary theme, theological focus, or urgency of the passage.</p>
                        <p className="italic text-sky-800 border-l-2 border-sky-300 pl-3 mt-3"><strong>Example:</strong> In John 15:1-11, the word "abide" (or "remain") is repeated 11 times, making it the undeniable central theme of the passage.</p>
                      </GrammarDropdown>

                      <GrammarDropdown title="Comparisons, Contrasts, & Opposites">
                        <p className="mb-2"><strong className="text-slate-800">Comparisons:</strong> Look for elements that are alike or similar using words like <em>like, as, even as, too, also, moreover</em>.</p>
                        <p className="mb-2"><strong className="text-slate-800">Contrasts:</strong> Look for elements that are dissimilar using words like <em>but, yet</em>. Watch for conceptual <strong>opposites</strong> based on the textual setting (e.g., light vs. dark).</p>
                        <p className="italic text-sky-800 border-l-2 border-sky-300 pl-3 mt-3"><strong>Example:</strong> "For the wages of sin is death, <strong>but</strong> the free gift of God is eternal life" (Romans 6:23). This verse uses a powerful double contrast, contrasting "wages" with "free gift" and "death" with "eternal life."</p>
                      </GrammarDropdown>

                      <GrammarDropdown title="Cause & Effect and Purpose">
                        <p className="mb-2"><strong className="text-slate-800">Cause and Effect:</strong> Look for one event or action that causes another. Key terms: <em>therefore, so, then, as a result, that</em>.</p>
                        <p className="mb-2"><strong className="text-slate-800">Purpose:</strong> Look for a declaration of the author's intentions (e.g., "in order that").</p>
                        <p className="italic text-sky-800 border-l-2 border-sky-300 pl-3 mt-3"><strong>Example:</strong> "For God so loved the world <strong>[Cause]</strong>, <strong>that</strong> he gave his only Son <strong>[Effect]</strong>, <strong>that</strong> whoever believes in him should not perish but have eternal life <strong>[Purpose]</strong>" (John 3:16).</p>
                      </GrammarDropdown>

                      <GrammarDropdown title="Literary Structure (Climax, Pivot, & Interchange)">
                        <p className="mb-2"><strong className="text-slate-800">Climax:</strong> A progression of events or ideas that climb to a certain high point before descending.</p>
                        <p className="mb-2"><strong className="text-slate-800">Pivot or Hinge:</strong> A sudden change in the direction or flow of the context; a minor climax.</p>
                        <p className="mb-2"><strong className="text-slate-800">Interchange:</strong> When the action, conversation, or concept moves to another and then back again.</p>
                        <p className="italic text-sky-800 border-l-2 border-sky-300 pl-3 mt-3"><strong>Example:</strong> The Book of Esther uses a brilliant <strong>Pivot</strong>: Chapter 6 is the exact hinge where the king's sleepless night completely reverses Haman's wicked plot. The Book of Job uses <strong>Interchange</strong>, shifting back and forth between Job's speeches and his friends' speeches.</p>
                      </GrammarDropdown>

                      <GrammarDropdown title="Proportion & General-to-Specific">
                        <p className="mb-2"><strong className="text-slate-800">Proportion:</strong> Note the emphasis indicated by the <em>amount of space</em> the writer devotes to a specific subject.</p>
                        <p className="mb-2"><strong className="text-slate-800">Specific to General / General to Specific:</strong> Watch the progression of thought from a single example expanding to a general principle, or vice versa.</p>
                        <p className="italic text-sky-800 border-l-2 border-sky-300 pl-3 mt-3"><strong>Example:</strong> <strong>Proportion:</strong> The four Gospels devote disproportionately massive amounts of space (almost a third) to just the final week of Jesus' life, emphasizing that His death and resurrection are the focal point of His mission. <strong>General to Specific:</strong> Matthew 6 moves from a general command ("Beware of practicing your righteousness before other people") to specific examples (giving, praying, fasting).</p>
                      </GrammarDropdown>

                      <GrammarDropdown title="Definitions, Explanations, & Q&A">
                        <p className="mb-2"><strong className="text-slate-800">Explanation or Reason:</strong> The presentation of an idea or event followed immediately by its interpretation.</p>
                        <p className="mb-2"><strong className="text-slate-800">Definitions & Descriptions:</strong> Look for "is" or "are" for definition, and "which" for description.</p>
                        <p className="mb-2"><strong className="text-slate-800">Question & Answer:</strong> Pay attention to the rhetorical use of questions and answers by the author.</p>
                        <p className="italic text-sky-800 border-l-2 border-sky-300 pl-3 mt-3"><strong>Example (Definition):</strong> "Now faith <strong>is</strong> the assurance of things hoped for..." (Hebrews 11:1). <br/><strong>Example (Q&A):</strong> Paul uses rhetorical questions extensively in Romans 6:1: "What shall we say then? Are we to continue in sin that grace may abound? By no means!"</p>
                      </GrammarDropdown>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          {/* INTERPRETATION */}
          <div className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
            <div className="bg-indigo-50 border-b border-indigo-100 px-6 py-4 flex items-center gap-3">
              <BookOpen className="w-6 h-6 text-indigo-600" />
              <h3 className="text-xl font-bold text-indigo-950 m-0">Phase 3: Interpretation</h3>
            </div>
            <div className="p-6">
              <p className="text-slate-600 mb-5 font-medium italic border-l-4 border-indigo-400 pl-3">The critical question: "What did the author mean in this context?"</p>
              <ul className="space-y-6">
                <li className="list-none">
                  <div className="bg-slate-950 text-white rounded-2xl p-5 shadow-sm">
                    <strong className="block text-lg mb-3">The Interpretation Flow: Near to Far</strong>
                    <div className="grid md:grid-cols-5 gap-3">
                      {[
                        ["1", "Controls", "Genre and setting"],
                        ["2", "Local Context", "Thought unit and paragraph flow"],
                        ["3", "Wider Context", "Book, author, canon, story"],
                        ["4", "Testing Tools", "Words, references, theology"],
                        ["5", "Final Statement", "Meaning before application"]
                      ].map(([number, title, caption]) => (
                        <div key={title} className="bg-white/10 border border-white/15 rounded-xl p-3">
                          <span className="bg-indigo-400 text-indigo-950 w-7 h-7 rounded-full flex items-center justify-center text-sm font-bold mb-2">{number}</span>
                          <strong className="text-sm block">{title}</strong>
                          <p className="text-xs text-indigo-100 mt-1">{caption}</p>
                        </div>
                      ))}
                    </div>
                    <p className="text-sm text-indigo-100 mt-4">Each step depends on the one before it. Wider context should deepen the local meaning, not replace it.</p>
                  </div>
                </li>
                
                <li className="flex items-start gap-4">
                  <div className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">4</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-xl mb-2">Set the Controls: Genre and Historical Setting</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">Before interpreting a verse, decide what kind of writing you are reading and what situation the author is addressing. Genre tells you how the text communicates. Historical setting helps you hear the text as the first audience would have heard it.</p>

                    <div className="grid md:grid-cols-2 gap-4 mb-5">
                      <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4">
                        <strong className="text-indigo-950 text-sm block mb-2 uppercase tracking-widest">Literary Genre Analysis</strong>
                        <p className="text-sm text-slate-700 leading-relaxed mb-3">A text out of context is a misunderstanding; but a text read in the wrong <GlossaryTerm term="Genre">genre</GlossaryTerm> is a distortion. The genre sets the specific "rules of the game" for how it must be read.</p>
                        <p className="text-xs text-indigo-900 font-bold mb-2">Ask first: What kind of literature am I reading?</p>
                        <div className="grid grid-cols-2 gap-2">
                          <button onClick={() => navigate('poetry')} className="p-3 bg-white border border-indigo-100 rounded-lg hover:border-indigo-400 transition-colors text-xs font-bold text-slate-700">Poetry</button>
                          <button onClick={() => navigate('history')} className="p-3 bg-white border border-indigo-100 rounded-lg hover:border-indigo-400 transition-colors text-xs font-bold text-slate-700">Historical Narrative</button>
                          <button onClick={() => navigate('gospels-acts')} className="p-3 bg-white border border-indigo-100 rounded-lg hover:border-indigo-400 transition-colors text-xs font-bold text-slate-700">Gospels & Acts</button>
                          <button onClick={() => navigate('epistles')} className="p-3 bg-white border border-indigo-100 rounded-lg hover:border-indigo-400 transition-colors text-xs font-bold text-slate-700">Epistles</button>
                          <button onClick={() => navigate('law')} className="p-3 bg-white border border-indigo-100 rounded-lg hover:border-indigo-400 transition-colors text-xs font-bold text-slate-700">Law</button>
                          <button onClick={() => navigate('parables')} className="p-3 bg-white border border-indigo-100 rounded-lg hover:border-indigo-400 transition-colors text-xs font-bold text-slate-700">Parables</button>
                          <button onClick={() => navigate('prophecy')} className="p-3 bg-white border border-indigo-100 rounded-lg hover:border-indigo-400 transition-colors text-xs font-bold text-slate-700">Prophecy</button>
                          <button onClick={() => navigate('wisdom')} className="p-3 bg-white border border-indigo-100 rounded-lg hover:border-indigo-400 transition-colors text-xs font-bold text-slate-700">Wisdom</button>
                        </div>
                      </div>

                      <div className="bg-slate-50 border border-slate-200 rounded-xl p-4">
                        <strong className="text-slate-900 text-sm block mb-2 uppercase tracking-widest">Historical Interpretation</strong>
                        <p className="text-sm text-slate-700 leading-relaxed mb-3">God spoke timeless truth into real historical situations. Before asking what the text means to us, ask what it meant to them.</p>
                        <ul className="list-disc pl-4 text-sm text-slate-700 space-y-2">
                          <li><strong>Who and when:</strong> Identify the author, audience, and date.</li>
                          <li><strong>Occasion:</strong> Discover the crisis, question, event, or pastoral need behind the writing.</li>
                          <li><strong>Culture:</strong> Notice geography, political pressures, social customs, economics, and religious setting.</li>
                        </ul>
                      </div>
                    </div>

                    <BibleBookContextGuide />

                    <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4 mt-5">
                      <strong className="text-emerald-900 text-sm block mb-1">Connection to the Next Step</strong>
                      <p className="text-sm text-slate-700">Now that genre and setting are clear, move to the smallest meaningful unit around the verse. Do not build meaning from the verse alone.</p>
                    </div>
                  </div>
                </li>

                <li className="flex items-start gap-4">
                  <div className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">5</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-xl mb-2">Work the Local Context Before Going Wider</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">A verse is not a loose sentence waiting for us to attach our favorite meaning to it. The biblical authors wrote connected thoughts, paragraphs, arguments, poems, stories, and books. Interpretation begins by asking how the verse functions in that inspired flow before using wider tools.</p>

                    <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-5 mb-5">
                      <strong className="block text-indigo-950 mb-2">Context-First Workflow: Show Your Work</strong>
                      <p className="text-sm text-slate-600 mb-4">Do not simply ask these questions in your head. Write short answers as you go. The written trail keeps interpretation tied to the passage instead of drifting into a favorite idea.</p>
                      <div className="space-y-4">
                        {[
                          ["1", "Read", "Read the whole thought unit, not only the verse.", "Find the sentence, paragraph, stanza, speech, or scene that contains the verse. Mark where the author's thought begins and ends.", "For Philippians 4:13, read at least Philippians 4:10-14 because Paul is explaining contentment in every circumstance.", "Quoting the verse before you know the paragraph it belongs to."],
                          ["2", "Restate", "Put the verse in your own words without application yet.", "Use plain words. Keep every major idea from the verse, but do not add a modern situation or personal promise.", "Restatement: Paul can face every circumstance through the strength Christ gives him.", "Turning restatement into application, such as, 'Jesus will help me accomplish my goals.'"],
                          ["3", "Identify", "Name what kind of statement the verse is making.", "Ask: Is this a claim, command, promise, warning, reason, question, example, or conclusion?", "Philippians 4:13 is a testimony or claim about Christ's strengthening power in Paul's circumstances.", "Treating every positive sentence as a direct promise to the reader."],
                          ["4", "Locate", "Place the verse in the sentence and paragraph flow.", "Look for connectors, repeated words, contrasts, reasons, and the sentence before and after the verse.", "The surrounding lines mention being brought low, abounding, hunger, plenty, need, and contentment.", "Jumping to cross-references before the local paragraph has spoken."],
                          ["5", "Trace Context", "Move from near context to wider context in order.", "Start with sentence and paragraph, then section, book, same-author usage, canon, and redemptive history.", "In Philippians, Paul writes from hardship and teaches joy, partnership, humility, and contentment in Christ.", "Using a distant verse to cancel the meaning of the immediate paragraph."],
                          ["6", "Check Genre", "Let the type of biblical writing shape how the verse communicates.", "Ask how an epistle teaches: argument, exhortation, thanksgiving, personal example, commands, and gospel-grounded application.", "Philippians 4:13 appears in a letter where Paul's personal testimony models contentment for the church.", "Reading an epistle testimony like a proverb, slogan, or unlimited guarantee."],
                          ["7", "Write Interpretation", "Write one sentence that states what the author means in context.", "Name the author, audience, main truth, and purpose. Stop before personal application.", "In Philippians 4:13, Paul teaches the Philippian believers that Christ strengthens him to endure both need and abundance with contentment.", "Writing something so broad that it could fit almost any verse."]
                        ].map(([number, title, what, how, example, mistake]) => (
                          <div key={title} className="bg-white border border-indigo-100 rounded-xl p-4 shadow-sm">
                            <div className="flex items-start gap-3 mb-3">
                              <span className="bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold shrink-0 mt-0.5">{number}</span>
                              <div>
                                <strong className="text-base text-indigo-950 block">{title}</strong>
                                <p className="text-sm text-slate-600 leading-relaxed">{what}</p>
                              </div>
                            </div>
                            <div className="grid md:grid-cols-3 gap-3">
                              <div className="bg-sky-50 border border-sky-100 rounded-lg p-3">
                                <strong className="text-sky-900 text-xs uppercase tracking-widest block mb-1">How to do it</strong>
                                <p className="text-xs text-slate-700 leading-relaxed">{how}</p>
                              </div>
                              <div className="bg-emerald-50 border border-emerald-100 rounded-lg p-3">
                                <strong className="text-emerald-900 text-xs uppercase tracking-widest block mb-1">Example</strong>
                                <p className="text-xs text-slate-700 leading-relaxed">{example}</p>
                              </div>
                              <div className="bg-rose-50 border border-rose-100 rounded-lg p-3">
                                <strong className="text-rose-900 text-xs uppercase tracking-widest block mb-1">Common mistake</strong>
                                <p className="text-xs text-slate-700 leading-relaxed">{mistake}</p>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    <div className="bg-white border border-slate-200 rounded-xl p-5 mb-5 shadow-sm">
                      <strong className="block text-slate-900 text-lg mb-3">Worked Example Lab: Philippians 4:13</strong>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div className="bg-indigo-50 border border-indigo-100 rounded-lg p-4">
                          <strong className="text-indigo-900 text-sm block mb-2">1. Controls</strong>
                          <p className="text-sm text-slate-700 leading-relaxed">Philippians is an epistle. Paul writes from hardship to a church he loves, so personal testimony and pastoral instruction work together.</p>
                        </div>
                        <div className="bg-sky-50 border border-sky-100 rounded-lg p-4">
                          <strong className="text-sky-900 text-sm block mb-2">2. Thought Unit to Read</strong>
                          <p className="text-sm text-slate-700 leading-relaxed">Read Philippians 4:10-14. The nearby paragraph is about Paul's learned contentment, whether he has little or much.</p>
                        </div>
                        <div className="bg-amber-50 border border-amber-100 rounded-lg p-4">
                          <strong className="text-amber-900 text-sm block mb-2">3. Local Flow Observations</strong>
                          <ul className="text-sm text-slate-700 leading-relaxed space-y-1 list-disc pl-4">
                            <li>Paul has experienced both need and abundance.</li>
                            <li>He says contentment is something he learned.</li>
                            <li>The topic is endurance in changing circumstances.</li>
                            <li>The Philippians' partnership still matters, but Paul's strength is in Christ.</li>
                          </ul>
                        </div>
                        <div className="bg-rose-50 border border-rose-100 rounded-lg p-4">
                          <strong className="text-rose-900 text-sm block mb-2">4. Restate and Identify</strong>
                          <p className="text-sm text-slate-700 leading-relaxed">Paul can face every circumstance through Christ's strength. This is a testimony or claim, not an unlimited promise of success.</p>
                        </div>
                        <div className="bg-emerald-50 border border-emerald-100 rounded-lg p-4">
                          <strong className="text-emerald-900 text-sm block mb-2">5. Preliminary Interpretation</strong>
                          <p className="text-sm text-slate-700 leading-relaxed">Paul teaches that Christ gives strength for contentment and faithfulness in both need and abundance.</p>
                        </div>
                        <div className="bg-slate-50 border border-slate-200 rounded-lg p-4">
                          <strong className="text-slate-900 text-sm block mb-2">6. Tested and Refined</strong>
                          <p className="text-sm text-slate-700 leading-relaxed">The paragraph, the letter's hardship setting, and Paul's theology of life in Christ confirm that the verse is about Christ-sustained contentment.</p>
                        </div>
                      </div>
                      <div className="grid md:grid-cols-2 gap-4 mt-4">
                        <div className="bg-rose-50 border-l-4 border-rose-500 p-4 rounded-r-lg">
                          <strong className="text-rose-900 text-sm block mb-1">Weak Interpretation</strong>
                          <p className="text-sm text-slate-700">Christ will help me succeed at anything I want to do.</p>
                        </div>
                        <div className="bg-emerald-50 border-l-4 border-emerald-500 p-4 rounded-r-lg">
                          <strong className="text-emerald-900 text-sm block mb-1">Context-Faithful Interpretation</strong>
                          <p className="text-sm text-slate-700">Christ gives strength for contentment and faithfulness in every circumstance, including hardship.</p>
                        </div>
                      </div>
                    </div>

                    <div className="bg-indigo-950 text-white rounded-xl p-5 shadow-sm">
                      <strong className="block text-indigo-100 uppercase tracking-widest text-xs mb-2">Preliminary Interpretation Draft</strong>
                      <p className="text-lg font-semibold leading-relaxed mb-4">In this passage, the author is teaching <span className="text-amber-200">______</span> to <span className="text-amber-200">______</span> in order to <span className="text-amber-200">______</span>.</p>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div className="bg-white/10 border border-white/15 rounded-lg p-4">
                          <strong className="text-amber-200 text-sm block mb-1">Philippians 4:13</strong>
                          <p className="text-sm text-indigo-50 leading-relaxed">In this passage, Paul is teaching the Philippians that Christ strengthens him for contentment in every circumstance in order to show that Christian stability rests in Christ, not in changing conditions.</p>
                        </div>
                        <div className="bg-white/10 border border-white/15 rounded-lg p-4">
                          <strong className="text-amber-200 text-sm block mb-1">Romans 12:1</strong>
                          <p className="text-sm text-indigo-50 leading-relaxed">In this passage, Paul is teaching Roman believers to offer their whole embodied life to God because the mercies explained in Romans 1-11 call for worshipful obedience.</p>
                        </div>
                      </div>
                      <p className="text-sm text-indigo-100 mt-4"><strong>Pause here:</strong> this is a preliminary interpretation. The next steps test and refine it before application.</p>
                    </div>
                  </div>
                </li>

                <li className="list-none">
                  <div className="bg-slate-900 text-white rounded-xl p-5 shadow-sm">
                    <strong className="block text-lg mb-2">Now Move From Local Context to Wider Context</strong>
                    <p className="text-sm text-slate-200 leading-relaxed">After the thought unit has spoken, climb outward carefully. The wider context should deepen the local meaning, not overwrite it.</p>
                  </div>
                </li>

                <li className="flex items-start gap-4">
                  <div className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">6</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-xl mb-2">Contextual Interpretation (The Context Ladder)</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">A text taken out of context is merely a pretext. You cannot isolate a single verse and make it mean whatever you want. To study context well, move from near to far: first the sentence and paragraph, then the section, book, author, canon, and whole biblical story.</p>
                    
                    <div className="bg-white border border-slate-200 rounded-xl p-5 mb-5 shadow-sm">
                      <strong className="block text-indigo-900 mb-2 border-b border-slate-100 pb-2">Context Ladder: How to Use It</strong>
                      <p className="text-sm text-slate-600 mb-4">Climb the ladder in order. If a lower rung gives a clear answer, do not let a higher rung overturn it. Wider context should deepen the local meaning, not replace it.</p>
                      <div className="space-y-4">
                        {[
                          ["A", "Sentence Context", "Mark the grammar of the sentence.", "Circle the main verb, underline connectors, and note whether the verse gives a reason, result, command, or explanation.", "Philippians 4:13 completes Paul's sentence about being strengthened in all circumstances."],
                          ["B", "Paragraph Context", "Summarize the paragraph in one sentence.", "List repeated ideas and ask how the verse serves the paragraph's main point.", "The paragraph around Philippians 4:13 is about learned contentment in need and abundance."],
                          ["C", "Section Context", "Place the paragraph inside the chapter or literary unit.", "Ask what the surrounding section is doing: exhorting, thanking, warning, explaining, narrating, or concluding.", "Philippians 4 joins exhortation, peace, contentment, and partnership at the close of the letter."],
                          ["D", "Book Context", "Connect the verse to the book's purpose and movement.", "Look at the book's major themes, audience, occasion, and argument flow before forming a final interpretation.", "Romans 12:1 depends on Romans 1-11 because 'therefore' links embodied worship to God's mercies."],
                          ["E", "Same-Author Context", "Check how the same author uses related words or themes.", "Move first to nearby passages by the same author before jumping to a distant book.", "Paul often grounds Christian conduct in what God has already done in Christ."],
                          ["F", "Testament and Canonical Context", "Let the whole Bible clarify without flattening the local text.", "Use clear passages and repeated biblical themes, but keep the original paragraph in control.", "Romans 12:1 fits the wider biblical pattern of worship involving the whole life, not merely ritual moments."],
                          ["G", "Redemptive-Historical Context", "Locate the passage in the unfolding story of Scripture.", "Ask where this passage sits in creation, fall, covenant, Christ, church, judgment, and restoration.", "Paul's appeal in Romans 12 comes after Christ's saving work has been announced and explained."]
                        ].map(([letter, title, action, how, example]) => (
                          <div key={title} className="bg-slate-50 border border-slate-200 rounded-xl p-4">
                            <div className="flex gap-3 items-start">
                              <div className="w-7 h-7 rounded bg-indigo-100 text-indigo-700 font-bold flex items-center justify-center shrink-0 text-xs mt-0.5">{letter}</div>
                              <div className="w-full">
                                <strong className="text-slate-900 text-sm block mb-1">{title}</strong>
                                <p className="text-sm text-slate-700 mb-3">{action}</p>
                                <div className="grid md:grid-cols-2 gap-3">
                                  <div className="bg-white border border-slate-200 rounded-lg p-3">
                                    <strong className="text-indigo-800 text-xs uppercase tracking-widest block mb-1">How</strong>
                                    <p className="text-xs text-slate-600 leading-relaxed">{how}</p>
                                  </div>
                                  <div className="bg-white border border-slate-200 rounded-lg p-3">
                                    <strong className="text-emerald-800 text-xs uppercase tracking-widest block mb-1">Example</strong>
                                    <p className="text-xs text-slate-600 leading-relaxed">{example}</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    <div className="grid md:grid-cols-2 gap-4">
                      <div className="bg-rose-50 border-l-4 border-rose-500 p-5 rounded-r-xl">
                        <strong className="text-rose-900 block mb-2">Context Warning: Philippians 4:13</strong>
                        <p className="text-sm text-slate-700 mb-2"><em>"I can do all things through him who strengthens me."</em></p>
                        <p className="text-sm text-slate-700"><strong>Out of context:</strong> It can become a slogan for achievement.</p>
                        <p className="text-sm text-slate-700 mt-2"><strong>In paragraph context:</strong> Paul is describing contentment in hunger, need, abundance, and hardship. The verse teaches Christ-given endurance, not guaranteed personal success.</p>
                      </div>
                      <div className="bg-indigo-50 border-l-4 border-indigo-500 p-5 rounded-r-xl">
                        <strong className="text-indigo-900 block mb-2">Context Warning: Romans 12:1</strong>
                        <p className="text-sm text-slate-700 mb-2">The appeal to offer the body to God begins with "therefore."</p>
                        <p className="text-sm text-slate-700"><strong>Book context:</strong> Romans 12 does not begin Christian obedience from bare willpower. It grounds embodied worship in the mercies of God explained across Romans 1-11.</p>
                      </div>
                    </div>

                  </div>
                </li>

                <li className="list-none">
                  <div className="bg-indigo-950 text-white rounded-xl p-5 shadow-sm">
                    <strong className="block text-lg mb-2">Only After the Paragraph Has Spoken</strong>
                    <p className="text-sm text-indigo-100 leading-relaxed">Now use word studies, cross-references, theology, and resources as testing tools. They should clarify and refine your interpretation, not rescue an interpretation that the local context cannot support.</p>
                  </div>
                </li>

                <li className="flex items-start gap-4">
                  <div className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">7</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-xl mb-2">Test and Refine With Interpretation Tools: Word Studies</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">Words are the building blocks of meaning. Doing a proper word study involves looking at the original Greek or Hebrew word to understand its <GlossaryTerm term="Semantic Range">semantic range</GlossaryTerm> (the variety of meanings it can have). However, meaning is ultimately determined by context, not just the dictionary.</p>
                    
                    <div className="grid md:grid-cols-2 gap-4 mb-4">
                      {/* How To */}
                      <div className="bg-emerald-50 p-5 rounded-xl border border-emerald-100 shadow-sm">
                        <strong className="text-emerald-800 text-sm block mb-3 uppercase tracking-widest border-b border-emerald-200 pb-2">How to do a Word Study</strong>
                        <ol className="list-decimal pl-4 text-sm text-slate-700 space-y-2.5">
                          <li><strong>Identify Key Words:</strong> Select words that are repeated, theologically heavy (e.g., <em>grace, justify</em>), or central to the verse's logic.</li>
                          <li><strong>Find the Original Word:</strong> Use tools like a Strong's Concordance or software (Logos, Blue Letter Bible) to uncover the underlying Hebrew or Greek word to avoid the "English-Only Fallacy".</li>
                          <li><strong>Consult a Lexicon:</strong> Look the word up in a biblical dictionary (Lexicon) to see its full range of possible meanings.</li>
                          <li><strong>Let Context Decide:</strong> Out of all possible meanings in the lexicon, which <em>one</em> meaning makes the most sense in the author's immediate paragraph?</li>
                        </ol>
                      </div>
                      
                      {/* Dangers */}
                      <div className="bg-rose-50 p-5 rounded-xl border border-rose-200 shadow-sm">
                        <strong className="text-rose-800 text-sm block mb-3 uppercase tracking-widest border-b border-rose-200 pb-2 flex items-center gap-2">
                            Exegetical Fallacies & Dangers
                        </strong>
                        <ul className="list-disc pl-4 text-sm text-slate-700 space-y-2.5">
                          <li><strong className="text-rose-900">The Root Fallacy:</strong> Assuming a word's meaning is found in its root components. <em>Example: A "butterfly" is not a fly made of butter! Similarly, the Greek "Ekklesia" doesn't mean "called out ones" just because of its roots; it simply meant "an assembly".</em></li>
                          <li><strong className="text-rose-900">Illegitimate Totality Transfer:</strong> The overload fallacy. The error of taking <em>every</em> possible dictionary meaning of a word and reading them all into a single verse. A word only has <em>one</em> intended meaning in a specific context!</li>
                          <li><strong className="text-rose-900">Time-Frame Fallacy (Anachronism):</strong> Reading later, modern meanings back into ancient words. <em>Example: Thinking the Greek word "dynamis" means "dynamite" in Romans 1:16. Paul had no idea what dynamite was; it just means "power".</em></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </li>

                <li className="flex items-start gap-4">
                  <div className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">8</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-xl mb-2">Same Author Cross-Reference Interpretation</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">When interpreting a difficult word, theme, phrase, or concept, your first outside check should be how the <em>same author</em> uses it. Each biblical author has a recognizable vocabulary, argument pattern, and theological emphasis, so same-author passages usually give the nearest help before you move to the rest of Scripture.</p>

                    <div className="space-y-3 mb-4">
                      <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-indigo-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">What This Tool Does</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">It lets the author help define their own language. Before asking how a word is used everywhere in the Bible, ask how this author uses it in the same letter, the same book, or the author's other writings.</p>
                      </div>
                      <div className="bg-white border border-indigo-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-indigo-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">How to Do It</strong>
                        <ol className="text-sm text-slate-700 leading-relaxed space-y-1 list-decimal pl-5">
                          <li>Start in the same paragraph and ask whether the author explains the term nearby.</li>
                          <li>Search the same book for the same word, theme, or phrase.</li>
                          <li>Then check the same author's other books.</li>
                          <li>Compare similar contexts first: prayer with prayer, warning with warning, argument with argument.</li>
                          <li>Ask whether the author defines, repeats, develops, limits, or contrasts the idea.</li>
                        </ol>
                      </div>
                      <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-indigo-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">Mini Example</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">When Paul uses "mystery" in Colossians 1:26, he is not using the word like a modern detective story. In Ephesians 3:6, Paul explains the mystery as Gentiles sharing in the promise in Christ. So you can write: <em>In Paul's usage, "mystery" often means a once-hidden part of God's saving plan now revealed in Christ.</em></p>
                      </div>
                      <div className="bg-rose-50 border border-rose-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-rose-800 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">Common Mistake</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">Do not jump immediately to a different author or to a broad word search across the whole Bible. A shared English word can hide different Hebrew or Greek words, and different authors may use similar language for different emphases.</p>
                      </div>
                      <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-emerald-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">Write This Down</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">Use this sentence: <em>In this author's usage, this word or theme means ______ because the author uses it in ______ to show ______.</em></p>
                      </div>
                    </div>
                  </div>
                </li>

                <li className="flex items-start gap-4">
                  <div className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">9</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-xl mb-2">Cross-Reference Interpretation</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">Also known as the <GlossaryTerm term="Analogy of Faith">Analogy of Faith</GlossaryTerm>, this principle means that <strong>Scripture interprets Scripture</strong>. Because Scripture is unified, clearer passages can help with difficult passages, but cross-references must deepen the local meaning rather than override it.</p>

                    <div className="space-y-3 mb-4">
                      <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-indigo-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">What This Tool Does</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">It checks your interpretation against the wider witness of Scripture. It is especially helpful when a passage is difficult, symbolic, debated, or easy to isolate from the Bible's larger teaching.</p>
                      </div>
                      <div className="bg-white border border-indigo-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-indigo-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">How to Do It</strong>
                        <ol className="text-sm text-slate-700 leading-relaxed space-y-1 list-decimal pl-5">
                          <li>Start with clear passages before building doctrine from difficult ones.</li>
                          <li>Prefer near-to-far order: same book, same author, same testament, then whole canon.</li>
                          <li>Compare topic and argument, not merely shared English words.</li>
                          <li>Ask how the cross-reference clarifies the local paragraph.</li>
                          <li>Let the local context keep control; do not import a meaning the paragraph cannot bear.</li>
                        </ol>
                      </div>
                      <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-indigo-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">Mini Example</strong>
                        <div className="text-sm text-slate-700 leading-relaxed space-y-2">
                          <p>Paul and James both speak about faith and works, but they answer different problems. Paul argues against relying on works as the basis of acceptance with God. James argues against a dead claim to faith that produces no obedience.</p>
                          <p>To harmonize them, follow the steps: read each paragraph, identify each problem, compare the topic, then state the relationship. Paul emphasizes the <em>root</em> of salvation: faith receiving grace. James emphasizes the <em>fruit</em> of living faith: works that show faith is real.</p>
                        </div>
                      </div>
                      <div className="bg-rose-50 border border-rose-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-rose-800 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">Common Mistake</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">Do not use a cross-reference as an escape hatch from the passage in front of you. If your cross-reference makes the local paragraph irrelevant, you are no longer interpreting the passage; you are replacing it.</p>
                      </div>
                      <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-emerald-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">Write This Down</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">Use this sentence: <em>This cross-reference clarifies ______, but the local paragraph still controls the meaning by showing ______.</em></p>
                      </div>
                    </div>
                  </div>
                </li>

                <li className="flex items-start gap-4">
                  <div className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">10</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-xl mb-2">Theological Analysis & Redemptive History</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">Scripture is not a random collection of isolated moral stories; it is one unified story. After local context has spoken, ask how this passage contributes to the Bible's teaching about God, humanity, sin, covenant, Christ, the Spirit, the church, mission, judgment, restoration, and the <GlossaryTerm term="Great Controversy">Great Controversy</GlossaryTerm>.</p>

                    <div className="space-y-3 mb-5">
                      <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-indigo-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">What This Tool Does</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">It moves from the passage's local meaning to its place in the whole biblical story. The question is not, "What theology can I force into this text?" but, "What theological truth does this text actually contribute?"</p>
                      </div>
                      <div className="bg-white border border-indigo-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-indigo-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">How to Do It</strong>
                        <ol className="text-sm text-slate-700 leading-relaxed space-y-1 list-decimal pl-5">
                          <li>Name the main theological subject in the passage: God, humanity, sin, covenant, Christ, Spirit, church, mission, judgment, or restoration.</li>
                          <li>Ask what the passage teaches about that subject in its own context.</li>
                          <li>Locate the passage in the storyline: creation, fall, redemption, or restoration.</li>
                          <li>Ask how the passage fits the Great Controversy theme without flattening its genre or emotion.</li>
                          <li>State the theology as a contribution, not as a replacement for the author's meaning.</li>
                        </ol>
                      </div>
                      <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-indigo-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">Mini Example</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">Psalm 23 first means what it says as a psalm of trust: the Lord shepherds, guides, protects, hosts, and keeps his servant. Then redemptive history deepens the reading: Scripture later identifies Jesus as the Good Shepherd, so Christian readers can see how God's shepherd care reaches its fullest expression in Christ without erasing David's original prayer of trust.</p>
                      </div>
                      <div className="bg-rose-50 border border-rose-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-rose-800 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">Common Mistake</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">Do not turn every detail into a hidden symbol. Theology should grow from the passage's words, genre, and context. A Christ-centered or Great Controversy reading must honor what the text is already doing.</p>
                      </div>
                      <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-emerald-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">Write This Down</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">Use this sentence: <em>This passage contributes to the Bible's teaching about ______ by showing ______ in the context of ______.</em></p>
                      </div>
                    </div>

                    <div className="bg-slate-50 p-5 rounded-xl border border-slate-200 mb-5 shadow-sm">
                      <strong className="text-indigo-900 block mb-3 border-b border-slate-200 pb-2">The 4 Stages of the Great Controversy:</strong>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div className="bg-white p-3 rounded-lg border border-slate-100">
                          <strong className="text-emerald-600 text-sm block">1. Creation</strong>
                          <p className="text-xs text-slate-600 mt-1">God's original, perfect design for humanity and the world, characterized by unbroken relationship, harmony, and life (Genesis 1-2).</p>
                        </div>
                        <div className="bg-white p-3 rounded-lg border border-slate-100">
                          <strong className="text-rose-600 text-sm block">2. Fall</strong>
                          <p className="text-xs text-slate-600 mt-1">The entrance of sin, rebellion, and death. Satan's deception shatters the perfect design, bringing brokenness and alienation from God (Genesis 3).</p>
                        </div>
                        <div className="bg-white p-3 rounded-lg border border-slate-100">
                          <strong className="text-sky-600 text-sm block">3. Redemption</strong>
                          <p className="text-xs text-slate-600 mt-1">God's unfolding rescue mission to save humanity, culminating in the incarnation, perfect life, substitutionary death, and resurrection of Jesus Christ.</p>
                        </div>
                        <div className="bg-white p-3 rounded-lg border border-slate-100">
                          <strong className="text-amber-500 text-sm block">4. Restoration</strong>
                          <p className="text-xs text-slate-600 mt-1">The ultimate eradication of sin and Satan, the final judgment, and the recreation of the new heavens and new earth (Revelation 21-22).</p>
                        </div>
                      </div>
                    </div>

                    <div className="bg-indigo-50 border border-indigo-100 p-5 rounded-xl shadow-sm">
                      <strong className="text-indigo-900 block mb-2 text-base">Example: Reading Psalm 23 through the Great Controversy</strong>
                      <p className="text-sm text-slate-700 mb-3">If we read "The Lord is my Shepherd" isolated from redemptive history, it's just a nice, comforting poem. But when we map it onto the grand narrative, its theological depth explodes:</p>
                      <ul className="list-disc pl-5 space-y-2 text-sm text-slate-700 marker:text-indigo-400">
                        <li><strong>Creation:</strong> We see echoes of Eden in the "green pastures" and "still waters" where God perfectly provides for His flock.</li>
                        <li><strong>Fall:</strong> We are starkly reminded of our broken, fallen world by the immediate presence of the "valley of the shadow of death" and surrounding "enemies."</li>
                        <li><strong>Redemption:</strong> In the New Testament, Jesus reveals the ultimate meaning by declaring, "I am the Good Shepherd" who lays down His life for the sheep (John 10). Because of the Cross, He is the one who walks through the valley <em>with</em> us.</li>
                        <li><strong>Restoration:</strong> The psalm points beyond this life to our ultimate eschatological hope: "I will dwell in the house of the Lord forever."</li>
                      </ul>
                      <div className="mt-4 bg-white border border-indigo-100 rounded-lg p-4">
                        <strong className="text-indigo-900 text-sm block mb-2">How this reading was built:</strong>
                        <ol className="list-decimal pl-5 space-y-1.5 text-sm text-slate-700">
                          <li>Start locally: Psalm 23 is a trust psalm about the Lord's care.</li>
                          <li>Name the theology: God guides, provides, protects, and brings his people home.</li>
                          <li>Place it in the storyline: the psalm speaks into a fallen world of danger, enemies, and death.</li>
                          <li>Follow canonical development: Jesus later identifies himself as the Good Shepherd.</li>
                          <li>End with hope: the final dwelling with the Lord points toward restoration, not merely temporary comfort.</li>
                        </ol>
                      </div>
                    </div>
                  </div>
                </li>

                <li className="flex items-start gap-4">
                  <div className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">11</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-xl mb-2">Summarize & Consult Resources</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">Before moving to Application, summarize the passage's interpretation in your own words to ensure you grasp the "Big Idea." Then check your findings against outside resources. Consulting these resources <em>after</em> doing your own inductive work helps confirm your interpretation and guards against private, isolated conclusions.</p>

                    <div className="space-y-3 mb-5">
                      <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-indigo-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">What This Tool Does</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">It checks your work. Resources should test, correct, sharpen, and sometimes challenge your interpretation, but they should not replace your own observation, context work, and interpretation statement.</p>
                      </div>
                      <div className="bg-white border border-indigo-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-indigo-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">How to Do It</strong>
                        <ol className="text-sm text-slate-700 leading-relaxed space-y-1 list-decimal pl-5">
                          <li>Write your interpretation before opening commentaries.</li>
                          <li>List the evidence that led you there: context, grammar, repeated words, genre, and cross-references.</li>
                          <li>Consult resources to see what they confirm, correct, or sharpen.</li>
                          <li>When resources disagree, ask which view best explains the passage's evidence.</li>
                          <li>Revise your interpretation statement only when the text itself supports the correction.</li>
                        </ol>
                      </div>
                      <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-indigo-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">Mini Example</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">If two resources disagree about Philippians 4:13, compare their explanations with Philippians 4:10-14. The stronger view will account for Paul's hardship, his learned contentment, and the gift-support context. A resource that turns the verse into a general success slogan is not explaining the paragraph well.</p>
                      </div>
                      <div className="bg-rose-50 border border-rose-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-rose-800 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">Common Mistake</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">Do not read resources first and then look for verses to support the resource. That trains dependence on secondary voices instead of careful reading of Scripture.</p>
                      </div>
                      <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4 md:flex md:items-start md:gap-4">
                        <strong className="text-emerald-900 text-xs uppercase tracking-widest block md:w-44 shrink-0 mb-2 md:mb-0">Write This Down</strong>
                        <p className="text-sm text-slate-700 leading-relaxed">Use this sentence: <em>My interpretation is ______. The textual evidence is ______. Resources confirmed, corrected, or sharpened my reading by ______.</em></p>
                      </div>
                    </div>

                    <div className="bg-white p-5 rounded-xl border border-indigo-100 mb-5 shadow-sm">
                      <strong className="text-indigo-900 block mb-3 border-b border-indigo-100 pb-2">Before, During, and After Consulting Resources:</strong>
                      <div className="grid md:grid-cols-3 gap-4">
                        <div className="bg-slate-50 p-3 rounded-lg border border-slate-200">
                          <strong className="text-slate-900 text-sm block mb-1">Before</strong>
                          <p className="text-xs text-slate-600 leading-relaxed">Write your own interpretation statement and list the evidence from the passage.</p>
                        </div>
                        <div className="bg-slate-50 p-3 rounded-lg border border-slate-200">
                          <strong className="text-slate-900 text-sm block mb-1">During</strong>
                          <p className="text-xs text-slate-600 leading-relaxed">Mark where resources agree, disagree, or notice evidence you missed.</p>
                        </div>
                        <div className="bg-slate-50 p-3 rounded-lg border border-slate-200">
                          <strong className="text-slate-900 text-sm block mb-1">After</strong>
                          <p className="text-xs text-slate-600 leading-relaxed">Refine your statement only where the passage's own evidence requires it.</p>
                        </div>
                      </div>
                    </div>
                    
                    <div className="bg-slate-50 p-5 rounded-xl border border-slate-200 shadow-sm">
                      <strong className="text-indigo-900 block mb-3 border-b border-slate-200 pb-2">Order of Consultation:</strong>
                      <div className="space-y-4">
                        <div>
                          <strong className="text-slate-800 text-sm flex items-center gap-2"><span className="bg-indigo-600 text-white w-5 h-5 rounded-full flex items-center justify-center text-xs">1</span> Ellen G. White (Spirit of Prophecy)</strong>
                          <p className="text-sm text-slate-600 mt-1 pl-7">Begin by consulting the writings of Ellen G. White (e.g., <em>The Desire of Ages</em>, <em>Patriarchs and Prophets</em>, <em>The Great Controversy</em>) for inspired insights, historical context, and deep spiritual applications regarding the passage.</p>
                        </div>
                        <div>
                          <strong className="text-slate-800 text-sm flex items-center gap-2"><span className="bg-indigo-600 text-white w-5 h-5 rounded-full flex items-center justify-center text-xs">2</span> Adventist Commentaries</strong>
                          <p className="text-sm text-slate-600 mt-1 pl-7">Next, consult resources that align with our specific theological framework, such as the <em>Seventh-day Adventist Bible Commentary (SDABC)</em> or the <em>Andrews Study Bible</em>.</p>
                        </div>
                        <div>
                          <strong className="text-slate-800 text-sm flex items-center gap-2"><span className="bg-indigo-600 text-white w-5 h-5 rounded-full flex items-center justify-center text-xs">3</span> Other Conservative Commentaries</strong>
                          <p className="text-sm text-slate-600 mt-1 pl-7">Finally, broaden your research by consulting highly respected, conservative evangelical commentaries that respect the authority of Scripture. Excellent examples include:</p>
                          <ul className="list-disc text-sm text-slate-600 pl-11 mt-1 space-y-1">
                            <li><em>The Expositor's Bible Commentary (EBC)</em></li>
                            <li><em>New International Commentary on the Old/New Testament (NICOT/NICNT)</em></li>
                            <li><em>Tyndale Old/New Testament Commentaries (TOTC/TNTC)</em></li>
                            <li><em>Keil & Delitzsch Commentary on the Old Testament</em></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>

                <li className="flex items-start gap-4">
                  <div className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">12</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-xl mb-2">Write the Final Interpretation Statement</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">After the local context, wider context, testing tools, and resources have done their work, write one meaning-focused statement. This is still interpretation, not application. Application begins in the next phase.</p>
                    <div className="bg-indigo-950 text-white rounded-xl p-5 shadow-sm">
                      <strong className="block text-indigo-100 uppercase tracking-widest text-xs mb-2">Final Statement Template</strong>
                      <p className="text-lg font-semibold leading-relaxed mb-4">In this passage, the author is teaching <span className="text-amber-200">______</span> to <span className="text-amber-200">______</span> in order to <span className="text-amber-200">______</span>.</p>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div className="bg-white/10 border border-white/15 rounded-lg p-4">
                          <strong className="text-amber-200 text-sm block mb-1">Philippians 4:13</strong>
                          <p className="text-sm text-indigo-50 leading-relaxed">In this passage, Paul teaches the Philippian believers that Christ strengthens him to remain content and faithful in every circumstance, so that their confidence rests in Christ rather than in changing conditions.</p>
                        </div>
                        <div className="bg-white/10 border border-white/15 rounded-lg p-4">
                          <strong className="text-amber-200 text-sm block mb-1">Romans 12:1</strong>
                          <p className="text-sm text-indigo-50 leading-relaxed">In this passage, Paul teaches Roman believers to offer their whole embodied life to God because the mercies explained in Romans 1-11 call for worshipful obedience.</p>
                        </div>
                      </div>
                      <p className="text-sm text-indigo-100 mt-4"><strong>Ready for Phase 5:</strong> once the meaning is stated clearly, application can ask how the same theological truth faithfully crosses into today.</p>
                    </div>
                  </div>
                </li>

              </ul>
            </div>
          </div>

          {/* IMAGINATION */}
          <div className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden mt-8">
            <div className="bg-amber-50 border-b border-amber-100 px-6 py-4 flex items-center gap-3">
              <Lightbulb className="w-6 h-6 text-amber-600" />
              <h3 className="text-xl font-bold text-amber-950 m-0">Phase 4: Imagination</h3>
            </div>
            <div className="p-6">
              <p className="text-slate-600 mb-5 font-medium italic border-l-4 border-amber-400 pl-3">Depending on the genre, we must enter into the narrative emotionally and experientially.</p>

              <div className="flex items-start gap-4">
                <div className="bg-amber-500 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">13</div>
                <div className="w-full">
                  <strong className="text-slate-800 block text-lg mb-3">Grasping the Scene</strong>
                  <p className="text-sm text-slate-700 leading-relaxed mb-4">Good hermeneutics isn't just about clinical analysis. We must allow the text to arrest our senses. To truly comprehend the weight of a passage—especially in narratives and the Gospels—we must enter into the story emotionally and experientially, letting our imagination reconstruct the historical reality.</p>

                  <div className="bg-white border border-amber-200 rounded-xl p-5 mb-5 shadow-sm">
                    <strong className="text-amber-900 block text-base mb-3 border-b border-amber-100 pb-2">Tips for Grasping the Scene</strong>
                    <ul className="space-y-3 text-sm text-slate-700">
                      <li><strong className="text-amber-700">1. Engage the Senses:</strong> Don't just read the words; build a mental picture. Ask yourself: What did the dust smell like? What did the shouting crowd sound like? How steep was the mountain? How hot was the sun?</li>
                      <li><strong className="text-amber-700">2. Identify with the Characters:</strong> Step into the shoes of the biblical figures. Try to feel the desperate faith of the woman with the issue of blood, or the sinking, cold fear of Peter walking on the stormy water.</li>
                      <li><strong className="text-amber-700">3. Slow Down the Action:</strong> We often read familiar stories too fast. Read the passage deliberately, frame by frame. Do not rush to extract a theological point before you have fully experienced the weight of the moment.</li>
                    </ul>
                  </div>

                  <div className="space-y-4">
                    <blockquote className="bg-amber-50/50 p-4 rounded-xl border border-amber-100 text-sm text-amber-900 leading-relaxed italic">
                      "It would be well for us to spend a thoughtful hour each day in contemplation of the life of Christ. We should take it point by point, and let the imagination grasp each scene, especially the closing ones. As we thus dwell upon His great sacrifice for us, our confidence in Him will be more constant, our love will be quickened, and we shall be more deeply imbued with His spirit." <br/><span className="block mt-2 font-bold not-italic text-amber-700">— Ellen G. White, The Desire of Ages, p. 83</span>
                    </blockquote>
                    <blockquote className="bg-amber-50/50 p-4 rounded-xl border border-amber-100 text-sm text-amber-900 leading-relaxed italic">
                      "Let us in imagination go back to that scene, and, as we sit with the disciples on the mountainside, enter into the thoughts and feelings that filled their hearts. Understanding what the words of Jesus meant to those who heard them, we may discern in them a new vividness and beauty, and may also gather for ourselves their deeper lessons." <br/><span className="block mt-2 font-bold not-italic text-amber-700">— Ellen G. White, Thoughts from the Mount of Blessing, p. 1</span>
                    </blockquote>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* APPLICATION */}
          <div className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden mt-8">
            <div className="bg-emerald-50 border-b border-emerald-100 px-6 py-4 flex items-center gap-3">
              <Sparkles className="w-6 h-6 text-emerald-600" />
              <h3 className="text-xl font-bold text-emerald-950 m-0">Phase 5: Application</h3>
            </div>
            <div className="p-6">
              <p className="text-slate-600 mb-5 font-medium italic border-l-4 border-emerald-400 pl-3">The transformative question: "What does this mean for my life today?"</p>

              <div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-5 mb-8 shadow-sm">
                <strong className="text-emerald-950 block text-lg mb-2">How the Three Application Tools Work Together</strong>
                <p className="text-sm text-slate-700 leading-relaxed mb-4">These are not three competing models. Use them as three different questions in the same application process.</p>
                <div className="grid md:grid-cols-3 gap-4">
                  {[
                    ["1", "S.P.A.C.E.P.E.T.S.", "What response?", "Use this checklist to identify whether the passage calls for confession, obedience, belief, prayer, thanksgiving, or another concrete response."],
                    ["2", "Principlizing Bridge", "How do I move from then to now?", "Use this to move from the ancient setting to a timeless principle without copying ancient forms or inventing modern meanings."],
                    ["3", "Stages of Application", "Where does this apply?", "Use this to ask whether the response belongs personally, in family life, in the church, in society, in mission, or in the Great Controversy."]
                  ].map(([number, title, question, body]) => (
                    <div key={title} className="bg-white border border-emerald-100 rounded-xl p-4">
                      <span className="bg-emerald-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold mb-3">{number}</span>
                      <strong className="text-emerald-900 block mb-1">{title}</strong>
                      <p className="text-sm font-bold text-slate-800 mb-2">{question}</p>
                      <p className="text-sm text-slate-700 leading-relaxed">{body}</p>
                    </div>
                  ))}
                </div>
              </div>
              <ul className="space-y-8">
                <li className="flex items-start gap-4">
                  <div className="bg-emerald-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">14</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-lg mb-2">Personal Application (S.P.A.C.E.P.E.T.S.)</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">To effectively apply the text to your personal life, run it through the <GlossaryTerm term="S.P.A.C.E.P.E.T.S.">SPACEPETS</GlossaryTerm> diagnostic checklist. Ask yourself these questions regarding the passage you just studied:</p>
                    
                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                      <div className="bg-emerald-50/50 p-3 border border-emerald-100 rounded-lg text-sm"><strong className="text-emerald-700">S</strong> - Is there a <strong className="text-slate-800">Sin</strong> to confess?</div>
                      <div className="bg-emerald-50/50 p-3 border border-emerald-100 rounded-lg text-sm"><strong className="text-emerald-700">P</strong> - Is there a <strong className="text-slate-800">Promise</strong> to claim?</div>
                      <div className="bg-emerald-50/50 p-3 border border-emerald-100 rounded-lg text-sm"><strong className="text-emerald-700">A</strong> - Is there an <strong className="text-slate-800">Attitude</strong> to change?</div>
                      <div className="bg-emerald-50/50 p-3 border border-emerald-100 rounded-lg text-sm"><strong className="text-emerald-700">C</strong> - Is there a <strong className="text-slate-800">Command</strong> to obey?</div>
                      <div className="bg-emerald-50/50 p-3 border border-emerald-100 rounded-lg text-sm"><strong className="text-emerald-700">E</strong> - Is there an <strong className="text-slate-800">Example</strong> to follow?</div>
                      <div className="bg-emerald-50/50 p-3 border border-emerald-100 rounded-lg text-sm"><strong className="text-emerald-700">P</strong> - Is there a <strong className="text-slate-800">Prayer</strong> to pray?</div>
                      <div className="bg-emerald-50/50 p-3 border border-emerald-100 rounded-lg text-sm"><strong className="text-emerald-700">E</strong> - Is there an <strong className="text-slate-800">Error</strong> to avoid?</div>
                      <div className="bg-emerald-50/50 p-3 border border-emerald-100 rounded-lg text-sm"><strong className="text-emerald-700">T</strong> - Is there a <strong className="text-slate-800">Truth</strong> to believe?</div>
                      <div className="bg-emerald-50/50 p-3 border border-emerald-100 rounded-lg text-sm"><strong className="text-emerald-700">S</strong> - Is there <strong className="text-slate-800">Something</strong> to thank God for?</div>
                    </div>
                    
                    <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 mt-5">
                      <strong className="text-emerald-800 block mb-2">Contemporization: Creating Real-World Scenarios</strong>
                      <p className="text-sm text-slate-700 mb-2">The best way to make an application specific is to create a real-world scenario. <GlossaryTerm term="Contemporization">Contemporization</GlossaryTerm> retells the biblical story so that the effect on the contemporary audience is equivalent to the effect on the biblical audience.</p>
                      <p className="text-sm text-slate-600 italic border-l-4 border-emerald-400 pl-3">
                        <strong>Example:</strong> To contemporize the Parable of the Good Samaritan, you might write a story about a stranded driver ignored by a busy local pastor and a worship leader, but who is ultimately rescued by an illegal immigrant or a despised member of a rival political party at great personal cost.
                      </p>
                    </div>
                  </div>
                </li>

                <li className="flex items-start gap-4">
                  <div className="bg-emerald-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">15</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-lg mb-2">The Principlizing Bridge</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">Before we ask how a passage applies today, we must cross carefully from the ancient world of the text into our world. The <GlossaryTerm term="Principlizing Bridge">Principlizing Bridge</GlossaryTerm> protects us from two opposite errors: copying ancient cultural forms without interpretation, or ignoring the text and inventing modern applications from our own preferences.</p>

                    <div className="bg-slate-900 text-white rounded-2xl p-5 md:p-6 shadow-xl mb-5">
                      <div className="space-y-4">
                        {[
                          {
                            number: "1",
                            title: "Their Town",
                            text: "First ask what the passage meant to the original audience. Who was speaking? Who was listening? What problem, command, promise, story, poem, or vision was being addressed in that original setting?"
                          },
                          {
                            number: "2",
                            title: "Width of the River",
                            text: "Then identify the differences between their world and ours: covenant setting, culture, language, geography, temple or sanctuary practice, political situation, literary form, and redemptive-historical location."
                          },
                          {
                            number: "3",
                            title: "Timeless Principle",
                            text: "Next state the enduring theological truth. This principle should be rooted in authorial intent, consistent with the passage's genre, and broad enough to apply beyond the original situation without becoming vague."
                          },
                          {
                            number: "4",
                            title: "Biblical Map",
                            text: "Now test that principle against the rest of Scripture. Ask how it fits the character of God, the ministry of Christ, the covenant story, the law and prophets, the gospel, and the Bible's final hope."
                          },
                          {
                            number: "5",
                            title: "Our Town",
                            text: "Finally apply the principle in concrete, faithful ways today. Good application names real obedience in real relationships, habits, institutions, temptations, and acts of worship."
                          }
                        ].map((step) => (
                          <div key={step.title} className="bg-white/10 border border-white/10 rounded-xl p-4 md:p-5 flex flex-col sm:flex-row gap-4">
                            <div className="bg-emerald-400 text-slate-950 w-10 h-10 rounded-full flex items-center justify-center font-black text-sm shrink-0">
                              {step.number}
                            </div>
                            <div>
                              <strong className="text-emerald-300 block mb-2 text-base md:text-lg">{step.title}</strong>
                              <p className="text-sm md:text-base text-slate-100 leading-relaxed">{step.text}</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl text-sm text-slate-700 shadow-sm">
                      <strong className="text-emerald-800 block mb-1">Key Guardrail</strong>
                      The timeless principle must come from the passage itself. We are not asking, "What can I make this mean?" We are asking, "What enduring truth did God communicate through this author, in this genre, to this audience, and how should that truth faithfully take shape now?"
                    </div>
                  </div>
                </li>

                <li className="flex items-start gap-4">
                  <div className="bg-emerald-600 text-white w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 shadow-sm">16</div>
                  <div className="w-full">
                    <strong className="text-slate-800 block text-lg mb-1">The Stages of Application</strong>
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">After crossing the bridge, effective application starts personally, but then moves outward in concentric circles.</p>
                    
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
                      <div className="bg-slate-50 border border-slate-200 p-4 rounded-xl shadow-sm">
                        <strong className="text-emerald-700 block mb-1">A. Personal Application</strong>
                        <p className="text-xs text-slate-600">How does this truth demand change in my own heart, secret thoughts, daily habits, and personal devotion to God?</p>
                      </div>
                      <div className="bg-slate-50 border border-slate-200 p-4 rounded-xl shadow-sm">
                        <strong className="text-emerald-700 block mb-1">B. Family Application</strong>
                        <p className="text-xs text-slate-600">How should this principle reshape my home, my marriage, my parenting, and how I treat my relatives?</p>
                      </div>
                      <div className="bg-slate-50 border border-slate-200 p-4 rounded-xl shadow-sm">
                        <strong className="text-emerald-700 block mb-1">C. Church Application</strong>
                        <p className="text-xs text-slate-600">How does this text instruct our local congregation to worship, govern itself, practice discipline, or love one another?</p>
                      </div>
                      <div className="bg-slate-50 border border-slate-200 p-4 rounded-xl shadow-sm">
                        <strong className="text-emerald-700 block mb-1">D. Nation Application</strong>
                        <p className="text-xs text-slate-600">How does this biblical principle inform my civic duties, my pursuit of societal justice, or my interaction with the government?</p>
                      </div>
                      <div className="bg-slate-50 border border-slate-200 p-4 rounded-xl shadow-sm">
                        <strong className="text-emerald-700 block mb-1">E. World Application</strong>
                        <p className="text-xs text-slate-600">How does this truth apply to global issues, international missions, and our shared humanity?</p>
                      </div>
                      <div className="bg-indigo-50 border border-indigo-200 p-4 rounded-xl shadow-sm">
                        <strong className="text-indigo-800 block mb-1 flex items-center gap-1.5"><Sparkles className="w-3.5 h-3.5"/> F. Great Controversy Application</strong>
                        <p className="text-xs text-slate-700">How does my obedience to this text vindicate God's character and advance Christ's kingdom in the cosmic war against Satan?</p>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    )
  },
  {
    id: 'general-beginner',
    sectionNum: '2.1',
    title: 'Beginner General Hermeneutics',
    icon: Compass,
    isSubSection: true,
    content: ({ navigate }) => <GeneralHermeneuticsLevelPage level="beginner" navigate={navigate} />
  },
  {
    id: 'general-intermediate',
    sectionNum: '2.2',
    title: 'Intermediate General Hermeneutics',
    icon: Clipboard,
    isSubSection: true,
    content: ({ navigate }) => <GeneralHermeneuticsLevelPage level="intermediate" navigate={navigate} />
  },
  {
    id: 'general-advanced',
    sectionNum: '2.3',
    title: 'Advanced General Hermeneutics',
    icon: ListTree,
    isSubSection: true,
    content: ({ navigate }) => <GeneralHermeneuticsLevelPage level="advanced" navigate={navigate} />
  },
  {
    id: 'poetry',
    sectionNum: '3',
    title: 'Interpreting Poetry',
    icon: Feather,
    content: () => (
      <div className="animate-in fade-in duration-500">
        <div className="mb-8">
          <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 3</div>
          <H1>Interpreting Biblical Poetry</H1>
        </div>

        <LearningSteps
          title="Poetry Learning Path"
          intro="Beginners should feel the poem's movement before analyzing every image. Deeper study can then trace form, voice, canon, and hope."
          steps={learningStepPresets.poetry}
        />
        
        <H2>Overview: What is Biblical Poetry?</H2>
        <P>Biblical poetry is a stylized, emotive, and highly structured form of literary expression characterized predominantly by parallel thought structures, vivid imagery, and economy of words. It is designed to engage the imagination and emotions as much as the intellect.</P>
        <P><Strong>Books Included:</Strong> Psalms, Proverbs, Song of Solomon, Lamentations, Job, and massive portions of the prophetic books.</P>

        <H2>Overview: The Language of the Heart</H2>
        <P>Approximately one-third of the Old Testament is written in poetry. Unlike historical narrative or logical epistles, poetry does not primarily aim to convey raw data. Instead, it speaks to the whole person—engaging the senses and the emotions to communicate profound theological truths.</P>
        
        <Quote>
          <p className="mb-2">"Poetry is not just a decorative way of saying something that could be said just as well in prose... it is a way of thinking and a way of creating meaning."</p>
          <footer className="text-sm font-bold text-indigo-800">— Robert Alter, The Art of Biblical Poetry</footer>
        </Quote>

        <H2>Specific Rules for Interpreting Poetry</H2>

        <Ul>
          <Li>
            <div className="w-full">
              <Strong>1. Master the Structure of Parallelism</Strong>
              <p className="mt-2 text-slate-700">Hebrew poetry rhymes <em className="italic">thoughts</em>, not sounds. The fundamental unit of Hebrew poetry is the line, and these lines are paired to create meaning. Never interpret a single poetic line in isolation. You must interpret the lines in relation to their parallel partners.</p>
              
              <div className="mt-4 grid gap-4 w-full">
                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Synonymous Parallelism</span>
                  <p className="text-sm text-slate-600 mb-2">The second line repeats or reinforces the thought of the first line using different words to emphasize totality or certainty.</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">"The earth is the Lord's, and everything in it, <br/>the world, and all who live in it" (Psalm 24:1).</em>
                </div>

                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Illustrative & Formal Parallelism</span>
                  <p className="text-sm text-slate-600 mb-2"><strong>Illustrative:</strong> Line A conveys the idea and line B illustrates it with an example.<br/><strong>Formal:</strong> A miscellaneous category where two lines are joined to complete a single thought structurally, but without clear symmetry.</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">"Like a gold ring in a pig's snout <br/>is a beautiful woman who shows no discretion" (Proverbs 11:22 - Illustrative).</em>
                </div>

                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Antithetic (Contrastive) Parallelism</span>
                  <p className="text-sm text-slate-600 mb-2">The second line presents a sharp contrast to the first line, often connected by the word "but". This is frequently used in Wisdom literature to show the two paths of life.</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">"A wise son brings joy to his father, <br/>but a foolish son brings grief to his mother" (Proverbs 10:1).</em>
                </div>

                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Synthetic (Developmental) Parallelism</span>
                  <p className="text-sm text-slate-600 mb-2">The second (or third) line completes, expands, or builds upon the thought introduced in the first line, taking the idea to a climax.</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">"Blessed is the one who does not walk in step with the wicked <br/>or stand in the way that sinners take <br/>or sit in the company of mockers" (Psalm 1:1).</em>
                </div>

                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Acrostics</span>
                  <p className="text-sm text-slate-600 mb-2">A highly structured poem where each successive line (or stanza) starts with the next sequential letter of the Hebrew alphabet. Used to show comprehensive totality (A to Z).</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">Psalm 119 is the most famous example, where each 8-verse stanza begins with the successive Hebrew letters: Aleph, Beth, Gimel, etc.</em>
                </div>

                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Chiasm (Inverted Parallelism)</span>
                  <p className="text-sm text-slate-600 mb-2">A highly stylized symmetric pattern where the second half of the poem mirrors the first half in reverse order (A-B-C-B'-A'). The primary theological point is almost always located at the very center (C).</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">
                    A: Have mercy on me, O God (Psalm 51:1) <br/>
                    &nbsp;&nbsp;B: Wash away all my iniquity (v.2) <br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;C: For I know my transgressions (v.3) <br/>
                    &nbsp;&nbsp;B': Cleanse me with hyssop (v.7) <br/>
                    A': Create in me a pure heart, O God (v.10)
                  </em>
                </div>

                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg border-l-4 border-l-amber-500 shadow-sm">
                  <span className="font-bold text-amber-800 text-base block mb-1">The Principle of Intensification (Heightening)</span>
                  <p className="text-sm text-slate-600 mb-2">As noted by Robert Alter in <em>The Art of Biblical Poetry</em>, what we often call "synonymous" parallelism is rarely just a repetitive A=B. It is usually A &lt; B. The second line almost always <strong>intensifies, focuses, or escalates</strong> the first line, moving from the general to the specific, or the standard to the extreme.</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-amber-400 pl-3 block">"He makes me leap like a <strong>deer</strong>, <br/>he enables me to tread on the <strong>high places</strong>." (Psalm 18:33)<br/><span className="text-slate-500 text-xs font-normal mt-1 block">Notice the escalation: Line A introduces the animal (deer); Line B escalates to the dangerous, specific action that animal can perform (treading high, treacherous cliffs).</span></em>
                </div>
              </div>
            </div>
          </Li>
          <Li>
            <div className="w-full">
              <Strong>2. Decode the Imagery and Figures of Speech</Strong>
              <p className="mt-2 text-slate-700">Biblical poets paint pictures with words using figures of speech. Do not interpret poetic imagery woodenly or literalistically. Understanding these literary devices is crucial to grasping the theological truth they communicate.</p>
              
              <div className="mt-4 grid gap-4 w-full">
                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Simile</span>
                  <p className="text-sm text-slate-600 mb-2">A comparison between two unlike things explicitly using the words "like" or "as". It helps the reader understand a spiritual concept by comparing it to something familiar in the natural world.</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">"As a deer pants for flowing streams, <br/>so pants my soul for you, O God." (Psalm 42:1)</em>
                </div>

                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Metaphor & Indirect Analogy</span>
                  <p className="text-sm text-slate-600 mb-2">A direct comparison between two unlike things without using "like" or "as". The poet declares that one thing <em className="italic font-semibold">is</em> another to convey a profound truth or characteristic.</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">"The Lord is my shepherd, <br/>I lack nothing." (Psalm 23:1) <br/><br/>"The Lord is my rock, my fortress and my deliverer." (Psalm 18:2)</em>
                </div>

                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Personification & Anthropomorphism</span>
                  <p className="text-sm text-slate-600 mb-2"><strong>Personification:</strong> Giving human features to nonhuman entities. <br/><strong>Anthropomorphism:</strong> Representing God with human features or physical characteristics.</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">"Let the rivers clap their hands, let the mountains sing together for joy..." (Psalm 98:8 - Personification).<br/><br/>"The hand of the LORD is not too short to save..." (Isaiah 59:1 - Anthropomorphism).</em>
                </div>

                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Hyperbole</span>
                  <p className="text-sm text-slate-600 mb-2">A deliberate, extreme exaggeration used for the sake of emotional effect or emphasis. It is not meant to be taken literally, but rather to express the intense depth of the poet's feelings or circumstances.</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">"I am worn out from my groaning. <br/>All night long I flood my bed with weeping <br/>and drench my couch with tears." (Psalm 6:6)</em>
                </div>

                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Metonymy & Synecdoche (Substitution)</span>
                  <p className="text-sm text-slate-600 mb-2"><strong>Metonymy:</strong> Substituting the name of one thing for another thing closely associated with it. <br/><strong>Synecdoche:</strong> A specific type of metonymy where a <em>part</em> is used to represent the <em>whole</em> (or vice versa).</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">"The <strong>tongue</strong> has the power of life and death..." (Proverbs 18:21 - Metonymy: the physical tongue is substituted for the act of speaking/words).<br/><br/>"My <strong>flesh</strong> also will dwell in hope." (Psalm 16:9 - Synecdoche: "flesh" stands for the entire human person).</em>
                </div>

                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Apostrophe</span>
                  <p className="text-sm text-slate-600 mb-2">A rhetorical device where the writer suddenly breaks off and addresses an absent person, an abstract concept, or an inanimate object as if it were present and could reply.</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">"Why was it, <strong>O sea</strong>, that you fled? <br/><strong>O Jordan</strong>, that you turned back?" (Psalm 114:5)</em>
                </div>

                <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg">
                  <span className="font-bold text-indigo-700 text-base block mb-1">Wordplay & Puns (Paronomasia)</span>
                  <p className="text-sm text-slate-600 mb-2">As detailed in <em>Grasping God's Word</em>, poets frequently use words that sound alike but have different meanings to create a striking theological connection. While often lost in English translations, it is highly visible in Hebrew.</p>
                  <em className="text-sm font-medium text-slate-800 border-l-2 border-indigo-300 pl-3 block">In Amos 8:1-2, God shows Amos a basket of "summer fruit" (Hebrew: <strong>qayits</strong>). God then says, "The end (Hebrew: <strong>qets</strong>) has come upon my people." The pun powerfully connects the rotting fruit to the impending judgment.</em>
                </div>
              </div>
            </div>
          </Li>
          <Li>
            <div className="w-full">
              <Strong>3. Engage the Emotional Context & Sub-Genres</Strong>
              <p className="mt-1 text-slate-700 mb-4">Poetry is meant to be felt. Identify the occasion that birthed the poem and read sympathetically. Do not try to extract cold, systematic doctrines from emotional outbursts; rather, learn the poet's posture of raw honesty before God. <em>The Hermeneutical Spiral</em> and <em>Introduction to Biblical Interpretation</em> urge us to categorize poems into their specific "sub-genres" or Forms, as each carries its own emotional trajectory.</p>
              
              <div className="grid md:grid-cols-2 gap-4">
                <div className="bg-sky-50 border border-sky-200 p-4 rounded-xl shadow-sm">
                  <span className="font-bold text-sky-900 block mb-1">Laments</span>
                  <p className="text-sm text-slate-700 mb-2">The most common type of Psalm. It expresses deep agony, complaint, and crying out to God for deliverance. Structurally, laments almost always transition from raw pain to a final vow of trust and praise.</p>
                  <em className="text-xs bg-white p-2 rounded block text-slate-600 italic border border-sky-100"><strong>Example:</strong> Psalm 13 begins with "How long, O LORD? Will you forget me forever?" but concludes with "But I trust in your unfailing love."</em>
                </div>
                
                <div className="bg-emerald-50 border border-emerald-200 p-4 rounded-xl shadow-sm">
                  <span className="font-bold text-emerald-900 block mb-1">Hymns of Praise & Thanksgiving</span>
                  <p className="text-sm text-slate-700 mb-2">Joyful declarations of God's majestic character (Hymns) or specific gratitude for a great deliverance He has provided (Thanksgiving).</p>
                  <em className="text-xs bg-white p-2 rounded block text-slate-600 italic border border-emerald-100"><strong>Example:</strong> Psalm 150 ("Praise the LORD! Praise God in his sanctuary..."); Psalm 116 ("I love the LORD, for he heard my voice").</em>
                </div>

                <div className="bg-rose-50 border border-rose-200 p-4 rounded-xl shadow-sm">
                  <span className="font-bold text-rose-900 block mb-1">Imprecatory Psalms</span>
                  <p className="text-sm text-slate-700 mb-2">Poems that invoke God's intense judgment and curses upon the psalmist's enemies. These are not license for personal revenge, but expressions of profound outrage over injustice surrendered to God's righteous court.</p>
                  <em className="text-xs bg-white p-2 rounded block text-slate-600 italic border border-rose-100"><strong>Example:</strong> Psalm 137:8-9 ("Daughter Babylon, doomed to destruction, happy is the one who repays you...").</em>
                </div>

                <div className="bg-indigo-50 border border-indigo-200 p-4 rounded-xl shadow-sm">
                  <span className="font-bold text-indigo-900 block mb-1">Wisdom & Royal Psalms</span>
                  <p className="text-sm text-slate-700 mb-2"><strong>Wisdom:</strong> Reflections on the two paths of life (righteousness vs. wickedness). <br/><strong>Royal:</strong> Focus on Israel's earthly king, often serving typologically to point to Christ the Messiah.</p>
                  <em className="text-xs bg-white p-2 rounded block text-slate-600 italic border border-indigo-100"><strong>Example:</strong> Psalm 1 (Wisdom: "Blessed is the one who does not walk in step with the wicked"); Psalm 2 (Royal: "I have installed my king on Zion").</em>
                </div>
              </div>
            </div>
          </Li>
          
          <Li>
            <div className="w-full">
              <Strong>4. Analyze the Macro-Structure (Stanzas and Refrains)</Strong>
              <p className="mt-1 text-slate-700 mb-3">Just as epistles have paragraphs, poems have <strong>stanzas</strong> or <strong>strophes</strong>. Grant Osborne emphasizes that determining the limits of the poem and mapping its major structural blocks reveals the author's logical or emotional progression. Look for major shifts in the speaker, a change in topic, or the presence of refrains to determine where one stanza ends and another begins.</p>
              
              <div className="bg-slate-50 border border-slate-200 p-5 rounded-xl shadow-sm text-sm text-slate-700">
                <span className="font-bold text-indigo-800 uppercase tracking-widest text-xs block mb-2">Structural Indicators</span>
                <ul className="list-disc pl-5 space-y-2 mb-3">
                  <li><strong>Selah:</strong> While its exact musical meaning is debated, it frequently marks a structural pause, inviting the reader to reflect before the next stanza begins.</li>
                  <li><strong>The Refrain:</strong> A repeating chorus that acts as a structural pillar holding the poem together.</li>
                </ul>
                <div className="bg-white p-3 rounded border border-slate-100 shadow-sm border-l-4 border-l-indigo-400">
                  <strong className="text-indigo-900 block mb-1">Example: The Refrain in Psalms 42 & 43</strong>
                  <p className="italic text-slate-600">Though printed as two separate Psalms in our English Bibles, structurally they are one single, three-stanza poem. We know this because the exact same chorus appears at the end of each stanza (Psalm 42:5, 42:11, and 43:5): <br/><br/><strong>"Why, my soul, are you downcast? Why so disturbed within me? Put your hope in God, for I will yet praise him, my Savior and my God."</strong></p>
                </div>
              </div>
            </div>
          </Li>
          <Li>
            <div className="w-full">
              <Strong>5. Ground the Poem in its Historical Context (When Possible)</Strong>
              <p className="mt-1 text-slate-700 mb-3">While poetry expresses universal human emotions, many biblical poems—especially the Psalms—were birthed out of raw, specific historical crises. Understanding the historical backdrop unlocks the depth of the poet's words. For example, reading Psalm 51 without knowing about David's catastrophic moral failure with Bathsheba (and his subsequent confrontation by Nathan the prophet) robs the poem of its devastating weight and profound repentance.</p>
              
              <div className="bg-slate-50 border border-slate-200 p-5 rounded-xl shadow-sm text-sm text-slate-700">
                <span className="font-bold text-indigo-800 uppercase tracking-widest text-xs block mb-3">Historical Psalms Guide</span>
                
                <GrammarDropdown title="Explicitly Identified (In the Superscriptions)">
                  <p className="mb-4 text-slate-600">These historical connections are directly inspired text, found in the original Hebrew superscriptions (the introductory notes) of the Psalms.</p>
                  <ul className="space-y-3">
                    <li><strong className="text-indigo-700">Psalm 3:</strong> When David fled from his son Absalom (2 Sam. 15).</li>
                    <li><strong className="text-indigo-700">Psalm 18:</strong> When the Lord delivered David from Saul and all his enemies (2 Sam. 22).</li>
                    <li><strong className="text-indigo-700">Psalm 34:</strong> When David pretended to be insane before Abimelech to escape (1 Sam. 21).</li>
                    <li><strong className="text-indigo-700">Psalm 51:</strong> After Nathan the prophet confronted David about his adultery with Bathsheba (2 Sam. 11-12).</li>
                    <li><strong className="text-indigo-700">Psalm 52:</strong> When Doeg the Edomite betrayed David's location to Saul, leading to the slaughter of the priests (1 Sam. 22).</li>
                    <li><strong className="text-indigo-700">Psalm 54:</strong> When the Ziphites betrayed David's hiding place to Saul (1 Sam. 23).</li>
                    <li><strong className="text-indigo-700">Psalm 56:</strong> When the Philistines seized David in Gath (1 Sam. 21).</li>
                    <li><strong className="text-indigo-700">Psalm 57 & 142:</strong> When David was hiding from Saul in a cave (1 Sam. 22 or 24).</li>
                    <li><strong className="text-indigo-700">Psalm 59:</strong> When Saul sent assassins to watch David's house and kill him (1 Sam. 19).</li>
                    <li><strong className="text-indigo-700">Psalm 60:</strong> During David's difficult military campaigns against Aram and Edom (2 Sam. 8).</li>
                    <li><strong className="text-indigo-700">Psalm 63:</strong> When David was wandering, exhausted and thirsty, in the Desert of Judah.</li>
                  </ul>
                </GrammarDropdown>

                <GrammarDropdown title="Scholarly Assumptions (Based on Internal Evidence)">
                  <p className="mb-4 text-slate-600">These Psalms do not have historical superscriptions. However, scholars make highly educated assumptions about their historical context based on internal clues within the poem itself.</p>
                  <ul className="space-y-4">
                    <li className="bg-white p-3 rounded-lg border border-slate-100 shadow-sm">
                      <strong className="text-amber-600 block mb-1">Psalm 32 (Aftermath of Bathsheba)</strong>
                      <span className="text-slate-600"><em>Assumption:</em> Widely believed to be David's follow-up to Psalm 51. While Psalm 51 is the prayer of broken repentance, Psalm 32 expresses the immense joy and relief of receiving God's forgiveness after the Bathsheba incident.</span>
                    </li>
                    <li className="bg-white p-3 rounded-lg border border-slate-100 shadow-sm">
                      <strong className="text-amber-600 block mb-1">Psalm 46 (Hezekiah's Deliverance)</strong>
                      <span className="text-slate-600"><em>Assumption:</em> Believed by many scholars to have been written to celebrate God's miraculous deliverance of Jerusalem from the massive Assyrian army under King Hezekiah (2 Kings 19).</span>
                    </li>
                    <li className="bg-white p-3 rounded-lg border border-slate-100 shadow-sm">
                      <strong className="text-amber-600 block mb-1">Psalm 72 (Solomon's Coronation)</strong>
                      <span className="text-slate-600"><em>Assumption:</em> Written for the coronation of King Solomon, serving as a royal prayer for his reign to be marked by justice and prosperity (while typologically pointing to Christ's eternal kingdom).</span>
                    </li>
                    <li className="bg-white p-3 rounded-lg border border-slate-100 shadow-sm">
                      <strong className="text-amber-600 block mb-1">Psalm 126 (Return from Exile)</strong>
                      <span className="text-slate-600"><em>Assumption:</em> A "Song of Ascents" reflecting the joyous, dream-like shock, but also the difficult physical reality, of the Jewish exiles returning from Babylonian captivity under Ezra and Nehemiah.</span>
                    </li>
                    <li className="bg-white p-3 rounded-lg border border-slate-100 shadow-sm">
                      <strong className="text-amber-600 block mb-1">Psalm 137 (The Babylonian Exile)</strong>
                      <span className="text-slate-600"><em>Assumption:</em> Highly probable due to the explicit lyrics ("By the rivers of Babylon we sat and wept"). Written during the 70-year exile, capturing the devastating grief of the displaced Jewish captives.</span>
                    </li>
                  </ul>
                </GrammarDropdown>
              </div>
            </div>
          </Li>
        </Ul>

        <Ul>
          {additionalPoetryRules.map((rule, index) => (
            <Li key={rule.title}>
              <div className="w-full">
            <Strong>{`${index + 6}. ${rule.title}`}</Strong>
            <p className="mt-2 text-slate-700">{rule.body}</p>
            <div className="mt-4 bg-white border border-slate-200 rounded-xl p-4 shadow-sm text-sm text-slate-700">
              <strong className="text-indigo-900 block mb-1">Example</strong>
              {rule.example}
            </div>
            <RuleGuidance ask={rule.ask} lookFor={rule.lookFor} avoid={rule.avoid} />
          </div>
        </Li>
      ))}
        </Ul>

      </div>
    )
  },
  {
    id: 'poetry-case-study',
    sectionNum: '3.1',
    title: 'Case Study',
    icon: Search,
    isSubSection: true,
    content: ({ navigate }) => <CaseStudyPage study={caseStudies.poetry} navigate={navigate} />
  },
  {
    id: 'history',
    sectionNum: '4',
    title: 'Interpreting Historical Narrative',
    icon: ScrollText,
    content: () => (
      <div className="animate-in fade-in duration-500">
        <div className="mb-8">
          <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 4</div>
          <H1>Interpreting Historical Narrative</H1>
        </div>

        <LearningSteps
          title="Historical Narrative Learning Path"
          intro="Start by following the story. Then ask how the episode fits the book, covenant story, and whole biblical movement."
          steps={learningStepPresets.history}
        />
        
        <H2>Overview: What is Biblical Narrative?</H2>
        <P>Biblical narratives are purposeful theological histories. They are structured accounts of past events intended to give meaning and direction, revealing the character of God and His interactions with humanity.</P>
        <P><Strong>Books Included:</Strong> Genesis, Exodus, Joshua, Judges, Ruth, Samuel, Kings, Chronicles, Ezra, Nehemiah, Esther, and narrative portions of prophetic books where relevant.</P>

        <H2>Overview: God's Unfolding Story</H2>
        <P>Narrative is the most common literary genre in the Bible. It is <em className="italic">theological history</em>. The inspired authors carefully selected and arranged historical events under the guidance of the Holy Spirit to reveal God's character and His redemptive plan.</P>
        
        <Quote>
          <p className="mb-2">"Biblical narratives are not just stories about people who lived long ago. They are, first and foremost, stories about what God was doing in and through those people..."</p>
          <footer className="text-sm font-bold text-indigo-800">— Gordon D. Fee and Douglas Stuart</footer>
        </Quote>

        <H2>Specific Rules for Interpreting Narrative</H2>

        <Ul>
          <Li>
            <div className="w-full">
              <Strong>1. Narrative Has Three Levels</Strong>
              <p className="mt-1 text-slate-700">Biblical narrative works at the level of the individual scene, the larger book or covenant history, and the whole biblical story. A narrative scene never floats by itself. Before drawing a lesson from a story, ask where it belongs in creation, fall, covenant promise, exodus, conquest, monarchy, exile, restoration, or the larger movement toward Christ.</p>
              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-sky-800 block mb-1">1. Immediate Scene</strong>
                  What is happening in this episode: setting, people, conflict, dialogue, and outcome?
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-sky-800 block mb-1">2. Book or Covenant Story</strong>
                  How does the scene move the book's message or Israel's covenant history forward?
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-sky-800 block mb-1">3. Whole Biblical Story</strong>
                  How does this story connect to creation, fall, promise, kingdom, exile, Christ, or restoration?
                </div>
              </div>
              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Covenant Setting</strong>
                  Abraham stories should be read in light of promise, land, seed, blessing, and faith.
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Book Setting</strong>
                  Judges should be read inside the cycle of covenant unfaithfulness, oppression, crying out, and deliverance.
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Canonical Setting</strong>
                  Davidic narratives look backward to God's promises and forward to the need for a faithful king.
                </div>
              </div>
              <div className="mt-4 bg-sky-50 border border-sky-100 rounded-xl p-4 text-sm text-slate-700 shadow-sm">
                <strong className="text-sky-900 block mb-1">Beginner Move: Use Three Context Circles</strong>
                State the immediate scene, the book or covenant setting, and the whole-canon movement in one sentence before you apply the passage. For example, Ruth is not only a story about loyalty; it also belongs to famine, covenant kindness, Bethlehem, David's line, and the larger hope of redemption.
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>2. Trace the Plot Movement</Strong>
              <p className="mt-1 mb-6">Plot movement shows how the story unfolds. Follow the movement from setting and conflict through climax and resolution so the theological point arises from the story's shape, not from a rushed moral lesson.</p>

              <div className="w-full bg-slate-900 rounded-2xl p-6 md:p-8 my-6 text-white shadow-lg overflow-x-auto">
                <h4 className="text-center font-bold text-indigo-300 uppercase tracking-widest text-sm mb-8">The Biblical Narrative Arc</h4>
                <div className="flex items-end justify-between min-w-[600px] gap-2 text-center pb-4 border-b-2 border-indigo-500/30 relative">
                  
                  {/* Arc Line Visualization */}
                  <svg className="absolute w-full h-full inset-0 z-0 opacity-40 pointer-events-none" preserveAspectRatio="none" viewBox="0 0 100 100">
                    <path d="M 0,90 Q 50,0 100,90" fill="none" stroke="#818cf8" strokeWidth="2" strokeDasharray="4 4" />
                  </svg>

                  <div className="flex-1 z-10 flex flex-col items-center">
                    <div className="w-4 h-4 rounded-full bg-indigo-400 mb-2 ring-4 ring-indigo-900"></div>
                    <div className="text-xs font-bold text-indigo-200">1. Exposition</div>
                    <div className="text-[10px] text-slate-400 mt-1">Setting the scene (time/place)</div>
                  </div>
                  
                  <div className="flex-1 z-10 flex flex-col items-center mb-8">
                    <div className="w-4 h-4 rounded-full bg-purple-400 mb-2 ring-4 ring-indigo-900"></div>
                    <div className="text-xs font-bold text-purple-200">2. Rising Action</div>
                    <div className="text-[10px] text-slate-400 mt-1">Conflict, threat, or sin is introduced</div>
                  </div>

                  <div className="flex-1 z-10 flex flex-col items-center mb-24 scale-110">
                    <div className="w-6 h-6 rounded-full bg-yellow-400 mb-2 shadow-[0_0_15px_rgba(250,204,21,0.5)] ring-4 ring-indigo-900"></div>
                    <div className="text-sm font-black text-yellow-300 uppercase">3. Climax</div>
                    <div className="text-[10px] text-slate-300 mt-1">The turning point of crisis</div>
                  </div>

                  <div className="flex-1 z-10 flex flex-col items-center mb-8">
                    <div className="w-4 h-4 rounded-full bg-teal-400 mb-2 ring-4 ring-indigo-900"></div>
                    <div className="text-xs font-bold text-teal-200">4. Falling Action</div>
                    <div className="text-[10px] text-slate-400 mt-1">The immediate aftermath</div>
                  </div>

                  <div className="flex-1 z-10 flex flex-col items-center">
                    <div className="w-4 h-4 rounded-full bg-green-400 mb-2 ring-4 ring-indigo-900"></div>
                    <div className="text-xs font-bold text-green-200">5. Resolution</div>
                    <div className="text-[10px] text-slate-400 mt-1">New normal & theological point</div>
                  </div>
                </div>
              </div>

              <div className="mt-6 bg-slate-50 p-5 rounded-xl border border-slate-200 shadow-sm text-sm">
                <strong className="text-indigo-900 block mb-3 text-base uppercase tracking-wider border-b border-slate-200 pb-2">Example: David and Goliath (1 Samuel 17)</strong>
                <ul className="space-y-3 text-slate-700">
                  <li><strong className="text-indigo-700">1. Exposition:</strong> Israel and the Philistines are camped on opposite hills in the Valley of Elah, engaged in a standoff.</li>
                  <li><strong className="text-indigo-700">2. Rising Action:</strong> The giant Goliath taunts the armies of Israel for 40 days, inciting fear. David arrives to deliver food, hears the blasphemy, and volunteers to fight.</li>
                  <li><strong className="text-indigo-700">3. Climax:</strong> David rejects Saul's worldly armor, faces Goliath in the name of the Lord of Hosts, and strikes the giant down with a single stone from his sling.</li>
                  <li><strong className="text-indigo-700">4. Falling Action:</strong> The Philistine army panics and flees in terror; the emboldened Israelites pursue them with a mighty shout.</li>
                  <li><strong className="text-indigo-700">5. Resolution:</strong> David brings Goliath's head to Jerusalem. The explicit theological point is declared by David himself before the climax: <em>"The battle is the Lord's."</em></li>
                </ul>
              </div>
            </div>
          </Li>
          
          <Li>
            <div className="w-full">
              <Strong>3. Distinguish Between Descriptive and Prescriptive</Strong>
              <p className="mt-2 text-slate-700">This is the most critical rule for reading biblical history. We must recognize the difference between what the Bible <em className="italic">records</em> and what it <em className="italic">commands</em>.</p>
              
              <div className="mt-4 grid gap-4">
                <div className="bg-orange-50 border border-orange-200 p-5 rounded-xl shadow-sm">
                  <h4 className="font-bold text-orange-800 flex items-center gap-2 mb-3 text-lg"><Eye className="w-5 h-5"/> Descriptive Texts</h4>
                  <p className="text-sm text-slate-700 mb-4 leading-relaxed">These passages simply recount what actually happened, portraying the raw reality of human history. They describe the actions of characters with their flaws. They do not carry the weight of a command.</p>
                  <div className="text-sm text-orange-900 bg-orange-100/60 p-3 rounded-lg border-l-4 border-orange-400">
                    <strong className="block mb-1">Examples:</strong>
                    <ul className="list-disc pl-4 space-y-1">
                      <li>Abraham lying to Pharaoh about his wife.</li>
                      <li>Jacob having multiple wives (polygamy).</li>
                      <li>Gideon asking God for a sign using a fleece.</li>
                    </ul>
                  </div>
                </div>
                
                <div className="bg-emerald-50 border border-emerald-200 p-5 rounded-xl shadow-sm">
                  <h4 className="font-bold text-emerald-800 flex items-center gap-2 mb-3 text-lg"><ScrollText className="w-5 h-5"/> Prescriptive Texts</h4>
                  <p className="text-sm text-slate-700 mb-4 leading-relaxed">These passages outline what <em className="italic">ought</em> to happen. They contain explicit commands, moral imperatives, or divine instructions meant to dictate the behavior of God's people.</p>
                  <div className="text-sm text-emerald-900 bg-emerald-100/60 p-3 rounded-lg border-l-4 border-emerald-400">
                    <strong className="block mb-1">Examples:</strong>
                    <ul className="list-disc pl-4 space-y-1">
                      <li>The Ten Commandments (Exodus 20).</li>
                      <li>Jesus: "Love your neighbor as yourself."</li>
                      <li>Paul: "Do not let the sun go down while you are still angry."</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div className="mt-5 text-sm font-medium text-slate-800 bg-slate-100 p-4 rounded-lg border-l-4 border-indigo-600 shadow-sm">
                <strong className="text-indigo-900">The Interpretive Danger:</strong> Many people read narratives prescriptively. They assume because Jacob had two wives, polygamy is acceptable; or because Gideon used a fleece, we should "put out a fleece" to find God's will. Never turn a historical description of a flawed hero into a moral prescription for your life! The meaning of narrative derives primarily from the actions of the characters, which show us how to live or <em>how not</em> to live.
              </div>
            </div>
          </Li>
          
          <Li>
            <div className="w-full">
              <Strong>4. Identify the Narrator's Theological Emphasis</Strong>
              <p className="mt-2 text-slate-700">Narratives teach theology implicitly. The narrator usually stays out of the way, allowing the historical events to speak for themselves. You can identify the theological intent by observing what the author chooses to <strong>include, omit, repeat, slow down, speed up, or emphasize</strong> through structure.</p>
              
              <div className="bg-indigo-50 border border-indigo-200 p-5 rounded-xl mt-4 shadow-sm text-sm">
                <strong className="text-indigo-900 block mb-2 text-base">Example: The Books of Chronicles vs. Samuel</strong>
                <p className="text-slate-700 mb-3">If you read 2 Samuel, you receive a full historical account of David's life, including his terrible sin with Bathsheba, his murder of Uriah, and the resulting civil war with his son Absalom. However, the books of 1 & 2 Chronicles <em>completely omit</em> David's sin and family dysfunction.</p>
                <p className="text-slate-700"><strong>Why?</strong> Was the author hiding the truth? No. Chronicles was written much later, after the Babylonian exile, to a discouraged, rebuilding remnant of Jews. The author's theological intent was to encourage them by focusing on the ideal Davidic covenant, the proper worship at the temple, and the hope of a coming Messiah. The author carefully selected and arranged specific historical facts to preach a specific theological message of hope to a broken people.</p>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>5. Read OT Narrative Through Christ Responsibly</Strong>
              <p className="mt-2 text-slate-700">Jesus Himself taught that the entire Old Testament ultimately points to Him (Luke 24:27, 44). While we must respect the original historical context and avoid forcing imaginative, disconnected allegories onto the text, we must also read Old Testament narratives in light of the whole biblical canon. Here are the primary guidelines for responsibly identifying Christ in the Old Testament:</p>
              
              <div className="mt-5 grid gap-4">
                <div className="bg-white border-l-4 border-indigo-500 p-5 rounded-r-xl shadow-sm">
                  <h4 className="font-bold text-indigo-900 text-base mb-1">A. Promise and Fulfillment</h4>
                  <p className="text-sm text-slate-600">Trace the explicit promises, covenants, and prophetic declarations that anticipate a coming Savior. This includes the "Seed of the woman" (Gen 3:15), the blessing of Abraham to all nations, and the eternal throne promised to David.</p>
                </div>

                <div className="bg-white border-l-4 border-emerald-500 p-5 rounded-r-xl shadow-sm">
                  <h4 className="font-bold text-emerald-900 text-base mb-2">B. Typology (Types and Shadows)</h4>
                  <p className="text-sm text-slate-600 mb-3">Look for real historical <strong>persons, events, or institutions</strong> that God sovereignly ordained to foreshadow the person and work of Jesus Christ.</p>
                  <ul className="text-sm text-slate-700 list-disc pl-5 space-y-2">
                    <li><strong>Persons:</strong> Figures who served as Prophets, Priests, or Kings. Examples: David as the suffering king, Melchizedek as the eternal priest, Moses as the mediator.</li>
                    <li><strong>Events:</strong> Historical occurrences of redemption and deliverance. Examples: The Exodus from Egypt, Noah's ark saving humanity from judgment.</li>
                    <li><strong>Institutions:</strong> Cultural or religious elements ordained by God. Examples: The sacrificial system, the Passover lamb, the Bronze Serpent, the Temple (where God dwells with man).</li>
                  </ul>
                </div>

                <div className="bg-white border-l-4 border-amber-500 p-5 rounded-r-xl shadow-sm">
                  <h4 className="font-bold text-amber-900 text-base mb-1">C. Theophanies and Christophanies</h4>
                  <p className="text-sm text-slate-600">Identify instances where the pre-incarnate Christ appears in the Old Testament narrative. He is often identified as the "Angel of the LORD" or the "Commander of the LORD's army" (Joshua 5:13-15) who accepts worship and speaks as God.</p>
                </div>

                <div className="bg-white border-l-4 border-rose-500 p-5 rounded-r-xl shadow-sm">
                  <h4 className="font-bold text-rose-900 text-base mb-1">D. Thematic Resolution (Redemptive History)</h4>
                  <p className="text-sm text-slate-600">Observe how OT narratives present human failure and the desperate need for a perfect Redeemer. The recurring cycle of sin, judgment, and the inadequacy of human judges and kings creates a "Christ-shaped vacuum" that only Jesus can perfectly fill.</p>
                </div>
              </div>

              <div className="mt-6 grid md:grid-cols-2 gap-4">
                <div className="bg-rose-50 border border-rose-200 rounded-xl p-5 shadow-sm">
                  <strong className="text-rose-900 block mb-2 text-base">Avoid: Allegorizing the Narrative</strong>
                  <p className="text-sm text-slate-700 mb-3">Allegorizing happens when we leave the literary and historical meaning of the story to search for hidden spiritual meanings in every small detail. That strips the narrative away from authorial intent.</p>
                  <strong className="text-rose-800 block text-xs uppercase tracking-wider mb-1">Guardrails</strong>
                  <ul className="list-disc pl-5 text-sm text-slate-700 space-y-1">
                    <li>Respect the historical and literary context first.</li>
                    <li>Do not assign major theological meaning to incidental props or numbers.</li>
                    <li>Make sure the interpretation follows the narrator's actual emphasis.</li>
                  </ul>
                  <div className="mt-3 bg-white border border-rose-100 rounded-lg p-3 text-xs text-rose-800 italic">
                    <strong>Common mistake:</strong> Turning David's five stones into five secret virtues instead of reading the scene around God's honor, David's faith, and the Lord's deliverance.
                  </div>
                </div>

                <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-5 shadow-sm">
                  <strong className="text-emerald-900 block mb-2 text-base">Embrace: Biblical Typology</strong>
                  <p className="text-sm text-slate-700 mb-3">Typology reads real historical persons, events, and institutions as God-designed patterns that point forward to a greater fulfillment, usually centered in Christ.</p>
                  <strong className="text-emerald-800 block text-xs uppercase tracking-wider mb-1">How to Identify It</strong>
                  <ul className="list-disc pl-5 text-sm text-slate-700 space-y-1">
                    <li><strong>Historical reality:</strong> The type is a real person, event, or institution.</li>
                    <li><strong>Divine design:</strong> The pattern is not an accidental resemblance.</li>
                    <li><strong>Escalation:</strong> The fulfillment is greater than the earlier pattern.</li>
                    <li><strong>Biblical confirmation:</strong> Scripture itself gives warrant for the connection.</li>
                  </ul>
                  <div className="mt-3 bg-white border border-emerald-100 rounded-lg p-3 text-xs text-emerald-800 italic">
                    <strong>Example:</strong> The Passover lamb was a real sacrifice in Israel's history that the New Testament presents as pointing to Christ, the Lamb of God.
                  </div>
                </div>
              </div>

              <div className="bg-slate-50 border border-slate-200 p-5 rounded-xl mt-6 shadow-inner text-sm">
                <strong className="text-slate-900 block mb-3 text-base uppercase tracking-wider border-b border-slate-200 pb-2">Typology Example: The Narrative of Joseph (Genesis 37-50)</strong>
                <p className="text-slate-700 mb-3">We can certainly draw powerful moral lessons from Joseph (e.g., fleeing sexual temptation, forgiving those who hurt us). But the deeper redemptive-historical reading sees Joseph as a "type" or foreshadowing of Christ:</p>
                <ul className="list-disc pl-5 space-y-2 text-slate-700 mb-4">
                  <li>Just as Joseph was the beloved son, betrayed by his brothers for pieces of silver, and thrown into a pit (symbolic of death)...</li>
                  <li>He was eventually raised up to the right hand of the supreme throne (Pharaoh)...</li>
                  <li>...in order to become the savior of the world from famine, including saving the very brothers who betrayed him.</li>
                </ul>
                <p className="text-slate-800 font-medium bg-white p-3 rounded border border-slate-100"><strong>Conclusion:</strong> So too, Jesus was betrayed by His brethren, suffered, and was exalted to the right hand of the Father to save us. The historical narrative of Joseph is a beautiful, micro-version of the gospel story!</p>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>6. Read Characters Through Contrast, Dialogue, and Development</Strong>
              <p className="mt-2 text-slate-700">Narrative characters are not cardboard heroes or villains. Study what they say, what they do, how they change, how other characters contrast with them, and how the narrator evaluates them directly or indirectly.</p>
              <div className="mt-4 bg-indigo-50 border border-indigo-200 p-5 rounded-xl shadow-sm text-sm text-slate-700">
                <strong className="text-indigo-900 block mb-2">Example: Saul and David</strong>
                Saul often sees visible power, reputation, and threat. David often sees covenant, God's honor, and the Lord's ability to save. The contrast teaches theology through characterization rather than through an abstract lecture.
              </div>
              <div className="mt-4 grid md:grid-cols-4 gap-3 text-sm">
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Speech</strong>
                  What does the character's language reveal about faith, fear, pride, repentance, or misunderstanding?
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Contrast</strong>
                  Which character is placed beside another so the reader can compare their responses to God?
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Development</strong>
                  Does the character grow, harden, repent, decline, or expose a repeated pattern?
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Evaluation</strong>
                  Does the narrator, another character, or God directly approve or condemn the action?
                </div>
              </div>
              <div className="mt-4 bg-rose-50 border border-rose-100 rounded-xl p-4 text-sm text-slate-700 shadow-sm">
                <strong className="text-rose-900 block mb-1">Common Mistake</strong>
                Do not assume the main character is always the moral model. Biblical narrative often shows flawed people so that God's faithfulness, mercy, judgment, and covenant purposes become clearer.
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>7. Treat Speeches, Prayers, and Songs as Interpretive Clues</Strong>
              <p className="mt-2 text-slate-700">Biblical narratives often interpret themselves through key speeches, prayers, blessings, laments, and songs. These moments tell the reader how to understand the events around them.</p>
              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-emerald-900 block mb-1">Prayer</strong>
                  Hannah's prayer in 1 Samuel 2 interprets reversal, kingship, and God's power before Israel's monarchy unfolds.
                </div>
                <div className="bg-amber-50 border border-amber-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-amber-900 block mb-1">Speech</strong>
                  David's words before facing Goliath explain that the battle belongs to the Lord.
                </div>
                <div className="bg-sky-50 border border-sky-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-sky-900 block mb-1">Song</strong>
                  Exodus 15 interprets the Red Sea deliverance as the Lord's victory over hostile power.
                </div>
              </div>
              <div className="mt-4 bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
                <strong className="text-indigo-900 block mb-3">Why These Moments Matter</strong>
                <div className="grid md:grid-cols-2 gap-3 text-sm text-slate-700">
                  <div className="bg-slate-50 border border-slate-200 rounded-lg p-3">
                    <strong className="text-slate-900 block mb-1">They summarize meaning</strong>
                    A speech may tell you what the battle, crisis, or deliverance was really about.
                  </div>
                  <div className="bg-slate-50 border border-slate-200 rounded-lg p-3">
                    <strong className="text-slate-900 block mb-1">They forecast themes</strong>
                    A prayer or song near the beginning of a book often prepares readers for what will unfold later.
                  </div>
                  <div className="bg-slate-50 border border-slate-200 rounded-lg p-3">
                    <strong className="text-slate-900 block mb-1">They reveal theology</strong>
                    Characters may confess God's character, covenant faithfulness, justice, mercy, or kingship.
                  </div>
                  <div className="bg-slate-50 border border-slate-200 rounded-lg p-3">
                    <strong className="text-slate-900 block mb-1">They expose hearts</strong>
                    Dialogue often reveals whether a person is trusting God, manipulating others, repenting, or resisting.
                  </div>
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>8. Use Historical, Cultural, Political, and Geographical Background Carefully</Strong>
              <p className="mt-2 text-slate-700">Background can clarify a narrative, but it should serve the inspired text rather than overpower it. Use geography, customs, politics, archaeology, and ancient culture to illuminate details the author already made important.</p>
              <div className="mt-4 bg-amber-50 border-l-4 border-amber-500 p-5 rounded-r-xl shadow-sm text-sm text-slate-700">
                <strong className="text-amber-900 block mb-1">Careful Use</strong>
                Background helps explain why city gates, wells, birthrights, land boundaries, kingship, exile, or temple worship matter. But if a background claim does not help you read the actual passage more faithfully, keep it secondary.
              </div>
              <div className="mt-4 grid md:grid-cols-3 gap-3 text-sm">
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">1. Start with the Text</strong>
                  Notice what the author already highlights before reaching for outside background.
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">2. Add Background Carefully</strong>
                  Use geography, customs, politics, and archaeology to clarify details, not to replace the passage's point.
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">3. Return to the Text</strong>
                  Ask how the background actually strengthens observation, interpretation, or application.
                </div>
              </div>
              <div className="mt-4 bg-slate-900 text-white rounded-xl p-5 shadow-lg text-sm">
                <strong className="text-emerald-300 block mb-2">Good Use of Background</strong>
                <p className="text-slate-100 leading-relaxed">
                  Knowing that city gates were places of legal and civic activity helps explain why Boaz handles redemption at the gate in Ruth 4. The background serves the story's visible concern: public redemption, witness, covenant loyalty, and family restoration.
                </p>
              </div>
            </div>
          </Li>
        </Ul>

      </div>
    )
  },
  {
    id: 'history-case-study',
    sectionNum: '4.1',
    title: 'Case Study',
    icon: Search,
    isSubSection: true,
    content: ({ navigate }) => <CaseStudyPage study={caseStudies.history} navigate={navigate} />
  },
  {
    id: 'gospels-acts',
    sectionNum: '5',
    title: 'Interpreting the Gospels and Acts',
    icon: BookOpen,
    content: GospelsActsSection
  },
  {
    id: 'gospels-acts-case-study',
    sectionNum: '5.1',
    title: 'Case Study',
    icon: Search,
    isSubSection: true,
    content: ({ navigate }) => <CaseStudyPage study={caseStudies.gospelsActs} navigate={navigate} />
  },
  
  {
    id: 'epistles',
    sectionNum: '6',
    title: 'Interpreting the Epistles',
    icon: Mail,
    content: ({ navigate }) => (
      <div className="animate-in fade-in duration-500">
        <div className="mb-8">
          <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 6</div>
          <H1>Interpreting the Epistles</H1>
        </div>

        <LearningSteps
          title="Epistles Learning Path"
          intro="Beginners should learn how letters work and start with phrasing. Arcing, bracketing, relationships, and rhetorical forms are excellent advanced tools."
          steps={learningStepPresets.epistles}
        />
        
        <H2>Overview: Letters Written for Real Churches</H2>
        <P>The Epistles are letters written by early Christian leaders to specific local churches or individuals. They teach through pastoral argument: doctrine is explained, problems are addressed, and believers are called to live together in light of the gospel.</P>
        <P><Strong>Books Included:</Strong> Romans through Jude.</P>

        <EpistleLearningPath navigate={navigate} />
        
        <Quote>
          <p className="mb-2">"The Epistles are fundamentally <em className="italic">occasional documents</em>... they were written to address specific situations, questions, or crises. They contain 'task theology'."</p>
          <footer className="text-sm font-bold text-indigo-800">— Gordon D. Fee</footer>
        </Quote>

        <H2>Specific Rules for Interpreting the Epistles</H2>

        <Ul>
          <Li>
            <div className="w-full">
              <Strong>1. Read the Letter as Occasional Communication</Strong>
              <p className="mt-2 text-slate-700">We are reading someone else's mail. Epistles were prompted by real questions, conflicts, pressures, false teaching, suffering, gratitude, or pastoral concern. Start by asking who wrote, who received, what situation is visible, and what response the author wants from the hearers.</p>
              <div className="mt-4 grid md:grid-cols-3 gap-3 text-sm">
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Sender and Audience</strong>
                  Notice how the author describes himself and the recipients.
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Visible Situation</strong>
                  Look for reports, questions, rebukes, encouragements, opponents, and repeated concerns.
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Pastoral Goal</strong>
                  Ask what faith, correction, endurance, unity, or obedience the letter is trying to produce.
                </div>
              </div>
              <details className="group mt-4 bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                <summary className="cursor-pointer list-none flex items-center justify-between gap-3">
                  <strong className="text-indigo-900">Optional Occasion and Dating Guide</strong>
                  <ChevronDown className="w-5 h-5 text-indigo-600 transition-transform group-open:rotate-180" />
                </summary>
                <EpistleOccasionGuide />
              </details>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>2. Follow the Whole-Letter Movement</Strong>
              <p className="mt-2 text-slate-700">Do not treat an epistle as a basket of isolated memory verses. Letters move from opening to prayer, argument, exhortation, and closing. Before interpreting a paragraph, skim the whole letter and summarize its major movement in a few sentences.</p>
              <EpistleLetterFormSummary />
              <div className="mt-4 bg-indigo-50 border border-indigo-100 p-4 rounded-xl text-sm text-slate-700 shadow-sm">
                <strong className="text-indigo-900 block mb-1">Quick Examples</strong>
                Galatians 1:6-9 sounds severe because the whole letter defends the gospel of grace. Romans 12:1 begins with "therefore," pulling the ethical appeal out of Romans 1-11. Ephesians 4:1 turns the doctrine of chapters 1-3 into the walk of chapters 4-6.
              </div>
            </div>
          </Li>
          
          <Li>
            <div className="w-full">
              <Strong>3. Trace the Paragraph Logic</Strong>
              <p className="mt-2 text-slate-700">Think in paragraphs before isolated verses. Find the main command or claim, then ask how the nearby clauses support it. Grammar matters because theology often travels through conjunctions, pronouns, repeated words, participles, prepositional phrases, and long sentence units.</p>
              <div className="mt-4 grid md:grid-cols-3 gap-3 text-sm">
                <div className="bg-white border-t-4 border-emerald-500 p-4 rounded-b-xl shadow-sm">
                  <strong className="text-emerald-900 block mb-1">Ground</strong>
                  for, because, since: What reason supports the claim?
                </div>
                <div className="bg-white border-t-4 border-indigo-500 p-4 rounded-b-xl shadow-sm">
                  <strong className="text-indigo-900 block mb-1">Inference</strong>
                  therefore, so, then: What conclusion follows?
                </div>
                <div className="bg-white border-t-4 border-purple-500 p-4 rounded-b-xl shadow-sm">
                  <strong className="text-purple-900 block mb-1">Contrast</strong>
                  but, rather, instead: What alternative is being rejected or replaced?
                </div>
                <div className="bg-white border-t-4 border-amber-500 p-4 rounded-b-xl shadow-sm">
                  <strong className="text-amber-900 block mb-1">Means</strong>
                  by, through, in this way: How does the action happen?
                </div>
                <div className="bg-white border-t-4 border-sky-500 p-4 rounded-b-xl shadow-sm">
                  <strong className="text-sky-900 block mb-1">Purpose or Result</strong>
                  so that, in order that: What is the goal or outcome?
                </div>
                <div className="bg-white border-t-4 border-slate-500 p-4 rounded-b-xl shadow-sm">
                  <strong className="text-slate-900 block mb-1">Explanation</strong>
                  that is, in other words: What is being clarified?
                </div>
              </div>
              {navigate && (
                <button
                  type="button"
                  onClick={() => navigate('grammar-conjunctions')}
                  className="mt-4 bg-white border-2 border-indigo-200 text-indigo-700 px-4 py-3 rounded-xl font-bold hover:border-indigo-500 hover:text-indigo-900 transition-all text-sm"
                >
                  Open Grammar & Conjunctions
                </button>
              )}
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>4. Let Gospel Indicatives Ground Imperatives</Strong>
              <p className="mt-2 text-slate-700">In the Epistles, commands usually rest on what God has already done in Christ. Do not detach imperatives from indicatives. Christian obedience is not moralism; it is the grateful, Spirit-enabled response of people who have been redeemed, united to Christ, and incorporated into His body.</p>
              <div className="mt-4 grid md:grid-cols-3 gap-4">
                <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl text-sm text-slate-700 shadow-sm">
                  <strong className="text-emerald-900 block mb-1">Romans</strong>
                  Romans 1-11 unfolds sin, grace, justification, and mercy; Romans 12 begins the ethical appeal.
                </div>
                <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl text-sm text-slate-700 shadow-sm">
                  <strong className="text-emerald-900 block mb-1">Ephesians</strong>
                  Ephesians 1-3 announces identity and unity in Christ; Ephesians 4-6 describes the walk worthy of that calling.
                </div>
                <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl text-sm text-slate-700 shadow-sm">
                  <strong className="text-emerald-900 block mb-1">Colossians</strong>
                  Colossians 3 starts with resurrection identity before commanding the putting off and putting on of a new life.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>5. Cross the Principlizing Bridge Carefully</Strong>
              <p className="mt-2 text-slate-700">Because the Epistles address specific first-century churches, application requires careful travel from their situation to ours. Some commands carry over very directly because they are repeated across Scripture and grounded in God's character. Other instructions are tied to ancient social customs, local disputes, or first-century pressures. In both cases, the key is to find the author's theological reason before deciding how the passage should be obeyed today.</p>
              
              <div className="mt-5 bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
                <strong className="text-indigo-950 block text-lg mb-3">The Five-Step Bridge</strong>
                <div className="grid sm:grid-cols-2 xl:grid-cols-3 gap-4 text-sm">
                  {[
                    {
                      title: "Original Meaning",
                      body: "What did this instruction mean to the first readers?"
                    },
                    {
                      title: "Cultural Distance",
                      body: "What is different between their world and ours?"
                    },
                    {
                      title: "Theological Principle",
                      body: "What enduring truth or value supports the command?"
                    },
                    {
                      title: "Canonical Check",
                      body: "How does the rest of Scripture confirm or clarify it?"
                    },
                    {
                      title: "Modern Faithfulness",
                      body: "What would obedience look like in this setting?"
                    }
                  ].map((step, index) => (
                    <div key={step.title} className="bg-indigo-50 border border-indigo-100 rounded-xl p-4 shadow-sm">
                      <span className="bg-indigo-600 text-white w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold mb-3">{index + 1}</span>
                      <strong className="text-indigo-900 block mb-2">{step.title}</strong>
                      <p className="text-slate-700 leading-relaxed">{step.body}</p>
                    </div>
                  ))}
                </div>
              </div>

              <div className="mt-5 grid md:grid-cols-2 gap-4">
                <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-5 shadow-sm">
                  <strong className="text-emerald-950 block text-base mb-2">Direct Commands Still Need Context</strong>
                  <p className="text-sm text-slate-700 leading-relaxed">Commands such as love one another, forgive, flee sexual immorality, pray, rejoice, and pursue holiness carry directly into Christian life. Still, context tells you how the command functions in that letter and what gospel reason supports it.</p>
                </div>
                <div className="bg-amber-50 border border-amber-100 rounded-xl p-5 shadow-sm">
                  <strong className="text-amber-950 block text-base mb-2">Culturally Located Instructions Need Translation</strong>
                  <p className="text-sm text-slate-700 leading-relaxed">Instructions about idol food, holy kisses, head coverings, travel support, or household structures must be read in their first-century setting before translating the principle into faithful modern practice.</p>
                </div>
              </div>

              <div className="mt-5 grid lg:grid-cols-3 gap-4 text-sm">
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-900 block mb-2">Example: 1 Corinthians 8</strong>
                  <p className="text-slate-700 leading-relaxed">Paul's counsel about food offered to idols is not copied woodenly into every situation. The enduring principle is that Christian freedom must be governed by love for the spiritual good of others.</p>
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-900 block mb-2">Example: Romans 14</strong>
                  <p className="text-slate-700 leading-relaxed">Disputes over foods and days teach believers to welcome one another, honor conscience before the Lord, and refuse to destroy another believer over secondary matters.</p>
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-900 block mb-2">Example: Repeated Moral Commands</strong>
                  <p className="text-slate-700 leading-relaxed">Commands grounded in Christlike love, holiness, truth, forgiveness, and unity usually cross the bridge directly, though the concrete expression still requires wisdom.</p>
                </div>
              </div>

              <div className="mt-5 bg-rose-50 border border-rose-100 rounded-xl p-5 shadow-sm">
                <strong className="text-rose-950 block text-base mb-3">Practical Safeguards</strong>
                <div className="grid md:grid-cols-3 gap-3 text-sm text-slate-700">
                  <div className="bg-white border border-rose-100 rounded-lg p-3">
                    <strong className="text-rose-800 block mb-1">Avoid wooden copying</strong>
                    Do not assume every first-century form must be reproduced exactly.
                  </div>
                  <div className="bg-white border border-rose-100 rounded-lg p-3">
                    <strong className="text-rose-800 block mb-1">Avoid quick dismissal</strong>
                    Do not call a command cultural simply because it is uncomfortable.
                  </div>
                  <div className="bg-white border border-rose-100 rounded-lg p-3">
                    <strong className="text-rose-800 block mb-1">Find the reason</strong>
                    Look for the author's because, for, so that, or gospel rationale.
                  </div>
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>6. Apply to the Church, Not Only Isolated Individuals</Strong>
              <p className="mt-2 text-slate-700">Most Epistles were written to churches, not private devotional notebooks. Even when a command applies personally, ask how it forms the shared worship, unity, witness, holiness, leadership, generosity, and endurance of God's people together.</p>
              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Watch the Plurals</strong>
                  Many "you" commands address the whole congregation.
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Look for One Another</strong>
                  Love, forgiveness, service, unity, and correction are often communal practices.
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Apply in Community</strong>
                  Ask what this passage changes in church life, not only private spirituality.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>7. Recognize Rhetorical and Literary Forms</Strong>
              <p className="mt-2 text-slate-700">Epistles were written to be heard, remembered, argued through, and obeyed. Their literary and rhetorical forms are not decorative extras. They shape how the author persuades the church, highlights the main point, answers objections, summarizes theology, and presses a faithful response.</p>
              <div className="mt-5 space-y-5">
                {epistleRhetoricalFormGroups.map((group) => {
                  const styles = epistleRhetoricalColorStyles[group.color];
                  return (
                    <section key={group.group} className={`${styles.section} border rounded-2xl p-5 shadow-sm`}>
                      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-3 mb-4">
                        <div>
                          <strong className={`${styles.title} block text-xl mb-1`}>{group.group}</strong>
                          <p className="text-sm text-slate-700 leading-relaxed">{group.description}</p>
                        </div>
                        <span className={`${styles.chip} text-white px-3 py-1 rounded-full text-xs font-black uppercase tracking-widest shrink-0`}>Epistles</span>
                      </div>
                      <div className="grid lg:grid-cols-2 gap-4">
                        {group.forms.map((form) => (
                          <div key={form.name} className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                            <strong className="text-indigo-950 block text-base mb-2">{form.name}</strong>
                            <p className="text-sm text-slate-700 leading-relaxed mb-3">{form.definition}</p>
                            <div className="grid sm:grid-cols-2 gap-3 text-xs text-slate-700">
                              <div className="bg-slate-50 border border-slate-100 rounded-lg p-3">
                                <strong className="text-slate-900 block mb-1">Look For</strong>
                                {form.lookFor}
                              </div>
                              <div className="bg-slate-50 border border-slate-100 rounded-lg p-3">
                                <strong className="text-slate-900 block mb-1">Why It Matters</strong>
                                {form.why}
                              </div>
                            </div>
                            <div className="mt-3 bg-indigo-50 border border-indigo-100 rounded-lg p-3 text-xs text-slate-700 italic">
                              <strong className="text-indigo-900 not-italic">Example: </strong>{form.example}
                            </div>
                          </div>
                        ))}
                      </div>
                    </section>
                  );
                })}
              </div>
            </div>
          </Li>
        </Ul>
      </div>
    )
  },
  {
    id: 'argument-diagramming',
    sectionNum: '6.1',
    title: 'Argument Diagramming',
    icon: GitMerge,
    isSubSection: true,
    content: ArgumentDiagrammingOverview
  },
  {
    id: 'grammar-conjunctions',
    sectionNum: '6.2',
    title: 'Grammar & Conjunctions',
    icon: ListTree,
    isSubSection: true,
    content: GrammarConjunctionsSection
  },
  {
    id: 'arcing',
    sectionNum: '6.3',
    title: 'Arcing',
    icon: GitMerge,
    isSubSection: true,
    content: ArcingSection
  },
  {
    id: 'arcing-practice',
    sectionNum: '6.3.1',
    title: 'Arcing Practice',
    icon: GitMerge,
    isSubSection: true,
    isNestedSubSection: true,
    content: ArcingPracticeSection
  },
  {
    id: 'bracketing',
    sectionNum: '6.4',
    title: 'Bracketing',
    icon: ListTree,
    isSubSection: true,
    content: BracketingSection
  },
  {
    id: 'bracketing-practice',
    sectionNum: '6.4.1',
    title: 'Bracketing Practice',
    icon: ListTree,
    isSubSection: true,
    isNestedSubSection: true,
    content: BracketingPracticeSection
  },
  {
    id: 'phrasing',
    sectionNum: '6.5',
    title: 'Phrasing',
    icon: AlignLeft,
    isSubSection: true,
    content: PhrasingSection
  },
  {
    id: 'phrasing-practice',
    sectionNum: '6.5.1',
    title: 'Phrasing Practice',
    icon: AlignLeft,
    isSubSection: true,
    isNestedSubSection: true,
    content: PhrasingPracticeSection
  },
  {
    id: 'phrasing-relationships',
    sectionNum: '6.5.2',
    title: 'Phrasing Relationships',
    icon: AlignLeft,
    isSubSection: true,
    isNestedSubSection: true,
    content: PhrasingRelationshipsSection
  },
  {
    id: 'epistles-case-study',
    sectionNum: '6.6',
    title: 'Case Study',
    icon: Search,
    isSubSection: true,
    content: ({ navigate }) => <CaseStudyPage study={caseStudies.epistles} navigate={navigate} />
  },
  
  {
    id: 'law',
    sectionNum: '7',
    title: 'Interpreting the Law',
    icon: Scale,
    content: () => (
      <div className="animate-in fade-in duration-500">
        <div className="mb-8">
          <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 7</div>
          <H1>Interpreting the Law</H1>
        </div>
        <LearningSteps
          title="Law Learning Path"
          intro="Start with the value the command protects. Then move through covenant context, New Testament fulfillment, and faithful application."
          steps={learningStepPresets.law}
        />
        <H2>Overview: The Covenantal Framework of Torah</H2>
        <P>When modern readers hear the word "law," they typically think of civil legislation or courtroom jurisprudence. However, the biblical Law refers primarily to the collection of stipulations given to Israel through Moses.</P> 

        <div className="bg-indigo-900 text-white p-6 rounded-2xl shadow-lg my-6">
          <strong className="text-yellow-400 block text-lg mb-2">The Law and the Mosaic Covenant</strong>
          <p className="text-indigo-100 text-sm leading-relaxed mb-3">Old Testament law is not isolated; it is firmly embedded into the story of Israel's theological history. The law is tightly intertwined with the Mosaic Covenant, which in turn is tightly associated with Israel's conquest and occupation of the Promised Land.</p>
          <ul className="text-sm text-indigo-200 list-disc pl-5 space-y-1">
            <li>The blessings from the Mosaic covenant are strictly <strong>conditional</strong> based on obedience.</li>
            <li>The Mosaic covenant is <strong>no longer a functional covenant</strong> for the New Testament church.</li>
            <li>We must interpret the law through the grid of New Testament teaching.</li>
          </ul>
          <div className="bg-indigo-950 p-3 rounded-lg border border-indigo-800 text-xs italic text-indigo-300 mt-4">
            <strong>Example:</strong> In Deuteronomy 28, God promises literal, material blessings (abundant crops, defeat of enemies, rain) if Israel obeys the law, and horrific physical curses (famine, plague, exile) if they disobey. These terms were strictly bound to the ancient nation of Israel and the physical Promised Land, not universal promises to modern Christians.
          </div>
        </div>

        <P>To interpret the biblical Law correctly, we must recognize that it was not given as a checklist of rules for the Israelites to earn their salvation. Rather, the Law was given <em className="italic">after</em> God had already miraculously rescued them from slavery in Egypt. Roy E. Gane, in <em className="italic">Old Testament Law for Christians</em>, highlights that the Law was an expression of divine grace—teaching a redeemed people how to live in relationship with a holy God.</P>
        
        <Quote>
          <p className="mb-2">"The Law was never intended to be a means of achieving salvation. It was a covenantal response to the grace already shown in the Exodus."</p>
          <footer className="text-sm font-bold text-indigo-800">— Jason S. DeRouchie</footer>
        </Quote>

        <H2>Specific Rules for Interpreting the Law</H2>

        <Ul>
          <Li>
            <div className="w-full">
              <Strong>1. Recognize the Traditional Distinctions</Strong>
              <p className="mt-2 text-slate-700">Start by asking what kind of law you are reading. This keeps us from treating every Old Testament command in the exact same way.</p>
              
              <div className="mt-4 space-y-4">
                <div className="bg-white p-5 border border-slate-200 border-l-4 border-l-purple-500 rounded-xl shadow-sm">
                  <h4 className="font-bold text-purple-900 text-lg flex items-center gap-2 mb-2">
                    <Scale className="w-5 h-5 text-purple-600"/> Moral Law
                  </h4>
                  <p className="text-sm text-slate-700 leading-relaxed">Moral law reflects God's character and His will for human life. The Ten Commandments summarize this moral vision: love for God and love for neighbor.</p>
                </div>

                <div className="bg-white p-5 border border-slate-200 border-l-4 border-l-blue-500 rounded-xl shadow-sm">
                  <h4 className="font-bold text-blue-900 text-lg mb-2">Civil Law</h4>
                  <p className="text-sm text-slate-700">Civil laws governed Israel as an ancient nation. We do not apply them as Israel's national law today, but they teach values such as justice, restitution, fairness, and protection for the vulnerable.</p>
                </div>

                <div className="bg-white p-5 border border-slate-200 border-l-4 border-l-teal-500 rounded-xl shadow-sm">
                  <h4 className="font-bold text-teal-900 text-lg mb-2">Ceremonial Law</h4>
                  <p className="text-sm text-slate-700">Ceremonial laws involved sacrifices, priests, purity, festivals, and sanctuary worship. They point forward to Christ's sacrifice, priesthood, cleansing, and saving work.</p>
                </div>
              </div>
            </div>
          </Li>
          
          <Li>
            <div className="w-full">
              <Strong>2. Principlize for Contemporary Application</Strong>
              <p className="mt-2 text-slate-700">Many Old Testament laws are not copied directly into modern life, but they still teach us how to live wisely. To apply a law today, find the principle underneath the ancient command and then translate that principle into our situation.</p>
              
              <div className="grid md:grid-cols-2 gap-4 mt-4 mb-5">
                <div className="bg-emerald-50 border border-emerald-100 p-5 rounded-xl shadow-sm">
                  <h4 className="font-bold text-emerald-900 text-base mb-2">Simple Process</h4>
                  <ol className="list-decimal pl-4 text-sm text-slate-700 space-y-1.5 marker:text-emerald-500 font-medium">
                    <li><span className="font-normal"><strong>Read the command:</strong> What does it actually say?</span></li>
                    <li><span className="font-normal"><strong>Find the value:</strong> What good thing is God protecting?</span></li>
                    <li><span className="font-normal"><strong>Check the context:</strong> Why did ancient Israel need this law?</span></li>
                    <li><span className="font-normal"><strong>Apply the value:</strong> What would faithfulness look like today?</span></li>
                  </ol>
                </div>

                <div className="bg-indigo-50 border border-indigo-100 p-5 rounded-xl shadow-sm">
                  <h4 className="font-bold text-indigo-900 text-base mb-2">The Key Question</h4>
                  <p className="text-sm text-slate-700">Ask: <em>What did this law protect, repair, prevent, or promote?</em> Once you see that, the modern application becomes much clearer.</p>
                </div>
              </div>

              <div className="bg-slate-50 border border-slate-200 rounded-xl p-6 mt-5 shadow-inner">
                <h4 className="font-bold text-indigo-900 mb-4 text-sm uppercase tracking-widest border-b border-slate-200 pb-2">Quick Examples</h4>
                <div className="grid md:grid-cols-3 gap-3 text-sm text-slate-700">
                  <div className="bg-white p-4 rounded-xl border border-slate-100 shadow-sm"><strong className="text-indigo-700 block mb-1">Parapet: Deut. 22:8</strong>Build a roof wall. <br/><span className="text-slate-500">Value:</span> protect people from preventable harm. <br/><span className="text-slate-500">Today:</span> railings, pool fences, safe workplaces.</div>
                  <div className="bg-white p-4 rounded-xl border border-slate-100 shadow-sm"><strong className="text-indigo-700 block mb-1">Gleaning: Lev. 19:9-10</strong>Leave field edges for the poor. <br/><span className="text-slate-500">Value:</span> generosity with margin. <br/><span className="text-slate-500">Today:</span> build giving into budgets and business.</div>
                  <div className="bg-white p-4 rounded-xl border border-slate-100 shadow-sm"><strong className="text-indigo-700 block mb-1">Muzzling the Ox: Deut. 25:4</strong>Let the working animal eat. <br/><span className="text-slate-500">Value:</span> workers should benefit from their labor. <br/><span className="text-slate-500">Today:</span> fair pay and humane treatment.</div>
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>3. Start with Values Before Laws</Strong>
              <p className="mt-2 text-slate-700">Dr. Roy Gane emphasizes that God's values came before Israel's laws. Creation already showed that God values life, marriage, Sabbath rest, human dignity, work, and stewardship. Laws were given later to protect and restore those values in a fallen world.</p>
              
              <div className="mt-4 bg-emerald-50 border border-emerald-100 p-5 rounded-xl shadow-sm">
                <strong className="text-emerald-900 block mb-3">Easy Examples</strong>
                <div className="grid md:grid-cols-3 gap-3 text-sm text-slate-700">
                  <div className="bg-white p-4 rounded-xl border border-emerald-100 shadow-sm"><strong className="text-emerald-700 block mb-1">Life before murder laws</strong>Before "You shall not murder," God had already made humans in His image.</div>
                  <div className="bg-white p-4 rounded-xl border border-emerald-100 shadow-sm"><strong className="text-emerald-700 block mb-1">Marriage before adultery laws</strong>Before "You shall not commit adultery," God had already created one-flesh marriage.</div>
                  <div className="bg-white p-4 rounded-xl border border-emerald-100 shadow-sm"><strong className="text-emerald-700 block mb-1">Sabbath before Sinai</strong>Before the Sabbath command at Sinai, God had already blessed the seventh day in Eden.</div>
                </div>
              </div>

              <div className="mt-4 bg-slate-50 border border-slate-200 p-4 rounded-xl text-sm text-slate-700 shadow-inner">
                <strong className="text-indigo-900 block mb-1">Interpretive Key</strong>
                A law may be temporary in form, but the divine value underneath it may still be permanent.
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>4. Know the Form of the Law</Strong>
              <p className="mt-2 text-slate-700">Old Testament laws are written in several forms. The form helps you see how the law works and what kind of value it is teaching.</p>
              
              <div className="mt-4 grid md:grid-cols-2 gap-4 text-sm">
                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Apodictic Law</strong>
                  A direct command or prohibition. It states a basic duty. <br/><em className="text-slate-500">Example: "You shall not murder" teaches respect for life.</em>
                </div>
                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Casuistic Law</strong>
                  A case law: "if/when this happens, then do this." It applies a value to a real-life situation. <br/><em className="text-slate-500">Example: If an animal falls into a pit, the responsible person must make it right.</em>
                </div>
                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Remedial Case Law</strong>
                  A case law that gives a remedy after harm has happened. <br/><em className="text-slate-500">Example: theft laws requiring repayment teach restitution.</em>
                </div>
                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Primary Case Law</strong>
                  A case law that explains responsibilities before harm happens. <br/><em className="text-slate-500">Example: support your poor brother so he can live with you (Lev. 25:35).</em>
                </div>
                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Procedural / Ritual Law</strong>
                  Instructions for how to perform worship, sacrifice, purity, or priestly service. <br/><em className="text-slate-500">Example: Leviticus explains how offerings are brought to God.</em>
                </div>
                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Consequence Formulas</strong>
                  Short legal phrases that state the result of an action. <br/><em className="text-slate-500">Example: "shall be put to death," "shall be cut off," or "shall repay."</em>
                </div>
                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm md:col-span-2">
                  <strong className="text-indigo-800 block mb-1">Motive Clauses</strong>
                  These explain why a law matters. <br/><em className="text-slate-500">Example: "I am the Lord" grounds obedience in God's character and authority.</em>
                </div>
              </div>

              <div className="mt-4 bg-amber-50 border border-amber-100 p-4 rounded-xl text-sm text-slate-700 shadow-sm">
                <strong className="text-amber-900 block mb-1">Convenient Example: Deuteronomy 24:1-4</strong>
                This passage mentions divorce, but its main command is not "get divorced." The actual command is that a man may not remarry his former wife after she has married another man. The structure matters: it keeps us from mistaking the background situation for the point of the law.
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>5. Treat the Ten Commandments as Value Centers</Strong>
              <p className="mt-2 text-slate-700">The Ten Commandments are not a tiny checklist. Each commandment is a doorway into a larger value. The first four teach love for God; the last six teach love for neighbor.</p>
              
              <div className="mt-4 bg-purple-50 border border-purple-100 rounded-xl p-5 shadow-sm">
                <strong className="text-purple-900 block mb-3">Simple Value Map</strong>
                <div className="grid md:grid-cols-2 gap-3 text-sm text-slate-700">
                  <div className="bg-white p-3 rounded-lg border border-purple-100 shadow-sm"><strong className="text-purple-700">No other gods:</strong> loyalty to God alone.</div>
                  <div className="bg-white p-3 rounded-lg border border-purple-100 shadow-sm"><strong className="text-purple-700">No idols:</strong> worship God as He truly is.</div>
                  <div className="bg-white p-3 rounded-lg border border-purple-100 shadow-sm"><strong className="text-purple-700">God's name:</strong> honor God's identity and reputation.</div>
                  <div className="bg-white p-3 rounded-lg border border-purple-100 shadow-sm"><strong className="text-purple-700">Sabbath:</strong> rest, worship, freedom, and trust.</div>
                  <div className="bg-white p-3 rounded-lg border border-purple-100 shadow-sm"><strong className="text-purple-700">Parents:</strong> respect for family and life-givers.</div>
                  <div className="bg-white p-3 rounded-lg border border-purple-100 shadow-sm"><strong className="text-purple-700">Murder:</strong> protect life.</div>
                  <div className="bg-white p-3 rounded-lg border border-purple-100 shadow-sm"><strong className="text-purple-700">Adultery:</strong> protect marriage and faithfulness.</div>
                  <div className="bg-white p-3 rounded-lg border border-purple-100 shadow-sm"><strong className="text-purple-700">Stealing:</strong> respect property and labor.</div>
                  <div className="bg-white p-3 rounded-lg border border-purple-100 shadow-sm"><strong className="text-purple-700">False witness:</strong> tell the truth and protect justice.</div>
                  <div className="bg-white p-3 rounded-lg border border-purple-100 shadow-sm"><strong className="text-purple-700">Coveting:</strong> guard desire and practice contentment.</div>
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>6. Use Progressive Moral Wisdom</Strong>
              <p className="mt-2 text-slate-700">Progressive moral wisdom means tracing a law through the Bible's whole story instead of freezing it at one moment. Ask: What was God's original ideal? What problem did the law regulate in a fallen world? How did Jesus clarify the value? What faithful practice should God's people embody now?</p>
              
              <div className="mt-4 grid md:grid-cols-2 xl:grid-cols-3 gap-4 text-sm">
                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm"><strong className="text-indigo-800 block mb-1">1. Read</strong>What does the law say?</div>
                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm"><strong className="text-indigo-800 block mb-1">2. Value</strong>What value is protected?</div>
                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm"><strong className="text-indigo-800 block mb-1">3. Context</strong>Why did Israel need this?</div>
                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm"><strong className="text-indigo-800 block mb-1">4. Christ</strong>How does Jesus deepen it?</div>
                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm"><strong className="text-indigo-800 block mb-1">5. Today</strong>How should we live it now?</div>
              </div>

              <div className="mt-4 bg-amber-50 border border-amber-100 p-5 rounded-xl shadow-sm text-sm">
                <strong className="text-amber-900 block mb-2 text-base">Illustration: Marriage and Divorce</strong>
                <p className="text-slate-700 mb-4">Deuteronomy 24:1-4 is a helpful test case. The passage assumes a divorce has already happened and regulates what may follow; it is not presenting divorce as God's ideal. Progressive moral wisdom helps us see the whole movement.</p>
                
                <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4 text-slate-700">
                  <div className="bg-white p-4 rounded-xl border border-amber-100 shadow-sm">
                    <strong className="text-indigo-800 block mb-1">1. Creation Ideal</strong>
                    Genesis 2 presents marriage as a one-flesh covenant: faithful, exclusive, and life-giving.
                  </div>
                  <div className="bg-white p-4 rounded-xl border border-amber-100 shadow-sm">
                    <strong className="text-indigo-800 block mb-1">2. Fallen-World Regulation</strong>
                    Deuteronomy 24 limits damage after divorce and prevents treating a woman as disposable property.
                  </div>
                  <div className="bg-white p-4 rounded-xl border border-amber-100 shadow-sm">
                    <strong className="text-indigo-800 block mb-1">3. Covenant Value</strong>
                    The value underneath the law is covenant faithfulness, protection, honesty, and human dignity.
                  </div>
                  <div className="bg-white p-4 rounded-xl border border-amber-100 shadow-sm">
                    <strong className="text-indigo-800 block mb-1">4. Jesus Clarifies</strong>
                    In Matthew 19, Jesus says Moses regulated divorce because of hardness of heart, then points back to creation.
                  </div>
                  <div className="bg-white p-4 rounded-xl border border-amber-100 shadow-sm">
                    <strong className="text-indigo-800 block mb-1">5. Today</strong>
                    We uphold covenant faithfulness, pursue reconciliation where possible, and protect people from ongoing harm.
                  </div>
                </div>

                <div className="mt-4 bg-white border border-amber-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-amber-900 block mb-1">Simple Takeaway</strong>
                  Progressive moral wisdom does not ask, "Can I copy the ancient legal form?" It asks, "What value is God moving His people toward?" With marriage and divorce, the movement is from creation covenant, through regulation of brokenness, back toward covenant faithfulness, mercy, and protection of the vulnerable.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>7. Distinguish Regulation from Endorsement</Strong>
              <p className="mt-2 text-slate-700">Some laws regulate practices God did not create as ideals. A law can limit damage without approving the whole situation. This matters for slavery, divorce, polygamy, warfare, and other difficult passages.</p>
              
              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-white border border-slate-200 border-t-4 border-t-rose-500 p-4 rounded-b-xl shadow-sm">
                  <strong className="text-rose-900 block mb-1">Divorce</strong>
                  Regulated because of hardness of heart, not because broken marriage is God's ideal.
                </div>
                <div className="bg-white border border-slate-200 border-t-4 border-t-blue-500 p-4 rounded-b-xl shadow-sm">
                  <strong className="text-blue-900 block mb-1">Servitude</strong>
                  Regulated to preserve life and restrain abuse in an ancient economy, not presented as the new-creation ideal.
                </div>
                <div className="bg-white border border-slate-200 border-t-4 border-t-purple-500 p-4 rounded-b-xl shadow-sm">
                  <strong className="text-purple-900 block mb-1">Polygamy</strong>
                  Narratives show its damage; creation gives the higher pattern of one-flesh covenant union.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>8. Carry the Law Forward Through Christlike Love</Strong>
              <p className="mt-2 text-slate-700">Jesus fulfills the law and shows its goal: love for God and love for neighbor. Christian application should be faithful to the whole Bible, centered in Christ, and shaped by the Spirit rather than legalism.</p>
              
              <div className="mt-4 grid md:grid-cols-2 gap-4">
                <div className="bg-indigo-50 border border-indigo-100 p-5 rounded-xl shadow-sm">
                  <strong className="text-indigo-900 block mb-2">Ask These Questions</strong>
                  <ul className="list-disc pl-5 text-sm text-slate-700 space-y-2">
                    <li>What value does this law teach?</li>
                    <li>How does Jesus clarify or fulfill it?</li>
                    <li>Does my application protect love, justice, mercy, and holiness?</li>
                    <li>Am I applying the value, or merely copying the ancient form?</li>
                  </ul>
                </div>
                <div className="bg-slate-50 border border-slate-200 p-5 rounded-xl shadow-inner">
                  <strong className="text-slate-900 block mb-2">Simple Summary</strong>
                  <p className="text-sm text-slate-700">We do not keep Israel's civil and ceremonial system as ancient Israel did. But we do learn God's values from it, see their fulfillment in Christ, and practice those values today through love, justice, mercy, holiness, and faithful obedience.</p>
                </div>
              </div>
            </div>
          </Li>
        </Ul>
      </div>
    )
  },
  {
    id: 'law-case-study',
    sectionNum: '7.1',
    title: 'Case Study',
    icon: Search,
    isSubSection: true,
    content: ({ navigate }) => <CaseStudyPage study={caseStudies.law} navigate={navigate} />
  },
  {
    id: 'parables',
    sectionNum: '8',
    title: 'Interpreting Parables',
    icon: MessageCircle,
    content: () => (
      <div className="animate-in fade-in duration-500">
        <div className="mb-8">
          <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 8</div>
          <H1>Interpreting Parables</H1>
        </div>

        <LearningSteps
          title="Parables Learning Path"
          intro="Begin with audience, occasion, surprise, and response. Then deepen the reading through kingdom context and discipleship."
          steps={learningStepPresets.parables}
        />
        
        <H2>Overview: What is a Parable?</H2>
        <P>A parable is a short story from everyday life that Jesus used to teach a spiritual truth. Instead of giving a classroom definition, Jesus painted a scene: a farmer planting seed, a woman searching for a coin, a father welcoming a lost son, or a traveler helping a wounded man on the road.</P>
        <P>Parables are simple enough for beginners to remember, but deep enough to expose the heart. They make us ask, <em className="italic">Where am I in this story?</em> Am I the humble tax collector, the resentful older brother, the merciful Samaritan, or the religious person who walks past the wounded man?</P>
        <P><Strong>Books Included:</Strong> Found almost exclusively in the Synoptic Gospels (Matthew, Mark, and Luke).</P>

        <H2>Overview: Earthly Stories with Heavenly Meanings</H2>
        <P>Parables do more than explain truth; they invite a response. Some comfort the broken. Some warn the proud. Some reveal God's surprising grace. Others show what the kingdom of God is like. When reading a parable, do not rush to decode every tiny detail. First, listen to the story as Jesus' original hearers would have heard it, then look for the main point Jesus is pressing home.</P>
        
        <Quote>
          <p className="mb-2">"Parables function as theological mirrors and windows... They do not merely inform; they demand a response."</p>
          <footer className="text-sm font-bold text-indigo-800">— Grant R. Osborne</footer>
        </Quote>

        <H2>Specific Rules for Interpreting Parables</H2>

        <Ul>
          <Li>
            <div>
              <Strong>1. Seek the Central Truth (Avoid Over-Allegorizing)</Strong>
              <p className="mt-1">Start with the big lesson of the story. Do not treat every cup, coin, road, animal, or piece of clothing as a hidden symbol. Some details are just part of the story. Usually, the safest question is: <em>What is Jesus trying to make obvious through this story?</em></p>
              <div className="bg-slate-50 border border-slate-200 p-3 rounded-lg mt-3 text-sm text-slate-700 shadow-sm">
                <strong className="text-indigo-800">Example: The Sower</strong> Jesus explains this one for us. The seed is the Word of God, and the soils picture different ways people receive it (Luke 8:11-15). Since Jesus gives the meaning, we should follow His explanation and avoid inventing extra meanings for every small detail.
              </div>
            </div>
          </Li>
          <Li>
            <div className="w-full">
              <Strong>2. Identify the Original Audience and Occasion</Strong>
              <p className="mt-1 text-slate-700">Always ask two simple questions: <em className="italic">Who is Jesus speaking to?</em> and <em className="italic">What just happened before He told the story?</em> A parable told to proud religious leaders may be a warning. A parable told to confused disciples may be encouragement. A parable told in response to a question usually answers that question.</p>

              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-indigo-50 border border-indigo-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-900 block mb-1">Luke 15</strong>
                  Jesus tells the lost sheep, lost coin, and lost son because the Pharisees complained that He welcomed sinners. The stories defend God's joy over repentance.
                </div>
                <div className="bg-sky-50 border border-sky-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-sky-900 block mb-1">Luke 10:25-37</strong>
                  The Good Samaritan answers a lawyer who asked, "Who is my neighbor?" Jesus turns the question into: "Will you become a neighbor?"
                </div>
                <div className="bg-rose-50 border border-rose-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-rose-900 block mb-1">Luke 18:9-14</strong>
                  The Pharisee and tax collector is aimed at people who trusted in their own righteousness and looked down on others.
                </div>
              </div>
            </div>
          </Li>
          <Li>
            <div className="w-full">
              <Strong>3. Look for the "Hook" or Unexpected Twist</Strong>
              <p className="mt-1 text-slate-700">Many parables have a surprising turn. The person you expect to be the hero may fail. The person everyone despises may be the example. The ending may feel unfair until you realize Jesus is teaching grace, mercy, repentance, or readiness. The surprise is often where the main lesson becomes clear.</p>

              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-emerald-900 block mb-1">Good Samaritan</strong>
                  The priest and Levite pass by, but the Samaritan shows mercy. The shocking outsider becomes the model neighbor.
                </div>
                <div className="bg-amber-50 border border-amber-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-amber-900 block mb-1">Workers in the Vineyard</strong>
                  The late workers receive the same pay. The twist exposes resentment and highlights the generosity of grace.
                </div>
                <div className="bg-purple-50 border border-purple-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-purple-900 block mb-1">Lost Son</strong>
                  The father runs to welcome the rebel, while the obedient older brother stays angry outside the feast.
                </div>
              </div>
            </div>
          </Li>
        </Ul>

        <H2>More Rules for Interpreting Parables</H2>

        <Ul>
          <Li>
            <div className="w-full">
              <Strong>4. Read the Parable in its Gospel Context</Strong>
              <p className="mt-1 text-slate-700">Do not lift a parable out of the chapter like it dropped from the sky. Read the scene around it. The setting tells you why Jesus told the story and what problem He was addressing.</p>
              
              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-indigo-50 border border-indigo-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-900 block mb-1">Luke 15</strong>
                  The lost sheep, lost coin, and lost son answer the Pharisees' complaint that Jesus welcomes sinners.
                </div>
                <div className="bg-sky-50 border border-sky-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-sky-900 block mb-1">Luke 10</strong>
                  The Good Samaritan answers the lawyer's question, "Who is my neighbor?"
                </div>
                <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-emerald-900 block mb-1">Matthew 13</strong>
                  The kingdom parables explain why some receive Jesus' message and others reject it.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>5. Identify the Main Characters and Main Points</Strong>
              <p className="mt-1 text-slate-700">A beginner-friendly way to study a parable is to list the main people in the story, then ask what each person shows us. Focus on the main conflict and the main response Jesus wants. Small details usually help the story move, but they do not always carry a separate meaning.</p>
              
              <div className="mt-4 bg-slate-50 border border-slate-200 p-5 rounded-xl shadow-inner text-sm text-slate-700">
                <strong className="text-indigo-900 block mb-2">Convenient Example: The Prodigal Son</strong>
                The younger son shows obvious rebellion. The older son shows hidden resentment. The father reveals costly mercy. The central issue is not the robe, ring, sandals, or pigs by themselves; the central issue is whether both sons will receive the father's grace.
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>6. Understand the Cultural World of the Story</Strong>
              <p className="mt-1 text-slate-700">Jesus used scenes His listeners understood: farming, weddings, shepherding, debt, inheritance, travel, servants, and household life. We may need a little background help because we live in a different time and culture. The goal is not to become an expert in ancient life; it is to understand the story well enough to feel its force.</p>
              
              <div className="mt-4 grid md:grid-cols-2 gap-4 text-sm">
                <div className="bg-amber-50 border border-amber-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-amber-900 block mb-1">Ten Virgins (Matt. 25)</strong>
                  Wedding customs, lamps, waiting, and readiness shape the story's warning: be prepared for the Bridegroom's arrival.
                </div>
                <div className="bg-rose-50 border border-rose-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-rose-900 block mb-1">Good Samaritan (Luke 10)</strong>
                  The shock is sharper when we remember Jewish-Samaritan hostility. The enemy becomes the model neighbor.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>7. Notice Contrast, Reversal, and Exaggeration</Strong>
              <p className="mt-1 text-slate-700">Jesus often teaches by contrast. He places two people side by side, reverses what we expect, or exaggerates a scene so the point is impossible to miss. Watch for phrases like "but," "instead," "which of these," or a shocking ending.</p>
              
              <div className="mt-4 bg-purple-50 border border-purple-100 p-5 rounded-xl shadow-sm text-sm text-slate-700">
                <strong className="text-purple-900 block mb-2">Look for Kingdom Reversals</strong>
                In the Pharisee and the tax collector, the outwardly religious man goes home unjustified while the repentant sinner receives mercy. In the laborers in the vineyard, equal payment exposes grace that offends people who want strict comparison.
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>8. Do Not Build Doctrine from Incidental Details</Strong>
              <p className="mt-1 text-slate-700">Parables are true, but they are not written like systematic theology textbooks. Use them to hear the main lesson Jesus is teaching, and compare your interpretation with clearer passages from the rest of Scripture.</p>
              
              <div className="mt-4 grid md:grid-cols-2 gap-4 text-sm">
                <div className="bg-white border border-slate-200 border-l-4 border-l-indigo-500 p-4 rounded-r-xl shadow-sm">
                  <strong className="text-indigo-900 block mb-1">Persistent Widow</strong>
                  God is not an unjust judge who must be annoyed into action. The judge is a contrast: if even an unjust judge responds, how much more will God vindicate His people?
                </div>
                <div className="bg-white border border-slate-200 border-l-4 border-l-amber-500 p-4 rounded-r-xl shadow-sm">
                  <strong className="text-amber-900 block mb-1">Unjust Steward</strong>
                  Jesus is not praising dishonesty. He is exposing how urgently and shrewdly people act for earthly survival, then calling disciples to wise faithfulness with eternal realities.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>9. Let the Parable Demand a Response</Strong>
              <p className="mt-1 text-slate-700">Jesus did not tell parables only to entertain people. He told them to move people toward repentance, trust, forgiveness, watchfulness, joy, mercy, and obedience. A good interpretation ends with a simple question: <em>What is Jesus asking me to do, believe, or become?</em></p>
              
              <div className="mt-4 bg-emerald-50 border border-emerald-100 p-5 rounded-xl shadow-sm">
                <strong className="text-emerald-900 block mb-2">Response Examples</strong>
                <div className="grid md:grid-cols-3 gap-3 text-sm text-slate-700">
                  <div className="bg-white p-4 rounded-xl border border-emerald-100 shadow-sm"><strong className="text-emerald-700 block mb-1">Good Samaritan</strong>"Go and do likewise": show mercy across boundaries.</div>
                  <div className="bg-white p-4 rounded-xl border border-emerald-100 shadow-sm"><strong className="text-emerald-700 block mb-1">Lost Son</strong>Come home to the Father, and do not resent grace given to others.</div>
                  <div className="bg-white p-4 rounded-xl border border-emerald-100 shadow-sm"><strong className="text-emerald-700 block mb-1">Ten Virgins</strong>Watch and be ready for the coming of Christ.</div>
                </div>
              </div>
            </div>
          </Li>
        </Ul>
      </div>
    )
  },
  {
    id: 'parables-case-study',
    sectionNum: '8.1',
    title: 'Case Study',
    icon: Search,
    isSubSection: true,
    content: ({ navigate }) => <CaseStudyPage study={caseStudies.parables} navigate={navigate} />
  },
  
  {
    id: 'prophecy',
    sectionNum: '9',
    title: 'Interpreting Prophecy',
    icon: Eye,
    content: () => (
      <div className="animate-in fade-in duration-500">
        <div className="mb-8">
          <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 9</div>
          <H1>Interpreting Prophecy</H1>
        </div>

        <LearningSteps
          title="Prophecy Learning Path"
          intro="Beginners should first identify the kind of prophecy. Intermediate and advanced readers can then add symbols, allusions, structures, and fulfillment patterns."
          steps={learningStepPresets.prophecy}
        />

        <H2>Overview: What is Biblical Prophecy?</H2>
        <P>
          Biblical prophecy is a message from God delivered through a prophet. Sometimes the prophet speaks directly to the moral and spiritual crisis of his own generation. Other times God gives a symbolic vision that traces the long conflict between good and evil through history.
        </P>
        <P><Strong>Books Included:</Strong> Isaiah through Malachi contain mostly classical prophecy. Daniel and Revelation are the clearest examples of apocalyptic prophecy, though apocalyptic features also appear in parts of Isaiah, Ezekiel, Zechariah, Matthew 24, and 2 Thessalonians.</P>

        <H2>Classical vs. Apocalyptic Prophecy</H2>
        <P>One of the biggest mistakes beginners make is reading every prophecy the same way. Classical prophecy and apocalyptic prophecy overlap, but they do not work exactly the same.</P>

        <div className="grid md:grid-cols-2 gap-4 my-8">
          <div className="bg-white border border-slate-200 border-t-4 border-t-emerald-500 rounded-b-xl p-5 shadow-sm">
            <h3 className="text-lg font-bold text-emerald-900 mb-3">Classical Prophecy</h3>
            <ul className="list-disc pl-5 text-sm text-slate-700 space-y-2">
              <li>Usually addresses Israel, Judah, or surrounding nations in their immediate historical setting.</li>
              <li>Often calls people to repent, return to covenant faithfulness, and practice justice.</li>
              <li>Many predictions are conditional: the outcome may change if people repent or rebel.</li>
              <li>Often blends near events with larger end-time themes.</li>
            </ul>
            <div className="mt-4 bg-emerald-50 border border-emerald-100 p-3 rounded-lg text-sm text-slate-700">
              <strong className="text-emerald-800">Example:</strong> Jonah announced judgment on Nineveh, but the city repented and God withheld the destruction.
            </div>
          </div>

          <div className="bg-white border border-slate-200 border-t-4 border-t-indigo-500 rounded-b-xl p-5 shadow-sm">
            <h3 className="text-lg font-bold text-indigo-900 mb-3">Apocalyptic Prophecy</h3>
            <ul className="list-disc pl-5 text-sm text-slate-700 space-y-2">
              <li>Comes through symbolic dreams or visions with angels, beasts, horns, heavenly scenes, and time periods.</li>
              <li>Reveals the broad sweep of history from the prophet's time to God's final kingdom.</li>
              <li>Is less conditional and more panoramic: God shows what will happen in the conflict of the ages.</li>
              <li>Uses repeat-and-enlarge patterns, especially in Daniel and Revelation.</li>
            </ul>
            <div className="mt-4 bg-indigo-50 border border-indigo-100 p-3 rounded-lg text-sm text-slate-700">
              <strong className="text-indigo-800">Example:</strong> Daniel 2 traces successive world kingdoms through the image of metals, ending with God's everlasting kingdom.
            </div>
          </div>
        </div>

        <H2>Overview: Unveiling the Sweep of History</H2>
        <P>
          In this guide, apocalyptic prophecy is read through the <Strong>historicist</Strong> approach: Daniel and Revelation present a continuous historical movement from the prophet's day to the end of the world. This keeps prophecy connected to real history, the ministry of Christ, the heavenly sanctuary, and the final restoration of all things.
        </P>

        <Quote>
          <p className="mb-2">Biblical prophecy is not a guessing game. It is God's way of calling His people to faithfulness, revealing His control over history, and showing that Christ wins the great controversy.</p>
          <footer className="text-sm font-bold text-indigo-800">Prophecy Study Principle</footer>
        </Quote>

        <H2>Specific Rules for Interpreting Bible Prophecy</H2>
        <P>
          Start by deciding which kind of prophecy you are reading. Then use the rules that fit that form. Classical prophecy usually presses covenant faithfulness in a historical crisis; apocalyptic prophecy usually presents symbolic visions that trace history toward God's final kingdom.
        </P>

        <div className="my-6 bg-slate-900 text-white rounded-2xl p-5 shadow-sm">
          <strong className="text-amber-300 block text-lg mb-2">Quick Sorting Question</strong>
          <p className="text-sm leading-relaxed text-slate-100">Is the passage mainly a prophet preaching to a covenant crisis, or is it mainly a symbolic dream or vision with beasts, angels, heavenly scenes, and time periods? That answer determines which rule set should lead your interpretation.</p>
        </div>

        <Ul>
          <Li>
            <div className="w-full">
              <Strong>1. First Identify the Kind of Prophecy</Strong>
              <p className="mt-1 text-slate-700">Before interpreting a prophecy, ask: Is this mainly classical prophecy or apocalyptic prophecy? Classical prophecy often speaks to covenant faithfulness in a local crisis. Apocalyptic prophecy usually gives a symbolic timeline of history and end-time events.</p>
              <div className="mt-4 grid md:grid-cols-2 gap-4 text-sm">
                <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-emerald-900 block mb-1">Classical Example</strong>
                  Amos rebukes Israel for worship mixed with injustice. The issue is not decoding beasts; it is covenant unfaithfulness and oppression of the poor.
                </div>
                <div className="bg-indigo-50 border border-indigo-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-900 block mb-1">Apocalyptic Example</strong>
                  Daniel 7 uses beasts, horns, a heavenly court, and kingdom sequences. The symbols must be interpreted by the Bible itself.
                </div>
              </div>
            </div>
          </Li>
        </Ul>

        <H2>Rules for Classical Prophecy</H2>
        <P>
          Use these rules especially for Isaiah through Malachi, while remembering that some classical prophets also contain apocalyptic features. Classical prophecy usually speaks directly to covenant unfaithfulness, repentance, judgment, justice, restoration, and hope.
        </P>

        <Ul>

          <Li>
            <div className="w-full">
              <Strong>2. Let Classical Prophecy Function as Covenant Lawsuit</Strong>
              <p className="mt-1 text-slate-700">Classical prophets often act like God's covenant attorneys. They remind the people what God has done, expose covenant violation, warn of consequences, and call for repentance.</p>
              <div className="bg-slate-50 p-4 border border-slate-200 rounded-xl mt-3 shadow-sm text-sm text-slate-700">
                <strong className="text-indigo-800 block mb-1">Example: Micah 6:1-8</strong>
                God brings a case against His people. The answer is not empty ritual, but doing justice, loving mercy, and walking humbly with God.
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>3. Watch for Conditional Prophecy</Strong>
              <p className="mt-1 text-slate-700">Many classical prophecies include an implied or explicit condition. If people repent, God may withhold judgment. If people rebel, promised blessing may be delayed or forfeited. Jeremiah 18 gives this principle clearly.</p>
              <div className="mt-4 grid md:grid-cols-2 gap-4 text-sm">
                <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-emerald-900 block mb-1">Jonah and Nineveh</strong>
                  Jonah announces destruction, but Nineveh repents. The prediction leads to mercy because the warning accomplished its purpose.
                </div>
                <div className="bg-amber-50 border border-amber-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-amber-900 block mb-1">Jeremiah 18</strong>
                  God explains that judgment or blessing may change depending on a nation's response.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>4. Recognize Near-View and Far-View Fulfillment</Strong>
              <p className="mt-1 text-slate-700">Sometimes a prophet describes a near historical event and a far end-time reality in the same passage. The prophecy can feel like looking at mountain peaks from far away: two peaks may look close together even though a large valley lies between them.</p>
              <div className="bg-slate-50 p-4 border border-slate-200 rounded-xl mt-3 shadow-sm text-sm text-slate-700">
                <strong className="text-indigo-800 block mb-1">Example: Isaiah 13</strong>
                Isaiah predicts the historical fall of Babylon, but the language expands toward cosmic judgment. The local fall of Babylon becomes a preview of final judgment.
              </div>
            </div>
          </Li>
        </Ul>

        <H2>Rules for Apocalyptic Prophecy</H2>
        <P>
          Use these rules especially for Daniel and Revelation, and for apocalyptic sections elsewhere. Apocalyptic prophecy uses symbolic visions, heavenly interpreters, repeated sequences, and panoramic history to reveal God's sovereignty and final victory.
        </P>

        <Ul>

          <Li>
            <div className="w-full">
              <Strong>5. Let Scripture Decode Prophetic Symbols</Strong>
              <p className="mt-1 text-slate-700">Do not guess what symbols mean from imagination, headlines, or personal opinion. Search Scripture for the meaning. The Bible often gives its own definitions.</p>
              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Beasts</strong>
                  Daniel 7:17, 23 identifies beasts as kings or kingdoms.
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Waters</strong>
                  Revelation 17:15 identifies waters as peoples, multitudes, nations, and languages.
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Lampstands</strong>
                  Revelation 1:20 identifies the seven lampstands as seven churches.
                </div>
              </div>
              <div className="mt-5 bg-indigo-50 border border-indigo-100 rounded-xl p-4 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
                <p className="text-sm text-slate-700 leading-relaxed">
                  Need help with a symbol? Use the dictionary after you have checked the passage's own explanation and nearby context.
                </p>
                <button
                  type="button"
                  onClick={() => {
                    const dictionary = document.getElementById('prophetic-symbol-dictionary');
                    if (dictionary) {
                      dictionary.open = true;
                      const top = dictionary.getBoundingClientRect().top + window.scrollY - 96;
                      window.scrollTo({ top, behavior: 'smooth' });
                    }
                  }}
                  className="inline-flex items-center justify-center rounded-xl bg-indigo-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-indigo-700 transition-colors whitespace-nowrap"
                >
                  Open Symbol Dictionary
                </button>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>6. Use the Historicist Framework for Daniel and Revelation</Strong>
              <p className="mt-1 text-slate-700">When interpreting apocalyptic prophecy, the historicist approach views Daniel and Revelation as revealing the continuous flow of history from the prophet's time to the Second Coming. This was a major approach of the Protestant Reformers and is central to Adventist prophetic interpretation.</p>
              <div className="grid md:grid-cols-2 gap-3 mt-3">
                <div className="bg-white p-3 rounded-lg border border-slate-200 shadow-sm text-sm"><strong className="text-indigo-700">Preterist:</strong> Places most fulfillment in the ancient past.</div>
                <div className="bg-indigo-50 p-3 rounded-lg border border-indigo-400 shadow-md text-sm"><strong className="text-indigo-900">Historicist:</strong> Sees a continuous historical sequence from the prophet's day to the end.</div>
                <div className="bg-white p-3 rounded-lg border border-slate-200 shadow-sm text-sm"><strong className="text-indigo-700">Futurist:</strong> Places most fulfillment in a brief period just before the end.</div>
                <div className="bg-white p-3 rounded-lg border border-slate-200 shadow-sm text-sm"><strong className="text-indigo-700">Idealist:</strong> Treats the visions mainly as timeless symbols of good and evil.</div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>7. Follow the Continuous Historical Sequence</Strong>
              <p className="mt-1 text-slate-700">Apocalyptic prophecy often gives a sequence. Do not randomly jump around the timeline. Let the vision itself show the order of events.</p>
              <div className="mt-4 bg-indigo-50 border border-indigo-100 p-5 rounded-xl shadow-sm text-sm">
                <strong className="text-indigo-900 block mb-2">Example: Daniel 2</strong>
                Babylon is followed by Medo-Persia, Greece, Rome, divided Rome, and finally God's kingdom. The stone does not appear before the metals; the sequence matters.
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>8. Use Recapitulation: Repeat and Enlarge</Strong>
              <p className="mt-1 text-slate-700">Daniel and Revelation are not written as one flat timeline where every chapter follows the previous chapter chronologically. God often repeats the same historical sweep and then enlarges it with new details.</p>
              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-purple-50 border border-purple-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-purple-900 block mb-1">Daniel 2</strong>
                  The image gives the basic kingdom sequence.
                </div>
                <div className="bg-purple-50 border border-purple-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-purple-900 block mb-1">Daniel 7</strong>
                  The beasts repeat the same broad sequence while adding judgment and the little horn.
                </div>
                <div className="bg-purple-50 border border-purple-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-purple-900 block mb-1">Daniel 8</strong>
                  The vision narrows attention to sanctuary, judgment, and the cleansing/restoration theme.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>9. Apply the Day-Year Principle Carefully</Strong>
              <p className="mt-1 text-slate-700">In symbolic apocalyptic prophecy, symbolic time is interpreted by the day-year principle: a prophetic day represents a literal year. This principle should be applied where the context is symbolic and apocalyptic, not casually to every ordinary mention of days.</p>
              <div className="mt-4 grid md:grid-cols-2 gap-4 text-sm">
                <div className="bg-amber-50 border border-amber-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-amber-900 block mb-1">Biblical Basis</strong>
                  Numbers 14:34 and Ezekiel 4:6 show the day-for-year pattern.
                </div>
                <div className="bg-amber-50 border border-amber-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-amber-900 block mb-1">Prophetic Examples</strong>
                  Daniel 7:25, Daniel 8:14, and Revelation 12 use symbolic time periods within symbolic visions.
                </div>
              </div>
            </div>
          </Li>
        </Ul>

        <H2>Shared Prophecy Guardrails</H2>
        <P>
          Whether the passage is classical or apocalyptic, these final guardrails keep the interpretation from becoming either flat moralism or speculative chart-making.
        </P>

        <Ul>

          <Li>
            <div className="w-full">
              <Strong>10. Trace Old Testament Quotations, Citations, Allusions, and Echoes</Strong>
              <p className="mt-1 text-slate-700">Prophecy often speaks by reusing earlier Scripture. Sometimes the prophet directly quotes or cites an earlier text. Other times the prophet alludes to an earlier image, story, phrase, covenant promise, or worship pattern. In apocalyptic prophecy, especially Daniel and Revelation, the meaning often becomes clearer when you ask, "Where have I seen this language before?"</p>
              
              <div className="mt-4 grid md:grid-cols-4 gap-3 text-sm">
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-900 block mb-1">Quotation</strong>
                  Direct wording from an earlier biblical text. Treat the earlier context as part of the meaning.
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-900 block mb-1">Citation</strong>
                  An explicit reference to an earlier passage, source, prophet, or written word.
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-900 block mb-1">Allusion</strong>
                  A clear but indirect reuse of words, images, symbols, or story patterns.
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-900 block mb-1">Echo</strong>
                  A softer resonance with an earlier theme or phrase. Useful, but hold it more cautiously.
                </div>
              </div>

              <div className="mt-4 bg-indigo-50 border border-indigo-100 rounded-xl p-5 shadow-sm">
                <strong className="text-indigo-900 block mb-3">How to look for Old Testament background</strong>
                <div className="grid sm:grid-cols-2 xl:grid-cols-3 gap-4 text-sm text-slate-700">
                  <div className="bg-white border border-indigo-100 rounded-xl p-4">
                    <strong className="text-indigo-800 block mb-1">1. Mark unusual language</strong>
                    Watch for rare words, repeated phrases, names, places, numbers, animals, sanctuary terms, creation language, or covenant language.
                  </div>
                  <div className="bg-white border border-indigo-100 rounded-xl p-4">
                    <strong className="text-indigo-800 block mb-1">2. Search the phrase</strong>
                    Use cross-references, a concordance, or Bible software to find where the same phrase or image appears earlier.
                  </div>
                  <div className="bg-white border border-indigo-100 rounded-xl p-4">
                    <strong className="text-indigo-800 block mb-1">3. Read the old context</strong>
                    Do not import one word only. Read the paragraph or story where the image first appears.
                  </div>
                  <div className="bg-white border border-indigo-100 rounded-xl p-4">
                    <strong className="text-indigo-800 block mb-1">4. Compare the reuse</strong>
                    Ask what stays the same, what is intensified, and how Christ, covenant, judgment, worship, or mission changes the focus.
                  </div>
                  <div className="bg-white border border-indigo-100 rounded-xl p-4">
                    <strong className="text-indigo-800 block mb-1">5. Grade confidence</strong>
                    Treat direct quotations as strongest, citations next, clear allusions as likely, and echoes as possible supporting evidence.
                  </div>
                </div>
              </div>

              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-emerald-900 block mb-1">Example: Daniel 9 and Jeremiah</strong>
                  Daniel 9 explicitly points to Jeremiah's seventy years. That means Daniel's prayer and prophecy should be read with Jeremiah's exile-and-restoration hope in view.
                </div>
                <div className="bg-purple-50 border border-purple-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-purple-900 block mb-1">Example: Revelation 13 and Daniel 7</strong>
                  Revelation's sea beast gathers Daniel's beast imagery. The allusion tells readers to interpret Revelation's conflict in light of Daniel's kingdom sequence and heavenly judgment.
                </div>
                <div className="bg-amber-50 border border-amber-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-amber-900 block mb-1">Example: Revelation 14 and Creation Worship</strong>
                  The call to worship the Creator echoes creation and Sabbath language. The point is not only chronology; it is end-time allegiance to the Maker of heaven and earth.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>11. Recognize Literary and Rhetorical Design</Strong>
              <p className="mt-1 text-slate-700">Prophecy communicates through more than predictions and symbols. Prophetic books use literary design to emphasize what matters: repeated cycles, mirrored structures, hymns, courtroom scenes, laments, taunts, symbolic actions, contrasts, and carefully placed explanations. Before building a timeline or application, slow down and ask how the passage is arranged.</p>
              <div className="mt-4 bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
                <strong className="text-indigo-900 block mb-3">How to use literary design without overreading it</strong>
                <div className="grid md:grid-cols-4 gap-3 text-sm">
                  <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-4">
                    <strong className="text-indigo-900 block mb-1">1. Mark repeats</strong>
                    Notice repeated words, scenes, numbers, enemies, judgments, songs, or endings.
                  </div>
                  <div className="bg-purple-50 border border-purple-100 rounded-xl p-4">
                    <strong className="text-purple-900 block mb-1">2. Find boundaries</strong>
                    Watch for vision introductions, angelic explanations, throne scenes, or repeated openings and closings.
                  </div>
                  <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4">
                    <strong className="text-emerald-900 block mb-1">3. Ask emphasis</strong>
                    If the passage is mirrored or repeated, ask what the center or repeated endpoint highlights.
                  </div>
                  <div className="bg-rose-50 border border-rose-100 rounded-xl p-4">
                    <strong className="text-rose-900 block mb-1">4. Confirm plainly</strong>
                    Let explicit explanations, Scripture echoes, and the book's theology control your conclusion.
                  </div>
                </div>
              </div>
              <div className="mt-4 grid md:grid-cols-2 gap-4 text-sm">
                {[
                  {
                    title: "Classical Prophetic Rhetoric",
                    body: "Classical prophets use metaphor, hyperbole, lament, woe oracles, lawsuit language, taunt songs, rhetorical questions, and symbolic actions to confront and persuade.",
                    example: "A woe oracle is not merely information; it is a covenant warning designed to awaken repentance, grief, hope, or faithful endurance."
                  },
                  {
                    title: "Chiasm and Mirrored Structure",
                    body: "A chiasm arranges ideas in a mirror pattern. Many readers notice broad mirrored patterns in Daniel, especially the Aramaic section, where stories of kingdoms and faithful witness surround visions of earthly empires and God's final rule.",
                    example: "Use chiasm to notice emphasis, such as God's sovereignty over proud kings, heavenly judgment, and the kingdom given by God. Do not make every matching word carry a hidden meaning."
                  },
                  {
                    title: "Inclusio and Bookends",
                    body: "A passage may begin and end with similar words, settings, or scenes to show its boundaries and theme.",
                    example: "Revelation repeatedly frames sections with worship, throne-room scenes, or blessing language so readers interpret conflict from heaven's perspective."
                  },
                  {
                    title: "Repeated Cycles and Parallel Panels",
                    body: "Apocalyptic books often revisit the same conflict from new angles instead of moving in a simple chapter-by-chapter sequence.",
                    example: "Revelation's sevens, churches, seals, trumpets, and final conflict scenes build layered perspective rather than a flat list of disconnected events."
                  },
                  {
                    title: "Contrast Pairs",
                    body: "Prophecy often teaches by contrast: faithful/remnant and rebellious/nations, Lamb and beast, Babylon and New Jerusalem, true worship and false worship.",
                    example: "In Revelation, the contrast between Babylon and New Jerusalem clarifies worship, allegiance, judgment, and final restoration."
                  },
                  {
                    title: "Vision Reports and Interpreting Angels",
                    body: "A vision may include what the prophet sees, how he reacts, and an angel's explanation. The explanation is usually the safest starting point.",
                    example: "Daniel often receives interpretation inside the chapter, so the reader should not invent meanings before listening to the interpreting angel."
                  }
                ].map((item) => (
                  <div key={item.title} className="bg-slate-50 border border-slate-200 rounded-xl p-4 shadow-sm">
                    <strong className="text-indigo-900 block mb-2">{item.title}</strong>
                    <p className="text-slate-700 leading-relaxed">{item.body}</p>
                    <p className="mt-3 bg-white border border-slate-200 rounded-lg p-3 text-slate-700"><strong className="text-indigo-800">Example:</strong> {item.example}</p>
                  </div>
                ))}
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>12. Keep Christ, the Sanctuary, and the Great Controversy at the Center</Strong>
              <p className="mt-1 text-slate-700">Bible prophecy is not mainly about curiosity, charts, or fear. It reveals Jesus, His priestly ministry, His judgment, His victory over evil, and His final restoration of His people.</p>
              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-emerald-900 block mb-1">Christ</strong>
                  Revelation 1 begins with Jesus, not the beast. He walks among the churches.
                </div>
                <div className="bg-sky-50 border border-sky-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-sky-900 block mb-1">Sanctuary</strong>
                  Revelation repeatedly shows temple, altar, incense, ark, and judgment scenes.
                </div>
                <div className="bg-rose-50 border border-rose-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-rose-900 block mb-1">Great Controversy</strong>
                  Revelation 12 shows the war behind history: Christ and His people opposed by the dragon.
                </div>
              </div>
            </div>
          </Li>
        </Ul>

        <div className="scroll-mt-24">
        <H2>Prophetic Symbol Dictionary</H2>
        <P>Prophetic symbols are useful, but they should not dominate the lesson. Treat this dictionary as a lookup tool: first read the passage, follow the prophecy rules above, and then consult the symbol list when a specific image needs help.</P>
        </div>

        <details id="prophetic-symbol-dictionary" className="scroll-mt-24 group [&_summary::-webkit-details-marker]:hidden bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden my-8">
          <summary className="cursor-pointer list-none p-5 flex items-start justify-between gap-4 hover:bg-indigo-50/60 transition-colors">
            <div>
              <span className="inline-flex items-center rounded-full bg-indigo-100 px-3 py-1 text-xs font-black uppercase tracking-widest text-indigo-700 mb-3">Optional Dictionary</span>
              <strong className="block text-xl text-slate-900 mb-1">Open Prophetic Symbol Dictionary</strong>
              <p className="text-sm text-slate-600 leading-relaxed">Use this when you meet a symbol in Daniel, Revelation, or another prophetic passage. Each item expands only when needed.</p>
            </div>
            <ChevronDown className="w-6 h-6 text-indigo-600 mt-2 shrink-0 transition-transform group-open:rotate-180" />
          </summary>

          <div className="border-t border-slate-200 p-5">
            <div className="grid md:grid-cols-3 gap-3 mb-5 text-sm">
              <div className="bg-sky-50 border border-sky-100 rounded-xl p-4">
                <strong className="text-sky-900 block mb-1">1. Start with the text</strong>
                Notice whether the passage itself explains the symbol before looking elsewhere.
              </div>
              <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4">
                <strong className="text-emerald-900 block mb-1">2. Compare Scripture</strong>
                Use earlier biblical uses, direct explanations, and clear cross-references.
              </div>
              <div className="bg-amber-50 border border-amber-100 rounded-xl p-4">
                <strong className="text-amber-900 block mb-1">3. Confirm carefully</strong>
                Do not force a meaning if the context points another direction.
              </div>
            </div>

            <div className="max-h-[520px] overflow-y-auto rounded-xl border border-slate-200 divide-y divide-slate-100 bg-white">
          {[
            { symbol: 'Angel', meaning: 'Messenger', text: 'Daniel 8:16; 9:21; Luke 1:19,26; Hebrews 1:14' },
            { symbol: 'Ark of Testimony', meaning: 'Ark of the covenant / mercy seat where God dwells', text: 'Exodus 25:10-22; Psalms 80:1' },
            { symbol: 'Babylon', meaning: 'Religious apostasy / confusion', text: 'Genesis 10:8-10; Revelation 18:2-3; 17:1-5' },
            { symbol: 'Balaam, Doctrine of', meaning: 'Advancing our own interests, compromise, idolatry', text: 'Numbers 22:5-25' },
            { symbol: 'Bear', meaning: 'Destructive Power / Medo Persia', text: 'Proverbs 28:15; Daniel 7:5' },
            { symbol: 'Beast', meaning: 'King or Political Kingdom / Empire', text: 'Daniel 7:17, 23' },
            { symbol: 'Black', meaning: 'Moral darkness, sin, apostasy', text: 'Exodus 10:21-23; Jeremiah 4:20-28; Joel 2:1-10' },
            { symbol: 'Blood', meaning: 'Life', text: 'Leviticus 17:11; Deuteronomy 12:23' },
            { symbol: 'Bottomless pit', meaning: 'Earth in chaos, torn up, dark and empty', text: 'Genesis 1:1-2; Revelation 20:1-3' },
            { symbol: 'Bow', meaning: 'Success in battle against evil', text: 'Psalms 7:11-12; 45:4-5' },
            { symbol: 'Clothing / Garments', meaning: 'Character / Covering of righteousness', text: 'Isaiah 64:6; Zechariah 3:3-5' },
            { symbol: 'Corrupt Woman / Harlot', meaning: 'An apostate, false church (Babylon)', text: 'Revelation 17:1-5; Ezekiel 16:15-58' },
            { symbol: 'Crowns', meaning: 'Kingship, victory', text: '1 Chronicles 20:2; 2 Timothy 4:7-8' },
            { symbol: 'Cup', meaning: 'Meted out suffering and judgments', text: 'Psalms 11:6; Isaiah 51:12' },
            { symbol: 'Door / Open Door', meaning: 'Opportunity / Probation', text: '2 Corinthians 2:12; Revelation 3:20' },
            { symbol: 'Dragon', meaning: 'Satan or his human agencies', text: 'Revelation 12:9; 20:2' },
            { symbol: 'Eagle', meaning: 'Speed, Power, vision, vengeance, protection', text: 'Deuteronomy 28:49; Revelation 12:1-4' },
            { symbol: 'Eating of the book', meaning: 'Assimilating the message', text: 'Ezekiel 3:1-3; Jeremiah 15:16' },
            { symbol: 'Egypt', meaning: 'Symbol of atheism', text: 'Exodus 5:2' },
            { symbol: 'Eye salve', meaning: 'Holy Spirit to help us see truth, discernment', text: 'Ephesians 1:12-19; 1 John 2:20' },
            { symbol: 'Eyes', meaning: 'Spiritual Discernment', text: 'Matthew 13:10-17; 1 John 2:11' },
            { symbol: 'Faithful witness', meaning: 'Christ', text: 'John 18:37; Revelation 1:5' },
            { symbol: 'False Prophet', meaning: 'Apostate Protestantism', text: 'Revelation 16:13-14; 19:20' },
            { symbol: 'Famine', meaning: 'Dearth of Truth', text: 'Amos 8:11' },
            { symbol: 'Feet', meaning: 'Your Walk / Direction', text: 'Genesis 19:2; Psalms 119:105' },
            { symbol: 'Fig Tree', meaning: 'A Nation that should bear fruit', text: 'Luke 13:6-9' },
            { symbol: 'Fire', meaning: "God's presence manifest in the Holy Spirit", text: 'Exodus 3:2-4; 24:17' },
            { symbol: 'Forehead', meaning: 'Mind', text: 'Romans 7:25; Ezekiel 3:8-9' },
            { symbol: 'Four Beasts / Living Creatures', meaning: 'Heavenly beings with special responsibilities', text: 'Revelation 5:8-10; 4:6-9' },
            { symbol: 'Fruit', meaning: 'Works / Actions', text: 'Galatians 5:22' },
            { symbol: 'Goat', meaning: 'Greece', text: 'Daniel 8:21' },
            { symbol: 'Gold', meaning: 'True riches of heaven, faith, scripture', text: 'Psalms 19:7-10; Galatians 5:6' },
            { symbol: 'Great Image', meaning: 'Successive world kingdoms / empires', text: 'Daniel 2:31-44' },
            { symbol: 'Hand', meaning: 'Symbol of Deeds / Works / Actions', text: 'Ecclesiastes 9:10; Isaiah 59:6' },
            { symbol: 'Harvest / Sickle', meaning: 'The end of the world / Second Coming', text: 'Revelation 14:14-20; Matthew 13:39' },
            { symbol: 'Heads', meaning: 'Major powers / rulers / governments', text: 'Revelation 17:3, 9-10; Daniel 7:6' },
            { symbol: 'Healing', meaning: 'Salvation', text: 'Luke 5:23-24' },
            { symbol: 'Hidden Manna', meaning: 'Christ', text: 'John 6:49-50; Matthew 13:44' },
            { symbol: 'Honey', meaning: 'Happy life', text: 'Ezekiel 20:6; Deuteronomy 8:8-9' },
            { symbol: 'Horns', meaning: 'Powers, kings, or kingdoms', text: 'Revelation 17:3; Daniel 7:7, 24' },
            { symbol: 'Horse', meaning: 'Strength and Power in Battle / Special messengers', text: 'Job 39:19; Zechariah 1:8-10' },
            { symbol: 'Incense', meaning: "Prayers of God's people", text: 'Psalms 141:2; Revelation 5:8' },
            { symbol: 'Israel', meaning: 'True Followers of Christ', text: 'Romans 9:6-8; Galatians 3:29' },
            { symbol: 'Jar / Vessel', meaning: 'Person', text: 'Jeremiah 18:1-4; 2 Corinthians 4:7' },
            { symbol: 'Jezebel', meaning: 'Immorality, Idolatry, Apostasy', text: '1 Kings 21:25; 2 Kings 9:22' },
            { symbol: 'Key of David / Keys', meaning: 'Power to open & close / Control & jurisdiction', text: 'Revelation 3:7-9; Isaiah 22:22' },
            { symbol: 'Lamb', meaning: 'Jesus Christ, the ultimate sacrifice', text: 'John 1:29; Revelation 5:6' },
            { symbol: 'Lamp / Seven Lamps', meaning: 'Word of God / Jesus', text: 'Psalms 119:105; Revelation 4:5' },
            { symbol: 'Leopard', meaning: 'Greece', text: 'Daniel 7:6' },
            { symbol: 'Lion', meaning: 'Jesus / Powerful King (e.g. Babylon)', text: 'Revelation 5:4-9; Daniel 7:4' },
            { symbol: 'Locusts', meaning: 'Destruction', text: 'Joel 1:4; Deuteronomy 28:38' },
            { symbol: 'Lords Day', meaning: 'The Sabbath', text: 'Isaiah 58:13; Matthew 12:8' },
            { symbol: 'Man Child', meaning: 'Jesus', text: 'Psalms 2:7-9; Revelation 12:5' },
            { symbol: 'Mark / Seal', meaning: 'Sign / Seal / Mark of approval or disapproval', text: 'Romans 4:11; Revelation 13:17; 7:2-3' },
            { symbol: 'Measuring Rod', meaning: "God's Law / God's Word", text: 'James 2:10-12; Ecclesiastes 12:13-14' },
            { symbol: 'Merchants', meaning: "Advocates of Babylon's teachings", text: 'Isaiah 47:11-15; Revelation 18:3' },
            { symbol: 'Moon', meaning: "Permanence / Moses' system of types of sacrifices", text: 'Psalms 89:35-37; Hebrews 10:1' },
            { symbol: 'Morning star', meaning: 'Jesus', text: 'Revelation 22:16' },
            { symbol: 'Mountains', meaning: 'Political or religion-political powers', text: 'Isaiah 2:2-3; Daniel 2:35, 44-45' },
            { symbol: 'Mystery of God', meaning: 'The gospel', text: 'Ephesians 1:9-10; Colossians 1:26-27' },
            { symbol: 'New Jerusalem', meaning: 'The Holy city of Heaven', text: 'Revelation 3:12; 21:2' },
            { symbol: 'Number Three', meaning: 'The Godhead: Father, Son, Holy Spirit', text: 'Biblical Numerology / Matthew 28:19' },
            { symbol: 'Oil', meaning: 'Holy Spirit', text: 'Zechariah 4:2-6; Revelation 4:5' },
            { symbol: 'Prophetic Day', meaning: 'One literal solar year', text: 'Numbers 14:34; Ezekiel 4:6' },
            { symbol: 'Pure Woman', meaning: 'The true church, the Bride of Christ', text: 'Jeremiah 6:2; 2 Corinthians 11:2' },
            { symbol: 'Purple', meaning: 'Royalty', text: 'Mark 15:17; Judges 8:26' },
            { symbol: 'Rainbow', meaning: 'Token of covenant keeping', text: 'Genesis 9:11-17' },
            { symbol: 'Ram', meaning: 'Medo Persia', text: 'Daniel 8:20' },
            { symbol: 'Red / Scarlet', meaning: 'Sin / corruption', text: 'Isaiah 1:18; Revelation 17:1-4' },
            { symbol: 'Rock / Stone cut without hands', meaning: "Jesus Christ, the sure foundation / Christ's eternal kingdom", text: '1 Corinthians 10:4; Daniel 2:34, 44' },
            { symbol: 'Sea / Waters', meaning: 'People, multitudes, nations, languages', text: 'Revelation 17:15' },
            { symbol: 'Second Death', meaning: 'Lake of fire', text: 'Revelation 21:8; 20:2' },
            { symbol: 'Seed', meaning: 'The Word of God / Offspring of Abraham (Jesus)', text: 'Luke 8:11; Galatians 3:16' },
            { symbol: 'Serpent', meaning: 'Satan', text: 'Revelation 12:9; 20:2' },
            { symbol: 'Seven Candlesticks', meaning: '7 candlesticks in Holy Place / Seven Churches', text: 'Exodus 25:31-40; Revelation 1:20' },
            { symbol: 'Seven Heads', meaning: 'Seven Political Powers', text: 'Revelation 17:9-10; Isaiah 2:2-4' },
            { symbol: 'Silver', meaning: 'Pure Words & Understanding', text: 'Proverbs 2:4; Psalms 12:6' },
            { symbol: 'Sodom', meaning: 'Moral degradations', text: 'Ezekiel 16:46-55; Genesis 19:4-14' },
            { symbol: 'Stars', meaning: 'Angels or messengers', text: 'Revelation 1:20; 12:4' },
            { symbol: 'Sun', meaning: 'Jesus / the gospel', text: 'Psalms 84:11; Malachi 4:2' },
            { symbol: 'Sword / Two-edged Sword', meaning: 'The Word of God / Destruction', text: 'Revelation 19:15; Hebrews 4:12' },
            { symbol: 'Testimony of Jesus', meaning: 'Holy Spirit / gift of prophecy', text: 'Revelation 19:10; 22:9' },
            { symbol: 'Thief', meaning: 'Suddenness / unexpected', text: '1 Thessalonians 5:2-4; 2 Peter 3:10' },
            { symbol: 'Time / Times', meaning: '360 / 720 Days (Literal Years)', text: 'Daniel 4:16; 7:25; Revelation 12:6' },
            { symbol: 'Tongue', meaning: 'Language / Speech', text: 'Exodus 4:10' },
            { symbol: 'Torment', meaning: 'Test, prove by trial', text: '1 Corinthians 3:13; Hebrews 12:29' },
            { symbol: 'Tree', meaning: 'Cross; People / Nation', text: 'Deuteronomy 21:22-23; Psalms 92:12' },
            { symbol: 'Trumpet', meaning: "Loud warning of God's approach", text: 'Exodus 19:16-17; Joshua 6:4-5' },
            { symbol: 'Two witnesses', meaning: 'Old and New Testaments', text: 'John 5:39; Zechariah 4:1-14' },
            { symbol: 'Water', meaning: 'Holy Spirit / Everlasting Life', text: 'John 7:39; Revelation 22:17' },
            { symbol: 'White (Color) / White Robes', meaning: 'Purity / Victory / righteousness', text: 'Revelation 12:9; 19:8' },
            { symbol: 'Winds', meaning: 'Calamity, strife, war, conflict, destructive forces', text: 'Jeremiah 49:32; Revelation 7:1' },
            { symbol: 'Wine', meaning: 'False doctrine / intoxicating teachings / blood / covenant', text: 'Revelation 17:2; Luke 5:37' },
            { symbol: 'Wings', meaning: 'Speed / Protection / Deliverance', text: 'Deuteronomy 28:49; Matthew 23:37' },
            { symbol: 'Wormwood', meaning: 'Sorrow / bitterness', text: 'Jeremiah 9:15; Lamentations 3:19' },
            { symbol: 'Wrath of God', meaning: 'Seven Last Plagues', text: 'Revelation 15:1' }
          ].map((item) => (
            <details key={item.symbol} className="group/symbol [&_summary::-webkit-details-marker]:hidden">
              <summary className="cursor-pointer list-none px-4 py-3 flex items-center justify-between gap-4 hover:bg-slate-50 transition-colors">
                <div className="min-w-0">
                  <strong className="block text-sm md:text-base font-extrabold text-slate-900">{item.symbol}</strong>
                  <span className="block text-sm text-indigo-700 font-semibold leading-snug">{item.meaning}</span>
                </div>
                <ChevronDown className="w-4 h-4 text-indigo-600 shrink-0 transition-transform group-open/symbol:rotate-180" />
              </summary>
              <div className="px-4 pb-4">
                <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-3 text-sm text-slate-700">
                  <strong className="text-indigo-900 block mb-1">Scripture controls</strong>
                  {item.text}
                </div>
              </div>
            </details>
          ))}
            </div>
          </div>
        </details>
      </div>
    )
  },
  {
    id: 'prophecy-case-study',
    sectionNum: '9.1',
    title: 'Case Study',
    icon: Search,
    isSubSection: true,
    content: ({ navigate }) => <CaseStudyPage study={caseStudies.prophecy} navigate={navigate} />
  },
  {
    id: 'wisdom',
    sectionNum: '10',
    title: 'Interpreting Wisdom Literature',
    icon: Compass,
    content: () => (
      <div className="animate-in fade-in duration-500">
        <div className="mb-8">
          <div className="text-indigo-600 font-semibold tracking-wider uppercase text-sm mb-2">Page 10</div>
          <H1>Interpreting Wisdom Literature</H1>
        </div>

        <LearningSteps
          title="Wisdom Learning Path"
          intro="Start with formation and discernment. Then compare wisdom books and connect their theology to creation, limits, and Christ."
          steps={learningStepPresets.wisdom}
        />

        <H2>Overview: What is Wisdom Literature?</H2>
        <P>
          Wisdom literature summons us to think hard as well as humbly. It builds a practical theology for living faithfully each day, aiming for the formation of godly character. A large majority of wisdom literature is highly poetic, relying heavily on parallelism.
        </P>
        <P>
          Wisdom literature is different from law, narrative, epistles, and prophecy. It does not usually say, "Here is a command," or "Here is a historical event." Instead, it teaches us how life normally works under God, how to make faithful decisions, how to suffer without easy answers, how to enjoy God's gifts, and how to love wisely.
        </P>
        <P><Strong>Books Included:</Strong> Proverbs, Job, Ecclesiastes, and Song of Songs.</P>

        <H2>Overview: The Theological Foundation</H2>
        <P>
          The absolute theological foundation of all biblical wisdom is clearly stated in Proverbs 1:7: <strong>"The fear of the Lord is the beginning of knowledge."</strong> Although the wisdom books do not repeatedly stress the standard elements of the salvation story (like the Exodus or the covenants), they fully assume the theological underpinnings of the rest of the Old Testament. 
        </P>

        <div className="bg-slate-50 border border-slate-200 p-5 rounded-xl shadow-inner my-8">
          <strong className="text-indigo-900 block text-base mb-3 uppercase tracking-wider border-b border-slate-200 pb-2">Common Forms of Wisdom</strong>
          <div className="grid md:grid-cols-2 gap-4 text-sm text-slate-700">
            <div className="bg-white p-4 rounded-xl border border-slate-100 shadow-sm"><strong className="text-emerald-700 block mb-1">Short Proverbs</strong>Compact sayings that describe the normal patterns of wise and foolish living.</div>
            <div className="bg-white p-4 rounded-xl border border-slate-100 shadow-sm"><strong className="text-indigo-700 block mb-1">Dialogues and Debate</strong>Job uses speeches and arguments to wrestle with suffering, justice, and God's sovereignty.</div>
            <div className="bg-white p-4 rounded-xl border border-slate-100 shadow-sm"><strong className="text-rose-700 block mb-1">Reflective Monologue</strong>Ecclesiastes explores the frustration of life "under the sun" and pushes us toward reverence for God.</div>
            <div className="bg-white p-4 rounded-xl border border-slate-100 shadow-sm"><strong className="text-pink-700 block mb-1">Love Poetry</strong>Song of Songs celebrates covenant love, desire, beauty, and marital delight through rich imagery.</div>
          </div>
        </div>

        <Quote>
          <p className="mb-2">"The wisdom books summon us to think hard as well as humbly; to keep our eyes open, to use our conscience and our common sense, and not to shirk disturbing questions."</p>
          <footer className="text-sm font-bold text-indigo-800">— Derek Kidner</footer>
        </Quote>

        <H2>The Four Faces of Wisdom</H2>
        <P>The four wisdom books present highly distinct, sometimes seemingly contradictory, perspectives on how to navigate the complexities of life. To interpret them accurately, we must recognize the specific "angle" each book provides.</P>

        <div className="space-y-6 mb-10">
          
          <div className="bg-white border-t-4 border-emerald-500 p-6 rounded-b-xl shadow-sm">
            <h3 className="text-xl font-bold text-emerald-900 mb-2">1. Proverbs: The Rational Norms of Life</h3>
            <p className="text-slate-700 mb-4">Proverbs presents the rational, ordered norms of life. It gives guidance addressing situations that are <em>normally</em> true. The immense interpretive danger is reading a proverb as an absolute, universal promise or a strict legal guarantee.</p>
            <div className="bg-emerald-50 p-4 rounded-xl border border-emerald-100 text-sm text-slate-800">
              <strong className="text-emerald-800 block mb-1">Example: The Danger of Prescriptive Reading</strong>
              "Train up a child in the way he should go; even when he is old he will not depart from it" (Prov 22:6). <br/><br/>If read as an absolute promise, parents whose adult children leave the faith will feel immense guilt, believing God broke His promise. However, read properly as a <em>proverb</em>, it simply states the rational norm: statistically, a child raised in a godly home will likely retain those values. It is a general principle for living, not a contractual guarantee.
            </div>
          </div>

          <div className="bg-white border-t-4 border-indigo-500 p-6 rounded-b-xl shadow-sm">
            <h3 className="text-xl font-bold text-indigo-900 mb-2">2. Job: The Suffering of the Righteous</h3>
            <p className="text-slate-700 mb-4">Job demonstrates that the proverbial approach cannot grasp or understand every aspect of life. Tragedy strikes even the wise and righteous. The book is difficult because the principles to be learned do not lay on the surface; we must learn to rely on the Creator in the midst of inexplicable pain.</p>
            <div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100 text-sm text-slate-800">
              <strong className="text-indigo-800 block mb-1">Example: The Misapplication of Proverbs</strong>
              Throughout the book, Job's friends repeatedly quote accurate, proverbial wisdom to Job (e.g., "The wicked suffer, therefore you must have sinned"). Their theology was generally correct, but they misapplied it to Job's specific situation. Job teaches us that the "rules" of Proverbs have exceptions, and God's sovereignty is infinitely higher than our theological formulas.
            </div>
          </div>

          <div className="bg-white border-t-4 border-rose-500 p-6 rounded-b-xl shadow-sm">
            <h3 className="text-xl font-bold text-rose-900 mb-2">3. Ecclesiastes: The Failure of the Rational</h3>
            <p className="text-slate-700 mb-4">Ecclesiastes is an intellectual search for meaning in life. The "Teacher" reveals numerous exceptions to the ordered, rational universe. Intermediate parts of the book must be understood in light of the entire search and the ultimate answer found at the end: meaning in life is <em>only</em> found through a relationship with God.</p>
            <div className="bg-rose-50 p-4 rounded-xl border border-rose-100 text-sm text-slate-800">
              <strong className="text-rose-800 block mb-1">Example: Life "Under the Sun"</strong>
              "Meaningless! Meaningless! Everything is meaningless" (Eccl 1:2). <br/><br/>The author conducts a ruthless experiment, trying to find ultimate satisfaction in wealth, pleasure, and human wisdom. He concludes that life "under the sun" (a life lived completely apart from God and eternal realities) is utterly futile.
            </div>
          </div>

          <div className="bg-white border-t-4 border-pink-500 p-6 rounded-b-xl shadow-sm">
            <h3 className="text-xl font-bold text-pink-900 mb-2">4. Song of Songs: The Irrationality of Love</h3>
            <p className="text-slate-700 mb-4">Song of Songs celebrates the wild, irrational, mushy, and corny aspects of true romantic love. Historically, many interpreters allegorized this book (claiming it was only about God's love for Israel or Christ's love for the Church). While it certainly reflects divine love, its primary literary meaning is a celebration of the beauty and exclusivity of marital intimacy as designed by God.</p>
            <div className="bg-pink-50 p-4 rounded-xl border border-pink-100 text-sm text-slate-800">
              <strong className="text-pink-800 block mb-1">Example: Earthly Intimacy</strong>
              "Let him kiss me with the kisses of his mouth—for your love is more delightful than wine" (Song 1:2). <br/><br/>This is not an allegory about prayer; it is the inspired, poetic validation of physical, marital romance.
            </div>
          </div>

        </div>

        <H2>More Rules for Interpreting Wisdom Literature</H2>

        <Ul>
          <Li>
            <div className="w-full">
              <Strong>1. Identify the Wisdom Form Before Applying It</Strong>
              <p className="mt-1 text-slate-700">Do not read every wisdom passage the same way. A proverb, a speech in Job, a reflection in Ecclesiastes, and a love poem in Song of Songs each work differently. First ask: <em>What kind of wisdom writing am I reading?</em></p>
              
              <div className="mt-4 grid md:grid-cols-4 gap-3 text-sm text-slate-700">
                <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl shadow-sm"><strong className="text-emerald-800 block mb-1">Proverb</strong>Prov. 10:4 gives a general pattern about diligence and poverty.</div>
                <div className="bg-indigo-50 border border-indigo-100 p-4 rounded-xl shadow-sm"><strong className="text-indigo-800 block mb-1">Dialogue</strong>Job's friends speak many words, but not all their conclusions are approved by God.</div>
                <div className="bg-rose-50 border border-rose-100 p-4 rounded-xl shadow-sm"><strong className="text-rose-800 block mb-1">Reflection</strong>Ecclesiastes wrestles honestly with the limits of human wisdom.</div>
                <div className="bg-pink-50 border border-pink-100 p-4 rounded-xl shadow-sm"><strong className="text-pink-800 block mb-1">Poetry</strong>Song of Songs uses romantic images, not technical descriptions.</div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>2. Read Proverbs as General Wisdom, Not Mechanical Promises</Strong>
              <p className="mt-1 text-slate-700">A proverb is usually a wise observation about how life normally works, not a guarantee that removes every exception. Proverbs teach patterns, not formulas. They invite wise living, but they do not control God or explain every circumstance.</p>
              
              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Proverbs 22:6</strong>
                  This gives a strong principle about faithful formation, but it should not be used to crush grieving parents with guilt.
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Proverbs 26:4-5</strong>
                  One verse says not to answer a fool; the next says to answer a fool. Wisdom discerns which response fits the moment.
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Proverbs 10:4</strong>
                  Laziness often leads to lack, but Job reminds us that suffering is not always caused by foolishness.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>3. Keep the Fear of the Lord at the Center</Strong>
              <p className="mt-1 text-slate-700">Biblical wisdom is not merely clever living or common sense. It begins with reverent trust in God. "Fear of the Lord" means taking God seriously, submitting to His ways, and letting His character shape our decisions.</p>
              
              <div className="mt-4 bg-indigo-50 border border-indigo-100 p-5 rounded-xl shadow-sm text-sm text-slate-700">
                <strong className="text-indigo-900 block mb-2">Key Texts</strong>
                Proverbs 1:7 begins wisdom with the fear of the Lord. Job 28:28 says wisdom is fearing the Lord and turning from evil. Ecclesiastes 12:13 closes the search for meaning with fearing God and keeping His commandments.
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>4. Pay Attention to Context and Speaker</Strong>
              <p className="mt-1 text-slate-700">In wisdom literature, not every sentence is equally endorsed just because it appears in the Bible. Sometimes the book records a wrong argument so we can see why it fails. Always ask who is speaking and how the whole book evaluates their words.</p>
              
              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-indigo-50 border border-indigo-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-900 block mb-1">Job's Friends</strong>
                  They say some true things about God, but they wrongly accuse Job. God rebukes their interpretation in Job 42:7.
                </div>
                <div className="bg-rose-50 border border-rose-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-rose-900 block mb-1">Ecclesiastes</strong>
                  Statements about life "under the sun" must be read within the Teacher's whole search and final conclusion.
                </div>
                <div className="bg-pink-50 border border-pink-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-pink-900 block mb-1">Song of Songs</strong>
                  Watch the voices. The woman, the man, and the daughters of Jerusalem do not all speak from the same perspective.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>5. Let the Wisdom Books Balance One Another</Strong>
              <p className="mt-1 text-slate-700">The wisdom books are meant to be read together. Proverbs teaches the normal path of wisdom. Job shows that righteous people can suffer. Ecclesiastes exposes the limits of life without eternal perspective. Song of Songs celebrates love as one of God's good gifts.</p>
              
              <div className="mt-4 bg-slate-50 border border-slate-200 p-5 rounded-xl shadow-inner text-sm text-slate-700">
                <strong className="text-slate-900 block mb-2">Beginner Example</strong>
                If you only read Proverbs, you might assume suffering always means foolish choices. Job corrects that. If you only read Ecclesiastes, life may feel bleak. Song of Songs and Proverbs remind us that God's gifts can be received with joy and discipline.
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>6. Read the Poetry Carefully</Strong>
              <p className="mt-1 text-slate-700">Wisdom literature often uses parallel lines, vivid images, comparison, exaggeration, and metaphor. Slow down and ask what the image is doing. Do not flatten poetry into wooden literalism.</p>
              
              <div className="mt-4 grid md:grid-cols-3 gap-4 text-sm">
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Parallelism</strong>
                  "Iron sharpens iron" (Prov. 27:17) uses a concrete image to describe how people shape one another.
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Imagery</strong>
                  Song of Songs praises beauty through garden, fruit, fragrance, and animal imagery. The goal is poetic delight, not anatomy.
                </div>
                <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
                  <strong className="text-indigo-800 block mb-1">Metaphor</strong>
                  Ecclesiastes' "chasing after wind" pictures the frustration of trying to grasp lasting meaning apart from God.
                </div>
              </div>
            </div>
          </Li>

          <Li>
            <div className="w-full">
              <Strong>7. Apply Wisdom as Character Formation</Strong>
              <p className="mt-1 text-slate-700">Wisdom is not given merely so we can collect clever sayings. It is meant to form a person who is humble, disciplined, honest, sexually faithful, emotionally mature, reverent toward God, and compassionate toward others.</p>
              
              <div className="mt-4 grid md:grid-cols-2 gap-4 text-sm">
                <div className="bg-emerald-50 border border-emerald-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-emerald-900 block mb-1">Speech</strong>
                  Proverbs repeatedly trains the tongue: wise words heal, foolish words wound, and silence can be wisdom.
                </div>
                <div className="bg-amber-50 border border-amber-100 p-4 rounded-xl shadow-sm">
                  <strong className="text-amber-900 block mb-1">Humility</strong>
                  Job ends not with all questions answered, but with deeper trust in God's wisdom beyond human control.
                </div>
              </div>
            </div>
          </Li>
        </Ul>
      </div>
    )
  },
  {
    id: 'wisdom-case-study',
    sectionNum: '10.1',
    title: 'Case Study',
    icon: Search,
    isSubSection: true,
    content: ({ navigate }) => <CaseStudyPage study={caseStudies.wisdom} navigate={navigate} />
  },
  {
    id: 'ai-interpreter',
    sectionNum: '11',
    title: 'Guided Workbook',
    icon: Sparkles,
    content: AiInterpreter
  },
  {
    id: 'master-checklist',
    sectionNum: '12',
    title: 'Master Interpretation Checklist',
    icon: CheckCircle2,
    content: MasterChecklistPage
  },
  {
    id: 'practice-library',
    sectionNum: '13',
    title: 'Practice Library',
    icon: Clipboard,
    content: PracticeLibraryPage
  },
  {
    id: 'decision-trees',
    sectionNum: '14',
    title: 'Decision Trees',
    icon: GitMerge,
    content: DecisionTreesPage
  },
  {
    id: 'glossary',
    sectionNum: '15',
    title: 'Glossary',
    icon: BookOpen,
    content: GlossaryPage
  },
  {
    id: 'teacher-group',
    sectionNum: '16',
    title: 'Teacher & Small Group Mode',
    icon: MessageCircle,
    content: TeacherGroupModePage
  },
  {
    id: 'credits-sources',
    sectionNum: '17',
    title: 'Credits & Sources',
    icon: BookMarked,
    content: CreditsSourcesPage
  }
];

const getSearchEntries = () => {
  const pageEntries = pages.map((page) => ({
    pageId: page.id,
    title: page.title,
    type: page.isSubSection ? "Page" : "Section",
    text: `${page.title} ${page.sectionNum} ${page.id}`
  }));
  const ruleEntries = Object.values(workbookGenreConfig).flatMap((config) =>
    config.ruleKeys.map((rule) => ({
      pageId: config.pageId,
      title: rule,
      type: `${config.label} Rule`,
      text: `${config.label} ${rule} ${config.summary}`
    }))
  );
  const glossaryEntries = glossaryTerms.map((item) => ({
    pageId: "glossary",
    title: item.term,
    type: "Glossary",
    text: `${item.term} ${item.definition}`
  }));
  const practiceEntries = practiceLibrary.flatMap((group) =>
    group.exercises.map((exercise) => ({
      pageId: "practice-library",
      title: exercise.reference,
      type: `${group.genre} Practice`,
      text: `${group.genre} ${group.purpose} ${exercise.reference} ${exercise.level} ${exercise.skill} ${exercise.prompt} ${exercise.steps.join(" ")} ${exercise.answer} ${exercise.commonMistake} ${exercise.groupUse}`
    }))
  );
  const caseStudyPageIds = {
    Poetry: "poetry-case-study",
    "Historical Narrative": "history-case-study",
    "Gospels and Acts": "gospels-acts-case-study",
    Epistles: "epistles-case-study",
    Law: "law-case-study",
    Parables: "parables-case-study",
    Prophecy: "prophecy-case-study",
    "Wisdom Literature": "wisdom-case-study"
  };
  const caseStudyEntries = Object.values(caseStudies).map((study) => ({
    pageId: caseStudyPageIds[study.genre] || "practice-library",
    title: `${study.passage} Case Study`,
    type: `${study.genre} Case Study`,
    text: `${study.genre} ${study.passage} ${study.subtitle} ${study.focus} ${study.setup}`
  }));
  const toolEntries = [
    { pageId: "start-here", title: "Beginner Intermediate Advanced Learning Paths", type: "Learning Path", text: "beginner intermediate advanced learning levels start here route path ladder what to do first" },
    { pageId: "beginner-path", title: "Beginner Path", type: "Learning Path", text: "beginner path start here general hermeneutics genre identification core rules guided workbook glossary easy practice" },
    { pageId: "intermediate-path", title: "Intermediate Path", type: "Learning Path", text: "intermediate path full genre rules case studies practice library decision trees master checklist repetition" },
    { pageId: "advanced-path", title: "Advanced Path", type: "Learning Path", text: "advanced path argument diagramming grammar conjunctions arcing bracketing phrasing relationships prophecy tools rhetoric teaching helps" },
    { pageId: "general-beginner", title: "Beginner General Hermeneutics", type: "General Hermeneutics", text: "beginner general hermeneutics preunderstanding observation context genre main idea imagination simple application basic method authorial intent" },
    { pageId: "general-intermediate", title: "Intermediate General Hermeneutics", type: "General Hermeneutics", text: "intermediate general hermeneutics historical context concentric context circles translation comparison repeated words contrasts cause effect basic word studies principlizing bridge SPACEPETS" },
    { pageId: "general-advanced", title: "Advanced General Hermeneutics", type: "General Hermeneutics", text: "advanced general hermeneutics syntax literary structure word study fallacies same author cross references analogy of faith theological synthesis redemptive history great controversy commentaries resource checking" },
    { pageId: "master-checklist", title: "Observation Context Genre Interpretation Application Checklist", type: "Toolkit", text: "master interpretation checklist observation context genre structure theology application mistake audit" },
    { pageId: "practice-library", title: "Practice Library Level Filter", type: "Learning Path", text: "beginner intermediate advanced practice exercises start here filter" },
    { pageId: "decision-trees", title: "Genre and Prophecy Decision Trees", type: "Toolkit", text: "genre identification classical apocalyptic prophecy description prescription principlizing bridge argument diagramming" },
    { pageId: "teacher-group", title: "Teacher and Small Group Mode", type: "Toolkit", text: "teaching small group discussion questions 10 minute lesson flow" },
    { pageId: "ai-interpreter", title: "Guided Workbook", type: "Workbook", text: "guided workbook no ai summary print export markdown confidence checklist beginner intermediate advanced level selector" }
  ];
  return [...pageEntries, ...ruleEntries, ...glossaryEntries, ...practiceEntries, ...caseStudyEntries, ...toolEntries];
};

function App() {
  const [currentPageIndex, setCurrentPageIndex] = useState(0);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [currentPageIndex]);

  const CurrentContent = pages[currentPageIndex].content;
  const CurrentBreadcrumbIcon = pages[currentPageIndex].icon;

  const navigate = (id) => {
    const idx = pages.findIndex(p => p.id === id);
    if (idx !== -1) {
      setCurrentPageIndex(idx);
      setIsMobileMenuOpen(false);
      setSearchQuery("");
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  const navigateFromSearch = (event, id) => {
    event.preventDefault();
    navigate(id);
  };

  const normalizedSearch = searchQuery.trim().toLowerCase();
  const searchResults = normalizedSearch
    ? getSearchEntries()
        .filter((entry) => entry.text.toLowerCase().includes(normalizedSearch) || entry.title.toLowerCase().includes(normalizedSearch))
        .slice(0, 8)
    : [];

  const handleNext = () => {
    if (currentPageIndex < pages.length - 1) setCurrentPageIndex(currentPageIndex + 1);
  };

  const handlePrev = () => {
    if (currentPageIndex > 0) setCurrentPageIndex(currentPageIndex - 1);
  };

  return (
    <div className="min-h-screen bg-slate-50 flex flex-col md:flex-row font-sans selection:bg-indigo-200 selection:text-indigo-900">
      
      {/* Mobile Header */}
      <div className="md:hidden bg-indigo-950 text-white p-4 flex justify-between items-center sticky top-0 z-50 shadow-xl">
        <div className="flex items-center gap-2">
          <BookMarked className="w-6 h-6 text-indigo-400" />
          <span className="font-bold text-lg tracking-wide">Hermeneutics Guide</span>
        </div>
        <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="p-2 bg-white/10 rounded-lg hover:bg-white/20 transition-colors">
          {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
        </button>
      </div>

      {/* Sidebar Navigation */}
      <nav className={`
        ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} 
        md:translate-x-0 transition-transform duration-300 ease-in-out
        w-full md:w-80 bg-indigo-950 text-white md:min-h-screen 
        fixed md:sticky top-[68px] md:top-0 z-40 overflow-y-auto shadow-2xl
      `}>
        <div className="p-8 hidden md:flex flex-col gap-3 border-b border-white/10 mb-6 bg-indigo-900/50 backdrop-blur-sm">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-indigo-600 rounded-xl shadow-lg">
              <BookMarked className="w-7 h-7 text-white" />
            </div>
            <h2 className="text-2xl font-black tracking-tight leading-none text-transparent bg-clip-text bg-gradient-to-br from-white to-indigo-300">
              Hermeneutics<br/>Guide
            </h2>
          </div>
          <p className="text-indigo-200/70 text-sm mt-2 font-medium">Mastering biblical interpretation.</p>
        </div>

        <div className="px-4 md:px-6 pb-4 md:pb-6 border-b border-white/10">
          <label htmlFor="guide-search" className="sr-only">Search the guide</label>
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-indigo-300" />
            <input
              id="guide-search"
              type="search"
              value={searchQuery}
              onChange={(event) => setSearchQuery(event.target.value)}
              onKeyDown={(event) => {
                if (event.key === "Enter" && searchResults[0]) {
                  navigateFromSearch(event, searchResults[0].pageId);
                }
              }}
              placeholder="Search topics..."
              className="w-full rounded-xl border border-white/10 bg-white/10 py-3 pl-10 pr-3 text-sm text-white placeholder:text-indigo-200/70 outline-none transition focus:border-indigo-300 focus:bg-white/15"
            />
          </div>
          {searchQuery.trim() && (
            <div className="mt-3 overflow-hidden rounded-xl border border-white/10 bg-indigo-900/95 shadow-xl">
              {searchResults.length > 0 ? (
                searchResults.map((result) => (
                  <button
                    type="button"
                    key={`${result.pageId}-${result.type}-${result.title}`}
                    onPointerDown={(event) => navigateFromSearch(event, result.pageId)}
                    onMouseDown={(event) => navigateFromSearch(event, result.pageId)}
                    onMouseUp={(event) => navigateFromSearch(event, result.pageId)}
                    onClick={() => navigate(result.pageId)}
                    className="block w-full border-b border-white/10 px-4 py-3 text-left transition last:border-b-0 hover:bg-white/10"
                  >
                    <span className="block text-[10px] font-bold uppercase tracking-widest text-indigo-300">{result.type}</span>
                    <span className="mt-1 block text-sm font-semibold text-white">{result.title}</span>
                  </button>
                ))
              ) : (
                <div className="px-4 py-3 text-sm text-indigo-100/80">No results found.</div>
              )}
            </div>
          )}
        </div>

        <div className="p-4 md:p-6 space-y-2 pb-32 md:pb-6">
          <div className="text-xs font-bold text-indigo-400/80 uppercase tracking-widest mb-4 ml-3">Guide Contents</div>
          {pages.map((page, index) => {
            const Icon = page.icon;
            const isActive = index === currentPageIndex;
            const isSub = page.isSubSection;
            const isNestedSub = page.isNestedSubSection;
            return (
              <button
                key={page.id}
                onClick={() => {
                  setCurrentPageIndex(index);
                  setIsMobileMenuOpen(false);
                  setSearchQuery("");
                }}
                className={`w-full flex items-center gap-3 py-3 rounded-xl transition-all duration-300 text-left relative group ${
                  isNestedSub ? 'pl-16 pr-4 mt-1' : isSub ? 'pl-12 pr-4 mt-1' : 'px-5 mt-2'
                } ${
                  isActive 
                    ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg shadow-indigo-900/50' 
                    : isNestedSub ? 'text-indigo-300/90 hover:bg-white/5 hover:text-white' : isSub ? 'text-indigo-300 hover:bg-white/5 hover:text-white' : 'text-indigo-200 hover:bg-white/10 hover:text-white'
                }`}
              >
                {isActive && !isSub && <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-white rounded-r-full" />}
                {isNestedSub ? (
                  <div className="absolute left-10 top-1/2 -translate-y-1/2 w-3 h-3 border-l-2 border-b-2 border-indigo-500/40 rounded-bl-sm" />
                ) : isSub && (
                  <div className="absolute left-6 top-1/2 -translate-y-1/2 w-3 h-3 border-l-2 border-b-2 border-indigo-500/50 rounded-bl-sm" />
                )}
                <Icon className={`${isNestedSub ? 'w-4 h-4' : 'w-5 h-5'} transition-transform duration-300 ${isActive ? 'scale-110 text-white' : 'group-hover:scale-110 text-indigo-400'}`} />
                <span className={`tracking-wide ${isNestedSub ? 'text-xs' : isSub ? 'text-sm' : 'text-base'} ${isActive ? 'font-bold' : 'font-medium'}`}>{page.title}</span>
              </button>
            );
          })}
        </div>
      </nav>

      {/* Main Content Area */}
      <main className="flex-1 bg-slate-50 min-h-screen w-full relative">
        <div className="max-w-4xl mx-auto p-6 md:p-12 lg:p-16">
          
          <div className="mb-10 flex items-center gap-3 text-sm text-indigo-600 font-bold tracking-widest uppercase bg-indigo-100/50 w-fit px-4 py-2 rounded-full border border-indigo-100 shadow-sm">
            <CurrentBreadcrumbIcon className="w-4 h-4" />
            Section {pages[currentPageIndex].sectionNum}
          </div>

          <div className="prose prose-slate prose-indigo max-w-none">
            {pages.map((page, index) => {
              const PageContent = page.content;
              return (
                <div key={page.id} className={index === currentPageIndex ? 'block animate-in fade-in duration-500' : 'hidden'}>
                  <PageContent navigate={navigate} />
                </div>
              );
            })}
          </div>

          {/* Bottom Navigation */}
          <div className="mt-20 pt-10 border-t-2 border-slate-200/60 flex flex-col sm:flex-row justify-between items-center gap-6">
            <button
              onClick={handlePrev}
              disabled={currentPageIndex === 0}
              className={`flex items-center gap-3 px-6 py-4 rounded-xl font-bold transition-all duration-300 w-full sm:w-auto justify-center ${
                currentPageIndex === 0 
                  ? 'bg-slate-100 text-slate-400 cursor-not-allowed' 
                  : 'bg-white border-2 border-slate-200 text-slate-700 hover:border-indigo-600 hover:text-indigo-600 shadow-sm hover:shadow-md'
              }`}
            >
              <ChevronLeft className="w-5 h-5" />
              Previous Section
            </button>
            
            <div className="flex gap-2">
              {pages.map((_, idx) => (
                <div key={idx} className={`w-2.5 h-2.5 rounded-full transition-all duration-500 ${idx === currentPageIndex ? 'bg-indigo-600 scale-125' : 'bg-slate-300'}`} />
              ))}
            </div>

            <button
              onClick={handleNext}
              disabled={currentPageIndex === pages.length - 1}
              className={`flex items-center gap-3 px-6 py-4 rounded-xl font-bold transition-all duration-300 w-full sm:w-auto justify-center ${
                currentPageIndex === pages.length - 1 
                  ? 'bg-slate-100 text-slate-400 cursor-not-allowed' 
                  : 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-700 hover:to-purple-700 shadow-lg hover:shadow-indigo-500/30 hover:-translate-y-0.5'
              }`}
            >
              Next Section
              <ChevronRight className="w-5 h-5" />
            </button>
          </div>

        </div>
      </main>
    </div>
  );
}


ReactDOM.createRoot(document.getElementById("root")).render(<App />);