const documentGroups = [
  {
    title: 'Governance materials',
    body: 'Approved circulars, directives, standards, and member notices that require authenticated distribution or acknowledgement.',
  },
  {
    title: 'Reporting packs',
    body: 'Structured reporting templates, filing instructions, submission windows, and evidence requirements for controlled workflows.',
  },
  {
    title: 'Operational records',
    body: 'Access-controlled service correspondence, request responses, and downloadable artifacts associated with member actions.',
  },
];

export default function MemberDocumentsPage() {
  return (
    <div className="space-y-6">
      <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <h1 className="text-3xl font-semibold text-slate-900">Documents & Reporting</h1>
        <p className="mt-3 max-w-3xl text-sm leading-6 text-slate-600">
          Authenticated document delivery belongs in the secure portal when distribution, acknowledgement, or participant-level access control is required.
        </p>
      </section>

      <section className="grid gap-4 md:grid-cols-3">
        {documentGroups.map((group) => (
          <article key={group.title} className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <h2 className="text-lg font-semibold text-slate-900">{group.title}</h2>
            <p className="mt-3 text-sm leading-6 text-slate-600">{group.body}</p>
          </article>
        ))}
      </section>
    </div>
  );
}
