const MOON_ALIEN_RESCUE_SUBJECTS = [
  {
    id: "blue-helper",
    label: "Blue Helper",
    texture: "moon-alien-blue-helper-v3",
    atlas: "data/generated-assets/moon-aliens-v2/alien-blue-helper-atlas-v3.png",
    color: 0x77f4ff,
    homeX: 0.36,
    audio: "game_moon_aliens_left_welcome.mp3",
  },
  {
    id: "green-guide",
    label: "Green Guide",
    texture: "moon-alien-green-guide-v3",
    atlas: "data/generated-assets/moon-aliens-v2/alien-green-guide-atlas-v3.png",
    color: 0x9fffe3,
    homeX: 0.5,
    audio: "game_moon_aliens_middle_trade.mp3",
  },
  {
    id: "lavender-scout",
    label: "Lavender Scout",
    texture: "moon-alien-lavender-scout-v3",
    atlas: "data/generated-assets/moon-aliens-v2/alien-lavender-scout-atlas-v3.png",
    color: 0xc7a2ff,
    homeX: 0.64,
    audio: "game_moon_aliens_right_map.mp3",
  },
];

const MOON_ALIEN_FRAME_LABELS = [
  "idle_front",
  "idle_blink",
  "step_left",
  "step_right",
  "point_up",
  "beam_up",
  "happy_wave",
  "landing_pose",
];

const MOON_ALIEN_RESCUE_CONTROLS = [
  {
    id: "left",
    label: "←",
    copy: "Aim left",
  },
  {
    id: "up",
    label: "↑",
    copy: "Beam up",
  },
  {
    id: "right",
    label: "→",
    copy: "Aim right",
  },
];

const MOON_ALIEN_RESCUE_KEYS = {
  ArrowLeft: "left",
  ArrowRight: "right",
  ArrowUp: "up",
  Space: "up",
};

const MOON_ALIEN_FRAME_WIDTH = 512;
const MOON_ALIEN_FRAME_HEIGHT = 512;

// Set this to true after the Grok MP3s in GROK_TTS_MOON_ALIENS.md
// have been exported into data/audio/planets/.
const MOON_ALIENS_TTS_READY = true;

function playMoonAlienNarration(file) {
  if (!file || !window.__narration || !window.__narration.isEnabled()) return;
  if (!MOON_ALIENS_TTS_READY) return;
  window.__narration.play(file);
}

