import type { Metadata } from "next";
import { SITE_NAME } from "@/data/site";
import CallToAction from "@/components/common/CallToAction";
import Footer from "@/components/footer/Footer";
import Header from "@/components/header/Header";
import MobileMenu from "@/components/header/MobileMenu";
import Pricing from "@/components/pricing/Pricing";
import CRMPlanPricing from "@/components/pricing/CRMPlanPricing";
import Image from "next/image";
import Accordion from "@/components/accordion/Accordion";

export const metadata: Metadata = {
  title: "Pricing",
  description: `Pricing plans and options from ${SITE_NAME}. Flexible SaaS pricing for every stage.`,
};

export default function Page() {
  return (
    <>
      {/* Header start */}
      <Header />
      {/* Header-end */}

      {/* MobileMenu start */}
      <MobileMenu />

      {/* page-banner */}
      <div className="page-banner">
        <div className="carousel-container">
          <div className="page-info">
            <div className="page-content v5">
              <ul
                className="bread-crumbs"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={300}
              >
                <li>
                  <a href="/" title="">
                    Home
                  </a>
                </li>
                <li className="dot" />
                <li>Pricing Table</li>
              </ul>
              <h1
                className="title"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={400}
              >
                Flexible Pricing for Every Stage
              </h1>
              <p
                data-aos="fade-up"
                data-aos-duration={700}
                data-aos-delay={400}
              >
                Whether you’re just getting started or scaling fast, we’ve got a
                pricing plan that fits your needs. Our transparent and flexible
                packages are designed
              </p>
            </div>
          </div>
        </div>
      </div>
      {/* End page-banner */}

      {/* pricing-sec2 */}
      <section className="pricing-sec2 space-bottom">
        <div className="carousel-container">
          <Pricing />
        </div>
      </section>
      {/* End pricing-sec2 */}

      {/* 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>

          <div
            className="pricing-info3"
            data-aos="zoom-in"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            <CRMPlanPricing />
          </div>
        </div>
      </section>
      {/* End pricing-compare */}

      {/* faq-sec */}
      <section className="faq-sec space-top 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}
            >
              Have Any Questions on Minds!
            </span>
            <h2
              className="title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={400}
            >
              Frequently Asked Questions
            </h2>
            <p data-aos="fade-up" data-aos-duration={700} data-aos-delay={400}>
              Our Frequently Asked Questions section is designed to help you get
              clarity before starting your project curious about pricing,
              revisions
            </p>
          </div>
          {/* End sec title */}

          <div className="row">
            <div className="col-lg-6">
              <Accordion />
            </div>
            {/* End col-lg-6 */}

            <div className="col-lg-6">
              <div
                className="faq-img"
                data-aos="fade-left"
                data-aos-duration={900}
                data-aos-delay={300}
              >
                <Image
                  src="/assets/images/event/faq1-1.png"
                  alt="faq image"
                  width={630}
                  height={490}
                />
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* End faq-sec */}

      {/* CallToAction area start */}
      <CallToAction />
      {/* CallToAction area start */}

      {/* Footer area start */}
      <Footer />
      {/* Footer area start */}
    </>
  );
}