// Menu — title + Play button, built with the UI.* design system.
window.MenuScene = class MenuScene extends Phaser.Scene {
  constructor() { super('Menu'); }

  create() {
    const W = window.GAME.WIDTH, H = window.GAME.HEIGHT;

    if (this.textures.exists('bg')) {
      this.add.image(W / 2, H / 2, 'bg').setDisplaySize(W, H).setAlpha(0.85);
    } else {
      this.cameras.main.setBackgroundColor(window.GAME.BG_COLOR);
    }
    UI.scrim(this, 0.32);

    // Title (display font, type scale) — gentle float.
    const title = UI.title(this, W / 2, H * 0.30, window.GAME.TITLE);
    this.tweens.add({ targets: title, y: title.y - 10, duration: 1500, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' });

    UI.body(this, W / 2, H * 0.30 + 40, window.GAME.SUBTITLE);

    // Best-score chip in a frosted panel.
    const best = parseInt(localStorage.getItem(window.GAME.BEST_KEY) || '0', 10);
    UI.panel(this, W / 2, H * 0.48, 200, 72, {});
    UI.label(this, W / 2, H * 0.48 - 14, 'BEST');
    UI.value(this, W / 2, H * 0.48 + 12, best, { style: { color: window.GAME.ACCENT } });

    // Play button (consistent pill).
    const start = () => {
      window.Audio.unlock();
      window.Audio.sfx('start');
      this.cameras.main.fade(220, 0, 0, 0);
      this.time.delayedCall(230, () => this.scene.start('Game'));
    };
    UI.button(this, W / 2, H * 0.66, 220, 64, 'PLAY', start);

    UI.body(this, W / 2, H * 0.82, 'Arrow keys / drag / tap to move', { style: { fontSize: '13px' } });

    this.input.keyboard.on('keydown-SPACE', start);
    this.input.keyboard.on('keydown-ENTER', start);
  }
};
