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

<!-- HERO BANNER SECTION -->
<section class="hero">
  <div class="container hero-grid">
    <div class="hero-text-content">
      <div class="hero-badge">
        <i class="fa-solid fa-award"></i> <%= t.homepage.hero_badge %>
      </div>
      <h1 class="hero-title"><%= t.homepage.hero_title_1 %> <span><%= t.homepage.hero_title_span %></span></h1>
      <p class="hero-desc">
        <%= t.homepage.hero_desc %>
      </p>
      <div class="hero-actions">
        <a href="/ppdb" class="btn btn-primary"><i class="fa-solid fa-file-pen"></i> <%= t.homepage.hero_btn_ppdb %></a>
        <a href="/download/brosur" class="btn btn-outline-white"><i class="fa-solid fa-file-pdf"></i> <%= t.homepage.hero_btn_brosur %></a>
      </div>
    </div>

    <div class="hero-slider-card">
      <img id="heroSliderImg" src="<%= settings.images && settings.images.hero_slider_1 ? settings.images.hero_slider_1 : 'https://images.unsplash.com/photo-1524178232363-1fb2b075b655?auto=format&fit=crop&w=1000&q=80' %>" alt="Kegiatan Lab SMK Teratai Putih 3 Bekasi" class="slider-image">
      <div class="slider-overlay">
        <p id="heroSliderCap" class="slider-caption"><%= t.homepage.hero_slider_1_cap %></p>
      </div>
    </div>
  </div>

  <script>
    window.heroSliders = [
      {
        url: "<%= settings.images && settings.images.hero_slider_1 ? settings.images.hero_slider_1 : 'https://images.unsplash.com/photo-1524178232363-1fb2b075b655?auto=format&fit=crop&w=1000&q=80' %>",
        caption: "<%= t.homepage.hero_slider_1_cap || '' %>"
      },
      {
        url: "<%= settings.images && settings.images.hero_slider_2 ? settings.images.hero_slider_2 : 'https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=1000&q=80' %>",
        caption: "<%= t.homepage.hero_slider_2_cap || '' %>"
      },
      {
        url: "<%= settings.images && settings.images.hero_slider_3 ? settings.images.hero_slider_3 : 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=1000&q=80' %>",
        caption: "<%= t.homepage.hero_slider_3_cap || '' %>"
      },
      {
        url: "<%= settings.images && settings.images.hero_slider_4 ? settings.images.hero_slider_4 : 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1000&q=80' %>",
        caption: "<%= t.homepage.hero_slider_4_cap || '' %>"
      }
    ].filter(s => s.caption.trim() !== '');
  </script>
</section>

<!-- STATISTICS SECTION -->
<section class="stats-section">
  <div class="container">
    <div class="stats-grid">
      <div class="stat-item">
        <div class="stat-icon"><i class="fa-solid fa-users-gear"></i></div>
        <div class="stat-info">
          <h3 class="stat-counter" data-target="<%= t.homepage.stats_students_val %>"><%= t.homepage.stats_students_val %></h3>
          <p><%= t.homepage.stats_students %></p>
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-icon"><i class="fa-solid fa-chalkboard-user"></i></div>
        <div class="stat-info">
          <h3 class="stat-counter" data-target="<%= t.homepage.stats_teachers_val %>"><%= t.homepage.stats_teachers_val %></h3>
          <p><%= t.homepage.stats_teachers %></p>
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-icon"><i class="fa-solid fa-desktop"></i></div>
        <div class="stat-info">
          <h3 class="stat-counter" data-target="<%= t.homepage.stats_labs_val %>"><%= t.homepage.stats_labs_val %></h3>
          <p><%= t.homepage.stats_labs %></p>
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-icon"><i class="fa-solid fa-handshake-simple"></i></div>
        <div class="stat-info">
          <h3 class="stat-counter" data-target="<%= t.homepage.stats_partners_val %>"><%= t.homepage.stats_partners_val %></h3>
          <p><%= t.homepage.stats_partners %></p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- PROFIL SEKOLAH SECTION -->
