import animationCharCome from "@/lib/utils/animationCharCome";
import { useEffect, useRef } from "react";
import { Accordion } from "react-bootstrap";

const Faq1 = () => {
  const charAnim = useRef();
  useEffect(() => {
    animationCharCome(charAnim.current);
  }, []);
  return (
    <>
      <section className="faq__area-6">
        <div className="container g-0 line pt-130 pb-140">
          <div className="line-3"></div>
          <div className="row">
            <div className="col-xxl-12">
              <div className="sec-title-wrapper">
                <h2 className="sec-title-2 animation__char_come" ref={charAnim}>
                  FAQ
                </h2>
                <p className="">
                  Frequently asked questions
                </p>
              </div>
            </div>
          </div>

          <div className="row">
            <div className="col-xxl-12">
              <div className="faq__list-3">
                <Accordion defaultActiveKey="0" className="accordion">
                  <Accordion.Item eventKey="0" className="accordion-item">
                    <Accordion.Header>
                      Will I own the rights to my website and branding?
                    </Accordion.Header>
                    <Accordion.Body>
                      <div>
                        <p>
                          Yes, once the project is completed and paid for, you will have full ownership of your website, branding assets, and all related materials.

                        </p>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>

                  <Accordion.Item eventKey="1" className="accordion-item">
                    <Accordion.Header>
                      How do you ensure my website will reflect my brand identity?
                    </Accordion.Header>
                    <Accordion.Body>
                      <div>
                        <p>
                          We start with a comprehensive consultation to understand your brand, target audience, and specific preferences. Throughout the project, we maintain open communication and incorporate your feedback to ensure the final result aligns with your vision.
                        </p>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>

                  <Accordion.Item eventKey="2" className="accordion-item">
                    <Accordion.Header>
                      What if I don’t like the initial design concept?
                    </Accordion.Header>
                    <Accordion.Body>
                      <div>
                        <p>
                          We offer revision rounds at each stage of the design process to ensure the final product meets your expectations. If you’re not satisfied with the initial concept, we’ll work with you to make adjustments.
                        </p>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>

                  <Accordion.Item eventKey="3" className="accordion-item">
                    <Accordion.Header>
                      Can you help with domain registration and hosting setup?
                    </Accordion.Header>
                    <Accordion.Body>
                      <div>
                        <p>
                          Yes, we can assist with domain registration, hosting setup, and even provide recommendations for reliable hosting providers that suit your needs without charging you any extra fee.
                        </p>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>

                  <Accordion.Item eventKey="4" className="accordion-item">
                    <Accordion.Header>
                      Can I upgrade my package after starting the project?
                    </Accordion.Header>
                    <Accordion.Body>
                      <div>
                        <p>
                          Yes, you can upgrade your package at any time during or after the development process. Just reach out to our team to discuss the best options for your needs.
                        </p>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>

                  <Accordion.Item eventKey="5" className="accordion-item">
                    <Accordion.Header>
                      What type of support is included with each package?
                    </Accordion.Header>
                    <Accordion.Body>
                      <div>
                        <p>
                          Each package includes a specific duration of support to help you with any questions or issues. You can contact our support team via email or chat during this time.
                        </p>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>

                  <Accordion.Item eventKey="6" className="accordion-item">
                    <Accordion.Header>
                      Are there any additional costs I should be aware of?
                    </Accordion.Header>
                    <Accordion.Body>
                      <div>
                        <p>
                          Any additional costs will be discussed upfront, but it’s important to clarify your specific requirements to avoid unexpected expenses.
                        </p>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>

                  <Accordion.Item eventKey="7" className="accordion-item">
                    <Accordion.Header>
                      What happens after the included support period ends?
                    </Accordion.Header>
                    <Accordion.Body>
                      <div>
                        <p>
                          After the support period, you can opt for ongoing maintenance services for an additional fee, ensuring your website stays up-to-date and functional.
                        </p>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>

                  <Accordion.Item eventKey="8" className="accordion-item">
                    <Accordion.Header>
                      Will my website be mobile-friendly?
                    </Accordion.Header>
                    <Accordion.Body>
                      <div>
                        <p>
                          Yes, all packages ensure your website is optimized for mobile devices to enhance user experience.
                        </p>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>

                  <Accordion.Item eventKey="9" className="accordion-item">
                    <Accordion.Header>
                      What if I have a unique feature request not listed in the package?
                    </Accordion.Header>
                    <Accordion.Body>
                      <div>
                        <p>
                          We encourage you to discuss any unique requirements with our team, and we’ll work to create a custom solution tailored to your needs.
                        </p>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>

                  <Accordion.Item eventKey="10" className="accordion-item">
                    <Accordion.Header>
                      Can I request a custom package if none of these fit my needs?
                    </Accordion.Header>
                    <Accordion.Body>
                      <div>
                        <p>
                          Yes, we’re happy to create a custom package based on your specific requirements. Contact us to discuss your business, and we’ll tailor a solution for you.
                        </p>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>

                  <Accordion.Item eventKey="11" className="accordion-item">
                    <Accordion.Header>
                      What if I need additional features in the future?
                    </Accordion.Header>
                    <Accordion.Body>
                      <div>
                        <p>
                          We build our websites with scalability in mind, so you can easily add new features as your business grows. Just get in touch with us, and we can discuss the best way to implement additional functionality.
                        </p>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>
                </Accordion>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Faq1;