import React from "react";

const FaqSection = () => (
    <section className="faq-section bg-color-1 p-relative">
        <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/bg/faq-bg.png)" }}></div>
        <div className="shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-47.png)" }}></div>
        <div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-48.png)" }}></div>
        <div className="small-container">
            <div className="row">
                <div className="col-xxl-7">
                    <div className="faq-wrapper pr-50">
                        <div className="faq-container section-space">
                            <div className="title-box mb-25 wow fadeInLeft" data-wow-delay=".5s">
                                <span className="section-sub-title no-border">FAQ</span>
                                <h3 className="section-title mt-10 text-white">Most Common Question?</h3>
                            </div>
                            <div className="bd-faq">
                                <div className="accordion" id="accordionExample-st-2">
                                    <div className="bd-faq-group">
                                        {[
                                            "Where should I incorporate my business?",
                                            "How can I safely use files?",
                                            "What is included in your services?",
                                            "What type of company is measured?"
                                        ].map((q, i) => (
                                            <div key={i} className="accordion-item">
                                                <h2 className="accordion-header" id={`heading${i}-st-2`}>
                                                    <button className={`accordion-button ${i === 2 ? "" : "collapsed"}`} type="button" data-bs-toggle="collapse" data-bs-target={`#collapse${i}-st-2`} aria-expanded={i === 2}>
                                                        {q}
                                                    </button>
                                                </h2>
                                                <div id={`collapse${i}-st-2`} className={`accordion-collapse collapse ${i === 2 ? "show" : ""}`} aria-labelledby={`heading${i}-st-2`} data-bs-parent="#accordionExample-st-2">
                                                    <div className="accordion-body">
                                                        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't.
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="col-xxl-5 mt-auto">
                    <div className="faq-image-area p-relative">
                        <figure className="image">
                            <img src="/assets/imgs/resources/faq-1.png" alt="" />
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </section>
);

export default FaqSection;
