import Link from "next/link";
import RegistrationForm from "@/app/components/forms/RegistrationForm";
import data from "@/app/data/registration.json";

export default function RegistrationPage() {
  return (
    <main className="pt-[160px] pb-[80px] px-[var(--spacing-gutter)] flex justify-center">
      <div className="w-full max-w-[1280px]">
        <div className="max-w-[800px] mx-auto">
          <div className="mb-[32px]">
            <Link
              className="group flex items-center gap-2 text-outline hover:text-primary transition-colors"
              href="/"
            >
              <span className="material-symbols-outlined text-[20px] transition-transform group-hover:-translate-x-1">
                arrow_back
              </span>
              Back to Home
            </Link>
          </div>

          <div className="mb-[32px]">
            <h1 className="font-[var(--font-display-lg)] text-[clamp(2.25rem,3vw+1rem,4.5rem)] text-on-surface mb-2 leading-[1.1]">
              {data.title}
            </h1>
            <p className="text-on-surface-variant text-lg">{data.subtitle}</p>
          </div>

          <div className="glass-panel p-[32px] md:p-12 rounded-xl shadow-2xl relative overflow-hidden">
            <div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
            <RegistrationForm data={data} />
          </div>
        </div>
      </div>
    </main>
  );
}