// Small status cluster — worn-in-the-corner of vision. Low-contrast, easily
// ignored, present when you look for it.
function HUDStatus({ time = "9:42", battery = 84, context }) {
  return (
    <div style={hudStatusStyles.wrap}>
      <div style={hudStatusStyles.time}>{time}</div>
      {context && <div style={hudStatusStyles.context}>{context}</div>}
      <div style={hudStatusStyles.batt}>
        <div style={hudStatusStyles.battOuter}>
          <div style={{ ...hudStatusStyles.battFill, width: `${battery}%` }} />
        </div>
        <span>{battery}%</span>
      </div>
    </div>
  );
}

const hudStatusStyles = {
  wrap: {
    position: "absolute", top: 22, left: 26,
    minWidth: 140,
    display: "flex", flexDirection: "column", gap: 4,
    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)",
    padding: "8px 12px",
    background: "rgba(20,14,10,0.32)",
    backdropFilter: "blur(8px)",
    WebkitBackdropFilter: "blur(8px)",
    borderRadius: 8,
    border: "1px solid rgba(255,248,236,0.12)",
    whiteSpace: "nowrap",
  },
  time: { fontFamily: "'Instrument Serif', serif", fontSize: 22, lineHeight: 1, letterSpacing: "-0.01em" },
  context: { fontSize: 11, opacity: 0.75, letterSpacing: "0.02em" },
  batt: { display: "flex", gap: 6, alignItems: "center", fontSize: 10, opacity: 0.7, marginTop: 2 },
  battOuter: {
    width: 22, height: 7, borderRadius: 2,
    border: "1px solid rgba(255,248,236,0.7)", padding: 1,
  },
  battFill: { height: "100%", background: "#FFF8EC", borderRadius: 1 },
};

window.HUDStatus = HUDStatus;