import Contact from "@/components/common/Contact";
import Faqs from "@/components/common/Faqs";
import Pricing from "@/components/common/Pricing";
import Testimonials from "@/components/common/Testimonials";
import Footer3 from "@/components/footers/Footer3";
import Header4 from "@/components/headers/Header4";
import Link from "next/link";
import ServiceDetails from "@/components/otherPages/ServiceDetails";
import React from "react";
import { allServices } from "@/data/services";

export const metadata = {
  title: "Service Details || Keystone Solutions",
  description:
    "Explore our comprehensive business process outsourcing services and data solutions at Keystone Solutions",
};

export default async function ServiceDetailsPage({ params }) {
  const { id } = await params;

  const service = allServices.filter((p) => p.id == id)[0] || allServices[0];

  return (
    <>
      <div className="primary-3">
        <div className="wrap-page-header">
          <Header4 />

          {/* Page Title Section */}
          <section className="page-title tf-spacing-47">
            <div className="tf-container">
              <div className="row">
                <div className="col-12">
                  {/* Breadcrumb */}
                  <div className="breadcrumb-trail mb-3">
                    <Link href="/" className="home-link text-body-2">
                      Home
                    </Link>
                    <span className="separator text-body-2 mx-2">&gt;</span>
                    <span className="text-body-2">Services</span>
                    <span className="separator text-body-2 mx-2">&gt;</span>
                    <span 
                      className="current-page text-body-2"
                      dangerouslySetInnerHTML={{ __html: service.title }}
                    ></span>
                  </div>

                  
                </div>
              </div>
            </div>
          </section>
        </div>

        <div className="main-content style-1">
          <ServiceDetails service={service} />
          {/* <Pricing parentClass="section tf-spacing-13" />
          <Testimonials />
          <Faqs parentClass="section-faqs style-1 tf-spacing-8" />
          <Contact /> */}
        </div>
      </div>
      
      <Footer3 />
    </>
  );
}