\n \n\n {\n usePageMeta({\n title: 'CovaTherm Cool Roof Coating: Professional Reflective White, SRI 118 | Covalba',\n description:\n 'Professional CovaTherm cool roof coating. Up to 8-10°C indoor temperature drop, up to 40% AC savings, 20-year warranty. SRI 118.',\n canonical: PAGE_URL,\n });\n useJsonLd('covatherm-product-schema', productSchema);\n useJsonLd('covatherm-faq-schema', faqSchema);\n\n return (\n

\n \n\n `, navbars use a custom hover-dropdown (not shadcn), and `usePageMeta` is called by all 65 page components. Let me write the plan file."}],"stop_reason":null,"stop_sequence":null,"stop_details":null,"usage":{"input_tokens":2,"cache_creation_input_tokens":1191,"cache_read_input_tokens":63123,"cache_creation":{"ephemeral_5m_input_tokens":1191,"ephemeral_1h_input_tokens":0},"output_tokens":1,"service_tier":"standard","inference_geo":"not_available"},"diagnostics":null},"requestId":"req_011CcKxw9FXYC3XemNKLcyhG","attributionAgent":"Plan","type":"assistant","uuid":"b94d5eec-574a-4e26-b115-0f5defa4edef","timestamp":"2026-06-23T09:36:17.092Z","userType":"external","entrypoint":"cli","cwd":"/opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all","sessionId":"22d3abbc-6868-484e-8bb0-ceaa184d3a29","version":"2.1.181","gitBranch":"nico/feature-traduction-all","slug":"mutable-snacking-pearl"} {"parentUuid":"b94d5eec-574a-4e26-b115-0f5defa4edef","isSidechain":true,"agentId":"ac255d8b9ff6270b2","message":{"model":"claude-opus-4-8","id":"msg_01RibwvSdG6dufujdsc9ZHC5","type":"message","role":"assistant","content":[{"type":"tool_use","id":"toolu_018MgfKWKm2EqC1LKCoR2J1W","name":"Bash","input":{"command":"echo \"=== confirm ES navbar CTA + structure parity ===\" && grep -n \"NavbarESProps\\|href=\\\"/es\\\"\\|Request a quote\\|Solicitar\\|Demander\" src/components/es/NavbarES.tsx | head && echo \"=== index.html lang ===\" && grep -n \" {\n122: \n209: \n287: href=\"/es\"\n290: Solicitar presupuesto\n387: href=\"/es\"\n391: Solicitar presupuesto\n=== index.html lang ===\n2:","is_error":false}]},"uuid":"150eda32-24fb-4060-b041-fe6a1076321c","timestamp":"2026-06-23T09:36:18.963Z","toolUseResult":{"stdout":"=== confirm ES navbar CTA + structure parity ===\n68:interface NavbarESProps {\n72:const NavbarES = ({ lightBg = false }: NavbarESProps) => {\n122: \n209: \n287: href=\"/es\"\n290: Solicitar presupuesto\n387: href=\"/es\"\n391: Solicitar presupuesto\n=== index.html lang ===\n2:","stderr":"","interrupted":false,"isImage":false,"noOutputExpected":false},"sourceToolAssistantUUID":"1955046e-17d7-4688-b507-4c95c816423c","userType":"external","entrypoint":"cli","cwd":"/opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all","sessionId":"22d3abbc-6868-484e-8bb0-ceaa184d3a29","version":"2.1.181","gitBranch":"nico/feature-traduction-all","slug":"mutable-snacking-pearl"} {"parentUuid":"150eda32-24fb-4060-b041-fe6a1076321c","isSidechain":true,"agentId":"ac255d8b9ff6270b2","message":{"model":"claude-opus-4-8","id":"msg_01Nm8toASKCB4xQdZob9FqCm","type":"message","role":"assistant","content":[{"type":"text","text":"All confirmed. Now I have a complete picture. Here is the validated, concrete implementation plan.\n\n---\n\n# Implementation Plan: Language Switcher + hreflang/i18n SEO\n\n## Validation of key assumptions (verified against the code)\n\n| Assumption | Verdict |\n|---|---|\n| All `usePageMeta` callers render inside `` | **Confirmed.** `main.tsx` does a plain `createRoot(...).render()`; `` wraps the entire `` tree (App.tsx:137). All 65 `usePageMeta` callers are page components mounted as route elements. **No prerender/SSG/renderToString** anywhere (grep empty). → Calling `useLocation()` inside `usePageMeta` is **safe**. |\n| Navbars use shadcn `dropdown-menu` | **FALSE** — the prompt was wrong here. All 3 navbars use a **custom hover dropdown** driven by `useState` (`activeDropdown`) + `useRef` close timer. No `DropdownMenu` import. → The switcher should be a small **self-contained custom dropdown** (or inline FR/EN/ES pills), not shadcn. Don't try to reuse the navbar's dropdown machinery. |\n| Nav links are plain `` (full reload) | **Confirmed.** Logo, CTA, all menu items are ``. → Switcher must also use `` for consistency (and it's actually *required* for correctness — see gotcha below). |\n| 26 mapped routes in the CSV | **Confirmed** (26 data rows, lines 2–27). Slugs differ per locale exactly as described. |\n| `og:locale` hardcoded `'fr_FR'` at line 57 | **Confirmed.** No hreflang anywhere in repo (grep empty). |\n| Insertion points (~282 desktop / ~384 mobile) | **Confirmed.** Desktop nav `

` closes at line 282; CTA block follows at 284. Mobile CTA block is the `

` at 385. |\n| `index.html` ships `` | Confirmed (line 2). The hook will override per-route. |\n\nOne correction to the proposed approach: the home rows in the CSV are `/`, `/en`, `/es` (FR home has **no** `/fr`). The mapping table handles this naturally since they're explicit triples.\n\n---\n\n## Files to CREATE (2)\n\n### 1. `src/config/i18nRoutes.ts`\n\nCentral mapping + helpers. No per-page data duplication.\n\n```ts\nexport type Locale = 'fr' | 'en' | 'es';\nexport const SITE_URL = 'https://www.covalba.fr';\nexport const LOCALES: Locale[] = ['fr', 'en', 'es'];\nexport const OG_LOCALE: Record = { fr: 'fr_FR', en: 'en_US', es: 'es_ES' };\nexport const HTML_LANG: Record = { fr: 'fr', en: 'en', es: 'es' };\n\ninterface RouteTriple { fr: string; en: string; es: string; }\n\n// The 26 CSV rows, hardcoded (Slug FR / Slug EN / Slug ES). Order = CSV order.\nexport const I18N_ROUTES: RouteTriple[] = [\n { fr: '/', en: '/en', es: '/es' },\n { fr: '/diagnostic', en: '/en/diagnostic', es: '/es/diagnostico' },\n { fr: '/estimation', en: '/en/estimation', es: '/es/presupuesto' },\n { fr: '/solutions/covatherm', en: '/en/solutions/covatherm', es: '/es/soluciones/covatherm' },\n // … all 26 rows verbatim from suivi-traduction.csv …\n { fr: '/references', en: '/en/case-studies', es: '/es/casos-de-exito' },\n];\n\nexport const detectLocale = (pathname: string): Locale =>\n pathname === '/en' || pathname.startsWith('/en/') ? 'en'\n : pathname === '/es' || pathname.startsWith('/es/') ? 'es'\n : 'fr';\n\nconst stripTrailingSlash = (p: string) => (p.length > 1 ? p.replace(/\\/+$/, '') : p);\n\n// Returns the {fr,en,es} triple whose entry for the current locale matches pathname, else null.\nexport const getAlternates = (pathname: string): RouteTriple | null => {\n const path = stripTrailingSlash(pathname);\n const locale = detectLocale(path);\n return I18N_ROUTES.find((r) => r[locale] === path) ?? null;\n};\n\n// Target URL for the switcher. Mapped → matching slug. Unmapped → target-locale home.\nexport const getSwitchPath = (pathname: string, target: Locale): string => {\n const triple = getAlternates(pathname);\n if (triple) return triple[target];\n return { fr: '/', en: '/en', es: '/es' }[target];\n};\n```\n\nSignatures requested:\n- `detectLocale(pathname): Locale`\n- `getAlternates(pathname): RouteTriple | null`\n- `getSwitchPath(pathname, target): string` (renamed from `getSwitchUrl`; returns a **path**, not absolute URL, because the switcher links internally — keep `SITE_URL` joining only for hreflang/og which need absolute URLs)\n\n**x-default policy: FR** — `x-default` → `SITE_URL + triple.fr`. FR is the canonical origin market and the home with no prefix; this is the correct choice.\n\n### 2. `src/components/LanguageSwitcher.tsx`\n\nSelf-contained. Detects current locale via `useLocation()`. Plain ``. Two variants via a `variant` prop so one component serves desktop (compact) + mobile (full list).\n\n```tsx\nimport { useState, useRef } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { Globe, ChevronDown } from 'lucide-react';\nimport { detectLocale, getSwitchPath, LOCALES, type Locale } from '@/config/i18nRoutes';\n\nconst LABEL: Record = { fr: 'Français', en: 'English', es: 'Español' };\nconst SHORT: Record = { fr: 'FR', en: 'EN', es: 'ES' };\n\ninterface Props { variant?: 'desktop' | 'mobile'; lightBg?: boolean; scrolled?: boolean; }\n\nconst LanguageSwitcher = ({ variant = 'desktop', lightBg, scrolled }: Props) => {\n const { pathname } = useLocation();\n const current = detectLocale(pathname);\n const [open, setOpen] = useState(false);\n\n if (variant === 'mobile') {\n return (\n

\n {LOCALES.map((loc) => (\n \n {SHORT[loc]}\n \n ))}\n

\n );\n }\n\n // desktop: small hover/click dropdown matching navbar styling\n const triggerColor = scrolled ? 'text-foreground hover:text-primary'\n : lightBg ? 'text-foreground/70 hover:text-foreground' : 'text-white/90 hover:text-white';\n\n return (\n

