import { Metadata } from "next";

import Footer from "@/components/common/footer";
import ClientNavbar from "@/components/pages/client/common/client-navbar";

export const metadata: Metadata = {
  title: "Contact us",
  description:
    "Get in touch with People for Research to discuss your user recruitment needs. Whether you need participants for quantitative or qualitative research, we are here to support your project.",
  openGraph: {
    title: "Contact us",
    description:
      "Get in touch with People for Research to discuss your user recruitment needs. Whether you need participants for quantitative or qualitative research, we are here to support your project.",
    images: [
      {
        url: "/global-assets/pfr-logo-og-client.svg",
        alt: "People for Research logo, featuring a person inside a circle, representing a focus on human-centered research and activities.",
        width: 200,
        height: 150,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Contact us",
    images: "/global-assets/pfr-logo-og-client.svg",
    description:
      "Get in touch with People for Research to discuss your user recruitment needs. Whether you need participants for quantitative or qualitative research, we are here to support your project.",
  },
};

export default function ContactUsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex flex-col min-h-screen bg-others-mistyGray dark:bg-jet">
      <ClientNavbar />
      <main className="flex-grow" id="main-content">
        {children}
      </main>
      <Footer source="client" />
    </div>
  );
}