import type { Metadata } from "next";
import { Container } from "@/components/Container";
import { Breadcrumbs } from "@/components/Breadcrumbs";
import { ProposalForm } from "./ProposalForm";

export const metadata: Metadata = {
  title: "Propose a study — Research Portal",
  description:
    "Propose a new multicentre orthopaedic study. Reviewed by the OrthoGlobe steering committee within 30 days.",
};

export default function ProposeStudyPage() {
  return (
    <section className="bg-white pt-10 pb-16 md:pt-14 md:pb-24">
      <Container>
        <div className="mx-auto max-w-3xl">
          <Breadcrumbs
            items={[
              { label: "Research Portal", href: "/products/research" },
              { label: "Propose a study" },
            ]}
          />
          <div className="mt-6 inline-flex items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-mist)] px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
            Propose a study
          </div>
          <h1 className="mt-4 font-display text-[34px] md:text-[44px] font-extrabold leading-[1.05] tracking-[-0.02em] text-[var(--color-ink)]">
            Got a research question worth answering?
          </h1>
          <p className="mt-3 text-[15px] leading-relaxed text-[var(--color-slate)]">
            The Research Portal is hungry for good ideas. Share the question, the
            evidence gap, and what you&rsquo;d need to run it. The steering
            committee reviews submissions monthly and will be back to you within
            30 days. Good proposals become hosted studies with shared authorship
            across the collaboration.
          </p>

          <div className="mt-8 rounded-2xl border border-[var(--color-line)] bg-white p-6 shadow-sm md:p-8">
            <ProposalForm />
          </div>
        </div>
      </Container>
    </section>
  );
}
