<%- 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-graduation-cap"></i> <%= t.jurusan_page.tag %></span>
    <h1 style="font-size: 2.75rem; color: #FFFFFF; margin-top: 0.5rem;"><%= t.jurusan_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.jurusan_page.desc %>
    </p>
  </div>
</section>

<!-- MAJORS LISTING DETAIL -->
<section class="section-padding">
  <div class="container">
    <% majors.forEach(major => { %>
      <div id="<%= major.id %>" style="background: var(--bg-card); border-radius: var(--radius-lg); padding: 3rem; margin-bottom: 3rem; box-shadow: var(--shadow-sm); border: <%= major.id === 'axioo-class' ? '2px solid var(--accent-gold)' : '1px solid var(--border-color)' %>;">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;">
          <div>
            <span class="major-badge <%= major.id === 'axioo-class' ? 'badge-axioo' : 'badge-reguler' %>">
              <%= currentLang === 'en' && major.badge_en ? major.badge_en : t.jurusan_page['major_' + major.id + '_badge'] %>
            </span>
            <h2 style="font-size: 2rem; color: var(--primary-navy); margin-top: 0.5rem;"><%= currentLang === 'en' && major.name_en ? major.name_en : t.jurusan_page['major_' + major.id + '_name'] %> (<%= major.shortName %>)</h2>
            <p style="font-size: 1.1rem; color: var(--accent-gold); font-weight: 600;"><%= currentLang === 'en' && major.tagline_en ? major.tagline_en : t.jurusan_page['major_' + major.id + '_tagline'] %></p>
          </div>
          <div>
            <a href="/fasilitas-lab?lab=<%= major.labRef %>" class="btn btn-outline-navy"><i class="fa-solid fa-desktop"></i> <%= t.jurusan_page.btn_lab %></a>
          </div>
        </div>

        <p style="color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem;"><%= currentLang === 'en' && major.description_en ? major.description_en : t.jurusan_page['major_' + major.id + '_desc'] %></p>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
          <div style="background: var(--bg-slate); padding: 1.5rem; border-radius: var(--radius-md); border-left: 4px solid var(--primary-navy);">
            <h3 style="font-size: 1.2rem; margin-bottom: 1rem; color: var(--primary-navy);"><i class="fa-solid fa-list-check text-gold"></i> <%= t.jurusan_page.kompetensi %></h3>
            <ul class="major-features" style="font-size: 0.95rem;">
              <% const compStr = currentLang === 'en' && major.competencies_en ? major.competencies_en.join('\n') : t.jurusan_page['major_' + major.id + '_comps']; %>
              <% const comps = compStr ? compStr.split('\n') : []; %>
              <% comps.forEach(comp => { %>
                <li style="margin-bottom: 0.6rem;"><i class="fa-solid fa-check text-green"></i> <%= comp.trim() %></li>
              <% }); %>
            </ul>
          </div>

          <div style="background: var(--bg-slate); padding: 1.5rem; border-radius: var(--radius-md); border-left: 4px solid var(--accent-gold);">
            <h3 style="font-size: 1.2rem; margin-bottom: 1rem; color: var(--primary-navy);"><i class="fa-solid fa-briefcase text-gold"></i> <%= t.jurusan_page.prospek %></h3>
            <ul class="major-features" style="font-size: 0.95rem;">
              <% const carStr = currentLang === 'en' && major.careerOptions_en ? major.careerOptions_en.join('\n') : t.jurusan_page['major_' + major.id + '_careers']; %>
              <% const careers = carStr ? carStr.split('\n') : []; %>
              <% careers.forEach(career => { %>
                <li style="margin-bottom: 0.6rem;"><i class="fa-solid fa-arrow-right text-gold"></i> <%= career.trim() %></li>
              <% }); %>
            </ul>
          </div>
        </div>

        <% if (major.id === 'axioo-class') { %>
          <div style="margin-top: 2rem; background: linear-gradient(135deg, #0A192F 0%, #0F2C59 100%); color: #FFFFFF; padding: 1.75rem; border-radius: var(--radius-md); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
            <div>
              <h4 style="font-size: 1.2rem; color: var(--accent-gold); margin-bottom: 0.3rem;"><i class="fa-solid fa-star"></i> <%= t.jurusan_page.axioo_special_title %></h4>
              <p style="font-size: 0.9rem; color: rgba(255,255,255,0.85);"><%= t.jurusan_page.axioo_special_desc %></p>
            </div>
            <a href="/ppdb" class="btn btn-primary"><i class="fa-solid fa-paper-plane"></i> <%= t.jurusan_page.axioo_btn %></a>
          </div>
        <% } %>
      </div>
    <% }); %>
  </div>
</section>

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