<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include('partials/head'); %>
  </head>
  <body>
    <div class="page-wrap">
      <header class="page-header"><%- include('partials/header'); %></header>
      
      <nav class="page-nav">
        <details id="nav-details">
          <summary>Menu</summary>
          <ul>
            <% if (typeof nav !== 'undefined' && nav.length) { %>
              <% for (let i = 0; i < nav.length; i++) { %>
                <li>
                  <a href="<%= nav[i].link %>" data-window="window-<%= nav[i].link === '/' ? 'home' : nav[i].link.replace('/', '') %>">
                    <%= nav[i].title %>
                  </a>
                </li>
              <% } %>
            <% } %>
          </ul>
        </details>
      </nav>

      <main class="desktop-workspace">

        <section class="retro-window" id="window-home">
          <div class="window-title-bar">
            <span class="window-title">📄 Welcome.exe</span>
            <button class="window-close-btn" data-close="window-home">X</button>
          </div>
          <div class="window-content">
            <article>
              <h2>Welcome to ryanbeck.io</h2>
              <p>I'm Ryan, a computer science graduate.</p>
              <p>Select an option from the menu to execute an application window.</p>
              <button class="submit-button" onclick="openWindow('window-social')">Get In Touch</button>
            </article>
          </div>
        </section>

        <section class="retro-window" id="window-about" style="display: none;">
          <div class="window-title-bar">
            <span class="window-title">📄 About.exe</span>
            <button class="window-close-btn" data-close="window-about">X</button>
          </div>
          <div class="window-content">
            <article>
              <h2>About Me</h2>
              <p>Coming Soon.</p>
            </article>
          </div>
        </section>

        <section class="retro-window" id="window-projects" style="display: none;">
          <div class="window-title-bar">
            <span class="window-title">📄 Projects.exe</span>
            <button class="window-close-btn" data-close="window-projects">X</button>
          </div>
          <div class="window-content">
            <article>
              <h2>Projects</h2>
              <p>Projects coming soon...</p>
              <div id="equipment-container">
                    
                <div class="equipment-card">
                  <div class="equipment-card-inner">
                    <div class="equipment-card-front">
                      <div class="equipment-card-content">
                        <h3>Project One</h3>
                        <p>Description of Project One.</p>
                      </div>
                    </div>
                    <div class="equipment-card-back">
                      <h3>Tech Stack</h3>
                      <p>HTML, CSS, JavaScript</p>
                      <button class="submit-button">View Code</button>
                    </div>
                  </div>
                </div>

                <div class="equipment-card">
                  <div class="equipment-card-inner">
                    <div class="equipment-card-front">
                      <div class="equipment-card-content">
                        <h3>Project Two</h3>
                        <p>Description of Project Two.</p>
                      </div>
                    </div>
                    <div class="equipment-card-back">
                      <h3>Tech Stack</h3>
                      <p>Node.js, Express</p>
                      <button class="submit-button">View Code</button>
                    </div>
                  </div>
                </div>

              </div>
            </article>
          </div>
        </section>

        <section class="retro-window" id="window-photography" style="display: none;">
          <div class="window-title-bar">
            <span class="window-title">📄 Photography.exe</span>
            <button class="window-close-btn" data-close="window-photography">X</button>
          </div>
          <div class="window-content">
            <article id="photography-container">
              
              <template id="carousel-template">
                <%- include('partials/carousel'); %>
              </template>

              <p id="photography-loading-msg">Loading photo gallery...</p>

            </article>
          </div>
        </section>

        <section class="retro-window" id="window-hobbies" style="display: none;">
          <div class="window-title-bar">
            <span class="window-title">📄 Hobbies.exe</span>
            <button class="window-close-btn" data-close="window-hobbies">X</button>
          </div>
          <div class="window-content">
            <article>
              <h2>Hobbies</h2>
              <p>Personal hobbies and interests...</p>
            </article>
          </div>
        </section>

        <section class="retro-window" id="window-social" style="display: none;">
          <div class="window-title-bar">
            <span class="window-title">📄 Social.exe</span>
            <button class="window-close-btn" data-close="window-social">X</button>
          </div>
          <div class="window-content">
            <article>
                <h2>Connect With Me</h2>
                <p>Find me on other platforms or reach out directly.</p>
                <br>
                <button class="submit-button" onclick="window.location.href='https://github.com/RbeckUOW'">GitHub</button>
                <button class="submit-button" onclick="window.location.href='https://www.linkedin.com/in/ryan-beck-cs/'">LinkedIn</button>
                <button class="submit-button" onclick="window.location.href='mailto:ryan@ryanbeck.io'">Email Me</button>
            </article>
          </div>
        </section>

      </main>

      <footer class="page-footer"><%- include('partials/footer'); %></footer>
    </div>

    <script src="/js/menu.js"></script>
    <script src="/js/toggle-theme.js"></script>
    <script src="/js/desktop.js"></script>
  </body>
</html>