// Hail Mary intro — entire prayer fades in at once, holds, then fades out.

const PRAYER = "Hail Mary, full of grace,\nthe Lord is with thee.\nBlessed art thou amongst women,\nand blessed is the fruit of thy womb, Jesus.\n\nHoly Mary, Mother of God,\npray for us sinners,\nnow and at the hour of our death.";

const FADE_MS = 2600; // duration of the prayer fade-in
const FADE_OUT_MS = 1400; // duration of the fade-out
const HOLD_AFTER = 4200; // ms to hold prayer before fading out

function PrayerIntro({ onDone, static: isStatic = false, fontFamily }) {
  const [shown, setShown] = React.useState(isStatic);
  const [fadingOut, setFadingOut] = React.useState(false);

  // start reveal on mount
  React.useEffect(() => {
    if (isStatic) return;
    const id = setTimeout(() => setShown(true), 60);
    return () => clearTimeout(id);
  }, [isStatic]);

  // Wait for the user to dismiss — no auto-advance.

  // once we're fading out, fire onDone after the fade completes
  React.useEffect(() => {
    if (!fadingOut) return;
    const t = setTimeout(() => onDone && onDone(), FADE_OUT_MS);
    return () => clearTimeout(t);
  }, [fadingOut, onDone]);

  // Confirm-to-advance: ONLY the “I prayed” button advances the prayer.
  // No tap-anywhere, no spacebar.
  const handleEnter = React.useCallback(() => {
    if (isStatic) return;
    setFadingOut(true);
    setTimeout(() => onDone && onDone(), FADE_OUT_MS);
  }, [isStatic, onDone]);

  return (
    <div
      className={"prayer-stage" + (fadingOut ? " is-fading" : "") + (isStatic ? " is-static" : "")}>

      <div className="prayer-cross" aria-hidden="true">
        <svg viewBox="0 0 24 36" width="20" height="30">
          <path d="M11 0 H13 V13 H24 V15 H13 V36 H11 V15 H0 V13 H11 Z" fill="currentColor" />
        </svg>
      </div>

      <div className="prayer-stack">
        <p
          className={"prayer-half" + (shown ? " is-shown" : "")}
          style={fontFamily ? { fontFamily } : undefined}>
          {PRAYER}
        </p>
        {!isStatic &&
        <button
          type="button"
          className={"prayer-enter" + (shown ? " is-shown" : "")}
          onClick={handleEnter}>
            Amen
          </button>
        }
      </div>

      {/* skip hint removed */}

      <style>{`
        .prayer-stage {
          position: fixed; inset: 0;
          background: var(--bg);
          color: var(--ink);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: clamp(80px, 12vh, 140px) clamp(24px, 6vw, 80px) clamp(80px, 10vh, 120px);
          z-index: 50;
          cursor: default;
          transition: opacity 1400ms cubic-bezier(.4,0,.2,1);
          will-change: opacity;
          opacity: 1;
          overflow-y: auto;
        }
        .prayer-stage.is-fading { opacity: 0; pointer-events: none; }
        .prayer-stage.is-static { cursor: default; }
        .prayer-stage.is-static .prayer-half { transition: none; }
        .prayer-cross {
          position: absolute; top: clamp(28px, 5vh, 56px); left: 50%;
          transform: translateX(-50%);
          color: var(--ink);
          opacity: 0.85;
        }

        .prayer-stack {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: clamp(56px, 9vh, 100px);
          max-width: min(1000px, 92vw);
          width: 100%;
          margin-top: 0;
        }
        .prayer-enter {
          display: inline-flex; align-items: center;
          color: var(--ink); text-decoration: none;
          font-family: var(--font-body);
          font-size: 13px; font-weight: 500;
          padding: 12px 24px;
          border: 1px solid rgba(14, 22, 34, 0.45);
          border-radius: 999px;
          background: transparent;
          cursor: pointer;
          opacity: 0;
          pointer-events: none;
          transition: opacity 700ms ease 1600ms,
                      color 180ms ease,
                      border-color 180ms ease,
                      background-color 180ms ease;
        }
        .prayer-enter.is-shown {
          opacity: 1;
          pointer-events: auto;
        }
        .prayer-enter:hover {
          color: var(--accent);
          border-color: var(--accent);
        }
        .prayer-enter:active {
          background: rgba(42, 95, 184, 0.06);
        }
        .prayer-enter:focus-visible {
          outline: 2px solid var(--accent);
          outline-offset: 3px;
        }
        .prayer-half {
          margin: 0 auto;
          width: fit-content;
          max-width: 100%;
          font-family: "Fraunces", "EB Garamond", "Cormorant Garamond", Georgia, serif;
          font-weight: 400;
          font-size: clamp(18px, 2vw, 24px);
          line-height: 1.6;
          text-align: left;
          color: var(--ink);
          font-feature-settings: "liga", "dlig", "kern";
          white-space: pre-line;
          opacity: 0;
          transform: translate3d(0, 6px, 0);
          will-change: opacity, transform;
          transition:
            opacity ${FADE_MS}ms cubic-bezier(.4,0,.2,1),
            transform ${FADE_MS}ms cubic-bezier(.4,0,.2,1);
        }
        .prayer-half.is-shown {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }

        .prayer-skip {
          position: fixed; bottom: clamp(24px, 4vh, 36px);
          left: 0; right: 0; text-align: center;
          font-family: var(--font-body);
          font-size: 11px;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: var(--ink-mute);
          opacity: 0.55;
        }
        .prayer-skip kbd {
          font-family: var(--font-body);
          background: rgba(0,0,0,0.04);
          padding: 1px 6px;
          border-radius: 3px;
          border: 1px solid rgba(0,0,0,0.1);
          font-size: 10px;
        }

        @media (max-width: 640px) {
          .prayer-half { font-size: clamp(20px, 5.5vw, 26px); line-height: 1.5; }
          .prayer-enter {
            position: fixed;
            left: 24px; right: 24px;
            bottom: clamp(32px, 6vh, 56px);
            justify-content: center;
            font-size: 16px;
            padding: 18px 28px;
            border-radius: 999px;
          }
        }
      `}</style>
    </div>);

}

window.PrayerIntro = PrayerIntro;