<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layanan Terisolir | <%= company %></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <style>
    :root {
      --bg: #0f172a;
      --card: #1e293b;
      --text: #f8fafc;
      --muted: #94a3b8;
      --primary: #3b82f6;
      --danger: #ef4444;
      --success: #22c55e;
    }
    body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background-color: var(--bg);
      background-image: 
        radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    .container {
      max-width: 480px;
      width: 90%;
      text-align: center;
      padding: 48px 32px;
      background: var(--card);
      border-radius: 32px;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(10px);
    }
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: rgba(239, 68, 68, 0.1);
      color: var(--danger);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 24px;
    }
    .status-badge i { font-size: 14px; }
    
    h1 {
      margin: 0 0 16px;
      font-size: 28px;
      font-weight: 800;
      background: linear-gradient(to bottom, #fff, #94a3b8);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .description {
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 32px;
      font-size: 15px;
    }
    .info-grid {
      display: grid;
      gap: 16px;
      margin-bottom: 32px;
    }
    .info-item {
      background: rgba(15, 23, 42, 0.4);
      border-radius: 20px;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      text-align: left;
      border: 1px solid rgba(255,255,255,0.03);
    }
    .info-icon {
      width: 44px;
      height: 44px;
      background: rgba(59, 130, 246, 0.1);
      color: var(--primary);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    .info-content { min-width: 0; }
    .info-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; display: block; margin-bottom: 2px; }
    .info-value { font-weight: 700; font-size: 15px; color: #f1f5f9; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .btn-wa {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #25d366;
      color: #0f172a;
      text-decoration: none;
      padding: 18px;
      border-radius: 20px;
      font-weight: 800;
      font-size: 16px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 10px 20px -10px rgba(37, 211, 102, 0.5);
    }
    .btn-wa:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 30px -10px rgba(37, 211, 102, 0.6);
      filter: brightness(1.1);
    }
    .btn-wa i { font-size: 22px; }

    .btn-secondary {
      display: block;
      width: 100%;
      padding: 14px 16px;
      border-radius: 16px;
      font-weight: 700;
      font-size: 14px;
      text-align: center;
      text-decoration: none;
      border: 1px solid rgba(148, 163, 184, 0.35);
      background: rgba(15, 23, 42, 0.5);
      color: var(--text);
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    .btn-secondary:hover {
      background: rgba(30, 41, 59, 0.9);
      border-color: rgba(59, 130, 246, 0.45);
    }

    .footer {
      margin-top: 40px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 500;
    }
    .company-name {
      color: var(--primary);
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="status-badge">
      <i class="bi bi-shield-lock-fill"></i> Terisolir
    </div>
    
    <h1>Akses Terbatas</h1>
    <p class="description">Layanan internet Anda sementara dinonaktifkan. Silakan selesaikan administrasi tagihan untuk mengaktifkan kembali layanan.</p>
    
    <div class="info-grid">
      <div class="info-item">
        <div class="info-icon"><i class="bi bi-building"></i></div>
        <div class="info-content">
          <span class="info-label">Penyedia Layanan</span>
          <span class="info-value"><%= company %></span>
        </div>
      </div>
      
      <% if (adminPhone) { %>
      <div class="info-item">
        <div class="info-icon"><i class="bi bi-person-badge"></i></div>
        <div class="info-content">
          <span class="info-label">Pusat Bantuan</span>
          <span class="info-value"><%= adminPhone %></span>
        </div>
      </div>
      <% } %>

      <% if (address) { %>
      <div class="info-item">
        <div class="info-icon"><i class="bi bi-geo-alt"></i></div>
        <div class="info-content">
          <span class="info-label">Lokasi Kantor</span>
          <span class="info-value"><%= address %></span>
        </div>
      </div>
      <% } %>
    </div>

    <% if (adminPhone) { %>
    <a href="https://wa.me/<%= adminPhone.replace(/\D/g, '') %>?text=Halo%20Admin%20<%= encodeURIComponent(company) %>,%20layanan%20internet%20saya%20terisolir.%20Mohon%20bantuannya." class="btn-wa">
      <i class="bi bi-whatsapp"></i> Konfirmasi Pembayaran
    </a>
    <% } %>

    <div class="info-grid" style="margin-top: 24px;">
      <a href="/customer/check-billing" class="btn-secondary"><i class="bi bi-receipt"></i> Cek tagihan &amp; bayar</a>
      <form method="post" action="/customer/logout" style="margin:0;">
        <button type="submit" class="btn-secondary" style="width:100%;"><i class="bi bi-box-arrow-right"></i> Keluar akun portal</button>
      </form>
    </div>

    <div class="footer">
      Sistem Billing <span class="company-name"><%= company %></span> &copy; <%= new Date().getFullYear() %>
    </div>
  </div>
</body>
</html>