// Subtle hint at the bottom of vision + soft focus reticle.
function HUDHint({ children }) {
  return <div style={hudHintStyles.hint}>{children}</div>;
}

const hudHintStyles = {
  hint: {
    position: "absolute", bottom: 80, left: "50%",
    transform: "translateX(-50%)",
    fontFamily: "'Instrument Sans', sans-serif",
    fontSize: 13, fontWeight: 400,
    color: "rgba(255, 248, 236, 0.92)",
    textShadow: "0 1px 2px rgba(0,0,0,0.9)",
    letterSpacing: "0.01em",
    padding: "7px 16px",
    borderRadius: 9999,
    background: "rgba(20,14,10,0.48)",
    backdropFilter: "blur(12px)",
    WebkitBackdropFilter: "blur(12px)",
    border: "1px solid rgba(255,248,236,0.22)",
  },
};

function HUDReticle({ x = 50, y = 50, size = 96 }) {
  return (
    <div style={{
      position: "absolute", left: `${x}%`, top: `${y}%`,
      width: size, height: size,
      transform: "translate(-50%, -50%)", pointerEvents: "none",
    }}>
      <svg viewBox="0 0 96 96" width={size} height={size} fill="none">
        <circle cx="48" cy="48" r="34" stroke="rgba(255,248,236,0.55)" strokeWidth="1.2" />
        <circle cx="48" cy="48" r="34" stroke="#FFF8EC" strokeWidth="0.6" strokeDasharray="2 6" opacity="0.8" />
        <circle cx="48" cy="48" r="2" fill="#FFF8EC" />
      </svg>
    </div>
  );
}

window.HUDHint = HUDHint;
window.HUDReticle = HUDReticle;