/* Saints Calendar — shared components */

const Fleuron = () => (
  <div className="fleuron">❦</div>
);

const SaintMark = ({ size = 22 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round">
    {/* Trefoil cross — three-lobed terminals at top and arms, classical fleury form */}
    <path d="M12 3.2 V20.8" />
    <path d="M5.2 10.5 H18.8" />
    {/* Trefoil at top */}
    <circle cx="12" cy="2.6" r="1.1" fill="currentColor" stroke="none"/>
    <circle cx="10.5" cy="3.4" r="0.9" fill="currentColor" stroke="none"/>
    <circle cx="13.5" cy="3.4" r="0.9" fill="currentColor" stroke="none"/>
    {/* Trefoil at left arm */}
    <circle cx="4.6" cy="10.5" r="1.1" fill="currentColor" stroke="none"/>
    <circle cx="5.4" cy="9" r="0.9" fill="currentColor" stroke="none"/>
    <circle cx="5.4" cy="12" r="0.9" fill="currentColor" stroke="none"/>
    {/* Trefoil at right arm */}
    <circle cx="19.4" cy="10.5" r="1.1" fill="currentColor" stroke="none"/>
    <circle cx="18.6" cy="9" r="0.9" fill="currentColor" stroke="none"/>
    <circle cx="18.6" cy="12" r="0.9" fill="currentColor" stroke="none"/>
    {/* Trefoil at base */}
    <circle cx="12" cy="21.4" r="1.1" fill="currentColor" stroke="none"/>
    <circle cx="10.5" cy="20.6" r="0.9" fill="currentColor" stroke="none"/>
    <circle cx="13.5" cy="20.6" r="0.9" fill="currentColor" stroke="none"/>
    {/* Central rosette */}
    <circle cx="12" cy="10.5" r="1.6" fill="none"/>
    <circle cx="12" cy="10.5" r="0.5" fill="currentColor" stroke="none"/>
  </svg>
);

const IconSearch = ({ size = 16 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
);
const IconArrowL = () => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="m15 6-6 6 6 6"/></svg>;
const IconArrowR = () => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="m9 6 6 6-6 6"/></svg>;
const IconClose = ({size=16}) => <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M6 6l12 12M18 6 6 18"/></svg>;
const IconBookmark = ({size=14, filled=false}) => <svg viewBox="0 0 24 24" width={size} height={size} fill={filled?"currentColor":"none"} stroke="currentColor" strokeWidth="1.5"><path d="M6 3h12v18l-6-4-6 4z"/></svg>;
const IconExternal = ({size=12}) => <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M14 4h6v6M10 14 20 4M19 13v6H5V5h6"/></svg>;
const IconRandom = ({size=14}) => <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 4h4l10 16h4M3 20h4L17 4h4M16 4h5v5M16 20h5v-5"/></svg>;
const IconCalendar = ({size=14}) => <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="4" y="5" width="16" height="16" rx="1"/><path d="M4 10h16M9 3v4M15 3v4"/></svg>;
const IconList = ({size=14}) => <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6h16M4 12h16M4 18h16"/></svg>;
const IconMap = ({size=14}) => <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2z"/><path d="M9 4v14M15 6v14"/></svg>;
const IconTimeline = ({size=14}) => <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 12h18M6 8v8M12 6v12M18 9v6"/></svg>;

const MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const DAYS_SHORT = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];

const formatDate = (m, d) => `${MONTHS[m-1]} ${d}`;
const ordinal = n => { const s=["th","st","nd","rd"], v=n%100; return n + (s[(v-20)%10]||s[v]||s[0]); };

// Roman year formatter for citations
const yearLabel = (y) => y < 0 ? `${Math.abs(y)} BC` : (y < 100 ? `AD ${y}` : `${y}`);

// ---- Image placeholder ----
const PortraitPlaceholder = ({ name, ratio = "3/4", caption = "Sacred Art" }) => (
  <div className="placeholder-art" style={{ aspectRatio: ratio, width: "100%" }}>
    <span>{caption}<br/>· {name} ·</span>
  </div>
);

// ---- Saint card preview (used in lists) ----
const SaintListItem = ({ saint, onOpen, onHover, onLeave }) => (
  <button
    onClick={() => onOpen(saint.id)}
    onMouseEnter={(e) => onHover && onHover(saint, e)}
    onMouseLeave={() => onLeave && onLeave()}
    style={{ display: "block", width: "100%", textAlign: "left", padding: "18px 0", borderBottom: "1px solid var(--hairline-soft)" }}
  >
    <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16 }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="t-rubric" style={{ marginBottom: 6 }}>
          {saint.rank} · {formatDate(saint.feast.month, saint.feast.day)}
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 26, lineHeight: 1.1, marginBottom: 4 }}>
          <span style={{ color: "var(--ink-mute)", fontStyle: "italic", fontSize: 16 }}>{saint.honorific} </span>
          {saint.name}
        </div>
        <div style={{ color: "var(--ink-mute)", fontSize: 14, fontStyle: "italic" }}>
          {saint.epithet} · {yearLabel(saint.dates.born)}–{yearLabel(saint.dates.died)} · {saint.region}
        </div>
      </div>
      <div className="t-meta" style={{ flexShrink: 0 }}>
        {saint.order ? saint.order.split(" ")[0] : "—"}
      </div>
    </div>
  </button>
);

// ---- Hover preview popover ----
const HoverPreview = ({ data, position }) => {
  if (!data || !position) return null;
  const { saint } = data;
  return (
    <div className="preview-pop" style={{ left: position.x, top: position.y }}>
      <div className="t-rubric" style={{ marginBottom: 8 }}>
        {saint.rank} · {formatDate(saint.feast.month, saint.feast.day)}
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.1, marginBottom: 8 }}>
        {saint.honorific} {saint.name}
      </div>
      <div style={{ color: "var(--ink-mute)", fontSize: 13, fontStyle: "italic", marginBottom: 10 }}>
        {saint.epithet}
      </div>
      <div style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.5 }}>
        {saint.summary.slice(0, 180)}{saint.summary.length > 180 ? "…" : ""}
      </div>
      <div style={{ marginTop: 12, paddingTop: 10, borderTop: "1px solid var(--hairline-soft)", display: "flex", justifyContent: "space-between" }}>
        <span className="t-meta">{yearLabel(saint.dates.born)}–{yearLabel(saint.dates.died)}</span>
        <span className="t-meta">{saint.region}</span>
      </div>
    </div>
  );
};

Object.assign(window, {
  Fleuron, SaintMark,
  IconSearch, IconArrowL, IconArrowR, IconClose, IconBookmark, IconExternal,
  IconRandom, IconCalendar, IconList, IconMap, IconTimeline,
  MONTHS, DAYS_SHORT, formatDate, ordinal, yearLabel,
  PortraitPlaceholder, SaintListItem, HoverPreview,
});
