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

<!-- PAGE HEADER HERO -->
<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-landmark"></i> <%= t.profil_page.tag %></span>
    <h1 style="font-size: 2.75rem; color: #FFFFFF; margin-top: 0.5rem;"><%= t.profil_page.title %></h1>
    <p style="font-size: 1.1rem; color: rgba(255,255,255,0.8); max-width: 700px; margin: 0.75rem auto 0 auto;">
      <%= t.profil_page.desc %>
    </p>
  </div>
</section>

<!-- VISI MISI & SEJARAH -->
<section class="section-padding">
  <div class="container">
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem;">
      <div>
        <span class="section-tag"><i class="fa-solid fa-bullseye"></i> <%= t.profil_page.visi_misi_tag %></span>
        <h2 class="section-title"><%= t.profil_page.visi_title %></h2>
        <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: 1.1rem; font-weight: 600; color: var(--primary-navy); font-style: italic;">
            <%= t.profil_page.visi_text %>
          </p>
        </div>

        <h3 style="font-size: 1.3rem; margin-bottom: 0.75rem; color: var(--primary-navy);"><%= t.profil_page.misi_title %></h3>
        <ul class="major-features" style="font-size: 1rem;">
          <li style="margin-bottom: 0.75rem;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold);"></i> <%= t.profil_page.misi_1 %></li>
          <li style="margin-bottom: 0.75rem;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold);"></i> <%= t.profil_page.misi_2 %></li>
          <li style="margin-bottom: 0.75rem;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold);"></i> <%= t.profil_page.misi_3 %></li>
          <li style="margin-bottom: 0.75rem;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold);"></i> <%= t.profil_page.misi_4 %></li>
        </ul>
      </div>

      <div>
        <img src="<%= settings.images && settings.images.profil_gedung ? settings.images.profil_gedung : 'https://images.unsplash.com/photo-1541339907198-e08756dedf3f?auto=format&fit=crop&w=1000&q=80' %>" alt="Gedung SMK Teratai Putih 3 Bekasi" style="border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);">
      </div>
    </div>

    <!-- SEJARAH & SAMBUTAN KEPALA SEKOLAH -->
    <div style="background: var(--bg-card); padding: 3rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color);">
      <div style="display: grid; grid-template-columns: 200px 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: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem auto; border: 4px solid var(--accent-gold);">
          <h4 style="font-size: 1.1rem; color: var(--primary-navy);"><%= t.homepage.sambutan_kepsek_nama %></h4>
          <p style="font-size: 0.85rem; 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.5rem; margin-bottom: 1rem;"><%= t.homepage.sambutan_title %></h3>
          <p style="color: var(--text-muted); line-height: 1.7; margin-bottom: 1rem;">
            <%= t.homepage.sambutan_p1 %>
          </p>
          <p style="color: var(--text-muted); line-height: 1.7;">
            <%= t.homepage.sambutan_p2 %>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

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