import { Container } from "@/components/ui";

export interface LegalSection {
  heading: string;
  paragraphs: string[];
}

/**
 * Gemeinsames Layout fuer alle rechtlichen Seiten (Impressum, Datenschutz,
 * AGB, Widerrufsbelehrung, Versand und Zahlung). Inhalte sind Platzhalter
 * und muessen vor Live-Gang durch anwaltlich geprueften Text ersetzt werden.
 */
export function LegalPage({
  title,
  noticeText,
  sections,
}: {
  title: string;
  /** Optional — leer lassen, wenn kein Hinweis (mehr) angezeigt werden soll. */
  noticeText: string;
  sections: LegalSection[];
}) {
  return (
    <div className="py-20">
      <Container className="max-w-3xl">
        <h1 className="text-3xl text-forest">{title}</h1>
        {noticeText ? (
          <p className="mt-2 text-xs text-honey-dark tracking-wide-caps">{noticeText}</p>
        ) : null}
        <div className="mt-10 space-y-10">
          {sections.map((section) => (
            <section key={section.heading}>
              <h2 className="text-lg text-forest">{section.heading}</h2>
              <div className="mt-3 space-y-3 text-sm text-ink/70 leading-relaxed">
                {section.paragraphs.map((p, i) => (
                  <p key={i}>{p}</p>
                ))}
              </div>
            </section>
          ))}
        </div>
      </Container>
    </div>
  );
}