<section class="section-padding" id="profil-sekolah">
  <div class="container">
    <div class="text-center" style="margin-bottom: 3rem;">
      <span class="section-tag"><i class="fa-solid fa-landmark"></i> <%= t.profil_page.tag %></span>
      <h2 class="section-title"><%= t.profil_page.title %></h2>
      <p class="section-desc"><%= t.profil_page.desc %></p>
    </div>

    <!-- Visi Misi + Gambar -->
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 3rem;">
      <div>
        <span class="section-tag"><i class="fa-solid fa-bullseye"></i> <%= t.profil_page.visi_misi_tag %></span>
        <h3 class="section-title" style="font-size: 1.6rem; margin-top: 0.75rem;"><%= t.profil_page.visi_title %></h3>
        <div style="background: rgba(15, 44, 89, 0.05); padding: 1.5rem; border-left: 4px solid var(--primary-navy); border-radius: 8px; margin-bottom: 1.5rem;">
          <p style="font-size: 1rem; font-weight: 600; color: var(--primary-navy); font-style: italic; line-height: 1.7;">
            <%= t.profil_page.visi_text %>
          </p>
        </div>
        <h4 style="font-size: 1.1rem; margin-bottom: 0.75rem; color: var(--primary-navy);"><%= t.profil_page.misi_title %></h4>
        <ul class="major-features" style="font-size: 0.95rem;">
          <li style="margin-bottom: 0.65rem;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold);"></i> <%= t.profil_page.misi_1 %></li>
          <li style="margin-bottom: 0.65rem;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold);"></i> <%= t.profil_page.misi_2 %></li>
          <li style="margin-bottom: 0.65rem;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold);"></i> <%= t.profil_page.misi_3 %></li>
          <li style="margin-bottom: 0.65rem;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold);"></i> <%= t.profil_page.misi_4 %></li>
        </ul>
        <a href="/profil" class="btn btn-outline-navy" style="margin-top: 1.5rem;"><i class="fa-solid fa-arrow-right"></i> <%= t.homepage.profil_btn %></a>
      </div>

      <div>
        <img src="<%= settings.images && settings.images.profil_gedung ? settings.images.profil_gedung : 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1000&q=80' %>" alt="Gedung SMK Teratai Putih 3 Bekasi" style="width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); object-fit: cover; max-height: 420px;">
      </div>
    </div>

    <!-- Sambutan Kepala Sekolah -->
    <div style="background: var(--bg-card); padding: 2.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color);">
      <div style="display: grid; grid-template-columns: 180px 1fr; gap: 2.5rem; align-items: center;">
        <div class="text-center">
          <img src="<%= settings.images && settings.images.profil_kepsek ? settings.images.profil_kepsek : 'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80' %>" alt="Kepala Sekolah" style="width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem auto; border: 4px solid var(--accent-gold); display: block;">
          <h4 style="font-size: 1rem; color: var(--primary-navy);"><%= t.homepage.sambutan_kepsek_nama %></h4>
          <p style="font-size: 0.82rem; color: var(--text-muted);"><%= t.homepage.sambutan_kepsek %></p>
        </div>
        <div>
          <span class="section-tag"><i class="fa-solid fa-quote-left"></i> <%= t.homepage.sambutan_tag %></span>
          <h3 style="font-size: 1.4rem; margin: 0.75rem 0 1rem 0; color: var(--primary-navy);"><%= t.homepage.sambutan_title %></h3>
          <p style="color: var(--text-muted); line-height: 1.75; margin-bottom: 0.85rem;">
            <%= t.homepage.sambutan_p1 %>
          </p>
          <p style="color: var(--text-muted); line-height: 1.75;">
            <%= t.homepage.sambutan_p2 %>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- PROGRAM KEAHLIAN & KELAS INDUSTRI -->