setOpen(false)}>\n \n {open && (\n

\n {LOCALES.map((loc) => (\n \n {LABEL[loc]}\n \n ))}\n

\n )}\n

\n );\n};\nexport default LanguageSwitcher;\n```\n\nThe `lightBg`/`scrolled` props let the desktop trigger match the navbar's existing color logic (the navbars already compute these). Passing them keeps the switcher legible on the transparent dark homepage hero.\n\n---\n\n## Files to MODIFY (5)\n\n### A. `src/hooks/usePageMeta.ts` — auto-derive hreflang + og:locale + html lang\n\nAdd a `upsertAlternates` helper that mirrors `upsertCanonical` but manages a **list** that is fully reset every navigation. Tag each managed link with a data attribute so we can select-and-remove only ours (never clobber the static canonical or anything else).\n\nDiff approach:\n1. Add imports: `import { useLocation } from 'react-router-dom';` and `import { SITE_URL, getAlternates, detectLocale, OG_LOCALE, HTML_LANG } from '@/config/i18nRoutes';`\n2. New helper (module scope):\n```ts\nconst HREFLANG_ATTR = 'data-i18n-hreflang';\nconst setHreflangLinks = (links: { hreflang: string; href: string }[]) => {\n document.head.querySelectorAll(`link[${HREFLANG_ATTR}]`).forEach((el) => el.remove());\n links.forEach(({ hreflang, href }) => {\n const el = document.createElement('link');\n el.rel = 'alternate';\n el.setAttribute('hreflang', hreflang);\n el.href = href;\n el.setAttribute(HREFLANG_ATTR, '');\n document.head.appendChild(el);\n });\n};\n```\n Full reset on every call (remove-then-add) is the cleanest way to avoid stale SPA tags — simpler and safer than diffing.\n3. Inside `usePageMeta`, call `const { pathname } = useLocation();` at the top (hooks rules: unconditional, before the `useEffect`).\n4. Replace the hardcoded `upsertMeta('og:locale', 'fr_FR', 'property')` (line 57) with locale-derived logic inside the effect:\n```ts\nconst locale = detectLocale(pathname);\ndocument.documentElement.lang = HTML_LANG[locale];\nupsertMeta('og:locale', OG_LOCALE[locale], 'property');\n\nconst triple = getAlternates(pathname);\nif (triple) {\n setHreflangLinks([\n { hreflang: 'fr', href: SITE_URL + triple.fr },\n { hreflang: 'en', href: SITE_URL + triple.en },\n { hreflang: 'es', href: SITE_URL + triple.es },\n { hreflang: 'x-default', href: SITE_URL + triple.fr },\n ]);\n} else {\n setHreflangLinks([]); // clear stale tags on unmapped pages (city, /devenir-applicateur, blog/:slug…)\n}\n```\n5. Add `pathname` to the effect dependency array.\n6. Cleanup return: leave the existing `document.title` restore. Optionally also `setHreflangLinks([])` in cleanup — **not strictly needed** because every page calls the hook and resets on mount, but harmless. Recommend leaving hreflang reset to the next page's effect (matches how canonical already behaves: never cleaned, always overwritten).\n\nThis requires **zero per-page edits** — all 65 pages already call `usePageMeta`. Unmapped pages (city `/:slug`, `/devenir-applicateur`, `/bat-en-112`, `/blog/:slug`, `/references/:slug`) automatically get correct `` + `og:locale` by prefix and **no** hreflang (correct — they have no alternates).\n\n### B/C/D. `src/components/Navbar.tsx`, `en/NavbarEN.tsx`, `es/NavbarES.tsx` — insert switcher\n\nIdentical edit in all three (only the FR one shown; EN/ES are structurally identical per the grep). Two insertions each:\n\n**Import (top):**\n```tsx\nimport LanguageSwitcher from '@/components/LanguageSwitcher';\n```\n\n**Desktop — between the nav `

` (line 282) and the CTA `

` (line 285).** Wrap so it only shows on desktop:\n```tsx\n

{/* end desktop nav (line 282) */}\n\n {/* Language switcher (desktop) */}\n

\n \n

\n\n {/* CTA desktop */}\n

\n```\nThe navbar already has `lightBg` (prop) and `scrolled` (state) in scope — pass both.\n\n**Mobile — inside the mobile menu, just before the CTA block (line 385, `

`):**\n```tsx\n {/* Language switcher (mobile) */}\n

\n {/* FR: \"Langue\" · EN: \"Language\" · ES: \"Idioma\" */}\n Langue\n

\n \n

\n\n

{/* existing CTA */}\n```\nUse the locale-appropriate label literal per navbar (\"Langue\" / \"Language\" / \"Idioma\").\n\n### E. `index.html` (optional, minor)\n\nLeave `` as the initial value — the hook overrides it per route on mount. No change strictly required. (If you want the very first paint on an `/en` URL to be correct before React hydrates JS, you could leave it; it's cosmetic since this is CSR and there's no SEO crawler reading pre-JS state differently than post-JS for this setup.)\n\n---\n\n## Edge cases & decisions\n\n- **Switcher fallback on unmapped pages → link to target-locale home. Recommended over hiding.** City pages (`/:slug`), `/devenir-applicateur`, `/bat-en-112`, `/blog/:slug`, `/references/:slug` have no EN/ES twin. `getSwitchPath` returns `/` `/en` `/es`. Rationale: a visitor on a FR-only city page who wants English should still be able to switch into the English site (lands on EN home) rather than being stuck. Hiding the switcher would be inconsistent (it'd appear/disappear between pages) and confusing. Keep it visible everywhere; it always offers the 3 languages.\n- **hreflang only on mapped pages.** Unmapped pages get **no** hreflang (correct — no reciprocal alternates exist; emitting them would be invalid hreflang pointing at non-equivalent pages). `setHreflangLinks([])` guarantees no stale tags carry over from a previously-visited mapped page in the SPA.\n- **x-default = FR.** Single, justified choice.\n- **The `/secteurs/tertiaire`, `/secteurs/collectivite` aliases and the `` redirects** are not in the CSV → unmapped → no hreflang. Fine (redirects resolve before render for Navigate; the alias pages would just get FR lang + no hreflang).\n\n## Gotcha: `` full-reload vs SPA — this is actually correct here\n\nThe navbars use `` (full page navigation), not react-router ``. The switcher **must** do the same, and it's beneficial:\n- Each locale variant is a distinct page component; a full reload guarantees `usePageMeta` re-runs fresh, `` is reset, and there's no risk of stale meta/hreflang from a client-side transition.\n- `useLocation()` in the switcher still works on the *current* render to compute the correct target before the click — react-router context is present even though navigation itself is a hard nav.\n- Don't switch these to ``; mixing would be inconsistent with the rest of the nav and add no benefit on a CSR site with per-page `usePageMeta`.\n\nOne subtlety: because `getSwitchPath` reads `useLocation().pathname`, the switcher recomputes targets correctly when SPA-navigating *within* a locale (e.g. FR covatherm → FR bac-acier via some internal `` if any exist). Even though most nav is hard ``, this keeps it robust.\n\n---\n\n## Implementation order\n\n1. Create `src/config/i18nRoutes.ts` (transcribe all 26 CSV rows — verify against `docs/traduction/suivi-traduction.csv` columns 1/4/7).\n2. Modify `src/hooks/usePageMeta.ts` (useLocation + hreflang/og:locale/html-lang). Build to confirm no type/hook errors.\n3. Create `src/components/LanguageSwitcher.tsx`.\n4. Insert switcher into the 3 navbars (desktop + mobile, locale-appropriate \"Langue\" label).\n\n---\n\n## Verification steps (read-only / runtime, no file writes)\n\n1. **Build:** `npm run build` — must pass (TS + hook-rules clean). Confirms `useLocation()` usage compiles and no import cycles (`i18nRoutes` ← `usePageMeta`/`LanguageSwitcher`; no back-reference).\n2. **Dev server** on port from `.env.local` (3091, host 0.0.0.0) → preview URL.\n3. **hreflang on mapped routes** — for a sample FR/EN/ES set, inspect ``:\n - `/solutions/covatherm`, `/en/solutions/covatherm`, `/es/soluciones/covatherm` (same slug across locales)\n - `/toitures/bac-acier`, `/en/roofs/steel-deck`, `/es/cubiertas/chapa-de-acero` (**differing slugs** — the important test)\n - Each must show exactly 4 `link[rel=alternate]`: hreflang fr/en/es + x-default, all absolute `https://www.covalba.fr…`, x-default == fr URL. Check in DevTools: `document.querySelectorAll('link[hreflang]')`.\n4. **og:locale + html lang** — on each, confirm `document.documentElement.lang` = fr/en/es and `meta[property=\"og:locale\"]` = fr_FR/en_US/es_ES.\n5. **Stale-tag check (SPA):** if any internal `` navigation exists, navigate mapped→unmapped and confirm hreflang links are **removed** (`querySelectorAll('link[hreflang]').length === 0`). Most nav is hard-reload so this mainly guards future `` usage.\n6. **Switcher navigation:**\n - On `/solutions/covatherm`: click EN → lands `/en/solutions/covatherm`; click ES → `/es/soluciones/covatherm`.\n - On `/toitures/bac-acier` (differing slugs): EN → `/en/roofs/steel-deck`, ES → `/es/cubiertas/chapa-de-acero`. This is the key cross-slug test.\n - On an **unmapped** page (e.g. a city `/:slug` page or `/devenir-applicateur`): EN → `/en`, ES → `/es`, FR → `/`. Confirm no hreflang present and switcher still renders.\n7. **Visual:** switcher legible on dark transparent homepage hero (lightBg=false, not scrolled = white text), on light product pages (lightBg), and after scroll (scrolled=foreground). Mobile drawer shows FR/EN/ES pills above the CTA.\n8. **Active state:** current locale highlighted in both desktop dropdown and mobile pills.\n\n---\n\n### Critical Files for Implementation\n- /opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/src/config/i18nRoutes.ts (create — mapping + helpers, single source of truth)\n- /opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/src/hooks/usePageMeta.ts (modify — hreflang/og:locale/html-lang, zero per-page edits)\n- /opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/src/components/LanguageSwitcher.tsx (create — desktop + mobile variants)\n- /opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/src/components/Navbar.tsx (modify — insertion template for all 3 navbars; en/NavbarEN.tsx + es/NavbarES.tsx identical)\n- /opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/docs/traduction/suivi-traduction.csv (read — authoritative 26-row mapping to transcribe)\n\nI have not written any files (the plan-file path provided is unused; findings are returned here directly). No source files were modified."}],"stop_reason":"end_turn","stop_sequence":null,"stop_details":null,"usage":{"input_tokens":2,"cache_creation_input_tokens":519,"cache_read_input_tokens":64314,"output_tokens":7518,"server_tool_use":{"web_search_requests":0,"web_fetch_requests":0},"service_tier":"standard","cache_creation":{"ephemeral_1h_input_tokens":0,"ephemeral_5m_input_tokens":519},"inference_geo":"not_available","iterations":[{"input_tokens":2,"output_tokens":7518,"cache_read_input_tokens":64314,"cache_creation_input_tokens":519,"cache_creation":{"ephemeral_5m_input_tokens":519,"ephemeral_1h_input_tokens":0},"type":"message"}],"speed":"standard"},"diagnostics":null},"requestId":"req_011CcKxwXgQProhgyLLbNkit","attributionAgent":"Plan","type":"assistant","uuid":"a4a805e4-3196-4d96-aa04-b8b6723c1072","timestamp":"2026-06-23T09:37:47.152Z","userType":"external","entrypoint":"cli","cwd":"/opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all","sessionId":"22d3abbc-6868-484e-8bb0-ceaa184d3a29","version":"2.1.181","gitBranch":"nico/feature-traduction-all","slug":"mutable-snacking-pearl"}