@breathe-ds/ui 0.1.0 → 0.2.0

package/components/LanguageSwitcher.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useId, useRef, useState, type ReactNode } from "react";
+
+export type Language = {
+  /** BCP 47 code for `lang`/`hrefLang` (pt-BR, en, es). */
+  lang: string;
+  /** The language written in itself ("Português", "English", "Español"). */
+  label: ReactNode;
+  /** The same page in that language. */
+  href: string;
+  current?: boolean;
+  /** Short code shown on the menu button; default: the first part of `lang`, uppercase (PT). */
+  code?: string;
+};
+
+type Labels = {
+  /** aria-label of the nav */
+  nav: string;
+  /** Accessible name of the menu button. Starts with the code written on it
+   *  ("PT"): voice-control users say what they see (WCAG 2.5.3). */
+  change: (code: string, current: string) => string;
+};
+const EN: Labels = { nav: "Language", change: (code, current) => `${code}. Change language. Current: ${current}` };
+
+type Props = {
+  languages: Language[];
+  /** `menu`: button with the current code that opens the list (header).
+   *  `list`: the languages side by side, no JavaScript (footer). */
+  mode?: "menu" | "list";
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+const Globe = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={16} height={16} className="max-[359px]:hidden md:max-lg:hidden" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20" /></svg>
+);
+const Check = ({ size = 16 }: { size?: number }) => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+);
+
+const codeOf = (l: Language) => l.code ?? l.lang.split("-")[0].toUpperCase();
+
+/**
+ * Language switcher — the SeletorDeIdioma of novo.creeta, by tokens.
+ * - Leads to the SAME page in the other language, never to the home.
+ * - Each language is written in itself ("English", "Español"): that is how
+ *   the reader recognizes theirs. The button shows the code (PT, EN, ES).
+ * - The current one is marked by a ✓ and `aria-current`, never by color alone.
+ * - Plain links (<a>): switching reloads the page, each language has its own
+ *   document. Closed, the menu stays in the HTML: the links exist for crawlers
+ *   and agents even if nobody opens it.
+ * - The site never redirects by browser language: the choice is the reader's.
+ */
+export function LanguageSwitcher({ languages, mode = "menu", labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const [open, setOpen] = useState(false);
+  const box = useRef<HTMLDivElement>(null);
+  const button = useRef<HTMLButtonElement>(null);
+  const id = useId();
+  const current = languages.find((l) => l.current) ?? languages[0];
+
+  if (mode === "list") {
+    return (
+      <nav aria-label={t.nav} className={className}>
+        <ul className="flex list-none flex-wrap items-center gap-x-1 gap-y-0">
+          {languages.map((l) => (
+            <li key={l.lang}>
+              <a
+                href={l.href}
+                lang={l.lang}
+                hrefLang={l.lang}
+                aria-current={l.current ? "true" : undefined}
+                className={`inline-flex min-h-11 items-center gap-1.5 rounded-full px-3 text-sm ${
+                  l.current ? "font-semibold text-ink" : "text-ink/80 underline underline-offset-4"
+                }`}
+              >
+                {l.current && <Check size={15} />}
+                {l.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    );
+  }
+
+  return (
+    <div
+      ref={box}
+      className={`relative ${className}`}
+      onBlur={(e) => {
+        if (!box.current?.contains(e.relatedTarget as Node | null)) setOpen(false);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Escape" && open) {
+          setOpen(false);
+          button.current?.focus();
+        }
+      }}
+    >
+      <button
+        ref={button}
+        type="button"
+        aria-expanded={open}
+        aria-controls={id}
+        aria-label={t.change(codeOf(current), typeof current.label === "string" ? current.label : codeOf(current))}
+        onClick={() => setOpen((o) => !o)}
+        className="flex min-h-11 items-center gap-1.5 rounded-full border border-ink/25 px-3 text-[0.8125rem] font-semibold text-ink transition-colors duration-150 hover:bg-ink/5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none"
+      >
+        {/* between 768 and 1023px the whole menu shares the row with the CTA: the globe goes, only the code stays */}
+        <Globe />
+        <span aria-hidden="true">{codeOf(current)}</span>
+      </button>
+      <ul
+        id={id}
+        className={`absolute right-0 top-full z-50 mt-2 min-w-[11rem] list-none origin-top-right rounded-[20px] bg-white p-1.5 shadow-[0_16px_40px_-16px_rgba(0,0,0,0.35)] transition duration-150 ease-out motion-reduce:transition-none ${
+          open ? "visible scale-100 opacity-100" : "invisible scale-95 opacity-0"
+        }`}
+      >
+        {languages.map((l) => (
+          <li key={l.lang}>
+            <a
+              href={l.href}
+              lang={l.lang}
+              hrefLang={l.lang}
+              aria-current={l.current ? "true" : undefined}
+              onClick={() => setOpen(false)}
+              className="flex min-h-11 items-center justify-between gap-3 rounded-[14px] px-3.5 text-sm font-medium text-ink hover:bg-surface focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink"
+            >
+              {l.label}
+              {l.current && <Check />}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/components/Lockup.tsx

@@ -2,20 +2,20 @@ import type { CSSProperties, ReactNode } from "react";
 import { BreatheMark } from "./BreatheMark";
 
 /**
- * Arranjos do logo (sistema de branding flexível da família Cuidado Global).
- * - `stacked`     empilhado: símbolo em cima, nome embaixo — perfis, splash, pôster.
- * - `horizontal`  símbolo + nome lado a lado (+ tagline) — cabeçalho, documento.
- * - `wordmark`    só texto (nome + tagline) — anúncio, quando a leitura é essencial.
- * - `symbol`      só o símbolo — favicon, ícone de app, marca d'água.
- * - `merged`      fundido: símbolo preenchido com o nome dentro — avatar, embalagem.
+ * Logo arrangements (flexible branding system of the Cuidado Global family).
+ * - `stacked`     symbol on top, name below: profiles, splash, poster.
+ * - `horizontal`  symbol + name side by side (+ tagline): header, documents.
+ * - `wordmark`    text only (name + tagline): ads, when legibility is essential.
+ * - `symbol`      symbol only: favicon, app icon, watermark.
+ * - `merged`      filled symbol with the name inside: avatar, packaging.
  */
 export type LockupVariant = "stacked" | "horizontal" | "wordmark" | "symbol" | "merged";
 type Size = "sm" | "md" | "lg";
 
-/* Nome em `font-heading`; símbolo ~1.3× o corpo do nome (o anel é aberto e
-   "lê" mais leve, então pede um tamanho a mais pra fechar em harmonia).
-   A caixa do BreatheMark é justa ao glifo: o vão entre símbolo e nome é só o gap.
-   `md` = header dos sites (símbolo de 44px, medido no creeta e no ttcab). */
+/* Name in `font-heading`; symbol ~1.3× the name's body size (the ring is open
+   and "reads" lighter, so it needs one size up to sit in harmony).
+   The BreatheMark box is tight to the glyph: the space between symbol and name is just the gap.
+   `md` = the sites' header (44px symbol, measured on creeta and ttcab). */
 const NAME: Record<Size, string> = { sm: "text-2xl", md: "text-[2.125rem]", lg: "text-[2.7rem]" };
 const TAG: Record<Size, string> = { sm: "text-[0.78rem]", md: "text-sm", lg: "text-base" };
 const MARK: Record<Size, number> = { sm: 32, md: 44, lg: 56 };
@@ -25,37 +25,38 @@ const TILE: Record<Size, string> = { sm: "size-16 text-[0.7rem]", md: "size-24 t
 
 type Props = {
   variant?: LockupVariant;
-  /** Nome da marca (cada site passa o seu). */
+  /** Brand name (each site passes its own). */
   name?: string;
   tagline?: ReactNode;
-  /** Símbolo customizado; por padrão o BreatheMark (anel + ponto). Um <svg>
-   *  injetado recebe a altura do tamanho (`size`); a largura segue a proporção. */
+  /** Custom symbol; defaults to the BreatheMark (ring + dot). An injected <svg>
+   *  gets the height of the size (`size`); width follows the aspect ratio. */
   logo?: ReactNode;
-  /** Wordmark desenhado (svg) no lugar do nome em texto. `merged` ignora
-   *  (lá o nome é texto). */
+  /** Drawn wordmark (svg) in place of the text name. Ignored by `merged`
+   *  (there the name is text). */
   wordmark?: ReactNode;
-  /** Altura do wordmark como fração da altura do símbolo, do manual da marca
-   *  (ex.: `TTCAB_LOCKUP.wordmarkPerSymbol`). Chega ao svg por `--cg-wordmark`. */
+  /** Wordmark height as a fraction of the symbol height, from the brand manual
+   *  (e.g. `TTCAB_LOCKUP.wordmarkPerSymbol`). Reaches the svg via `--cg-wordmark`. */
   wordmarkRatio?: number;
-  /** Lado do símbolo no horizontal. Padrão `left` (creeta e os demais); o TTCAB
-   *  é `right` (`TTCAB_LOCKUP.symbolSide`). */
+  /** Which side the symbol sits on in `horizontal`. Default `left` (creeta and
+   *  the others); TTCAB is `right` (`TTCAB_LOCKUP.symbolSide`). */
   symbolSide?: "left" | "right";
   size?: Size;
-  /** O símbolo "respira"? Padrão `false` — logo de cabeçalho não fica animando. */
+  /** Does the symbol "breathe"? Default `false`: a header logo should not keep animating. */
   animated?: boolean;
-  /** Entrada ao montar, como no header do novo.creeta: o símbolo chega
-   *  primeiro, depois o nome, depois a tagline. Respeita prefers-reduced-motion
-   *  (vira só um fade curto). Remonte (key) para repetir. */
+  /** Entrance on mount, as in the novo.creeta header: the symbol arrives first,
+   *  then the name, then the tagline. Respects prefers-reduced-motion (becomes
+   *  just a short fade). Remount (key) to replay. */
   entrance?: boolean;
-  /** Atraso da entrada em ms (ex.: esperar a Cortina subir). */
+  /** Entrance delay in ms (e.g. to wait for the Curtain to rise). */
   entranceDelay?: number;
   className?: string;
 };
 
 /**
- * Lockup — monta o logo da família num dos arranjos acima. Neutro por tokens:
- * nome/símbolo em `ink`, tagline em `ink-soft`; a cor real vem de cada app.
- * Tipografia é fixa da família (Quicksand no nome, Figtree na tagline).
+ * Lockup: assembles the family logo in one of the arrangements above. Neutral
+ * through tokens: name/symbol in `ink`, tagline in `ink-soft`; the actual color
+ * comes from each app. Typography is fixed by the family (Quicksand for the
+ * name, Figtree for the tagline).
  */
 export function Lockup({
   variant = "horizontal",
@@ -73,16 +74,16 @@ export function Lockup({
 }: Props) {
   const entranceCls = entrance ? " cg-lockup--entrance" : "";
   const entranceStyle = entrance ? ({ "--cg-entrance-delay": `${entranceDelay}ms` } as CSSProperties) : undefined;
-  // No horizontal com tagline, o símbolo cobre o bloco inteiro (nome + tagline),
-  // virando um "bookend" proporcional — não só a altura do nome.
+  // In horizontal with a tagline, the symbol spans the whole block (name + tagline),
+  // becoming a proportional "bookend", not just the name height.
   const markPx = variant === "horizontal" && tagline && symbolSide !== "right" ? Math.round(NAME_PX[size] * 2.3) : MARK[size];
   const mark = (
     <span className="cg-lockup__mark inline-flex text-ink [&>svg]:h-[var(--mark)] [&>svg]:w-auto" style={{ "--mark": `${markPx}px` } as CSSProperties}>
       {logo ?? <BreatheMark size={markPx} animated={animated} title={name} />}
     </span>
   );
-  // O wordmark segue o símbolo-base do tamanho (não o "bookend" do horizontal
-  // com tagline), como no logotipo assinado do creeta: nome ≈ 0.26 do símbolo grande.
+  // The wordmark follows the size's base symbol (not the "bookend" of horizontal
+  // with tagline), as in creeta's signed logo: name ≈ 0.26 of the large symbol.
   const nameEl = (
     <span
       className={`cg-lockup__name font-heading font-bold leading-none tracking-[-0.02em] text-ink ${NAME[size]}`}
@@ -91,8 +92,8 @@ export function Lockup({
       {wordmark ?? name}
     </span>
   );
-  // `block`: como item inline, a entrelinha do pai (1.5 do body) mandava na
-  // linha e a tagline de duas linhas ficava folgada demais.
+  // `block`: as an inline item, the parent's line-height (1.5 from body) ruled
+  // the line and a two-line tagline came out too loose.
   const tagEl = tagline ? (
     <span className={`cg-lockup__tag block font-body leading-[1.3] text-ink-soft ${TAG[size]}`}>{tagline}</span>
   ) : null;
@@ -129,8 +130,8 @@ export function Lockup({
   }
 
   if (variant === "merged") {
-    // Fundido: nome dentro de um disco preenchido (ink). Avatar / ícone de app.
-    // Nomes curtos (creeta, ttcab) fecham melhor; nome longo reduz o corpo.
+    // Merged: name inside a filled disc (ink). Avatar / app icon.
+    // Short names (creeta, ttcab) fit best; a long name needs a smaller body size.
     return (
       <span
         className={`inline-flex items-center justify-center whitespace-nowrap rounded-full bg-ink px-2 text-center font-heading font-bold leading-none tracking-[-0.01em] text-surface ${TILE[size]} ${className}`}
@@ -142,8 +143,8 @@ export function Lockup({
     );
   }
 
-  // horizontal (padrão). Símbolo à direita (TTCAB): encosta no nome, na mesma
-  // linha; a tagline fica embaixo (senão o símbolo iria parar depois da tagline).
+  // horizontal (default). Symbol on the right (TTCAB): sits next to the name, on
+  // the same line; the tagline goes below (otherwise the symbol would end up after the tagline).
   if (symbolSide === "right") {
     return (
       <span className={`inline-flex flex-col items-start${entranceCls} ${className}`} style={entranceStyle}>
@@ -168,8 +169,8 @@ export function Lockup({
   );
 }
 
-/* Entrada: símbolo (escala + giro leve) → nome (desliza da esquerda) → tagline.
-   Mesmo vocabulário da Cortina; com movimento reduzido fica só um fade curto. */
+/* Entrance: symbol (scale + slight rotation) → name (slides in from the left) → tagline.
+   Same vocabulary as the Curtain; with reduced motion it becomes just a short fade. */
 const ENTRANCE_CSS = `
 .cg-lockup--entrance .cg-lockup__mark{ animation: cg-lockup-mark 500ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) var(--cg-entrance-delay,0ms) both; }
 .cg-lockup--entrance .cg-lockup__name{ animation: cg-lockup-name 420ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) calc(var(--cg-entrance-delay,0ms) + 420ms) both; }

package/components/PageVideoHero.tsx

@@ -5,7 +5,7 @@ import { BackgroundVideo } from "./BackgroundVideo";
 
 type Panel = { kicker?: ReactNode; title: ReactNode; lead?: ReactNode };
 
-/** Clipe de fundo local (modo loop), sem som, em repetição. */
+/** Local background clip (loop mode): muted, looping. */
 type LoopPreview = {
   src: string;
   srcLarge?: string;
@@ -15,40 +15,40 @@ type LoopPreview = {
   objectPosition?: string;
 };
 
-/** Dois tipos de hero com vídeo:
- *  - loop:   um clipe local em repetição (sem player). Fundo = BackgroundVideo.
- *  - player: o PRÓPRIO vídeo do YouTube roda mudo, em repetição, como fundo
- *            (16:9, cobrindo o cartão, sem corte/zoom). Ao apertar o som ele
- *            remonta do zero — com áudio e controles — e surge a barra de
- *            fechar no pé. Mantém a consistência: a prévia e o vídeo são o
- *            mesmo material. */
+/** Two kinds of video hero:
+ *  - loop:   a local clip on repeat (no player). Background = BackgroundVideo.
+ *  - player: the YouTube video ITSELF plays muted, on repeat, as the background
+ *            (16:9, covering the card, no false crop/zoom). Turning the sound on
+ *            remounts it from zero — with audio and controls — and the close bar
+ *            appears at the bottom. Keeps things consistent: the preview and the
+ *            video are the same footage. */
 type VideoLoop = { mode: "loop"; preview: LoopPreview };
 type VideoPlayer = {
   mode: "player";
   youtubeId: string;
-  /** Quadro parado (movimento reduzido / economia de dados). Sem ele, usa a
-   *  miniatura do próprio YouTube (maxresdefault). */
+  /** Still frame (reduced motion / data saver). Without it, uses YouTube's own
+   *  thumbnail (maxresdefault). */
   poster?: string;
-  legenda?: ReactNode;
+  playerCaption?: ReactNode;
 };
 
 type Props = {
-  /** Fundo em vídeo — define o tipo do hero (loop ou player). */
+  /** Video background — defines the hero kind (loop or player). */
   video: VideoLoop | VideoPlayer;
-  /** Slot no topo-esquerdo (selo de local, "← voltar" + ícone). */
+  /** Top-left slot (location badge, "← back" + icon). */
   topLeft?: ReactNode;
-  /** Legenda curta no canto inferior-esquerdo (pílula) — versão simples. */
+  /** Short caption in the bottom-left corner (pill) — simple version. */
   caption?: ReactNode;
-  /** Painel de conteúdo inferior-esquerdo (kicker + título + lead). */
+  /** Bottom-left content panel (kicker + title + lead). */
   panel?: Panel;
-  /** CTAs no canto inferior-direito. No modo player, sem isto mostra "Assistir
-   *  ao vídeo"; null esconde. No modo loop, só aparece o que vier aqui. */
+  /** CTAs in the bottom-right corner. In player mode, omitting this shows
+   *  "Watch the video"; null hides it. In loop mode, only what is passed here appears. */
   actions?: ReactNode | null;
-  /** Rótulo + meta do botão padrão "Assistir ao vídeo" (modo player). */
+  /** Label + meta of the default "Watch the video" button (player mode). */
   watch?: { label?: string; meta?: ReactNode };
-  /** Rótulo do botão de fechar na barra inferior (modo player tocando). */
+  /** Label of the close button in the bottom bar (player mode, playing). */
   closeLabel?: string;
-  /** Rótulos do botão de pausa do fundo (modo player, prévia muda). */
+  /** Labels of the background pause button (player mode, muted preview). */
   previewLabels?: { pause?: string; play?: string };
   videoTitle?: string;
 };
@@ -61,13 +61,13 @@ function XGlyph({ size = 18 }: { size?: number }) {
 }
 
 /**
- * Fundo em vídeo do YouTube rodando MUDO, em repetição, cobrindo o cartão
- * (modo player, antes de o som começar). É enfeite: fica fora da leitura de
- * tela. Respeita movimento reduzido e economia de dados (aí fica no quadro
- * parado, sem pedir o vídeo). O "cover" é feito com unidades de container
- * (cqw/cqh), então a proporção 16:9 nunca é distorcida nem cortada em falso.
- * Tem botão de pausa (WCAG 2.2.2). O clique passa reto (pointer-events-none):
- * quem recebe o toque é o botão de assistir, por cima.
+ * YouTube video background playing MUTED, on repeat, covering the card
+ * (player mode, before the sound starts). It is decorative: hidden from screen
+ * readers. Respects reduced motion and data saver (then it stays on the still
+ * frame without requesting the video). The "cover" is done with container units
+ * (cqw/cqh), so the 16:9 ratio is never distorted or falsely cropped.
+ * Has a pause button (WCAG 2.2.2). Clicks pass through (pointer-events-none):
+ * the watch button on top is what receives the tap.
  */
 function YouTubeBackground({
   id,
@@ -88,14 +88,14 @@ function YouTubeBackground({
     const lessMotion =
       typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     const saveData = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData;
-    if (lessMotion || saveData) return; // fica no quadro parado
+    if (lessMotion || saveData) return; // stay on the still frame
     setShow(true);
   }, []);
 
   function toggle() {
     const w = frame.current?.contentWindow;
     if (!w) return;
-    // API do YouTube por postMessage (enablejsapi=1): pausa/retoma sem carregar o script.
+    // YouTube API via postMessage (enablejsapi=1): pause/resume without loading the script.
     w.postMessage(JSON.stringify({ event: "command", func: paused ? "playVideo" : "pauseVideo", args: [] }), "*");
     setPaused((p) => !p);
   }
@@ -107,7 +107,7 @@ function YouTubeBackground({
       {show ? (
         <iframe
           ref={frame}
-          title={title ?? "Vídeo"}
+          title={title ?? "Video"}
           tabIndex={-1}
           aria-hidden="true"
           src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1&mute=1&loop=1&playlist=${id}&controls=0&disablekb=1&fs=0&modestbranding=1&rel=0&playsinline=1&iv_load_policy=3&enablejsapi=1`}
@@ -116,7 +116,7 @@ function YouTubeBackground({
           style={{ width: "max(100cqw, 177.78cqh)", height: "max(100cqh, 56.25cqw)" }}
         />
       ) : (
-        // miniatura do próprio YouTube (16:9) quando não se toca o vídeo
+        // YouTube's own thumbnail (16:9) when the video is not playing
         // eslint-disable-next-line @next/next/no-img-element
         <img src={posterSrc} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
       )}
@@ -124,7 +124,7 @@ function YouTubeBackground({
         <button
           type="button"
           onClick={toggle}
-          aria-label={paused ? labels?.play ?? "Reproduzir vídeo" : labels?.pause ?? "Pausar vídeo"}
+          aria-label={paused ? labels?.play ?? "Play video" : labels?.pause ?? "Pause video"}
           className="absolute top-4 right-4 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-ink/85 text-surface backdrop-blur-md transition-colors duration-200 hover:bg-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface motion-reduce:transition-none"
         >
           {paused ? (
@@ -139,15 +139,15 @@ function YouTubeBackground({
 }
 
 /**
- * Hero full-bleed da família Cuidado Global — espelha o "TopoVideo" do
- * novo.creeta (tamanhos/espaçamentos exatos: max-w-1600, rounded-32,
- * min-h 560/820), com a linguagem do Breathe (tokens: ink/surface).
+ * Full-bleed hero of the Cuidado Global family — mirrors the "TopoVideo" of
+ * novo.creeta (exact sizes/spacing: max-w-1600, rounded-32, min-h 560/820),
+ * in the Breathe language (tokens: ink/surface).
  *
- * - loop:   o fundo é um clipe local em repetição (BackgroundVideo).
- * - player: o fundo é o PRÓPRIO vídeo do YouTube rodando mudo, em repetição.
- *           Ao apertar o som, ele remonta do zero (com áudio e controles) no
- *           próprio cartão e abre a barra de fechar no pé (legenda à esquerda,
- *           "Fechar" à direita).
+ * - loop:   the background is a local clip on repeat (BackgroundVideo).
+ * - player: the background is the YouTube video ITSELF playing muted, on repeat.
+ *           Turning the sound on remounts it from zero (with audio and controls)
+ *           inside the card and opens the close bar at the bottom (caption on
+ *           the left, "Close" on the right).
  */
 export function PageVideoHero({
   video,
@@ -156,7 +156,7 @@ export function PageVideoHero({
   panel,
   actions,
   watch,
-  closeLabel = "Fechar o vídeo",
+  closeLabel = "Close video",
   previewLabels,
   videoTitle,
 }: Props) {
@@ -165,23 +165,23 @@ export function PageVideoHero({
   const watchRef = useRef<HTMLButtonElement>(null);
   const playedOnce = useRef(false);
 
-  // Ao fechar, o foco volta para o botão de assistir.
+  // On close, focus returns to the watch button.
   useEffect(() => {
     if (playing) playedOnce.current = true;
     else if (playedOnce.current) watchRef.current?.focus();
   }, [playing]);
 
-  const legenda = isPlayer ? (video as VideoPlayer).legenda : undefined;
+  const playerCaption = isPlayer ? (video as VideoPlayer).playerCaption : undefined;
 
   return (
     <div className="px-4 pt-2 md:px-6 md:pt-6">
       <section className="relative isolate mx-auto flex min-h-[min(calc(100svh-7.5rem),560px)] max-w-[1600px] flex-col justify-end overflow-hidden rounded-[32px] bg-ink text-surface lg:min-h-[min(calc(100svh-7.5rem),820px)]">
-        {/* mídia — fundo (prévia) ou, tocando, o vídeo inteiro com som */}
+        {/* media — background (preview) or, when playing, the full video with sound */}
         <div className={`absolute inset-x-0 top-0 ${playing ? "bottom-[4.5rem]" : "bottom-0 -z-10"}`}>
           {playing ? (
             <iframe
-              key="cg-hero-som"
-              title={videoTitle ?? "Vídeo"}
+              key="cg-hero-sound"
+              title={videoTitle ?? "Video"}
               src={`https://www.youtube-nocookie.com/embed/${(video as VideoPlayer).youtubeId}?autoplay=1&mute=0&start=0&rel=0&modestbranding=1&playsinline=1&iv_load_policy=3`}
               allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
               allowFullScreen
@@ -208,7 +208,7 @@ export function PageVideoHero({
                   className="absolute inset-0"
                 />
               )}
-              {/* véus — legibilidade do texto (base) e dos elementos do topo */}
+              {/* scrims — legibility of the text (bottom) and of the top elements */}
               <div aria-hidden="true" className="pointer-events-none absolute inset-0 bg-gradient-to-t from-ink/70 via-ink/10 to-transparent" />
               <div aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-0 h-28 bg-gradient-to-b from-ink/35 to-transparent" />
             </>
@@ -217,10 +217,10 @@ export function PageVideoHero({
 
         {!playing && (
           <>
-            {/* topo-esquerdo */}
+            {/* top-left */}
             {topLeft && <div className="absolute top-4 left-4 z-10">{topLeft}</div>}
 
-            {/* painel / legenda — no fluxo (justify-end), m-6 */}
+            {/* panel / caption — in flow (justify-end), m-6 */}
             <div className="relative z-10 p-6 md:m-6 md:p-0">
               {panel ? (
                 <div className="inline-flex max-w-full items-center rounded-[24px] bg-ink/75 px-6 py-4 backdrop-blur-md md:max-w-[calc(100%-16rem)] lg:px-7 lg:py-5">
@@ -239,7 +239,7 @@ export function PageVideoHero({
               ) : null}
             </div>
 
-            {/* ação inferior-direita */}
+            {/* bottom-right action */}
             {actions === null ? null : actions ? (
               <div className="absolute right-4 bottom-4 z-10 flex flex-wrap items-center justify-end gap-2 md:right-6 md:bottom-6">{actions}</div>
             ) : isPlayer ? (
@@ -253,7 +253,7 @@ export function PageVideoHero({
                   <PlayGlyph size={20} />
                 </span>
                 <span className="flex flex-col items-start leading-tight">
-                  {watch?.label ?? "Assistir ao vídeo"}
+                  {watch?.label ?? "Watch the video"}
                   {watch?.meta && <span className="text-sm font-normal text-surface/80">{watch.meta}</span>}
                 </span>
               </button>
@@ -261,10 +261,10 @@ export function PageVideoHero({
           </>
         )}
 
-        {/* barra de fechar — pé do vídeo tocando (legenda à esquerda, fechar à direita) */}
+        {/* close bar — bottom of the playing video (caption on the left, close on the right) */}
         {playing && (
           <div className="relative z-10 flex h-[4.5rem] items-center justify-between gap-6 bg-ink px-6">
-            <p className="min-w-0 truncate text-sm text-surface/80">{legenda}</p>
+            <p className="min-w-0 truncate text-sm text-surface/80">{playerCaption}</p>
             <button
               type="button"
               onClick={() => setPlaying(false)}

package/components/PillList.tsx

@@ -6,7 +6,7 @@ export type Pill = { label: ReactNode; href?: string };
 type Props = {
   title?: ReactNode;
   items: Pill[];
-  /** Link "Ver todos" opcional. */
+  /** Optional "See all" link. */
   seeAll?: { label: ReactNode; href?: string };
 };
 
@@ -28,9 +28,9 @@ function ArrowUpRight() {
 }
 
 /**
- * Lista de pills (ex.: "Condições que atendemos"): chips brancos com rótulo +
- * seta, em grade que quebra, e um link "Ver todos". Chip clicável vira `<a>`.
- * Estilo de card discreto do DS (borda + sombra suaves), raio pill.
+ * Pill list (e.g. "Conditions we treat"): white chips with label + arrow, in
+ * a wrapping grid, plus a "See all" link. A clickable chip renders as `<a>`.
+ * The DS's subtle card style (soft border + shadow), pill radius.
  */
 export function PillList({ title, items, seeAll }: Props) {
   return (

package/components/SectionKicker.tsx

@@ -1,14 +1,14 @@
 import type { ReactNode } from "react";
 
 type Props = {
-  /** Numeral da seção (ex.: "01"). */
+  /** Section numeral (e.g. "01"). */
   num?: string;
   children: ReactNode;
 };
 
 /**
- * Sobrelinha de seção numerada (ex.: "01 — TRATAMENTO"), padrão da família.
- * Numeral em `action-text`, rótulo em `ink-soft` caixa-alta. Sem dependência.
+ * Numbered section overline (e.g. "01 — TRATAMENTO"), the family's standard.
+ * Numeral in `action-text`, uppercase label in `ink-soft`. No dependencies.
  */
 export function SectionKicker({ num, children }: Props) {
   return (

package/components/icons.tsx

@@ -1,9 +1,9 @@
 /**
- * Biblioteca de ícones do Breathe. Re-exporta a lib INTEIRA do lucide-react
- * (centenas de ícones), para você escolher qualquer um ao montar interfaces:
+ * Breathe icon library. Re-exports the ENTIRE lucide-react lib (hundreds of
+ * icons), so you can pick any of them when building interfaces:
  *   import { Heart, Wind, Baby } from "@breathe-ds/ui/components/icons";
- * Os ícones usam `currentColor` e aceitam `size`/`strokeWidth`. Os componentes
- * do DS recebem ícones por slot, então injete o que quiser.
+ * Icons use `currentColor` and accept `size`/`strokeWidth`. The DS components
+ * take icons through slots, so inject whichever you want.
  */
 export * from "lucide-react";
 
@@ -13,7 +13,7 @@ import {
   Quote, Menu, X, ChevronDown, ArrowUpRight, Globe,
 } from "lucide-react";
 
-/* Aliases semânticos dos ícones usados pela família (os "principais"). */
+/* Semantic aliases for the icons the family uses (the "core" ones). */
 export const IconHome = House;
 export const IconWind = Wind;
 export const IconActivity = Activity;
@@ -39,7 +39,7 @@ export const IconChevronDown = ChevronDown;
 export const IconArrowUpRight = ArrowUpRight;
 export const IconGlobe = Globe;
 
-/* Mapa dos usados (principais) — nome → componente. */
+/* Map of the icons in use (core) — name → component. */
 export const used = {
   Home: IconHome, Wind: IconWind, Activity: IconActivity, Baby: IconBaby,
   Search: IconSearch, Users: IconUsers, GraduationCap: IconGraduationCap,