// ContactUsPage 
import Footer3 from "@/components/footers/Footer3";
import Header4 from "@/components/headers/Header4";
import Contact from "@/components/otherPages/Contact";
import React from "react";
import Link from "next/link";

export const metadata = {
  title: "Contact Us || Keystone Solutions",
  description:
    "Get in touch with Keystone Solutions for all your business process outsourcing needs and data solutions",
};

export default function ContactUsPage() {
  return (
    <>
      <div className="primary-3 bg-color-1">
        <div className="wrap-page-header">
          <Header4 />

          {/* Page Title Section */}
          <section className="page-title tf-spacing-47 bg-color-1">
            <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 text-dark">
                      Home
                    </Link>
                    <span className="separator text-body-2 mx-2">&gt;</span>
                    <span className="current-page text-body-2 text-primary">Contact Us</span>
                  </div>

                  {/* Page Title */}
                  <div className="page-title-content">
                    <h1 className="page-title-main display-4 mb-3">
                      Contact Us
                    </h1>
                    <p className="page-subtitle text-body-1 mb-0">
                      Get in touch with our team to discuss your business needs and 
                      discover how we can help you achieve your goals.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>

        <div className="main-content">
          <Contact />
        </div>
      </div>
      
      <Footer3 />
    </>
  );
}