"use client"
import { useState } from "react";
import { ChevronDown } from "lucide-react";
import { motion, AnimatePresence } from "motion/react";
import faqImg from '../../public/assets/others/faq.png';

interface FaqItem {
  question: string;
  answer: string;
}

const faqData: FaqItem[] = [
  {
    question: "What is SQ Group?",
    answer: "SQ Group is a growing business conglomerate in Bangladesh that operates across multiple industries including electricals, renewable energy, packaging, agriculture, healthcare, information technology, and infrastructure development."
  },
  {
    question: "What industries does SQ Group work in?",
    answer: "SQ Group operates across a wide range of industries including electricals, renewable energy, packaging, agriculture, healthcare, information technology, and infrastructure development. Through its diversified business operations, the company aims to deliver innovative solutions, support industrial growth, and contribute to the economic development of Bangladesh."
  },
  {
    question: "What is the mission of SQ Group?",
    answer: "The mission of SQ Group is to empower industries and contribute to building a better future through innovation, quality services, customer satisfaction, and long-term business development."
  },
  {
    question: "Why choose SQ Group?",
    answer: "SQ Group is committed to maintaining high standards in every sector it serves. The company focuses on quality, reliability, customer satisfaction, and long-term partnerships. With a vision driven by innovation and sustainable growth, SQ Group continues to build trust by delivering dependable products and services across multiple industries."
  },
   {
    question: "Does SQ Group focus on sustainable development?",
    answer: "Yes. SQ Group actively supports sustainable development through its involvement in renewable energy, modern infrastructure, and responsible business practices aimed at creating positive long-term impact."
  }
];

export function FaqSection() {
  const [openIndex, setOpenIndex] = useState<number | null>(1);

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

  return (
    <div className="w-full bg-white py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
          {/* Left Side - Image */}
          <div className="flex justify-center lg:justify-start order-2 lg:order-1">
            <div className="relative">
              {/* Orange Circle Badge */}
              <div className="absolute -top-8 -left-8 lg:-top-20 lg:-left-12 w-48 h-48 lg:w-64 lg:h-64 bg-[#FF6B2C] rounded-full flex items-center justify-center z-10">
                <div className="text-white text-center">
                  <div className="text-lg lg:text-2xl font-bold tracking-wider transform -rotate-20" style={{ writingMode: 'vertical-rl', textOrientation: 'mixed' }}>
                    SOME VEILED QUESTIONS
                  </div>
                </div>
              </div>
              
              <div className="w-72 h-72 sm:w-80 sm:h-80 lg:w-96 lg:h-96 rounded-full overflow-hidden border-8 border-gray-800 relative ml-8 lg:ml-12">
                <img 
                  src={faqImg.src}
                  alt="Business meeting" 
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
          <div className="order-1 lg:order-2">
            <div className="mb-8">
              <p className="text-[#FF6B2C] text-sm font-semibold tracking-wider mb-2">
                .: TRUSTED FOR COMPANY :.
              </p>
              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
                Some Veiled Question<br />For You
              </h2>
            </div>

            <div className="space-y-4">
              {faqData.map((faq, index) => (
                <div 
                  key={index}
                  className="border-b border-gray-200 pb-4"
                >
                  <button
                    onClick={() => toggleFaq(index)}
                    className="w-full flex items-start justify-between gap-4 text-left group"
                  >
                    <div className="flex items-start gap-3 flex-1">
                      <motion.div
                        animate={{ rotate: openIndex === index ? 90 : 0 }}
                        transition={{ duration: 0.3, ease: "easeInOut" }}
                        className="flex-shrink-0 mt-1"
                      >
                        {openIndex === index ? (
                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="text-[#FF6B2C]">
                            <path d="M0 8L16 0V16L0 8Z" fill="currentColor"/>
                          </svg>
                        ) : (
                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="text-gray-900">
                            <path d="M0 8L16 0V16L0 8Z" fill="currentColor"/>
                          </svg>
                        )}
                      </motion.div>
                      <span 
                        className={`text-base sm:text-lg font-medium transition-colors duration-200 ${
                          openIndex === index ? 'text-[#FF6B2C]' : 'text-gray-900'
                        }`}
                      >
                        {faq.question}
                      </span>
                    </div>
                  </button>
                  
                  <AnimatePresence initial={false}>
                    {openIndex === index && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ 
                          height: "auto", 
                          opacity: 1,
                          transition: {
                            height: { duration: 0.3, ease: "easeInOut" },
                            opacity: { duration: 0.2, delay: 0.1 }
                          }
                        }}
                        exit={{ 
                          height: 0, 
                          opacity: 0,
                          transition: {
                            height: { duration: 0.3, ease: "easeInOut" },
                            opacity: { duration: 0.2 }
                          }
                        }}
                        className="overflow-hidden"
                      >
                        <motion.p 
                          initial={{ y: -10 }}
                          animate={{ y: 0 }}
                          exit={{ y: -10 }}
                          className="text-gray-600 text-sm sm:text-base leading-relaxed mt-3 pl-7"
                        >
                          {faq.answer}
                        </motion.p>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}