<section class="section-padding" style="background: var(--bg-slate);">
  <div class="container">
    <div class="text-center">
      <span class="section-tag"><i class="fa-solid fa-book-open"></i> <%= t.jurusan_page.tag %></span>
      <h2 class="section-title"><%= t.jurusan_page.title %></h2>
      <p class="section-desc"><%= t.jurusan_page.desc %></p>
    </div>

    <div class="majors-grid">
      <% majors.forEach(major => { %>
        <div class="major-card <%= major.id === 'axioo-class' ? 'axioo-card' : '' %>">
          <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>
          <h3 class="major-title"><%= currentLang === 'en' && major.name_en ? major.name_en : t.jurusan_page['major_' + major.id + '_name'] %></h3>
          <p class="major-desc"><%= currentLang === 'en' && major.tagline_en ? major.tagline_en : t.jurusan_page['major_' + major.id + '_tagline'] %></p>
          
          <ul class="major-features">
            <% 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.slice(0, 3).forEach(comp => { %>
              <li><i class="fa-solid fa-circle-check"></i> <%= comp.trim() %></li>
            <% }); %>
          </ul>

          <a href="/jurusan#<%= major.id %>" class="btn <%= major.id === 'axioo-class' ? 'btn-primary' : 'btn-outline-navy' %>" style="margin-top: auto; width: 100%;">
            <%= t.homepage.jurusan_btn %> <i class="fa-solid fa-arrow-right"></i>
          </a>
        </div>
      <% }); %>
    </div>
  </div>
</section>

<!-- SHOWCASE FASILITAS 4 LAB KOMPUTER RESMI -->
<section class="section-padding lab-showcase-bg">
  <div class="container">
    <div class="text-center">
      <span class="section-tag" style="background: rgba(255,255,255,0.1); color: var(--accent-gold);"><i class="fa-solid fa-microchip"></i> <%= t.lab_page.tag %></span>
      <h2 class="section-title"><%= t.lab_page.title %></h2>
      <p class="section-desc" style="color: rgba(255,255,255,0.75);"><%= t.lab_page.desc %></p>
    </div>

    <div class="lab-tabs">
      <% labs.forEach((lab, index) => { %>
        <button class="lab-tab-btn <%= index === 0 ? 'active' : '' %>" data-lab="<%= lab.id %>">
          <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 class="lab-content-wrapper">
      <% labs.forEach((lab, index) => { %>
        <div class="lab-display-card lab-detail-container" id="<%= lab.id %>" style="display: <%= index === 0 ? 'grid' : 'none' %>;">
          <div class="lab-img-wrapper">
            <% const imgKey = lab.id.replace('-', '_'); %>
            <img src="<%= settings.images && settings.images[imgKey] ? settings.images[imgKey] : lab.image %>" alt="<%= lab.name %>">
          </div>
          <div class="lab-content">
            <div class="lab-title-group">
              <h3><%= currentLang === 'en' && lab.name_en ? lab.name_en : t.lab_page['lab_' + lab.id + '_name'] %></h3>
              <p><%= currentLang === 'en' && lab.subtitle_en ? lab.subtitle_en : t.lab_page['lab_' + lab.id + '_subtitle'] %> (<%= t.lab_page.cap %>: <%= t.lab_page['lab_' + lab.id + '_capacity'] %>)</p>
            </div>
            <p style="font-size: 0.95rem; color: rgba(255,255,255,0.85); line-height: 1.6;"><%= currentLang === 'en' && lab.description_en ? lab.description_en : t.lab_page['lab_' + lab.id + '_desc'] %></p>

            <div class="lab-spec-grid">
              <div class="spec-box">
                <h4><i class="fa-solid fa-server text-gold"></i> <%= t.lab_page.spec_hw %></h4>
                <ul>
                  <% 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>• <%= hw.trim() %></li>
                  <% }); %>
                </ul>
              </div>

              <div class="spec-box">
                <h4><i class="fa-solid fa-code text-gold"></i> <%= t.lab_page.spec_sw %></h4>
                <ul>
                  <% 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>• <%= sw.trim() %></li>
                  <% }); %>
                </ul>
              </div>
            </div>

            <div>
              <a href="/fasilitas-lab?lab=<%= lab.id %>" class="btn btn-primary"><i class="fa-solid fa-images"></i> <%= t.homepage.lab_btn %></a>
            </div>
          </div>
        </div>
      <% }); %>
    </div>
  </div>
</section>

