import MainSec3Footer from "@/components/common/main-sec3-footer";
import SiteHeader from "@/components/common/site-header";
import PricingTwo from "@/components/pricing/prcing-two";
import PricingSection from "@/components/pricing/pricing-section";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Pricing",
  description: "Plans and pricing — mapped from pricing.html",
};

export default function PricingPage() {
  return (
    <>
      <SiteHeader />
      {/* main-sec4 */}
      <section className="main-sec4 v2">
        {/* hero-sec */}
        <div className="page-banner">
          <PricingSection />
        </div>
        {/* End hero-sec */}

        {/* pricing-compare */}
        <section className="pricing-compare space">
          <div className="carousel-container">
            <div className="sec-title">
              <span
                className="sub-title"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={300}
              >
                Compare Pricing Plan
              </span>
              <h2
                className="title"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={400}
              >
                Conversion-friendly Compare CRM Plans outline
              </h2>
            </div>
            <PricingTwo />
          </div>
        </section>

        {/* End pricing-compare */}
      </section>
      {/* End main-sec4 */}
      <MainSec3Footer />
    </>
  );
}