import type { Metadata } from "next";
import Image from "next/image";
import { SITE_NAME, SITE_TITLE_DEFAULT } from "@/data/site";
import Footer from "@/components/footer/Footer";
import Header from "@/components/header/Header";
import MobileMenu from "@/components/header/MobileMenu";
import CallToAction from "@/components/common/CallToAction";
import AnimImage from "@/components/common/AnimImage";
import Hero from "@/components/home/Hero";
import Testimonial from "@/components/home/Testimonial";
import Feature1 from "@/components/home/Feature1";
import Feature2 from "@/components/home/Feature2";
import StartedSteps from "@/components/home/StartedSteps";
import Solution from "@/components/home/Solution";
import Solution2 from "@/components/home/Solution2";
import Pricing from "@/components/pricing/Pricing";
import Testimonial2 from "@/components/home/Testimonial2";
import ContactSection from "@/components/common/ContactSection";

export const metadata: Metadata = {
  title: {
    absolute: SITE_TITLE_DEFAULT,
  },
  description: `Welcome to ${SITE_NAME}. SaaS software, analytics, and tech startup Next.js template for your product.`,
};

const iconImgStyle = { width: "auto", height: "auto" } as const;

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

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

      <section className="main-sec space-md-bottom">
        <AnimImage />

        {/* hero-sec */}
        <Hero />
        {/* End hero-sec */}
      </section>

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

      {/* feature-sec */}
      <section className="feature-sec space">
        <div className="carousel-container">
          <Feature1 />
        </div>
      </section>
      {/* End feature-sec */}

      {/* feature-sec2 */}
      <section className="feature-sec2 space">
        <div className="carousel-container">
          <div className="sec-title white">
            <span
              className="sub-title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={300}
            >
              Best SaaS Features
            </span>
            <h2
              className="title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={400}
            >
              Intelligent Features. Real Results.
            </h2>
          </div>
          <div className="row">
            <Feature2 />
          </div>
        </div>
      </section>
      {/* End feature-sec2 */}

      {/* intigration-sec */}
      <section className="intigration-sec 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}
            >
              Integration &amp; Tools
            </span>
            <h2
              className="title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={300}
            >
              Integrate with Top Tools
            </h2>
            <p data-aos="fade-up" data-aos-duration={700} data-aos-delay={300}>
              Seamlessly connect your workflow with the industry&apos;s leading
              tools. Whether it&apos;s CRM platforms, communication apps, or
              analytics software, our system is designed
            </p>
            <a
              href="#"
              className="btn-style1 v4"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={400}
            >
              Explore All Integration
              <span>
                <Image
                  src="/assets/images/icon/arrow.svg"
                  alt="arrow icon"
                  width={14}
                  height={14}
                  style={iconImgStyle}
                />
              </span>
            </a>
          </div>
          <div
            className="intelligent-img"
            data-aos="zoom-in"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            <Image
              src="/assets/images/event/int1-1.svg"
              alt="integration tools connection illustration"
              width={1200}
              height={600}
              style={{ width: "100%", height: "auto" }}
            />
          </div>
        </div>
      </section>
      {/* End intigration-sec */}

      {/* choose-us-sec */}
      <section className="choose-us-sec">
        <div className="carousel-container">
          <div className="choose-info">
            <div className="sec-title white">
              <span
                className="sub-title"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={300}
              >
                How It Works
              </span>
              <h2
                className="title"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={400}
              >
                Easy Steps to Get Started
              </h2>
            </div>
            <div className="row">
              <StartedSteps />
            </div>
          </div>
        </div>
      </section>
      {/* End choose-us-sec */}

      {/* feature-sec3 */}
      <section className="feature-sec3 space">
        <div className="carousel-container">
          <div className="row">
            <Solution />
          </div>
        </div>
      </section>
      {/* End feature-sec3 */}

      {/* feature-sec4 */}
      <section className="feature-sec4 space-bottom">
        <div className="carousel-container">
          <div className="row">
            <Solution2 />
          </div>
        </div>
      </section>
      {/* End feature-sec4 */}

      {/* pricing-sec */}
      <section className="pricing-sec space">
        <div className="carousel-container">
          <div className="sec-title white">
            <span
              className="sub-title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={300}
            >
              Choose a plan
            </span>
            <h2
              className="title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={400}
            >
              Flexible Pricing for Every Stage
            </h2>
            <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. Our transparent and flexible
              packages are designed
            </p>
          </div>
          <Pricing />
        </div>
      </section>
      {/* End pricing-sec */}

      {/* testimonial-sec */}
      <section className="testimonial-sec">
        <div className="container-fluid">
          <div className="sec-title">
            <span
              className="sub-title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={300}
            >
              Our Testimonials
            </span>
            <h2
              className="title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={400}
            >
              Success Stories From Our (Clients) Community
            </h2>
            <p data-aos="fade-up" data-aos-duration={700} data-aos-delay={300}>
              Trusted by over 2.5 million companies worldwide
            </p>
          </div>
          <div
            className="testi"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={400}
          >
            <Testimonial2 />
          </div>
        </div>
      </section>
      {/* End testimonial-sec */}

      {/* contct-sec */}
      <section className="contct-sec space" id="Contact">
        <div className="carousel-container">
          <div className="row">
            <ContactSection />
          </div>
        </div>
      </section>
      {/* End contct-sec */}

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

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