"use client";

import React from "react";
import { motion } from "framer-motion";
import { TechBackground } from "@/components/TechBackground";

interface LegalLayoutProps {
  title: string;
  heroAction?: React.ReactNode;
  children: React.ReactNode;
}

export function LegalLayout({ title, heroAction, children }: LegalLayoutProps) {
  return (
    <div className="bg-slate-50 min-h-screen pt-40 pb-20 relative overflow-hidden">
      <TechBackground />
      <div className="container-custom relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ type: "spring", stiffness: 50, damping: 20 }}
          className="max-w-4xl mx-auto bg-white p-8 md:p-12 rounded-[2.5rem] shadow-sm border border-slate-100 relative overflow-hidden group"
        >
          <div className="tech-corner top-8 left-8 border-t-2 border-l-2 opacity-20" />
          <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2 opacity-20" />

          <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8 relative z-10">
            <h1 className="text-4xl font-extrabold text-primary">{title}</h1>
            {heroAction}
          </div>

          <div className="space-y-8 text-slate-600 leading-relaxed relative z-10 prose prose-slate max-w-none prose-h1:hidden prose-h2:text-xl prose-h2:font-bold prose-h2:text-primary prose-h2:mb-4">
            {children}
          </div>
        </motion.div>
      </div>
    </div>
  );
}