import type { Metadata } from "next";
import Footer from "@/components/common/Footer";
import Header from "@/components/common/Header";
import FAQ from "@/components/home/FAQ";
import HeroSection from "@/components/service/HeroSection";
import MarketingSection from "@/components/service/MarketingSection";
import ServiceListSection from "@/components/service/ServiceListSection";
import SkillsSection from "@/components/service/SkillsSection";

export const metadata: Metadata = {
  title: "Services",
  description:
    "Explore Sasico services including product strategy, development, marketing, and technical support for growing startups.",
};

export default async function Page() {
  return (
    <div className="wrapper">
      {/* Header */}
      <Header />
      {/* End header */}

      {/* Hero Section */}
      <HeroSection />
      {/* End Hero Section */}

      {/* Marketing Section */}
      <MarketingSection />
      {/* End Marketing Section */}

      {/* Service List Section */}
      <ServiceListSection />
      {/* End Service List Section */}

      {/* Skills Section */}
      <SkillsSection />
      {/* End Skills Section */}

      {/* FAQ Section */}
      <section className="main-sec3">
        <div className="carousel-container">
          <div className="main-info3 space">
            <FAQ />
          </div>
        </div>
      </section>
      {/* End FAQ Section */}

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