/* Shared helpers for the Grace & Truth website UI kit. */

const GT = window.GraceTruthChurchDesignSystem_a936c2;
const ASSET = (window.GTC_ASSET_BASE || "") + "assets/";

/**
 * Photo — renders a real image (object-fit cover) when `src` is given, else a
 * tasteful on-brand placeholder. `src` is resolved against the asset base.
 */
function Photo({ src, label = "Photo", ratio = "4 / 3", tone = "slate", rounded = "md", style }) {
  const tones = {
    slate: { bg: "linear-gradient(135deg, #4E606E 0%, #3C4C59 55%, #212B33 100%)", fg: "rgba(255,255,255,0.5)" },
    teal:  { bg: "linear-gradient(135deg, #4496B7 0%, #306B91 60%, #1B3F54 100%)", fg: "rgba(255,255,255,0.6)" },
    leaf:  { bg: "linear-gradient(135deg, #95C58C 0%, #76AF85 50%, #3C7A57 100%)", fg: "rgba(255,255,255,0.7)" },
    mist:  { bg: "linear-gradient(135deg, #EBEFF2 0%, #DCE3E8 100%)", fg: "rgba(33,43,51,0.32)" },
  };
  const t = tones[tone] || tones.slate;
  const radii = { sm: "var(--radius-sm)", md: "var(--radius-md)", lg: "var(--radius-lg)", none: "0" };

  if (src) {
    return (
      <div style={{ aspectRatio: ratio, borderRadius: radii[rounded], overflow: "hidden", background: t.bg, ...style }}>
        <img src={ASSET + src} alt={label} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
    );
  }
  return (
    <div
      style={{
        position: "relative", aspectRatio: ratio, background: t.bg,
        borderRadius: radii[rounded], overflow: "hidden",
        display: "flex", alignItems: "center", justifyContent: "center", ...style,
      }}
    >
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, color: t.fg }}>
        <i data-lucide="image" style={{ width: 30, height: 30 }}></i>
        <span style={{ fontFamily: "var(--font-label)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 700 }}>{label}</span>
      </div>
    </div>
  );
}

/** Section wrapper with consistent container + vertical rhythm. */
function Section({ bg = "page", children, style, id }) {
  const bgs = {
    page: "var(--surface-page)",
    card: "var(--white)",
    sunken: "var(--mist-100)",
    inverse: "var(--slate-800)",
    brand: "var(--slate-700)",
  };
  return (
    <section id={id} style={{ background: bgs[bg], padding: "var(--space-section) 0", ...style }}>
      <div style={{ maxWidth: "var(--container-xl)", margin: "0 auto", padding: "0 var(--gutter)" }}>
        {children}
      </div>
    </section>
  );
}

Object.assign(window, { Photo, Section, GT });