<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Echoes Behind Closed Doors</title>
    <link rel="stylesheet" href="/css/styles.css" />

    <!-- favicons -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/png/apple-touch-icon.png"
    />
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/png/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/png/favicon-16x16.png"
    />
    <link rel="manifest" href="/site.webmanifest" />

    <!-- TODO: social share -->
  </head>
  <body>
    <header>
      <nav class="navbar bg-base-100">
        <!-- logo -->
        <div class="flex-1 flex gap-2">
          <img src="/png/logo-icon.png" alt="wirm logo" class="h-[2.5rem]" />
          <img
            src="/png/logo-wordmark.png"
            alt="wirm wordmark"
            class="h-[2.5rem]"
          />
        </div>

        <!-- menu items -->
        <div class="flex-none">
          <ul class="menu menu-horizontal px-1">
            <li><a href="/">About</a></li>
            <li>
              <details>
                <summary>Account</summary>
                <ul class="bg-base-100 rounded-t-none p-2">
                  <li id="button-auth-logIn"><a href="/login">Log In</a></li>
                  <li id="button-auth-signUp"><a href="/signup">Sign Up</a></li>
                  <li id="button-auth-logOut">
                    <a href="/profile?logOut=true">Log Out</a>
                  </li>
                  <li id="button-auth-profile">
                    <a href="/profile">Profile</a>
                  </li>
                </ul>
              </details>
            </li>
            <li><a href="/booth">Booth Management</a></li>
          </ul>
        </div>
      </nav>
    </header>

    <main>
      <!-- hero -->
      <section
        id="home-hero"
        class="hero min-h-[85vh] border-green-400 border-2"
        style="background-image: url(https://files.catbox.moe/o25s1k.JPG)"
      >
        <!-- daisyui bg overlay -->
        <div class="hero-overlay bg-opacity-60"></div>
        
        <!-- hero content -->
        <div
          class="hero-content w-full flex-col lg:flex-row flex-1 text-neutral-content border-yellow-400 border-2"
        >
          <!-- left side: game name and desc -->
          <div id="home-hero-left" class="flex-1 border-red-400 border-2">
            <h1 class="text-6xl font-bold">Echoes Behind Closed Doors</h1>
            <p class="py-6">
              Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
              quasi. In deleniti eaque aut repudiandae et a id nisi.
            </p>
          </div>

          <!-- right side: qr code (hidden when small enough) -->
          <div id="home-hero-right" class="flex-1 border-blue-400 border-2">
          </div>
        </div>
      </section>
    </main>

    <footer class="footer bg-neutral text-neutral-content p-10">
      <nav>
        <h6 class="footer-title">Legal</h6>
        <a class="link link-hover">Terms of use</a>
        <a class="link link-hover">Privacy policy</a>
        <a class="link link-hover">Cookie policy</a>
      </nav>
    </footer>

    <script
      type="application/javascript"
      src="/js/nayuki-qrcodegen-v1.8.0.js"
    ></script>
    <script type="application/javascript" src="/js/qrcode.js"></script>
    <script>
      // generate qr code from root url + /booth
      console.log(
        `generating qr code for '${window.location.origin}/booth.html'`
      );
      const qr = generateQrCode(window.location.origin + "/booth.html");
    </script>
  </body>
</html>