"use client";

import { useState } from "react";
import { ChevronDown } from "lucide-react";
import Header from "@/app/_components/Header";
import Footer from "@/app/_components/Footer";

const faqs = [
  {
    q: "Apakah Dinar KR dapat diterima di seluruh toko emas?",
    a: `Insyaa Allah bisa. Dinar KR dibuat dari emas murni 999.99 Au dengan standar internasional
        setara LBMA atau Logam Mulia 24 Karat. Secara nilai dan kadar emas, Dinar KR tetap dapat
        diperhitungkan sebagaimana emas pada umumnya.`,
  },
  {
    q: "Bagaimana keabsahan Dinar KR dan siapa yang menerbitkan sertifikatnya?",
    a: `Dinar KR memiliki standar kejelasan kadar dan bobot emas yang terverifikasi.
        Sertifikasi diterbitkan sebagai bentuk transparansi kualitas emas, sehingga pemilik
        merasa aman dan tenang dalam kepemilikannya.`,
  },
  {
    q: "Apa perbedaan emas logam mulia dengan Dinar Khoirur Rooziqiin?",
    a: `Emas pada dasarnya sudah bernilai dan mulia sejak awal. Namun Dinar Khoirur Rooziqiin
        menghadirkan nilai tambahan berupa ukiran doa, keindahan seni, serta makna historis
        dan spiritual. Ia bukan hanya emas, tapi simbol nilai dan harapan.`,
  },
  {
    q: "Jika harus memilih, mana yang lebih baik: emas logam mulia atau Dinar KR?",
    a: `Untuk rasa: sentuh, lihat, dan rasakan langsung keduanya—hati akan menentukan.
        Untuk investasi: keduanya setara karena sama-sama emas 24 karat.
        Untuk keberkahan: Dinar KR memiliki nilai sunnah dan makna spiritual.
        Ibarat makan, sama-sama mengenyangkan, namun cara yang sesuai sunnah
        menghadirkan keberkahan yang berbeda.`,
  },
  {
    q: "How will I be kept informed about my case?",
    a: `You will receive clear updates through the communication channel you choose.
        Our team ensures every important development is shared transparently,
        so you stay informed without needing to chase for information.`,
  },
];

export default function FAQSection() {
  // 🔥 FAQ pertama langsung kebuka
  const [active, setActive] = useState(0);

  const toggle = (index) => {
    setActive(active === index ? null : index);
  };

  return (
    <div className="bg-gradient-to-b from-[#0f172a] to-[#020617] min-h-screen">
      <Header />

      <section className="py-28">
        {/* TITLE */}
        <div className="text-center mb-14 px-6">
          <h2 className="text-4xl font-extrabold text-white tracking-wide">
            FAQ
          </h2>
          <p className="text-sm text-slate-400 mt-3">
            Pertanyaan yang sering diajukan seputar Dinar Khoirur Rooziqiin
          </p>
        </div>

        {/* FAQ BOX */}
        <div className="max-w-4xl mx-auto px-6">
          <div className="bg-[#020617] border border-[#d4af37]/40 rounded-3xl shadow-2xl divide-y divide-white/10">
            {faqs.map((item, i) => (
              <div key={i} className="p-6">
                <button
                  onClick={() => toggle(i)}
                  className="w-full flex justify-between items-center text-left text-white font-semibold text-sm md:text-base"
                >
                  <span>{item.q}</span>
                  <ChevronDown
                    className={`transition-transform duration-300 text-[#d4af37] ${
                      active === i ? "rotate-180" : ""
                    }`}
                  />
                </button>

                {active === i && (
                  <div className="mt-4 text-sm text-slate-300 leading-relaxed">
                    {item.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div className="text-center mt-20 px-6">
          <p className="text-white font-semibold mb-3">
            Anda masih memiliki pertanyaan?
          </p>
          <p className="text-sm text-slate-400 mb-6">
            Kami siap membantu Anda memahami lebih dalam tentang Dinar KR
          </p>
        <a
  href={`https://wa.me/6287888367962?text=${encodeURIComponent(
    `Assalamu’alaikum Rana Mulia 🙏

Saya ingin bertanya lebih lanjut mengenai Dinar Khoirur Rooziqiin.
Mohon informasi terkait keaslian, penggunaan, dan detail lainnya.

Terima kasih.`
  )}`}
  target="_blank"
  rel="noopener noreferrer"
  className="inline-block px-8 py-3 rounded-xl font-bold tracking-wide
  bg-gradient-to-r from-[#1e3a8a] to-[#d4af37]
  hover:opacity-90 transition text-white"
>
  HUBUNGI KAMI
</a>
        </div>
      </section>

      <Footer />
    </div>
  );
}