import { Metadata } from "next";

import ContactUs from "@/components/pages/participant/contact-us/contact-us";
import { retrieveUserSession } from "@/lib/user-session";

export const metadata: Metadata = {
  title: "Contact us",
  description:
    "Get in touch with People for Research. Whether you have questions about signing up, participating, or how things work, we're here to help.",
  openGraph: {
    title: "Contact us",
    description:
      "Get in touch with People for Research. Whether you have questions about signing up, participating, or how things work, we're here to help.",
    images: [
      {
        url: "/global-assets/pfr-logo-og-participant.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-participant.svg",
    description:
      "Get in touch with People for Research. Whether you have questions about signing up, participating, or how things work, we're here to help.",
  },
};

export default async function ContactUsPage() {
  const { firstName, lastName, email } = (await retrieveUserSession()) || {};

  return <ContactUs email={email} firstName={firstName} lastName={lastName} />;
}