// "Why Study Saints" — long-form essay layout for the /about route.

const WHY_SECTIONS = [
{
  heading: "What is a saint, exactly?",
  body: [
  "If you didn't grow up Catholic, the word \u201Csaint\u201D can sound either vague (a generally good person) or strange (a religious celebrity with a halo). It is neither. A saint, in the Catholic sense, is a specific person who has died and whom the Church has formally declared to be in heaven — fully united with God, and able to pray for those still on earth.",
  "The Church does not hand this out. Canonization is a deliberately slow, evidence-driven process that usually takes decades and often centuries. It begins only after the person has been dead at least five years. A local bishop opens an investigation and gathers everything the candidate ever wrote, said, or did; theologians scrutinize it for any departure from the faith; witnesses testify under oath. If the case survives, Rome declares the person \u201CVenerable.\u201D A verified miracle — medically inexplicable, instantaneous, permanent, and credited to that person's intercession — raises them to \u201CBlessed.\u201D A second verified miracle, after beatification, is required for canonization itself.",
  "The point of all this scrutiny is what canonization actually claims. When the Pope canonizes someone, he is not saying \u201Cthis was a nice person worth remembering.\u201D He is making a formal declaration, considered infallible, that this particular human being is in heaven. That is the stamp. Every saint on this site cleared that bar."]

},
{
  heading: "They were ordinary people",
  body: [
  "There's a popular impression that saints were born different — calmer, holier, somehow already on the road from age six. Most of them weren't. Thérèse of Lisieux was a sheltered girl who never left her hometown. Brother Lawrence washed dishes in a Paris monastery for forty years. Zélie Martin ran a small lace business and buried four of her nine children. Maximilian Kolbe was a magazine editor before he was a martyr. Augustine spent his twenties in ways that would embarrass anyone.",
  "They had tempers, doubts, bad days, ordinary jobs, and the same range of personalities you'd find in any office or family. What distinguishes them isn't talent or temperament — it's what they did with the circumstances they were given. Whether or not you share their beliefs, that arc is worth watching, because the circumstances they were given are not that different from yours."]

},
{
  heading: "They have something to say about suffering",
  body: [
  "Modern culture is unusually bad at suffering. It tells you to manage it, medicate it, narrate it online, or get past it. It rarely tells you what it might be for, or how to be inside it without being destroyed by it. The Catholic tradition has two thousand years of attempts at that question, and the saints are where most of that work was done.",
  "John of the Cross described what it feels like when prayer goes dry. Thérèse documented a final year of doubt so total she compared it to a tunnel. Maria Goretti forgave her killer through twenty hours of dying. Maximilian Kolbe volunteered for the starvation bunker at Auschwitz in another man's place. You do not have to share their theology to find these stories useful — they are evidence that some people, in very bad circumstances, were not destroyed, and they left specific accounts of how."]

},
{
  heading: "They took the inner life seriously",
  body: [
  "Long before anyone called it mindfulness or cognitive therapy, the Catholic tradition was developing detailed methods for paying attention to your interior life. The saints are where most of that work lives.",
  "Ignatius of Loyola designed a process for noticing the difference between desires that calm you down and desires that agitate you. Teresa of Ávila mapped the stages of contemplative attention so precisely she could tell you which one you were in. Brother Lawrence wrote letters about practicing a kind of continuous present-moment awareness while peeling potatoes. The Desert Fathers had working vocabulary for spiritual states — acedia, compunction, watchfulness — that modern psychology is slowly rediscovering under different names.",
  "You don't need to accept the theology to find the methods useful. Many serious secular practitioners of meditation, journaling, and self-examination are quietly drawing from this well."]

},
{
  heading: "They make abstract ideas concrete",
  body: [
  "Religious teachings, read straight, often sound either obvious or alien. Saints translate them into people. \u201CLove your enemies\u201D is an abstract instruction until you read about Maria Goretti, a twelve-year-old who forgave the man who stabbed her fourteen times while she was dying of his attack. \u201CHave faith\u201D is a slogan until you read Thérèse describing a final year in which she could not feel God at all and chose to believe anyway.",
  "This works for non-Catholics too. You can disagree with the Church about almost everything and still find that watching real people try to live by these ideas is more clarifying than reading the ideas alone."]

},
{
  heading: "What Catholics actually believe about them",
  body: [
  "This is the part most often misunderstood. Catholics don't view saints the way most people view great historical figures — as inspiring but inert, like Lincoln or Mandela. They believe saints are alive in heaven, conscious, and personally interested in the people on earth who ask them for help. This is called the \u201Ccommunion of saints,\u201D and within Catholic theology it is a literal claim, not a metaphor.",
  "Catholics do not worship saints. They pray to them in the sense of asking them to pray to God on their behalf — roughly the way you might ask a friend to keep you in mind. Whether or not that picture is true, it's worth knowing what's actually being claimed; it's a more specific belief than most outside observers assume."]

},
{
  heading: "How to use this site",
  body: [
  "You don't need to be Catholic to read this site. You don't need to agree with any of it. It's enough to be curious about people who lived very differently than you do.",
  "Pick a saint whose circumstances resemble yours — not whose holiness does, since none of us are in a position to evaluate that. Grieving someone: Augustine. Stuck in work that feels too small: Brother Lawrence, Thérèse. Trying to forgive someone difficult: Maria Goretti. Wrestling with whether any of this can be intellectually serious: Aquinas, Newman.",
  "Read slowly. One saint at a time. Notice what changes — or doesn't."]

}];


