<!DOCTYPE html>
<html lang="<%= lang || 'id' %>">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= t('customer.pages.privacy.meta_title', 'Kebijakan Privasi') %> | <%= company %></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="manifest" href="/manifest.webmanifest">
  <meta name="theme-color" content="#0f172a">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <link rel="apple-touch-icon" href="/img/logo.png">
  <link rel="icon" href="/img/logo.png">
  <style>
    :root {
      --primary: #6366f1;
      --secondary: #3b82f6;
      --text-main: #f1f5f9;
      --text-muted: #cbd5e1;
      --bg: #0f172a;
      --panel: rgba(30, 41, 59, 0.92);
      --border: #334155;
    }

    body {
      background: radial-gradient(1200px 600px at 10% 0%, rgba(99, 102, 241, 0.22) 0%, rgba(15, 23, 42, 0) 60%),
        radial-gradient(900px 450px at 100% 0%, rgba(59, 130, 246, 0.18) 0%, rgba(15, 23, 42, 0) 55%),
        var(--bg);
      color: var(--text-main);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      line-height: 1.7;
      min-height: 100vh;
      padding-bottom: 80px;
      -webkit-tap-highlight-color: transparent;
    }

    .hero-section {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.28) 0%, rgba(59, 130, 246, 0.2) 100%);
      padding: 60px 0;
      color: #f8fafc;
      margin-bottom: -40px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    }

    .content-card {
      max-width: 900px;
      margin: 0 auto 50px;
      background: var(--panel);
      backdrop-filter: blur(10px);
      padding: 50px;
      border-radius: 24px;
      box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
      border: 1px solid var(--border);
    }

    h1 {
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    h4 {
      margin-top: 30px;
      color: #818cf8;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 20px;
    }

    h4 i {
      font-size: 1.2rem;
      color: #818cf8;
    }

    p,
    li {
      font-size: 16px;
      color: var(--text-main);
      line-height: 1.8;
    }

    ul {
      color: var(--text-main);
      line-height: 1.9;
    }

    ul li {
      margin-bottom: 10px;
    }

    strong {
      color: #f1f5f9;
      font-weight: 700;
    }

    .lead {
      color: #f1f5f9;
    }

    .footer {
      text-align: center;
      padding: 30px;
      color: #cbd5e1;
      font-size: 14px;
    }

    .btn-back {
      background: transparent;
      color: #f8fafc;
      border: 1px solid rgba(99, 102, 241, 0.65);
      border-radius: 12px;
      padding: 10px 25px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .btn-back:hover {
      background: rgba(99, 102, 241, 0.14);
      border-color: rgba(99, 102, 241, 0.85);
      color: #f8fafc;
      transform: translateY(-2px);
    }

    @media (max-width: 768px) {
      .content-card {
        padding: 30px;
        margin: 0 15px 30px;
      }
    }
  </style>
</head>

<body>
  <div class="hero-section text-center">
    <div class="container">
      <h1 class="display-5"><%= t('customer.pages.privacy.title', 'Kebijakan Privasi') %></h1>
      <p class="lead opacity-75"><%= t('customer.pages.privacy.subtitle', 'Bagaimana kami menjaga dan melindungi data pribadi Anda.') %></p>
    </div>
  </div>

  <div class="container">
    <div class="content-card">
      <p><%- String(t('customer.pages.privacy.p1', 'Di <strong>{company}</strong>, privasi pelanggan kami adalah prioritas utama. Dokumen Kebijakan Privasi ini menjelaskan jenis informasi pribadi yang kami kumpulkan dan bagaimana kami menggunakannya.')).replace('{company}', company) %></p>

      <h4><i class="bi bi-database-check"></i> 1. <%= t('customer.pages.privacy.s1_title', 'Informasi yang Kami Kumpulkan') %></h4>
      <p><%= t('customer.pages.privacy.s1_body', 'Kami mengumpulkan informasi terbatas yang diperlukan untuk penyediaan layanan, termasuk:') %></p>
      <ul>
        <li><%= t('customer.pages.privacy.s1_li1', 'Nama lengkap dan alamat pemasangan.') %></li>
        <li><%= t('customer.pages.privacy.s1_li2', 'Nomor telepon/WhatsApp untuk keperluan notifikasi tagihan dan teknis.') %></li>
        <li><%= t('customer.pages.privacy.s1_li3', 'Data penggunaan layanan untuk pemantauan kualitas jaringan.') %></li>
        <li><%= t('customer.pages.privacy.s1_li4', 'Data transaksi pembayaran melalui payment gateway pihak ketiga.') %></li>
      </ul>

      <h4><i class="bi bi-gear-wide-connected"></i> 2. <%= t('customer.pages.privacy.s2_title', 'Penggunaan Informasi') %></h4>
      <p><%= t('customer.pages.privacy.s2_body', 'Informasi yang kami kumpulkan digunakan untuk:') %></p>
      <ul>
        <li><%= t('customer.pages.privacy.s2_li1', 'Memproses pendaftaran dan aktivasi layanan internet Anda.') %></li>
        <li><%= t('customer.pages.privacy.s2_li2', 'Mengirimkan informasi tagihan dan pengingat pembayaran otomatis.') %></li>
        <li><%= t('customer.pages.privacy.s2_li3', 'Memberikan dukungan teknis dan menanggapi keluhan Anda.') %></li>
        <li><%= t('customer.pages.privacy.s2_li4', 'Meningkatkan kualitas jaringan dan pengalaman pengguna.') %></li>
      </ul>

      <h4><i class="bi bi-shield-check"></i> 3. <%= t('customer.pages.privacy.s3_title', 'Keamanan Data') %></h4>
      <p><%= t('customer.pages.privacy.s3_body', 'Kami menerapkan standar keamanan teknis untuk melindungi data Anda dari akses yang tidak sah. Data sensitif seperti kata sandi WiFi dan detail login disimpan dengan enkripsi di server kami.') %></p>

      <h4><i class="bi bi-people"></i> 4. <%= t('customer.pages.privacy.s4_title', 'Pihak Ketiga') %></h4>
      <p><%= t('customer.pages.privacy.s4_body', 'Kami tidak menjual atau menyewakan data pribadi Anda kepada pihak ketiga. Kami hanya berbagi data dengan mitra payment gateway (seperti Tripay/Xendit/Midtrans) untuk memproses transaksi pembayaran Anda secara aman.') %></p>

      <h4><i class="bi bi-patch-check"></i> 5. <%= t('customer.pages.privacy.s5_title', 'Persetujuan') %></h4>
      <p><%= t('customer.pages.privacy.s5_body', 'Dengan menggunakan layanan kami, Anda dengan ini menyetujui Kebijakan Privasi kami dan menyetujui ketentuan-ketentuannya.') %></p>

      <div class="mt-5 text-center">
        <a href="<%= isLoggedIn ? '/customer/dashboard' : '/customer/login' %>" class="btn btn-back">
          <i class="bi bi-arrow-left me-2"></i><%= t('common.back_to', 'Kembali ke') %> <%= isLoggedIn ? t('customer.dashboard_title', 'Dashboard Pelanggan') : t('common.portal', 'Portal') %>
        </a>
      </div>
    </div>
  </div>

  <div class="footer">
    &copy; <%= new Date().getFullYear() %>
      <%= company %> • <%= t('customer.pages.privacy.footer_tagline', 'Keamanan Data Anda adalah Komitmen Kami') %>
  </div>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js', { scope: '/customer/' }).catch(() => {});
      });
    }
  </script>
  <%- include('partials/customer_bottom_nav', { activeNav: 'none' }) %>
</body>
</html>
