import { Metadata } from "next";
import Header from "@/app/components/common/header/Header";
import Footer from "@/app/components/common/footer/Footer";
import CallToAction from "@/app/components/common/CallToAction";
import FeatureIntegrationSection from "@/app/components/common/FeatureIntegrationSection";
import PricingCompareSection from "@/app/components/home/PricingPlansSection";
import BrandCarousel from "@/app/components/home/BrandCarousel";
import HeroSection from "@/app/components/home/HeroSection";
import WhyChooseSection from "@/app/components/home/WhyChooseSection";
import CoreFeaturesSection from "@/app/components/home/CoreFeaturesSection";
import ChooseUsSection from "@/app/components/home/ChooseUsSection";
import TestimonialSection from "@/app/components/home/TestimonialSection";
import SecuritySection from "@/app/components/home/SecuritySection";
import BlogSection from "@/app/components/home/BlogSection";

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

export default function Home() {
  return (
    <>
      <div className="wrapper">
        <Header />

        <section className="hero-sec">
          <HeroSection />
        </section>

        <section className="why-choose-sec space">
          <WhyChooseSection />
        </section>
        {/* End Whychoose us */}

        {/*  brand-sec  */}
        <section className="brand-sec">
          <div className="container-fluid">
            <div className="brand-info">
              <h2
                className="sub-title"
                data-aos="fade-down"
                data-aos-duration="900"
                data-aos-delay="200"
              >
                Trusted by over 1.7 million companies worldwide
              </h2>
              <BrandCarousel />
            </div>
          </div>
        </section>
        {/*  End brand-sec  */}

        <section className="feature-sec space">
          <CoreFeaturesSection />
        </section>

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

        <section className="mains-sec">
          <ChooseUsSection />
          <div className="pricing-sec space">
            <div className="carousel-container">
              <PricingCompareSection />
            </div>
          </div>
        </section>
        {/* End feature sec */}

        <TestimonialSection />
        {/* End testimonial section */}

        <SecuritySection />
        {/* End security section */}

        <BlogSection />
        {/* End Blog section */}

        <CallToAction />
        {/* End Calltoaction section */}

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