import type { ReactNode } from "react";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";

type Props = {
  title: string;
  subtitle?: string;
  lastUpdated?: string;
  children: ReactNode;
};

/**
 * Shared layout for legal / static content pages (privacy, terms,
 * cookie, contact, disclaimer). Centered prose container with the
 * brand ornament strip and a back link.
 */
export function LegalLayout({ title, subtitle, lastUpdated, children }: Props) {
  return (
    <div className="bg-bg-base relative">
      <div className="bagua-decor absolute inset-0 opacity-20" aria-hidden="true" />
      <div className="max-w-container relative mx-auto px-4 py-12 lg:px-6 lg:py-20">
        <Link
          href="/"
          className="text-ink-secondary hover:text-brand-gold mb-8 inline-flex items-center gap-1.5 text-sm"
        >
          <ArrowLeft className="h-4 w-4" aria-hidden="true" />
          Về trang chủ
        </Link>

        <div className="mb-10 text-center">
          <div className="ornament-line text-brand-gold-soft mb-2 text-xs tracking-[0.22em] uppercase">
            Pháp lý
          </div>
          <h1 className="font-display text-3xl font-semibold lg:text-5xl">{title}</h1>
          {subtitle ? (
            <p className="text-ink-secondary mx-auto mt-3 max-w-[58ch] text-sm lg:text-base">
              {subtitle}
            </p>
          ) : null}
          {lastUpdated ? (
            <p className="text-ink-muted mt-2 text-xs">Cập nhật: {lastUpdated}</p>
          ) : null}
        </div>

        <article className="prose prose-invert mx-auto max-w-3xl">
          <div className="text-ink-primary space-y-5 text-sm leading-relaxed lg:text-base">
            {children}
          </div>
        </article>
      </div>
    </div>
  );
}

/**
 * Section heading helper to keep all legal pages visually consistent.
 */
export function LegalSection({ title, children }: { title: string; children: ReactNode }) {
  return (
    <section className="mb-8">
      <h2 className="font-display text-ink-primary mb-3 text-xl font-semibold lg:text-2xl">
        {title}
      </h2>
      <div className="text-ink-secondary space-y-3">{children}</div>
    </section>
  );
}