<!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.tos.meta_title', 'Syarat & Ketentuan') %> | <%= 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: #e2e8f0;
      --text-muted: #94a3b8;
      --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: var(--primary);
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    h4 i {
      font-size: 1.2rem;
    }

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

    .footer {
      text-align: center;
      padding: 30px;
      color: var(--text-muted);
      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.tos.title', 'Syarat & Ketentuan') %></h1>
      <p class="lead opacity-75"><%= t('customer.pages.tos.subtitle', 'Harap baca dengan teliti sebelum menggunakan layanan kami.') %></p>
    </div>
  </div>

  <div class="container">
    <div class="content-card">
      <p><%- String(t('customer.pages.tos.p1', 'Selamat datang di layanan internet <strong>{company}</strong>. Dengan menggunakan layanan kami dan melakukan pembayaran melalui sistem ini, Anda setuju untuk terikat oleh syarat dan ketentuan berikut:')).replace('{company}', company) %></p>

      <h4><i class="bi bi-broadcast"></i> 1. <%= t('customer.pages.tos.s1_title', 'Layanan') %></h4>
      <p>
        <%= t('customer.pages.tos.s1_body', 'Kami menyediakan layanan akses internet (RTRWNet/ISP) kepada pelanggan sesuai dengan paket yang dipilih. Kualitas layanan dapat dipengaruhi oleh faktor teknis, lokasi geografis, dan kondisi cuaca yang ekstrem.') %>
      </p>

      <h4><i class="bi bi-wallet2"></i> 2. <%= t('customer.pages.tos.s2_title', 'Pembayaran & Tagihan') %></h4>
      <ul>
        <li><%= t('customer.pages.tos.s2_li1', 'Tagihan internet akan diterbitkan secara otomatis oleh sistem setiap bulan sesuai dengan siklus langganan Anda.') %></li>
        <li><%= t('customer.pages.tos.s2_li2', 'Pembayaran dapat dilakukan secara mandiri melalui Portal Pelanggan menggunakan metode QRIS, Virtual Account, atau Retail Outlet yang tersedia.') %></li>
        <li><%= t('customer.pages.tos.s2_li3', 'Setiap pembayaran yang sudah berhasil diverifikasi oleh sistem bersifat final dan tidak dapat dibatalkan atau dikembalikan (Non-Refundable).') %></li>
      </ul>

      <h4><i class="bi bi-shield-lock"></i> 3. <%= t('customer.pages.tos.s3_title', 'Kebijakan Isolir (Suspend)') %></h4>
      <p><%= t('customer.pages.tos.s3_body', 'Sistem kami akan melakukan pemutusan layanan sementara (Isolir) secara otomatis apabila tagihan belum dilunasi hingga melewati batas waktu (Jatuh Tempo) yang telah ditentukan. Layanan akan aktif kembali secara otomatis segera setelah pembayaran terverifikasi.') %></p>

      <h4 id="refund"><i class="bi bi-arrow-repeat"></i> 4. <%= t('customer.pages.tos.s4_title', 'Pengembalian Dana (Refund)') %></h4>
      <p><%= t('customer.pages.tos.s4_body', 'Pengembalian dana hanya dapat dipertimbangkan jika terjadi kesalahan sistem pada payment gateway kami yang menyebabkan transaksi ganda untuk satu tagihan yang sama.') %></p>

      <h4><i class="bi bi-exclamation-octagon"></i> 5. <%= t('customer.pages.tos.s5_title', 'Batasan Tanggung Jawab') %></h4>
      <p>
        <%= String(t('customer.pages.tos.s5_body', '{company} tidak bertanggung jawab atas kerugian yang disebabkan oleh gangguan teknis dari penyedia hulu (Upstream), kerusakan perangkat akibat kelalaian pelanggan, atau kejadian luar biasa (Force Majeure).')).replace('{company}', company) %>
      </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.tos.footer_tagline', 'Semua Hak Dilindungi') %>
  </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>
