import { SectionContainer } from "@/components/shared/SectionContainer";
import { PageContainer } from "@/components/shared/PageContainer";
import { RevealOnView } from "@/components/shared/RevealOnView";
import { LegalSection, legalEffectiveDate } from "@/data/legal";

interface LegalContentProps {
  sections: LegalSection[];
}

/**
 * LegalContent — shared renderer for Privacy and Terms pages.
 * Uses the site's spacing, container, typography, and reveal animation.
 */
export function LegalContent({ sections }: LegalContentProps) {
  return (
    <SectionContainer paddingY="lg" className="bg-white px-[20px]">
      <PageContainer className="max-w-[820px]">
        <p className="mb-[40px] text-[14px] font-semibold uppercase tracking-[0.1em] text-tenext-teal">
          Effective {legalEffectiveDate}
        </p>

        <div className="flex flex-col gap-[40px]">
          {sections.map((section, index) => (
            <RevealOnView key={section.heading} delay={index * 60}>
              <h2 className="mb-[16px] font-[var(--font-sora)] text-[24px] font-bold leading-[1.25] text-tenext-dark">
                {section.heading}
              </h2>
              {section.body.map((paragraph, i) => (
                <p
                  key={i}
                  className="mb-[14px] text-[16px] leading-[1.8] text-tenext-text-muted"
                >
                  {paragraph}
                </p>
              ))}
            </RevealOnView>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}