import { useState } from "react";
import { Accordion } from "react-bootstrap";

const faqsData = [
  {
    id: 1,
    title: "Solutions Built Around You",
    content: "Our focus is always on your success. We take time to understand your business needs and provide custom website development, mobile app solutions, and digital strategies tailored to your goals.",
  },
  { id: 2,
    title: "Driven by Innovation",
    content: "We stay ahead of digital trends with ongoing training, research, and adoption of new tools. From SEO services to cross-platform app development, we ensure your business benefits from the latest innovations."
   },
  { id: 3, title: "Working Together for Results",
    content: "Transparency drives our process. From concept to launch, we involve clients at every stage, ensuring seamless delivery of websites, mobile apps, and marketing campaigns with measurable results.",
   },
];

const WhyChoose = () => {
  const [active, setActive] = useState(faqsData[0].id);
  return (
    <div id="tab1" className="tab_content">
      <Accordion
        defaultActiveKey={faqsData[0].id}
        as={"ul"}
        className="accordion"
      >
        {faqsData.map((faq) => (
          <li key={faq.id}>
            <Accordion.Toggle
              as="a"
              eventKey={faq.id}
              onClick={() => setActive(faq.id == active ? null : faq.id)}
              className={faq.id == active ? "active" : ""}
            >
              <span> {faq.title} </span>
            </Accordion.Toggle>
            <Accordion.Collapse eventKey={faq.id}>
              <p>
            {faq.content}
              </p>
            </Accordion.Collapse>
          </li>
        ))}
      </Accordion>
    </div>
  );
};
export default WhyChoose;