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

const SECTIONS = [
  { id: "summary", title: "deletion.section.summary.title", body: "deletion.section.summary.body" },
  { id: "steps", title: "deletion.section.steps.title", body: "deletion.section.steps.body" },
  { id: "threads", title: "deletion.section.threads.title", body: "deletion.section.threads.body" },
  { id: "scope", title: "deletion.section.scope.title", body: "deletion.section.scope.body" },
  { id: "timeline", title: "deletion.section.timeline.title", body: "deletion.section.timeline.body" },
  { id: "contact", title: "deletion.section.contact.title", body: "deletion.section.contact.body" },
] as const;

/**
 * Dedicated User Data Deletion Instructions page for Meta App Dashboard
 * ("User Data Deletion Instructions URL"). Public, no auth.
 */
export function DataDeletionPage() {
  const { t } = useI18n();

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

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

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