// BrandIntro — runs before the Hail Mary on every visit. Reveals the
// Saints wordmark, then the subtitle, holds for ~3s, then both dissolve
// and onDone fires (which advances the app to the prayer stage).

const BRAND_LOGO_FADE = 1400;    // ms for the logo to fade in
const BRAND_SUB_DELAY = 1200;    // ms after logo starts before subtitle starts
const BRAND_SUB_FADE = 1400;     // ms for subtitle fade in
const BRAND_HOLD = 3000;         // ms to hold after subtitle is fully shown
const BRAND_OUT = 1200;          // ms for the whole stage to dissolve out

function BrandIntro({ subtitle, onDone, static: isStatic = false }) {
  const [showLogo, setShowLogo] = React.useState(isStatic);
  const [showSub, setShowSub] = React.useState(isStatic);
  const [fadingOut, setFadingOut] = React.useState(false);

  // Logo reveal
  React.useEffect(() => {
    if (isStatic) return;
    const id = setTimeout(() => setShowLogo(true), 80);
    return () => clearTimeout(id);
  }, [isStatic]);

  // Subtitle reveal after logo
  React.useEffect(() => {
    if (isStatic || !showLogo) return;
    const id = setTimeout(() => setShowSub(true), BRAND_SUB_DELAY);
    return () => clearTimeout(id);
  }, [isStatic, showLogo]);

  // Hold then dissolve
  React.useEffect(() => {
    if (isStatic || !showSub) return;
    const id = setTimeout(() => setFadingOut(true), BRAND_SUB_FADE + BRAND_HOLD);
    return () => clearTimeout(id);
  }, [isStatic, showSub]);

  // After dissolve, advance
  React.useEffect(() => {
    if (isStatic || !fadingOut) return;
    const id = setTimeout(() => onDone && onDone(), BRAND_OUT);
    return () => clearTimeout(id);
  }, [isStatic, fadingOut, onDone]);

  // skip on click / key
  const skip = React.useCallback(() => {
    if (isStatic) return;
    if (!showLogo) { setShowLogo(true); return; }
    if (!showSub) { setShowSub(true); return; }
    setFadingOut(true);
    setTimeout(() => onDone && onDone(), BRAND_OUT);
  }, [isStatic, showLogo, showSub, onDone]);

  React.useEffect(() => {
    if (isStatic) return;
    const onKey = (e) => {
      if (e.key === "Enter" || e.key === " " || e.key === "Escape") skip();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [isStatic, skip]);

  return (
    <div
      className={"brand-stage" + (fadingOut ? " is-fading" : "") + (isStatic ? " is-static" : "")}
      onClick={skip}>
      <div className="brand-inner">
        <h1 className={"brand-logo" + (showLogo ? " is-shown" : "")}>
          Saints
        </h1>
        <p className={"brand-sub" + (showSub ? " is-shown" : "")}>
          {subtitle}
        </p>
      </div>

      <style>{`
        .brand-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: pointer;
          transition: opacity ${BRAND_OUT}ms cubic-bezier(.4,0,.2,1);
          opacity: 1;
          will-change: opacity;
        }
        .brand-stage.is-fading {
          opacity: 0;
          pointer-events: none;
        }

        .brand-inner {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: clamp(20px, 3.5vh, 36px);
          max-width: min(720px, 90vw);
          text-align: center;
        }

        .brand-logo {
          margin: 0;
          font-family: "Fraunces", serif;
          font-weight: 400;
          font-size: clamp(56px, 9vw, 132px);
          letter-spacing: -0.025em;
          line-height: 1;
          color: var(--ink);
          font-variation-settings: "opsz" 144, "SOFT" 30;
          opacity: 0;
          transform: translate3d(0, 6px, 0);
          will-change: opacity, transform;
          transition:
            opacity ${BRAND_LOGO_FADE}ms cubic-bezier(.4,0,.2,1),
            transform ${BRAND_LOGO_FADE}ms cubic-bezier(.4,0,.2,1);
        }
        .brand-logo.is-shown {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }

        .brand-sub {
          margin: 0;
          font-family: var(--font-body);
          white-space: pre-line;
          font-weight: 400;
          font-size: clamp(15px, 1.4vw, 18px);
          line-height: 1.55;
          color: var(--ink-mute);
          max-width: 560px;
          text-wrap: balance;
          opacity: 0;
          transform: translate3d(0, 4px, 0);
          will-change: opacity, transform;
          transition:
            opacity ${BRAND_SUB_FADE}ms cubic-bezier(.4,0,.2,1),
            transform ${BRAND_SUB_FADE}ms cubic-bezier(.4,0,.2,1);
        }
        .brand-sub.is-shown {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
        .brand-stage.is-static { cursor: default; }
        .brand-stage.is-static .brand-logo,
        .brand-stage.is-static .brand-sub {
          transition: none;
        }

        @media (max-width: 640px) {
          .brand-logo { font-size: clamp(96px, 18vw, 128px); }
        }
      `}</style>
    </div>
  );
}

window.BrandIntro = BrandIntro;