<!DOCTYPE html>
<html lang="<%= lang %>">
<head>
<%- include('partials/head') %>
</head>
<body>
<%- include('partials/nav') %>

<%
// Simple inline icon set (stroke-based, currentColor via white on gradient bg)
const ICONS = {
  droplet: '<path d="M12 2s7 8 7 13a7 7 0 11-14 0c0-5 7-13 7-13z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
  truck: '<path d="M3 7h11v9H3zM14 11h4l3 3v2h-7z" stroke-width="2" stroke-linejoin="round" fill="none"/><circle cx="7" cy="18" r="1.6" stroke-width="2" fill="none"/><circle cx="17" cy="18" r="1.6" stroke-width="2" fill="none"/>',
  filter: '<path d="M4 5h16l-6 8v6l-4 2v-8L4 5z" stroke-width="2" stroke-linejoin="round" fill="none"/>',
  handshake: '<path d="M8 12l3 3 5-5M3 11l4-4h4l3 3M21 11l-4-4h-4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
  box: '<path d="M21 8l-9-5-9 5 9 5 9-5zM3 8v9l9 5 9-5V8M12 13v9" stroke-width="2" stroke-linejoin="round" fill="none"/>',
  book: '<path d="M4 4h9a3 3 0 013 3v13H7a3 3 0 01-3-3V4zM20 20V6" stroke-width="2" stroke-linejoin="round" fill="none"/>',
  shield: '<path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z" stroke-width="2" stroke-linejoin="round" fill="none"/>',
  leaf: '<path d="M20 4C10 4 4 10 4 18c8 0 14-6 14-14zM4 20c4-4 9-8 16-16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
  tag: '<path d="M20 12l-8 8-9-9V4h7l10 10z" stroke-width="2" stroke-linejoin="round" fill="none"/><circle cx="7.5" cy="7.5" r="1.3" fill="currentColor" stroke="none"/>',
  map: '<path d="M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2z" stroke-width="2" stroke-linejoin="round" fill="none"/><path d="M9 4v14M15 6v14" stroke-width="2"/>',
  users: '<circle cx="9" cy="8" r="3.2" stroke-width="2" fill="none"/><path d="M3 20c0-3.5 2.7-6 6-6s6 2.5 6 6M16 9a3 3 0 100-6M21 20c0-3-2-5.2-4.5-5.8" stroke-width="2" stroke-linecap="round" fill="none"/>',
  cpu: '<rect x="6" y="6" width="12" height="12" rx="2" stroke-width="2" fill="none"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3" stroke-width="2" stroke-linecap="round"/>',
  'check-circle': '<circle cx="12" cy="12" r="9" stroke-width="2" fill="none"/><path d="M8 12.5l2.5 2.5L16 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
};
function svgIcon(name){
  const inner = ICONS[name] || ICONS.leaf;
  return `<svg viewBox="0 0 24 24" fill="none">${inner}</svg>`;
}
%>

<!-- ============ HERO ============ -->
<section class="hero">
  <div class="container hero-grid">
    <div>
      <span class="eyebrow" style="color:#39B37E"><%= brand_name %> · <%= company_name %></span>
      <h1><%= tagline %></h1>
      <p class="lead"><%= hero_subtitle %></p>
      <div class="hero-cta">
        <a href="#contact" class="btn btn-primary"><%= cta_partner %></a>
        <a href="#about" class="btn btn-outline" style="color:#fff"><%= t.read_more %></a>
      </div>
      <div class="hero-meta">
        <div><b><%= coverage.length %>+</b> <%= t.coverage_word %></div>
        <div><b><%= clients.length %>+</b> <%= t.clients_word %></div>
        <div><b>100%</b> <%= lang === 'id' ? 'Ramah Lingkungan' : (lang === 'zh' ? '环保' : 'Eco-friendly') %></div>
      </div>
    </div>
    <div class="hero-visual">
      <div class="drip-wrap">
        <svg viewBox="0 0 300 340" width="100%">
          <defs>
            <linearGradient id="heroDrip" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#A6672B"/>
              <stop offset="100%" stop-color="#1E8A5F"/>
            </linearGradient>
          </defs>
          <path d="M150 10C150 10 40 170 40 235a110 110 0 00220 0C260 170 150 10 150 10z" fill="url(#heroDrip)" opacity="0.92"/>
          <circle cx="150" cy="245" r="55" fill="rgba(255,255,255,.14)"/>
        </svg>
        <p class="tagline-quote">"<%= tagline %>"</p>
      </div>
    </div>
  </div>
</section>
<div class="section-divider"></div>

<!-- ============ ABOUT ============ -->
<section class="about" id="about">
  <div class="container">
    <div class="about-grid">
      <div>
        <span class="eyebrow badge-eyebrow"><%= t.nav_about %></span>
        <h2><%= about_title %></h2>
        <% about_text.split('\n\n').forEach(function(p){ %>
          <p><%= p %></p>
        <% }) %>
        <p class="about-closing"><%= about_closing %></p>
      </div>
      <div class="vision-card">
        <span class="eyebrow" style="color:#39B37E"><%= vision_title %></span>
        <h3><%= vision_title %></h3>
        <blockquote>"<%= vision_text %>"</blockquote>
      </div>
    </div>
  </div>
</section>

<!-- ============ MISSION ============ -->
<section class="mission">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow" style="color:#39B37E"><%= t.mission_word %></span>
      <h2><%= mission_title %></h2>
    </div>
    <div class="mission-list">
      <% mission.forEach(function(m, i){ %>
        <div class="mission-item reveal">
          <span class="mission-num"><%= String(i+1).padStart(2,'0') %></span>
          <div>
            <h4><%= m.title %></h4>
            <p><%= m.desc %></p>
          </div>
        </div>
      <% }) %>
    </div>
  </div>
