'use client'
import React from "react";
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel,
} from "react-accessible-accordion";

const FaqContent = [
  {
    title: " Efficient Implementation.",
    desc: ` We cut down implementation time and costs, ensuring our clients get measurable results from multi-channel campaigns designed for maximum impact and return on investment.`,
    expand: "a",
  },
  {
    title: "Innovative.",
    desc: `We reject cookie-cutter approaches that splatter the same content in every channel. Instead, our content is carefully crafted for each channel.`,
    expand: "b",
  },
  {
    title: "Proprietary Technology.",
    desc: `Our proprietary software technology provides a unique edge in this competitive landscape. It’s not just about what we do; it’s about how we do it.`,
    expand: "c",
  },
];

const Faq = () => {
  return (
    <div className="accordion-style-two pe-5">
      <div className="faq-wrraper">
        <Accordion preExpanded={["a"]} allowZeroExpanded>
          {FaqContent.map((item, i) => (
            <AccordionItem className="card" key={i} uuid={item.expand}>
              <AccordionItemHeading className="card-header">
                <AccordionItemButton>
                  <h5 className="mb-0">
                    <button className="btn btn-link">{item.title}</button>{" "}
                  </h5>
                </AccordionItemButton>
              </AccordionItemHeading>
              {/* Accordion Heading */}
              <AccordionItemPanel className="card-body fadeInUp">
                <p>{item.desc}</p>
              </AccordionItemPanel>
              {/* Accordion Body Content */}
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </div>
  );
};

export default Faq;