import { Metadata } from "next";

import LeftSectionImageHeadline from "@/components/common/left-section-image-headline";
import ResetPassword from "@/components/pages/participant/reset-password";

export const metadata: Metadata = {
  title: "Reset password",
  description:
    "Change your password securely and regain access to your People for Research account to explore the latest paid research studies and testing opportunities.",
  openGraph: {
    title: "Reset password",
    description:
      "Change your password securely and regain access to your People for Research account to explore the latest paid research studies and testing opportunities.",
    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: "Reset password",
    images: "/global-assets/pfr-logo-og-participant.svg",
    description:
      "Change your password securely and regain access to your People for Research account to explore the latest paid research studies and testing opportunities.",
  },
};

export const dynamic = "force-dynamic";

export default function ForgotPasswordPage() {
  return (
    <div className="flex flex-col xl:flex-row bg-participant-light dark:bg-[#383934]">
      <LeftSectionImageHeadline isSignup={false} />
      <ResetPassword />
    </div>
  );
}