import React from "react";
import Link from "next/link";
import LegalNavigation from "@/components/legal-navigation";

export default function LegalPageLayout({ title, children }) {
  return (
    <main className="mx-auto min-h-[calc(100vh-57px)] max-w-3xl px-6 py-12 sm:py-16">
      <Link href="/login" className="text-sm font-medium text-teal-700 hover:underline">
        Back to sign in
      </Link>
      <article className="mt-6 rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-6 py-8 shadow-sm sm:px-10">
        <h1 className="text-3xl font-bold tracking-tight text-teal-700">{title}</h1>
        <div className="mt-8 space-y-7 text-base leading-relaxed text-gray-700">
          {children}
        </div>
      </article>
      <footer className="mt-8 border-t border-gray-200 pt-5">
        <LegalNavigation />
      </footer>
    </main>
  );
}