"use client";

import { useState, useEffect } from "react";
import { FaChevronDown } from "react-icons/fa";
import { useTheme } from "next-themes";

export default function FAQSection() {
  const { resolvedTheme } = useTheme();
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const [mounted, setMounted] = useState(false);

  useEffect(() => setMounted(true), []);

  const toggleFAQ = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  const faqs = [
    {
      question: "What is Prima EV?",
      answer:
        "Prima EV is an innovative electric vehicle platform that connects future buyers with futuristic sports motor bike that emphasize advanced technology.",
    },
    {
      question: "What types of motor bikes are avaliable on Prima EV?",
      answer:
        "We focus on high-tech sports motor bikes, ranging from high performance EVs to futuristic concept motor bikes with aerodynamics designs and intelligent systems.",
    },
    {
      question: "Can I schedule a testdrive before purchasing?",
      answer:
        "Absolutly, we offer test drive options at selected locations that can be booked through our platform.",
    },
    {
      question: "Are the motor bikes on Prima EV street-legal worldwide?",
      answer:
        "Our vehicles are designed to meet international standards, but regulations may vary by country. We recommened checking with your local authorities or contacting our support team for region-specific compliance details.",
    },
    {
      question: "How does the motor bikes buying process work on Prima EV?",
      answer:
        "Simply choose your dream motor bike, submit a request through our platform, and our team will assist you through the entaire transaction and delivery process.",
    },
    {
      question: "Is financing or installment avaliable?",
      answer:
        "Yes, we partner with various financial institutions to offer flexible financing option for buyers.",
    },
    {
      question: "How long does delivery take after purchase?",
      answer:
        "Delivery times vary depending on the model and location. On average, delivery takes around 2-6 weeks.",
    },
  ];

  if (!mounted) return null;

  const isDark = resolvedTheme === "dark";

  return (
    <section
      id="faq"
      className={`relative max-w-7xl mx-auto px-4 sm:px-6 md:px-20 lg:px-40 py-12 sm:py-16 md:py-20 ${
        isDark ? "bg-gray-900 text-white" : ""
      }`}
    >
      {/* Dark mode glowing background */}
      {isDark && (
        <>
          <div className="absolute top-[-50px] left-[-50px] w-[300px] sm:w-[400px] h-[300px] sm:h-[400px] bg-emerald-600/30 rounded-full filter blur-3xl animate-glow-slow"></div>
          <div className="absolute bottom-[-50px] right-[-50px] w-[300px] sm:w-[400px] h-[300px] sm:h-[400px] bg-emerald-700/20 rounded-full filter blur-3xl animate-glow-slow"></div>
        </>
      )}

      <h2
        className={`text-2xl sm:text-3xl md:text-4xl font-bold mb-8 sm:mb-10 text-center ${
          isDark ? "text-emerald-400" : "text-emerald-700"
        }`}
      >
        Frequently Asked Questions
      </h2>

      <div className="space-y-4 relative z-10">
        {faqs.map((faq, index) => (
          <div
            key={index}
            className={`rounded-xl overflow-hidden border transition-shadow duration-300
              ${isDark
                ? "border-emerald-600 bg-gray-800 hover:shadow-emerald-500/50"
                : "border-emerald-200 bg-white hover:shadow-lg"
              }`}
          >
            {/* Question */}
            <button
              onClick={() => toggleFAQ(index)}
              className={`w-full flex justify-between items-center px-4 sm:px-6 py-4 sm:py-5 text-left font-semibold transition-colors duration-300 ${
                isDark ? "text-white" : "text-emerald-900"
              }`}
            >
              <span className="text-sm sm:text-base md:text-lg">{faq.question}</span>
              <FaChevronDown
                className={`transition-transform duration-300 ${
                  openIndex === index ? "rotate-180" : ""
                }`}
              />
            </button>

            {/* Answer */}
            {openIndex === index && (
              <div
                className={`px-4 sm:px-6 pb-4 sm:pb-5 text-sm sm:text-base leading-relaxed transition-colors duration-300 ${
                  isDark ? "text-emerald-300" : "text-emerald-700"
                }`}
              >
                {faq.answer}
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Glow animation */}
      {isDark && (
        <style>{`
          @keyframes glowSlow {
            0%, 100% { transform: scale(1) translate(0,0); opacity: 0.35; }
            50% { transform: scale(1.05) translate(5px,5px); opacity: 0.6; }
          }
          .animate-glow-slow {
            animation: glowSlow 6s ease-in-out infinite;
          }
        `}</style>
      )}
    </section>
  );
}