import Link from 'next/link';
import { Breadcrumbs } from './Breadcrumbs';
import { ArrowRightIcon, BookOpenIcon, FileTextIcon, LockIcon, ScaleIcon } from './Icons';

const RELATED = [
  { href: '/about/', label: 'About Justice Choice', Icon: BookOpenIcon },
  { href: '/methodology/', label: 'Ranking methodology', Icon: ScaleIcon },
  { href: '/disclaimer/', label: 'Disclaimer', Icon: FileTextIcon },
  { href: '/privacy/', label: 'Privacy', Icon: LockIcon },
  { href: '/terms/', label: 'Terms of Use', Icon: FileTextIcon },
];

/** Shared frame for the short editorial pages (about, disclaimer, privacy) */
export function LegalPage({ title, path, eyebrow, icon, children }: { title: string; path: string; eyebrow: string; icon: React.ReactNode; children: React.ReactNode }) {
  return (
    <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6 sm:py-10">
      <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: title, href: path }]} />
      <div className="mt-6 grid gap-10 lg:grid-cols-[1fr_15rem]">
        <article>
          <p className="eyebrow">
            {icon} {eyebrow}
          </p>
          <h1 className="mt-3 font-serif text-[2.25rem] font-semibold leading-[1.1] tracking-tight sm:text-[2.75rem]">{title}</h1>
          <div className="prose-legal mt-6 space-y-4 text-lg leading-relaxed text-ink-2">{children}</div>
        </article>
        <nav aria-label="Related pages" className="lg:pt-14">
          <p className="mb-3 text-xs font-bold uppercase tracking-[0.08em] text-muted">Related</p>
          <ul className="card divide-y divide-rule overflow-hidden text-sm">
            {RELATED.filter((r) => r.href !== path).map(({ href, label, Icon }) => (
              <li key={href}>
                <Link href={href} className="group flex items-center gap-2.5 px-4 py-3 transition-colors hover:bg-paper hover:text-ledger">
                  <Icon className="h-4 w-4 text-muted group-hover:text-ledger" />
                  <span className="flex-1">{label}</span>
                  <ArrowRightIcon className="h-3.5 w-3.5 opacity-0 transition-opacity group-hover:opacity-100" />
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </div>
  );
}