<script lang="ts" setup>
import logoUrl from '@/assets/images/logo.svg'
import illustrationUrl from '@/assets/images/illustration.svg'
import { Box } from '@/components/ui/box'
import { Button } from '@/components/ui/button'
import { RouterLink } from 'vue-router'

const appName = import.meta.env.VITE_APP_NAME
const appVersion = import.meta.env.VITE_APP_VERSION

const sections = [
  {
    id: 'pengenalan',
    title: '1. Pengenalan',
    placeholder: 'Selamat datang ke SUTERA 3.0. Kami amat menghargai kepercayaan yang anda berikan untuk mengendalikan maklumat peribadi anda. Dasar Privasi ini digubal untuk membantu anda memahami bagaimana kami mengumpul, menggunakan, mendedahkan, dan melindungi data peribadi anda selaras dengan Akta Perlindungan Data Peribadi 2010 (PDPA) dan piawaian keselamatan global.\n\nDasar ini terpakai kepada semua TDM, dan mana-mana pihak yang mengakses atau menggunakan perkhidmatan, laman web, dan aplikasi kami.'
  },
  {
    id: 'data-dikumpul',
    title: '2. Data yang Dikumpul',
    placeholder:
      'Kami mengumpul beberapa jenis maklumat termasuk:\n- Maklumat Pengenalan Peribadi: Nama penuh, alamat e-mel, dan nombor telefon.\n- Data Teknikal: Alamat IP, jenis pelayar, dan log aktiviti sistem.\n- Data Transaksi: Sejarah pembelian dan maklumat langganan perkhidmatan.'
  },
  {
    id: 'tujuan-penggunaan',
    title: '3. Tujuan Penggunaan Data',
    placeholder: 'Data anda digunakan untuk:\n- Operasi Sistem: Menguruskan akaun dan menyediakan perkhidmatan.\n- Pengesahan: Menjamin keselamatan akses pengguna.\n- Komunikasi: Menghantar notis pentadbiran dan sokongan pelanggan.\n- Analitik: Menambah baik prestasi dan kualiti platform.'
  },
  {
    id: 'perkongsian-data',
    title: '4. Perkongsian & Pendedahan Data',
    placeholder: 'Kami tidak menjual data anda. Pendedahan hanya dilakukan kepada:\n- Pembekal Perkhidmatan: Rakan kongsi teknologi untuk pengehosan dan pembayaran.\n- Pematuhan Undang-undang: Jika dikehendaki oleh pihak berkuasa atau perintah mahkamah.'
  },
  {
    id: 'keselamatan',
    title: '5. Keselamatan Data',
    placeholder: 'Kami melaksanakan langkah keselamatan teknikal seperti:\n- Penyulitan (Encryption): Menggunakan SSL/TLS untuk perlindungan data.\n- Kawalan Akses: Menghadkan akses data kepada kakitangan yang dibenarkan sahaja.\n- Audit Berkala: Menjalankan semakan keselamatan sistem secara berterusan.'
  },
  {
    id: 'hak-pengguna',
    title: '6. Hak Pengguna',
    placeholder: 'Anda mempunyai hak untuk:\n- Akses & Pembetulan: Melihat dan mengemas kini maklumat peribadi anda.\n- Pemadaman: Meminta pemadaman akaun atau data dalam keadaan tertentu.\n- Sekatan: Mengehadkan pemprosesan data anda.'
  },
  {
    id: 'penyimpanan',
    title: '7. Tempoh Penyimpanan',
    placeholder: 'Data disimpan hanya selama diperlukan untuk tujuan perniagaan atau undang-undang. Selepas tempoh tersebut, data akan dipadamkan sepenuhnya atau dianonimkan.'
  },
  {
    id: 'kuki',
    title: '8. Kuki & Teknologi Penjejakan',
    placeholder: 'Kami menggunakan kuki(cookies) dan token sesi untuk mengingati tetapan anda dan meningkatkan pengalaman pengguna. Anda boleh menguruskan pilihan kuki melalui tetapan pelayar anda.'
  },
  {
    id: 'perubahan',
    title: '9. Perubahan Dasar',
    placeholder: 'Dasar ini mungkin dikemas kini dari semasa ke semasa. Sebarang perubahan besar akan dimaklumkan melalui emel atau notis di platform kami sebelum tarikh kuat kuasa baru.'
  },
  {

    id: 'hubungi',
    title: '10. Hubungi Kami',
    placeholder:
      'Jika anda ada pertanyaan, komen atau permintaan tentang dasar ini, hubungi kami di\n- KAPT MOHAMMAD EFANDY BIN JAFFARI (effandy.jaffari@army.mil.my)'

  }
];
</script>

<template>
  <div :class="[
    'relative min-h-screen bg-primary bg-noise xl:bg-background xl:bg-none',
    'before:hidden before:xl:block before:content-[\'\'] before:w-[57%] before:mt-[-28%] before:mb-[-16%] before:ml-[-12%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-6 before:bg-primary/95 before:bg-noise before:rounded-[35%]',
    'after:hidden after:xl:block after:content-[\'\'] after:w-[57%] after:mt-[-28%] after:mb-[-16%] after:ml-[-12%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-6 after:border after:bg-accent after:bg-cover after:blur-xl after:rounded-[35%] after:border-primary',
  ]">
    <div :class="[
      'p-3 sm:px-8 relative h-full',
      'before:hidden before:xl:block before:w-[57%] before:mt-[-20%] before:mb-[-13%] before:ml-[-12%] before:absolute before:inset-y-0 before:left-0 before:transform before:-rotate-6 before:bg-primary/40 before:bg-noise before:border before:border-primary/50 before:opacity-60 before:rounded-[20%]',
    ]">
      <div class="container relative z-10 mx-auto sm:px-20 py-10">
        <div class="mb-8 flex items-center justify-between gap-4">
          <RouterLink class="flex items-center gap-3" to="/login">
            <img class="w-6" :src="logoUrl" :alt="`${appName} logo`" />
            <span class="text-base font-medium text-white">
              {{ appName }} {{ appVersion }}
            </span>
          </RouterLink>
        </div>

        <Box raised="double" class="px-6 py-8 sm:px-10">
          <div class="flex flex-col gap-2">
            <h1 class="text-2xl font-semibold tracking-tight sm:text-3xl">
              Dasar Privasi
            </h1>
            <p class="text-sm opacity-80">
              Dikemas kini terakhir: <span class="font-medium">2 Jun 2026</span>
            </p>
          </div>

          <div class="mt-8 grid gap-8 lg:grid-cols-[260px_1fr]">
            <aside class="lg:sticky lg:top-6 lg:self-start">
              <div class="text-xs font-semibold uppercase tracking-wide opacity-70">
                Isi Kandungan
              </div>
              <ul class="mt-3 flex flex-col gap-2">
                <li v-for="s in sections" :key="s.id">
                  <a class="text-sm opacity-90 hover:opacity-100 hover:underline" :href="`#${s.id}`">
                    {{ s.title }}
                  </a>
                </li>
              </ul>
            </aside>

            <main class="flex flex-col gap-8">
              <section v-for="s in sections" :key="s.id" :id="s.id" class="scroll-mt-6">
                <h2 class="text-lg font-semibold sm:text-xl">
                  {{ s.title }}
                </h2>
                <p class="mt-2 whitespace-pre-line leading-relaxed opacity-80">
                  {{ s.placeholder }}
                </p>
              </section>
            </main>
          </div>
        </Box>
      </div>
    </div>
  </div>
</template>
