// Wordmark — "just a NOUN" lockup. The light "just a" + heavy NOUN.
// Pass color to recolor the noun (per sub-brand). Default = cream.
const Wordmark = ({ noun = "HOUSE", size = 48, color, stacked = false }) => {
  const articleSize = Math.round(size * 0.55);
  const wrap = stacked
    ? { display: "inline-flex", flexDirection: "column", alignItems: "flex-start", lineHeight: 0.85, gap: 0, whiteSpace: "nowrap" }
    : { display: "inline-flex", alignItems: "baseline", gap: "0.18em", lineHeight: 0.9, whiteSpace: "nowrap" };
  return (
    <span style={{ fontFamily: "var(--jh-font-display)", textTransform: "uppercase", ...wrap }}>
      <span style={{
        fontWeight: 300,
        color: "var(--jh-fg-2)",
        fontSize: articleSize,
        letterSpacing: "0.04em",
      }}>just a</span>
      <span style={{
        fontWeight: 900,
        color: color || "var(--jh-fg)",
        fontSize: size,
        letterSpacing: "-0.02em",
        lineHeight: stacked ? 1 : 0.9,
        marginTop: stacked ? -Math.round(size * 0.08) : 0,
      }}>{noun}</span>
    </span>
  );
};

window.Wordmark = Wordmark;