// @ts-ignore
import {useRef, useEffect, useState} from 'react';
import { NextPage } from "next";
import Seo from 'components/SEO';
function openFullscreen(e:any) {
    if (e.requestFullscreen) {
      e.requestFullscreen();
    } else if (e.webkitRequestFullscreen) { /* Safari */
      e.webkitRequestFullscreen();
    } else if (e.msRequestFullscreen) { /* IE11 */
      e.msRequestFullscreen();
    }
  }
//   function closeFullscreen(doc:any) {
//     if (doc.exitFullscreen) {
//       doc.exitFullscreen();
//     } else if (doc.webkitExitFullscreen) { /* Safari */
//       doc.webkitExitFullscreen();
//     } else if (doc.msExitFullscreen) { /* IE11 */
//       doc.msExitFullscreen();
//     }
//   }
const SurprisePage:NextPage = () => {
    const parentRef = useRef(null);
    const [open, setOpen] = useState(false);
    useEffect(() => {
      if(open) {
        openFullscreen(parentRef.current);
    }
        openFullscreen(parentRef.current);
      }, [parentRef, open])
useEffect(() => {
function beforeLeave(e:BeforeUnloadEvent) {
    var confirmationMessage = `B̶̡̡̨̨̛͉̹͓̣̻̯̣̲̭̪̬̱̪͍̝̝̰̖̼̀́̎̅͒̾̏̓̑̎͆͋̾̽͐̄̆̅̓̋̔͐̈́̃̾͛͒̆͆͌̋͠͠ͅͅê̶̗̥͔a̵̛͎͈̺̙̹͓̗̻̫̳͙̤̖͈̜̟̐̉̇͋̂̇̎̏̂̐̓͋͝͝ͅű̴̢̧̡̧͖͍͖̞͔̠͖̺̜̜͙̜̖̮̖̬͇͔͛͂͒̄̽̉̌̊̿̆̒̏͆́̿͊̍͑̄̆̈́̽̀̇̕̚͝͝ť̸͎̲̣̲͙͍͍̗̙̻̺͓̱͕̫̤̌̍̒̏̅̍͋̆͊͒̈́̈́̐̀͗̈́̀̎͛̃̽̃̃̿̽̓̈́̆̕͝͠͝i̴̡̨͉͖͍͈̻̜̪̲͆̂͑̈́̐̊̊́̂̇͆̔̿͊͘̕f̶̧̢̢̡̭̬̭̤͕̝̭̘̘̪̞̠̣̺̰̟̺̰̩̗̺̤̍͗̄͐͒̀͋̓̇͜͝͠ͅų̸͖̠͎̝͉̮̙̞͒̄͒̂̅͂̐̌͂̈́̎̌̾̍́̎͒͒̈̆́͛̑͗͛̓́͘̕͝͝l̷̨̛̹̩̀̉̿̈́̒̇̓͊̍͌̀̈͒̽̔̈́̓͂̌̆̐͂͂́͂̕͝͠͝ ̶̛͙͉̦̙̺̩͖͖͇̫̈́̀͆̋̽̈̑́̇̓͌̅̀̀̌̂́̓̃̍̌̀̾̑̉͘͝ṃ̵̡̡̺̻̟̮̲͚̖̘̥̀̓̎̀̀̓̓͑́͑̆̇̓̂̽͑́̀͆̕͝͝͝ͅǫ̵̺̫͉̤̝̦̹̳̣̼̤̞͔̬͎̲͎͓̥̹̺̜̮͚̩̮̻̖̣̒̇͂͛̂̊̅̉͐̎͒͘̚̕͠͠ͅͅŗ̴̛̛̗͍̫͎̣͙̞̩̯̥́͊̾͑͂̄̀̈́̽́̇̉͗̂́̍̐̀̾̈́͛̋̐̋̆̚̕̕͝n̷̼̻̞̜̬̤͓͓͑̎͐̏̍̄͆̓͊͗̅́͂̉̔̃̂͂̕͠͝͠ͅi̴̧̙̮͈͖͖͓͈̱̰̙̬͍̗͚̝̟̰̯̟̜̪̅̈́̄́̋́͐̽͐̄̇̊͂̇̿͘̕͜n̷̨̨̧̛̗͉̥͎̲͖̦̮͈̘̮̼̞̳͙͈̰̞̼͔̣̯̤̜͎̮̞̔̑̎̈́͂͌̈͑̔̈͊͆͋͂͋͗̔̅͐̌̌͜͝ͅͅͅ'̶̨̧̦̹̪̹͔̤̙̱͖̞̺͕̘͔͙̗͎̩͋̈̐̇́́̏͊̔̑͒̐͐͗̃̽̌̎̅̀͆̒́̆̃̀̓́͌͑̂̕͘͠͠ͅ,̸̡̡̡̧͎̺̲̣͚͕͔͔̳̱̩̲̦͓͙̜̼̙͇̱̮̘͕̠̪͇̒̐̈̀̆̽̈̇̍̀̀͋̚͜͜͝͝ͅͅ ̴̢̧̨̪̜͚̲̤̲̗̥͚͖̱̘̖̠̙͔̹̼̖͇̥͍͇̼̪̫͐͐͑̾͒͂̀̓̆́̕͘͜
    ̸̢̢̹̗̘̱̹̮̲̘̘̒̓̇̋͆͐̐̏̍̊͒̾͛̊͠͝ͅy̸̧̛͓̩̹̩̩͓̙̪̩̻͔͔̳͓̲̻̹̼͕͓̜̭̬̭̋̎͑̽̏̌͌̃͑̌̿̀̍̄̈̓͒͊̈̃̌͗̄̕͝ờ̵̡̛̘̠̣̯͖̯̫̦̯̯̣͓̗̰̓̏͑̊͑͛̈́̍̄́̽͊̚̚ụ̸̪̃̈́̓̈̍͌'̸̡̢̝̬̳͖̠͇͔̜̋̒͐̒̑̈́̂̔͂̎͐̉̉̈̔̅̀͆̀̎͂̈̑̽̾̑͂̀̏̎͆̚͝͝ȓ̶͚̍̑̏͊̎̃͂̃͆̽̂̄͘è̵͙͔̼̙̯̮̭̈̀̆̒̈̔̈́́̓͂̔̇̆͋̐̀̑͑̔̀͊͗͊̓͗̚̕͘͝ ̸̢̧̧̧̨̢̛̛͕̤͍̞̘̯̯̝̜̼̣̲̲̙͙̪̻̟̩͓̭̻̪͖͆̄́̀̈́̆̉́̈́͑̓̓̋̎͋̿̉͊̊͠͝͝ţ̴̨̢̧̞̮̗͓̘̟̙͔̘̱͕͇̯̤̘̥̱̲̩̯̫̻̻̺̗̙́͊͒̽̓͘ͅḧ̴̡̡̧̤̭̼̟͙̘̞̩̬̮̺̗͇͕́̔͜ȇ̷̡̢̼̺̜̼͖̩̝͓͔̟͉̘͎̜͚͇̬̖̣͙͍̯̻̱̙̟͉̆́̏͋͂́̀̌̆̄̿̋̾͆̄̽̃͂͂̀̈́̑̀̍̈̀͘̚͜͝ ̶̟̳̠͚̯̫͍͍̺͖̻̹̥̹̞͚̰̯̳͇̭̟͈̝̫̺̙̯͔͊̿͜͜ͅͅs̴̡̡̧͚̦̬̥͈̙̱̻̭̩̞̻͕͍͔̥̦̺̖̳̲̜̗̹̻͉̺̦̦̫̊́̃̂̈́͑͆̇͋̀̒͜͜͝ṵ̶̧̜̞̜̖͙̲̫͓͓̳͕̲̳̘͈̣̰͇̳̑͆̍́̀̀̈́̉̅̒̓͂̈́͌͑̚͘͠͝ͅͅņ̸̨͚͈̜͚̝̹̞̹̙̯̠̫̠͉̩̹̲̣̖̣̜͓͔̮͕̞̲͓͙̭͖̃̒́̾̂̌̈̽̽͌̏̏̋̔́̓̊̆͐͂͝ ̷̡̡̱̹̱͕̯̤͇͇̩̖̱̝̥̜̖͘į̴̢̢̡̧̛̛̬͎̥͉̘̻̬̲̪̖̼͍͍͓̩̞̫̯̰͕̩̜̳͇̗̳̤̱̈̐̀̂̽̔͑̀̀̇̏̽̋̿͆̈́̑͗́̍̌̊̀̃͛͑̈́͗̕̕͠ͅn̵̨̛̞̙̝̩̭̺͍͙̯̣̠̝̩͉͙͓̲̾̐̔̍̀̉̇̀́̐̉̒̀̃̀́̆́̏̔̂͛̚͜͠͠ͅ ̶̧̖̥̲̫̟̯̠͔͖͖͔̣͉̩̘͎̬̞͇͎̤̻̙̫̌̌̏̓̿̓͋̓̀̈́͋͛̿̈́̔̓̉̄̑̍̎̓͝͝͝ͅm̸̛̪̙̦͍̮̜̘̜͚̜̜̯͈̻̤͖̓̔̾̐̋̾̓̌̀͂̔̅̅̓͛̅̾̊̈́̍̇́̐̆̽̂̽͜͝y̷̢̛̲̖̲̥͙̱̫̜̥̮̣̼̫͖̽̊̌̌̆́̉̎̿̂̉͒̈́̽̏͒̔̓̇̒̎͒̿̄̊͌̄͝͝͝ ̸̦͕̹̦̩̳̮̥̜̘͔̥̼̞̞̘̤̯͔̘̃͆̈́̈́̊̓͌͝ͅṁ̵̢̼̗̞̺͕͙̫̥̯̹̭͔͉̳̜͇̯͓̮̟͉̥͈͎̣̙̝̱̽̄̂̂̍̏̆͐̾̂̄͆͜͝ơ̶̡̻̬̫͕͎̰̈́͐̒̔͋̐̓̅͑̿̏̍́͊̆͂̒̐͛̓̊̓͐̕̕̚̕͠͠͠r̶̨̘̜͕͍̱̋̀͗̇̇̌͂̔͒̽̀n̵̢̢̢͈̤͙̝͉̤̞͚̘̱̯͇̬̬̤͚̊̿̾͆̆̽̐̇̐̿̎̀̒̿͋̌͆̀̂̑̆̈́͌̕͜͝i̶̢̢̨̘̩̹̖̥͇̖͎̲̓̑̿͊̈́̈́̓̓̍́͆̑̾̈́̔̾̎͛̽̓̄͋̄̔͘̕̕̕n̷̨̨̗̬͍͖̣̮͇͇͚̭͍̳̘͙̠̬̱͂̿̒͑͑'̷̤͎̺̩̻͇̜̽̂̄̂̍̋͑͋͗̊̊́,̴̨̛̭̙̘̱͙̦͍̦̥͕̝̹͆͊͊̑̄͐̒̅̅̓̀̊͗͛̓͌̀̈̓͗͂̽̍̑́ ̵̢̢̛̛̰̟̦̥̲̙̲̦̟̞̬̲͍͉͇̠̫̪͈̘̉̄̒̈́̂͜͝b̷̖̥̖͙͈͐̇͝â̴̢̢̧̘͇̱̞̼̲̥̖̻͎̭̻͉̤̲͈̯̳̹͇̲͍̲̭̻͕͊̏͊̀͊͋̀̓̔͌̓̚̚͘͜͝b̴̛̬͚̙̠̰̮̉̈́̃̏́̃̃̽̇̚͘͜͠ḙ̸͉̱̤̳̖̪͎̖͔͎̣̙̥̰͗
    ̷̡̡̡̣͇̼̳̖̯͈͙̼̖͓̱̜͈̞͔̪̪̰͔͚̰͎̏̀̈́̀̅̀̈́́͛̑͋̌̉͒̾͐̐̾̈́̇̌̀͜͝͠͝ͅͅW̸̱̲͚̮̹̜̟̖̹͇͔͖̥̬̯͎̙̹͈̦̑͒͌̐́̍͂̿̂͌͛̏̒̾̈̅̾̕ͅh̴̢̢̬̯̖̰̖͚͎̟̬̖̰͕͔̫̮͉͕̝̠̰̺̭̲̭͚̙̫̗͍̠͕͚̄̏̒͛̐̀̓̃̔̓́͒̈́̽͂̓̊̓̃̍̉̊̄͌̚͘͝͠ͅǫ̷̲̖̠̠̻̰̯̱̩̼̦̤͈̖̫̝̬̎̈́̇͌̄̑́͐͌̉͆̀̔̄̈́̍͋͗̕͜ͅ ̸̝̻͚̙̫̖̹͙̦͇̤͇͚̦͔̑̏͆̎̈́̎̓̾̾̎̏̋̈́̊̋̃̈̾̕͘͜͝͠c̷̪̥̗̦̺͖̘̫͍͓̹̼͌̇̉̌̋̈͜͠a̵̧̡͈̺̲̼̺͙̞͇̤̦̤̱̘͎͖̰͋̄̔͒́͗͋̀͠ń̶͇̩͕̱̳͎̬̈́̾̒̄́̎̆́̕ ̷̱̗͚̟͚͎̝͊̔I̷̺̘̪̖̘̠̬͎̭͔̖̹̹̟̓̄́̄̈́̃̀͋͆̐͜ ̸̡̡̛̛̛̻̩̗̟͈̹̬̰͔̹̘̮̰̘̱͉̯̩̳̠̙̰́̀͋̃̑̌̈́͐̓͝͝ͅt̸̢̢̨̞̮̼͕͖̱̝̟̯̲̻͓̝̰̔͊̓̾̆̐̈̈́͐̂͐̀̅̀̾͂̆̔́̆͂̕͜͝͠͝ự̴̢̡̢͔̺̬̺̳̲̭̞̞̬̤̫̥̮͉̭͇͌̿̋̇͑̏̿̀̑͆̈́̋̍̈́̌̑͛̒͒̐̈́̑͗̊̓̐̓̐̈̈̿͝r̴̺͖͉͈͈̞̳̠͍͕̳̤̤͑͂̉̀̄͒͊̇̀̿̏̈́̓́͌͗̄̊̀͜͠ͅn̶̨̛͖̬̹̥̱͖͎̲͓͈̽͗́͐̈́͗̎̍̍̎̍̐̀̆͊̽̆͑̔̒̑̿̐̿͋̃ ̴̢͔͓͙͎̭̠͖͖̖̪̟͙͖̰͕̟͇͚̭̩̖͓͇̮̼̈́̽͆͒́̄́̚͜ͅt̷̨̡̨̛̟͚̳̞̘̭͕̳͓͔̱̝͒͐̑̐̉͌̑̋̎͑̒͗̓̀̃̉̓̆̈́̚̚͜͝͝͠͝ȏ̸̧̢͔̠̤̹̭̺͚̬̰̗͉͉̬̣̬͍̼̗͌̈́̽́͝ͅͅ?̷̡̘̗̙̳͚̙̳́̎͒̑̃̈́̕ͅ
    ̴̧̬̭͚͍͑̍͌͌̒͋́͊̊̌͗̒͘N̵̞̔̐̀̑ơ̶̧̨̝̗̪̣̙̭̩̝̯̱̺̣̞̻̮̰̼̯̠͓̙̗͕͕̬̬̱̲̖̇͊̆̎̑ͅt̸̡̢̧̩̞̙͉̞̞͕̣̜̣͎͖̻̩̻̥͔̥̹͖̦̹̟̅͌̓͗́͗̽̉͘͜͝͝ͅͅh̷̢̨̝̬̗͙̝͕̬̯̙̞̹̲̹̳̼̗͓̟̲̩͈͓̐́̈́̈́͐̾́̿̈́̍̈͗̂̈́̈͂̇͐̎̾͂̒̏̚̚͝͝ǐ̴̖͇̲͎̘̺̖̆̇͆̉ṇ̸̢̨̧̨͈̼̟̳̥̱͎̩̝͔̳̹͔̰͇̘̯̜̝̮͚͈͔̦͆̔͋͛̈͠ͅͅͅ'̵̢̡̛̛͕̳̩̟̳̝̠̥͕̼̝̰̣̳̹͈̘̖̣̣̳͙̠̱͒͐̂͛͗̈͋̈̊̾̀̔́̂̇̉̐͗̆̓̇̅͂̓̈̾́̔͆̕͜͜͝͝͝ͅͅ ̸̧̧̢̧̩͈͎̺̞̩̣̗̣̱͕̥͕̉̈́̔͊̀̓͗͐̉̈́̈͑̓̔͒̆̎̐̈́̋̈́͋̀͑̅͛̄͌̈́̋̚͝͝͝ͅụ̴̡̳͚̜̮̼͉̺̯͎̙̌̈́̒͜n̴̢̛͎̹̦͈͙̮̺̺͙͉͇̱̳̙̪͕̪̔̂̔͗͌͑̍͌̈́̑͂̐͛̓̆̋͋̀̂̈́͋̕̕̕̕͜w̴̜̗̲̦̝̬̏̊̈́̇͌̀͗͒̀̂͒̅̿͊͌͑̈́̔͋͑́͐̿̐̑̄́̚͘͠͝͝͝͝ͅa̷̢̨̮͍̣̦̫̬̲͔͉̳͚̪̠͓͈̹̬̞̯̤̜͈͔͚͉̰͕̹̙̖̱̘͆̎̌̉͛̾ͅņ̴̧̩̣͉͔̥̗̼̼̙̣̗͎͇̞̬̣̼̙̥̰̲̠̱̘̠̻̝̦͋͂͘͜ͅt̶͔̭͓̼̦͍͖͑͑̏͗̈́̾͐̄̈͗͌̀͐̏́͊̆͘̚͜ë̶̡̨̤̺̜̪̟̻͓͈̫̺͓͖̜̗̞͔̖͍̮͔̹̭̖̭͓͙͙̫̄̊̽͑̀͒̏̒̃͆̆̏̐̂͜͝͝ͅd̸̨̖̪̫̥̜̜̟̼͓͓͎͎͍̦̦̻̫̝̞͚͍̲̫͉͂̆̆̂͑͒̂͐̑̐͐̈́̓̌̂̑͛͘͝ͅͅ
    ̸̘̞̳̰̘̟̖͚͉͈̪͉̺̘̦̭̬̬͙̟̣̗̮͕͓̺͆͜Ă̸̡̛̖̲̫͉̠͎̠̝̥̠̹̜͓͈̟͉̽̋̌̉̌̌́͛̊̓͊̋̅̀̇̽̏̿͆͋̊̅̍͌̕̕͘͜͝͠͝͠f̷̹̩̪͎͇̜̥͕͈͕͖̖̥͍̙̪̬̣̯͕͔̗͙̥́͜ͅţ̸̢̧̻̰̮̥͚̦̩̜̹̮͓̼̺̫͇͚̲̠̟̞̝̟̬̻̩̣͓̏̃̇͐̋͌̈͆̄͆ͅẹ̴̡̢̢̢̧͙͕̜̬̗̭̗̻̣̺͖͈̦͓̱̰̘͚͎̲̘̭̪̜͉͂͗̎͐̐̆͜͜͝r̴̢̨̡͓̖̹̣̯͓̯͈͚͖̦͔̬̠̙̝̤̳͈͍̱͙̝̻͕͍̩̈́̈̅̀̓̽̀͜͠ ̴̨̢̹̰̻̻̱͕̯̙̰̩̭͓̰̮͈͕͇̼̟̌͋͝a̵̢̧̛̝̤͍̗̝̜̥̜̠͔͔̞̱̭̤̼͉̻͛̐̔̋́̍́̆̾̓̅̋̂̋̋̀̋̿̔͌̿̔́̑͘̕͝͝͝l̷̨̡̯͓̥̰̠̠̜̣̮̺̼̬̻͖̻̥̲̈́͒̽ͅl̸̢̳͍̪̜̦̻̦̯̟̱̲̼̗͇͉̳̼̗̥̱͓̳̻̤̹̟̺̗͊̌́͂̇̽͂̆̂̆̃̚̕͝,̶̛̙̝̭̬̙͎̼̤͈̩̫̱̝̯̪̗͈͆͊́̈́̆̏͂̄̌̉͐͂͐̕͠ ̸̡̱͈̗̮̭͍̯̟͎͙̩̩͓͖͍͇̣͇̟͚̤̗͆̈́͜͜͜ͅw̶̧̢͍͙͉̤̺͕͕̘̫̦͕̩̬̮̖̺͇̓ͅḥ̸̛̤̮̪̲̩̟͈͙̣̩͔͙̫̭̭̈́̅͑̂̌̋̓̓̆̀͊̈̿̆̾̀͐̕̕͝ǫ̸̢̛̛͍̠̠͓̣͓͕̦̣̹̱͚̙̗͔̝̥̰̬̮̙̼̭̠̳͓̼̓͗̌͐͐̇͂̃̃̾̇̚͜͜͜͝ ̷̮̦̤͖̯̺̒̈́͛̂̍͝c̵̣̼̹̪̺̺̝͕͉͒͐̊͒̄̏̐̎̄̈͊̎̈́̑͑̐̔̃͗̇̑̍͛̊́̍̓̓̈́́̕̕͠ą̸̢̳̪̦̼͈̠̱͙̻̼̼̬̳̱̹̺͎͖̱̭̩̘͓͓͓̳̆̓̑̅̃͗̇̽̑̇̽͒́̒̉͛́̕ͅͅͅͅn̴̡̬̟̻͇͕͔̿̇̎̀͂̎̔̀́̎̀̅̿̇̿̾͒̀̃́͘͠͝ͅ ̸̧̨̰̠͈̳̠͈̼͎̣̗̯̣͙͕̠̬͑̉ͅͅÌ̸̛̪̥̣̞̜͙͐̈́̈́̀̔͘͘͜͝ͅ ̴̧̡̺̙̜̬͚̱͈̱̙̭̮͑ť̵̡̧̧̨̠̦̲͍̖͖̤̖̫̦͚̯̹̪̫̖̞̣u̵̡̧̪̰͈̰̬͈̻̣̯̤̗͍̤̳̥̜̯̰͖̜̳̠͔͒̈̐̀͒͛̄̊̔̂͌̀̊̑̀͂̃͆̋̄̿͑̈̈́͒̚̕̚͘͜͝ͅṛ̶͎̤̬̤͓͚͇̤̥̬͖͔̘͖̞͇̠͚̖͛̓̂͒̈͗̔̾̄̒̄͋͌̐̆͒̃̾̀̌̌̿͗̿̅̋͐̈́͛̋̏̉̀͜͝͠n̵̡̢̛̦̩̜͎̗̣̭̱̮̣͉͎̥̱͍͙̲͍̖̊̋̓͐̐̾͆͂̇́͌͆̋̆̂̋͊͒̈́̉̄̆̃͑̊̌̃́̕̕͜ ̴̛͓̀͛́̒̈̋͋͊́̄̈́̆̐͗̓͂͘ţ̸̧̢̛͔̻͉̯̫̗͓͈̬̞̩̠̭̠̳̳̲̦̌̋͋̐̀̽̈́̃̇̈́̈́̔͐̓͋̔̑͒̋̐̇̇̊́̓̕̚͝͠ͅǫ̵̡̨̮̟͉̗͍̙͎̣͕͔̪͉͚̤͇̜̮̟͚̰̰̪̖͐͘͜͝ͅ?̸̨̣͖̼̺̦̠͈͙͈̱͈͉͎͂͗͑͆̈̑͆̀̊͐̓͂͋̏̅̌̉͂̆͆̎̋̕̕͜͜͝͠`;
    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
}
window.addEventListener('beforeunload', beforeLeave)
return () => {
  window.removeEventListener('beforeunload', beforeLeave)
}

  }, []);

    return (
        <>
        <Seo templateTitle='Suprize Box' description={`You've found me ;)`} />
        <div ref={parentRef} className="w-screen grid
        place-items-center h-screen fixed z-[999999] bg-red-400
        overflow-hidden" allowFullScreen>
            {!open && <button className='btn w-auto h-14 rounded-md
            ' onClick={() => setOpen(true)}>
            Open your mystery badge box!
            </button>}
            {open && (
                <video src="/video.mp4" style={{
                    width: "100vw",
                    height: "100vh",
                    objectFit: "cover",
                }} autoPlay controls={false} loop></video>
            )}
            </div>
            </>
    );
}

export default SurprisePage;