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 PostAudio from "@/components/blog/blog-post/PostAudio";

export const metadata: Metadata = {
  title: "Audio Post",
  description: `Audio posts, news, and insights from ${SITE_NAME}. SaaS, product, and tech startup topics.`,
};

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

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

      {/* main-sec */}
      <section className="main-sec2">
        <AnimImage />

        {/* page-banner */}
        <div className="page-banner">
          <div className="carousel-container">
            <div className="page-info">
              <div className="page-content v2">
                <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>
                    <a href="/blog-grid" title="">
                      Blog
                    </a>
                  </li>
                  <li className="dot" />
                  <li>Blog Details</li>
                </ul>
                <h1
                  className="title"
                  data-aos="fade-up"
                  data-aos-duration={900}
                  data-aos-delay={400}
                >
                  Top 2025 SaaS Trends &amp; Productivity Features for
                  Businesses
                </h1>
                <ul
                  className="bread-crumbs2"
                  data-aos="fade-up"
                  data-aos-duration={700}
                  data-aos-delay={400}
                >
                  <li>
                    <a href="#" title="">
                      Design
                    </a>
                  </li>
                  <li>
                    <a href="#" title="">
                      July 24, 2025
                    </a>
                  </li>
                  <li>
                    <a href="#comments" title="">
                      3 Comments
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        {/* End page-banner */}
      </section>
      {/* End main-sec */}

      {/* blog-detail-sec */}
      <section className="blog-detail-sec space">
        <div className="carousel-container">
          <PostAudio />
        </div>
      </section>
      {/* End blog-detail-sec */}

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

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