<%- include('partials/header') %>

<!-- HERO BANNER -->
<section style="background: linear-gradient(135deg, var(--primary-navy-dark) 0%, var(--primary-navy) 100%); color: #FFFFFF; padding: 4rem 0 3rem 0;">
  <div class="container text-center">
    <span class="section-tag" style="background: rgba(255,255,255,0.1); color: var(--accent-gold);"><i class="fa-solid fa-desktop"></i> <%= t.lab_page.tag %></span>
    <h1 style="font-size: 2.75rem; color: #FFFFFF; margin-top: 0.5rem;"><%= t.lab_page.title %></h1>
    <p style="font-size: 1.1rem; color: rgba(255,255,255,0.8); max-width: 750px; margin: 0.75rem auto 0 auto;">
      <%= t.lab_page.desc %>
    </p>
  </div>
</section>

<!-- INTERACTIVE LAB FACILITY SHOWCASE -->
<section class="section-padding">
  <div class="container">
    <div class="lab-tabs" style="margin-bottom: 3.5rem;">
      <button class="lab-tab-btn <%= activeLabId === 'all' ? 'active' : '' %>" data-lab="all" style="padding: 0.85rem 1.75rem; font-size: 1rem;">
        <i class="fa-solid fa-list"></i> <%= t.lab_page.all_labs %>
      </button>
      <% labs.forEach(lab => { %>
        <button class="lab-tab-btn <%= lab.id === activeLabId ? 'active' : '' %>" data-lab="<%= lab.id %>" style="padding: 0.85rem 1.75rem; font-size: 1rem;">
          <i class="fa-solid fa-desktop"></i> <%= currentLang === 'en' && lab.name_en ? lab.name_en : t.lab_page['lab_' + lab.id + '_name'] %>
        </button>
      <% }); %>
    </div>

    <div>
      <% labs.forEach(lab => { %>
        <div class="lab-detail-container" id="<%= lab.id %>" style="display: <%= activeLabId === 'all' || lab.id === activeLabId ? 'grid' : 'none' %>; grid-template-columns: 1fr 1fr; gap: 3rem; background: var(--bg-card); padding: 3rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border-color); margin-bottom: 3rem;">
          <div>
            <div style="position: relative; border-radius: var(--radius-md); overflow: hidden; height: 360px; box-shadow: var(--shadow-sm);">
              <% const imgKey = lab.id.replace('-', '_'); %>
              <img src="<%= settings.images && settings.images[imgKey] ? settings.images[imgKey] : lab.image %>" alt="<%= currentLang === 'en' && lab.name_en ? lab.name_en : t.lab_page['lab_' + lab.id + '_name'] %>" style="width: 100%; height: 100%; object-fit: cover;">
              <span class="news-category-badge" style="top: 1rem; left: 1rem; background: var(--accent-gold); color: #FFFFFF;"><%= currentLang === 'en' && lab.badge_en ? lab.badge_en : t.lab_page['lab_' + lab.id + '_badge'] %></span>
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
              <div style="background: var(--bg-slate); padding: 1rem; border-radius: 8px; text-align: center;">
                <i class="fa-solid fa-users text-navy" style="font-size: 1.5rem; margin-bottom: 0.3rem;"></i>
                <h4 style="font-size: 0.9rem;"><%= t.lab_page.capacity_title %></h4>
                <p style="font-size: 0.8rem; color: var(--text-muted);"><%= t.lab_page['lab_' + lab.id + '_capacity'] %></p>
              </div>

              <div style="background: var(--bg-slate); padding: 1rem; border-radius: 8px; text-align: center;">
                <i class="fa-solid fa-wifi text-green" style="font-size: 1.5rem; margin-bottom: 0.3rem;"></i>
                <h4 style="font-size: 0.9rem;"><%= t.lab_page.conn_title %></h4>
                <p style="font-size: 0.8rem; color: var(--text-muted);"><%= t.lab_page.conn_desc %></p>
              </div>
            </div>
          </div>

          <div>
            <h2 style="font-size: 2rem; color: var(--primary-navy); margin-bottom: 0.25rem;"><%= currentLang === 'en' && lab.name_en ? lab.name_en : t.lab_page['lab_' + lab.id + '_name'] %></h2>
            <p style="font-size: 1.1rem; color: var(--accent-gold); font-weight: 600; margin-bottom: 1.25rem;"><%= currentLang === 'en' && lab.subtitle_en ? lab.subtitle_en : t.lab_page['lab_' + lab.id + '_subtitle'] %></p>
            
            <p style="color: var(--text-muted); font-size: 1rem; line-height: 1.7; margin-bottom: 2rem;"><%= currentLang === 'en' && lab.description_en ? lab.description_en : t.lab_page['lab_' + lab.id + '_desc'] %></p>

            <div style="margin-bottom: 1.5rem;">
              <h3 style="font-size: 1.15rem; color: var(--primary-navy); margin-bottom: 0.75rem;"><i class="fa-solid fa-microchip text-gold"></i> <%= t.lab_page.hw_title %></h3>
              <ul class="major-features">
                <% const hwStr = currentLang === 'en' && lab.hardwareSpecs_en ? lab.hardwareSpecs_en.join('\n') : t.lab_page['lab_' + lab.id + '_hw']; %>
                <% const hws = hwStr ? hwStr.split('\n') : []; %>
                <% hws.forEach(hw => { %>
                  <li><i class="fa-solid fa-check text-green"></i> <%= hw.trim() %></li>
                <% }); %>
              </ul>
            </div>

            <div>
              <h3 style="font-size: 1.15rem; color: var(--primary-navy); margin-bottom: 0.75rem;"><i class="fa-solid fa-layer-group text-gold"></i> <%= t.lab_page.sw_title %></h3>
              <ul class="major-features">
                <% const swStr = currentLang === 'en' && lab.softwareSpecs_en ? lab.softwareSpecs_en.join('\n') : t.lab_page['lab_' + lab.id + '_sw']; %>
                <% const sws = swStr ? swStr.split('\n') : []; %>
                <% sws.forEach(sw => { %>
                  <li><i class="fa-solid fa-code text-navy"></i> <%= sw.trim() %></li>
                <% }); %>
              </ul>
            </div>
          </div>
        </div>
      <% }); %>
    </div>
  </div>
</section>

<script src="/js/lab-viewer.js"></script>

<%- include('partials/footer') %>
