export function BorderCardFaq() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="inline-flex w-full flex-col items-start justify-start gap-10 lg:gap-14">
          <div className="flex w-full flex-col items-center justify-start gap-3 lg:gap-5">
            <h2 className="font-manrope text-center text-4xl leading-normal font-bold text-indigo-600">
              FAQ
            </h2>
            <p className="w-full text-center text-base leading-relaxed font-normal text-gray-500 lg:max-w-4xl">
              The FAQ section provides answers to common questions about our
              products, services, policies, and procedures. It's designed to
              help you find quick solutions and information
            </p>
          </div>
          <div className="grid w-full grid-cols-1 flex-col items-start justify-start gap-6 lg:grid-cols-2 lg:gap-8">
            <div className="group flex h-full w-full items-center justify-start rounded-lg border border-gray-200 p-5 transition-all duration-700 ease-in-out hover:border-gray-400">
              <div className="inline-flex flex-col items-start justify-center gap-2.5">
                <div className="inline-flex items-center justify-start gap-2.5">
                  <h4 className="text-xl leading-8 font-medium text-black">
                    Q.
                  </h4>
                  <h4 className="text-xl leading-8 font-medium text-black">
                    How can I contact customer support?
                  </h4>
                </div>
                <div className="inline-flex items-start justify-start gap-2.5">
                  <h6 className="text-base leading-relaxed font-normal text-gray-600">
                    A.
                  </h6>
                  <p className="text-base leading-normal font-normal text-gray-600 lg:text-xs lg:leading-normal">
                    If you need assistance or have any questions, our customer
                    support team is here to help. You can reach us through the
                    following methods.
                  </p>
                </div>
              </div>
            </div>
            <div className="group flex h-full w-full items-center justify-start rounded-lg border border-gray-200 p-5 transition-all duration-700 ease-in-out hover:border-gray-400">
              <div className="inline-flex flex-col items-start justify-center gap-2.5">
                <div className="inline-flex items-center justify-start gap-2.5">
                  <h4 className="text-xl leading-8 font-medium text-black">
                    Q.
                  </h4>
                  <h4 className="text-xl leading-8 font-medium text-black">
                    How do I delete my account?
                  </h4>
                </div>
                <div className="inline-flex items-start justify-start gap-2.5">
                  <h6 className="text-base leading-relaxed font-normal text-gray-600">
                    A.
                  </h6>
                  <p className="text-base leading-normal font-normal text-gray-600 lg:text-xs lg:leading-normal">
                    We value your feedback and are sorry to see you go. If
                    there's anything we can do to improve your experience,
                    please let us know.
                  </p>
                </div>
              </div>
            </div>
            <div className="group flex h-full w-full items-center justify-start rounded-lg border border-gray-200 p-5 transition-all duration-700 ease-in-out hover:border-gray-400">
              <div className="inline-flex flex-col items-start justify-center gap-2.5">
                <div className="inline-flex items-center justify-start gap-2.5">
                  <h4 className="text-xl leading-8 font-medium text-black">
                    Q.
                  </h4>
                  <h4 className="text-xl leading-8 font-medium text-black">
                    How can I reset my password?
                  </h4>
                </div>
                <div className="inline-flex items-start justify-start gap-2.5">
                  <h6 className="text-base leading-relaxed font-normal text-gray-600">
                    A.
                  </h6>
                  <p className="text-base leading-normal font-normal text-gray-600 lg:text-xs lg:leading-normal">
                    If you encounter any issues during the process, please
                    contact our customer support team for assistance.
                  </p>
                </div>
              </div>
            </div>
            <div className="group flex h-full w-full items-center justify-start rounded-lg border border-gray-200 p-5 transition-all duration-700 ease-in-out hover:border-gray-400">
              <div className="inline-flex flex-col items-start justify-center gap-2.5">
                <div className="inline-flex items-center justify-start gap-2.5">
                  <h4 className="text-xl leading-8 font-medium text-black">
                    Q.
                  </h4>
                  <h4 className="text-xl leading-8 font-medium text-black">
                    How do I update my profile information?
                  </h4>
                </div>
                <div className="inline-flex items-start justify-start gap-2.5">
                  <h6 className="text-base leading-relaxed font-normal text-gray-600">
                    A.
                  </h6>
                  <p className="text-base leading-normal font-normal text-gray-600 lg:text-xs lg:leading-normal">
                    If you encounter any issues or need assistance, please
                    contact our customer support team for help.
                  </p>
                </div>
              </div>
            </div>
            <div className="group flex h-full w-full items-center justify-start rounded-lg border border-gray-200 p-5 transition-all duration-700 ease-in-out hover:border-gray-400">
              <div className="inline-flex flex-col items-start justify-center gap-2.5">
                <div className="inline-flex items-center justify-start gap-2.5">
                  <h4 className="text-xl leading-8 font-medium text-black">
                    Q.
                  </h4>
                  <h4 className="text-xl leading-8 font-medium text-black">
                    Which is better short term or long term?
                  </h4>
                </div>
                <div className="inline-flex items-start justify-start gap-2.5">
                  <h6 className="text-base leading-relaxed font-normal text-gray-600">
                    A.
                  </h6>
                  <p className="text-base leading-normal font-normal text-gray-600 lg:text-xs lg:leading-normal">
                    The choice between short-term and long-term strategies
                    depends on your individual goals, risk tolerance, and
                    financial situation.
                  </p>
                </div>
              </div>
            </div>
            <div className="group flex h-full w-full items-center justify-start rounded-lg border border-gray-200 p-5 transition-all duration-700 ease-in-out hover:border-gray-400">
              <div className="inline-flex flex-col items-start justify-center gap-2.5">
                <div className="inline-flex items-center justify-start gap-2.5">
                  <h4 className="text-xl leading-8 font-medium text-black">
                    Q.
                  </h4>
                  <h4 className="text-xl leading-8 font-medium text-black">
                    How do I change my email address?
                  </h4>
                </div>
                <div className="inline-flex items-start justify-start gap-2.5">
                  <h6 className="text-base leading-relaxed font-normal text-gray-600">
                    A.
                  </h6>
                  <p className="text-base leading-normal font-normal text-gray-600 lg:text-xs lg:leading-normal">
                    To contact customer support, look for a "Contact us" or
                    "Help" button or link on the website or platform. You may be
                    able to email.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}