/* Brand mark + shared graphic components. */

const LOGO_PATH = "M 79.538651,157.6687 103.08672,22.856013 97.494051,137.65284 l 54.749259,1.17741 -94.486621,46.21308";

function LogoMark({ size = 24, color = "currentColor", strokeWidth = 12 }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 210 210"
      fill="none"
      stroke={color}
      strokeWidth={strokeWidth}
      strokeLinecap="butt"
      strokeLinejoin="miter"
      aria-hidden="true"
    >
      <path d={LOGO_PATH} />
    </svg>
  );
}

function LogoMarkAnimated({ size = 360, color = "currentColor", strokeWidth = 8 }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 210 210"
      fill="none"
      stroke={color}
      strokeWidth={strokeWidth}
      strokeLinecap="butt"
      strokeLinejoin="miter"
      style={{ overflow: "visible" }}
      aria-hidden="true"
    >
      <path
        d={LOGO_PATH}
        pathLength="1"
        strokeDasharray="1 1"
        strokeDashoffset="1"
        style={{
          animation: "logo-draw 1.6s cubic-bezier(.65,.05,.36,1) forwards",
        }}
      />
      <style>{`
        @keyframes logo-draw {
          to { stroke-dashoffset: 0; }
        }
      `}</style>
    </svg>
  );
}

function Wordmark({ size = 14, color = "currentColor" }) {
  return (
    <span
      style={{
        fontFamily: "var(--font-body)",
        fontStyle: "italic",
        fontWeight: 500,
        fontSize: size,
        letterSpacing: "-0.005em",
        color,
        lineHeight: 1,
      }}
    >
      bye bye design
    </span>
  );
}

/* Lock-up: bolt + wordmark, horizontal */
function Lockup({ markSize = 22, textSize = 14, color = "currentColor", strokeWidth = 14 }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 10, color }}>
      <LogoMark size={markSize} color={color} strokeWidth={strokeWidth} />
      <Wordmark size={textSize} color={color} />
    </span>
  );
}

/* Tiny cross-hair tick used in CAD-style frames */
function Tick({ size = 14, color = "currentColor", strokeWidth = 1 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke={color} strokeWidth={strokeWidth}>
      <path d="M 7 0 L 7 14 M 0 7 L 14 7" />
    </svg>
  );
}

/* small corner crop marks for a CAD-style frame */
function CropFrame({ children, style = {}, color = "currentColor" }) {
  const arm = 14;
  const stroke = 1;
  const cnr = (top, left) => ({
    position: "absolute",
    [top ? "top" : "bottom"]: -1,
    [left ? "left" : "right"]: -1,
    width: arm,
    height: arm,
    borderTop: top ? `${stroke}px solid ${color}` : "none",
    borderBottom: !top ? `${stroke}px solid ${color}` : "none",
    borderLeft: left ? `${stroke}px solid ${color}` : "none",
    borderRight: !left ? `${stroke}px solid ${color}` : "none",
    pointerEvents: "none",
  });
  return (
    <div style={{ position: "relative", ...style }}>
      <div style={cnr(true, true)} />
      <div style={cnr(true, false)} />
      <div style={cnr(false, true)} />
      <div style={cnr(false, false)} />
      {children}
    </div>
  );
}

Object.assign(window, { LogoMark, LogoMarkAnimated, Wordmark, Lockup, Tick, CropFrame });