<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        #pauseButton {
            display: none;
        }

        #buttonContainer {
            display: flex;
            align-items: center;
        }
    </style>
    <script>
        let clickCount = 0; // Tracks the number of clicks on the play button
        let maxClicks = 2; // Maximum allowed clicks
        let isPlaying = false;
        let soundTimeout;
        let audioContext, oscillator, gainNode;

        // Load Howler.js sounds
        const catScream = new Howl({ src: ['sounds/cat_scream.mp3'], duration: 4, html5: true });
        const randomSounds = [
            new Howl({ src: ['sounds/thunder.mp3'], loop: false, html5: true }),
            new Howl({ src: ['sounds/scream.mp3'], loop: false, html5: true }),
            new Howl({ src: ['sounds/drums.mp3'], loop: false, html5: true }),
            new Howl({ src: ['sounds/glass_break.mp3'], loop: false, html5: true }),
        ];

        function startOscillator() {
            try {
                audioContext = new (window.AudioContext || window.webkitAudioContext)();
                oscillator = audioContext.createOscillator();
                gainNode = audioContext.createGain();

                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);
                oscillator.type = "sine";

                oscillator.frequency.setValueAtTime(1000, audioContext.currentTime);
                oscillator.frequency.linearRampToValueAtTime(4000, audioContext.currentTime + 1.5);
                oscillator.frequency.linearRampToValueAtTime(1000, audioContext.currentTime + 3);

                gainNode.gain.setValueAtTime(1, audioContext.currentTime);
                oscillator.start(audioContext.currentTime);
                oscillator.stop(audioContext.currentTime + 3);
            } catch (e) {
                console.error("AudioContext not supported.", e);
            }
        }

        function playCatScream() {
            catScream.play();
        }

        function playRandomSound() {
            const randomIndex = Math.floor(Math.random() * randomSounds.length);
            randomSounds[randomIndex].play();
        }

        function startProcess() {
            if (!isPlaying) return;

            startOscillator();
            playCatScream();

            soundTimeout = setTimeout(() => {
                if (isPlaying) playRandomSound();
            }, 4000);
        }

        function startSounds() {
            if (clickCount >= maxClicks) {
                alert("Έχετε εξαντλήσει τις δωρεάν χρήσεις. Μεταφέρεστε στο e-shop για αγορά.");
                window.location.href = "https://www.e-repellent.com/store-1-2";
                return;
            }

            clickCount++;

            if (!isPlaying) {
                isPlaying = true;
                document.getElementById("playButton").style.display = "none";
                document.getElementById("pauseButton").style.display = "inline";

                startProcess();

                // Automatically stop sounds after allowed time
                setTimeout(() => {
                    stopSounds();
                }, 120000); // Maximum time for a session (2 minutes)
            }
        }

        function stopSounds() {
            isPlaying = false;
            document.getElementById("pauseButton").style.display = "none";
            document.getElementById("playButton").style.display = "inline";

            clearTimeout(soundTimeout);
            if (oscillator) oscillator.stop();
            catScream.stop();
            randomSounds.forEach(sound => sound.stop());
        }
    </script>
</head>
<body>
    <div id="buttonContainer">
        <button id="playButton" onclick="startSounds()">Super Play</button>
        <button id="pauseButton" onclick="stopSounds()">Pause</button>
    </div>
</body>
</html>
