<script setup>
import { ref } from "vue";

const faqItems = [
  {
    id: "q1",
    question:
      "Berapa minimal modal dasar PT Dalam Negeri, PT PMA/PT Asing, PT Perorangan dan CV?",
    blocks: [
      {
        type: "ul",
        items: [
          "Minimal modal untuk mendirikan sebuah PT adalah sebesar Rp50.000.000 (lima puluh juta rupiah).",
          "Minimal modal untuk mendirikan sebuah PT PMA/PT Asing adalah sebesar Rp10.000.000.000 (sepuluh miliar rupiah).",
          "Pendirian sebuah PT Perorangan tidak memiliki batas minimal dan hanya dibatasi maksimal Rp5.000.000.000 (lima miliar rupiah).",
          "Pendirian CV tidak memiliki batas minimal dan hanya disesuaikan dengan alokasi finansial badan usaha."
        ]
      }
    ]
  },
  {
    id: "q2",
    question: "Bolehkah suami-istri mendirikan PT?",
    blocks: [
      {
        type: "p",
        text:
          "Boleh, dengan syarat utama suami-istri tersebut ketika mendirikan badan hukum PT sudah memiliki Perjanjian Pemisahan Harta (Perjanjian Kawin), karena tanpa perjanjian tersebut suami-istri dianggap sebagai satu subjek hukum sehingga tidak memenuhi syarat minimal dua pendiri."
      },
      {
        type: "p",
        text:
          "Alternatif lain adalah melibatkan pihak ketiga sebagai pendiri untuk memenuhi syarat minimal dua pendiri. Untuk jenis badan hukum lain seperti PT Perorangan (jika diizinkan), syaratnya berbeda dan tidak memerlukan dua pendiri."
      }
    ]
  },
  {
    id: "q3",
    question:
      "Berapa modal dasar pendirian Koperasi Simpan Pinjam (KSP) dan koperasi umum yang memiliki unit usaha Simpan Pinjam?",
    blocks: [
      {
        type: "p",
        text:
          "Minimal modal untuk mendirikan Koperasi Simpan Pinjam (KSP) bervariasi tergantung jenisnya dan wilayah keanggotaannya, mulai dari Rp500.000.000 (lima ratus juta rupiah) untuk KSP Primer di kabupaten/kota hingga Rp3.000.000.000 (tiga miliar rupiah) untuk KSP Sekunder dengan keanggotaan lintas provinsi."
      },
      {
        type: "p",
        text:
          "Untuk Unit Simpan Pinjam (USP), modal tetap yang terpisah dari aset koperasi minimal sebesar Rp500.000.000 (lima ratus juta rupiah) untuk USP koperasi primer."
      },
      {
        type: "p",
        text: "Untuk Koperasi Simpan Pinjam (KSP):",
        strong: true
      },
      {
        type: "p",
        text: "KSP Primer",
        strong: true
      },
      {
        type: "ul",
        items: [
          "Anggota di wilayah kabupaten/kota: minimal Rp500.000.000.",
          "Anggota lintas kabupaten/kota dalam satu provinsi: minimal Rp1.000.000.000.",
          "Anggota lintas provinsi: minimal Rp2.000.000.000."
        ]
      },
      {
        type: "p",
        text: "KSP Sekunder",
        strong: true
      },
      {
        type: "ul",
        items: [
          "Anggota di wilayah kabupaten/kota: minimal Rp50.000.000.",
          "Anggota lintas kabupaten/kota dalam satu provinsi: minimal Rp150.000.000.",
          "Anggota lintas provinsi: minimal Rp500.000.000."
        ]
      }
    ]
  },
  {
    id: "q4",
    question: "Bagaimana syarat memilih nama PT?",
    blocks: [
      {
        type: "ul",
        items: [
          "Nama Perseroan Terbatas (PT) tidak boleh sama dengan yang lain meskipun bidang usaha dan domisili kedua PT berbeda. Larangan tersebut diatur dalam PP No. 43 Tahun 2011 tentang Tata Cara Pengajuan dan Pemakaian Nama Perseroan Terbatas.",
          "Nama perusahaan harus terdiri dari minimal 3 (tiga) suku kata dengan berbahasa Indonesia. Hal ini dilakukan untuk membedakan nama perusahaan lokal dan perusahaan dengan modal asing. Pasal 11 PP 43/2011 menyatakan, “Perseroan yang seluruh sahamnya dimiliki oleh warga negara Indonesia atau badan hukum Indonesia wajib memakai Bahasa Indonesia.” Nama juga harus menggunakan huruf latin dan tidak menggunakan angka atau gabungan huruf yang tidak membentuk kata.",
          "Nama perusahaan harus tidak bertentangan dengan ketertiban umum atau kesusilaan. Dengan demikian, penggunaan nama yang mengandung isu SARA ataupun kebencian dan tidak sesuai dengan norma yang berlaku tidak diperkenankan sesuai dengan Pasal 16 ayat (1) UU Perseroan Terbatas."
        ]
      }
    ]
  },
  {
    id: "q5",
    question:
      "Apakah KBLI Perdagangan Besar dan Eceran dapat digabung dalam satu perusahaan?",
    blocks: [
      {
        type: "p",
        text:
          "KBLI Perdagangan Besar dan Eceran tidak dapat digabung. Berdasarkan Peraturan Pemerintah No. 29 Tahun 2021 tentang Penyelenggaraan Bidang Perdagangan, untuk bidang usaha perdagangan besar tidak dapat dijalankan secara bersamaan dengan bidang usaha perdagangan eceran, karena dapat berakibat NIB tidak dapat terbit."
      },
      {
        type: "p",
        text:
          "Perbedaan antara perdagangan besar dan perdagangan eceran secara konkret bisa dilihat pada perbedaan Klasifikasi Baku Lapangan Usaha Indonesia (KBLI) yang menaunginya. Perdagangan besar memiliki awalan KBLI 46, sementara perdagangan eceran KBLI 47."
      }
    ]
  },
  {
    id: "q6",
    question:
      "Berapa lama masa berlaku sertifikat tanah HGB, HGU & Hak Pakai?",
    blocks: [
      {
        type: "ul",
        items: [
          "Sertifikat HGB adalah selama 30 tahun, yang dapat diperpanjang maksimal 20 tahun dan diperbarui maksimal 30 tahun.",
          "Sertifikat HGU adalah selama 35 tahun, yang dapat diperpanjang maksimal 25 tahun dan diperbarui maksimal 35 tahun.",
          "Sertifikat Hak Pakai adalah selama 30 tahun, yang dapat diperpanjang maksimal 20 tahun dan diperbarui maksimal 30 tahun."
        ]
      }
    ]
  },
  {
    id: "q7",
    question: "Apa itu Roya?",
    blocks: [
      {
        type: "p",
        text:
          "Roya adalah proses penghapusan catatan hak tanggungan (jaminan utang) dari sertifikat tanah atau bangunan setelah utang yang dijaminkan, seperti Kredit Pemilikan Rumah (KPR), telah lunas. Setelah roya selesai, sertifikat tanah tersebut sepenuhnya bersih dan bebas dari beban utang."
      }
    ]
  },
  {
    id: "q8",
    question: "Apa itu Peningkatan Sertifikat Hak Milik?",
    blocks: [
      {
        type: "p",
        text:
          "Peningkatan hak milik adalah proses mengubah status hak atas tanah dari hak yang lebih rendah seperti Hak Guna Bangunan atau Hak Pakai menjadi Hak Milik. Proses ini dilakukan di kantor Badan Pertanahan Nasional (BPN) dengan menyiapkan dokumen persyaratan, mengisi formulir, membayar biaya, dan menunggu pengukuran ulang jika diperlukan, sebelum akhirnya diterbitkan Sertifikat Hak Milik (SHM) yang baru."
      }
    ]
  },
  {
    id: "q9",
    question: "Apa itu SHMSRS?",
    blocks: [
      {
        type: "p",
        text:
          "Sertifikat Hak Milik atas Satuan Rumah Susun (SHMSRS) adalah bukti kepemilikan unit apartemen atau rumah susun secara perorangan, yang juga mencakup hak atas bagian bersama, benda bersama, dan tanah bersama. Sertifikat ini setara dengan hak milik atas tanah dan bangunan, tetapi di sini hak kepemilikan unit bersifat individual sementara hak atas tanahnya adalah kepemilikan bersama yang proporsional."
      }
    ]
  }
];

