<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
  <meta name="description" content="Website Resmi SMK Teratai Putih Global 3 Bekasi. Sekolah Menengah Kejuruan Unggulan TJKT, AKL, MPLB, dan Axioo Class Program dengan 4 Lab Komputer Resmi.">
  <meta name="keywords" content="SMK Teratai Putih Global 3 Bekasi, TJKT, AKL, MPLB, Axioo Class, Sekolah Bekasi, Vokasi IT">
  
  <!-- CSS Stylesheet -->
  <link rel="stylesheet" href="/css/style.css">
  <!-- Quill content styles for article rendering -->
  <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
  <style>
    /* Override Quill border when used for display-only */
    .ql-snow.ql-container { border: none !important; }
    .ql-editor { padding: 0 !important; }
    .ql-editor p { margin-bottom: 1rem; }
    .ql-editor h1, .ql-editor h2, .ql-editor h3 { color: var(--primary-navy); margin: 1.5rem 0 0.75rem; }
    .ql-editor ul, .ql-editor ol { padding-left: 1.5rem; margin-bottom: 1rem; }
    .ql-editor blockquote { border-left: 4px solid var(--accent-gold); padding-left: 1rem; color: var(--text-muted); font-style: italic; }
  </style>
</head>
<body>

  <!-- Single Row Header Bar -->
  <header class="header">
    <div class="navbar-wrapper">
      <div class="container-header">
        <nav class="navbar">
          <a href="/" class="nav-brand">
            <div class="school-logo <%= (settings.images && settings.images.sekolah_logo) ? 'has-image' : '' %>">
              <% if (settings.images && settings.images.sekolah_logo) { %>
                <img src="<%= settings.images.sekolah_logo %>" alt="Logo Sekolah" style="height: 100%; width: 100%; object-fit: contain; transform: scale(1.2);">
              <% } else { %>
                <i class="fa-solid fa-graduation-cap"></i>
              <% } %>
            </div>
            <div class="brand-text">
              <h1>SMK TERATAI PUTIH GLOBAL 3</h1>
              <p>KOTA BEKASI - VOCATIONAL EXCELLENCE</p>
            </div>
          </a>

          <div class="mobile-toggle" id="mobileToggle">
            <i class="fa-solid fa-bars"></i>
          </div>

          <ul class="nav-menu" id="navMenu">
            <li class="nav-item">
              <a href="/" class="nav-link <%= currentPage === 'beranda' ? 'active' : '' %>"><%= t.menu.home %></a>
            </li>

            <li class="nav-item dropdown">
              <a href="/profil" class="nav-link <%= currentPage === 'profil' ? 'active' : '' %>">
                <%= t.menu.profil %> <i class="fa-solid fa-caret-down dropdown-arrow"></i>
              </a>
              <ul class="dropdown-menu">
                <li><a href="/profil#sambutan"><i class="fa-solid fa-user-tie"></i> <%= t.menu.profil_sambutan %></a></li>
                <li><a href="/profil#visi-misi"><i class="fa-solid fa-bullseye"></i> <%= t.menu.profil_visi_misi %></a></li>
                <li><a href="/profil#sejarah"><i class="fa-solid fa-landmark"></i> <%= t.menu.profil_sejarah %></a></li>
              </ul>
            </li>

            <li class="nav-item dropdown">
              <a href="/jurusan" class="nav-link <%= currentPage === 'jurusan' ? 'active' : '' %>">
                <%= t.menu.jurusan %> <i class="fa-solid fa-caret-down dropdown-arrow"></i>
              </a>
              <ul class="dropdown-menu">
                <li><a href="/jurusan#axioo-class"><i class="fa-solid fa-star text-gold"></i> <%= t.menu.jurusan_axioo %></a></li>
                <li><a href="/jurusan#tjkt"><i class="fa-solid fa-network-wired"></i> <%= t.menu.jurusan_tjkt %></a></li>
                <li><a href="/jurusan#akl"><i class="fa-solid fa-calculator"></i> <%= t.menu.jurusan_akl %></a></li>
                <li><a href="/jurusan#mplb"><i class="fa-solid fa-briefcase"></i> <%= t.menu.jurusan_mplb %></a></li>
              </ul>
            </li>

            <li class="nav-item dropdown">
              <a href="/fasilitas-lab" class="nav-link <%= currentPage === 'fasilitas-lab' ? 'active' : '' %>">
                <%= t.menu.fasilitas_lab %> <i class="fa-solid fa-caret-down dropdown-arrow"></i>
              </a>
              <ul class="dropdown-menu">
                <li><a href="/fasilitas-lab?lab=lab-tjkt"><i class="fa-solid fa-server"></i> <%= t.menu.lab_tjkt %></a></li>
                <li><a href="/fasilitas-lab?lab=lab-axioo"><i class="fa-solid fa-microchip"></i> <%= t.menu.lab_axioo %></a></li>
                <li><a href="/fasilitas-lab?lab=lab-akl"><i class="fa-solid fa-desktop"></i> <%= t.menu.lab_akl %></a></li>
                <li><a href="/fasilitas-lab?lab=lab-mplb"><i class="fa-solid fa-building-user"></i> <%= t.menu.lab_mplb %></a></li>
              </ul>
            </li>

            <li class="nav-item dropdown">
              <a href="/berita" class="nav-link <%= currentPage === 'berita' ? 'active' : '' %>">
                <%= t.menu.berita %> <i class="fa-solid fa-caret-down dropdown-arrow"></i>
              </a>
              <ul class="dropdown-menu">
                <li><a href="/berita?category=akademik"><i class="fa-solid fa-graduation-cap"></i> <%= t.menu.berita_akademik %></a></li>
                <li><a href="/berita?category=prestasi"><i class="fa-solid fa-trophy text-gold"></i> <%= t.menu.berita_prestasi %></a></li>
                <li><a href="/berita?category=ekstrakurikuler"><i class="fa-solid fa-users"></i> <%= t.menu.berita_ekskul %></a></li>
                <li><a href="/berita?category=kegiatan"><i class="fa-solid fa-calendar-days"></i> <%= t.menu.berita_kegiatan %></a></li>
              </ul>
            </li>

            <li class="nav-item dropdown">
              <a href="/ppdb" class="nav-link <%= currentPage === 'ppdb' ? 'active' : '' %>">
                <%= t.menu.ppdb %> <i class="fa-solid fa-caret-down dropdown-arrow"></i>
              </a>
              <ul class="dropdown-menu">
                <li><a href="/ppdb"><i class="fa-solid fa-file-pen"></i> <%= t.menu.ppdb_form %></a></li>
                <li><a href="/download/brosur"><i class="fa-solid fa-file-pdf"></i> <%= t.menu.ppdb_brosur %></a></li>
              </ul>
            </li>

            <li class="nav-item">
              <a href="/kontak" class="nav-link <%= currentPage === 'kontak' ? 'active' : '' %>"><%= t.menu.kontak %></a>
            </li>

            <li class="nav-item lang-switch" style="margin-left: 1rem; display: flex; align-items: center;">
              <a href="/set-lang/id" class="<%= currentLang === 'id' ? 'active' : '' %>" style="padding: 0.2rem 0.5rem; text-decoration: none; color: <%= currentLang === 'id' ? 'var(--accent-gold)' : 'var(--text-light)' %>; font-weight: <%= currentLang === 'id' ? 'bold' : 'normal' %>;">ID</a>
              <span style="color: rgba(255,255,255,0.3);">|</span>
              <a href="/set-lang/en" class="<%= currentLang === 'en' ? 'active' : '' %>" style="padding: 0.2rem 0.5rem; text-decoration: none; color: <%= currentLang === 'en' ? 'var(--accent-gold)' : 'var(--text-light)' %>; font-weight: <%= currentLang === 'en' ? 'bold' : 'normal' %>;">EN</a>
            </li>

          </ul>
        </nav>
      </div>
    </div>
  </header>

