import type { ReactNode } from 'react';
import Link from 'next/link';
import { ArrowLeft } from 'lucide-react';

export default function LegalLayout({ children }: { children: ReactNode }) {
  return (
    <div className="relative min-h-screen bg-[#050505] text-gray-100">
      <div className="pointer-events-none absolute inset-0 overflow-hidden">
        <div className="absolute -top-40 left-1/2 -translate-x-1/2 h-[32rem] w-[32rem] rounded-full bg-violet-500/10 blur-3xl" />
        <div className="absolute bottom-0 right-0 h-96 w-96 rounded-full bg-fuchsia-500/10 blur-3xl" />
      </div>

      <div className="relative z-10 mx-auto max-w-3xl px-6 py-16 lg:py-24">
        <Link
          href="/"
          className="mb-10 inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/[0.02] px-4 py-2 text-xs text-gray-300 backdrop-blur-md transition-all duration-300 hover:-translate-y-0.5 hover:border-violet-500/40 hover:text-white"
        >
          <ArrowLeft className="h-3.5 w-3.5" />
          На главную
        </Link>

        <article className="rounded-[1.5rem] border border-white/5 bg-white/[0.02] p-8 shadow-[0_0_40px_rgba(139,92,246,0.08)] backdrop-blur-xl md:p-12">
          {children}
        </article>
      </div>
    </div>
  );
}