"use client"

import { useState, useEffect } from "react"
import { useLocation } from "react-router-dom"
import { motion, useAnimation } from "framer-motion"
import { useInView } from "react-intersection-observer"

const FAQ = () => {
  const location = useLocation()
  const controls = useAnimation()
  const [ref, inView] = useInView({
    threshold: 0.1,
    triggerOnce: false,
  })

  useEffect(() => {
    if (inView) {
      controls.start("visible")
    } else {
      controls.start("hidden")
    }
  }, [controls, inView])

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

  const [openQuestion, setOpenQuestion] = useState(null)

  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 className="mb-1">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 className="mb-1">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>
      ),
    },
  ]

  // Animation variants for the container
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.5,
      },
    },
  }

  // Animation variants for each FAQ item
  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 1,
      },
    },
  }

  return (
    <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center " id="faq" ref={ref}>
      <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>

      <motion.div
        className="space-y-[22px] mb-[110px] mt-[60px]"
        variants={containerVariants}
        initial="hidden"
        animate={controls}
      >
        {faqData.map((item, index) => (
          <motion.div
            key={index}
            className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden"
            variants={itemVariants}
          >
            <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>
            )}
          </motion.div>
        ))}
      </motion.div>
    </div>
  )
}

export default FAQ