import type { Metadata } from "next";
import Footer from "@/components/common/Footer";
import Header from "@/components/common/Header";
import FAQ from "@/components/help/FAQ";

export const metadata: Metadata = {
  title: "Help",
  description:
    "Find answers to common questions about Sasico services, pricing, and support in our help center.",
};

export default async function Page() {
  return (
    <div className="wrapper">
      {/* main-sec4 */}
      <section className="main-sec6 ">
        {/* Header */}
        <Header useThemeLogos />
        {/* End header */}

        {/* page-banner */}
        <div className="page-banner">
          <div className="carousel-container">
            <div className="page-content">
              <span
                className="sub-title"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={300}
              >
                Have Any Question?
              </span>
              <h1
                className="title"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={400}
              >
                Frequently Asked Question
              </h1>
              <p
                data-aos="fade-up"
                data-aos-duration={700}
                data-aos-delay={300}
              >
                We understand that launching and growing a startup comes with a
                lot of questions—and we’re here to help Frequently Asked
                Questions
              </p>
            </div>
          </div>
        </div>
        {/* End page-banner */}
      </section>
      {/* End main-sec4 */}

      {/* faq-sec2 */}
      <section className="faq-sec2 space-bottom">
        <div className="carousel-container">
          <div className="who-we-are-tabs">
            <ul
              className="nav nav-tabs"
              id="myTab"
              role="tablist"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={300}
            >
              <li className="nav-item" role="presentation">
                <button
                  className="nav-link active"
                  id="home-tab"
                  data-bs-toggle="tab"
                  data-bs-target="#home"
                  type="button"
                  role="tab"
                  aria-controls="home"
                  aria-selected="true"
                >
                  General Questions
                </button>
              </li>
              <li className="nav-item" role="presentation">
                <button
                  className="nav-link"
                  id="profile-tab"
                  data-bs-toggle="tab"
                  data-bs-target="#profile"
                  type="button"
                  role="tab"
                  aria-controls="profile"
                  aria-selected="false"
                >
                  Pricing Package
                </button>
              </li>
              <li className="nav-item" role="presentation">
                <button
                  className="nav-link"
                  id="contact-tab"
                  data-bs-toggle="tab"
                  data-bs-target="#contact"
                  type="button"
                  role="tab"
                  aria-controls="contact"
                  aria-selected="false"
                >
                  Help and support
                </button>
              </li>
            </ul>
            <div className="tab-content" id="myTabContent">
              <div
                className="tab-pane fade show active"
                id="home"
                role="tabpanel"
                aria-labelledby="home-tab"
              >
                <FAQ />
              </div>
              <div
                className="tab-pane fade"
                id="profile"
                role="tabpanel"
                aria-labelledby="profile-tab"
              >
                <FAQ />
              </div>
              <div
                className="tab-pane fade"
                id="contact"
                role="tabpanel"
                aria-labelledby="contact-tab"
              >
                <FAQ />
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* End faq-sec2 */}

      {/* Footer */}
      <Footer />
      {/* End Footer */}
    </div>
  );
}