class TitleScreen extends Phaser.Scene {
    constructor() {
        super('TitleScreen');
    }

    create() {
        this.cameras.main.setBackgroundColor(0x0F0F23);

        var W = 960;
        var H = 600;

        // Background — faded into black
        this.add.image(W / 2, H / 2, 'bg_platform')
            .setDisplaySize(W, H);
        this.add.rectangle(W / 2, H / 2, W, H, 0x000000, 0.7);

        // Breathing container — holds title elements
        var breathGroup = this.add.container(W / 2, 220);

        // Kangaroo
        var roo = this.add.image(0, 0, 'player_idle');
        roo.setScale(1.2);
        breathGroup.add(roo);

        // Heading
        var heading = this.add.text(0, 80,
            'Help the Collector from Australia\nCollect Cards from the Clouds\nin Kenya!', {
            fontFamily: 'Arial',
            fontSize: '16px',
            color: '#FFD700',
            align: 'center',
            lineSpacing: 6,
            stroke: '#000000',
            strokeThickness: 3
        }).setOrigin(0.5);
        breathGroup.add(heading);

        // Best time
        var bestTime = localStorage.getItem('fsys_agent_best_time');
        if (bestTime) {
            bestTime = parseFloat(bestTime);
            if (bestTime < Infinity) {
                var timeText = this.add.text(0, 130, 'Best Time: ' + this.formatTime(bestTime), {
                    fontFamily: 'Arial',
                    fontSize: '14px',
                    color: '#ffd700'
                }).setOrigin(0.5);
                breathGroup.add(timeText);
            }
        }

        // Breathing tween
        this.tweens.add({
            targets: breathGroup,
            scaleX: 1.03,
            scaleY: 1.03,
            duration: 2500,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut'
        });

        // Begin game prompt
        var beginText = this.add.text(W / 2, 440, 'CLICK OR PRESS SPACE TO START', {
            fontFamily: 'Arial Black',
            fontSize: '20px',
            color: '#00ff9d',
            stroke: '#000000',
            strokeThickness: 4
        }).setOrigin(0.5).setInteractive({ useHandCursor: true });

        var border = this.add.rectangle(W / 2, 440, beginText.width + 30, beginText.height + 14)
            .setStrokeStyle(2, 0x00ff9d, 0.6);

        this.tweens.add({
            targets: [beginText, border],
            alpha: 0.3,
            duration: 800,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut'
        });

        beginText.on('pointerover', function() { beginText.setColor('#52ffff'); });
        beginText.on('pointerout', function() { beginText.setColor('#00ff9d'); });
        beginText.on('pointerdown', function() {
            this.scene.start('GameScene');
        }, this);

        this.input.keyboard.once('keydown-SPACE', function() {
            this.scene.start('GameScene');
        }, this);

        // Footer
        this.add.text(W / 2, H - 20, 'FSYS Agent 2050', {
            fontFamily: 'Arial',
            fontSize: '12px',
            color: '#3b4a3f'
        }).setOrigin(0.5);
    }

    formatTime(seconds) {
        var m = Math.floor(seconds / 60);
        var s = Math.floor(seconds % 60);
        return (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s;
    }
}