{% extends 'portal/base.html' %}

{% block title %}Kebijakan Privasi — {{ brand.name }} ({{ brand.company_full }}){% endblock %}

{% block content %}
  {% include 'portal/components/header.html' %}

  <main class="relative z-10 flex-1 py-12 lg:py-16">
    <div class="max-w-4xl mx-auto px-6 lg:px-8">
      
      <!-- Breadcrumb & Back -->
      <nav class="flex items-center gap-2 text-xs font-mono text-slate-500 mb-8">
        <a href="{% url 'portal:index' %}" class="hover:text-brand-orange transition-colors flex items-center gap-1">
          <span class="material-symbols-outlined text-[14px]">home</span>
          <span>Beranda</span>
        </a>
        <span>/</span>
        <span class="text-slate-800 font-semibold">Kebijakan Privasi</span>
      </nav>

      <!-- Document Header Card -->
      <div class="bg-white border border-slate-200 rounded-3xl p-8 sm:p-12 shadow-sm mb-10 relative overflow-hidden">
        <div class="absolute -right-10 -top-10 w-48 h-48 bg-orange-100/50 rounded-full blur-2xl pointer-events-none"></div>
        <div class="relative z-10 space-y-4">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-50 border border-orange-200 text-brand-orange text-xs font-mono font-bold uppercase tracking-wider">
            <span class="w-1.5 h-1.5 rounded-full bg-brand-orange"></span>
            STANDAR KEPATUHAN UU PDP &amp; ISO/IEC 27001
          </div>
          <h1 class="font-display font-black text-3xl sm:text-4xl text-slate-900 tracking-tight leading-tight">
            Kebijakan Privasi
          </h1>
          <p class="text-sm sm:text-base text-slate-600 leading-relaxed max-w-3xl">
            Kebijakan Privasi ini menjelaskan bagaimana <strong>{{ brand.company_full }}</strong> ("KHANSIA", "Kami") mengumpulkan, menggunakan, menyimpan, dan melindungi informasi pribadi serta data aktivitas Anda saat mengakses portal demonstrasi enterprise <strong>{{ brand.subdomain }}</strong>.
          </p>
          <div class="pt-2 flex flex-wrap items-center gap-4 text-xs font-mono text-slate-500 border-t border-slate-100">
            <span>Berlaku Efektif: <strong>1 Januari {% now "Y" %}</strong></span>
            <span>•</span>
            <span>Terakhir Diperbarui: <strong>{% now "j F Y" %}</strong></span>
            <span>•</span>
            <span>Versi Dokumen: <strong>v2.{% now "y" %}-LTS</strong></span>
          </div>
        </div>
      </div>

      <!-- Policy Content Sections -->
      <div class="bg-white border border-slate-200 rounded-3xl p-8 sm:p-12 shadow-sm space-y-10 text-slate-700 leading-relaxed text-sm sm:text-[15px]">
        
        <!-- Section 1 -->
        <section class="space-y-3">
          <div class="flex items-center gap-2.5 text-slate-900 font-display font-bold text-lg border-b border-slate-100 pb-2">
            <span class="w-7 h-7 rounded-lg bg-orange-50 text-brand-orange flex items-center justify-center text-xs font-mono font-black">01</span>
            <h2>Ruang Lingkup dan Komitmen Privasi</h2>
          </div>
          <p>
            PT Khatulistiwa Nusantara Indonesia berkomitmen penuh untuk menjunjung tinggi kerahasiaan, integritas, dan keamanan informasi setiap pengunjung, calon mitra korporat, BUMN, instansi pemerintah, dan evaluator teknis. Seluruh proses pengolahan data kami tunduk pada ketentuan <strong>Undang-Undang Republik Indonesia Nomor 27 Tahun 2022 tentang Pelindungan Data Pribadi (UU PDP)</strong> dan standar tata kelola keamanan informasi internasional <strong>ISO/IEC 27001</strong>.
          </p>
        </section>

        <!-- Section 2 -->
        <section class="space-y-3">
          <div class="flex items-center gap-2.5 text-slate-900 font-display font-bold text-lg border-b border-slate-100 pb-2">
            <span class="w-7 h-7 rounded-lg bg-orange-50 text-brand-orange flex items-center justify-center text-xs font-mono font-black">02</span>
            <h2>Data yang Kami Kumpulkan</h2>
          </div>
          <p>Saat Anda berinteraksi dengan portal ini, kami dapat mengumpulkan jenis data berikut:</p>
          <ul class="space-y-2 pl-4 list-disc text-slate-600">
            <li>
              <strong>Informasi Komunikasi Sukarela:</strong> Nama lengkap, alamat email korporat, nomor telepon/WhatsApp, nama instansi/perusahaan, dan kebutuhan teknis yang Anda kirimkan saat mengajukan permohonan <em>Technical Briefing</em>, konsultasi arsitektur, atau dedicated sandbox.
            </li>
            <li>
              <strong>Data Navigasi &amp; Telemetri Portal:</strong> Alamat IP tersamarkan (anonymized IP), jenis browser, resolusi layar, kata kunci pencarian pada fitur ⌘K, dan kategori solusi yang Anda filter, semata-mata untuk optimasi performa muat laman.
            </li>
            <li>
              <strong>Penyimpanan Preferensi Lokal (Local Storage):</strong> Kami menggunakan penyimpanan lokal peramban untuk mengingat state interaksi (seperti filter aktif atau penutupan modal) tanpa melacak identitas lintas situs.
            </li>
          </ul>
        </section>

        <!-- Section 3 -->
        <section class="space-y-3">
          <div class="flex items-center gap-2.5 text-slate-900 font-display font-bold text-lg border-b border-slate-100 pb-2">
            <span class="w-7 h-7 rounded-lg bg-orange-50 text-brand-orange flex items-center justify-center text-xs font-mono font-black">03</span>
            <h2>Karakteristik Lingkungan Sandbox &amp; Isolasi Data</h2>
          </div>
          <div class="p-4 rounded-2xl bg-amber-50/70 border border-amber-200 text-amber-900 text-xs sm:text-sm space-y-2">
            <div class="flex items-center gap-2 font-bold font-mono uppercase tracking-wider text-amber-800">
              <span class="material-symbols-outlined text-[18px]">verified_user</span>
              <span>Penegasan Khusus Lingkungan Sandbox Pengujian</span>
            </div>
            <p class="leading-relaxed">
              Seluruh sistem aplikasi yang ditautkan dari portal ini (KIERA ERP, Yakes Mobile, Digimall, CyberGuard) beroperasi dalam <strong>lingkungan sandbox terisolasi penuh</strong> yang hanya memuat data sintetis (dummy dataset) yang telah dianonimkan. Tidak ada data riil nasabah, rekam medis pasien sesungguhnya, atau kredensial perbankan nyata yang disimpan atau diproses di dalam node sandbox demo publik.
            </p>
          </div>
        </section>

        <!-- Section 4 -->
        <section class="space-y-3">
          <div class="flex items-center gap-2.5 text-slate-900 font-display font-bold text-lg border-b border-slate-100 pb-2">
            <span class="w-7 h-7 rounded-lg bg-orange-50 text-brand-orange flex items-center justify-center text-xs font-mono font-black">04</span>
            <h2>Tujuan Pemrosesan Informasi</h2>
          </div>
          <p>Informasi yang Anda sediakan digunakan secara ketat untuk keperluan:</p>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
            <div class="p-3.5 rounded-xl bg-slate-50 border border-slate-200">
              <h4 class="font-bold text-xs text-slate-900 mb-1">Koordinasi Briefing Teknis</h4>
              <p class="text-xs text-slate-600">Menghubungi Anda kembali untuk menjadwalkan sesi demonstrasi langsung dan pemaparan arsitektur solusi.</p>
            </div>
            <div class="p-3.5 rounded-xl bg-slate-50 border border-slate-200">
              <h4 class="font-bold text-xs text-slate-900 mb-1">Penyediaan Dedicated Sandbox</h4>
              <p class="text-xs text-slate-600">Menyiapkan lingkungan uji coba Proof of Concept (PoC) khusus yang disesuaikan dengan kebutuhan organisasi Anda.</p>
            </div>
            <div class="p-3.5 rounded-xl bg-slate-50 border border-slate-200">
              <h4 class="font-bold text-xs text-slate-900 mb-1">Audit Keamanan &amp; SLA</h4>
              <p class="text-xs text-slate-600">Memastikan ketersediaan layanan 99.98% SLA dan pencegahan serangan siber DDoS atau intrusi otomatis.</p>
            </div>
            <div class="p-3.5 rounded-xl bg-slate-50 border border-slate-200">
              <h4 class="font-bold text-xs text-slate-900 mb-1">Kepatuhan Hukum</h4>
              <p class="text-xs text-slate-600">Memenuhi kewajiban pelaporan dan audit regulasi yang berlaku di wilayah hukum Republik Indonesia.</p>
            </div>
          </div>
        </section>

        <!-- Section 5 -->
        <section class="space-y-3">
          <div class="flex items-center gap-2.5 text-slate-900 font-display font-bold text-lg border-b border-slate-100 pb-2">
            <span class="w-7 h-7 rounded-lg bg-orange-50 text-brand-orange flex items-center justify-center text-xs font-mono font-black">05</span>
            <h2>Keamanan &amp; Perlindungan Data</h2>
          </div>
          <p>
            Kami menerapkan mekanisme pertahanan berlapis (*defense-in-depth*) untuk mengamankan data pengguna:
          </p>
          <ul class="space-y-1.5 pl-4 list-disc text-slate-600">
            <li><strong>Enkripsi Transit:</strong> Seluruh lalu lintas data diwajibkan menggunakan protokol Transport Layer Security terkini (<strong>TLS 1.3 / HTTPS</strong>) dengan HSTS berdurasi 2 tahun.</li>
            <li><strong>Isolasi Jaringan:</strong> Server backend dilindungi oleh firewall berbasis jaringan (UFW), Reverse Proxy Nginx berkeamanan tinggi, dan perlindungan brute-force.</li>
            <li><strong>Prinsip Hak Akses Terkecil:</strong> Akses ke data komunikasi briefing hanya diberikan kepada tim solusi korporat KHANSIA yang bertanda tangan non-disclosure agreement (NDA).</li>
          </ul>
        </section>

        <!-- Section 6 -->
        <section class="space-y-3">
          <div class="flex items-center gap-2.5 text-slate-900 font-display font-bold text-lg border-b border-slate-100 pb-2">
            <span class="w-7 h-7 rounded-lg bg-orange-50 text-brand-orange flex items-center justify-center text-xs font-mono font-black">06</span>
            <h2>Hak-Hak Subjek Data Anda</h2>
          </div>
          <p>Sesuai dengan UU Pelindungan Data Pribadi No. 27 Tahun 2022, Anda berhak untuk:</p>
          <ul class="space-y-1 pl-4 list-disc text-slate-600">
            <li>Mendapatkan kejelasan mengenai identitas, dasar hukum, dan tujuan pemrosesan data Anda.</li>
            <li>Meminta akses dan salinan atas data komunikasi yang pernah Anda sampaikan kepada kami.</li>
            <li>Memperbarui atau memperbaiki ketidakakuratan data kontak organisasi Anda.</li>
            <li>Meminta penghapusan atau penarikan kembali izin kontak briefing teknis sewaktu-waktu.</li>
          </ul>
        </section>

        <!-- Section 7 -->
        <section class="space-y-3">
          <div class="flex items-center gap-2.5 text-slate-900 font-display font-bold text-lg border-b border-slate-100 pb-2">
            <span class="w-7 h-7 rounded-lg bg-orange-50 text-brand-orange flex items-center justify-center text-xs font-mono font-black">07</span>
            <h2>Kontak Resmi Pelindungan Data</h2>
          </div>
          <p>
            Apabila Anda memiliki pertanyaan, keberatan, atau ingin menggunakan hak subjek data terkait kebijakan ini, silakan hubungi tim Pelindungan Data &amp; Legal kami:
          </p>
          <div class="p-5 rounded-2xl bg-slate-50 border border-slate-200 text-xs sm:text-sm space-y-1.5 font-mono">
            <div><strong>Instansi:</strong> {{ brand.company_full }}</div>
            <div><strong>Alamat Kantor:</strong> {{ brand.address }}</div>
            <div><strong>Telepon:</strong> {{ brand.phone }}</div>
            <div><strong>Email Resmi:</strong> <a href="mailto:{{ brand.email }}" class="text-blue-700 underline">{{ brand.email }}</a></div>
            <div><strong>Jam Operasional:</strong> {{ brand.hours }}</div>
          </div>
        </section>

      </div>

      <!-- Bottom Action -->
      <div class="mt-10 text-center">
        <a href="{% url 'portal:index' %}" class="ripple-surface inline-flex items-center gap-2 px-6 py-3 rounded-2xl text-xs sm:text-sm font-display font-bold text-white bg-gradient-to-r from-orange-600 to-amber-500 hover:from-orange-500 hover:to-amber-400 shadow-md shadow-orange-500/25 transition-all active:scale-95">
          <span class="material-symbols-outlined text-[18px]">arrow_back</span>
          <span>Kembali ke Katalog Demo Portal</span>
        </a>
      </div>

    </div>
  </main>

  {% include 'portal/components/footer.html' %}
{% endblock %}