// BrandMark.jsx, the moonboots consultancy lockup system.
//
// Rules (from brand decisions):
//   1. Wordmark = "m" + eclipse-glyph + "nboots" set in Geist 700, very tight tracking.
//      Eclipse replaces the FIRST "o". Second "o" is a normal letter.
//   2. Tagline = "consultancy" in lowercase serif italic (Spectral / display family),
//      sits to the right of the wordmark, baseline-aligned, with a thin vertical
//      hairline divider between them. Mono variant available for compact UI.
//   3. Glyph alone = reserved for tight square containers AND as a symbolic centre
//      when the wordmark is NOT already on the same surface.
//   4. Colour: wordmark navy on light / cream on dark. Eclipse second disc navy too.
//      No accent colour inside the mark itself; tagline picks up navy by default
//      and warm terracotta only on "speaking" lockups (cover, footer signature).
//
// API:
//   <BrandMark variant="primary"  size={20} />   // wordmark + consultancy, horizontal
//   <BrandMark variant="wordmark" size={20} />   // wordmark alone
//   <BrandMark variant="stacked"  size={28} />   // wordmark above consultancy
//   <BrandMark variant="glyph"    size={32} />   // eclipse glyph alone
//   props: tone="ink"|"paper", accent=false (set true to lift consultancy to terracotta)

function EclipseGlyph({ size = 18, tone = "ink" }) {
  // Two overlapping discs: solid disc + offset disc with a "phase" cut.
  // Drawn in viewBox 0 0 24 24 so the glyph baseline matches an "o" of cap-height ~16.
  const ink = tone === "paper" ? "var(--paper-100, #F8F5EC)" : "var(--ink-900, #0B1226)";
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" style={{ display: "inline-block", verticalAlign: "baseline", transform: "translateY(0.04em)" }}>
      {/* full disc, the "moon" */}
      <circle cx="9" cy="12" r="8" fill={ink}/>
      {/* offset overlap disc creates the eclipse phase, in slightly cooler navy */}
      <circle cx="15" cy="12" r="8" fill={ink} opacity="0.62"/>
    </svg>
  );
}

function Wordmark({ size = 20, tone = "ink" }) {
  // size = cap-height in px. Word reads as "m" + glyph + "nboots".
  const ink = tone === "paper" ? "var(--paper-100, #F8F5EC)" : "var(--ink-900, #0B1226)";
  // Glyph diameter must match x-height. Geist 700 x-height ≈ 0.72 of cap. Glyph viewBox is 24 wide
  // for a 16-tall disc, so render glyph at size * 0.95 to feel optically equal to an "o".
  const glyphSize = Math.round(size * 1.05);
  return (
    <span className="bm-word" style={{
      fontFamily: "var(--font-body, 'Geist', system-ui, sans-serif)",
      fontWeight: 700,
      fontSize: size + "px",
      lineHeight: 1,
      letterSpacing: "-0.045em",
      color: ink,
      display: "inline-flex",
      alignItems: "baseline",
      whiteSpace: "nowrap",
    }}>
      <span style={{ display: "inline-block" }}>m</span>
      <span style={{ display: "inline-flex", alignItems: "center", margin: `0 ${size * -0.04}px 0 ${size * -0.06}px`, transform: "translateY(0.02em)" }}>
        <EclipseGlyph size={glyphSize} tone={tone}/>
      </span>
      <span style={{ display: "inline-block" }}>nboots</span>
    </span>
  );
}

function Consultancy({ size = 14, accent = false, tone = "ink" }) {
  const inkColor = tone === "paper" ? "var(--paper-100, #F8F5EC)" : "var(--ink-900, #0B1226)";
  const color = accent ? "var(--accent-warm, #C2552B)" : inkColor;
  return (
    <span style={{
      fontFamily: "var(--font-display, 'Spectral', Georgia, serif)",
      fontStyle: "italic",
      fontWeight: 300,
      fontSize: size + "px",
      lineHeight: 1,
      letterSpacing: "0.005em",
      color,
      opacity: accent ? 1 : 0.78,
    }}>consultancy</span>
  );
}

function BrandMark({
  variant = "primary",   // primary | wordmark | stacked | glyph
  size = 20,             // wordmark cap-height in px (or glyph diameter for variant=glyph)
  tone = "ink",          // ink (default) | paper (for dark surfaces)
  accent = false,        // lift "consultancy" to terracotta
  className = "",
  style = {},
}) {
  if (variant === "glyph") {
    return (
      <span className={"bm bm--glyph " + className} style={{ display: "inline-flex", ...style }}>
        <EclipseGlyph size={size} tone={tone}/>
      </span>
    );
  }
  if (variant === "wordmark") {
    return (
      <span className={"bm bm--wordmark " + className} style={{ display: "inline-flex", alignItems: "baseline", ...style }}>
        <Wordmark size={size} tone={tone}/>
      </span>
    );
  }
  if (variant === "stacked") {
    // Wordmark above, consultancy below, centered. Used for square placements.
    return (
      <span className={"bm bm--stacked " + className} style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: size * 0.32, ...style }}>
        <Wordmark size={size} tone={tone}/>
        <Consultancy size={Math.max(10, size * 0.46)} accent={accent} tone={tone}/>
      </span>
    );
  }
  // primary: wordmark + hairline divider + consultancy, horizontal
  const dividerColor = tone === "paper"
    ? "color-mix(in oklab, var(--paper-100, #F8F5EC) 35%, transparent)"
    : "color-mix(in oklab, var(--ink-900, #0B1226) 25%, transparent)";
  const taglineSize = Math.max(11, Math.round(size * 0.62));
  return (
    <span className={"bm bm--primary " + className} style={{ display: "inline-flex", alignItems: "baseline", gap: size * 0.5, ...style }}>
      <Wordmark size={size} tone={tone}/>
      <span aria-hidden="true" style={{
        display: "inline-block",
        width: 1,
        height: size * 0.78,
        background: dividerColor,
        alignSelf: "center",
        transform: "translateY(-0.05em)",
      }}/>
      <Consultancy size={taglineSize} accent={accent} tone={tone}/>
    </span>
  );
}

window.BrandMark = BrandMark;
window.EclipseGlyph = EclipseGlyph;