<!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.about.meta_title', 'Tentang Kami') %> | <%= 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);
      --panel2: rgba(15, 23, 42, 0.55);
      --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: 22px;
    }

    p {
      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;
      color: var(--text-main);
    }

    .lead {
      font-size: 18px;
      color: var(--text-main);
      line-height: 1.8;
    }

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

    .hero-section .lead {
      color: #f1f5f9;
    }

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

    .stat-card {
      background: var(--panel2);
      border-radius: 16px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
      border: 1px solid rgba(148, 163, 184, 0.14);
      height: 100%;
    }

    .stat-card i {
      font-size: 2rem;
      color: #818cf8;
      margin-bottom: 15px;
      display: block;
    }

    .stat-card h5 {
      color: var(--text-main);
      font-weight: 600;
      margin-bottom: 10px;
    }

    .stat-card .small {
      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.about.hero_title_prefix', 'Tentang') %> <%= company %></h1>
      <p class="lead opacity-75"><%= t('customer.pages.about.hero_subtitle', 'Solusi internet cepat dan terjangkau untuk masyarakat.') %></p>
    </div>
  </div>

  <div class="container">
    <div class="content-card">
      <div class="row mb-5">
        <div class="col-md-12">
          <p class="lead"><%- String(t('customer.pages.about.p1', '<strong>{company}</strong> adalah penyedia layanan internet (ISP) yang berfokus pada penyediaan akses broadband berkualitas tinggi untuk perumahan dan bisnis kecil.')).replace('{company}', company) %></p>
          <p><%= t('customer.pages.about.p2', 'Kami percaya bahwa di era digital saat ini, akses internet yang stabil dan cepat bukan lagi kemewahan, melainkan kebutuhan dasar untuk mendukung pendidikan, ekonomi kreatif, dan komunikasi tanpa batas.') %></p>
        </div>
      </div>

      <div class="row g-4 mb-5">
        <div class="col-md-4">
          <div class="stat-card">
            <i class="bi bi-rocket-takeoff"></i>
            <h5><%= t('customer.pages.about.stats.speed_title', 'Kecepatan Tinggi') %></h5>
            <p class="small"><%= t('customer.pages.about.stats.speed_desc', 'Jaringan serat optik untuk pengalaman internet tanpa hambatan.') %></p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="stat-card">
            <i class="bi bi-shield-check"></i>
            <h5><%= t('customer.pages.about.stats.stable_title', 'Stabil & Aman') %></h5>
            <p class="small"><%= t('customer.pages.about.stats.stable_desc', 'Infrastruktur yang dirancang untuk keandalan maksimal 24/7.') %></p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="stat-card">
            <i class="bi bi-headset"></i>
            <h5><%= t('customer.pages.about.stats.support_title', 'Dukungan Lokal') %></h5>
            <p class="small"><%= t('customer.pages.about.stats.support_desc', 'Tim teknis yang siap membantu Anda kapan saja.') %></p>
          </div>
        </div>
      </div>

      <h4><i class="bi bi-eye"></i> <%= t('customer.pages.about.vision_title', 'Visi Kami') %></h4>
      <p><%= t('customer.pages.about.vision_body', 'Menjadi mitra konektivitas digital terpercaya yang mampu menjangkau hingga pelosok, memberikan dampak positif bagi perkembangan ekonomi dan sosial masyarakat.') %></p>

      <h4><i class="bi bi-bullseye"></i> <%= t('customer.pages.about.mission_title', 'Misi Kami') %></h4>
      <ul>
        <li><%= t('customer.pages.about.mission_1', 'Menyediakan layanan internet dengan harga yang kompetitif namun berkualitas premium.') %></li>
        <li><%= t('customer.pages.about.mission_2', 'Terus berinovasi dalam infrastruktur jaringan untuk mengikuti perkembangan teknologi.') %></li>
        <li><%= t('customer.pages.about.mission_3', 'Memberikan layanan pelanggan yang responsif dan solutif.') %></li>
      </ul>

      <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.about.footer_tagline', 'Menghubungkan Anda ke Masa Depan') %>
  </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>
