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: "acceptance", title: "terms.section.acceptance.title", body: "terms.section.acceptance.body" },
  { id: "service", title: "terms.section.service.title", body: "terms.section.service.body" },
  { id: "accounts", title: "terms.section.accounts.title", body: "terms.section.accounts.body" },
  { id: "threads", title: "terms.section.threads.title", body: "terms.section.threads.body" },
  { id: "content", title: "terms.section.content.title", body: "terms.section.content.body" },
  { id: "acceptable", title: "terms.section.acceptable.title", body: "terms.section.acceptable.body" },
  { id: "billing", title: "terms.section.billing.title", body: "terms.section.billing.body" },
  { id: "disclaimer", title: "terms.section.disclaimer.title", body: "terms.section.disclaimer.body" },
  { id: "termination", title: "terms.section.termination.title", body: "terms.section.termination.body" },
  { id: "contact", title: "terms.section.contact.title", body: "terms.section.contact.body" },
] as const;

/**
 * Public terms of service — often required next to Privacy Policy for Meta App Review.
 * Stable public URL: /terms
 */
export function TermsPage() {
  const { t } = useI18n();

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

        <div className="hb-public__legal-sections">
          {SECTIONS.map((section) => (
            <Card key={section.id} title={t(section.title)} data-terms-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>
  );
}