function createMoonAliensPhaserGame(mount, callbacks = {}, options = {}) {
  const PhaserLib = window.Phaser;
  if (!PhaserLib) return null;
  const skipCinematic = !!options.skipCinematic;
  const perfProbe =
    window.SpaceExplorerFoundation?.createSpacePerfProbe?.("Moon Aliens Phaser");

  class MoonContactScene extends PhaserLib.Scene {
    constructor() {
      super("MoonContactScene");
      this.phase = "cinematic";
      this.activeAlienIndex = 0;
      this.rescuedCount = 0;
      this.hintTimer = null;
    }

    clearHintTimer() {
      if (this.hintTimer) {
        this.hintTimer.remove(false);
        this.hintTimer = null;
      }
    }

    scheduleInactivityHint() {
      this.clearHintTimer();
      this.hintTimer = this.time.delayedCall(8000, () => {
        if (!this.sys || !this.sys.isActive()) return;
        if (this.phase !== "play") return;
        const pad = this.pads.find((item) => item.controlKey === "up");
        if (!pad) return;
        this.pulsePad(pad, 0x77f4ff);
        this.scheduleInactivityHint();
      });
    }

    preload() {
      MOON_ALIEN_RESCUE_SUBJECTS.forEach((alien) => {
        this.load.spritesheet(alien.texture, alien.atlas, {
          frameWidth: MOON_ALIEN_FRAME_WIDTH,
          frameHeight: MOON_ALIEN_FRAME_HEIGHT,
        });
      });
      this.load.image(
        "moon-ship",
        "data/generated-assets/moon-aliens/ship.png",
      );
      this.load.image(
        "moon-earth",
        "data/generated-assets/moon-aliens/earth.png",
      );
      const seen = new Set();
      this.load.on("loaderror", (file) => {
        const key = file && file.key;
        if (!key || seen.has(key)) return;
        seen.add(key);
        if (typeof reportSpaceError === "function") {
          reportSpaceError("Phaser image failed to load.", {
            source: "MoonAliensScene",
            asset: file && file.src ? file.src : key,
          });
        }
      });
    }

    create() {
      const { width, height } = this.scale;
      this.cameras.main.setBackgroundColor("#050714");
      this.createAnimations();
      this.drawBackdrop(width, height);
      this.drawMoon(width, height);
      this.drawEarth(width);
      this.createShip(width, height);
      this.createAliens(width, height);
      this.createSignalPads(width, height);
      this.createHud(width, height);
      this.keyHandler = (event) => {
        const controlKey = MOON_ALIEN_RESCUE_KEYS[event.code];
        if (controlKey) this.addSignalByKey(controlKey);
      };
      this.input.keyboard?.on("keydown", this.keyHandler);
      this.scale.on("resize", this.relayout, this);
      this.events.once("shutdown", () => {
        this.clearHintTimer();
        this.scale.off("resize", this.relayout, this);
        if (this.keyHandler) this.input.keyboard?.off("keydown", this.keyHandler);
      });
      this.playCinematic(width, height);
      perfProbe?.markInteractive({ renderer: "phaser" });
    }

    update(time) {
      perfProbe?.collectFrame(time || performance.now());
    }

    createAnimations() {
      MOON_ALIEN_RESCUE_SUBJECTS.forEach((alien) => {
        const idleKey = `${alien.texture}-idle`;
        const walkKey = `${alien.texture}-walk`;
        const beamKey = `${alien.texture}-beam`;
        const waveKey = `${alien.texture}-wave`;
        if (!this.anims.exists(idleKey)) {
          this.anims.create({
            key: idleKey,
            frames: [
              { key: alien.texture, frame: 0 },
              { key: alien.texture, frame: 1 },
              { key: alien.texture, frame: 0 },
            ],
            frameRate: 3,
            repeat: -1,
          });
        }
        if (!this.anims.exists(walkKey)) {
          this.anims.create({
            key: walkKey,
            frames: [
              { key: alien.texture, frame: 2 },
              { key: alien.texture, frame: 3 },
            ],
            frameRate: 5,
            repeat: 2,
          });
        }
        if (!this.anims.exists(beamKey)) {
          this.anims.create({
            key: beamKey,
            frames: [
              { key: alien.texture, frame: 4 },
              { key: alien.texture, frame: 5 },
              { key: alien.texture, frame: 6 },
            ],
            frameRate: 6,
            repeat: -1,
          });
        }
        if (!this.anims.exists(waveKey)) {
          this.anims.create({
            key: waveKey,
            frames: [
              { key: alien.texture, frame: 6 },
              { key: alien.texture, frame: 0 },
            ],
            frameRate: 4,
            repeat: 3,
          });
        }
      });
    }

    relayout() {
      if (!this.sys || !this.sys.isActive()) return;
      const { width, height } = this.scale;
      const short = height < 700;
      const compact = width < 560;
      const baseY = short ? height * 0.64 : height * 0.66;

      if (this.statusText) {
        this.statusText.setStyle({
          wordWrap: { width: Math.min(560, width - 56) },
        });
      }
      if (this.promptText) {
        this.promptText.setPosition(28, height - 92);
        this.promptText.setStyle({
          wordWrap: { width: Math.min(620, width - 56) },
        });
      }
      if (this.sequenceText) this.sequenceText.setPosition(width - 28, 26);
      if (this.recDot) this.recDot.setPosition(width - 34, 76);

      if (this.earth) {
        this.earth.setPosition(
          compact ? width - 48 : width - 92,
          compact ? 148 : 88,
        );
        const earthSize = compact ? 58 : 96;
        this.earth.setDisplaySize(earthSize, earthSize);
      }

      if (this.ship) {
        this.ship.x = width * 0.5;
        if (this.phase !== "cinematic") {
          this.ship.y = height * 0.31;
        }
      }

      if (this.alienEntries) {
        this.alienEntries.forEach((entry) => {
          if (entry.rescued) return;
          entry.homeX = width * entry.config.homeX;
          entry.homeY = baseY - 30;
          entry.sprite.setPosition(entry.homeX, entry.homeY);
          entry.sprite.setScale(short ? 0.32 : 0.4);
          entry.label.setPosition(entry.homeX, entry.homeY + (short ? 86 : 102));
        });
      }

      if (this.pads && this.pads.length === 3) {
        const padY = Math.min(
          short ? height * 0.74 : height * 0.82,
          height - (short ? 184 : 148),
        );
        const xs = [width * 0.38, width * 0.5, width * 0.62];
        this.pads.forEach((pad, i) => pad.setPosition(xs[i], padY));
      }

      if (this.phase === "play" || this.phase === "rescuing") {
        this.updateBeamTarget();
      }
    }

    drawBackdrop(width, height) {
      const stars = this.add.graphics();
      for (let i = 0; i < 140; i += 1) {
        const x = PhaserLib.Math.Between(0, width);
        const y = PhaserLib.Math.Between(0, Math.floor(height * 0.72));
        const alpha = PhaserLib.Math.FloatBetween(0.35, 0.92);
        stars.fillStyle(0xffffff, alpha);
        stars.fillCircle(x, y, PhaserLib.Math.FloatBetween(0.6, 1.8));
      }

      const nebula = this.add.graphics();
      nebula.fillStyle(0x1f6f90, 0.14);
      nebula.fillEllipse(
        width * 0.18,
        height * 0.2,
        width * 0.56,
        height * 0.26,
      );
      nebula.fillStyle(0x8c5bd6, 0.1);
      nebula.fillEllipse(
        width * 0.82,
        height * 0.32,
        width * 0.42,
        height * 0.22,
      );
    }

    drawMoon(width, height) {
      const moon = this.add.graphics();
      moon.fillStyle(0xd9d8ca, 1);
      moon.fillEllipse(width * 0.5, height * 0.92, width * 1.3, height * 0.42);
      moon.fillStyle(0x9d9b8e, 0.35);
      moon.fillEllipse(
        width * 0.22,
        height * 0.83,
        width * 0.16,
        height * 0.035,
      );
      moon.fillEllipse(
        width * 0.62,
        height * 0.88,
        width * 0.22,
        height * 0.045,
      );
      moon.fillEllipse(width * 0.82, height * 0.8, width * 0.13, height * 0.03);
      moon.lineStyle(2, 0xffffff, 0.16);
      moon.strokeEllipse(
        width * 0.5,
        height * 0.93,
        width * 1.34,
        height * 0.46,
      );
    }

    drawEarth(width) {
      const compact = width < 560;
      this.earth = this.add.image(
        compact ? width - 48 : width - 92,
        compact ? 148 : 88,
        "moon-earth",
      );
      const earthSize = compact ? 58 : 96;
      this.earth.setDisplaySize(earthSize, earthSize);
      this.tweens.add({
        targets: this.earth,
        angle: 360,
        duration: 80000,
        repeat: -1,
        ease: "Linear",
      });
    }

    createShip(width, height) {
      this.ship = this.add.container(width * 0.5, -120);
      this.beam = this.add.graphics();
      const shipArt = this.add.image(0, -6, "moon-ship");
      const shipWidth = height < 700 ? 222 : 255;
      shipArt.setDisplaySize(shipWidth, shipWidth * 0.67);
      this.ship.add([shipArt]);
    }

    createAliens(width, height) {
      const short = height < 700;
      const baseY = short ? height * 0.64 : height * 0.66;
      this.beamTarget = this.add.graphics();
      this.beamTarget.setDepth(2);
      this.alienEntries = MOON_ALIEN_RESCUE_SUBJECTS.map((config, index) => {
        const homeX = width * config.homeX;
        const homeY = baseY - 30;
        const sprite = this.add
          .sprite(homeX, homeY, config.texture, 0)
          .setScale(short ? 0.32 : 0.4)
          .setDepth(4);
        sprite.play(`${config.texture}-idle`);
        sprite.setData("subject", config.id);
        sprite.setData("frameLabels", MOON_ALIEN_FRAME_LABELS.join(","));
        const label = this.add
          .text(homeX, homeY + (short ? 86 : 102), config.label, {
            fontFamily: "Inter, sans-serif",
            fontSize: "13px",
            fontStyle: "800",
            color: "#eef7ff",
            stroke: "#07111f",
            strokeThickness: 4,
          })
          .setOrigin(0.5)
          .setDepth(5);
        this.tweens.add({
          targets: sprite,
          y: homeY - 8,
          duration: 1250 + index * 110,
          yoyo: true,
          repeat: -1,
          ease: "Sine.inOut",
        });
        return {
          config,
          sprite,
          label,
          homeX,
          homeY,
          rescued: false,
        };
      });
      this.updateBeamTarget();
    }

    createSignalPads(width, height) {
      this.pads = [];
      const short = height < 700;
      const padY = Math.min(
        short ? height * 0.74 : height * 0.82,
        height - (short ? 184 : 148),
      );
      const entries = [
        ["left", width * 0.38],
        ["up", width * 0.5],
        ["right", width * 0.62],
      ];
      entries.forEach(([key, x]) => {
        const control = MOON_ALIEN_RESCUE_CONTROLS.find((item) => item.id === key);
        const pad = this.add.container(x, padY);
        const g = this.add.graphics();
        g.fillStyle(key === "up" ? 0x77f4ff : 0x18263f, key === "up" ? 0.22 : 0.82);
        const padW = short ? 72 : 84;
        const padH = short ? 48 : 56;
        g.fillRoundedRect(-padW / 2, -padH / 2, padW, padH, 16);
        g.lineStyle(2, key === "up" ? 0x77f4ff : 0xffffff, key === "up" ? 0.78 : 0.28);
        g.strokeRoundedRect(-padW / 2, -padH / 2, padW, padH, 16);
        const icon = this.add
          .text(0, -4, control ? control.label : key, {
            fontFamily: "Inter, sans-serif",
            fontSize: "30px",
            fontStyle: "700",
            color: "#eef7ff",
          })
          .setOrigin(0.5);
        const label = this.add
          .text(0, 23, control ? control.copy : "", {
            fontFamily: "Inter, sans-serif",
            fontSize: "9px",
            fontStyle: "800",
            color: "#d6e3f0",
          })
          .setOrigin(0.5);
        pad.add([g, icon, label]);
        pad.setSize(padW, padH);
        pad.controlKey = key;
        pad.setInteractive({ useHandCursor: true });
        pad.on("pointerdown", () => this.addSignal(key, pad));
        this.pads.push(pad);
      });
    }

    createHud(width, height) {
      this.titleText = this.add.text(28, 24, "Moon Rescue Beam", {
        fontFamily: "Inter, sans-serif",
        fontSize: "18px",
        fontStyle: "700",
        color: "#8feaff",
      });
      this.statusText = this.add.text(28, 52, "Recording lunar arrival...", {
        fontFamily: "Inter, sans-serif",
        fontSize: "32px",
        fontStyle: "700",
        color: "#eef7ff",
        wordWrap: { width: Math.min(560, width - 56) },
      });
      this.promptText = this.add.text(28, height - 92, "", {
        fontFamily: "Inter, sans-serif",
        fontSize: "17px",
        color: "#d6e3f0",
        wordWrap: { width: Math.min(620, width - 56) },
      });
      this.sequenceText = this.add
        .text(width - 28, 26, "", {
          fontFamily: "Inter, sans-serif",
          fontSize: "17px",
          fontStyle: "700",
          color: "#ffd66b",
        })
        .setOrigin(1, 0);
      this.recDot = this.add.graphics();
      this.recDot.fillStyle(0xff5a77, 1);
      this.recDot.fillCircle(0, 0, 5);
      this.recDot.setPosition(width - 34, 76);
      this.tweens.add({
        targets: this.recDot,
        alpha: 0.2,
        duration: 620,
        yoyo: true,
        repeat: -1,
      });
    }

    playCinematic(width, height) {
      this.pads.forEach((pad) => pad.disableInteractive());
      if (skipCinematic) {
        this.ship.y = height * 0.31;
        this.startRound();
        return;
      }
      this.tweens.add({
        targets: this.ship,
        y: height * 0.31,
        duration: 2200,
        ease: "Sine.out",
        onComplete: () => {
          if (!this.sys || !this.sys.isActive()) return;
          this.cameras.main.flash(220, 119, 244, 255, false);
          this.startRound();
        },
      });
    }

    startRound() {
      this.phase = "play";
      const active = this.activeAlien();
      if (!active) {
        this.finishRescue();
        return;
      }
      this.statusText.setText(`Beam home: ${active.config.label}`);
      this.promptText.setText(
        "Use ← and → to aim the beam. Press ↑ or Space to lift the alien back to the ship.",
      );
      this.sequenceText.setText(`${this.rescuedCount}/3 home`);
      this.updateBeamTarget();
      this.pads.forEach((pad) => pad.setInteractive({ useHandCursor: true }));
      this.scheduleInactivityHint();
      callbacks.onRound?.(active.config);
    }

    activeAlien() {
      return this.alienEntries?.[this.activeAlienIndex] || null;
    }

    updateBeamTarget() {
      if (!this.beamTarget || !this.alienEntries) return;
      const active = this.activeAlien();
      this.beamTarget.clear();
      this.alienEntries.forEach((entry, index) => {
        if (entry.rescued) {
          entry.label.setAlpha(0.3);
          return;
        }
        const isActive = index === this.activeAlienIndex;
        entry.sprite.setAlpha(isActive ? 1 : 0.62);
        entry.label.setAlpha(isActive ? 1 : 0.58);
      });
      if (!active || active.rescued) return;
      const color = active.config.color;
      this.beamTarget.fillStyle(color, 0.14);
      this.beamTarget.fillTriangle(
        this.ship.x - 42,
        this.ship.y + 28,
        this.ship.x + 42,
        this.ship.y + 28,
        active.sprite.x,
        active.sprite.y + 52,
      );
      this.beamTarget.lineStyle(3, color, 0.42);
      this.beamTarget.strokeEllipse(active.sprite.x, active.sprite.y + 28, 126, 34);
    }

    addSignal(key, pad) {
      if (this.phase !== "play") return;
      this.pulsePad(pad, key === "up" ? 0x77f4ff : 0xffffff);
      this.scheduleInactivityHint();
      if (key === "left" || key === "right") {
        this.moveBeamTarget(key === "left" ? -1 : 1);
        return;
      }
      if (key === "up") {
        this.rescueActiveAlien();
      }
    }

    addSignalByKey(key) {
      const pad = this.pads.find((item) => item.controlKey === key) || null;
      this.addSignal(key, pad);
    }

    moveBeamTarget(delta) {
      if (!this.alienEntries) return;
      const openIndexes = this.alienEntries
        .map((entry, index) => (entry.rescued ? -1 : index))
        .filter((index) => index >= 0);
      if (!openIndexes.length) return;
      const currentSlot = Math.max(0, openIndexes.indexOf(this.activeAlienIndex));
      const nextSlot =
        (currentSlot + delta + openIndexes.length) % openIndexes.length;
      this.activeAlienIndex = openIndexes[nextSlot];
      const active = this.activeAlien();
      if (active) {
        active.sprite.play(`${active.config.texture}-walk`, true);
        this.time.delayedCall(420, () => {
          if (active && !active.rescued) active.sprite.play(`${active.config.texture}-idle`, true);
        });
        this.statusText.setText(`Beam home: ${active.config.label}`);
        callbacks.onAim?.(active.config);
      }
      this.updateBeamTarget();
    }

    pulsePad(pad, color) {
      if (!pad) return;
      const glow = this.add.graphics();
      glow.fillStyle(color, 0.32);
      glow.fillCircle(pad.x, pad.y, 44);
      this.tweens.add({
        targets: glow,
        alpha: 0,
        scale: 2,
        duration: 420,
        onComplete: () => glow.destroy(),
      });
      this.tweens.add({ targets: pad, scale: 1.08, yoyo: true, duration: 110 });
    }

    rescueActiveAlien() {
      const active = this.activeAlien();
      if (!active || active.rescued) return;
      this.phase = "rescuing";
      this.clearHintTimer();
      this.pads.forEach((pad) => pad.disableInteractive());
      this.statusText.setText(`${active.config.label} is riding the light beam!`);
      this.promptText.setText("The beam carries the alien up to the waiting ship.");
      active.sprite.play(`${active.config.texture}-beam`, true);
      this.updateBeamTarget();
      this.tweens.add({
        targets: active.sprite,
        x: this.ship.x,
        y: this.ship.y + 38,
        scale: active.sprite.scaleX * 0.42,
        alpha: 0.2,
        duration: 980,
        ease: "Sine.inOut",
        onComplete: () => {
          active.rescued = true;
          active.sprite.setVisible(false);
          active.label.setVisible(false);
          this.rescuedCount += 1;
          this.sequenceText.setText(`${this.rescuedCount}/3 home`);
          callbacks.onSolved?.(active.config);
          this.beamTarget.clear();
          if (this.rescuedCount >= MOON_ALIEN_RESCUE_SUBJECTS.length) {
            this.finishRescue();
            return;
          }
          const nextIndex = this.alienEntries.findIndex((entry) => !entry.rescued);
          this.activeAlienIndex = Math.max(0, nextIndex);
          this.time.delayedCall(520, () => this.startRound());
        },
      });
    }

    finishRescue() {
      this.phase = "complete";
      this.clearHintTimer();
      this.beamTarget?.clear();
      this.statusText.setText("All aliens are home");
      this.promptText.setText(
        "Every moon friend rode the light beam back to the spaceship.",
      );
      this.sequenceText.setText("3/3 home");
      this.pads.forEach((pad) => pad.disableInteractive());
      callbacks.onComplete?.();
      this.cameras.main.flash(260, 119, 244, 255, false);
      this.time.delayedCall(1350, () => {
        if (!this.sys || !this.sys.isActive()) return;
        this.ship.y = this.scale.height * 0.24;
      });
    }
  }

  return new PhaserLib.Game({
    type: PhaserLib.AUTO,
    parent: mount,
    width: mount.clientWidth || 960,
    height: mount.clientHeight || 620,
    backgroundColor: "#050714",
    scale: {
      mode: PhaserLib.Scale.RESIZE,
      autoCenter: PhaserLib.Scale.CENTER_BOTH,
    },
    scene: MoonContactScene,
  });
}