function WhyStudy() {
  const [open, setOpen] = React.useState(null);
  const toggle = (i) => setOpen((cur) => cur === i ? null : i);

  return (
    <article className="why-study">
      <header className="why-head">
        <div className="why-eyebrow">
          <span className="why-eyebrow-mark"></span>
          <span></span>
        </div>
        <h1 className="why-title" style={{ fontSize: "26px" }}>Have you ever wondered what it takes to become a saint?

        </h1>
        <p className="why-deck">Whether or not you're religious, the saints are a genuinely interesting set of human beings. Here's a short orientation to who they are and why people study them.


        </p>
      </header>

      <div className="why-body">
        {WHY_SECTIONS.map((sec, i) => {
          const isOpen = open === i;
          return (
            <section key={i} className={"why-section" + (isOpen ? " is-open" : "")}>
              <button
                type="button"
                className="why-heading-btn"
                aria-expanded={isOpen}
                onClick={() => toggle(i)}>
                <h2 className="why-heading" style={{ fontSize: "26px" }}>{sec.heading}</h2>
                <span className="why-chevron" aria-hidden="true">
                  <svg viewBox="0 0 16 16" width="14" height="14">
                    <path d="M3 6 L8 11 L13 6" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </button>
              <div className="why-prose-wrap" hidden={!isOpen}>
                <div className="why-prose">
                  {sec.body.map((p, j) => <p key={j}>{p}</p>)}
                </div>
              </div>
            </section>);
        })}
      </div>

      <footer className="why-foot">
        <span className="why-foot-mark">✻</span>
      </footer>

      <style>{`
        .why-study {
          max-width: 1240px;
          margin: 0 auto;
          padding: clamp(40px, 7vh, 96px) clamp(24px, 5vw, 72px) clamp(80px, 10vh, 140px);
          font-family: var(--font-body);
          color: var(--ink-soft);
        }
        .why-head {
          text-align: center;
          margin-bottom: clamp(56px, 9vh, 96px);
        }
        .why-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          font-size: 11px;
          letter-spacing: 0.32em;
          text-transform: uppercase;
          color: var(--ink-mute);
          margin-bottom: 32px;
        }
        .why-eyebrow-mark { color: var(--accent); font-size: 14px; }
        .why-title {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: clamp(40px, 6vw, 72px);
          line-height: 1.05;
          letter-spacing: -0.015em;
          color: var(--ink);
          margin: 0 0 24px;
          text-wrap: balance;
        }
        .why-deck {
          font-family: var(--font-body);
          font-size: clamp(15px, 1.4vw, 18px);
          line-height: 1.55;
          color: var(--ink-mute);
          margin: 0 auto;
          max-width: 520px;
          text-wrap: pretty;
        }

        .why-body {
          display: flex;
          flex-direction: column;
          gap: 0;
          max-width: 760px;
          margin: 0 auto;
          border-top: 1px solid var(--bg-deep);
        }
        .why-section {
          display: block;
          border-bottom: 1px solid var(--bg-deep);
        }
        .why-heading-btn {
          appearance: none;
          background: transparent;
          border: 0;
          width: 100%;
          padding: clamp(20px, 2.6vh, 28px) 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 24px;
          text-align: left;
          cursor: pointer;
          color: inherit;
          font: inherit;
          transition: opacity 200ms ease;
        }
        .why-heading-btn:hover { opacity: 0.7; }
        .why-heading-btn:focus-visible {
          outline: 1px solid var(--accent);
          outline-offset: 4px;
        }
        .why-num {
          font-family: var(--font-display);
          font-size: 13px;
          font-weight: 500;
          letter-spacing: 0.08em;
          color: var(--accent);
          padding-top: 10px;
        }
        .why-heading {
          flex: 1;
          font-family: var(--font-display);
          font-weight: 500;
          font-size: clamp(22px, 2.4vw, 30px);
          line-height: 1.25;
          letter-spacing: -0.005em;
          color: var(--ink);
          margin: 0;
          text-wrap: balance;
        }
        .why-chevron {
          flex: none;
          color: var(--ink-mute);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          transition: transform 300ms cubic-bezier(.4,0,.2,1);
        }
        .why-section.is-open .why-chevron {
          transform: rotate(180deg);
          color: var(--accent);
        }
        .why-prose-wrap {
          padding: 0 8px clamp(24px, 3.5vh, 36px);
          animation: whyFadeIn 320ms cubic-bezier(.4,0,.2,1) both;
        }
        @keyframes whyFadeIn {
          from { opacity: 0; transform: translateY(-4px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .why-prose {
          display: flex;
          flex-direction: column;
          gap: 16px;
          max-width: 680px;
        }
        .why-prose p {
          margin: 0;
          font-size: clamp(15px, 1.15vw, 16.5px);
          line-height: 1.7;
          color: var(--ink-soft);
          text-wrap: pretty;
          font-feature-settings: "liga", "kern";
        }

        .why-foot {
          margin-top: clamp(64px, 10vh, 120px);
          text-align: center;
        }
        .why-foot-mark {
          color: var(--accent);
          font-size: 16px;
          opacity: 0.7;
        }

        @media (max-width: 640px) {
          .why-heading-btn { padding: 18px 4px; gap: 16px; }
          .why-prose-wrap { padding: 0 4px 24px; }
        }
      `}</style>
    </article>);

}

window.WhyStudy = WhyStudy;