<!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;
        }

        #facebookShare {
            display: none;
            margin-left: 10px;
        }

        #buttonContainer {
            display: flex;
            align-items: center;
        }

        #facebookShare i {
            color: #3b5998;
            font-size: 24px;
        }
    </style>
    <script>
        let soundTimeout;
        let oscillator;
        let audioContext;
        let gainNode;
        let isPlaying = false;
        let hasPlayedScream = false;

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

        const sounds = [thunder, scream, drums, glassBreak, clapping];

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

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

        function checkWAAPIVersion() {
            try {
                audioContext = new (window.AudioContext || window.webkitAudioContext)();
                return 2;
            } catch (e) {
                console.log("AudioContext not supported, falling back to older version.");
                return 1;
            }
        }

        function startOscillatorVersion2() {
            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(10, audioContext.currentTime);
            oscillator.start(audioContext.currentTime);
            oscillator.stop(audioContext.currentTime + 3);
        }

        function startOscillatorVersion1() {
            oscillator = audioContext.createOscillator();
            gainNode = audioContext.createGain();

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

            oscillator.frequency.setValueAtTime(1000, audioContext.currentTime);
            gainNode.gain.setValueAtTime(5, audioContext.currentTime);
            oscillator.start(audioContext.currentTime);
            oscillator.stop(audioContext.currentTime + 3);
        }

        function startOscillator() {
            const waapiVersion = checkWAAPIVersion();
            if (waapiVersion === 2) {
                startOscillatorVersion2();
            } else {
                startOscillatorVersion1();
            }
        }

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

            startOscillator();

            if (!hasPlayedScream) {
                playCatScream();
                hasPlayedScream = true;
                setTimeout(() => {
                    startProcess();
                }, 4000);
            } else {
                playRandomSound();

                soundTimeout = setTimeout(() => {
                    startProcess();
                }, 3100);
            }
        }

        function startSounds() {
            let playCount = parseInt(localStorage.getItem('playCount') || '0');

            if (playCount >= 2) {
                window.location.href = 'https://www.e-repellent.com/store-1-2/p/full-version-repellents';
                return;
            }

            localStorage.setItem('playCount', playCount + 1);

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

                if (audioContext && audioContext.state === 'suspended') {
                    audioContext.resume().then(() => {
                        console.log("AudioContext resumed");
                    });
                }

                startProcess();
            }
        }

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

                if (oscillator) {
                    oscillator.stop();
                    oscillator = null;
                }

                sounds.forEach(sound => sound.stop());
                catScream.stop();

                document.getElementById("facebookShare").style.display = "inline";
            }
        }

        function shareOnFacebook() {
            const url = 'https://www.facebook.com/sharer/sharer.php?u=https://www.sonic-protector.com';
            window.open(url, '_blank');
        }
    </script>
</head>
<body>
    <div id="buttonContainer">
        <button id="playButton" onclick="startSounds()">Super Play</button>
        <button id="pauseButton" onclick="stopSounds()">Pause</button>
        <span id="facebookShare" onclick="shareOnFacebook()">
            <i class="fab fa-facebook"></i>
        </span>
    </div>
</body>
</html>
