import type { Metadata } from "next";
import Header from "@/components/common/Header";
import Hero from "@/components/home/Hero";
import BrandSection from "@/components/home/BrandSection";
import Features from "@/components/home/Features";
import About from "@/components/home/About";
import Benefits from "@/components/home/Benefits";
import Solutions from "@/components/home/Solutions";
import Workflow from "@/components/home/Workflow";
import AITools from "@/components/home/AITools";
import IntegrationTools from "@/components/home/IntegrationTools";
import Pricing from "@/components/home/Pricing";
import Testimonials from "@/components/home/Testimonials";
import FAQ from "@/components/home/FAQ";
import CTABanner from "@/components/home/CTABanner";
import Footer from "@/components/common/Footer";

export const metadata: Metadata = {
  title: "Home",
  description:
    "Launch and scale your startup with Sasico's modern SaaS solutions, automation, integrations, and growth-focused services.",
};

export default function Page() {
  return (
    <div>
      <div className="wrapper">
        {/* Main Section */}
        <section className="main-sec space-bottom">
          <Header />
          <Hero />
          <BrandSection />
          <Features />
        </section>

        {/* About Section */}
        <About />

        {/* Benefits Sections */}
        <Benefits />

        {/* Main Section 2 with Solutions and Workflow */}
        <section className="main-sec2 space">
          <Solutions />
          <Workflow />
        </section>

        {/* AI Tools Section */}
        <AITools />

        {/* Integration Tools Section */}
        <IntegrationTools />

        {/* Pricing Section */}

        <section className="pricing-sec space" id="Pricing">
          <div className="carousel-container">
            <div className="sec-title">
              <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&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
              </p>
            </div>
            <Pricing />
          </div>
        </section>

        {/* Testimonials Section */}
        <Testimonials />

        {/* Main Section 3 with FAQ and CTA */}
        <section className="main-sec3">
          <div className="carousel-container">
            <div className="main-info3 space">
              <FAQ />
              <CTABanner />
            </div>
          </div>
        </section>

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