// Saint figure — high-fidelity image slot in a museum-style frame.
function SaintFigure({ tall = false, fillBleed = false }) {
  const w = tall ? 540 : 620;
  const h = tall ? 760 : 720;

  return (
    <div className={"saint-figure" + (fillBleed ? " is-bleed" : "")}>
      <div className="saint-figure-frame">
        <image-slot
          id="saint-john-of-matha"
          shape="rect"
          radius="2"
          placeholder="Drop classical portrait of Saint John of Matha here (oil on canvas, ideally chiaroscuro)"
          style={{
            width: "100%",
            height: "100%",
            display: "block",
            background: "#f4eee0",
          }}
        ></image-slot>

        {/* gilt ornamental corners */}
        <span className="frame-corner tl" />
        <span className="frame-corner tr" />
        <span className="frame-corner bl" />
        <span className="frame-corner br" />
      </div>

      <div className="saint-plate">
        <span className="plate-line" />
        <span className="plate-text">S. IOANNES DE MATHA · 1160 — 1213</span>
        <span className="plate-line" />
      </div>

      <style>{`
        .saint-figure {
          position: relative;
          width: 100%;
          max-width: ${w}px;
        }
        .saint-figure.is-bleed { max-width: none; }
        .saint-figure-frame {
          position: relative;
          aspect-ratio: ${tall ? '0.71' : '0.86'};
          background: var(--bg);
          padding: 14px;
          border: 1px solid var(--ink);
          box-shadow:
            0 30px 60px -30px rgba(0,0,0,0.25),
            0 4px 12px rgba(0,0,0,0.08);
          border-radius: 2px;
        }
        .saint-figure-frame::before {
          content: "";
          position: absolute;
          inset: 6px;
          border: 1px solid var(--gilt);
          opacity: 0.5;
          pointer-events: none;
          z-index: 2;
        }
        .saint-figure-frame image-slot {
          position: relative;
          z-index: 1;
        }

        .frame-corner {
          position: absolute;
          width: 26px;
          height: 26px;
          border: 1.5px solid var(--gilt);
          opacity: 0.85;
          z-index: 3;
        }
        .frame-corner.tl { top: 2px; left: 2px; border-right: none; border-bottom: none; }
        .frame-corner.tr { top: 2px; right: 2px; border-left: none; border-bottom: none; }
        .frame-corner.bl { bottom: 2px; left: 2px; border-right: none; border-top: none; }
        .frame-corner.br { bottom: 2px; right: 2px; border-left: none; border-top: none; }

        .saint-plate {
          margin-top: 18px;
          display: flex;
          align-items: center;
          gap: 12px;
          justify-content: center;
        }
        .plate-line {
          flex: 1;
          height: 1px;
          background: linear-gradient(to right, transparent, var(--rule) 30%, var(--rule) 70%, transparent);
        }
        .plate-text {
          font-family: var(--font-body);
          font-size: 10.5px;
          letter-spacing: 0.32em;
          color: var(--ink-mute);
          text-transform: uppercase;
          white-space: nowrap;
        }
      `}</style>
    </div>
  );
}

window.SaintFigure = SaintFigure;