@breathe-ds/ui 0.1.1 → 0.3.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-card 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/List.tsx

@@ -0,0 +1,81 @@
+import type { ElementType, ReactNode } from "react";
+
+export type ListItem = {
+  label: ReactNode;
+  /** With an href the item is a link: semibold, underlined, with an outbound arrow at the end. */
+  href?: string;
+  external?: boolean;
+};
+
+type Props = {
+  items: ListItem[];
+  /** `check` (default): bubble with a check — "what we assess", "what we treat".
+   *  `arrow`: corner arrow (↳) — one sentence per item, as in the Footer notice. */
+  marker?: "check" | "arrow";
+  /** Link component of the app (e.g. next-intl Link). Default: <a>. */
+  linkComponent?: ElementType;
+  /** sr-only after an external link. */
+  newTabLabel?: string;
+  className?: string;
+};
+
+const Check = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={14} height={14} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+);
+const CornerDownRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="mt-[0.2rem] shrink-0" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 10 5 5-5 5" /><path d="M4 4v7a4 4 0 0 0 4 4h12" /></svg>
+);
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={16} height={16} className="cg-arrow-go ml-auto mt-1 shrink-0" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+
+/**
+ * The family's list with a marker in front of each item (from novo.creeta:
+ * `Lista` on the method page, "O que tratamos aqui" on a treatment page, the
+ * notice in the footer).
+ * - check: a 24px bubble (ink at 12%) with the check; the marker is
+ *   decoration, the <ul> is what says "list".
+ * - arrow: the corner arrow, for one sentence per item.
+ * - An item with `href` becomes a link: semibold, underline that darkens on
+ *   hover, outbound arrow at the end stepping toward where it goes; 44px tap
+ *   height without changing the rhythm (negative vertical margin).
+ */
+export function List({ items, marker = "check", linkComponent, newTabLabel = "(opens in a new tab)", className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  const bubble = (
+    <span aria-hidden="true" className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink">
+      <Check />
+    </span>
+  );
+  const mark = marker === "check" ? bubble : <CornerDownRight />;
+  const gap = marker === "check" ? "gap-3" : "gap-2.5";
+
+  return (
+    <ul className={`list-none ${marker === "check" ? "space-y-3 text-ink" : "space-y-2 leading-relaxed text-ink/80"} ${className}`}>
+      {items.map((it, i) => (
+        <li key={`${i}-${it.href ?? ""}`}>
+          {it.href ? (
+            <L
+              href={it.href}
+              {...(it.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+              className={`group/item -my-2 flex min-h-11 items-start ${gap} py-2.5 font-semibold text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink`}
+            >
+              {mark}
+              <span className="underline decoration-ink/40 underline-offset-4 transition-[text-decoration-color] duration-150 group-hover/item:decoration-ink motion-reduce:transition-none">
+                {it.label}
+                {it.external && <span className="sr-only"> {newTabLabel}</span>}
+              </span>
+              <ArrowUpRight />
+            </L>
+          ) : (
+            <span className={`flex items-start ${gap}`}>
+              {mark}
+              <span>{it.label}</span>
+            </span>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}
+

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;
@@ -108,7 +109,6 @@ export function Lockup({
   if (variant === "wordmark") {
     return (
       <span className={`inline-flex flex-col${entranceCls} ${className}`} style={entranceStyle}>
-        {entrance && <style>{ENTRANCE_CSS}</style>}
         {nameEl}
         {tagEl && <span className="mt-1">{tagEl}</span>}
       </span>
@@ -118,7 +118,6 @@ export function Lockup({
   if (variant === "stacked") {
     return (
       <span className={`inline-flex flex-col items-center text-center${entranceCls} ${className}`} style={entranceStyle}>
-        {entrance && <style>{ENTRANCE_CSS}</style>}
         {mark}
         <span className="mt-4 flex flex-col items-center">
           {nameEl}
@@ -129,8 +128,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,12 +141,11 @@ 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}>
-        {entrance && <style>{ENTRANCE_CSS}</style>}
         <span className={`inline-flex items-center ${GAP[size]}`}>
           {nameEl}
           {mark}
@@ -158,7 +156,6 @@ export function Lockup({
   }
   return (
     <span className={`inline-flex items-center ${GAP[size]}${entranceCls} ${className}`} style={entranceStyle}>
-      {entrance && <style>{ENTRANCE_CSS}</style>}
       {mark}
       <span className="flex min-w-0 flex-col">
         {nameEl}
@@ -168,17 +165,3 @@ 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. */
-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; }
-.cg-lockup--entrance .cg-lockup__tag{ animation: cg-lockup-tag 360ms ease calc(var(--cg-entrance-delay,0ms) + 700ms) both; }
-@keyframes cg-lockup-mark{ from{ opacity:0; transform:scale(.6) rotate(-16deg); } }
-@keyframes cg-lockup-name{ from{ opacity:0; transform:translateX(-8px); } }
-@keyframes cg-lockup-tag{ from{ opacity:0; transform:translateY(4px); } }
-@media (prefers-reduced-motion:reduce){
-  .cg-lockup--entrance .cg-lockup__mark, .cg-lockup--entrance .cg-lockup__name, .cg-lockup--entrance .cg-lockup__tag{ animation: cg-lockup-fade 240ms ease var(--cg-entrance-delay,0ms) both; }
-  @keyframes cg-lockup-fade{ from{ opacity:0; } }
-}
-`;

package/components/MapCard.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { Button } from "./Button";
+
+type Labels = {
+  /** The button that loads the map. */
+  open: string;
+  /** The outbound link ("Directions"). */
+  directions: string;
+  /** sr-only after the outbound link. */
+  newTab: string;
+  /** The note under the actions. */
+  note: string;
+  /** The close button on the bar under the open map. */
+  close: string;
+  /** Accessible title of the map frame; receives the address. */
+  frameTitle: (address: string) => string;
+};
+const EN: Labels = {
+  open: "View the map",
+  directions: "Directions",
+  newTab: "(opens in a new tab)",
+  note: "The map is Google's and only loads after your tap.",
+  close: "Close the map",
+  frameTitle: (address) => `Map: ${address}`,
+};
+
+type Props = {
+  /** First line, large: the street and number. */
+  address: string;
+  /** Second line: neighbourhood, city/state. */
+  locality?: ReactNode;
+  /** Still image of the map (a file of the site, never a live tile): says
+   *  "there is a map here" without calling Google. Wide, pin near the top-middle. */
+  preview: { src: string; width?: number; height?: number; position?: string };
+  /** Embed URL, requested only after the tap (e.g. https://www.google.com/maps?q=…&output=embed). */
+  embedSrc: string;
+  /** Google Maps search/route link; works without JavaScript. */
+  directionsHref: string;
+  /** Caption on the close bar while the map is open. Default: the address. */
+  caption?: ReactNode;
+  /** Height of the open map. */
+  mapHeight?: string;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+const MapPin = ({ size = 20, strokeWidth = 1.75 }: { size?: number; strokeWidth?: number }) => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" /></svg>
+);
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+const X = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
+);
+
+/**
+ * Map card — the Mapa of novo.creeta: a Google map that only loads on tap.
+ *
+ * The embedded map sets third-party cookies as soon as it appears, and the
+ * sites have no consent banner. So the card shows a still preview of the map
+ * fading into the card, the address, a "View the map" button and the outbound
+ * "Directions" link (works without JavaScript); Google is only called when the
+ * person asks. The page is also lighter on phones.
+ *
+ * Open, the map fills the card and a bar at the bottom (the same as the
+ * PageVideoHero's) carries the caption and the close button, so the person
+ * can put the still back.
+ */
+export function MapCard({ address, locality, preview, embedSrc, directionsHref, caption, mapHeight = "min-h-[420px]", labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const [open, setOpen] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <div className={`relative overflow-hidden rounded-2xl bg-card ${className}`}>
+      {open ? (
+        <div className="flex flex-col">
+          <div className={`relative ${mapHeight} bg-surface`}>
+            <iframe
+              title={t.frameTitle(address)}
+              src={embedSrc}
+              referrerPolicy="no-referrer-when-downgrade"
+              allowFullScreen
+              onLoad={() => setLoaded(true)}
+              // only shown once Google has drawn it, with a fade: before that the frame is an empty white
+              className={`absolute inset-0 block h-full w-full border-0 transition-opacity duration-300 motion-reduce:transition-none ${loaded ? "opacity-100" : "opacity-0"}`}
+            />
+          </div>
+          {/* close bar — the same as the hero video's: caption on the left, close on the right */}
+          <div className="relative z-10 flex h-[4.5rem] items-center justify-between gap-6 bg-ink px-6">
+            <p className="m-0 min-w-0 truncate text-sm text-surface/80">{caption ?? address}</p>
+            <button
+              type="button"
+              onClick={() => {
+                setOpen(false);
+                setLoaded(false);
+              }}
+              className="inline-flex min-h-11 shrink-0 items-center gap-2 rounded-full border border-surface/25 px-5 text-sm font-semibold text-surface transition-colors duration-200 hover:bg-surface/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface motion-reduce:transition-none"
+            >
+              <X />
+              {t.close}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex h-full min-h-[320px] flex-col">
+          {/* Top: a still crop of the map fading into the card towards the bottom.
+              The text sits below, outside the image, always on the card color. */}
+          <div aria-hidden="true" className="relative min-h-[9rem] flex-1 overflow-hidden">
+            <img
+              src={preview.src}
+              alt=""
+              width={preview.width}
+              height={preview.height}
+              loading="lazy"
+              decoding="async"
+              className="absolute inset-0 h-full w-full object-cover"
+              style={{ objectPosition: preview.position ?? "48% 18%" }}
+            />
+            <span className="absolute inset-0 bg-gradient-to-b from-card/0 via-card/35 via-60% to-card" />
+            {/* on the right: on the left it covered the place's name on the map */}
+            <span className="absolute right-6 top-6 flex h-11 w-11 items-center justify-center rounded-full bg-card text-ink shadow-[0_2px_8px_rgba(0,0,0,0.18)] md:right-8 md:top-8">
+              <MapPin />
+            </span>
+          </div>
+
+          <div className="px-6 pb-6 md:px-8 md:pb-8">
+            <address className="m-0 not-italic font-heading text-2xl font-medium leading-snug text-ink">
+              {address}
+              {locality && <span className="mt-1 block font-body text-base font-normal text-ink/80">{locality}</span>}
+            </address>
+
+            <div className="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2">
+              <Button variant="solid" onClick={() => setOpen(true)}>
+                <MapPin size={19} strokeWidth={2} />
+                {t.open}
+              </Button>
+              <a
+                href={directionsHref}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex min-h-11 items-center gap-1.5 font-semibold text-ink underline underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
+              >
+                {t.directions}
+                <ArrowUpRight />
+                <span className="sr-only"> {t.newTab}</span>
+              </a>
+            </div>
+            <p className="m-0 mt-4 text-sm leading-relaxed text-ink/80">{t.note}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}