import type { ReactNode } from "react";
import { PageHero } from "./Bits";

export function PolicyPage({ title, intro, sections }: { title: string; intro: string; sections: { h: string; p: ReactNode }[] }) {
  return (
    <>
      <PageHero eyebrow="Policies" title={title} text={intro} />
      <section className="py-16">
        <div className="container-page max-w-3xl space-y-10">
          {sections.map((s) => (
            <div key={s.h} className="space-y-3">
              <h2 className="text-2xl font-semibold text-primary-deep">{s.h}</h2>
              <div className="leading-relaxed text-muted-foreground">{s.p}</div>
            </div>
          ))}
          <p className="text-xs text-muted-foreground">Template text — please have this reviewed by your legal advisor before launch.</p>
        </div>
      </section>
    </>
  );
}

export const policyHead = (title: string, description: string) => ({
  meta: [
    { title: `${title} — CareShare Initiative` },
    { name: "description", content: description },
    { property: "og:title", content: `${title} — CareShare Initiative` },
    { property: "og:description", content: description },
    { property: "og:type", content: "website" },
    { name: "twitter:card", content: "summary" },
  ],
});