import type { Metadata } from "next";
import Footer from "@/components/common/Footer";
import Header from "@/components/common/Header";
import FAQ from "@/components/home/FAQ";
import Pricing from "@/components/home/Pricing";
import ChooseUs from "@/components/pricing/ChoosUs";

export const metadata: Metadata = {
  title: "Pricing",
  description:
    "Compare Sasico pricing plans and choose a package that fits your startup stage, goals, and product requirements.",
};

export default async function Page() {
  return (
    <div className="wrapper">
      {/* Header */}
      <Header />
      {/* End header */}

      <section className="main-sec7 space-bottom">
        {/* 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}
              >
                Pricing Package
              </span>
              <h1
                className="title"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={400}
              >
                Affordable Packages Exceptional Results
              </h1>
              <p
                data-aos="fade-up"
                data-aos-duration={700}
                data-aos-delay={300}
              >
                Whether you’re just getting started or scaling fast, we’ve got a
                pricing plan that fits your needs transparent and flexible
                packages
              </p>
            </div>
          </div>
        </div>
        {/* End page-banner */}
        <div className="carousel-container">
          <div className="pricing-sec2">
            <Pricing />
          </div>
        </div>
      </section>
      {/* End Pricing Section */}

      {/* choose-us-sec */}
      <ChooseUs />
      {/* End choose-us-sec */}

      <section className="faq-sec3 space-bottom">
        <div className="carousel-container">
          <FAQ />
        </div>
      </section>

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