/* GivingModal — temporary Zelle-only giving screen.
   ---------------------------------------------------------------
   Online card / wallet / ACH payments are DISABLED for now: the church's
   deposit accounts are not yet activated. Until then we direct givers to
   Zelle; the other methods will be added back later.

   Keeps the same { open, onClose, device } signature and the
   window.JMRGivingModal export, so every existing "Ofrendar" CTA (nav, hero,
   footer, the "Formas de ofrendar" modal) keeps working — it just opens this
   Zelle instruction instead of the old multi-step payment flow.
   Built on JMR design-system tokens + components. */
function GivingModal({ open, onClose, device }) {
  const { Button } = window.JMRChurchDesignSystem_2e038e;
  const { useState } = React;

  const ZELLE_PHONE = "281-859-7772";
  const ZELLE_PURPLE = "#6D1ED4";
  const [copied, setCopied] = useState(false);
  const [qrZoom, setQrZoom] = useState(false);

  if (!open) return null;

  const topInset = device === "ios" ? 44 : 14;

  const copy = () => {
    try {
      navigator.clipboard.writeText(ZELLE_PHONE).then(() => {
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      });
    } catch (e) { /* clipboard unavailable — the number is shown on screen anyway */ }
  };

  return (
    <div style={{ position: "absolute", inset: 0, zIndex: 90, background: "var(--bg-app)", display: "flex", flexDirection: "column", animation: "jmrGiveUp .32s cubic-bezier(0.22,1,0.36,1)" }}>
      <style>{`
        @keyframes jmrGiveUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        @keyframes jmrGiveScale { from { opacity:0; transform: scale(.9); } to { opacity:1; transform: scale(1); } }
        @media (prefers-reduced-motion: reduce) { .jmr-give-anim { animation: none !important; } }
      `}</style>

      {/* header */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: `${topInset}px 14px 10px`, flexShrink: 0 }}>
        <button onClick={onClose} aria-label="Cerrar" style={iconBtn}>
          <span className="material-symbols-rounded" style={{ fontSize: 22 }}>close</span>
        </button>
        <div style={{ flex: 1, textAlign: "center", fontSize: 16, fontWeight: 600, color: "var(--text-primary)" }}>Ofrendar</div>
        <div style={{ width: 40 }} />
      </div>

      {/* body */}
      <div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", padding: "8px 28px 0" }}>
        <div className="jmr-give-anim" style={{ width: 76, height: 76, borderRadius: "50%", background: "var(--color-accent)", display: "flex", alignItems: "center", justifyContent: "center", animation: "jmrGiveScale .4s cubic-bezier(0.22,1,0.36,1)", marginTop: 14, flexShrink: 0 }}>
          <span className="material-symbols-rounded" style={{ fontSize: 40, color: "var(--color-on-accent)" }}>bolt</span>
        </div>

        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 26, color: "var(--text-primary)", lineHeight: 1.15, margin: "20px 0 0" }}>Ofrenda por Zelle</h2>
        <p style={{ fontSize: 14.5, color: "var(--text-secondary)", lineHeight: 1.55, margin: "10px 0 0", maxWidth: 360 }}>
          Por ahora recibimos diezmos y ofrendas por Zelle. Pronto habilitaremos más formas de dar.
        </p>

        {/* Zelle number card */}
        <div style={{ marginTop: 22, width: "100%", maxWidth: 360, background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-1)", padding: "18px" }}>
          <div style={{ fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 600, color: "var(--text-secondary)" }}>Número de Zelle</div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 28, color: "var(--text-primary)", letterSpacing: ".01em", marginTop: 6 }}>{ZELLE_PHONE}</div>
          <button onClick={copy} style={{ marginTop: 14, width: "100%", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, padding: "11px 14px", borderRadius: "var(--radius-pill)", border: "1.5px solid var(--color-accent)", background: copied ? "var(--surface-gold-tint)" : "transparent", color: "var(--color-accent-strong)", fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 600, cursor: "pointer", transition: "background .14s ease" }}>
            <span className="material-symbols-rounded" style={{ fontSize: 18 }}>{copied ? "check" : "content_copy"}</span>
            {copied ? "Número copiado" : "Copiar número"}
          </button>

          {/* QR de Zelle — debajo de "Copiar número". Tamaño moderado; se toca
              para ampliar. Fondo blanco para escanear bien en claro y oscuro. */}
          <div style={{ marginTop: 18, paddingTop: 18, borderTop: "1px solid var(--border-default)", display: "flex", flexDirection: "column", alignItems: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 600, color: "var(--text-secondary)" }}>o escanea el código</div>
            <button onClick={() => setQrZoom(true)} aria-label="Ampliar código QR de Zelle"
              style={{ position: "relative", marginTop: 12, padding: 12, background: "#fff", border: "1px solid var(--border-default)", borderRadius: 18, cursor: "pointer", lineHeight: 0, boxShadow: "0 6px 18px rgba(0,0,0,0.08)" }}>
              <img src="assets/zelle-qr.png" alt="Código QR de Zelle" style={{ width: 150, height: 150, objectFit: "contain", display: "block", borderRadius: 6 }} />
              <span style={{ position: "absolute", bottom: 8, right: 8, display: "inline-flex", alignItems: "center", gap: 4, background: "rgba(15,21,53,0.82)", color: "#fff", fontSize: 11, fontWeight: 600, padding: "4px 8px", borderRadius: 999, backdropFilter: "blur(2px)" }}>
                <span className="material-symbols-rounded" style={{ fontSize: 14 }}>zoom_out_map</span>Ampliar
              </span>
            </button>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--text-secondary)", marginTop: 12 }}>
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: ZELLE_PURPLE }} />
              Escanéalo con tu cámara o app bancaria
            </div>
          </div>
        </div>

        <p style={{ fontSize: 13, color: "var(--text-secondary)", lineHeight: 1.5, margin: "16px 0 0", maxWidth: 360 }}>
          Indica el fondo en la nota del envío (por ejemplo, «Diezmo» u «Ofrenda»).
        </p>

        {/* verse */}
        <div style={{ marginTop: 24, paddingTop: 22, borderTop: "1px solid var(--border-default)", maxWidth: 340 }}>
          <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 17, lineHeight: 1.45, color: "var(--text-primary)", margin: 0 }}>
            «Cada uno dé como propuso en su corazón... porque Dios ama al dador alegre.»
          </p>
          <div style={{ fontSize: 12, letterSpacing: ".06em", color: "var(--color-accent-strong)", marginTop: 10, fontWeight: 600 }}>2 Corintios 9:7 · RV1960</div>
        </div>
      </div>

      {/* footer */}
      <div style={{ flexShrink: 0, padding: `12px 18px ${device === "ios" ? 30 : 16}px`, borderTop: "1px solid var(--border-default)", background: "var(--bg-app)" }}>
        <Button variant="accent" size="lg" fullWidth onClick={onClose}>Listo</Button>
      </div>

      {/* QR ampliado — card blanco con el branding de Zelle y el nombre de la
          iglesia. Se cierra tocando afuera o la X. */}
      {qrZoom && (
        <div onClick={() => setQrZoom(false)} style={{ position: "absolute", inset: 0, zIndex: 95, background: "rgba(0,0,0,0.62)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, animation: "jmrGiveScale .22s ease" }}>
          <div onClick={(e) => e.stopPropagation()} style={{ position: "relative", width: "100%", maxWidth: 360, background: "#fff", borderRadius: 26, padding: "24px 22px 22px", boxShadow: "0 28px 80px rgba(0,0,0,0.5)", textAlign: "center" }}>
            <button onClick={() => setQrZoom(false)} aria-label="Cerrar" style={{ position: "absolute", top: 12, right: 12, width: 34, height: 34, borderRadius: "50%", border: 0, cursor: "pointer", background: "#f0f0f4", color: "#333", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <span className="material-symbols-rounded" style={{ fontSize: 20 }}>close</span>
            </button>
            <div style={{ fontSize: 12.5, letterSpacing: ".07em", textTransform: "uppercase", fontWeight: 700, color: ZELLE_PURPLE }}>Enviar dinero con Zelle®</div>
            <div style={{ fontSize: 14.5, fontWeight: 700, color: "#1c1c1e", marginTop: 5, letterSpacing: ".01em" }}>Iglesia Cristiana Jehová Mi Rey</div>
            <img src="assets/zelle-qr.png" alt="Código QR de Zelle" style={{ width: "100%", maxWidth: 300, height: "auto", objectFit: "contain", display: "block", margin: "18px auto 0" }} />
            <div style={{ fontSize: 13, color: "#666", marginTop: 16, lineHeight: 1.5 }}>Escanéalo con la cámara o tu app bancaria para enviar tu ofrenda.</div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---- shared styles ---- */
const iconBtn = { width: 40, height: 40, flex: "none", borderRadius: "50%", border: 0, cursor: "pointer", background: "var(--surface-sunken)", color: "var(--text-primary)", display: "flex", alignItems: "center", justifyContent: "center" };

window.JMRGivingModal = GivingModal;