<!-- GOOGLE MAPS REVIEWS SECTION -->
<section class="section-padding" style="background: var(--bg-slate);">
  <div class="container">
    <div class="text-center">
      <h2 class="section-title"><%= t.homepage.review_title %></h2>
      <p class="section-desc">
        <strong style="color: var(--primary-navy); font-size: 1.3rem;">4.4 / 5.0</strong> 
        <span style="color: var(--accent-gold); margin: 0 0.35rem;"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i></span>
        <span style="color: var(--text-muted); font-size: 0.95rem;"><%= t.homepage.review_desc %></span>
      </p>
    </div>

    <div class="testimonial-grid">
      <% testimonials.filter(item => item.rating === 5 && item.quote && item.quote.trim() !== '').forEach(item => { %>
        <a href="<%= item.reviewUrl || 'https://maps.app.goo.gl/17ndHiWWaSsjseUe7' %>" target="_blank" class="testimonial-card">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
            <div style="font-size: 0.9rem;">
              <% for(let i=1; i<=5; i++) { %>
                <i class="fa-solid fa-star text-gold" style="color: #F59E0B;"></i>
              <% } %>
            </div>
            <span style="font-size: 0.75rem; color: var(--text-light);"><i class="fa-brands fa-google" style="color: #4285F4;"></i> <%= item.timeAgo %></span>
          </div>

          <p class="testimonial-text">"<%= item.quote %>"</p>
          
          <div class="testimonial-author">
            <div class="author-avatar-initial" style="background-color: <%= item.bgColor %>;">
              <%= item.initial %>
            </div>
            <div class="author-info">
              <h4 style="display: flex; align-items: center; gap: 0.35rem;">
                <%= item.name %> <i class="fa-solid fa-circle-check" style="color: #4285F4; font-size: 0.85rem;" title="Google Verified Reviewer"></i>
              </h4>
              <p><%= item.role %></p>
            </div>
          </div>

          <div class="review-link-badge">
            <span><i class="fa-brands fa-google"></i> <%= t.homepage.review_btn %></span>
            <i class="fa-solid fa-arrow-up-right-from-square"></i>
          </div>
        </a>
      <% }); %>
    </div>
  </div>
</section>

<!-- BERITA TERBARU & AGENDA -->
<section class="section-padding">
  <div class="container">
    <div class="filter-bar" style="border: none; background: transparent; padding: 0; margin-bottom: 2rem;">
      <div>
        <span class="section-tag"><i class="fa-solid fa-newspaper"></i> <%= t.berita_page.tag %></span>
        <h2 class="section-title" style="margin-bottom: 0;"><%= t.berita_page.title %></h2>
      </div>
      <div>
        <a href="/berita" class="btn btn-outline-navy"><%= t.homepage.news_btn_all %> <i class="fa-solid fa-arrow-right"></i></a>
      </div>
    </div>

    <div class="news-grid">
      <% news.forEach(item => { %>
        <div class="news-card">
          <div class="news-img">
            <img src="<%= item.image %>" alt="<%= item.title %>">
            <span class="news-category-badge"><%= item.category %></span>
          </div>
          <div class="news-body">
            <div class="news-meta">
              <span><i class="fa-solid fa-calendar text-gold"></i> <%= item.date %></span>
              <span><i class="fa-solid fa-user text-gold"></i> <%= item.author %></span>
            </div>
            <h3 class="news-title"><%= currentLang === 'en' && item.title_en ? item.title_en : item.title %></h3>
            <p class="news-summary"><%= currentLang === 'en' && item.summary_en ? item.summary_en : item.summary %></p>
            <a href="/berita/<%= item.id %>" class="news-link"><%= t.homepage.news_btn_more %> <i class="fa-solid fa-arrow-right"></i></a>
          </div>
        </div>
      <% }); %>
    </div>
  </div>
</section>

<!-- PPDB QUICK ACTION BANNER -->
<section class="section-padding" style="padding-top: 0;">
  <div class="container">
    <div class="ppdb-cta-banner">
      <h2><%= t.homepage.cta_title %></h2>
      <p style="font-size: 1.1rem; max-width: 700px; margin: 0 auto 2rem auto; opacity: 0.95;">
        <%= t.homepage.cta_desc %>
      </p>
      <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
        <a href="/ppdb" class="btn btn-navy"><i class="fa-solid fa-paper-plane"></i> <%= t.homepage.cta_btn_ppdb %></a>
        <a href="/download/brosur" class="btn btn-outline-white"><i class="fa-solid fa-download"></i> <%= t.homepage.cta_btn_brosur %></a>
      </div>
    </div>
  </div>
</section>

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

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