// Anchored label in world-space. Soft warm-white projection with halo for legibility
// against any background. Leader line + small origin marker.
function HUDAnchor({ x, y, label, sub, direction = "right", offset = 72 }) {
  const isRight = direction === "right";
  return (
    <>
      <div style={{ ...hudAnchorStyles.dot, left: `${x}%`, top: `${y}%` }} />
      <div style={{
        ...hudAnchorStyles.leader,
        left: `calc(${x}% + ${isRight ? 4 : -offset}px)`,
        top: `${y}%`,
        width: offset - 4,
      }} />
      <div style={{
        ...hudAnchorStyles.label,
        left: `calc(${x}% + ${isRight ? offset + 6 : -offset - 6}px)`,
        top: `${y}%`,
        transform: isRight ? "translateY(-50%)" : "translate(-100%, -50%)",
        textAlign: isRight ? "left" : "right",
      }}>
        <div style={hudAnchorStyles.plate}>
          <div style={hudAnchorStyles.primary}>{label}</div>
          {sub && <div style={hudAnchorStyles.sub}>{sub}</div>}
        </div>
      </div>
    </>
  );
}

const hudAnchorStyles = {
  dot: {
    position: "absolute", width: 8, height: 8, borderRadius: "50%",
    background: "#FFF8EC",
    boxShadow: "0 0 12px rgba(255, 248, 236, 0.8), 0 0 2px rgba(0,0,0,0.4)",
    transform: "translate(-50%, -50%)",
  },
  leader: {
    position: "absolute", height: 1,
    background: "linear-gradient(90deg, rgba(255,248,236,0.9), rgba(255,248,236,0.4))",
    transform: "translateY(-50%)",
    boxShadow: "0 0 4px rgba(255, 248, 236, 0.5)",
  },
  label: {
    position: "absolute",
    fontFamily: "'Instrument Sans', sans-serif",
    color: "#FFF8EC",
    textShadow: "0 1px 2px rgba(0,0,0,0.95), 0 2px 10px rgba(0,0,0,0.8), 0 0 1px rgba(0,0,0,0.9)",
    pointerEvents: "none",
  },
  plate: {
    display: "inline-block",
    background: "rgba(20,14,10,0.38)",
    backdropFilter: "blur(6px)",
    WebkitBackdropFilter: "blur(6px)",
    padding: "4px 9px",
    borderRadius: 6,
    border: "1px solid rgba(255,248,236,0.14)",
  },
  primary: { fontSize: 15, fontWeight: 500, lineHeight: 1.2 },
  sub: { fontSize: 12, fontWeight: 400, opacity: 0.88, marginTop: 2 },
};

window.HUDAnchor = HUDAnchor;