// Logo.jsx — custom Lulius monogram + wordmark, Palantir-style angular geometric.
// The mark is an angular "L" anchored in a square frame with a small tick that
// reads like a chevron lift — a quiet nod to aviation/operations.

function Mark({ size = 28, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      {/* outer frame */}
      <rect x="0.5" y="0.5" width="31" height="31" stroke={color} strokeWidth="1" />
      {/* the L stem */}
      <rect x="9" y="6" width="3.2" height="16" fill={color} />
      {/* the L foot */}
      <rect x="9" y="19" width="11" height="3.2" fill={color} />
      {/* chevron tick — operational mark */}
      <path d="M22 6 L26 10 L22 14" stroke={color} strokeWidth="1.6" strokeLinecap="square" fill="none" />
    </svg>
  );
}

function Logo({ size = 22, wordmark = true, onClick }) {
  return (
    <a
      href="#/"
      onClick={onClick}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 12,
        color: "var(--paper)",
        textDecoration: "none",
      }}
    >
      <Mark size={size + 6} />
      {wordmark && (
        <span
          style={{
            fontFamily: "var(--f-display)",
            fontWeight: 800,
            letterSpacing: "0.08em",
            fontSize: size - 8,
            textTransform: "uppercase",
            lineHeight: 1,
          }}
        >
          Lulius
        </span>
      )}
    </a>
  );
}

window.Logo = Logo;
window.LogoMark = Mark;