import type { ReactNode } from "react";
import Nav from "@/components/nav";
import Footer from "@/components/footer";

export default function LegalLayout({
  title,
  updated,
  children,
}: {
  title: string;
  updated: string;
  children: ReactNode;
}) {
  return (
    <>
      <Nav />
      <main className="flex-1 pt-16">
        <div className="mx-auto w-full max-w-3xl px-5 py-16 sm:px-8 sm:py-24">
          <h1 className="font-display text-4xl font-medium tracking-[-0.02em] sm:text-5xl">
            {title}
          </h1>
          <p className="mt-3 text-sm text-ink-soft">Stand: {updated}</p>

          <div className="mt-8 rounded-2xl border border-clay/30 bg-clay-soft px-5 py-4 text-sm font-medium leading-relaxed text-clay">
            <strong>Hinweis für den Pre-Launch:</strong> Vor der öffentlichen
            Veröffentlichung müssen die Angaben zum Diensteanbieter und eine
            ladungsfähige Geschäftsanschrift vollständig ergänzt werden.
          </div>

          <div className="mt-10 space-y-8 text-base leading-relaxed text-ink-soft [&_h2]:font-display [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:text-ink [&_a]:text-[#0d7a57] [&_a]:underline [&_a]:underline-offset-2 [&_ul]:list-disc [&_ul]:space-y-1 [&_ul]:pl-5">
            {children}
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}