import { Link } from "react-router-dom";
import { PublicLegalChrome } from "../components/layout/PublicLegalChrome";
import { Button, Card } from "../components/ui";
import { useI18n } from "../i18n/I18nContext";

/** Order and ids matter for Meta review + tests (data-privacy-section). */
const SECTIONS = [
  { id: "overview", title: "privacy.section.overview.title", body: "privacy.section.overview.body" },
  { id: "collect", title: "privacy.section.collect.title", body: "privacy.section.collect.body" },
  { id: "use", title: "privacy.section.use.title", body: "privacy.section.use.body" },
  { id: "threads", title: "privacy.section.threads.title", body: "privacy.section.threads.body" },
  { id: "share", title: "privacy.section.share.title", body: "privacy.section.share.body" },
  { id: "ai", title: "privacy.section.ai.title", body: "privacy.section.ai.body" },
  { id: "retention", title: "privacy.section.retention.title", body: "privacy.section.retention.body" },
  { id: "deletion", title: "privacy.section.deletion.title", body: "privacy.section.deletion.body" },
  { id: "rights", title: "privacy.section.rights.title", body: "privacy.section.rights.body" },
  { id: "security", title: "privacy.section.security.title", body: "privacy.section.security.body" },
  { id: "children", title: "privacy.section.children.title", body: "privacy.section.children.body" },
  { id: "contact", title: "privacy.section.contact.title", body: "privacy.section.contact.body" },
  { id: "updates", title: "privacy.section.updates.title", body: "privacy.section.updates.body" },
] as const;

/**
 * Public privacy policy for Meta / Threads App Review.
 * Must stay at a stable public URL (e.g. https://<host>/privacy) without auth or geo-block.
 */
export function PrivacyPage() {
  const { t } = useI18n();

  return (
    <PublicLegalChrome testId="public-privacy" className="hb-public--legal" navLabelKey="privacy.navLabel">
      <main className="hb-public__main hb-public__main--narrow">
        <header className="hb-public__legal-hero">
          <h1 className="hb-public__title">{t("privacy.title")}</h1>
          <p className="text-muted">{t("privacy.updated")}</p>
          <p className="hb-public__lead">{t("privacy.intro")}</p>
        </header>

        <div className="hb-public__legal-sections">
          {SECTIONS.map((section) => (
            <Card key={section.id} title={t(section.title)} data-privacy-section={section.id}>
              <p className="hb-public__legal-body">{t(section.body)}</p>
            </Card>
          ))}
        </div>

        <div className="hb-public__actions">
          <Link to="/data-deletion">
            <Button type="button" variant="secondary">
              {t("home.dataDeletionLink")}
            </Button>
          </Link>
          <Link to="/terms">
            <Button type="button" variant="secondary">
              {t("home.termsLink")}
            </Button>
          </Link>
          <Link to="/">
            <Button type="button">{t("privacy.backHome")}</Button>
          </Link>
        </div>
      </main>
    </PublicLegalChrome>
  );
}