</section>

<!-- ============ SERVICES ============ -->
<section class="services" id="services">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow badge-eyebrow"><%= t.nav_services %></span>
      <h2><%= services_title %></h2>
    </div>
    <div class="grid grid-3">
      <% services.forEach(function(s){ %>
        <div class="card reveal">
          <div class="icon-wrap"><%- svgIcon(s.icon) %></div>
          <h3><%= s.title %></h3>
          <p><%= s.desc %></p>
        </div>
      <% }) %>
    </div>
  </div>
</section>

<!-- ============ WHY US ============ -->
<section class="why-us" id="why">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow badge-eyebrow"><%= t.nav_why %></span>
      <h2><%= why_title %></h2>
    </div>
    <div class="grid grid-3">
      <% whyUs.forEach(function(w){ %>
        <div class="card reveal">
          <div class="icon-wrap"><%- svgIcon(w.icon) %></div>
          <h3><%= w.title %></h3>
          <p><%= w.desc %></p>
        </div>
      <% }) %>
    </div>
  </div>
</section>

<!-- ============ STATS ============ -->
<% if (stats.length) { %>
<section class="stats">
  <div class="container">
    <div class="section-head center reveal">
      <h2><%= stats_title %></h2>
    </div>
    <div class="grid grid-4">
      <% stats.forEach(function(s){ %>
        <div class="stat-card reveal">
          <span class="num"><%= s.number %></span>
          <p><%= s.text %></p>
        </div>
      <% }) %>
    </div>
    <p class="stats-source" style="text-align:center"><%= t.stats_source %>: <%= stats_source %></p>
  </div>
</section>
<% } %>

<!-- ============ CLIENTS ============ -->
<% if (clients.length) { %>
<section class="clients">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow badge-eyebrow"><%= t.clients_word %></span>
      <h2><%= clients_title %></h2>
    </div>
    <div class="client-row reveal">
      <% clients.forEach(function(c){ %>
        <% if (c.logo_url) { %>
          <img src="<%= c.logo_url %>" alt="<%= c.name %>" style="height:44px;width:auto;object-fit:contain">
        <% } else { %>
          <span class="client-chip"><%= c.name %></span>
        <% } %>
      <% }) %>
    </div>
  </div>
</section>
<% } %>

<!-- ============ GALLERY ============ -->
<section class="gallery" id="gallery">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow badge-eyebrow"><%= t.nav_gallery %></span>
      <h2><%= gallery_title %></h2>
    </div>
    <% if (gallery.length) { %>
      <div class="gallery-grid">
        <% gallery.forEach(function(g){ %>
          <div class="gallery-item reveal">
            <img src="<%= g.image_url %>" alt="<%= g.caption || gallery_title %>" loading="lazy">
            <% if (g.caption) { %><span class="cap"><%= g.caption %></span><% } %>
          </div>
        <% }) %>
      </div>
    <% } else { %>
      <div class="gallery-empty">
        <%= lang === 'id' ? 'Belum ada foto. Tambahkan melalui Panel Admin.' : (lang === 'zh' ? '暂无照片,请通过管理后台添加。' : 'No photos yet. Add some from the Admin Panel.') %>
      </div>
    <% } %>
  </div>
</section>

<!-- ============ COVERAGE ============ -->
<section class="coverage">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow" style="color:#39B37E"><%= t.coverage_word %></span>
      <h2><%= coverage_title %></h2>
    </div>
    <div class="chip-row reveal">
      <% coverage.forEach(function(a){ %>
        <span class="area-chip"><span class="dot"></span><%= a %></span>
      <% }) %>
    </div>
  </div>
</section>

<!-- ============ CONTACT ============ -->
<section class="contact" id="contact">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow badge-eyebrow"><%= t.nav_contact %></span>
      <h2><%= contact_title %></h2>
    </div>
    <div class="contact-grid">
      <div class="reveal">
        <div class="info-block">
          <span class="label"><%= t.main_office %></span>
          <p><%= address %></p>
        </div>
        <div class="info-block">
          <span class="label"><%= t.branch_office %></span>
          <p><%= address_2 %></p>
        </div>
        <div class="info-block">
          <span class="label"><%= t.form_phone %></span>
          <p><%= phone_1 %> &nbsp;/&nbsp; <%= phone_2 %></p>
        </div>
        <div class="info-block">
          <span class="label">Email &amp; Web</span>
          <p><%= website %> · Instagram @<%= instagram %></p>
        </div>
      </div>
      <form class="contact-form reveal" id="contactForm">
        <div class="field">
          <label><%= t.form_name %></label>
          <input type="text" name="name" required>
        </div>
        <div class="field">
          <label><%= t.form_email %></label>
          <input type="email" name="email">
        </div>
        <div class="field">
          <label><%= t.form_phone %></label>
          <input type="text" name="phone">
        </div>
        <div class="field">
          <label><%= t.form_message %></label>
          <textarea name="message" required></textarea>
        </div>
        <button type="submit" class="btn btn-green" style="width:100%;justify-content:center"><%= t.form_send %></button>
        <p class="form-msg" id="formMsg"></p>
      </form>
    </div>
  </div>
</section>

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

<script>
  window.__PETROJEL_I18N__ = {
    success: <%- JSON.stringify(t.form_success) %>,
    error: <%- JSON.stringify(t.form_error) %>,
    lang: <%- JSON.stringify(lang) %>
  };
</script>
</body>
</html>
