// Glass card — soft, warm, projected over the world. Used once at a time.
function HUDGlass({ eyebrow, title, body, meta, x = 50, y = 50, align = "center" }) {
  return (
    <div style={{
      ...hudGlassStyles.card,
      left: `${x}%`, top: `${y}%`,
      transform: `translate(${align === "left" ? "0" : align === "right" ? "-100%" : "-50%"}, -50%)`,
    }}>
      {eyebrow && <div style={hudGlassStyles.eyebrow}>{eyebrow}</div>}
      {title && <div style={hudGlassStyles.title}>{title}</div>}
      {body && <div style={hudGlassStyles.body}>{body}</div>}
      {meta && <div style={hudGlassStyles.meta}>{meta}</div>}
    </div>
  );
}

const hudGlassStyles = {
  card: {
    position: "absolute",
    minWidth: 220, maxWidth: 340,
    padding: "16px 18px",
    borderRadius: 14,
    background: "rgba(20, 14, 10, 0.52)",
    backdropFilter: "blur(22px) saturate(120%)",
    WebkitBackdropFilter: "blur(22px) saturate(120%)",
    border: "1px solid rgba(255, 248, 236, 0.28)",
    boxShadow: "0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,248,236,0.22)",
    fontFamily: "'Instrument Sans', sans-serif",
    color: "#FFF8EC",
    textShadow: "0 1px 2px rgba(0,0,0,0.8)",
    display: "flex", flexDirection: "column", gap: 4,
  },
  eyebrow: {
    fontSize: 11, fontWeight: 500, opacity: 0.75,
    letterSpacing: "0.04em", marginBottom: 2,
  },
  title: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 26, lineHeight: 1.1, letterSpacing: "-0.01em",
  },
  body: { fontSize: 14, lineHeight: 1.45, opacity: 0.92, marginTop: 4 },
  meta: {
    fontSize: 10, opacity: 0.65, letterSpacing: "0.05em",
    marginTop: 8, paddingTop: 8, borderTop: "1px solid rgba(255,248,236,0.18)",
  },
};

window.HUDGlass = HUDGlass;