const objectives = [
  "Bootstrap Matter.js world",
  "Wire player state to the API",
  "Start M1 absorber loop"
];

export function Hud() {
  return (
    <aside className="rounded-3xl border border-white/10 bg-white/5 p-5 shadow-2xl shadow-cyan-950/30 backdrop-blur">
      <div className="mb-6">
        <p className="text-xs uppercase tracking-[0.3em] text-glow/70">Mission Board</p>
        <h2 className="mt-2 text-2xl font-semibold text-white">Boot Sequence</h2>
      </div>

      <dl className="grid grid-cols-2 gap-3 text-sm">
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">Mass</dt>
          <dd className="mt-1 text-xl font-semibold">12</dd>
        </div>
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">Tier</dt>
          <dd className="mt-1 text-xl font-semibold">Dustling</dd>
        </div>
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">Pull Radius</dt>
          <dd className="mt-1 text-xl font-semibold">48m</dd>
        </div>
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">Mode</dt>
          <dd className="mt-1 text-xl font-semibold">Sandbox</dd>
        </div>
      </dl>

      <div className="mt-6">
        <p className="text-xs uppercase tracking-[0.3em] text-amber-300/70">Next Steps</p>
        <ul className="mt-3 space-y-3 text-sm text-slate-200">
          {objectives.map((objective) => (
            <li key={objective} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3">
              {objective}
            </li>
          ))}
        </ul>
      </div>
    </aside>
  );
}