import { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";

const FAQ = () => {
  const location = useLocation();

  useEffect(() => {
    if (location.hash) {
      const element = document.querySelector(location.hash);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    }
  }, [location]);
  // State untuk menyimpan indeks pertanyaan yang sedang dibuka
  // Jika tidak ada pertanyaan yang terbuka, nilai adalah null
  const [openQuestion, setOpenQuestion] = useState(null);

  useEffect(() => {
    if (location.hash) {
      const element = document.querySelector(location.hash);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    }
  }, [location]);

  const toggleQuestion = (index) => {
    setOpenQuestion(openQuestion === index ? null : index);
  };

  const faqData = [
    { question: "Apa itu Rekan AI?", answer: <p>Rekan AI adalah platform teknologi kecerdasan buatan (AI) yang menyediakan solusi berbasis AI untuk meningkatkan efisiensi operasional, analisis data, dan pengalaman pelanggan bagi UMKM hingga perusahaan besar.</p> },
    { question: "Apa saja produk yang ditawarkan oleh Rekan AI?", answer: <div><p>Kami menawarkan beberapa produk unggulan, termasuk:</p><ul className="list-decimal list-inside space-y-1"><li>Rekan Doku: Solusi autentikasi dan manajemen dokumen digital.</li><li>Rekan HR: Automasi dan optimalisasi proses HR.</li><li>Rekan LLM: AI berbasis model bahasa besar untuk analisis dan komunikasi.</li><li>Rekan Veri: Verifikasi data yang cepat dan akurat.</li></ul></div> },
    { question: "Bagaimana cara menghubungi tim Rekan AI?", answer: <div><p>Anda dapat menghubungi kami melalui:</p><ul className="list-decimal list-inside space-y-1"><li>Email: support@rekanai.com</li><li>Telepon: (+62) 123-4567-890</li><li>WhatsApp: (+62) 812-3456-7890</li></ul></div> },
    { question: "Apakah solusi Rekan AI mudah diimplementasikan?", answer: <p>Ya, produk kami dirancang untuk integrasi yang mulus dengan sistem bisnis Anda yang sudah ada. Kami juga menyediakan dukungan teknis untuk memastikan implementasi berjalan lancar.</p> },
    { question: "Apakah Rekan AI cocok untuk UMKM?", answer: <p>Tentu saja! Kami menawarkan solusi yang terjangkau, mudah digunakan, dan dapat membantu UMKM meningkatkan efisiensi, mengurangi biaya operasional, dan mempercepat pertumbuhan.</p> },
    { question: "Bagaimana dengan keamanan data?", answer: <p>Keamanan adalah prioritas kami. Semua produk Rekan AI menggunakan teknologi enkripsi canggih untuk melindungi data Anda dari ancaman cyber.</p> },
    { question: "Bagaimana saya memulai menggunakan produk Rekan AI?", answer: <p>Anda dapat memulai dengan menghubungi tim kami untuk demo produk atau konsultasi gratis. Kami akan membantu Anda menemukan solusi yang paling sesuai dengan kebutuhan bisnis Anda.</p> },
    { question: "Apakah Rekan AI memiliki paket harga yang bisa dipilih?", answer: <p>Ya, kami dapat memberikan paket harga terbaik untuk solusi produk yang Anda pilih. Informasi lebih lanjut silakan hubungi kami dan konsultasikan kebutuhan Anda secara gratis.</p> },
  ];

  return (
    <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center " id="faq">
      {/* Judul halaman FAQ */}
      <div className="mt-[111px]">
        <h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4">
          Frequently Asked Questions
        </h1>
        <h2 className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center mb-6">
          Pertanyaan Umum tentang Rekan AI
        </h2>
      </div>

      <div className="space-y-[22px] mb-[110px] mt-[60px]">
        {faqData.map((item, index) => {
          const { ref, inView } = useInView({ threshold: 0.1 });

          return (
            <div
              key={index}
              ref={ref}
              className={`text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden transition-opacity duration-700 transform ${
                inView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
              }`}
              style={{ transitionDelay: `${index * 100}ms` }}
            >
              <div
                className={`flex justify-between items-center cursor-pointer bg-white ml-4 ${
                  openQuestion === index ? "text-blue-500" : ""
                }`}
                onClick={() => toggleQuestion(index)}
              >
                <span className="font-[550]">{item.question}</span>
                <span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span>
              </div>

              {openQuestion === index && (
                <div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
                  {item.answer}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default FAQ;