import { Metadata } from "next";
import Header from "@/app/components/common/header/Header";
import FeatureHeroSection from "@/app/components/feature/FeatureHeroSection";
import FeatureIntegrationSection from "@/app/components/common/FeatureIntegrationSection";
import FeatureQuoteSection from "@/app/components/feature/FeatureQuoteSection";
import FeatureSectionBlock from "@/app/components/feature/FeatureSectionBlock";
import FeatureWhyChooseSection from "@/app/components/feature/FeatureWhyChooseSection";
import { featureSections } from "@/data/featureData";
import Footer from "../components/common/footer/Footer";
import CallToAction from "../components/common/CallToAction";

export const metadata: Metadata = {
  title: "Features",
};

export default function FeaturePage() {
  return (
    <>
      {/*********************************
   		Code Start From Here
	******************************** */}

      <div className="wrapper">
        <Header variant="v2" />

        <FeatureHeroSection />

        {featureSections.slice(0, 2).map((section) => (
          <FeatureSectionBlock section={section} key={section.id} />
        ))}

        {/* main-sec3 */}
        <section className="main-sec3 space">
          <FeatureWhyChooseSection />
          <FeatureQuoteSection />
        </section>
        {/* End main-sec3 */}

        <FeatureSectionBlock section={featureSections[2]} />

        {/*  integration-sec  */}
        <section className="integration-sec v2 space-bottom">
          <FeatureIntegrationSection />
        </section>

        {/*  End integration-sec  */}

        {/*  cta-sec  */}
        <CallToAction />
        {/*  End cta-sec  */}

        {/*  footer-style1  */}
        <Footer />
        {/*  End footer-style1  */}
      </div>

      {/*********************************
        Code End  Here 
       ******************************** */}
    </>
  );
}