import { useTranslations } from "next-intl";

export const metadata = {
  title: "Anti Child Sexual Abuse & Exploitation Policy | MediaHub",
  description:
    "MediaHub policy against child sexual abuse and exploitation (CSAE)",
};

export default function AntiChildSexualAbusePage() {
  const t = useTranslations("LandingPage");

  return (
    <div className="container mx-auto max-w-4xl px-4 py-10">
      <div className="flex flex-row items-center justify-center gap-4 mb-6">
        <img src="/assets/icon-privacy.png" alt="Policy" />
        <p className="font-semibold text-xl text-center">{t("abuse")}</p>
      </div>

      <p className="my-4 text-sm text-muted-foreground">
        {t("lastUpdate")} {new Date().toLocaleDateString()}
      </p>

      <p className="mb-6">
        {t("medHave")} <strong>{t("zeroTolerance")}</strong> {t("forAny")}
      </p>

      <h2 className="text-xl font-semibold mt-8 mb-3">
        {t("prohibitedContent")}
      </h2>
      <p className="mb-4">{t("prohibitedDesc")}</p>
      <ul className="list-disc ml-6 space-y-2 mb-6">
        <li>{t("prohibited1")}</li>
        <li>{t("prohibited2")}</li>
        <li>{t("prohibited3")}</li>
        <li>{t("prohibited4")}</li>
      </ul>

      <h2 className="text-xl font-semibold mt-8 mb-3">
        {t("enforcementTitle")}
      </h2>
      <p className="mb-4">{t("enforcementDesc")}</p>
      <ul className="list-disc ml-6 space-y-2 mb-6">
        <li>{t("enforcement1")}</li>
        <li>{t("enforcement2")}</li>
        <li>{t("enforcement3")}</li>
      </ul>

      <h2 className="text-xl font-semibold mt-8 mb-3">{t("reportingTitle")}</h2>
      <p className="mb-4">{t("reportingDesc")}</p>
      <p className="mb-6">
        📧 <strong>humaspolri.pid@gmail.com</strong>
      </p>

      <h2 className="text-xl font-semibold mt-8 mb-3">
        {t("cooperationTitle")}
      </h2>
      <p className="mb-6">{t("cooperationDesc")}</p>

      <h2 className="text-xl font-semibold mt-8 mb-3">
        {t("protectionTitle")}
      </h2>
      <p className="mb-6">{t("protectionDesc")}</p>

      <h2 className="text-xl font-semibold mt-8 mb-3">{t("contactTitle")}</h2>
      <p className="mb-2">{t("contactDesc")}</p>
      <p>
        📧 <strong>humaspolri.pid@gmail.com</strong>
      </p>
    </div>
  );
}