const activeIndex = ref(0);

function toggle(index) {
  activeIndex.value = activeIndex.value === index ? null : index;
}
</script>

<template>
  <section class="faq" id="faq">
    <div class="container">
      <h2 class="headline">
        Pertanyaan Umum Seputar Legalitas Usaha
      </h2>
      <div class="description">
        Temukan jawaban atas pertanyaan yang paling sering diajukan terkait
        pendirian badan usaha, perizinan, hingga pengurusan sertifikat.
      </div>

      <div class="faq-list">
        <div
          v-for="(item, index) in faqItems"
          :key="item.id"
          class="faq-item"
          :class="{ active: activeIndex === index }"
        >
          <button class="faq-question" type="button" @click="toggle(index)">
            <span class="faq-icon">
              {{ activeIndex === index ? "-" : "+" }}
            </span>
            <span class="faq-question-text">
              {{ index + 1 }}. {{ item.question }}
            </span>
          </button>
          <div class="faq-answer" v-show="activeIndex === index">
            <template v-for="(block, blockIndex) in item.blocks" :key="blockIndex">
              <p v-if="block.type === 'p'">
                <strong v-if="block.strong">
                  {{ block.text }}
                </strong>
                <template v-else>
                  {{ block.text }}
                </template>
              </p>
              <ul v-else-if="block.type === 'ul'">
                <li v-for="(line, lineIndex) in block.items" :key="lineIndex">
                  {{ line }}
                </li>
              </ul>
            </template>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.faq {
  padding: 80px 20px;
  background: #ffffff;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.eyebrow {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #193b6a;
  letter-spacing: 1px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.headline {
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  color: #111827;
  margin: 0 0 12px;
  line-height: 1.3;
}

.description {
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}

.faq-list {
  border-top: 1px solid #e1e5f0;
}

.faq-item {
  border-bottom: 1px solid #e1e5f0;
  padding: 6px 0;
}

.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 12px 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  color: #193b6a;
}

.faq-question-text {
  font-size: 16px;
  font-weight: 600;
}

.faq-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background-color: #e9f0ff;
  color: #193b6a;
  border: 1px solid #c3d4ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.faq-item.active .faq-icon {
  background-color: #193b6a;
  color: #ffffff;
  border-color: #193b6a;
}

.faq-answer {
  padding: 0 0 14px 40px;
  color: #3c4a6b;
  font-size: 14px;
  line-height: 1.6;
}

.faq-answer ul {
  margin: 8px 0 0 18px;
  padding: 0;
}

.faq-answer p {
  margin: 6px 0;
}

@media (min-width: 768px) {
  .headline {
    font-size: 38px;
  }
}

@media (max-width: 767px) {
  .headline {
    font-size: 26px;
  }
}
</style>
