"use client";
import { useState } from "react";

const faqs = [
    {
        question: "What is an Industrial RO Plant?",
        answer:
            "Ans: An Industrial RO Plant is a water purification system that removes dissolved salts, impurities, and contaminants from water using reverse osmosis technology. It is widely used in industries to obtain clean and high-quality water for various processes."
    },
    {
        question: "What is the purpose of an ETP Plant?",
        answer:
            "Ans: An ETP Plant (Effluent Treatment Plant) is used to treat industrial wastewater and remove harmful chemicals, oils, and pollutants before the water is discharged into the environment. It helps industries meet environmental regulations."
    },
    {
        question: "What is the difference between an STP Plant and an ETP Plant?",
        answer:
            "Ans: An STP Plant (Sewage Treatment Plant) treats domestic or sanitary wastewater from residential or commercial areas, while an ETP Plant treats wastewater generated from industrial processes."
    },
    {
        question: " What is a Softener Plant used for?",
        answer:
            "Ans: A Softener Plant removes hardness from water by eliminating calcium and magnesium ions. This helps prevent scaling in pipelines, boilers, and industrial equipment."
    },
    {
        question: " What is a DM Plant?",
        answer:
            "Ans: A DM Plant (Demineralization Plant) removes dissolved minerals and salts from water to produce highly purified water, which is commonly used in laboratories, boilers, and power plants."
    }
];

export default function Faq() {
    const [openIndex, setOpenIndex] = useState(null);

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

    return (

        <>

            <div className=" py-15 mb-5">
                <div className="container">
                    <div className="grid grid-cols-1 md:grid-cols-3">
                        <div>
                            <img src="img/faq.webp" alt="faq.webp" />
                        </div>
                        <div className="col-span-2">
                            {faqs.map((faq, index) => (
                                <div
                                    key={index}
                                    className="border border-[#01abed] rounded-lg overflow-hidden my-2"
                                >
                                    <button
                                        onClick={() => toggleFaq(index)}
                                        className="w-full flex justify-between items-center p-4 btn cursor-pointer"
                                    >
                                        <span className="font-medium text-left text-white">
                                            {faq.question}
                                        </span>
                                        <span className="text-xl text-white">
                                            {openIndex === index ? "−" : "+"}
                                        </span>
                                    </button>

                                    {openIndex === index && (
                                        <div className="p-4 text-gray-600 bg-white text-[14px]">
                                            {faq.answer}
                                        </div>
                                    )}
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}