import { Accordion } from "react-bootstrap";
import ThumbFaq from "../../../../public/assets/imgs/thumb/products/virtual-tour/faq.png";
import Image from "next/image";

const Faq = () => {
  return (
    <>
      <section className="faq__area">
        <div className="container g-0 line pb-140">
          <div className="line-3"></div>
          <div className="row">
            <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
              <div className="faq__img">
                <Image
                  priority
                  style={{ width: "auto", height: "auto" }}
                  src={ThumbFaq}
                  alt="FAQ Image"
                  data-speed="auto"
                />
              </div>
            </div>
            <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
              <div className="faq__content">
                <h2 className="faq__title title-anim">
                  How Our Virtual Tour Builder Enhances User Experience?
                </h2>

                <div className="faq__list">
                  <Accordion defaultActiveKey="0" className="accordion" id="accordionExample">
                    <Accordion.Item eventKey="0" className="accordion-item">
                      <Accordion.Header className="accordion-header" id="headingOne">
                        How does the virtual tour builder enhance user engagement?
                      </Accordion.Header>
                      <Accordion.Body className="accordion-body">
                        <p>
                          The virtual tour builder offers interactive and immersive experiences that captivate users, providing an engaging way to explore spaces, products, or services from any location.
                        </p>
                      </Accordion.Body>
                    </Accordion.Item>

                    <Accordion.Item eventKey="1" className="accordion-item">
                      <Accordion.Header className="accordion-header" id="headingTwo">
                        Can I integrate multimedia into the virtual tour?
                      </Accordion.Header>
                      <Accordion.Body className="accordion-body">
                        <p>
                          Yes, the platform allows seamless integration of videos, audio, images, and text, offering a comprehensive and interactive experience for your users.
                        </p>
                      </Accordion.Body>
                    </Accordion.Item>

                    <Accordion.Item eventKey="2" className="accordion-item">
                      <Accordion.Header className="accordion-header" id="headingThree">
                        Does the virtual tour work on mobile devices?
                      </Accordion.Header>
                      <Accordion.Body className="accordion-body">
                        <p>
                          Absolutely! Our virtual tour builder is fully responsive and optimized for mobile devices, ensuring that your tours provide an excellent experience on any screen size.
                        </p>
                      </Accordion.Body>
                    </Accordion.Item>

                    <Accordion.Item eventKey="3" className="accordion-item">
                      <Accordion.Header className="accordion-header" id="headingFour">
                        Can I add interactive hotspots to the virtual tour?
                      </Accordion.Header>
                      <Accordion.Body className="accordion-body">
                        <p>
                          Yes, you can add interactive hotspots to highlight specific features, products, or areas of interest within the virtual tour, providing users with additional information or actions.
                        </p>
                      </Accordion.Body>
                    </Accordion.Item>

                    <Accordion.Item eventKey="4" className="accordion-item">
                      <Accordion.Header className="accordion-header" id="headingFive">
                        How can I share the virtual tour with others?
                      </Accordion.Header>
                      <Accordion.Body className="accordion-body">
                        <p>
                          You can easily share your virtual tour via links, embed codes, or directly on social media platforms to reach a larger audience.
                        </p>
                      </Accordion.Body>
                    </Accordion.Item>
                  </Accordion>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Faq;