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 AnimImage from "@/components/common/AnimImage";
import Image from "next/image";
import Service from "@/components/services/Service";
import ContactSection from "@/components/common/ContactSection";

export const metadata: Metadata = {
  title: "Solutions",
  description: `SaaS solutions and services from ${SITE_NAME}. Designed for speed, scale, and success.`,
};

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

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

      {/* main-sec */}
      <section className="main-sec2 space-bottom">
        {/* bubble animation image fro background */}
        <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>Our Services</li>
                </ul>
                <h1
                  className="title"
                  data-aos="fade-up"
                  data-aos-duration={900}
                  data-aos-delay={400}
                >
                  Services designed for speed, scale &amp; success
                </h1>
                <p
                  data-aos="fade-up"
                  data-aos-duration={700}
                  data-aos-delay={400}
                >
                  Our services are designed to support your growth at every
                  stage from product development and seamless integrations
                </p>
              </div>
              {/* End page content */}

              <div className="page-area2 space-md-top">
                <div className="row">
                  <div className="col-lg-6">
                    <div
                      className="page-img6"
                      data-aos="fade-right"
                      data-aos-duration={900}
                      data-aos-delay={300}
                    >
                      <Image
                        src="/assets/images/hero/page2-1.png"
                        alt="Illustration showing business services concept"
                        width={630}
                        height={630}
                      />
                    </div>
                  </div>
                  <div className="col-lg-6">
                    <div
                      className="page-info2"
                      data-aos="fade-left"
                      data-aos-duration={900}
                      data-aos-delay={300}
                    >
                      <div className="page-img6">
                        <Image
                          src="/assets/images/hero/page2-2.png"
                          alt="Graphic representing data insights and business growth"
                          width={630}
                          height={300}
                        />
                      </div>
                      <div className="page-content2">
                        <h2 className="title">
                          Empowering your business with data insights
                        </h2>
                        <p>
                          We provide everything you need to launch, scale, and
                          succeed.
                        </p>
                        <a href="#" className="btn-style1 v2">
                          Request a Call
                          <span>
                            <Image
                              src="/assets/images/icon/arrow.svg"
                              alt="Arrow Icon"
                              width={14}
                              height={14}
                            />
                          </span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* End page-banner */}
      </section>
      {/* End main-sec */}

      {/* service-sec */}
      <section className="service-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}
            >
              Service We provides
            </span>
            <h2
              className="title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={400}
            >
              From idea to impact—We’ve got you covered
            </h2>
          </div>
          <div className="row">
            <Service />
          </div>
        </div>
      </section>
      {/* End service-sec */}

      {/* contct-sec */}
      <section className="contct-sec space">
        <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 */}
    </>
  );
}