import type { Metadata } from "next";
import Image from "next/image";
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 AnimImage from "@/components/common/AnimImage";
import Intro from "@/components/about-us/Intro";
import WhyChoose from "@/components/about-us/WhyChoose";
import Testimonial from "@/components/about-us/Testimonial";
import UserStatistics from "@/components/about-us/UserStatistics";
import Team from "@/components/common/Team";

export const metadata: Metadata = {
  title: "About Us",
  description: `Learn about ${SITE_NAME} — our mission, team, and vision for SaaS and tech startup solutions.`,
};

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

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

      {/* page-banner3 */}
      <div className="main-sec2">
        <AnimImage />

        {/* page-banner */}
        <div className="page-banner">
          <div className="carousel-container">
            <div className="page-info">
              <div className="page-content">
                <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>About Us</li>
                </ul>
                <h1
                  className="title"
                  data-aos="fade-up"
                  data-aos-duration={900}
                  data-aos-delay={400}
                >
                  Empowering ideas with SaaS solutions
                </h1>
                <p
                  data-aos="fade-up"
                  data-aos-duration={700}
                  data-aos-delay={400}
                >
                  We specialize in building scalable, user-centric SaaS
                  solutions help startups and businesses transform ideas
                </p>
              </div>
              {/* End page content */}

              <div className="page-area space-md-top">
                <div className="row g-0">
                  <Intro />
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* End page-banner */}
      </div>
      {/* End page-banner3 */}

      {/* choose-us-sec */}
      <section className="choose-us-sec2 space">
        <div className="carousel-container">
          <div className="row">
            <WhyChoose />
          </div>
        </div>
      </section>
      {/* End choose-us-sec */}

      {/* brand-sec */}
      <section className="brand-sec">
        <div className="carousel-container">
          <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 brand2"
            data-aos="fade-up"
            data-aos-duration={900}
          >
            <Testimonial />
          </div>
        </div>
      </section>
      {/* End brand-sec */}

      {/* funfact-sec */}
      <section className="funfact-sec space">
        <div className="carousel-container">
          <div className="row">
            <UserStatistics />
          </div>
        </div>
      </section>
      {/* End funfact-sec */}

      {/* team-sec */}
      <section className="team-sec space-bottom">
        <div className="carousel-container">
          <div className="sec-title">
            <span
              className="sub-title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={300}
            >
              Team Member
            </span>
            <h2
              className="title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={400}
            >
              Talented team behind our digital services
            </h2>
            <p data-aos="fade-up" data-aos-duration={700} data-aos-delay={300}>
              Whether you&apos;re just getting started or scaling fast,
              we&apos;ve got a pricing plan that fits your needs. Our
              transparent and flexible packages are designed to grow with you.
            </p>
          </div>
          <div className="row">
            <Team />
          </div>
        </div>
      </section>
      {/* End team-sec */}

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

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