@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/CoachingConfirmation.tsx

@@ -13,6 +13,7 @@ import {
   ConfirmationLostCheckout,
   alpha,
 } from "./Confirmation";
+import { useForgeT } from "../../i18n";
 import { useCoachingBookingFinalize } from "../../data/queries/useFinalize";
 import { useBookingSecret } from "../headless/booking/useBookingSecret";
 import { AddToCalendar } from "./AddToCalendar";
@@ -48,6 +49,7 @@ export function CoachingConfirmation({
   restartPath,
 }: CoachingConfirmationProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
   // The credential the booking flow stashed before the payment redirect.
   // `resolved` gates the finalise: storage can only be read on the client, so
@@ -66,7 +68,7 @@ export function CoachingConfirmation({
   if (!resolved || isLoading) {
     return (
       <ConfirmationStage>
-        <Loading label="Confirming your booking…" />
+        <Loading label={t("forge.coaching_confirmation.loading")} />
       </ConfirmationStage>
     );
   }
@@ -78,10 +80,10 @@ export function CoachingConfirmation({
     return (
       <ConfirmationStage>
         <ConfirmationLostCheckout
-          title="We can’t confirm your booking in this browser"
-          body="Confirming a booking needs the checkout details saved in the tab you started in, and they aren’t here. That usually means the tab was closed, this link was opened on a different device or browser, or private browsing cleared them. If your payment went through you’ll still get your confirmation email, so check your inbox before booking again. Otherwise, pick a new time and start over."
+          title={t("forge.coaching_confirmation.lost_title")}
+          body={t("forge.coaching_confirmation.lost_body")}
           restartPath={restartPath ?? `/i/coaching/${slug}`}
-          restartLabel="Pick a new time"
+          restartLabel={t("forge.coaching_confirmation.lost_restart")}
         />
       </ConfirmationStage>
     );
@@ -108,14 +110,18 @@ export function CoachingConfirmation({
               animationDelay: "0.15s",
             }}
           >
-            {confirmed ? "Session Pass" : "Action needed"}
+            {confirmed
+              ? t("forge.coaching_confirmation.eyebrow_confirmed")
+              : t("forge.coaching_confirmation.eyebrow_action_needed")}
           </p>
 
           <h1
             className="cf-rise"
             style={{ fontSize: 30, fontWeight: 800, lineHeight: 1.1, margin: "0 0 10px", animationDelay: "0.22s" }}
           >
-            {confirmed ? "You’re booked in." : "Booking not completed"}
+            {confirmed
+              ? t("forge.coaching_confirmation.title_confirmed")
+              : t("forge.coaching_confirmation.title_incomplete")}
           </h1>
 
           <p
@@ -123,8 +129,17 @@ export function CoachingConfirmation({
             style={{ fontSize: 15, lineHeight: 1.5, color: alpha(text, 0.7), margin: "0 auto", maxWidth: 340, animationDelay: "0.3s" }}
           >
             {confirmed
-              ? `Nice one${data?.firstName ? `, ${data.firstName}` : ""}. Your session is confirmed. We’ve sent the details to ${data?.email ?? "your inbox"}.`
-              : `Your booking is currently ${data?.status ?? "unresolved"}. If you were charged, reach out and we’ll sort it right away.`}
+              ? data?.firstName
+                ? t("forge.coaching_confirmation.body_confirmed", {
+                    first_name: data.firstName,
+                    email: data?.email ?? t("forge.coaching_confirmation.email_fallback"),
+                  })
+                : t("forge.coaching_confirmation.body_confirmed_no_name", {
+                    email: data?.email ?? t("forge.coaching_confirmation.email_fallback"),
+                  })
+              : t("forge.coaching_confirmation.body_incomplete", {
+                  status: data?.status ?? t("forge.coaching_confirmation.status_unknown"),
+                })}
           </p>
         </div>
 
@@ -136,24 +151,44 @@ export function CoachingConfirmation({
           {data && (
             <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 14, columnGap: 16, margin: 0 }}>
               {data.sessionStartTime && (
-                <ConfirmationRow label="Session" value={formatSession(data.sessionStartTime)} accent strong />
+                <ConfirmationRow
+                  label={t("forge.coaching_confirmation.row_session")}
+                  value={formatSession(data.sessionStartTime)}
+                  accent
+                  strong
+                />
               )}
-              {data.durationMinutes ? <ConfirmationRow label="Duration" value={`${data.durationMinutes} minutes`} /> : null}
-              <ConfirmationRow label="Guest" value={`${data.firstName} ${data.lastName}`.trim() || "Not given"} />
-              <ConfirmationRow label="Email" value={data.email} />
-              <ConfirmationRow label="Reference" value={`#${data.id.slice(0, 8).toUpperCase()}`} mono />
+              {data.durationMinutes ? (
+                <ConfirmationRow
+                  label={t("forge.coaching_confirmation.row_duration")}
+                  value={t("forge.coaching_confirmation.duration_minutes", { count: data.durationMinutes })}
+                />
+              ) : null}
+              <ConfirmationRow
+                label={t("forge.coaching_confirmation.row_guest")}
+                value={`${data.firstName} ${data.lastName}`.trim() || t("forge.coaching_confirmation.not_given")}
+              />
+              <ConfirmationRow label={t("forge.coaching_confirmation.row_email")} value={data.email} />
+              <ConfirmationRow
+                label={t("forge.coaching_confirmation.row_reference")}
+                value={`#${data.id.slice(0, 8).toUpperCase()}`}
+                mono
+              />
               {Number(data.taxAmount || 0) > 0 && !data.taxInclusive && (
-                <ConfirmationRow label="Tax" value={fmt(Number(data.taxAmount), data.chargedCurrency || undefined)} />
+                <ConfirmationRow
+                  label={t("forge.coaching_confirmation.row_tax")}
+                  value={fmt(Number(data.taxAmount), data.chargedCurrency || undefined)}
+                />
               )}
               {/* The exact charged total (charged currency) when present — never a re-converted catalog amount. */}
               <ConfirmationRow
-                label="Paid"
+                label={t("forge.coaching_confirmation.row_paid")}
                 value={
                   Number(data.totalAmountInChargedCurrency ?? data.totalAmount) > 0
                     ? data.totalAmountInChargedCurrency
                       ? fmt(Number(data.totalAmountInChargedCurrency), data.chargedCurrency || undefined)
                       : fmt(data.totalAmount)
-                    : "Free session"
+                    : t("forge.coaching_confirmation.free")
                 }
                 accent
                 strong
@@ -162,14 +197,16 @@ export function CoachingConfirmation({
           )}
           {data && Number(data.taxAmount || 0) > 0 && data.taxInclusive && (
             <div style={{ textAlign: "right", fontSize: 12, color: alpha(text, 0.6), marginTop: 6 }}>
-              Includes {fmt(Number(data.taxAmount), data.chargedCurrency || undefined)} tax
+              {t("forge.coaching_confirmation.tax_included", {
+                amount: fmt(Number(data.taxAmount), data.chargedCurrency || undefined),
+              })}
             </div>
           )}
 
           {confirmed && data?.sessionStartTime && (
             <AddToCalendar
               variant="compact"
-              title={data.productTitle || "Coaching session"}
+              title={data.productTitle || t("forge.coaching_confirmation.calendar_title")}
               start={data.sessionStartTime}
               end={data.sessionEndTime}
               defaultDurationMinutes={data.durationMinutes ?? undefined}
@@ -199,7 +236,7 @@ export function CoachingConfirmation({
               textDecoration: "none",
             }}
           >
-            Explore more sessions <ArrowRight size={16} />
+            {t("forge.coaching_confirmation.explore")} <ArrowRight size={16} />
           </a>
         </div>
       </ConfirmationCard>

package/src/ui/styled/CoachingDetail.tsx

@@ -5,6 +5,7 @@ import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay } from "../format/PriceDisplay";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { useForgeT } from "../../i18n";
 import { Loading } from "./Loading";
 import { CoachingBooking } from "./CoachingBooking";
 import { CancellationTerms } from "./CancellationTerms";
@@ -36,42 +37,45 @@ export function CoachingDetail({
   finalisePath,
   onComplete,
 }: CoachingDetailProps) {
-  const t = useThemeTokens();
+  const tokens = useThemeTokens();
+  const t = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
   const pricesIncludeTax = usePricesIncludeTax();
   const { data: product, isLoading } = useGetCoachingProduct(slug, { initialData: initialCoaching });
 
   if (isLoading) return <Loading fullPage />;
-  if (!product) return <p>Coaching session not found.</p>;
+  if (!product) return <p>{t("forge.coaching_detail.not_found")}</p>;
 
   const cover = product.media?.find((m) => m.type === "image")?.url ?? product.media?.[0]?.url;
 
   return (
     <div
       className={`pb-32 md:pb-0${className ? ` ${className}` : ""}`}
-      style={{ maxWidth: 1040, margin: "0 auto", color: t.text, ...style }}
+      style={{ maxWidth: 1040, margin: "0 auto", color: tokens.text, ...style }}
     >
       {cover && (
         <img
           src={cover}
           alt={product.title}
-          style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover", borderRadius: t.cornerRadius }}
+          style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover", borderRadius: tokens.cornerRadius }}
         />
       )}
 
       <div className="flex flex-col md:flex-row md:items-start gap-6 mt-6">
         <div className="flex-1 min-w-0">
-          <h1 style={{ fontSize: 32, fontWeight: 800, margin: "0 0 12px", fontFamily: t.headingFontFamily }}>{product.title}</h1>
+          <h1 style={{ fontSize: 32, fontWeight: 800, margin: "0 0 12px", fontFamily: tokens.headingFontFamily }}>{product.title}</h1>
 
           <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
             <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
-              <Clock size={16} /> {product.durationMinutes} minutes
+              <Clock size={16} /> {t("forge.coaching_detail.duration_minutes", { minutes: product.durationMinutes })}
             </span>
           </div>
 
           {product.description && (
             <>
-              <h2 style={{ fontSize: 20, fontWeight: 700, margin: "24px 0 8px", fontFamily: t.headingFontFamily }}>About this session</h2>
+              <h2 style={{ fontSize: 20, fontWeight: 700, margin: "24px 0 8px", fontFamily: tokens.headingFontFamily }}>
+                {t("forge.coaching_detail.about_title")}
+              </h2>
               <div dangerouslySetInnerHTML={{ __html: product.description }} style={{ lineHeight: 1.7, opacity: 0.9 }} />
             </>
           )}
@@ -81,13 +85,13 @@ export function CoachingDetail({
           className="fixed bottom-0 left-0 right-0 z-40 w-full md:sticky md:top-4 md:bottom-auto md:left-auto md:right-auto md:w-[300px] md:shrink-0 flex flex-col gap-3"
           style={{
             padding: 16,
-            border: `1px solid ${t.primary}80`,
-            borderRadius: t.cornerRadius,
-            background: t.surface,
+            border: `1px solid ${tokens.primary}80`,
+            borderRadius: tokens.cornerRadius,
+            background: tokens.surface,
           }}
         >
           <span style={{ fontWeight: 600 }}>
-            <PriceDisplay amount={Number(product.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
+            <PriceDisplay amount={Number(product.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={tokens.text} captionStyle={{ opacity: 0.65 }} />
           </span>
           <CoachingBooking slug={slug} formatAmount={fmt} finalisePath={finalisePath} onComplete={onComplete} />
           {/* S.6 — next to the price and the button, so the terms are readable

package/src/ui/styled/CohortPage.tsx

@@ -1,4 +1,5 @@
 import { useCohortPage } from "../../data/queries/useCohortPage";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 
@@ -15,6 +16,7 @@ function formatDate(value: string | number | Date): string {
 /** Cohort landing page — structured cohort/course/curriculum data. Built on `useCohortPage`. */
 export function CohortPage({ cohortId }: CohortPageProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const { data, isLoading } = useCohortPage(cohortId);
 
   if (isLoading) return <Loading fullPage />;
@@ -26,17 +28,17 @@ export function CohortPage({ cohortId }: CohortPageProps) {
   const course = data?.data?.course;
   const modules = data?.data?.modules ?? [];
 
-  if (!cohort) return <p style={{ color: theme.colors.text }}>Cohort not found.</p>;
+  if (!cohort) return <p style={{ color: theme.colors.text }}>{t("forge.cohort_page.not_found")}</p>;
+
+  const startLabel = cohort.startDate ? formatDate(cohort.startDate) : t("forge.cohort_page.date_tbd");
+  const dateLabel = cohort.endDate
+    ? t("forge.cohort_page.date_range", { start: startLabel, end: formatDate(cohort.endDate) })
+    : startLabel;
 
   return (
     <div style={{ maxWidth: 760, margin: "0 auto", color: theme.colors.text }}>
       <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 8 }}>{cohort.title}</h1>
-      {(cohort.startDate || cohort.endDate) && (
-        <p style={{ opacity: 0.7, marginBottom: 16 }}>
-          {cohort.startDate ? formatDate(cohort.startDate) : "TBD"}
-          {cohort.endDate ? ` to ${formatDate(cohort.endDate)}` : ""}
-        </p>
-      )}
+      {(cohort.startDate || cohort.endDate) && <p style={{ opacity: 0.7, marginBottom: 16 }}>{dateLabel}</p>}
       {cohort.description && <p style={{ marginBottom: 24, lineHeight: 1.6 }}>{cohort.description}</p>}
 
       {course && (
@@ -48,7 +50,7 @@ export function CohortPage({ cohortId }: CohortPageProps) {
 
       {modules.length > 0 && (
         <section>
-          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>Curriculum</h2>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>{t("forge.cohort_page.curriculum_title")}</h2>
           <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
             {[...modules]
               .sort((a, b) => a.order - b.order)

package/src/ui/styled/ConfirmSubscription.tsx

@@ -1,5 +1,6 @@
 import { AlertTriangle, ArrowRight, Loader2, Mail } from "lucide-react";
 import { useConfirmEmailSubscription } from "../../data/queries/useLeadMagnet";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { ConfirmationStage, ConfirmationCard, CheckSeal, WarnSeal, alpha } from "./Confirmation";
@@ -17,6 +18,7 @@ export interface ConfirmSubscriptionProps {
  * confirmations. Built on `useConfirmEmailSubscription`.
  */
 export function ConfirmSubscription({ subscriberId, homePath = "/" }: ConfirmSubscriptionProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const text = theme.colors.text;
   const primary = theme.colors.primary;
@@ -30,7 +32,7 @@ export function ConfirmSubscription({ subscriberId, homePath = "/" }: ConfirmSub
         <div style={{ textAlign: "center", color: alpha(text, 0.75) }}>
           <Loader2 size={40} color={primary} style={{ animation: "cs-spin 1s linear infinite" }} />
           <style>{"@keyframes cs-spin{to{transform:rotate(360deg)}}"}</style>
-          <p style={{ marginTop: 16, fontSize: 15 }}>Confirming your subscription…</p>
+          <p style={{ marginTop: 16, fontSize: 15 }}>{t("forge.confirm_subscription.loading")}</p>
         </div>
       </ConfirmationStage>
     );
@@ -44,15 +46,17 @@ export function ConfirmSubscription({ subscriberId, homePath = "/" }: ConfirmSub
           <div style={{ padding: "40px 30px", textAlign: "center" }}>
             <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />
             <h1 style={{ fontSize: 24, fontWeight: 800, margin: "22px 0 8px" }}>
-              {subscriberId ? "Link expired" : "Invalid link"}
+              {subscriberId
+                ? t("forge.confirm_subscription.expired_title")
+                : t("forge.confirm_subscription.invalid_title")}
             </h1>
             <p style={{ fontSize: 15, color: alpha(text, 0.7), margin: "0 0 24px" }}>
               {subscriberId
-                ? "This confirmation link is no longer valid. Try subscribing again."
-                : "This confirmation link is missing or malformed."}
+                ? t("forge.confirm_subscription.expired_body")
+                : t("forge.confirm_subscription.invalid_body")}
             </p>
             <Action href={homePath} primary={primary}>
-              Back to site <ArrowRight size={16} />
+              {t("forge.confirm_subscription.back_to_site")} <ArrowRight size={16} />
             </Action>
           </div>
         </ConfirmationCard>
@@ -83,7 +87,7 @@ export function ConfirmSubscription({ subscriberId, homePath = "/" }: ConfirmSub
             </p>
           )}
           <h1 className="cf-rise" style={{ fontSize: 27, fontWeight: 800, margin: "6px 0 8px", animationDelay: "0.22s" }}>
-            You’re on the list 🎉
+            {t("forge.confirm_subscription.success_title")}
           </h1>
           <p
             className="cf-rise"
@@ -98,11 +102,13 @@ export function ConfirmSubscription({ subscriberId, homePath = "/" }: ConfirmSub
             }}
           >
             <Mail size={15} color={alpha(text, 0.6)} />
-            You’ll now receive updates from {profile?.name || "us"}.
+            {profile?.name
+              ? t("forge.confirm_subscription.success_body", { profile_name: profile.name })
+              : t("forge.confirm_subscription.success_body_generic")}
           </p>
           <div className="cf-rise" style={{ animationDelay: "0.4s" }}>
             <Action href={homePath} primary={primary}>
-              Explore the site <ArrowRight size={16} />
+              {t("forge.confirm_subscription.explore_site")} <ArrowRight size={16} />
             </Action>
           </div>
         </div>

package/src/ui/styled/ContactForm.tsx

@@ -1,4 +1,5 @@
 import { useContactForm } from "../headless/forms/useContactForm";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 
@@ -9,13 +10,12 @@ export interface ContactFormProps {
 }
 
 /** One-line themed website contact form, built on `useContactForm`. */
-export function ContactForm({
-  buttonText = "Send Message",
-  successMessage = "Message sent. We'll be in touch.",
-  showJoinEmailList = true,
-}: ContactFormProps) {
+export function ContactForm({ buttonText, successMessage, showJoinEmailList = true }: ContactFormProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const f = useContactForm();
+  const submitLabel = buttonText ?? t("forge.contact_form.submit");
+  const successText = successMessage ?? t("forge.contact_form.success");
 
   const inputStyle = {
     width: "100%",
@@ -29,21 +29,40 @@ export function ContactForm({
   if (f.isSuccess) {
     return (
       <div style={{ color: theme.colors.text, fontFamily: theme.fontFamily, textAlign: "center", padding: 8 }}>
-        {successMessage}
+        {successText}
       </div>
     );
   }
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 10, color: theme.colors.text, fontFamily: theme.fontFamily }}>
-      <input placeholder="Your name" value={f.name} onChange={(e) => f.setName(e.target.value)} style={inputStyle} />
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 10,
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <input
+        placeholder={t("forge.contact_form.name_placeholder")}
+        value={f.name}
+        onChange={(e) => f.setName(e.target.value)}
+        style={inputStyle}
+      />
       {f.errors.name && <p style={{ color: "#ef4444", fontSize: 13 }}>{f.errors.name}</p>}
 
-      <input type="email" placeholder="Email" value={f.email} onChange={(e) => f.setEmail(e.target.value)} style={inputStyle} />
+      <input
+        type="email"
+        placeholder={t("forge.contact_form.email_placeholder")}
+        value={f.email}
+        onChange={(e) => f.setEmail(e.target.value)}
+        style={inputStyle}
+      />
       {f.errors.email && <p style={{ color: "#ef4444", fontSize: 13 }}>{f.errors.email}</p>}
 
       <textarea
-        placeholder="Your message"
+        placeholder={t("forge.contact_form.message_placeholder")}
         value={f.message}
         onChange={(e) => f.setMessage(e.target.value)}
         rows={4}
@@ -54,7 +73,7 @@ export function ContactForm({
       {showJoinEmailList && (
         <label style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 14 }}>
           <input type="checkbox" checked={f.joinEmailList} onChange={(e) => f.setJoinEmailList(e.target.checked)} />
-          Also join the email list
+          {t("forge.contact_form.join_email_list")}
         </label>
       )}
 
@@ -74,7 +93,7 @@ export function ContactForm({
           opacity: f.isSubmitting ? 0.6 : 1,
         }}
       >
-        {f.isSubmitting ? "Sending…" : buttonText}
+        {f.isSubmitting ? t("forge.contact_form.submitting") : submitLabel}
       </button>
     </div>
   );

package/src/ui/styled/CookieConsent.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useState } from "react";
 import { X } from "lucide-react";
+import { useForgeT } from "../../i18n";
 import { useCookieConsent } from "../headless/consent/useCookieConsent";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 
 export interface CookieConsentProps {
-  /** Heading text. */
+  /** Heading text. Defaults to Forge's own translated heading. */
   title?: string;
-  /** Body copy above the toggles. */
+  /** Body copy above the toggles. Defaults to Forge's own translated copy. */
   description?: React.ReactNode;
   /** Show the Performance/analytics toggle. Default `true`. Set `false` when
    * first-party analytics runs cookieless (it needs no storage consent), so the
@@ -47,8 +48,8 @@ const TRIBENEST_PRIVACY_URL = "https://www.tribenest.co/privacy";
  * `<CookieConsent privacyPolicyHref="/privacy" />`.
  */
 export function CookieConsent({
-  title = "Cookie Consent",
-  description = "This site uses cookies for performance, analytics, and personalization to improve the site and give you a better experience. Accept all, reject all but strictly necessary, or choose which to allow.",
+  title,
+  description,
   showPerformance = true,
   privacyPolicyHref,
   useTribeNestPrivacy,
@@ -57,6 +58,7 @@ export function CookieConsent({
   className,
 }: CookieConsentProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const privacyHref = privacyPolicyHref ?? (useTribeNestPrivacy ? TRIBENEST_PRIVACY_URL : undefined);
   // External TribeNest link opens in a new tab; a same-origin custom page stays.
   const privacyExternal = !privacyPolicyHref && useTribeNestPrivacy;
@@ -90,7 +92,7 @@ export function CookieConsent({
     <div
       className={className}
       role="dialog"
-      aria-label="Cookie consent"
+      aria-label={tr("forge.cookie_consent.aria_dialog")}
       style={{
         position: "fixed",
         left: 0,
@@ -116,13 +118,15 @@ export function CookieConsent({
         }}
       >
         <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}>
-          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, fontFamily: t.headingFontFamily }}>{title}</h2>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, fontFamily: t.headingFontFamily }}>
+            {title ?? tr("forge.cookie_consent.title")}
+          </h2>
           {/* Close is only meaningful once a choice exists (reopened panel) —
               on first run the visitor must pick an option. */}
           {decided && (
             <button
               type="button"
-              aria-label="Close"
+              aria-label={tr("forge.cookie_consent.aria_close")}
               onClick={done(() => {})}
               style={{ background: "transparent", border: "none", cursor: "pointer", color: t.muted, padding: 2, flexShrink: 0 }}
             >
@@ -131,7 +135,7 @@ export function CookieConsent({
           )}
         </div>
         <p style={{ margin: "8px 0 0", fontSize: 14, lineHeight: 1.5, color: t.muted }}>
-          {description}
+          {description ?? tr("forge.cookie_consent.description")}
           {privacyHref && (
             <>
               {" "}
@@ -140,7 +144,7 @@ export function CookieConsent({
                 style={{ color: t.primary, textDecoration: "underline" }}
                 {...(privacyExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
               >
-                Privacy Policy
+                {tr("forge.cookie_consent.privacy_policy")}
               </a>
               .
             </>
@@ -148,17 +152,17 @@ export function CookieConsent({
         </p>
 
         <div style={{ display: "flex", flexWrap: "wrap", gap: 20, margin: "16px 0 4px" }}>
-          <Toggle label="Functional" checked disabled tokens={t} />
+          <Toggle label={tr("forge.cookie_consent.toggle_functional")} checked disabled tokens={t} />
           {showPerformance && (
             <Toggle
-              label="Performance"
+              label={tr("forge.cookie_consent.toggle_performance")}
               checked={draft.performance}
               tokens={t}
               onChange={(v) => setDraft((d) => ({ ...d, performance: v }))}
             />
           )}
           <Toggle
-            label="Marketing"
+            label={tr("forge.cookie_consent.toggle_marketing")}
             checked={draft.marketing}
             tokens={t}
             onChange={(v) => setDraft((d) => ({ ...d, marketing: v }))}
@@ -167,13 +171,13 @@ export function CookieConsent({
 
         <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "flex-end", marginTop: 16 }}>
           <button type="button" onClick={done(rejectAll)} style={ghostBtn(t)}>
-            Reject all
+            {tr("forge.cookie_consent.reject_all")}
           </button>
           <button type="button" onClick={done(() => save(draft))} style={ghostBtn(t)}>
-            Save settings
+            {tr("forge.cookie_consent.save_settings")}
           </button>
           <button type="button" onClick={done(acceptAll)} style={{ ...ghostBtn(t), background: t.primary, color: onPrimary, border: "none" }}>
-            Accept all
+            {tr("forge.cookie_consent.accept_all")}
           </button>
         </div>
       </div>