// Wordmark — "Hoags" in italic editorial serif with a subtle tail on the g.
// Used in header (lockup form) and as a single-letter "h" mark for favicon/avatars.
function Wordmark({ size = 44, lockup = true, color = "var(--th-hunter)", subdued = false }) {
  return (
    <span
      style={{
        fontFamily: "var(--th-font-display)",
        fontSize: size,
        fontWeight: 500,
        letterSpacing: "-0.02em",
        color,
        lineHeight: 1,
        display: "inline-flex",
        alignItems: "baseline",
        gap: 24
      }}>
      
      <span style={{ display: "inline-flex", alignItems: "baseline", paddingLeft: "0.08em" }}>
        <span style={{ fontStyle: "italic", fontWeight: 400, marginRight: "0.04em" }}>H</span>
        <span style={{ fontWeight: 500 }}>oags</span>
      </span>
      {lockup &&
      <span
        className="th-wordmark-tag"
        style={{
          fontFamily: "var(--th-font-mono)",
          fontSize: size * 0.32,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: subdued ? "var(--th-ink-quiet)" : "var(--th-navy)",
          paddingLeft: 18,
          marginLeft: 0,
          borderLeft: "1px solid currentColor",
          opacity: subdued ? 0.7 : 1,
          alignSelf: "center"
        }}>
        
          tomhogan.io
        </span>
      }
    </span>);

}

function HMonogram({ size = 36, color = "var(--th-hunter)", bg = "var(--th-stone)" }) {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        width: size,
        height: size,
        borderRadius: 4,
        background: bg,
        color,
        fontFamily: "var(--th-font-display)",
        fontSize: size * 0.62,
        fontWeight: 500,
        fontStyle: "italic",
        letterSpacing: "-0.02em",
        border: "1px solid rgba(31,61,46,0.15)",
        lineHeight: 1
      }}>
      
      H
    </span>);

}

window.Wordmark = Wordmark;
window.HMonogram = HMonogram;