function MoonAliensPhaserLevel({ onExit }) {
  const gameRef = useRef(null);
  const mountRef = useRef(null);
  const [runKey, setRunKey] = useState(0);
  const [status, setStatus] = useState("Watch the ship arrive, then beam each alien home.");
  const [solved, setSolved] = useState(0);
  const [complete, setComplete] = useState(false);

  useEffect(() => {
    if (!mountRef.current) return undefined;
    if (!window.Phaser) {
      setStatus(
        "Phaser did not load. Check the network and refresh this level.",
      );
      return undefined;
    }
    gameRef.current = createMoonAliensPhaserGame(
      mountRef.current,
      {
        onRound: (alien) => {
          setComplete(false);
          setStatus(
            `Aim at ${alien.label}. Use ← and →, then press ↑ to beam them home.`,
          );
          playMoonAlienNarration(alien.audio);
        },
        onAim: (alien) => {
          setStatus(`Beam target: ${alien.label}. Press ↑ or Space to lift them.`);
        },
        onSolved: (alien) => {
          setSolved((count) => count + 1);
          setStatus(`${alien.label} rode the light beam back to the ship.`);
          playKidSound("chime");
        },
        onComplete: () => {
          setStatus("All moon friends are safely back in the spaceship.");
          setComplete(true);
          playKidSound("whoosh");
          playMoonAlienNarration("game_moon_aliens_done.mp3");
        },
      },
      { skipCinematic: runKey > 0 },
    );
    playMoonAlienNarration("game_moon_aliens_start.mp3");
    const cleanupRuntime = () => {
      if (gameRef.current) {
        gameRef.current.destroy(true);
        gameRef.current = null;
      }
      if (window.__narration) window.__narration.stop();
    };
    const unregisterRuntimeCleanup =
      window.SpaceExplorerFoundation?.registerGameRuntimeCleanup?.(
        cleanupRuntime,
      ) || (() => {});
    return () => {
      unregisterRuntimeCleanup();
      cleanupRuntime();
    };
  }, [runKey]);

  const restart = () => {
    setStatus(
      "Watch the ship arrive, then beam each alien home.",
    );
    setSolved(0);
    setComplete(false);
    setRunKey((key) => key + 1);
  };

  return (
    <section className="moon-aliens-level" aria-label="Aliens on the moon Phaser game">
      <button className="planet-sort-back" onClick={onExit}>
        ← Back to planets
      </button>
      <div className="moon-aliens-frame">
        <div ref={mountRef} className="moon-aliens-game" />
        <div className="moon-aliens-hud">
          <span>Moon Rescue Beam</span>
          <strong>{status}</strong>
          <div className="moon-aliens-progress" aria-label="Aliens rescued">
            {MOON_ALIEN_RESCUE_SUBJECTS.map((alien, index) => (
              <i key={alien.id} className={index < solved ? "on" : ""} />
            ))}
          </div>
          {complete ? (
            <button className="moon-aliens-replay" onClick={restart}>
              Replay
            </button>
          ) : null}
        </div>
      </div>
    </section>
  );
}