import type { Metadata } from "next";
import Link from "next/link";
import { Container } from "@/components/Container";
import { Button } from "@/components/Button";
import { CheckCircle2 } from "lucide-react";

export const metadata: Metadata = {
  title: "Application received",
  robots: { index: false, follow: false },
};

export default function ResearchApplicationThanksPage() {
  return (
    <section className="bg-white py-16 md:py-24">
      <Container>
        <div className="mx-auto max-w-xl text-center">
          <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
            <CheckCircle2 className="h-8 w-8" aria-hidden />
          </div>
          <h1 className="mt-6 font-display text-[32px] md:text-[40px] font-extrabold leading-[1.1] tracking-[-0.02em] text-[var(--color-ink)]">
            Application received.
          </h1>
          <p className="mt-3 text-[15px] leading-relaxed text-[var(--color-slate)]">
            Thanks for applying to collaborate. We&rsquo;ve emailed you a
            receipt. A study coordinator will review your application and be in
            touch within 14 days.
          </p>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <Button href="/products/research/studies">Back to studies</Button>
            <Link
              href="/products/research"
              className="inline-flex items-center rounded-lg border border-[var(--color-line)] bg-white px-4 py-2 text-[13px] font-semibold text-[var(--color-ink)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
            >
              Research Portal home
            </Link>
          </div>
        </div>
      </Container>
    </section>
  );
}
