import { ReactNode } from "react";

type Props = {
  eyebrow: string;
  title: string;
  description: string;
  children: ReactNode;
};

export function LegalShell({ eyebrow, title, description, children }: Props) {
  return (
    <div className="space-y-6">
      <header className="rounded-[1.9rem] border border-[#ffdede] bg-[linear-gradient(135deg,#fffafa_0%,#fff0f0_55%,#ffe7e7_100%)] p-6 shadow-[0_20px_42px_rgba(49,18,18,0.1)] md:p-8">
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--accent-3)]">{eyebrow}</p>
        <h1 className="mt-2 font-serif text-4xl text-[var(--foreground)] md:text-5xl">{title}</h1>
        <p className="mt-3 max-w-3xl text-[var(--muted)]">{description}</p>
      </header>

      <section className="rounded-[1.5rem] border border-[#ffe0e0] bg-white p-6 shadow-[0_14px_32px_rgba(49,18,18,0.08)] md:p-8">
        <div className="prose max-w-none text-[var(--muted)] prose-headings:font-serif prose-headings:text-[var(--foreground)] prose-strong:text-[var(--foreground)]">
          {children}
        </div>
      </section>
    </div>
  );
}