/* global React */
/**
 * HoagsMark — the LOCKED T1 wordmark.
 *
 * Italic "Hoags" + bleeding sky double-rule + oxblood period.
 * One asset, two tones: on stone (deepest hunter), on navy/dark (stone).
 *
 *   tone        "light" (default) | "dark"
 *   size        font-size in px (default 44)
 *   bleed       px the double-rule extends past the right edge of the word
 *               (default 0.32 * size — tuned for masthead presence)
 *   periodColor override the oxblood period (e.g. stone on Inner Loop ground)
 */
const HoagsMark = ({ size = 44, tone = "light", bleed = null, ruleColor = null, periodColor = null }) => {
  const isDark = tone === "dark";
  const wordColor = isDark ? "var(--th-stone)" : "#1F3D2E"; // logo-only deepest hunter
  const rule = ruleColor || (isDark ? "var(--th-sky)" : "#2D5544");
  const ruleOpacity = isDark ? 0.85 : 0.55;
  const period = periodColor || "#B85968"; // oxblood
  const bleedPx = bleed != null ? bleed : Math.round(size * 0.32);
  const ruleHeight = Math.max(1.2, size * 0.028);
  const ruleGap = Math.max(2.5, size * 0.072);
  const periodSize = Math.max(4, Math.round(size * 0.13));

  return (
    <span
      aria-label="Hoags"
      style={{
        display: "inline-flex",
        flexDirection: "column",
        alignItems: "flex-start",
        gap: "0.16em",
        lineHeight: 1,
        position: "relative",
        paddingRight: bleedPx + Math.max(10, size * 0.18),
        fontFamily: "var(--th-font-display)",
        fontStyle: "italic",
        fontWeight: 500,
        fontSize: `${size}px`,
        letterSpacing: "-0.025em",
        color: wordColor
      }}>
      <span>Hoags</span>
      <span
        aria-hidden="true"
        style={{
          position: "relative",
          width: "100%",
          height: ruleGap + ruleHeight + 2
        }}>
        <span style={{ position: "absolute", left: 0, right: `-${bleedPx}px`, top: 0, height: `${ruleHeight}px`, background: rule, opacity: ruleOpacity }} />
        <span style={{ position: "absolute", left: 0, right: `-${bleedPx}px`, top: `${ruleGap}px`, height: `${ruleHeight}px`, background: rule, opacity: ruleOpacity }} />
        <span style={{ position: "absolute", right: `-${bleedPx + Math.round(periodSize * 1.2)}px`, top: `-1px`, width: `${periodSize}px`, height: `${periodSize}px`, borderRadius: "50%", background: period }} />
      </span>
    </span>);

};

/**
 * F1 favicon mark — italic H. on a navy rounded square.
 * Works 16 → 180. Used in sender avatars and Apple touch icon.
 */
const HFavicon = ({ size = 32, radius = null }) => {
  const r = radius != null ? radius : Math.max(2, Math.round(size * 0.16));
  const letterSize = Math.round(size * 0.7);
  return (
    <span
      aria-label="Hoags"
      style={{
        width: size,
        height: size,
        background: "var(--th-navy)",
        borderRadius: r,
        display: "inline-flex",
        alignItems: "baseline",
        justifyContent: "center",
        paddingTop: `${Math.round(size * 0.25)}px`,
        boxSizing: "border-box"
      }}>
      <span
        style={{
          fontFamily: "var(--th-font-display)",
          fontStyle: "italic",
          fontWeight: 500,
          fontSize: `${letterSize}px`,
          color: "var(--th-stone)",
          lineHeight: 1,
          letterSpacing: "-0.04em"
        }}>
        H<span style={{ color: "#B85968", fontStyle: "normal" }}>.</span>
      </span>
    </span>);

};

window.HoagsMark = HoagsMark;
window.HFavicon = HFavicon;