/* Shared primitives for the ArchDaily Business UI kit. Exported to window. */

const ISO = {
  white: "../../assets/logo/archdaily-isotype-white.png",
  legacy: "../../assets/logo/archdaily-isotype-legacy.png",
  deep: "../../assets/logo/archdaily-isotype-deep.png",
};

/* Image placeholder — stands in for real curated photography.
   Honest, architectural: a toned field, hairline frame, faint isotype. */
function Plate({ tone = "light", label = "Project photograph", ratio = "4 / 3", style = {}, children }) {
  const tones = {
    light: { bg: "var(--ad-grey-200)", mark: ISO.legacy, fg: "var(--ad-slate)" },
    mid:   { bg: "var(--ad-slate)",    mark: ISO.white,  fg: "rgba(255,255,255,0.85)" },
    deep:  { bg: "var(--ad-deep)",     mark: ISO.white,  fg: "var(--ad-sky-200)" },
    legacy:{ bg: "var(--ad-legacy)",   mark: ISO.white,  fg: "var(--ad-sky-200)" },
  };
  const t = tones[tone] || tones.light;
  return (
    <div style={{ position: "relative", aspectRatio: ratio, background: t.bg, overflow: "hidden", ...style }}>
      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", opacity: 0.16 }}>
        <img src={t.mark} alt="" style={{ width: "22%", minWidth: 48, maxWidth: 120 }} />
      </div>
      <span style={{
        position: "absolute", left: 12, bottom: 10, fontFamily: "var(--font-sans)", fontSize: 10,
        letterSpacing: "var(--ls-label)", textTransform: "uppercase", color: t.fg,
      }}>{label}</span>
      {children}
    </div>
  );
}

function Container({ size = "lg", style = {}, children }) {
  const max = { md: "var(--container-md)", lg: "var(--container-lg)", xl: "var(--container-xl)" }[size];
  return <div style={{ width: "100%", maxWidth: max, margin: "0 auto", padding: "0 var(--space-6)", ...style }}>{children}</div>;
}

function Eyebrow({ children, color = "var(--text-muted)", style = {} }) {
  return <span style={{
    fontFamily: "var(--font-display)", fontSize: "var(--fs-xs)", letterSpacing: "var(--ls-label)",
    textTransform: "uppercase", color, ...style,
  }}>{children}</span>;
}

function Icon({ n, size = 20, style = {} }) {
  return <i data-lucide={n} style={{ width: size, height: size, ...style }}></i>;
}

Object.assign(window, { Plate, Container, Eyebrow, Icon, ISO });