<!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.contact.meta_title', 'Kontak Support') %> | <%= 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;
    }

    .contact-item {
      background: var(--panel2);
      border-radius: 16px;
      padding: 25px;
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
      border: 1px solid rgba(148, 163, 184, 0.14);
      transition: transform 0.3s ease;
      text-decoration: none;
      color: inherit;
    }

    .contact-item:hover {
      transform: translateX(10px);
      border-color: rgba(99, 102, 241, 0.7);
    }

    .contact-icon {
      width: 60px;
      height: 60px;
      background: #f0f4ff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: var(--primary);
    }

    .contact-info h6 {
      margin-bottom: 2px;
      font-weight: 700;
      color: #f1f5f9;
    }

    .contact-info p {
      margin-bottom: 0;
      color: #cbd5e1;
      font-size: 14px;
      line-height: 1.6;
    }

    p {
      color: var(--text-main);
      line-height: 1.8;
    }

    .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.contact.title', 'Hubungi Kami') %></h1>
      <p class="lead opacity-75"><%= t('customer.pages.contact.subtitle', 'Kami siap membantu setiap kendala internet Anda.') %></p>
    </div>
  </div>

  <div class="container">
    <div class="content-card">
      <p class="text-center mb-5"><%= t('customer.pages.contact.p1', 'Tim support kami tersedia untuk melayani pertanyaan teknis, bantuan pembayaran, atau informasi pemasangan baru.') %></p>

      <div class="row">
        <div class="col-md-12">
          <% let waContact=settings.company_phone || (settings.whatsapp_admin_numbers ?
            settings.whatsapp_admin_numbers[0] : '' ); let waLink=waContact ?
            `https://wa.me/${waContact.replace(/\D/g, '' )}` : '#' ; %>
            <a href="<%= waLink %>" class="contact-item">
              <div class="contact-icon" style="background: #e8f5e9; color: #2e7d32;">
                <i class="bi bi-whatsapp"></i>
              </div>
              <div class="contact-info">
                <h6><%= t('customer.pages.contact.whatsapp_title', 'WhatsApp Support') %></h6>
                <p>
                  <%= waContact || t('customer.pages.contact.whatsapp_fallback', 'Hubungi WhatsApp Kami') %> (<%= t('customer.pages.contact.fast_response', 'Respon Cepat') %>)
                </p>
              </div>
            </a>

            <div class="contact-item">
              <div class="contact-icon" style="background: #fff3e0; color: #ef6c00;">
                <i class="bi bi-envelope"></i>
              </div>
              <div class="contact-info">
                <h6><%= t('customer.pages.contact.email_title', 'Email Support') %></h6>
                <p>
                  <%= settings.company_email || `support@${company.toLowerCase().replace(/\s+/g, '' )}.com` %>
                </p>
              </div>
            </div>

            <div class="contact-item">
              <div class="contact-icon" style="background: #f3e5f5; color: #7b1fa2;">
                <i class="bi bi-clock"></i>
              </div>
              <div class="contact-info">
                <h6><%= t('customer.pages.contact.hours_title', 'Jam Operasional') %></h6>
                <p>
                  <%= settings.operational_hours || 'Setiap Hari: 08.00 - 22.00 WIB' %>
                </p>
              </div>
            </div>

            <div class="contact-item">
              <div class="contact-icon" style="background: #e1f5fe; color: #0277bd;">
                <i class="bi bi-geo-alt"></i>
              </div>
              <div class="contact-info">
                <h6><%= t('customer.pages.contact.address_title', 'Alamat Kantor') %></h6>
                <p>
                  <%= settings.company_address || 'Jl. Utama ISP No. 123, Indonesia' %>
                </p>
              </div>
            </div>
        </div>
      </div>

      <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.contact.footer_tagline', 'Kepuasan Pelanggan adalah Kebanggaan 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: 'ticket' }) %>
</body>
</html>
