<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VHSLiminality's Official Website!</title>
  <link rel="icon" type="image/x-icon" href="favicon.png">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

    body {
      font-family: 'Press Start 2P', cursive;
      background: url('background.jpg') no-repeat center center fixed;
      background-size: cover;
      color: black;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
      cursor: url('https://win98icons.alexmeub.com/icon/cursors/hand-pointer.cur'), auto;
    }

    .window {
      background: #c0c0c0;
      border: 2px solid #808080;
      width: 500px;
      border-radius: 12px;
      box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5);
      overflow: hidden;
    }

    .title-bar {
      background: linear-gradient(to bottom, #000080, #1e90ff);
      color: white;
      padding: 8px;
      font-weight: bold;
      text-align: center;
      border-bottom: 2px solid #808080;
    }

    .content {
      padding: 15px;
      text-align: center;
    }

    button {
      background: #bdb76b;
      border: 2px solid #808080;
      font-family: 'Press Start 2P', cursive;
      color: black;
      padding: 10px 20px;
      cursor: pointer;
      margin-top: 10px;
      border-radius: 8px;
    }

    button:hover {
      background: #37d4d1;
    }

    .latest-video {
      margin-top: 20px;
      background: white;
      padding: 10px;
      border: 1px solid #808080;
      box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
    }

    .latest-video h4 {
      line-height: 1.8;
      word-spacing: 3px;
    }

    .editmepls {
      line-height: 1.8;
      word-spacing: 3px;
    }

    .bottom-left {
      position: fixed;
      bottom: 20px;
      left: 20px;
    }

    .top-right {
      position: fixed;
      top: 20px;
      right: 20px;
      box-shadow: none !important;
    }

    .bottom-left button {
      background: #bdb76b;
      border: 2px solid #808080;
      font-family: 'Press Start 2P', cursive;
      color: black;
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 8px;
    }

    .top-right button {
      background: #00c975;
      border: 2px solid #8080806d;
      font-family: 'Press Start 2P', cursive;
      color: rgb(55, 90, 146);
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 8px;
      box-shadow: none !important;
    }

    .bottom-left button:hover {
      background: #d4af37;
    }

    .top-right button:hover {
      background: #00c975;
      box-shadow: none !important;
    }

    .top-right button:active {
      background: #00c975;
      box-shadow: none !important;
  }

    .form-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      text-align: center;
    }

    textarea {
      width: 400px;
      height: 100px;
      margin-bottom: 10px;
      font-family: 'Press Start 2P', cursive;
      border: 2px solid #808080;
      border-radius: 8px;
      padding: 10px;
      resize: none;
    }

    textarea:focus {
      outline: none;
      border-color: #d4af37;
    }

    button#sendButton {
      background: #bdb76b;
      border: 2px solid #808080;
      font-family: 'Press Start 2P', cursive;
      color: black;
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 8px;
    }

    button#sendButton:hover {
      background: #d4af37;
    }
  </style>
</head>
<body>
  <div class="window">
    <div class="title-bar">
      <span>WELCOME TO LIMINALITY!</span>
    </div>
    <div class="content">
      <div class="editmepls">
        <p>Welcome to the VHS Liminality experience!</p>
      </div>
      <button id="subscribe-button" onclick="subscribe()">Subscribe to the Channel!</button>
      <div class="latest-video">
        <h3>Latest Video:</h3>
        <div id="video-container">
          <p>Loading latest video...</p>
        </div>
      </div>
    </div>
  </div>

  <div class="bottom-left">
    <button id="suggestion-button" onclick="window.location.href='suggestions.html'">Send Me a Video Suggestion!</button>
  </div>

  <div class="top-right">
    <button id="thankyou-button" onclick="window.location.href='ThankYou.html'">CLICK HERE!</button>
  </div>

  <script>
    function subscribe() {
      window.open("https://www.youtube.com/@VHSLiminality?sub_confirmation=1", "_blank");
    }

    async function fetchLatestVideo() {
      const channelId = "UCt4DvmPLyjaB1mY9FbXrRCQ";
      const apiKey = "AIzaSyBlYgK-bT1o4VpWWzYTK4YpbjkQ6QDogQY";
      const apiURL = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&order=date&part=snippet&type=video&maxResults=1`;

      try {
        const response = await fetch(apiURL);
        const data = await response.json();
        const videoId = data.items[0].id.videoId;
        const videoTitle = data.items[0].snippet.title;

        document.getElementById("video-container").innerHTML = `
          <h4>${videoTitle}</h4>
          <iframe width="100%" height="250" 
            src="https://www.youtube.com/embed/${videoId}" 
            frameborder="0" allowfullscreen>
          </iframe>
        `;
      } catch (error) {
        document.getElementById("video-container").innerHTML = `<p>Error loading video.</p>`;
      }
    }

    fetchLatestVideo();
  </script>
</body>
</html>