// Logo component — 3 variants controlled via props
// variant: 'glyph' (X central accentué dans logotype)
//        | 'cross' (X dessiné comme croisement de deux traits)
//        | 'badge' (monogramme dans carré)
function Logo({ variant = "glyph", accent = "#C4FF3E", ink = "#ECECEC", size = 28, showWordmark = true }) {
  const glyphSize = size;

  if (variant === "badge") {
    return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
        <div
          style={{
            width: glyphSize + 8,
            height: glyphSize + 8,
            background: accent,
            color: "#0A0A0A",
            display: "grid",
            placeItems: "center",
            fontFamily: "'JetBrains Mono', ui-monospace, monospace",
            fontWeight: 700,
            fontSize: glyphSize * 0.55,
            letterSpacing: "-0.04em",
            borderRadius: 4,
          }}
        >
          d×n
        </div>
        {showWordmark && (
          <span style={{ fontFamily: "'Inter Tight', Inter, system-ui", fontWeight: 600, fontSize: glyphSize * 0.72, letterSpacing: "-0.02em", color: ink }}>
            devxnet
          </span>
        )}
      </div>
    );
  }

  if (variant === "cross") {
    return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
        <svg width={glyphSize + 4} height={glyphSize + 4} viewBox="0 0 32 32" style={{ display: "block" }}>
          <line x1="4" y1="4" x2="28" y2="28" stroke={ink} strokeWidth="2.5" strokeLinecap="square" />
          <line x1="28" y1="4" x2="4" y2="28" stroke={accent} strokeWidth="2.5" strokeLinecap="square" />
          <circle cx="16" cy="16" r="2.2" fill={accent} />
        </svg>
        {showWordmark && (
          <span style={{ fontFamily: "'Inter Tight', Inter, system-ui", fontWeight: 600, fontSize: glyphSize * 0.72, letterSpacing: "-0.02em", color: ink }}>
            dev<span style={{ color: accent }}>×</span>net
          </span>
        )}
      </div>
    );
  }

  // glyph (default): wordmark where × is a special typographic mark
  return (
    <span
      style={{
        fontFamily: "'Inter Tight', Inter, system-ui",
        fontWeight: 600,
        fontSize: glyphSize * 0.82,
        letterSpacing: "-0.035em",
        color: ink,
        display: "inline-flex",
        alignItems: "baseline",
      }}
    >
      dev
      <span
        style={{
          color: accent,
          fontFamily: "'JetBrains Mono', ui-monospace, monospace",
          fontWeight: 500,
          fontSize: glyphSize * 0.68,
          margin: "0 0.04em",
          transform: "translateY(-0.05em)",
          display: "inline-block",
        }}
      >
        ×
      </span>
      net
    </span>
  );
}

window.Logo = Logo;