/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: components/LegalPage.tsx
 * Description: Shared layout for legal documents (Terms of Service, Privacy Policy)
 */

import type { ReactNode } from "react";
import Container from "@/components/Container";
import SectionHeading from "@/components/SectionHeading";

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

export default function LegalPage({
  title,
  lead,
  lastUpdated,
  sections,
  children,
}: {
  title: string;
  lead: string;
  lastUpdated: string;
  sections: LegalSection[];
  children?: ReactNode;
}) {
  return (
    <>
      <section className="relative overflow-hidden border-b border-line">
        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />
        <Container className="relative py-20 sm:py-24">
          <SectionHeading as="h1" title={title} lead={lead} />
          <p className="mt-6 font-mono text-xs uppercase tracking-[0.2em] text-ink-faint">
            {lastUpdated}
          </p>
        </Container>
      </section>

      <section className="py-16 sm:py-20">
        <Container className="max-w-3xl">
          <div className="space-y-10">
            {sections.map((section) => (
              <section key={section.title}>
                <h2 className="font-display text-xl font-semibold text-ink">
                  {section.title}
                </h2>
                {section.paragraphs.map((paragraph) => (
                  <p key={paragraph.slice(0, 40)} className="mt-3 leading-relaxed text-ink-soft">
                    {paragraph}
                  </p>
                ))}
              </section>
            ))}
            {children}
          </div>
        </Container>
      </section>
    </>
  );
}