{"parentUuid":null,"isSidechain":true,"promptId":"d89edf80-4e6d-44ec-80c1-78c9295c891f","agentId":"a01683a908360cb30","type":"user","message":{"role":"user","content":"Project: Covalba ES site. Repo: /opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all . Alias @/=src/.\nTASK: Create a SPANISH variant of the shared roof-type page template. READ src/components/roof/RoofPageTemplate.tsx in full. CREATE src/components/es/roof/RoofPageTemplateES.tsx as a FAITHFUL COPY — identical JSX structure, Tailwind classes, image/icon imports, state/logic, animations — but translate every HARDCODED French chrome string to Castilian Spanish (Spain).\n- Config-driven via `page` prop (type RoofPageData). DO NOT translate `page.*` values (supplied per-page, already Spanish). ONLY translate the template's hardcoded chrome: section eyebrows/headings, button/CTA labels, breadcrumb (Accueil→Inicio, Toitures→Cubiertas), form labels/placeholders, \"Sources\"/\"FAQ\" labels, success/error messages, alt texts.\n- Reuse the SAME RoofPageData type: `import { type RoofPageData } from '@/data/roofPages'` (check the real export name — TextCard may also be needed). Export default RoofPageTemplateES taking `{ page }: { page: RoofPageData }`.\n- Use ES chrome: NavbarES from '@/components/es/NavbarES', FooterES from '@/components/es/FooterES', StickyMobileCTAES from '@/components/es/StickyMobileCTAES' (if the FR template renders Navbar/Footer/StickyMobileCTA). Keep usePageMeta deriving canonical from page.canonical.\n- Castilian Spanish; keep metric units. Product pivot (CTAs \"Solicitar presupuesto\"; applicator = buyer's contractor). Strip France-specific hardcoded chrome. Internal links → /es (products → /es/soluciones/{covatherm,covaseal-20,covametal-20,covatherm-light}).\n- You may READ src/components/en/roof/RoofPageTemplateEN.tsx as a structural reference (it made the same decisions: keyword-matching helpers anchored on FR slugs, JSON-LD ids namespaced, comparison row labels). For ES use Spanish row labels but keep slug-based matching so images/pricing helpers keep working; flag any helper whose keyword-matching depends on the EN/ES copy.\n- If the template embeds French display data that would inject French, neutralize/omit it and flag.\n- Do NOT modify any French file. Only CREATE src/components/es/roof/RoofPageTemplateES.tsx. Do NOT run npm/tsc/build/git.\nReport: file created, French chrome translated (grouped), the RoofPageData import used, helper-matching flags."},"uuid":"2758f5e2-e952-4f8d-b777-acda1bb9b5ef","timestamp":"2026-06-22T14:54:33.810Z","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":"2758f5e2-e952-4f8d-b777-acda1bb9b5ef","isSidechain":true,"agentId":"a01683a908360cb30","attachment":{"type":"deferred_tools_delta","addedNames":["CronCreate","CronDelete","CronList","DesignSync","EnterWorktree","ExitWorktree","ListMcpResourcesTool","Monitor","NotebookEdit","PushNotification","ReadMcpResourceTool","RemoteTrigger","TaskCreate","TaskGet","TaskList","TaskStop","TaskUpdate","WebFetch","WebSearch","mcp__EstimanouContent__add_article_block","mcp__EstimanouContent__add_block","mcp__EstimanouContent__create_article","mcp__EstimanouContent__create_page","mcp__EstimanouContent__delete_article","mcp__EstimanouContent__delete_article_block","mcp__EstimanouContent__delete_block","mcp__EstimanouContent__get_article","mcp__EstimanouContent__get_city_page","mcp__EstimanouContent__get_page","mcp__EstimanouContent__list_articles","mcp__EstimanouContent__list_available_blocks","mcp__EstimanouContent__list_city_pages","mcp__EstimanouContent__list_pages","mcp__EstimanouContent__list_site_urls","mcp__EstimanouContent__reorder_article_blocks","mcp__EstimanouContent__reorder_blocks","mcp__EstimanouContent__replace_article_content","mcp__EstimanouContent__replace_city_seo_content","mcp__EstimanouContent__replace_page_layout","mcp__EstimanouContent__search_internal_links","mcp__EstimanouContent__update_article","mcp__EstimanouContent__update_article_block","mcp__EstimanouContent__update_block","mcp__EstimanouContent__update_city_page_content","mcp__claude_ai_Ahref__batch-analysis","mcp__claude_ai_Ahref__brand-radar-ai-responses","mcp__claude_ai_Ahref__brand-radar-ai-responses-entities","mcp__claude_ai_Ahref__brand-radar-cited-domains","mcp__claude_ai_Ahref__brand-radar-cited-domains-entities","mcp__claude_ai_Ahref__brand-radar-cited-pages","mcp__claude_ai_Ahref__brand-radar-cited-pages-entities","mcp__claude_ai_Ahref__brand-radar-impressions-history","mcp__claude_ai_Ahref__brand-radar-impressions-overview","mcp__claude_ai_Ahref__brand-radar-impressions-overview-entities","mcp__claude_ai_Ahref__brand-radar-mentions-history","mcp__claude_ai_Ahref__brand-radar-mentions-history-entities","mcp__claude_ai_Ahref__brand-radar-mentions-overview","mcp__claude_ai_Ahref__brand-radar-mentions-overview-entities","mcp__claude_ai_Ahref__brand-radar-sov-history","mcp__claude_ai_Ahref__brand-radar-sov-history-entities","mcp__claude_ai_Ahref__brand-radar-sov-overview","mcp__claude_ai_Ahref__brand-radar-sov-overview-entities","mcp__claude_ai_Ahref__doc","mcp__claude_ai_Ahref__gsc-anonymous-queries","mcp__claude_ai_Ahref__gsc-ctr-by-position","mcp__claude_ai_Ahref__gsc-keyword-history","mcp__claude_ai_Ahref__gsc-keywords","mcp__claude_ai_Ahref__gsc-metrics-by-country","mcp__claude_ai_Ahref__gsc-page-history","mcp__claude_ai_Ahref__gsc-pages","mcp__claude_ai_Ahref__gsc-pages-history","mcp__claude_ai_Ahref__gsc-performance-by-device","mcp__claude_ai_Ahref__gsc-performance-by-position","mcp__claude_ai_Ahref__gsc-performance-history","mcp__claude_ai_Ahref__gsc-positions-history","mcp__claude_ai_Ahref__keywords-explorer-matching-terms","mcp__claude_ai_Ahref__keywords-explorer-overview","mcp__claude_ai_Ahref__keywords-explorer-related-terms","mcp__claude_ai_Ahref__keywords-explorer-search-suggestions","mcp__claude_ai_Ahref__keywords-explorer-volume-by-country","mcp__claude_ai_Ahref__keywords-explorer-volume-history","mcp__claude_ai_Ahref__management-brand-radar-prompts","mcp__claude_ai_Ahref__management-brand-radar-reports","mcp__claude_ai_Ahref__management-keyword-list-keywords","mcp__claude_ai_Ahref__management-locations","mcp__claude_ai_Ahref__management-project-competitors","mcp__claude_ai_Ahref__management-project-keywords","mcp__claude_ai_Ahref__management-projects","mcp__claude_ai_Ahref__public-crawler-ip-ranges","mcp__claude_ai_Ahref__public-crawler-ips","mcp__claude_ai_Ahref__public-domain-rating-free","mcp__claude_ai_Ahref__rank-tracker-competitors-domains","mcp__claude_ai_Ahref__rank-tracker-competitors-overview","mcp__claude_ai_Ahref__rank-tracker-competitors-pages","mcp__claude_ai_Ahref__rank-tracker-competitors-stats","mcp__claude_ai_Ahref__rank-tracker-overview","mcp__claude_ai_Ahref__rank-tracker-serp-overview","mcp__claude_ai_Ahref__render-data-table","mcp__claude_ai_Ahref__render-scorecard","mcp__claude_ai_Ahref__render-time-series-chart","mcp__claude_ai_Ahref__serp-overview","mcp__claude_ai_Ahref__site-audit-issues","mcp__claude_ai_Ahref__site-audit-page-content","mcp__claude_ai_Ahref__site-audit-page-explorer","mcp__claude_ai_Ahref__site-audit-projects","mcp__claude_ai_Ahref__site-explorer-all-backlinks","mcp__claude_ai_Ahref__site-explorer-anchors","mcp__claude_ai_Ahref__site-explorer-backlinks-stats","mcp__claude_ai_Ahref__site-explorer-broken-backlinks","mcp__claude_ai_Ahref__site-explorer-crawled-pages","mcp__claude_ai_Ahref__site-explorer-domain-rating","mcp__claude_ai_Ahref__site-explorer-domain-rating-history","mcp__claude_ai_Ahref__site-explorer-keywords-history","mcp__claude_ai_Ahref__site-explorer-linked-anchors-external","mcp__claude_ai_Ahref__site-explorer-linked-anchors-internal","mcp__claude_ai_Ahref__site-explorer-linked-domains","mcp__claude_ai_Ahref__site-explorer-metrics","mcp__claude_ai_Ahref__site-explorer-metrics-by-country","mcp__claude_ai_Ahref__site-explorer-metrics-history","mcp__claude_ai_Ahref__site-explorer-organic-competitors","mcp__claude_ai_Ahref__site-explorer-organic-keywords","mcp__claude_ai_Ahref__site-explorer-outlinks-stats","mcp__claude_ai_Ahref__site-explorer-pages-by-backlinks","mcp__claude_ai_Ahref__site-explorer-pages-by-internal-links","mcp__claude_ai_Ahref__site-explorer-pages-by-traffic","mcp__claude_ai_Ahref__site-explorer-pages-history","mcp__claude_ai_Ahref__site-explorer-paid-pages","mcp__claude_ai_Ahref__site-explorer-refdomains-history","mcp__claude_ai_Ahref__site-explorer-referring-domains","mcp__claude_ai_Ahref__site-explorer-top-pages","mcp__claude_ai_Ahref__site-explorer-total-search-volume-history","mcp__claude_ai_Ahref__site-explorer-url-rating-history","mcp__claude_ai_Ahref__social-media-activity-history","mcp__claude_ai_Ahref__social-media-authors","mcp__claude_ai_Ahref__social-media-channel-metrics","mcp__claude_ai_Ahref__social-media-channels","mcp__claude_ai_Ahref__social-media-post-metrics","mcp__claude_ai_Ahref__social-media-posts","mcp__claude_ai_Ahref__subscription-info-limits-and-usage","mcp__claude_ai_Ahref__web-analytics-browser-versions","mcp__claude_ai_Ahref__web-analytics-browser-versions-chart","mcp__claude_ai_Ahref__web-analytics-browsers","mcp__claude_ai_Ahref__web-analytics-browsers-chart","mcp__claude_ai_Ahref__web-analytics-chart","mcp__claude_ai_Ahref__web-analytics-cities","mcp__claude_ai_Ahref__web-analytics-cities-chart","mcp__claude_ai_Ahref__web-analytics-continents","mcp__claude_ai_Ahref__web-analytics-continents-chart","mcp__claude_ai_Ahref__web-analytics-countries","mcp__claude_ai_Ahref__web-analytics-countries-chart","mcp__claude_ai_Ahref__web-analytics-devices","mcp__claude_ai_Ahref__web-analytics-devices-chart","mcp__claude_ai_Ahref__web-analytics-entry-pages","mcp__claude_ai_Ahref__web-analytics-entry-pages-chart","mcp__claude_ai_Ahref__web-analytics-exit-pages","mcp__claude_ai_Ahref__web-analytics-exit-pages-chart","mcp__claude_ai_Ahref__web-analytics-languages","mcp__claude_ai_Ahref__web-analytics-languages-chart","mcp__claude_ai_Ahref__web-analytics-operating-systems","mcp__claude_ai_Ahref__web-analytics-operating-systems-chart","mcp__claude_ai_Ahref__web-analytics-operating-systems-versions","mcp__claude_ai_Ahref__web-analytics-operating-systems-versions-chart","mcp__claude_ai_Ahref__web-analytics-referrers","mcp__claude_ai_Ahref__web-analytics-referrers-chart","mcp__claude_ai_Ahref__web-analytics-source-channels","mcp__claude_ai_Ahref__web-analytics-source-channels-chart","mcp__claude_ai_Ahref__web-analytics-sources","mcp__claude_ai_Ahref__web-analytics-sources-chart","mcp__claude_ai_Ahref__web-analytics-stats","mcp__claude_ai_Ahref__web-analytics-top-pages","mcp__claude_ai_Ahref__web-analytics-top-pages-chart","mcp__claude_ai_Ahref__web-analytics-utm-params","mcp__claude_ai_Ahref__web-analytics-utm-params-chart","mcp__claude_ai_Canva__cancel-editing-transaction","mcp__claude_ai_Canva__comment-on-design","mcp__claude_ai_Canva__commit-editing-transaction","mcp__claude_ai_Canva__copy-design","mcp__claude_ai_Canva__create-brand-template-draft","mcp__claude_ai_Canva__create-design-from-brand-template","mcp__claude_ai_Canva__create-design-from-candidate","mcp__claude_ai_Canva__create-folder","mcp__claude_ai_Canva__export-design","mcp__claude_ai_Canva__generate-design","mcp__claude_ai_Canva__generate-design-structured","mcp__claude_ai_Canva__get-assets","mcp__claude_ai_Canva__get-brand-template-dataset","mcp__claude_ai_Canva__get-design","mcp__claude_ai_Canva__get-design-candidates","mcp__claude_ai_Canva__get-design-content","mcp__claude_ai_Canva__get-design-pages","mcp__claude_ai_Canva__get-design-thumbnail","mcp__claude_ai_Canva__get-export-formats","mcp__claude_ai_Canva__get-presenter-notes","mcp__claude_ai_Canva__help","mcp__claude_ai_Canva__import-design-from-url","mcp__claude_ai_Canva__list-brand-kits","mcp__claude_ai_Canva__list-comments","mcp__claude_ai_Canva__list-folder-items","mcp__claude_ai_Canva__list-replies","mcp__claude_ai_Canva__merge-designs","mcp__claude_ai_Canva__move-item-to-folder","mcp__claude_ai_Canva__perform-editing-operations","mcp__claude_ai_Canva__publish-brand-template","mcp__claude_ai_Canva__reply-to-comment","mcp__claude_ai_Canva__request-outline-review","mcp__claude_ai_Canva__resize-design","mcp__claude_ai_Canva__resolve-shortlink","mcp__claude_ai_Canva__search-brand-templates","mcp__claude_ai_Canva__search-designs","mcp__claude_ai_Canva__search-folders","mcp__claude_ai_Canva__start-editing-transaction","mcp__claude_ai_Canva__upload-asset-from-url","mcp__claude_ai_DATA_GOUV_FR__get_dataservice_info","mcp__claude_ai_DATA_GOUV_FR__get_dataservice_openapi_spec","mcp__claude_ai_DATA_GOUV_FR__get_dataset_info","mcp__claude_ai_DATA_GOUV_FR__get_metrics","mcp__claude_ai_DATA_GOUV_FR__get_resource_info","mcp__claude_ai_DATA_GOUV_FR__list_dataset_resources","mcp__claude_ai_DATA_GOUV_FR__query_resource_data","mcp__claude_ai_DATA_GOUV_FR__search_dataservices","mcp__claude_ai_DATA_GOUV_FR__search_datasets","mcp__claude_ai_DATA_GOUV_FR__search_organizations","mcp__claude_ai_Data_For_SEO__authenticate","mcp__claude_ai_Data_For_SEO__complete_authentication","mcp__claude_ai_Esteworld-Body__add_block","mcp__claude_ai_Esteworld-Body__delete_block","mcp__claude_ai_Esteworld-Body__find_esteworld_page","mcp__claude_ai_Esteworld-Body__fix_global_blocks","mcp__claude_ai_Esteworld-Body__get_block","mcp__claude_ai_Esteworld-Body__get_blocks_library","mcp__claude_ai_Esteworld-Body__get_breadcrumb","mcp__claude_ai_Esteworld-Body__get_fr_en_mapping","mcp__claude_ai_Esteworld-Body__get_internal_links","mcp__claude_ai_Esteworld-Body__get_internal_links_en","mcp__claude_ai_Esteworld-Body__get_maillage_rules","mcp__claude_ai_Esteworld-Body__get_page","mcp__claude_ai_Esteworld-Body__get_page_json","mcp__claude_ai_Esteworld-Body__get_page_status","mcp__claude_ai_Esteworld-Body__get_redirections","mcp__claude_ai_Esteworld-Body__get_section_content","mcp__claude_ai_Esteworld-Body__get_thematique_pages","mcp__claude_ai_Esteworld-Body__get_translation_languages","mcp__claude_ai_Esteworld-Body__list_pages","mcp__claude_ai_Esteworld-Body__list_pages_by_thematique","mcp__claude_ai_Esteworld-Body__list_pages_by_type","mcp__claude_ai_Esteworld-Body__list_pages_to_create","mcp__claude_ai_Esteworld-Body__list_pages_to_rewrite","mcp__claude_ai_Esteworld-Body__list_pages_with_esteworld","mcp__claude_ai_Esteworld-Body__list_pages_without_esteworld","mcp__claude_ai_Esteworld-Body__n8n_activate_workflow","mcp__claude_ai_Esteworld-Body__n8n_get_executions","mcp__claude_ai_Esteworld-Body__n8n_get_workflow","mcp__claude_ai_Esteworld-Body__n8n_list_workflows","mcp__claude_ai_Esteworld-Body__n8n_trigger_webhook","mcp__claude_ai_Esteworld-Body__preview_global_fixes","mcp__claude_ai_Esteworld-Body__reorder_blocks","mcp__claude_ai_Esteworld-Body__search_content","mcp__claude_ai_Esteworld-Body__search_links_by_keyword","mcp__claude_ai_Esteworld-Body__search_links_by_keyword_en","mcp__claude_ai_Esteworld-Body__submit_page","mcp__claude_ai_Esteworld-Body__submit_page_light","mcp__claude_ai_Esteworld-Body__translate_page","mcp__claude_ai_Esteworld-Body__update_block","mcp__claude_ai_Figma__add_code_connect_map","mcp__claude_ai_Figma__create_new_file","mcp__claude_ai_Figma__download_assets","mcp__claude_ai_Figma__generate_diagram","mcp__claude_ai_Figma__get_code_connect_map","mcp__claude_ai_Figma__get_code_connect_suggestions","mcp__claude_ai_Figma__get_context_for_code_connect","mcp__claude_ai_Figma__get_design_context","mcp__claude_ai_Figma__get_figjam","mcp__claude_ai_Figma__get_libraries","mcp__claude_ai_Figma__get_metadata","mcp__claude_ai_Figma__get_screenshot","mcp__claude_ai_Figma__get_variable_defs","mcp__claude_ai_Figma__search_design_system","mcp__claude_ai_Figma__send_code_connect_mappings","mcp__claude_ai_Figma__upload_assets","mcp__claude_ai_Figma__use_figma","mcp__claude_ai_Figma__whoami","mcp__claude_ai_Gmail__create_draft","mcp__claude_ai_Gmail__create_label","mcp__claude_ai_Gmail__delete_label","mcp__claude_ai_Gmail__get_thread","mcp__claude_ai_Gmail__label_message","mcp__claude_ai_Gmail__label_thread","mcp__claude_ai_Gmail__list_drafts","mcp__claude_ai_Gmail__list_labels","mcp__claude_ai_Gmail__search_threads","mcp__claude_ai_Gmail__unlabel_message","mcp__claude_ai_Gmail__unlabel_thread","mcp__claude_ai_Gmail__update_label","mcp__claude_ai_Google_Calendar__create_event","mcp__claude_ai_Google_Calendar__delete_event","mcp__claude_ai_Google_Calendar__get_event","mcp__claude_ai_Google_Calendar__list_calendars","mcp__claude_ai_Google_Calendar__list_events","mcp__claude_ai_Google_Calendar__respond_to_event","mcp__claude_ai_Google_Calendar__suggest_time","mcp__claude_ai_Google_Calendar__update_event","mcp__claude_ai_Google_Drive__copy_file","mcp__claude_ai_Google_Drive__create_file","mcp__claude_ai_Google_Drive__download_file_content","mcp__claude_ai_Google_Drive__get_file_metadata","mcp__claude_ai_Google_Drive__get_file_permissions","mcp__claude_ai_Google_Drive__list_recent_files","mcp__claude_ai_Google_Drive__read_file_content","mcp__claude_ai_Google_Drive__search_files","mcp__claude_ai_SEMRush__backlink_research","mcp__claude_ai_SEMRush__execute_report","mcp__claude_ai_SEMRush__get_report_schema","mcp__claude_ai_SEMRush__keyword_research","mcp__claude_ai_SEMRush__organic_research","mcp__claude_ai_SEMRush__overview_research","mcp__claude_ai_SEMRush__projects_research","mcp__claude_ai_SEMRush__siteaudit_research","mcp__claude_ai_SEMRush__subdomain_research","mcp__claude_ai_SEMRush__subfolder_research","mcp__claude_ai_SEMRush__tracking_research","mcp__claude_ai_SEMRush__trends_research","mcp__claude_ai_SEMRush__url_research","mcp__claude_ai_Vercel__add_toolbar_reaction","mcp__claude_ai_Vercel__change_toolbar_thread_resolve_status","mcp__claude_ai_Vercel__check_domain_availability_and_price","mcp__claude_ai_Vercel__deploy_to_vercel","mcp__claude_ai_Vercel__edit_toolbar_message","mcp__claude_ai_Vercel__get_access_to_vercel_url","mcp__claude_ai_Vercel__get_deployment","mcp__claude_ai_Vercel__get_deployment_build_logs","mcp__claude_ai_Vercel__get_project","mcp__claude_ai_Vercel__get_runtime_logs","mcp__claude_ai_Vercel__get_toolbar_thread","mcp__claude_ai_Vercel__import-claude-design-from-url","mcp__claude_ai_Vercel__list_deployments","mcp__claude_ai_Vercel__list_projects","mcp__claude_ai_Vercel__list_teams","mcp__claude_ai_Vercel__list_toolbar_threads","mcp__claude_ai_Vercel__reply_to_toolbar_thread","mcp__claude_ai_Vercel__search_vercel_documentation","mcp__claude_ai_Vercel__web_fetch_vercel_url","mcp__gpt-image-2__continue_edit_session","mcp__gpt-image-2__edit_image","mcp__gpt-image-2__end_edit_session","mcp__gpt-image-2__generate_image","mcp__gpt-image-2__list_edit_sessions","mcp__gpt-image-2__start_edit_session","mcp__hostinger__DNS_deleteDNSRecordsV1","mcp__hostinger__DNS_getDNSRecordsV1","mcp__hostinger__DNS_getDNSSnapshotListV1","mcp__hostinger__DNS_getDNSSnapshotV1","mcp__hostinger__DNS_resetDNSRecordsV1","mcp__hostinger__DNS_restoreDNSSnapshotV1","mcp__hostinger__DNS_updateDNSRecordsV1","mcp__hostinger__DNS_validateDNSRecordsV1","mcp__hostinger__VPS_activateFirewallV1","mcp__hostinger__VPS_attachPublicKeyV1","mcp__hostinger__VPS_createFirewallRuleV1","mcp__hostinger__VPS_createNewFirewallV1","mcp__hostinger__VPS_createNewProjectV1","mcp__hostinger__VPS_createPTRRecordV1","mcp__hostinger__VPS_createPostInstallScriptV1","mcp__hostinger__VPS_createPublicKeyV1","mcp__hostinger__VPS_createSnapshotV1","mcp__hostinger__VPS_deactivateFirewallV1","mcp__hostinger__VPS_deleteFirewallRuleV1","mcp__hostinger__VPS_deleteFirewallV1","mcp__hostinger__VPS_deletePTRRecordV1","mcp__hostinger__VPS_deletePostInstallScriptV1","mcp__hostinger__VPS_deleteProjectV1","mcp__hostinger__VPS_deletePublicKeyV1","mcp__hostinger__VPS_deleteSnapshotV1","mcp__hostinger__VPS_getActionDetailsV1","mcp__hostinger__VPS_getActionsV1","mcp__hostinger__VPS_getAttachedPublicKeysV1","mcp__hostinger__VPS_getBackupsV1","mcp__hostinger__VPS_getDataCenterListV1","mcp__hostinger__VPS_getFirewallDetailsV1","mcp__hostinger__VPS_getFirewallListV1","mcp__hostinger__VPS_getMetricsV1","mcp__hostinger__VPS_getPostInstallScriptV1","mcp__hostinger__VPS_getPostInstallScriptsV1","mcp__hostinger__VPS_getProjectContainersV1","mcp__hostinger__VPS_getProjectContentsV1","mcp__hostinger__VPS_getProjectListV1","mcp__hostinger__VPS_getProjectLogsV1","mcp__hostinger__VPS_getPublicKeysV1","mcp__hostinger__VPS_getScanMetricsV1","mcp__hostinger__VPS_getSnapshotV1","mcp__hostinger__VPS_getTemplateDetailsV1","mcp__hostinger__VPS_getTemplatesV1","mcp__hostinger__VPS_getVirtualMachineDetailsV1","mcp__hostinger__VPS_getVirtualMachinesV1","mcp__hostinger__VPS_installMonarxV1","mcp__hostinger__VPS_purchaseNewVirtualMachineV1","mcp__hostinger__VPS_recreateVirtualMachineV1","mcp__hostinger__VPS_resetHostnameV1","mcp__hostinger__VPS_restartProjectV1","mcp__hostinger__VPS_restartVirtualMachineV1","mcp__hostinger__VPS_restoreBackupV1","mcp__hostinger__VPS_restoreSnapshotV1","mcp__hostinger__VPS_setHostnameV1","mcp__hostinger__VPS_setNameserversV1","mcp__hostinger__VPS_setPanelPasswordV1","mcp__hostinger__VPS_setRootPasswordV1","mcp__hostinger__VPS_setupPurchasedVirtualMachineV1","mcp__hostinger__VPS_startProjectV1","mcp__hostinger__VPS_startRecoveryModeV1","mcp__hostinger__VPS_startVirtualMachineV1","mcp__hostinger__VPS_stopProjectV1","mcp__hostinger__VPS_stopRecoveryModeV1","mcp__hostinger__VPS_stopVirtualMachineV1","mcp__hostinger__VPS_syncFirewallV1","mcp__hostinger__VPS_uninstallMonarxV1","mcp__hostinger__VPS_updateFirewallRuleV1","mcp__hostinger__VPS_updatePostInstallScriptV1","mcp__hostinger__VPS_updateProjectV1","mcp__hostinger__billing_deletePaymentMethodV1","mcp__hostinger__billing_disableAutoRenewalV1","mcp__hostinger__billing_enableAutoRenewalV1","mcp__hostinger__billing_getCatalogItemListV1","mcp__hostinger__billing_getPaymentMethodListV1","mcp__hostinger__billing_getSubscriptionListV1","mcp__hostinger__billing_setDefaultPaymentMethodV1","mcp__hostinger__domains_checkDomainAvailabilityV1","mcp__hostinger__domains_createDomainForwardingV1","mcp__hostinger__domains_createWHOISProfileV1","mcp__hostinger__domains_deleteDomainForwardingV1","mcp__hostinger__domains_deleteWHOISProfileV1","mcp__hostinger__domains_disableDomainLockV1","mcp__hostinger__domains_disablePrivacyProtectionV1","mcp__hostinger__domains_enableDomainLockV1","mcp__hostinger__domains_enablePrivacyProtectionV1","mcp__hostinger__domains_getDomainDetailsV1","mcp__hostinger__domains_getDomainForwardingV1","mcp__hostinger__domains_getDomainListV1","mcp__hostinger__domains_getWHOISProfileListV1","mcp__hostinger__domains_getWHOISProfileUsageV1","mcp__hostinger__domains_getWHOISProfileV1","mcp__hostinger__domains_purchaseNewDomainV1","mcp__hostinger__domains_updateDomainNameserversV1","mcp__hostinger__hosting_createAccountDatabaseV1","mcp__hostinger__hosting_createWebsiteParkedDomainV1","mcp__hostinger__hosting_createWebsiteSubdomainV1","mcp__hostinger__hosting_createWebsiteV1","mcp__hostinger__hosting_deleteAccountDatabaseV1","mcp__hostinger__hosting_deleteWebsiteParkedDomainV1","mcp__hostinger__hosting_deleteWebsiteSubdomainV1","mcp__hostinger__hosting_deployJsApplication","mcp__hostinger__hosting_deployStaticWebsite","mcp__hostinger__hosting_deployWordpressPlugin","mcp__hostinger__hosting_deployWordpressTheme","mcp__hostinger__hosting_generateAFreeSubdomainV1","mcp__hostinger__hosting_importWordpressWebsite","mcp__hostinger__hosting_installWordPressV1","mcp__hostinger__hosting_listAccountDatabasesV1","mcp__hostinger__hosting_listAvailableDatacentersV1","mcp__hostinger__hosting_listJsDeployments","mcp__hostinger__hosting_listOrdersV1","mcp__hostinger__hosting_listWebsiteParkedDomainsV1","mcp__hostinger__hosting_listWebsiteSubdomainsV1","mcp__hostinger__hosting_listWebsitesV1","mcp__hostinger__hosting_listWordPressInstallationsV1","mcp__hostinger__hosting_showJsDeploymentLogs","mcp__hostinger__hosting_verifyDomainOwnershipV1","mcp__hostinger__reach_createANewContactSegmentV1","mcp__hostinger__reach_createANewContactV1","mcp__hostinger__reach_createNewContactsV1","mcp__hostinger__reach_deleteAContactV1","mcp__hostinger__reach_getSegmentDetailsV1","mcp__hostinger__reach_listContactGroupsV1","mcp__hostinger__reach_listContactsV1","mcp__hostinger__reach_listProfilesV1","mcp__hostinger__reach_listSegmentContactsV1","mcp__hostinger__reach_listSegmentsV1","mcp__hostinger__v2_getDomainVerificationsDIRECT","mcp__n8n-mcp__get_node","mcp__n8n-mcp__get_template","mcp__n8n-mcp__n8n_audit_instance","mcp__n8n-mcp__n8n_autofix_workflow","mcp__n8n-mcp__n8n_create_workflow","mcp__n8n-mcp__n8n_delete_workflow","mcp__n8n-mcp__n8n_deploy_template","mcp__n8n-mcp__n8n_executions","mcp__n8n-mcp__n8n_generate_workflow","mcp__n8n-mcp__n8n_get_workflow","mcp__n8n-mcp__n8n_health_check","mcp__n8n-mcp__n8n_list_workflows","mcp__n8n-mcp__n8n_manage_credentials","mcp__n8n-mcp__n8n_manage_datatable","mcp__n8n-mcp__n8n_test_workflow","mcp__n8n-mcp__n8n_update_full_workflow","mcp__n8n-mcp__n8n_update_partial_workflow","mcp__n8n-mcp__n8n_validate_workflow","mcp__n8n-mcp__n8n_workflow_versions","mcp__n8n-mcp__search_nodes","mcp__n8n-mcp__search_templates","mcp__n8n-mcp__tools_documentation","mcp__n8n-mcp__validate_node","mcp__n8n-mcp__validate_workflow","mcp__nanobanana__generate_image","mcp__nanobanana__maintenance","mcp__nanobanana__show_output_stats","mcp__nanobanana__upload_file","mcp__plugin_vercel_vercel__authenticate","mcp__plugin_vercel_vercel__complete_authentication","mcp__refero__refero_get_flow","mcp__refero__refero_get_screen","mcp__refero__refero_get_screen_image","mcp__refero__refero_get_similar_screens","mcp__refero__refero_get_style","mcp__refero__refero_search_flows","mcp__refero__refero_search_screens","mcp__refero__refero_search_styles","mcp__semrush__authenticate","mcp__semrush__complete_authentication","mcp__stock-images-mcp__search_stock_images","mcp__trello__add_card_to_list","mcp__trello__add_checklist_item","mcp__trello__add_comment","mcp__trello__add_list_to_board","mcp__trello__archive_card","mcp__trello__archive_list","mcp__trello__assign_member_to_card","mcp__trello__attach_file_to_card","mcp__trello__attach_image_data_to_card","mcp__trello__attach_image_to_card","mcp__trello__create_board","mcp__trello__create_checklist","mcp__trello__create_label","mcp__trello__delete_comment","mcp__trello__delete_label","mcp__trello__find_checklist_items_by_description","mcp__trello__get_acceptance_criteria","mcp__trello__get_active_board_info","mcp__trello__get_board_labels","mcp__trello__get_board_members","mcp__trello__get_card","mcp__trello__get_card_comments","mcp__trello__get_card_history","mcp__trello__get_cards_by_list_id","mcp__trello__get_checklist_by_name","mcp__trello__get_checklist_items","mcp__trello__get_health","mcp__trello__get_health_detailed","mcp__trello__get_health_metadata","mcp__trello__get_health_performance","mcp__trello__get_lists","mcp__trello__get_my_cards","mcp__trello__get_recent_activity","mcp__trello__list_boards","mcp__trello__list_boards_in_workspace","mcp__trello__list_workspaces","mcp__trello__move_card","mcp__trello__perform_system_repair","mcp__trello__remove_member_from_card","mcp__trello__set_active_board","mcp__trello__set_active_workspace","mcp__trello__update_card_details","mcp__trello__update_checklist_item","mcp__trello__update_comment","mcp__trello__update_label"],"addedLines":["CronCreate","CronDelete","CronList","DesignSync","EnterWorktree","ExitWorktree","ListMcpResourcesTool","Monitor","NotebookEdit","PushNotification","ReadMcpResourceTool","RemoteTrigger","TaskCreate","TaskGet","TaskList","TaskStop","TaskUpdate","WebFetch","WebSearch","mcp__EstimanouContent__add_article_block","mcp__EstimanouContent__add_block","mcp__EstimanouContent__create_article","mcp__EstimanouContent__create_page","mcp__EstimanouContent__delete_article","mcp__EstimanouContent__delete_article_block","mcp__EstimanouContent__delete_block","mcp__EstimanouContent__get_article","mcp__EstimanouContent__get_city_page","mcp__EstimanouContent__get_page","mcp__EstimanouContent__list_articles","mcp__EstimanouContent__list_available_blocks","mcp__EstimanouContent__list_city_pages","mcp__EstimanouContent__list_pages","mcp__EstimanouContent__list_site_urls","mcp__EstimanouContent__reorder_article_blocks","mcp__EstimanouContent__reorder_blocks","mcp__EstimanouContent__replace_article_content","mcp__EstimanouContent__replace_city_seo_content","mcp__EstimanouContent__replace_page_layout","mcp__EstimanouContent__search_internal_links","mcp__EstimanouContent__update_article","mcp__EstimanouContent__update_article_block","mcp__EstimanouContent__update_block","mcp__EstimanouContent__update_city_page_content","mcp__claude_ai_Ahref__batch-analysis","mcp__claude_ai_Ahref__brand-radar-ai-responses","mcp__claude_ai_Ahref__brand-radar-ai-responses-entities","mcp__claude_ai_Ahref__brand-radar-cited-domains","mcp__claude_ai_Ahref__brand-radar-cited-domains-entities","mcp__claude_ai_Ahref__brand-radar-cited-pages","mcp__claude_ai_Ahref__brand-radar-cited-pages-entities","mcp__claude_ai_Ahref__brand-radar-impressions-history","mcp__claude_ai_Ahref__brand-radar-impressions-overview","mcp__claude_ai_Ahref__brand-radar-impressions-overview-entities","mcp__claude_ai_Ahref__brand-radar-mentions-history","mcp__claude_ai_Ahref__brand-radar-mentions-history-entities","mcp__claude_ai_Ahref__brand-radar-mentions-overview","mcp__claude_ai_Ahref__brand-radar-mentions-overview-entities","mcp__claude_ai_Ahref__brand-radar-sov-history","mcp__claude_ai_Ahref__brand-radar-sov-history-entities","mcp__claude_ai_Ahref__brand-radar-sov-overview","mcp__claude_ai_Ahref__brand-radar-sov-overview-entities","mcp__claude_ai_Ahref__doc","mcp__claude_ai_Ahref__gsc-anonymous-queries","mcp__claude_ai_Ahref__gsc-ctr-by-position","mcp__claude_ai_Ahref__gsc-keyword-history","mcp__claude_ai_Ahref__gsc-keywords","mcp__claude_ai_Ahref__gsc-metrics-by-country","mcp__claude_ai_Ahref__gsc-page-history","mcp__claude_ai_Ahref__gsc-pages","mcp__claude_ai_Ahref__gsc-pages-history","mcp__claude_ai_Ahref__gsc-performance-by-device","mcp__claude_ai_Ahref__gsc-performance-by-position","mcp__claude_ai_Ahref__gsc-performance-history","mcp__claude_ai_Ahref__gsc-positions-history","mcp__claude_ai_Ahref__keywords-explorer-matching-terms","mcp__claude_ai_Ahref__keywords-explorer-overview","mcp__claude_ai_Ahref__keywords-explorer-related-terms","mcp__claude_ai_Ahref__keywords-explorer-search-suggestions","mcp__claude_ai_Ahref__keywords-explorer-volume-by-country","mcp__claude_ai_Ahref__keywords-explorer-volume-history","mcp__claude_ai_Ahref__management-brand-radar-prompts","mcp__claude_ai_Ahref__management-brand-radar-reports","mcp__claude_ai_Ahref__management-keyword-list-keywords","mcp__claude_ai_Ahref__management-locations","mcp__claude_ai_Ahref__management-project-competitors","mcp__claude_ai_Ahref__management-project-keywords","mcp__claude_ai_Ahref__management-projects","mcp__claude_ai_Ahref__public-crawler-ip-ranges","mcp__claude_ai_Ahref__public-crawler-ips","mcp__claude_ai_Ahref__public-domain-rating-free","mcp__claude_ai_Ahref__rank-tracker-competitors-domains","mcp__claude_ai_Ahref__rank-tracker-competitors-overview","mcp__claude_ai_Ahref__rank-tracker-competitors-pages","mcp__claude_ai_Ahref__rank-tracker-competitors-stats","mcp__claude_ai_Ahref__rank-tracker-overview","mcp__claude_ai_Ahref__rank-tracker-serp-overview","mcp__claude_ai_Ahref__render-data-table","mcp__claude_ai_Ahref__render-scorecard","mcp__claude_ai_Ahref__render-time-series-chart","mcp__claude_ai_Ahref__serp-overview","mcp__claude_ai_Ahref__site-audit-issues","mcp__claude_ai_Ahref__site-audit-page-content","mcp__claude_ai_Ahref__site-audit-page-explorer","mcp__claude_ai_Ahref__site-audit-projects","mcp__claude_ai_Ahref__site-explorer-all-backlinks","mcp__claude_ai_Ahref__site-explorer-anchors","mcp__claude_ai_Ahref__site-explorer-backlinks-stats","mcp__claude_ai_Ahref__site-explorer-broken-backlinks","mcp__claude_ai_Ahref__site-explorer-crawled-pages","mcp__claude_ai_Ahref__site-explorer-domain-rating","mcp__claude_ai_Ahref__site-explorer-domain-rating-history","mcp__claude_ai_Ahref__site-explorer-keywords-history","mcp__claude_ai_Ahref__site-explorer-linked-anchors-external","mcp__claude_ai_Ahref__site-explorer-linked-anchors-internal","mcp__claude_ai_Ahref__site-explorer-linked-domains","mcp__claude_ai_Ahref__site-explorer-metrics","mcp__claude_ai_Ahref__site-explorer-metrics-by-country","mcp__claude_ai_Ahref__site-explorer-metrics-history","mcp__claude_ai_Ahref__site-explorer-organic-competitors","mcp__claude_ai_Ahref__site-explorer-organic-keywords","mcp__claude_ai_Ahref__site-explorer-outlinks-stats","mcp__claude_ai_Ahref__site-explorer-pages-by-backlinks","mcp__claude_ai_Ahref__site-explorer-pages-by-internal-links","mcp__claude_ai_Ahref__site-explorer-pages-by-traffic","mcp__claude_ai_Ahref__site-explorer-pages-history","mcp__claude_ai_Ahref__site-explorer-paid-pages","mcp__claude_ai_Ahref__site-explorer-refdomains-history","mcp__claude_ai_Ahref__site-explorer-referring-domains","mcp__claude_ai_Ahref__site-explorer-top-pages","mcp__claude_ai_Ahref__site-explorer-total-search-volume-history","mcp__claude_ai_Ahref__site-explorer-url-rating-history","mcp__claude_ai_Ahref__social-media-activity-history","mcp__claude_ai_Ahref__social-media-authors","mcp__claude_ai_Ahref__social-media-channel-metrics","mcp__claude_ai_Ahref__social-media-channels","mcp__claude_ai_Ahref__social-media-post-metrics","mcp__claude_ai_Ahref__social-media-posts","mcp__claude_ai_Ahref__subscription-info-limits-and-usage","mcp__claude_ai_Ahref__web-analytics-browser-versions","mcp__claude_ai_Ahref__web-analytics-browser-versions-chart","mcp__claude_ai_Ahref__web-analytics-browsers","mcp__claude_ai_Ahref__web-analytics-browsers-chart","mcp__claude_ai_Ahref__web-analytics-chart","mcp__claude_ai_Ahref__web-analytics-cities","mcp__claude_ai_Ahref__web-analytics-cities-chart","mcp__claude_ai_Ahref__web-analytics-continents","mcp__claude_ai_Ahref__web-analytics-continents-chart","mcp__claude_ai_Ahref__web-analytics-countries","mcp__claude_ai_Ahref__web-analytics-countries-chart","mcp__claude_ai_Ahref__web-analytics-devices","mcp__claude_ai_Ahref__web-analytics-devices-chart","mcp__claude_ai_Ahref__web-analytics-entry-pages","mcp__claude_ai_Ahref__web-analytics-entry-pages-chart","mcp__claude_ai_Ahref__web-analytics-exit-pages","mcp__claude_ai_Ahref__web-analytics-exit-pages-chart","mcp__claude_ai_Ahref__web-analytics-languages","mcp__claude_ai_Ahref__web-analytics-languages-chart","mcp__claude_ai_Ahref__web-analytics-operating-systems","mcp__claude_ai_Ahref__web-analytics-operating-systems-chart","mcp__claude_ai_Ahref__web-analytics-operating-systems-versions","mcp__claude_ai_Ahref__web-analytics-operating-systems-versions-chart","mcp__claude_ai_Ahref__web-analytics-referrers","mcp__claude_ai_Ahref__web-analytics-referrers-chart","mcp__claude_ai_Ahref__web-analytics-source-channels","mcp__claude_ai_Ahref__web-analytics-source-channels-chart","mcp__claude_ai_Ahref__web-analytics-sources","mcp__claude_ai_Ahref__web-analytics-sources-chart","mcp__claude_ai_Ahref__web-analytics-stats","mcp__claude_ai_Ahref__web-analytics-top-pages","mcp__claude_ai_Ahref__web-analytics-top-pages-chart","mcp__claude_ai_Ahref__web-analytics-utm-params","mcp__claude_ai_Ahref__web-analytics-utm-params-chart","mcp__claude_ai_Canva__cancel-editing-transaction","mcp__claude_ai_Canva__comment-on-design","mcp__claude_ai_Canva__commit-editing-transaction","mcp__claude_ai_Canva__copy-design","mcp__claude_ai_Canva__create-brand-template-draft","mcp__claude_ai_Canva__create-design-from-brand-template","mcp__claude_ai_Canva__create-design-from-candidate","mcp__claude_ai_Canva__create-folder","mcp__claude_ai_Canva__export-design","mcp__claude_ai_Canva__generate-design","mcp__claude_ai_Canva__generate-design-structured","mcp__claude_ai_Canva__get-assets","mcp__claude_ai_Canva__get-brand-template-dataset","mcp__claude_ai_Canva__get-design","mcp__claude_ai_Canva__get-design-candidates","mcp__claude_ai_Canva__get-design-content","mcp__claude_ai_Canva__get-design-pages","mcp__claude_ai_Canva__get-design-thumbnail","mcp__claude_ai_Canva__get-export-formats","mcp__claude_ai_Canva__get-presenter-notes","mcp__claude_ai_Canva__help","mcp__claude_ai_Canva__import-design-from-url","mcp__claude_ai_Canva__list-brand-kits","mcp__claude_ai_Canva__list-comments","mcp__claude_ai_Canva__list-folder-items","mcp__claude_ai_Canva__list-replies","mcp__claude_ai_Canva__merge-designs","mcp__claude_ai_Canva__move-item-to-folder","mcp__claude_ai_Canva__perform-editing-operations","mcp__claude_ai_Canva__publish-brand-template","mcp__claude_ai_Canva__reply-to-comment","mcp__claude_ai_Canva__request-outline-review","mcp__claude_ai_Canva__resize-design","mcp__claude_ai_Canva__resolve-shortlink","mcp__claude_ai_Canva__search-brand-templates","mcp__claude_ai_Canva__search-designs","mcp__claude_ai_Canva__search-folders","mcp__claude_ai_Canva__start-editing-transaction","mcp__claude_ai_Canva__upload-asset-from-url","mcp__claude_ai_DATA_GOUV_FR__get_dataservice_info","mcp__claude_ai_DATA_GOUV_FR__get_dataservice_openapi_spec","mcp__claude_ai_DATA_GOUV_FR__get_dataset_info","mcp__claude_ai_DATA_GOUV_FR__get_metrics","mcp__claude_ai_DATA_GOUV_FR__get_resource_info","mcp__claude_ai_DATA_GOUV_FR__list_dataset_resources","mcp__claude_ai_DATA_GOUV_FR__query_resource_data","mcp__claude_ai_DATA_GOUV_FR__search_dataservices","mcp__claude_ai_DATA_GOUV_FR__search_datasets","mcp__claude_ai_DATA_GOUV_FR__search_organizations","mcp__claude_ai_Data_For_SEO__authenticate","mcp__claude_ai_Data_For_SEO__complete_authentication","mcp__claude_ai_Esteworld-Body__add_block","mcp__claude_ai_Esteworld-Body__delete_block","mcp__claude_ai_Esteworld-Body__find_esteworld_page","mcp__claude_ai_Esteworld-Body__fix_global_blocks","mcp__claude_ai_Esteworld-Body__get_block","mcp__claude_ai_Esteworld-Body__get_blocks_library","mcp__claude_ai_Esteworld-Body__get_breadcrumb","mcp__claude_ai_Esteworld-Body__get_fr_en_mapping","mcp__claude_ai_Esteworld-Body__get_internal_links","mcp__claude_ai_Esteworld-Body__get_internal_links_en","mcp__claude_ai_Esteworld-Body__get_maillage_rules","mcp__claude_ai_Esteworld-Body__get_page","mcp__claude_ai_Esteworld-Body__get_page_json","mcp__claude_ai_Esteworld-Body__get_page_status","mcp__claude_ai_Esteworld-Body__get_redirections","mcp__claude_ai_Esteworld-Body__get_section_content","mcp__claude_ai_Esteworld-Body__get_thematique_pages","mcp__claude_ai_Esteworld-Body__get_translation_languages","mcp__claude_ai_Esteworld-Body__list_pages","mcp__claude_ai_Esteworld-Body__list_pages_by_thematique","mcp__claude_ai_Esteworld-Body__list_pages_by_type","mcp__claude_ai_Esteworld-Body__list_pages_to_create","mcp__claude_ai_Esteworld-Body__list_pages_to_rewrite","mcp__claude_ai_Esteworld-Body__list_pages_with_esteworld","mcp__claude_ai_Esteworld-Body__list_pages_without_esteworld","mcp__claude_ai_Esteworld-Body__n8n_activate_workflow","mcp__claude_ai_Esteworld-Body__n8n_get_executions","mcp__claude_ai_Esteworld-Body__n8n_get_workflow","mcp__claude_ai_Esteworld-Body__n8n_list_workflows","mcp__claude_ai_Esteworld-Body__n8n_trigger_webhook","mcp__claude_ai_Esteworld-Body__preview_global_fixes","mcp__claude_ai_Esteworld-Body__reorder_blocks","mcp__claude_ai_Esteworld-Body__search_content","mcp__claude_ai_Esteworld-Body__search_links_by_keyword","mcp__claude_ai_Esteworld-Body__search_links_by_keyword_en","mcp__claude_ai_Esteworld-Body__submit_page","mcp__claude_ai_Esteworld-Body__submit_page_light","mcp__claude_ai_Esteworld-Body__translate_page","mcp__claude_ai_Esteworld-Body__update_block","mcp__claude_ai_Figma__add_code_connect_map","mcp__claude_ai_Figma__create_new_file","mcp__claude_ai_Figma__download_assets","mcp__claude_ai_Figma__generate_diagram","mcp__claude_ai_Figma__get_code_connect_map","mcp__claude_ai_Figma__get_code_connect_suggestions","mcp__claude_ai_Figma__get_context_for_code_connect","mcp__claude_ai_Figma__get_design_context","mcp__claude_ai_Figma__get_figjam","mcp__claude_ai_Figma__get_libraries","mcp__claude_ai_Figma__get_metadata","mcp__claude_ai_Figma__get_screenshot","mcp__claude_ai_Figma__get_variable_defs","mcp__claude_ai_Figma__search_design_system","mcp__claude_ai_Figma__send_code_connect_mappings","mcp__claude_ai_Figma__upload_assets","mcp__claude_ai_Figma__use_figma","mcp__claude_ai_Figma__whoami","mcp__claude_ai_Gmail__create_draft","mcp__claude_ai_Gmail__create_label","mcp__claude_ai_Gmail__delete_label","mcp__claude_ai_Gmail__get_thread","mcp__claude_ai_Gmail__label_message","mcp__claude_ai_Gmail__label_thread","mcp__claude_ai_Gmail__list_drafts","mcp__claude_ai_Gmail__list_labels","mcp__claude_ai_Gmail__search_threads","mcp__claude_ai_Gmail__unlabel_message","mcp__claude_ai_Gmail__unlabel_thread","mcp__claude_ai_Gmail__update_label","mcp__claude_ai_Google_Calendar__create_event","mcp__claude_ai_Google_Calendar__delete_event","mcp__claude_ai_Google_Calendar__get_event","mcp__claude_ai_Google_Calendar__list_calendars","mcp__claude_ai_Google_Calendar__list_events","mcp__claude_ai_Google_Calendar__respond_to_event","mcp__claude_ai_Google_Calendar__suggest_time","mcp__claude_ai_Google_Calendar__update_event","mcp__claude_ai_Google_Drive__copy_file","mcp__claude_ai_Google_Drive__create_file","mcp__claude_ai_Google_Drive__download_file_content","mcp__claude_ai_Google_Drive__get_file_metadata","mcp__claude_ai_Google_Drive__get_file_permissions","mcp__claude_ai_Google_Drive__list_recent_files","mcp__claude_ai_Google_Drive__read_file_content","mcp__claude_ai_Google_Drive__search_files","mcp__claude_ai_SEMRush__backlink_research","mcp__claude_ai_SEMRush__execute_report","mcp__claude_ai_SEMRush__get_report_schema","mcp__claude_ai_SEMRush__keyword_research","mcp__claude_ai_SEMRush__organic_research","mcp__claude_ai_SEMRush__overview_research","mcp__claude_ai_SEMRush__projects_research","mcp__claude_ai_SEMRush__siteaudit_research","mcp__claude_ai_SEMRush__subdomain_research","mcp__claude_ai_SEMRush__subfolder_research","mcp__claude_ai_SEMRush__tracking_research","mcp__claude_ai_SEMRush__trends_research","mcp__claude_ai_SEMRush__url_research","mcp__claude_ai_Vercel__add_toolbar_reaction","mcp__claude_ai_Vercel__change_toolbar_thread_resolve_status","mcp__claude_ai_Vercel__check_domain_availability_and_price","mcp__claude_ai_Vercel__deploy_to_vercel","mcp__claude_ai_Vercel__edit_toolbar_message","mcp__claude_ai_Vercel__get_access_to_vercel_url","mcp__claude_ai_Vercel__get_deployment","mcp__claude_ai_Vercel__get_deployment_build_logs","mcp__claude_ai_Vercel__get_project","mcp__claude_ai_Vercel__get_runtime_logs","mcp__claude_ai_Vercel__get_toolbar_thread","mcp__claude_ai_Vercel__import-claude-design-from-url","mcp__claude_ai_Vercel__list_deployments","mcp__claude_ai_Vercel__list_projects","mcp__claude_ai_Vercel__list_teams","mcp__claude_ai_Vercel__list_toolbar_threads","mcp__claude_ai_Vercel__reply_to_toolbar_thread","mcp__claude_ai_Vercel__search_vercel_documentation","mcp__claude_ai_Vercel__web_fetch_vercel_url","mcp__gpt-image-2__continue_edit_session","mcp__gpt-image-2__edit_image","mcp__gpt-image-2__end_edit_session","mcp__gpt-image-2__generate_image","mcp__gpt-image-2__list_edit_sessions","mcp__gpt-image-2__start_edit_session","mcp__hostinger__DNS_deleteDNSRecordsV1","mcp__hostinger__DNS_getDNSRecordsV1","mcp__hostinger__DNS_getDNSSnapshotListV1","mcp__hostinger__DNS_getDNSSnapshotV1","mcp__hostinger__DNS_resetDNSRecordsV1","mcp__hostinger__DNS_restoreDNSSnapshotV1","mcp__hostinger__DNS_updateDNSRecordsV1","mcp__hostinger__DNS_validateDNSRecordsV1","mcp__hostinger__VPS_activateFirewallV1","mcp__hostinger__VPS_attachPublicKeyV1","mcp__hostinger__VPS_createFirewallRuleV1","mcp__hostinger__VPS_createNewFirewallV1","mcp__hostinger__VPS_createNewProjectV1","mcp__hostinger__VPS_createPTRRecordV1","mcp__hostinger__VPS_createPostInstallScriptV1","mcp__hostinger__VPS_createPublicKeyV1","mcp__hostinger__VPS_createSnapshotV1","mcp__hostinger__VPS_deactivateFirewallV1","mcp__hostinger__VPS_deleteFirewallRuleV1","mcp__hostinger__VPS_deleteFirewallV1","mcp__hostinger__VPS_deletePTRRecordV1","mcp__hostinger__VPS_deletePostInstallScriptV1","mcp__hostinger__VPS_deleteProjectV1","mcp__hostinger__VPS_deletePublicKeyV1","mcp__hostinger__VPS_deleteSnapshotV1","mcp__hostinger__VPS_getActionDetailsV1","mcp__hostinger__VPS_getActionsV1","mcp__hostinger__VPS_getAttachedPublicKeysV1","mcp__hostinger__VPS_getBackupsV1","mcp__hostinger__VPS_getDataCenterListV1","mcp__hostinger__VPS_getFirewallDetailsV1","mcp__hostinger__VPS_getFirewallListV1","mcp__hostinger__VPS_getMetricsV1","mcp__hostinger__VPS_getPostInstallScriptV1","mcp__hostinger__VPS_getPostInstallScriptsV1","mcp__hostinger__VPS_getProjectContainersV1","mcp__hostinger__VPS_getProjectContentsV1","mcp__hostinger__VPS_getProjectListV1","mcp__hostinger__VPS_getProjectLogsV1","mcp__hostinger__VPS_getPublicKeysV1","mcp__hostinger__VPS_getScanMetricsV1","mcp__hostinger__VPS_getSnapshotV1","mcp__hostinger__VPS_getTemplateDetailsV1","mcp__hostinger__VPS_getTemplatesV1","mcp__hostinger__VPS_getVirtualMachineDetailsV1","mcp__hostinger__VPS_getVirtualMachinesV1","mcp__hostinger__VPS_installMonarxV1","mcp__hostinger__VPS_purchaseNewVirtualMachineV1","mcp__hostinger__VPS_recreateVirtualMachineV1","mcp__hostinger__VPS_resetHostnameV1","mcp__hostinger__VPS_restartProjectV1","mcp__hostinger__VPS_restartVirtualMachineV1","mcp__hostinger__VPS_restoreBackupV1","mcp__hostinger__VPS_restoreSnapshotV1","mcp__hostinger__VPS_setHostnameV1","mcp__hostinger__VPS_setNameserversV1","mcp__hostinger__VPS_setPanelPasswordV1","mcp__hostinger__VPS_setRootPasswordV1","mcp__hostinger__VPS_setupPurchasedVirtualMachineV1","mcp__hostinger__VPS_startProjectV1","mcp__hostinger__VPS_startRecoveryModeV1","mcp__hostinger__VPS_startVirtualMachineV1","mcp__hostinger__VPS_stopProjectV1","mcp__hostinger__VPS_stopRecoveryModeV1","mcp__hostinger__VPS_stopVirtualMachineV1","mcp__hostinger__VPS_syncFirewallV1","mcp__hostinger__VPS_uninstallMonarxV1","mcp__hostinger__VPS_updateFirewallRuleV1","mcp__hostinger__VPS_updatePostInstallScriptV1","mcp__hostinger__VPS_updateProjectV1","mcp__hostinger__billing_deletePaymentMethodV1","mcp__hostinger__billing_disableAutoRenewalV1","mcp__hostinger__billing_enableAutoRenewalV1","mcp__hostinger__billing_getCatalogItemListV1","mcp__hostinger__billing_getPaymentMethodListV1","mcp__hostinger__billing_getSubscriptionListV1","mcp__hostinger__billing_setDefaultPaymentMethodV1","mcp__hostinger__domains_checkDomainAvailabilityV1","mcp__hostinger__domains_createDomainForwardingV1","mcp__hostinger__domains_createWHOISProfileV1","mcp__hostinger__domains_deleteDomainForwardingV1","mcp__hostinger__domains_deleteWHOISProfileV1","mcp__hostinger__domains_disableDomainLockV1","mcp__hostinger__domains_disablePrivacyProtectionV1","mcp__hostinger__domains_enableDomainLockV1","mcp__hostinger__domains_enablePrivacyProtectionV1","mcp__hostinger__domains_getDomainDetailsV1","mcp__hostinger__domains_getDomainForwardingV1","mcp__hostinger__domains_getDomainListV1","mcp__hostinger__domains_getWHOISProfileListV1","mcp__hostinger__domains_getWHOISProfileUsageV1","mcp__hostinger__domains_getWHOISProfileV1","mcp__hostinger__domains_purchaseNewDomainV1","mcp__hostinger__domains_updateDomainNameserversV1","mcp__hostinger__hosting_createAccountDatabaseV1","mcp__hostinger__hosting_createWebsiteParkedDomainV1","mcp__hostinger__hosting_createWebsiteSubdomainV1","mcp__hostinger__hosting_createWebsiteV1","mcp__hostinger__hosting_deleteAccountDatabaseV1","mcp__hostinger__hosting_deleteWebsiteParkedDomainV1","mcp__hostinger__hosting_deleteWebsiteSubdomainV1","mcp__hostinger__hosting_deployJsApplication","mcp__hostinger__hosting_deployStaticWebsite","mcp__hostinger__hosting_deployWordpressPlugin","mcp__hostinger__hosting_deployWordpressTheme","mcp__hostinger__hosting_generateAFreeSubdomainV1","mcp__hostinger__hosting_importWordpressWebsite","mcp__hostinger__hosting_installWordPressV1","mcp__hostinger__hosting_listAccountDatabasesV1","mcp__hostinger__hosting_listAvailableDatacentersV1","mcp__hostinger__hosting_listJsDeployments","mcp__hostinger__hosting_listOrdersV1","mcp__hostinger__hosting_listWebsiteParkedDomainsV1","mcp__hostinger__hosting_listWebsiteSubdomainsV1","mcp__hostinger__hosting_listWebsitesV1","mcp__hostinger__hosting_listWordPressInstallationsV1","mcp__hostinger__hosting_showJsDeploymentLogs","mcp__hostinger__hosting_verifyDomainOwnershipV1","mcp__hostinger__reach_createANewContactSegmentV1","mcp__hostinger__reach_createANewContactV1","mcp__hostinger__reach_createNewContactsV1","mcp__hostinger__reach_deleteAContactV1","mcp__hostinger__reach_getSegmentDetailsV1","mcp__hostinger__reach_listContactGroupsV1","mcp__hostinger__reach_listContactsV1","mcp__hostinger__reach_listProfilesV1","mcp__hostinger__reach_listSegmentContactsV1","mcp__hostinger__reach_listSegmentsV1","mcp__hostinger__v2_getDomainVerificationsDIRECT","mcp__n8n-mcp__get_node","mcp__n8n-mcp__get_template","mcp__n8n-mcp__n8n_audit_instance","mcp__n8n-mcp__n8n_autofix_workflow","mcp__n8n-mcp__n8n_create_workflow","mcp__n8n-mcp__n8n_delete_workflow","mcp__n8n-mcp__n8n_deploy_template","mcp__n8n-mcp__n8n_executions","mcp__n8n-mcp__n8n_generate_workflow","mcp__n8n-mcp__n8n_get_workflow","mcp__n8n-mcp__n8n_health_check","mcp__n8n-mcp__n8n_list_workflows","mcp__n8n-mcp__n8n_manage_credentials","mcp__n8n-mcp__n8n_manage_datatable","mcp__n8n-mcp__n8n_test_workflow","mcp__n8n-mcp__n8n_update_full_workflow","mcp__n8n-mcp__n8n_update_partial_workflow","mcp__n8n-mcp__n8n_validate_workflow","mcp__n8n-mcp__n8n_workflow_versions","mcp__n8n-mcp__search_nodes","mcp__n8n-mcp__search_templates","mcp__n8n-mcp__tools_documentation","mcp__n8n-mcp__validate_node","mcp__n8n-mcp__validate_workflow","mcp__nanobanana__generate_image","mcp__nanobanana__maintenance","mcp__nanobanana__show_output_stats","mcp__nanobanana__upload_file","mcp__plugin_vercel_vercel__authenticate","mcp__plugin_vercel_vercel__complete_authentication","mcp__refero__refero_get_flow","mcp__refero__refero_get_screen","mcp__refero__refero_get_screen_image","mcp__refero__refero_get_similar_screens","mcp__refero__refero_get_style","mcp__refero__refero_search_flows","mcp__refero__refero_search_screens","mcp__refero__refero_search_styles","mcp__semrush__authenticate","mcp__semrush__complete_authentication","mcp__stock-images-mcp__search_stock_images","mcp__trello__add_card_to_list","mcp__trello__add_checklist_item","mcp__trello__add_comment","mcp__trello__add_list_to_board","mcp__trello__archive_card","mcp__trello__archive_list","mcp__trello__assign_member_to_card","mcp__trello__attach_file_to_card","mcp__trello__attach_image_data_to_card","mcp__trello__attach_image_to_card","mcp__trello__create_board","mcp__trello__create_checklist","mcp__trello__create_label","mcp__trello__delete_comment","mcp__trello__delete_label","mcp__trello__find_checklist_items_by_description","mcp__trello__get_acceptance_criteria","mcp__trello__get_active_board_info","mcp__trello__get_board_labels","mcp__trello__get_board_members","mcp__trello__get_card","mcp__trello__get_card_comments","mcp__trello__get_card_history","mcp__trello__get_cards_by_list_id","mcp__trello__get_checklist_by_name","mcp__trello__get_checklist_items","mcp__trello__get_health","mcp__trello__get_health_detailed","mcp__trello__get_health_metadata","mcp__trello__get_health_performance","mcp__trello__get_lists","mcp__trello__get_my_cards","mcp__trello__get_recent_activity","mcp__trello__list_boards","mcp__trello__list_boards_in_workspace","mcp__trello__list_workspaces","mcp__trello__move_card","mcp__trello__perform_system_repair","mcp__trello__remove_member_from_card","mcp__trello__set_active_board","mcp__trello__set_active_workspace","mcp__trello__update_card_details","mcp__trello__update_checklist_item","mcp__trello__update_comment","mcp__trello__update_label"],"removedNames":[],"readdedNames":[]},"type":"attachment","uuid":"069febe8-7b14-475e-a5a3-79124f4abdad","timestamp":"2026-06-22T14:54:33.828Z","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":"069febe8-7b14-475e-a5a3-79124f4abdad","isSidechain":true,"agentId":"a01683a908360cb30","attachment":{"type":"skill_listing","content":"- adapt: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.\n- agentmail: Give AI agents their own email inboxes using the AgentMail API. Use when building email agents, sending/receiving emails programmatically, managing inboxes, handling attachments, organizing with labels, creating drafts for human approval, or setting up real-time notifications via webhooks/websockets. Supports multi-tenant isolation with pods.\n- animate: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.\n- arrange: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.\n- audit: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.\n- bolder: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.\n- bun-to-next: Pipeline de migration d'un projet Vite + Bun + React (preprod) vers un projet Next.js 16 (App Router, production-ready, SEO/SSR/edge). Préserve les composants, les assets, les CSS modules et les tokens. Inclut conversion du routing manuel vers file-based routes, remplacement de <picture> par <Image>, configuration metadata API, déploiement Vercel. Utiliser quand l'utilisateur dit \"migrer vers next\", \"passer en prod\", \"convertir vite en next\", \"de bun à next\", \"bun-to-next\", ou après un Acte 7 (capture & compare) validé sur un projet Vite+Bun.\n- clarify: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.\n- colorize: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.\n- critique: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.\n- delight: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.\n- design-taste-frontend: Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.\n- distill: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.\n- excalidraw-diagram: Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, or concepts.\n- extract: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.\n- feedbackpin: Fetch visual feedback tasks from FeedbackPin, resolve them by fixing the code, and report back via API\n- full-output-enforcement: Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.\n- gsap-core: Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, scroll-driven animation, or a framework-agnostic library. GSAP runs in any framework or vanilla JS; powers Webflow Interactions.\n- gsap-frameworks: Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for framework animation unless another library is specified. For React use gsap-react.\n- gsap-performance: Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.\n- gsap-plugins: Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.\n- gsap-react: Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.\n- gsap-scrolltrigger: Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is specified.\n- gsap-timeline: Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).\n- gsap-utils: Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.\n- harden: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.\n- high-end-visual-design: Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.\n- impeccable: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' to run the full shape-then-build flow, or 'teach' for design context setup.\n- industrial-brutalist-ui: Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.\n- minimalist-ui: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.\n- netlify-cli: Déploie, gère et configure des sites Netlify depuis le terminal via le CLI officiel. Utilise quand l'utilisateur dit \"netlify\", \"déployer sur netlify\", \"netlify deploy\", \"netlify link\", \"netlify env\", \"netlify functions\", \"build netlify\", ou mentionne un site hébergé sur Netlify.\n- nextjs-wordpress-headless: Branche un projet Next.js (App Router) sur un WordPress headless auto-hébergé (Docker sur VPS Ubuntu, ACF PRO Flexible Content + WPGraphQL) avec un catalogue de blocks réorganisables, revalidation par tags et seed idempotent. Gère pages one-off, CPT, options globales, SEO.\n- normalize: Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.\n- onboard: Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows.\n- optimize: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.\n- overdrive: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.\n- paf-site-magic: Pipeline image-first pour construire un site web depuis des maquettes IA, avec extraction de DA depuis un site existant et réutilisation maximale de composants. Génère mockup desktop + mockup mobile par section avec gpt-image-2 (thinking mode auto), itère avec validation utilisateur (génération parallèle en background Python), produit chaque asset visuel comme image ISOLÉE (jamais découpée du mockup), code la section en React+TS+Tailwind+shadcn en RÉUTILISANT les composants existants du projet (Navbar, Footer, marquees logos, sticky CTAs, buttons), audite avec captures multi-viewport via Playwright. Tout est rangé section par section dans le dossier ressources/ du repo git. Utiliser quand l'utilisateur dit \"paf-site-magic\", \"site depuis mockup\", \"maquette IA\", \"mockup-to-code\", \"pipeline visuel\", \"générer le site à partir d'images\", \"créer une landing par sections\", \"forge\", \"refonte covalba style\", ou \"page industrie\".\n- polish: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.\n- quieter: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.\n- redesign-existing-projects: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.\n- refero-design: Research-First design methodology using Refero MCP. Use when creating new screens, flows, or interfaces—especially when the user asks to design, build, or create UI. Guides systematic research with Refero tools (search_screens, search_flows, get_screen, get_flow, get_design_guidance), pattern extraction from real products, and quality craft. Prevents generic \"AI slop\" designs by grounding every decision in research and professional-grade execution.\n- scheduled-actions: Manage Paf-Studio Code scheduled actions. Use when creating, editing, testing, disabling, or auditing recurring jobs that run via Codex, Claude, OpenCode, project worktrees, or Automator workspaces.\n- seo: Comprehensive SEO analysis for any website or business type. Performs full site audits, single-page deep analysis, technical SEO checks (crawlability, indexability, Core Web Vitals with INP), schema markup detection/validation/generation, content quality assessment (E-E-A-T framework per Dec 2025 update extending to all competitive queries), image optimization, sitemap analysis, and Generative Engine Optimization (GEO) for AI Overviews, ChatGPT, and Perplexity citations. Analyzes AI crawler accessibility (GPTBot, ClaudeBot, PerplexityBot), llms.txt compliance, brand mention signals, and passage-level citability. Industry detection for SaaS, e-commerce, local business, publishers, agencies. Triggers on: \"SEO\", \"audit\", \"schema\", \"Core Web Vitals\", \"sitemap\", \"E-E-A-T\", \"AI Overviews\", \"GEO\", \"technical SEO\", \"content quality\", \"page speed\", \"structured data\".\n- seo-audit: Full website SEO audit with parallel subagent delegation. Crawls up to 500 pages, detects business type, delegates to 10 specialists (7 core + 3 conditional), generates health score. Use when user says \"audit\", \"full SEO check\", \"analyze my site\", or \"website health check\".\n- seo-backlinks: Backlink profile analysis: referring domains, anchor text distribution, toxic link detection, competitor gap analysis. Requires DataForSEO extension. Use when user says \"backlinks\", \"link profile\", \"referring domains\", \"anchor text\", \"toxic links\", \"link gap\", \"link building\", \"disavow\", or \"backlink audit\".\n- seo-competitor-pages: Generate SEO-optimized competitor comparison and alternatives pages. Covers \"X vs Y\" layouts, \"alternatives to X\" pages, feature matrices, schema markup, and conversion optimization. Use when user says \"comparison page\", \"vs page\", \"alternatives page\", \"competitor comparison\", \"X vs Y\", \"versus\", \"compare competitors\", or \"alternative to\".\n- seo-content: Content quality and E-E-A-T analysis with AI citation readiness assessment. Use when user says \"content quality\", \"E-E-A-T\", \"content analysis\", \"readability check\", \"thin content\", or \"content audit\".\n- seo-dataforseo: Live SEO data via DataForSEO MCP server. SERP analysis (Google, Bing, Yahoo, YouTube), keyword research (volume, difficulty, intent, trends), backlink profiles, on-page analysis (Lighthouse, content parsing), competitor analysis, content analysis, business listings, AI visibility (ChatGPT scraper, LLM mention tracking), and domain analytics. Requires DataForSEO extension installed. Use when user says \"dataforseo\", \"live SERP\", \"keyword volume\", \"backlink data\", \"competitor data\", \"AI visibility check\", \"LLM mentions\", or \"real search data\".\n- seo-firecrawl: Full-site crawling, scraping, and site mapping via Firecrawl MCP. Use when user says \"crawl site\", \"map site\", \"full crawl\", \"find all pages\", \"broken links\", \"site structure\", \"discover pages\", \"JS rendering\", or needs site-wide analysis.\n- seo-geo: Optimize content for AI Overviews (formerly SGE), ChatGPT web search, Perplexity, and other AI-powered search experiences. Generative Engine Optimization (GEO) analysis including brand mention signals, AI crawler accessibility, llms.txt compliance, passage-level citability scoring, and platform-specific optimization. Use when user says \"AI Overviews\", \"SGE\", \"GEO\", \"AI search\", \"LLM optimization\", \"Perplexity\", \"AI citations\", \"ChatGPT search\", or \"AI visibility\".\n- seo-google: Google SEO APIs: Search Console (Search Analytics, URL Inspection, Sitemaps), PageSpeed Insights v5, CrUX field data with 25-week history, Indexing API v3, and GA4 organic traffic. Provides real Google field data for Core Web Vitals, indexation status, search performance, and organic traffic trends. Use when user says \"search console\", \"GSC\", \"PageSpeed\", \"CrUX\", \"field data\", \"indexing API\", \"GA4 organic\", \"URL inspection\", \"google api setup\", \"real CWV data\", \"impressions\", \"clicks\", \"CTR\", \"position data\", \"LCP\", \"INP\", \"CLS\", \"FCP\", \"TTFB\", or \"Lighthouse scores\".\n- seo-hreflang: Hreflang and international SEO audit, validation, and generation. Detects common mistakes, validates language/region codes, and generates correct hreflang implementations. Use when user says \"hreflang\", \"i18n SEO\", \"international SEO\", \"multi-language\", \"multi-region\", or \"language tags\".\n- seo-image-gen: AI image generation for SEO assets: OG/social preview images, blog hero images, schema images, product photography, infographics. Powered by Gemini via nanobanana-mcp. Requires banana extension installed. Use when user says \"generate image\", \"OG image\", \"social preview\", \"hero image\", \"blog image\", \"product photo\", \"infographic\", \"seo image\", \"create visual\", \"image-gen\", \"favicon\", \"schema image\", \"pinterest pin\", \"generate visual\", \"banner\", or \"thumbnail\".\n- seo-images: Image optimization analysis for SEO and performance. Checks alt text, file sizes, formats, responsive images, lazy loading, and CLS prevention. Use when user says \"image optimization\", \"alt text\", \"image SEO\", \"image size\", or \"image audit\".\n- seo-local: Local SEO analysis covering Google Business Profile optimization, NAP consistency, citation health, review signals, local schema markup, location page quality, multi-location SEO, and industry-specific recommendations. Detects business type (brick-and-mortar, SAB, hybrid) and industry vertical (restaurant, healthcare, legal, home services, real estate, automotive). Use when user says \"local SEO\", \"Google Business Profile\", \"GBP\", \"map pack\", \"local pack\", \"citations\", \"NAP consistency\", \"local rankings\", \"service area\", \"multi-location\", or \"local search\".\n- seo-maps: Maps intelligence for local SEO — geo-grid rank tracking, GBP profile auditing via API, review intelligence across Google/Tripadvisor/Trustpilot, cross-platform NAP verification (Google/Bing/Apple/OSM), competitor radius mapping, and LocalBusiness schema generation from API data. Three-tier capability: free (Overpass + Geoapify), DataForSEO (full intelligence), DataForSEO + Google (maximum coverage). Use when user says \"maps\", \"geo-grid\", \"rank tracking\", \"GBP audit\", \"review velocity\", \"competitor radius\", \"maps analysis\", \"local rank tracking\", \"Share of Local Voice\", or \"SoLV\".\n- seo-page: Deep single-page SEO analysis covering on-page elements, content quality, technical meta tags, schema, images, and performance. Use when user says \"analyze this page\", \"check page SEO\", \"single URL\", \"check this page\", \"page analysis\", or provides a single URL for review.\n- seo-plan: Strategic SEO planning for new or existing websites. Industry-specific templates, competitive analysis, content strategy, and implementation roadmap. Use when user says \"SEO plan\", \"SEO strategy\", \"SEO planning\", \"content strategy\", \"keyword strategy\", \"content calendar\", \"site architecture\", or \"SEO roadmap\".\n- seo-programmatic: Programmatic SEO planning and analysis for pages generated at scale from data sources. Covers template engines, URL patterns, internal linking automation, thin content safeguards, and index bloat prevention. Use when user says \"programmatic SEO\", \"pages at scale\", \"dynamic pages\", \"template pages\", \"generated pages\", or \"data-driven SEO\".\n- seo-schema: Detect, validate, and generate Schema.org structured data. JSON-LD format preferred. Use when user says \"schema\", \"structured data\", \"rich results\", \"JSON-LD\", or \"markup\".\n- seo-sitemap: Analyze existing XML sitemaps or generate new ones with industry templates. Validates format, URLs, and structure. Use when user says \"sitemap\", \"generate sitemap\", \"sitemap issues\", or \"XML sitemap\".\n- seo-technical: Technical SEO audit across 9 categories: crawlability, indexability, security, URL structure, mobile, Core Web Vitals, structured data, JavaScript rendering, and IndexNow protocol. Use when user says \"technical SEO\", \"crawl issues\", \"robots.txt\", \"Core Web Vitals\", \"site speed\", or \"security headers\".\n- shape: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.\n- stitch-design-taste: Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.\n- typeset: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.\n- brainstorming: You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.\n- brutalist-skill: Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.\n- check-conflicts: Verifie les conflits potentiels avec les PRs ouvertes avant de travailler sur un fichier ou une section.\n- dispatching-parallel-agents: Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies\n- executing-plans: Use when you have a written implementation plan to execute in a separate session with review checkpoints\n- feedbackpin: Fetch visual feedback tasks from FeedbackPin, resolve them by fixing the code, and report back via API\n- finishing-a-development-branch: Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup\n- minimalist-skill: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.\n- output-skill: Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.\n- receiving-code-review: Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation\n- redesign-skill: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.\n- requesting-code-review\n- soft-skill\n- stitch-skill\n- subagent-driven-development\n- systematic-debugging\n- taste-skill\n- test-driven-development\n- using-git-worktrees\n- using-superpowers\n- verification-before-completion\n- writing-plans: Use when you have a spec or requirements for a multi-step task, before touching code\n- writing-skills\n- handoff: Cree ou met a jour HANDOFF.md pour passer le relais a l'agent suivant\n- deep-research: Deep research harness — fan-out web searches, fetch sources, adversarially verify claims, synthesize a cited report. - When the user wants a deep, multi-source, fact-checked research report on any topic. BEFORE invoking, check if the question is specific enough to research directly — if underspecified (e.g., \"what car to buy\" without budget/use-case/region), ask 2-3 clarifying questions to narrow scope. Then pass the refined question as args, weaving the answers in.\n- vercel:bootstrap\n- vercel:deploy\n- vercel:env\n- vercel:marketplace\n- vercel:status\n- vercel:ai-gateway\n- vercel:ai-sdk\n- vercel:auth\n- vercel:bootstrap\n- vercel:chat-sdk\n- vercel:deployments-cicd\n- vercel:env-vars\n- vercel:knowledge-update\n- vercel:marketplace\n- vercel:microfrontends\n- vercel:next-cache-components\n- vercel:next-forge\n- vercel:next-upgrade\n- vercel:nextjs\n- vercel:react-best-practices\n- vercel:routing-middleware\n- vercel:runtime-cache\n- vercel:shadcn\n- vercel:turbopack\n- vercel:vercel-agent\n- vercel:vercel-cli\n- vercel:vercel-firewall\n- vercel:vercel-functions\n- vercel:vercel-sandbox\n- vercel:vercel-storage\n- vercel:verification\n- vercel:workflow: Vercel Workflow DevKit (WDK) expert guidance. Use when building durable workflows, long-running tasks, API routes or agents that need pause/resume, retries, step-based execution, or crash-safe orchestration with Vercel Workflow.\n- update-config: Use this skill to configure the Claude Code harness via settings.json. Automated behaviors (\"from now on when X\", \"each time X\", \"whenever X\", \"before/after X\") require hooks configured in settings.json - the harness executes these, not Claude, so memory/preferences cannot fulfill them. Also use for: permissions (\"allow X\", \"add permission\", \"move permission to\"), env vars (\"set X=Y\"), hook troubleshooting, or any changes to settings.json/settings.local.json files. Examples: \"allow npm commands\", \"add bq permission to global settings\", \"move permission to user settings\", \"set DEBUG=true\", \"when claude stops show X\". For simple settings like theme/model, suggest the /config command.\n- keybindings-help: Use when the user wants to customize keyboard shortcuts, rebind keys, add chord bindings, or modify ~/.claude/keybindings.json. Examples: \"rebind ctrl+s\", \"add a chord shortcut\", \"change the submit key\", \"customize keybindings\".\n- verify: Verify that a code change actually does what it's supposed to by running the app and observing behavior. Use when asked to verify a PR, confirm a fix works, test a change manually, check that a feature works, or validate local changes before pushing.\n- code-review: Review the current diff for correctness bugs and reuse/simplification/efficiency cleanups at the given effort level (low/medium: fewer, high-confidence findings; high→max: broader coverage, may include uncertain findings; ultra: deep multi-agent review in the cloud). Pass --comment to post findings as inline PR comments, or --fix to apply the findings to the working tree after the review.\n- simplify: Review the changed code for reuse, simplification, efficiency, and altitude cleanups, then apply the fixes. Quality only — it does not hunt for bugs; use /code-review for that.\n- fewer-permission-prompts: Scan your transcripts for common read-only Bash and MCP tool calls, then add a prioritized allowlist to project .claude/settings.json to reduce permission prompts.\n- loop: Run a prompt or slash command on a recurring interval (e.g. /loop 5m /foo). Omit the interval to let the model self-pace. - When the user wants to set up a recurring task, poll for status, or run something repeatedly on an interval (e.g. \"check the deploy every 5 minutes\", \"keep running /babysit-prs\"). Do NOT invoke for one-off tasks.\n- schedule: Create, update, list, or run scheduled cloud agents (routines) that execute on a cron schedule. - When the user wants to schedule a recurring cloud agent, set up automated tasks, create a cron job for Claude Code, or manage their scheduled agents/routines. Also use when the user wants a one-time scheduled run (\"run this once at 3pm\", \"remind me to check X tomorrow\").\n- claude-api: Reference for the Claude API / Anthropic SDK — model ids, pricing, params, streaming, tool use, MCP, agents, caching, token counting, model migration.\nTRIGGER — read BEFORE opening the target file; don't skip because it \"looks like a one-liner\" — whenever: the prompt names Claude/Anthropic in any form (Claude, Anthropic, Fable, Opus, Sonnet, Haiku, `anthropic`, `@anthropic-ai`, `claude-*`, `us.anthropic.*`, `[1m]`); the user asks about an LLM (pricing/model choice/limits/caching) — never answer from memory; OR the task is LLM-shaped with provider unstated (agent/MCP/tool-definition/multi-agent/RAG/LLM-judge/computer-use; generate/summarize/extract/classify/rewrite/converse over NL; debugging refusals/cutoffs/streaming/tool-calls/tokens).\nSKIP only when another provider is being worked on (overrides all triggers): OpenAI/GPT/Gemini/Llama/Mistral/Cohere/Ollama named in the query; OR `grep -rE 'openai|langchain_openai|google.generativeai|genai|mistralai|cohere|ollama'` over the project hits (run this grep FIRST if no provider named — don't Read the file).\n- run: Launch and drive this project's app to see a change working. Use when asked to run, start, or screenshot the app, or to confirm a change works in the real app (not just tests). First looks for a project skill that already covers launching the app; otherwise falls back to built-in patterns per project type (CLI, server, TUI, Electron, browser-driven, library).\n- init: Initialize a new CLAUDE.md file with codebase documentation\n- review\n- security-review","skillCount":135,"isInitial":true,"names":["adapt","agentmail","animate","arrange","audit","bolder","bun-to-next","clarify","colorize","critique","delight","design-taste-frontend","distill","excalidraw-diagram","extract","feedbackpin","full-output-enforcement","gsap-core","gsap-frameworks","gsap-performance","gsap-plugins","gsap-react","gsap-scrolltrigger","gsap-timeline","gsap-utils","harden","high-end-visual-design","impeccable","industrial-brutalist-ui","minimalist-ui","netlify-cli","nextjs-wordpress-headless","normalize","onboard","optimize","overdrive","paf-site-magic","polish","quieter","redesign-existing-projects","refero-design","scheduled-actions","seo","seo-audit","seo-backlinks","seo-competitor-pages","seo-content","seo-dataforseo","seo-firecrawl","seo-geo","seo-google","seo-hreflang","seo-image-gen","seo-images","seo-local","seo-maps","seo-page","seo-plan","seo-programmatic","seo-schema","seo-sitemap","seo-technical","shape","stitch-design-taste","typeset","brainstorming","brutalist-skill","check-conflicts","dispatching-parallel-agents","executing-plans","feedbackpin","finishing-a-development-branch","minimalist-skill","output-skill","receiving-code-review","redesign-skill","requesting-code-review","soft-skill","stitch-skill","subagent-driven-development","systematic-debugging","taste-skill","test-driven-development","using-git-worktrees","using-superpowers","verification-before-completion","writing-plans","writing-skills","handoff","deep-research","vercel:bootstrap","vercel:deploy","vercel:env","vercel:marketplace","vercel:status","vercel:ai-gateway","vercel:ai-sdk","vercel:auth","vercel:bootstrap","vercel:chat-sdk","vercel:deployments-cicd","vercel:env-vars","vercel:knowledge-update","vercel:marketplace","vercel:microfrontends","vercel:next-cache-components","vercel:next-forge","vercel:next-upgrade","vercel:nextjs","vercel:react-best-practices","vercel:routing-middleware","vercel:runtime-cache","vercel:shadcn","vercel:turbopack","vercel:vercel-agent","vercel:vercel-cli","vercel:vercel-firewall","vercel:vercel-functions","vercel:vercel-sandbox","vercel:vercel-storage","vercel:verification","vercel:workflow","update-config","keybindings-help","verify","code-review","simplify","fewer-permission-prompts","loop","schedule","claude-api","run","init","review","security-review"]},"type":"attachment","uuid":"41e00f61-56d6-442d-9b40-1f200ca5fdb6","timestamp":"2026-06-22T14:54:33.829Z","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":"41e00f61-56d6-442d-9b40-1f200ca5fdb6","isSidechain":true,"agentId":"a01683a908360cb30","message":{"model":"claude-opus-4-8","id":"msg_01ULNFf2n8DHgxnrzCuf5cuW","type":"message","role":"assistant","content":[{"type":"text","text":"I'll start by reading the source template and the structural reference, then the data type."}],"stop_reason":null,"stop_sequence":null,"stop_details":null,"usage":{"input_tokens":23605,"cache_creation_input_tokens":9266,"cache_read_input_tokens":5704,"cache_creation":{"ephemeral_5m_input_tokens":9266,"ephemeral_1h_input_tokens":0},"output_tokens":1,"service_tier":"standard","inference_geo":"not_available"},"diagnostics":null},"requestId":"req_011CcJVQBKnRk78iZDX1xHWu","attributionAgent":"general-purpose","type":"assistant","uuid":"051536b8-ab63-4d09-8878-8f8b7b3f9bb9","timestamp":"2026-06-22T14:54:36.521Z","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":"051536b8-ab63-4d09-8878-8f8b7b3f9bb9","isSidechain":true,"agentId":"a01683a908360cb30","message":{"model":"claude-opus-4-8","id":"msg_01ULNFf2n8DHgxnrzCuf5cuW","type":"message","role":"assistant","content":[{"type":"tool_use","id":"toolu_01HqY3JsxMiYuyJsnyLBFzmE","name":"Read","input":{"file_path":"/opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/src/components/roof/RoofPageTemplate.tsx"},"caller":{"type":"direct"}}],"stop_reason":null,"stop_sequence":null,"stop_details":null,"usage":{"input_tokens":23605,"cache_creation_input_tokens":9266,"cache_read_input_tokens":5704,"cache_creation":{"ephemeral_5m_input_tokens":9266,"ephemeral_1h_input_tokens":0},"output_tokens":1,"service_tier":"standard","inference_geo":"not_available"},"diagnostics":null},"requestId":"req_011CcJVQBKnRk78iZDX1xHWu","attributionAgent":"general-purpose","type":"assistant","uuid":"09f639e5-1e3e-42ee-8b73-5c0957584d7c","timestamp":"2026-06-22T14:54:37.469Z","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":"09f639e5-1e3e-42ee-8b73-5c0957584d7c","isSidechain":true,"promptId":"d89edf80-4e6d-44ec-80c1-78c9295c891f","agentId":"a01683a908360cb30","type":"user","message":{"role":"user","content":[{"tool_use_id":"toolu_01HqY3JsxMiYuyJsnyLBFzmE","type":"tool_result","content":"1\timport { useState } from 'react';\n2\timport {\n3\t  ArrowRight,\n4\t  BadgeCheck,\n5\t  CalendarClock,\n6\t  CalendarCheck,\n7\t  Check,\n8\t  CheckCircle2,\n9\t  ChevronDown,\n10\t  ClipboardCheck,\n11\t  Factory,\n12\t  HelpCircle,\n13\t  Play,\n14\t  ShieldCheck,\n15\t  ShieldAlert,\n16\t  Sparkles,\n17\t  SunMedium,\n18\t  Thermometer,\n19\t  TrendingDown,\n20\t  Users,\n21\t  Wrench,\n22\t  type LucideIcon,\n23\t} from 'lucide-react';\n24\t\n25\timport Footer from '@/components/Footer';\n26\timport Navbar from '@/components/Navbar';\n27\timport ScrollReveal from '@/components/ScrollReveal';\n28\timport StickyMobileCTA from '@/components/StickyMobileCTA';\n29\timport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';\n30\timport { Dialog, DialogContent } from '@/components/ui/dialog';\n31\timport { useJsonLd, usePageMeta } from '@/hooks/usePageMeta';\n32\timport type { RoofPageData } from '@/data/roofPages';\n33\timport coolRoofLayers from '@/assets/cool-roof-layers.webp';\n34\timport covaMetalProduct from '@/assets/produits/Covalba-CovaMetal20-Duo-Produit.webp';\n35\timport covaSealProduct from '@/assets/produits/Covalba-CovaSeal20-Duo-Produit.webp';\n36\timport covaTherm8Product from '@/assets/produits/Covalba-CovaTherm8-Produit.webp';\n37\timport covaTherm20Product from '@/assets/produits/Covalba-CovaTherm20-Produit.webp';\n38\t\n39\tinterface RoofPageTemplateProps {\n40\t  page: RoofPageData;\n41\t}\n42\t\n43\tconst SITE_URL = 'https://www.covalba.fr';\n44\t\n45\tconst cardIcons: LucideIcon[] = [SunMedium, Wrench, Factory, ShieldCheck];\n46\tconst methodIcons: LucideIcon[] = [ClipboardCheck, CalendarClock, ShieldCheck, TrendingDown];\n47\tconst proofIcons: LucideIcon[] = [Thermometer, ShieldCheck, BadgeCheck];\n48\tconst problemIcons: LucideIcon[] = [Users, SunMedium, ShieldAlert];\n49\t\n50\tconst logos = [\n51\t  { name: 'Continental', url: '/logos/logo-continental.svg' },\n52\t  { name: 'Thales', url: '/logos/logo-thales.svg' },\n53\t  { name: 'Nestlé', url: '/logos/logo-nestle.svg' },\n54\t  { name: 'SNCF', url: '/logos/logo-sncf.svg' },\n55\t  { name: 'Leclerc', url: '/logos/logo-leclerc.svg' },\n56\t  { name: 'Super U', url: '/logos/logo-super-u.svg' },\n57\t];\n58\t\n59\tconst displayCell = (value: string) => value.replace(/EUR/g, '€').replace(/m2/g, 'm²');\n60\t\n61\tconst formatCurrency = (value: number) =>\n62\t  `${new Intl.NumberFormat('fr-FR', { maximumFractionDigits: 0 }).format(Math.round(value))} €`;\n63\t\n64\tconst parsePricePerM2 = (value: string) => {\n65\t  const match = displayCell(value).match(/\\(([\\d,.]+)\\s*€\\/m²\\)/);\n66\t  if (!match) return null;\n67\t\n68\t  return Number.parseFloat(match[1].replace(',', '.'));\n69\t};\n70\t\n71\tconst getTreatmentRange = (page: RoofPageData, situation: string) => {\n72\t  const text = `${page.slug} ${situation}`.toLowerCase();\n73\t\n74\t  if (text.includes('covaseal') || text.includes('vieillissante') || text.includes('fuite')) {\n75\t    return { min: 28, max: 38, label: 'CovaSeal 20 estimatif' };\n76\t  }\n77\t\n78\t  if (text.includes('covametal') || text.includes('corrosion') || text.includes('tôle')) {\n79\t    return { min: 24, max: 32, label: 'CovaMetal 20 estimatif' };\n80\t  }\n81\t\n82\t  if (text.includes('fibrociment') || text.includes('plaques')) {\n83\t    return { min: 22, max: 28, label: 'CovaTherm support sensible' };\n84\t  }\n85\t\n86\t  return { min: 20, max: 25, label: 'CovaTherm estimatif' };\n87\t};\n88\t\n89\tconst getFallbackPricePerM2 = (option: string, optionIndex: number, treatmentMidpoint: number) => {\n90\t  const lower = option.toLowerCase();\n91\t\n92\t  if (optionIndex === 0) return treatmentMidpoint;\n93\t  if (lower.includes('anticorrosion simple')) return 16;\n94\t  if (lower.includes('remplacement')) return 120;\n95\t  if (lower.includes('membrane neuve')) return 90;\n96\t  if (lower.includes('isolation')) return 150;\n97\t\n98\t  return null;\n99\t};\n100\t\n101\tconst benefitImages = [\n102\t  '/images/toitures/benefit-confort.webp',\n103\t  '/images/toitures/benefit-protection-toiture.webp',\n104\t  '/images/toitures/benefit-clim.webp',\n105\t  '/images/toitures/benefit-chantier-evite.webp',\n106\t];\n107\t\n108\tconst feedbackRoofBenefitImages = [\n109\t  '/images/toitures/feedback-batiment-tempere.png',\n110\t  '/images/toitures/feedback-etancheite.png',\n111\t  '/images/toitures/feedback-economie-clim-1.png',\n112\t  '/images/toitures/feedback-economie-clim-3.png',\n113\t];\n114\t\n115\tconst getBenefitImage = (page: RoofPageData, benefit: TextCard, index: number) => {\n116\t  if (['membrane-bitumineuse', 'toiture-plate'].includes(page.slug)) {\n117\t    return feedbackRoofBenefitImages[index] ?? feedbackRoofBenefitImages[0];\n118\t  }\n119\t\n120\t  const text = `${benefit.title} ${benefit.text}`.toLowerCase();\n121\t\n122\t  if (page.slug === 'bac-acier' && (text.includes('tôle') || text.includes('corrosion'))) {\n123\t    return '/images/toitures/support-bac-acier-cool.webp';\n124\t  }\n125\t\n126\t  if (text.includes('facture') || text.includes('clim') || text.includes('froid')) {\n127\t    return '/images/toitures/benefit-clim.webp';\n128\t  }\n129\t\n130\t  if (text.includes('chantier') || text.includes('réfection') || text.includes('remplacement') || text.includes('dépose')) {\n131\t    return '/images/toitures/benefit-chantier-evite.webp';\n132\t  }\n133\t\n134\t  if (text.includes('protég') || text.includes('étanchéité') || text.includes('corrosion') || text.includes('durée')) {\n135\t    return '/images/toitures/benefit-protection-toiture.webp';\n136\t  }\n137\t\n138\t  return benefitImages[index] ?? benefitImages[0];\n139\t};\n140\t\n141\tconst supportVisuals: Record<string, { hot: string; cool: string; hotLabel: string; coolLabel: string }> = {\n142\t  'membrane-bitumineuse': {\n143\t    hot: '/images/toitures/support-bitume-chaud.webp',\n144\t    cool: '/images/toitures/feedback-economie-clim-2.png',\n145\t    hotLabel: 'Sans cool roof : membrane bitume en absorption',\n146\t    coolLabel: 'Avec cool roof : membrane réfléchissante',\n147\t  },\n148\t  'bac-acier': {\n149\t    hot: '/images/toitures/support-bac-acier-chaud.webp',\n150\t    cool: '/images/toitures/support-bac-acier-cool.webp',\n151\t    hotLabel: 'Sans cool roof : métal en surchauffe',\n152\t    coolLabel: 'Avec cool roof : bac acier réfléchi et protégé',\n153\t  },\n154\t  'toiture-plate': {\n155\t    hot: '/images/toitures/support-toiture-plate-chaud.webp',\n156\t    cool: '/images/toitures/feedback-economie-clim-2.png',\n157\t    hotLabel: 'Sans cool roof : terrasse en absorption',\n158\t    coolLabel: 'Avec cool roof : terrasse réfléchissante',\n159\t  },\n160\t  fibrociment: {\n161\t    hot: '/images/toitures/support-fibrociment-chaud.webp',\n162\t    cool: '/images/toitures/support-fibrociment-cool.webp',\n163\t    hotLabel: 'Sans cool roof : fibrociment en absorption',\n164\t    coolLabel: 'Avec cool roof : plaques protégées',\n165\t  },\n166\t  'tuiles-ciment': {\n167\t    hot: '/images/toitures/support-tuiles-ciment-chaud.webp',\n168\t    cool: '/images/toitures/support-tuiles-ciment-cool.webp',\n169\t    hotLabel: 'Sans cool roof : tuiles qui stockent la chaleur',\n170\t    coolLabel: 'Avec cool roof : tuiles réfléchissantes',\n171\t  },\n172\t};\n173\t\n174\tconst layerTitles = [\"Primaire d'accroche\", 'Résine réfléchissante', 'Vernis de protection'];\n175\t\n176\tconst layerColors = [\n177\t  {\n178\t    pill: 'bg-terracotta text-white',\n179\t    dot: 'bg-terracotta',\n180\t    chevron: 'text-terracotta',\n181\t  },\n182\t  {\n183\t    pill: 'bg-foreground text-white',\n184\t    dot: 'bg-foreground',\n185\t    chevron: 'text-foreground',\n186\t  },\n187\t  {\n188\t    pill: 'bg-primary text-white',\n189\t    dot: 'bg-primary',\n190\t    chevron: 'text-primary',\n191\t  },\n192\t];\n193\t\n194\tconst layerPositions = [\n195\t  { top: '56.7%', left: '36.5%' },\n196\t  { top: '48.2%', left: '36.5%' },\n197\t  { top: '36.3%', left: '35.6%' },\n198\t];\n199\t\n200\tconst getProblemTitle = (title: string) => {\n201\t  const map: Record<string, { strong: string; muted: string }> = {\n202\t    \"Une toiture bitume noire, c'est un radiateur posé sur votre bâtiment.\": {\n203\t      strong: 'Votre toiture chauffe.',\n204\t      muted: 'Votre bâtiment encaisse.',\n205\t    },\n206\t    'Le bac acier chauffe vite, rouille vite, et fatigue vite.': {\n207\t      strong: 'Le métal chauffe vite.',\n208\t      muted: 'La toiture fatigue aussi.',\n209\t    },\n210\t    'À plat, votre toiture prend le soleil toute la journée.': {\n211\t      strong: 'Votre terrasse prend tout.',\n212\t      muted: \"Chaleur, UV, étanchéité.\",\n213\t    },\n214\t    'Le fibrociment chauffe, vieillit, et coûte cher à déposer.': {\n215\t      strong: 'Le fibrociment chauffe.',\n216\t      muted: 'Le déposer coûte cher.',\n217\t    },\n218\t    'Des tuiles ciment foncées, des combles en surchauffe.': {\n219\t      strong: 'Les tuiles stockent la chaleur.',\n220\t      muted: 'Les combles la subissent.',\n221\t    },\n222\t  };\n223\t\n224\t  return map[title] ?? { strong: title, muted: '' };\n225\t};\n226\t\n227\tconst getLayerDescription = (index: number) => {\n228\t  if (index === 0) {\n229\t    return \"S'adapte au support existant. Chaque toiture a sa chimie, chaque chimie demande une préparation et une accroche adaptées.\";\n230\t  }\n231\t\n232\t  if (index === 1) {\n233\t    return \"C'est le coeur du système. La surface réfléchit le rayonnement solaire au lieu de l'absorber, donc la chaleur rentre moins dans le bâtiment.\";\n234\t  }\n235\t\n236\t  return \"Un top coat protège la résine des UV, de la pollution et du vieillissement prématuré pour conserver la performance dans le temps.\";\n237\t};\n238\t\n239\tconst getLayerExpert = (index: number) => {\n240\t  const notes = [\n241\t    \"Un primaire inadapté, c'est un système qui cloque et se décolle. Le support décide de tout.\",\n242\t    \"Le cool roof traite la cause : la toiture chauffe moins, donc le bâtiment reçoit moins de calories.\",\n243\t    \"La différence entre une peinture et un investissement, c'est la tenue dans le temps. La finition est là pour protéger la performance.\",\n244\t  ];\n245\t\n246\t  return notes[index] ?? notes[0];\n247\t};\n248\t\n249\tconst Label = ({ children, light = false }: { children: string; light?: boolean }) => (\n250\t  <div className=\"mb-5 flex items-center gap-3\">\n251\t    <span className={`h-px w-9 ${light ? 'bg-teal-vivid/70' : 'bg-primary/65'}`} aria-hidden=\"true\" />\n252\t    <span\n253\t      className={`font-body text-[11px] font-bold uppercase tracking-[0.22em] ${\n254\t        light ? 'text-teal-vivid' : 'text-primary'\n255\t      }`}\n256\t    >\n257\t      {children}\n258\t    </span>\n259\t  </div>\n260\t);\n261\t\n262\tconst PrimaryCTA = ({ label, href }: { label: string; href: string }) => (\n263\t  <a\n264\t    href={href}\n265\t    className=\"group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white\"\n266\t  >\n267\t    <span className=\"text-sm\">{label}</span>\n268\t    <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5\">\n269\t      <ArrowRight className=\"h-3.5 w-3.5\" />\n270\t    </span>\n271\t  </a>\n272\t);\n273\t\n274\tconst RoofHero = ({ page }: { page: RoofPageData }) => {\n275\t  const [form, setForm] = useState({ climate: '', surface: '', email: '' });\n276\t  const [submitted, setSubmitted] = useState(false);\n277\t  const surfaceNum = parseFloat(form.surface) || 0;\n278\t  const estimate = surfaceNum ? `${new Intl.NumberFormat('fr-FR').format(surfaceNum * 22.5)} €` : '20-25 €/m²';\n279\t\n280\t  return (\n281\t    <section\n282\t      aria-labelledby={`${page.slug}-hero-title`}\n283\t      className=\"relative isolate flex min-h-[100svh] flex-col overflow-hidden bg-navy text-cream\"\n284\t    >\n285\t      <img\n286\t        src={page.heroImage}\n287\t        alt={page.heroImageAlt}\n288\t        className=\"absolute inset-0 -z-10 size-full scale-[1.02] object-cover\"\n289\t        style={page.slug === 'membrane-bitumineuse' ? { objectPosition: 'center 28%' } : undefined}\n290\t        loading=\"eager\"\n291\t        decoding=\"async\"\n292\t      />\n293\t      <div\n294\t        aria-hidden=\"true\"\n295\t        className=\"absolute inset-0 -z-10 hidden bg-gradient-to-r from-navy/[0.94] via-navy/62 to-navy/25 lg:block\"\n296\t      />\n297\t      <div\n298\t        aria-hidden=\"true\"\n299\t        className={`absolute inset-0 -z-10 bg-gradient-to-b lg:hidden ${\n300\t          page.slug === 'membrane-bitumineuse'\n301\t            ? 'from-navy/92 via-navy/58 to-navy/96'\n302\t            : 'from-navy/84 via-navy/38 to-navy/96'\n303\t        }`}\n304\t      />\n305\t      <div aria-hidden=\"true\" className=\"absolute inset-x-0 bottom-0 -z-10 h-[28%] bg-gradient-to-t from-navy via-navy/85 to-transparent\" />\n306\t\n307\t      <div className=\"container relative z-10 mx-auto flex flex-1 items-center px-6 pb-10 pt-24 lg:px-12 lg:pb-16 lg:pt-28\">\n308\t        <div className=\"grid w-full grid-cols-1 items-center gap-10 lg:grid-cols-[55fr_45fr] lg:gap-12\">\n309\t          <div className=\"max-w-2xl space-y-6 lg:space-y-8\">\n310\t            <ScrollReveal>\n311\t              <nav className=\"flex items-center gap-2 font-body text-xs text-cream/50\">\n312\t                <a href=\"/\" className=\"transition-colors hover:text-cream/75\">Accueil</a>\n313\t                <span className=\"text-cream/28\">/</span>\n314\t                <span>Toitures</span>\n315\t                <span className=\"text-cream/28\">/</span>\n316\t                <span className=\"text-cream/78\">{page.breadcrumb}</span>\n317\t              </nav>\n318\t            </ScrollReveal>\n319\t\n320\t            <ScrollReveal>\n321\t              <h1\n322\t                id={`${page.slug}-hero-title`}\n323\t                className=\"font-satoshi font-bold leading-[1.02] text-white\"\n324\t                style={{ fontSize: 'clamp(2.25rem, 4.6vw, 4rem)', letterSpacing: '-0.03em' }}\n325\t              >\n326\t                {page.h1}\n327\t              </h1>\n328\t            </ScrollReveal>\n329\t\n330\t            <ScrollReveal>\n331\t              <p\n332\t                className=\"max-w-xl font-satoshi font-medium leading-[1.3] text-cream/66\"\n333\t                style={{ fontSize: 'clamp(1rem, 1.5vw, 1.375rem)', letterSpacing: '-0.005em' }}\n334\t              >\n335\t                {page.lead}\n336\t              </p>\n337\t            </ScrollReveal>\n338\t\n339\t            <ScrollReveal>\n340\t              <ul className=\"hidden gap-4 pt-1 sm:flex sm:flex-wrap lg:gap-6\" aria-label=\"Bénéfices clés\">\n341\t                {page.heroStats.map((stat, index) => {\n342\t                  const Icon = [Thermometer, ShieldCheck, TrendingDown][index] ?? BadgeCheck;\n343\t                  return (\n344\t                    <li\n345\t                      key={stat.label}\n346\t                      className={`flex items-start gap-3 ${index !== 0 ? 'sm:border-l sm:border-white/10 sm:pl-6' : ''}`}\n347\t                    >\n348\t                      <Icon className=\"mt-0.5 h-[18px] w-[18px] shrink-0 text-teal-vivid\" strokeWidth={1.5} />\n349\t                      <div className=\"leading-tight\">\n350\t                        <p className=\"font-satoshi text-[15px] font-bold text-white lg:text-base\">{stat.value}</p>\n351\t                        <p className=\"mt-1 font-body text-[12.5px] text-cream/55 lg:text-[13px]\">{stat.label}</p>\n352\t                      </div>\n353\t                    </li>\n354\t                  );\n355\t                })}\n356\t              </ul>\n357\t            </ScrollReveal>\n358\t          </div>\n359\t\n360\t          <ScrollReveal>\n361\t            <div className=\"rounded-[1.5rem] border border-white/[0.08] bg-white/[0.04] p-1.5 backdrop-blur-sm\">\n362\t              <div className=\"rounded-[calc(1.5rem-6px)] border border-white/[0.06] bg-[#0b1a2b]/80 p-4 shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)] backdrop-blur-xl lg:p-7\">\n363\t                {!submitted ? (\n364\t                  <>\n365\t                    <h2 className=\"mb-1 text-center font-satoshi text-xl font-bold text-white lg:text-2xl\">\n366\t                      Estimez le gain possible\n367\t                    </h2>\n368\t                    <p className=\"mb-4 text-center font-body text-[12px] text-white/50\">\n369\t                      Réponse personnalisée sous 24h\n370\t                    </p>\n371\t                    <form\n372\t                      onSubmit={(event) => {\n373\t                        event.preventDefault();\n374\t                        setSubmitted(true);\n375\t                      }}\n376\t                      className=\"space-y-2.5 lg:space-y-3\"\n377\t                    >\n378\t                      <input\n379\t                        value={page.breadcrumb}\n380\t                        readOnly\n381\t                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white outline-none\"\n382\t                      />\n383\t                      <select\n384\t                        required\n385\t                        value={form.climate}\n386\t                        onChange={(e) => setForm({ ...form, climate: e.target.value })}\n387\t                        className=\"w-full appearance-none rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n388\t                      >\n389\t                        <option value=\"\" disabled className=\"bg-card text-foreground\">Bâtiment climatisé ?</option>\n390\t                        {['Oui', 'Non', 'Partiellement', 'À confirmer'].map((option) => (\n391\t                          <option key={option} value={option} className=\"bg-card text-foreground\">{option}</option>\n392\t                        ))}\n393\t                      </select>\n394\t                      <input\n395\t                        type=\"number\"\n396\t                        placeholder=\"Surface toiture (m²)\"\n397\t                        required\n398\t                        min=\"1\"\n399\t                        value={form.surface}\n400\t                        onChange={(e) => setForm({ ...form, surface: e.target.value })}\n401\t                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n402\t                      />\n403\t                      <input\n404\t                        type=\"email\"\n405\t                        placeholder=\"Email professionnel\"\n406\t                        required\n407\t                        value={form.email}\n408\t                        onChange={(e) => setForm({ ...form, email: e.target.value })}\n409\t                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n410\t                      />\n411\t\n412\t                      <button\n413\t                        type=\"submit\"\n414\t                        className=\"group mt-1 flex w-full items-center justify-center gap-3 rounded-full cta-gradient py-3 font-semibold text-white active:scale-[0.98]\"\n415\t                      >\n416\t                        <span className=\"text-[15px]\">Voir mon potentiel</span>\n417\t                        <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5\">\n418\t                          <ArrowRight className=\"h-4 w-4\" />\n419\t                        </span>\n420\t                      </button>\n421\t                    </form>\n422\t\n423\t                    <p className=\"mt-3 text-center font-body text-[11px] text-white/35\">\n424\t                      Sans engagement · Étude adaptée au support\n425\t                    </p>\n426\t                  </>\n427\t                ) : (\n428\t                  <div className=\"py-4 text-center\">\n429\t                    <div className=\"mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/20\">\n430\t                      <ShieldCheck className=\"h-6 w-6 text-primary\" />\n431\t                    </div>\n432\t                    <p className=\"mb-1 font-body text-sm text-white/60\">Base indicative pour {new Intl.NumberFormat('fr-FR').format(surfaceNum)} m²</p>\n433\t                    <p className=\"mb-4 font-satoshi text-2xl font-bold text-white\">{estimate}</p>\n434\t                    <p className=\"mb-4 font-body text-[13px] text-white/50\">\n435\t                      Un conseiller affine le chiffrage selon l'état réel de la toiture.\n436\t                    </p>\n437\t                    <button onClick={() => setSubmitted(false)} className=\"font-body text-sm font-semibold text-primary hover:underline\">\n438\t                      Modifier ma demande\n439\t                    </button>\n440\t                  </div>\n441\t                )}\n442\t              </div>\n443\t            </div>\n444\t          </ScrollReveal>\n445\t        </div>\n446\t      </div>\n447\t\n448\t      <div className=\"relative z-10 hidden border-t border-white/10 bg-navy/78 backdrop-blur-md lg:block\">\n449\t        <div className=\"container mx-auto flex items-center gap-8 px-12 py-5\">\n450\t          <p className=\"shrink-0 font-body text-[10px] font-semibold uppercase tracking-[0.24em] text-cream/45\">\n451\t            Ils nous font confiance\n452\t          </p>\n453\t          <div className=\"flex flex-1 items-center justify-between gap-8\">\n454\t            {logos.map((logo) => (\n455\t              <span key={logo.name} className=\"flex h-8 w-28 items-center justify-center\">\n456\t                <img\n457\t                  src={logo.url}\n458\t                  alt={logo.name}\n459\t                  className=\"max-h-7 max-w-full object-contain opacity-65 brightness-0 invert transition-opacity duration-300 hover:opacity-95\"\n460\t                  loading=\"eager\"\n461\t                  decoding=\"async\"\n462\t                />\n463\t              </span>\n464\t            ))}\n465\t          </div>\n466\t        </div>\n467\t      </div>\n468\t    </section>\n469\t  );\n470\t};\n471\t\n472\tconst ProblemSection = ({ page }: { page: RoofPageData }) => {\n473\t  const title = getProblemTitle(page.problem.title);\n474\t  const visual = supportVisuals[page.slug] ?? supportVisuals['membrane-bitumineuse'];\n475\t\n476\t  return (\n477\t    <section className=\"relative overflow-hidden bg-cream py-16 lg:py-36\">\n478\t      <div className=\"container relative mx-auto px-4 lg:px-8\">\n479\t        <ScrollReveal>\n480\t          <div className=\"mx-auto mb-14 max-w-3xl text-center lg:mb-20\">\n481\t            <h2\n482\t              className=\"font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n483\t              style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n484\t            >\n485\t              {title.strong}\n486\t              {title.muted && <span className=\"text-foreground/30\"> {title.muted}</span>}\n487\t            </h2>\n488\t          </div>\n489\t        </ScrollReveal>\n490\t\n491\t        <div className=\"grid grid-cols-1 items-center gap-12 lg:grid-cols-12 lg:gap-16\">\n492\t          <div className=\"order-2 lg:order-1 lg:col-span-5\">\n493\t            <ScrollReveal>\n494\t              <div className=\"relative\">\n495\t                <div className=\"pointer-events-none absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_hsl(var(--terracotta)/0.18)_0%,_transparent_65%)] blur-2xl\" />\n496\t                <div className=\"relative aspect-square overflow-hidden rounded-[2rem] bg-white shadow-[0_30px_80px_-15px_hsl(var(--terracotta-dark)/0.25),_0_10px_30px_-5px_hsl(var(--terracotta)/0.12)]\">\n497\t                  <img\n498\t                    src={visual.hot}\n499\t                    alt=\"\"\n500\t                    className=\"h-full w-full object-contain p-4\"\n501\t                    loading=\"lazy\"\n502\t                    decoding=\"async\"\n503\t                  />\n504\t                </div>\n505\t              </div>\n506\t              <p className=\"mt-4 text-center font-body text-[11px] uppercase tracking-wide text-terracotta/60\">\n507\t                {visual.hotLabel}\n508\t              </p>\n509\t            </ScrollReveal>\n510\t          </div>\n511\t\n512\t          <div className=\"order-1 lg:order-2 lg:col-span-7 lg:pl-12\">\n513\t            <ScrollReveal stagger>\n514\t              <div\n515\t                className=\"space-y-8 border-l-2 pl-8 lg:space-y-10 lg:pl-10\"\n516\t                style={{ borderImage: 'linear-gradient(to bottom, hsl(var(--terracotta)), hsl(var(--terracotta-dark))) 1' }}\n517\t              >\n518\t                {page.problem.cards.map((card, index) => {\n519\t                  const Icon = problemIcons[index] ?? HelpCircle;\n520\t                  return (\n521\t                    <div key={card.title}>\n522\t                      <div className=\"mb-2 flex items-center gap-3\">\n523\t                        <Icon className=\"h-5 w-5 text-terracotta\" strokeWidth={1.8} />\n524\t                        <h3\n525\t                          className=\"font-satoshi text-xl font-bold text-foreground lg:text-2xl\"\n526\t                          style={{ letterSpacing: '-0.02em', lineHeight: 1.2 }}\n527\t                        >\n528\t                          {card.title}\n529\t                        </h3>\n530\t                      </div>\n531\t                      <p className=\"font-body text-base leading-relaxed text-foreground/55\">{card.text}</p>\n532\t                    </div>\n533\t                  );\n534\t                })}\n535\t              </div>\n536\t            </ScrollReveal>\n537\t          </div>\n538\t        </div>\n539\t\n540\t        <div className=\"mt-20 grid grid-cols-1 items-center gap-12 lg:mt-28 lg:grid-cols-12 lg:gap-16\">\n541\t          <div className=\"order-2 lg:order-2 lg:col-span-5\">\n542\t            <ScrollReveal>\n543\t              <div className=\"relative\">\n544\t                <div className=\"pointer-events-none absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_rgba(32,150,140,0.18)_0%,_transparent_65%)] blur-2xl\" />\n545\t                <div className=\"relative aspect-square overflow-hidden rounded-[2rem] bg-white shadow-[0_30px_80px_-15px_rgba(20,120,110,0.20),_0_10px_30px_-5px_rgba(32,150,140,0.10)]\">\n546\t                  <img\n547\t                    src={visual.cool}\n548\t                    alt=\"\"\n549\t                    className=\"h-full w-full object-contain p-4\"\n550\t                    loading=\"lazy\"\n551\t                    decoding=\"async\"\n552\t                  />\n553\t                </div>\n554\t              </div>\n555\t              <p className=\"mt-4 text-center font-body text-[11px] uppercase tracking-wide text-primary/60\">\n556\t                {visual.coolLabel}\n557\t              </p>\n558\t            </ScrollReveal>\n559\t          </div>\n560\t\n561\t          <div className=\"order-1 lg:order-1 lg:col-span-7 lg:pr-12\">\n562\t            <ScrollReveal>\n563\t              <h3\n564\t                className=\"mb-8 max-w-xl font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n565\t                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n566\t              >\n567\t                Le cool roof : une réponse concrète\n568\t                <span className=\"text-foreground/30\"> au problème de chaleur.</span>\n569\t              </h3>\n570\t              <p className=\"mb-8 max-w-lg font-body text-base leading-relaxed text-foreground/50\">\n571\t                Une surface claire renvoie le rayonnement solaire avant qu'il ne pénètre dans le bâtiment. La toiture chauffe moins, les derniers niveaux respirent, et le support subit moins d'UV et de chocs thermiques.\n572\t              </p>\n573\t              <PrimaryCTA label=\"Demander un devis\" href=\"/diagnostic\" />\n574\t            </ScrollReveal>\n575\t          </div>\n576\t        </div>\n577\t      </div>\n578\t    </section>\n579\t  );\n580\t};\n581\t\n582\tconst SolutionSection = ({ page }: { page: RoofPageData }) => {\n583\t  const [active, setActive] = useState(0);\n584\t\n585\t  return (\n586\t    <section className=\"relative bg-white\">\n587\t      <div className=\"container mx-auto px-4 lg:px-8\">\n588\t        <ScrollReveal>\n589\t          <div className=\"flex flex-col gap-8 pb-10 pt-16 lg:flex-row lg:items-end lg:gap-16 lg:pb-16 lg:pt-32\">\n590\t            <div className=\"lg:w-2/3\">\n591\t              <p className=\"mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-muted-foreground\">\n592\t                {page.solution.badge}\n593\t              </p>\n594\t              <h2\n595\t                className=\"font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n596\t                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n597\t              >\n598\t                <span className=\"text-foreground/30\">Un système conçu pour </span>\n599\t                réfléchir, protéger et durer.\n600\t              </h2>\n601\t            </div>\n602\t            <div className=\"lg:w-1/3 lg:pb-1\">\n603\t              <p className=\"font-body text-base leading-relaxed text-foreground/52 lg:text-right lg:text-lg\">\n604\t                Un primaire, une résine, un vernis qui garantissent la performance de votre toiture dans le temps.\n605\t              </p>\n606\t              <div className=\"mt-5 flex lg:justify-end\">\n607\t                <PrimaryCTA label=\"Demander un devis\" href=\"/diagnostic\" />\n608\t              </div>\n609\t            </div>\n610\t          </div>\n611\t        </ScrollReveal>\n612\t\n613\t        <div className=\"flex flex-col gap-12 pb-24 lg:flex-row lg:gap-16 lg:pb-32\">\n614\t          <div className=\"overflow-hidden rounded-2xl shadow-[0_20px_60px_-15px_rgba(0,0,0,0.08)] lg:hidden\">\n615\t            <img src={coolRoofLayers} alt=\"Coupe du système cool roof Covalba\" className=\"w-full\" loading=\"lazy\" />\n616\t          </div>\n617\t\n618\t          <div className=\"lg:w-1/2 lg:sticky lg:top-[20vh] lg:self-start\">\n619\t            {layerTitles.map((item, index) => {\n620\t              const isOpen = active === index;\n621\t              const colors = layerColors[index] ?? layerColors[0];\n622\t              return (\n623\t                <div key={item} className=\"border-b border-border last:border-b-0\">\n624\t                  <button\n625\t                    onClick={() => setActive(index)}\n626\t                    className=\"group flex w-full items-center gap-4 py-6 text-left\"\n627\t                  >\n628\t                    <span\n629\t                      className={`inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-body text-[11px] font-bold transition-all duration-300 ${\n630\t                        isOpen ? colors.pill : 'bg-muted text-muted-foreground'\n631\t                      }`}\n632\t                    >\n633\t                      0{index + 1}\n634\t                    </span>\n635\t                    <h3\n636\t                      className={`flex-1 font-satoshi text-xl font-bold transition-colors duration-300 lg:text-2xl ${\n637\t                        isOpen ? 'text-foreground' : 'text-foreground/50 group-hover:text-foreground/80'\n638\t                      }`}\n639\t                    >\n640\t                      {item}\n641\t                    </h3>\n642\t                    <ChevronDown\n643\t                      className={`h-5 w-5 shrink-0 transition-all duration-300 ${\n644\t                        isOpen ? `${colors.chevron} rotate-180` : 'text-foreground/25'\n645\t                      }`}\n646\t                      strokeWidth={2}\n647\t                    />\n648\t                  </button>\n649\t\n650\t                  <div\n651\t                    className={`grid transition-all duration-500 ${\n652\t                      isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'\n653\t                    }`}\n654\t                  >\n655\t                    <div className=\"overflow-hidden\">\n656\t                      <div className=\"pb-8 pl-6 lg:pl-12\">\n657\t                        <p className=\"mb-6 font-body text-base leading-relaxed text-foreground/65 lg:text-lg\">\n658\t                          {getLayerDescription(index)}\n659\t                        </p>\n660\t                        <div className=\"flex items-start gap-3 rounded-xl bg-foreground/[0.03] p-4\">\n661\t                          <img\n662\t                            src=\"/maxime-bourassin.jpg\"\n663\t                            alt=\"Maxime Bourassin, fondateur Covalba\"\n664\t                            className=\"mt-0.5 h-9 w-9 shrink-0 rounded-full object-cover\"\n665\t                          />\n666\t                          <div>\n667\t                            <p className=\"font-body text-[15px] italic leading-relaxed text-foreground/65 lg:text-base\">\n668\t                              \"{getLayerExpert(index)}\"\n669\t                            </p>\n670\t                            <p className=\"mt-2 font-body text-xs font-semibold text-foreground/50\">\n671\t                              Maxime Bourassin, fondateur\n672\t                            </p>\n673\t                          </div>\n674\t                        </div>\n675\t                        {index === 0 && page.solution.note && (\n676\t                          <p className=\"mt-4 rounded-xl bg-primary/5 p-4 font-body text-sm leading-relaxed text-foreground/62\">\n677\t                            {page.solution.note}\n678\t                          </p>\n679\t                        )}\n680\t                      </div>\n681\t                    </div>\n682\t                  </div>\n683\t                </div>\n684\t              );\n685\t            })}\n686\t          </div>\n687\t\n688\t          <div className=\"hidden lg:block lg:w-1/2\">\n689\t            <div className=\"relative overflow-hidden rounded-2xl shadow-[0_30px_80px_-15px_rgba(0,0,0,0.08)]\">\n690\t              <img src={coolRoofLayers} alt=\"Coupe du système cool roof Covalba\" className=\"w-full\" loading=\"lazy\" />\n691\t              {layerTitles.map((item, index) => {\n692\t                const pos = layerPositions[index];\n693\t                const colors = layerColors[index] ?? layerColors[0];\n694\t                const isActive = active === index;\n695\t                if (!pos) return null;\n696\t\n697\t                return (\n698\t                  <div key={item} className=\"absolute\" style={{ top: pos.top, left: pos.left }}>\n699\t                    <div\n700\t                      className={`absolute -translate-x-1/2 -translate-y-1/2 transition-all duration-500 ${\n701\t                        isActive ? 'scale-125' : 'scale-75 opacity-40'\n702\t                      }`}\n703\t                    >\n704\t                      <div\n705\t                        className={`h-3.5 w-3.5 rounded-full ${\n706\t                          isActive ? colors.dot : 'bg-foreground/20'\n707\t                        } shadow-lg ring-2 ring-white transition-colors duration-500`}\n708\t                      />\n709\t                      {isActive && (\n710\t                        <div className={`absolute inset-0 h-3.5 w-3.5 animate-ping rounded-full ${colors.dot} opacity-30`} />\n711\t                      )}\n712\t                    </div>\n713\t                    <div\n714\t                      className={`pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 transition-all duration-500 ${\n715\t                        isActive ? 'translate-x-0 opacity-100' : 'translate-x-2 opacity-0'\n716\t                      }`}\n717\t                    >\n718\t                      <span className={`whitespace-nowrap rounded-full px-4 py-1.5 font-body text-[13px] font-bold shadow-lg ${colors.pill}`}>\n719\t                        {item}\n720\t                      </span>\n721\t                    </div>\n722\t                  </div>\n723\t                );\n724\t              })}\n725\t            </div>\n726\t          </div>\n727\t        </div>\n728\t      </div>\n729\t    </section>\n730\t  );\n731\t};\n732\t\n733\tconst BenefitsSection = ({ page }: { page: RoofPageData }) => (\n734\t  <section className=\"bg-white py-20 lg:py-32\">\n735\t    <div className=\"container mx-auto px-4 lg:px-8\">\n736\t      <ScrollReveal>\n737\t        <div className=\"mb-10 grid gap-8 lg:grid-cols-[0.82fr_1.18fr] lg:items-end lg:gap-14\">\n738\t          <div>\n739\t            <Label>{page.benefits.badge}</Label>\n740\t            <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl\">\n741\t              {page.benefits.title}\n742\t            </h2>\n743\t          </div>\n744\t          <p className=\"max-w-xl border-l border-primary/30 pl-6 font-body text-base leading-relaxed text-foreground/62 lg:text-lg\">\n745\t            {page.benefits.featured}\n746\t          </p>\n747\t        </div>\n748\t      </ScrollReveal>\n749\t\n750\t      <ScrollReveal stagger>\n751\t        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n752\t          {page.benefits.cards.map((benefit, index) => {\n753\t            const Icon = cardIcons[index] ?? Sparkles;\n754\t            return (\n755\t              <article\n756\t                key={benefit.title}\n757\t                className=\"group overflow-hidden rounded-2xl bg-cream ring-1 ring-foreground/[0.05] transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_24px_70px_-48px_hsl(var(--navy)/0.45)]\"\n758\t              >\n759\t                <div className=\"relative aspect-[4/3] overflow-hidden bg-foreground/[0.04]\">\n760\t                  <img\n761\t                    src={getBenefitImage(page, benefit, index)}\n762\t                    alt=\"\"\n763\t                    className=\"h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.035]\"\n764\t                    loading=\"lazy\"\n765\t                    decoding=\"async\"\n766\t                  />\n767\t                  <div className=\"absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-cream to-transparent\" />\n768\t                </div>\n769\t                <div className=\"p-5 lg:p-6\">\n770\t                  <div className=\"mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-white text-primary shadow-[0_12px_30px_-24px_hsl(var(--navy)/0.35)]\">\n771\t                    <Icon className=\"h-5 w-5\" strokeWidth={1.7} />\n772\t                  </div>\n773\t                  <h3 className=\"font-satoshi text-lg font-bold leading-tight text-foreground\">{benefit.title}</h3>\n774\t                  <p className=\"mt-2 font-body text-sm leading-relaxed text-foreground/62\">{benefit.text}</p>\n775\t                </div>\n776\t              </article>\n777\t            );\n778\t          })}\n779\t        </div>\n780\t      </ScrollReveal>\n781\t    </div>\n782\t  </section>\n783\t);\n784\t\n785\tconst RoiOptionCards = ({\n786\t  page,\n787\t  surface,\n788\t  treatmentRange,\n789\t}: {\n790\t  page: RoofPageData;\n791\t  surface: number;\n792\t  treatmentRange: ReturnType<typeof getTreatmentRange>;\n793\t}) => {\n794\t  if (!page.roi.comparison) {\n795\t    return page.roi.afterComparison ? (\n796\t      <article className=\"rounded-2xl bg-white p-6 ring-1 ring-foreground/[0.06] lg:p-8\">\n797\t        <p className=\"font-body text-base leading-relaxed text-foreground/66 lg:text-lg\">\n798\t          {page.roi.afterComparison}\n799\t        </p>\n800\t      </article>\n801\t    ) : null;\n802\t  }\n803\t\n804\t  const options = page.roi.comparison.headers.slice(1);\n805\t  const rows = page.roi.comparison.rows;\n806\t  const investment = rows.find((row) => row[0].toLowerCase().includes('investissement'));\n807\t  const duration = rows.find((row) => row[0].toLowerCase().includes('dur'));\n808\t  const activity = rows.find((row) => row[0].toLowerCase().includes('activ'));\n809\t  const treatmentMidpoint = (treatmentRange.min + treatmentRange.max) / 2;\n810\t\n811\t  return (\n812\t    <div className=\"grid gap-4 lg:grid-cols-3\">\n813\t      {options.map((option, optionIndex) => {\n814\t        const isCovalba = optionIndex === 0;\n815\t        const rawInvestment = investment?.[optionIndex + 1] ?? '';\n816\t        const parsedPrice = parsePricePerM2(rawInvestment);\n817\t        const pricePerM2 = parsedPrice ?? getFallbackPricePerM2(option, optionIndex, treatmentMidpoint);\n818\t        const dynamicInvestment = pricePerM2 ? `~${formatCurrency(surface * pricePerM2)}` : displayCell(rawInvestment);\n819\t\n820\t        return (\n821\t          <article\n822\t            key={option}\n823\t            className={`rounded-2xl p-6 ring-1 ${\n824\t              isCovalba\n825\t                ? 'bg-[#142333] text-white ring-transparent'\n826\t                : 'bg-white text-foreground ring-foreground/[0.06]'\n827\t            }`}\n828\t          >\n829\t            <div className=\"mb-6 flex items-start justify-between gap-4\">\n830\t              <h3 className=\"font-satoshi text-xl font-black leading-tight\">{option}</h3>\n831\t              {isCovalba && (\n832\t                <span className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-teal-vivid/15 text-teal-vivid\">\n833\t                  <Check className=\"h-4 w-4\" strokeWidth={2.4} />\n834\t                </span>\n835\t              )}\n836\t            </div>\n837\t            <p className={`font-satoshi text-3xl font-black leading-none ${isCovalba ? 'text-teal-vivid' : 'text-terracotta'}`}>\n838\t              {dynamicInvestment}\n839\t            </p>\n840\t            {pricePerM2 && (\n841\t              <p className={`mt-2 font-body text-xs font-semibold ${isCovalba ? 'text-white/45' : 'text-foreground/40'}`}>\n842\t                base {new Intl.NumberFormat('fr-FR').format(surface)} m² · {pricePerM2.toLocaleString('fr-FR')} €/m²\n843\t              </p>\n844\t            )}\n845\t            <dl className=\"mt-6 space-y-3 border-t border-current/10 pt-5\">\n846\t              {[duration, activity].filter(Boolean).map((row) => (\n847\t                <div key={row![0]} className=\"grid grid-cols-[0.75fr_1fr] gap-4\">\n848\t                  <dt className={`font-body text-xs font-bold uppercase tracking-[0.14em] ${isCovalba ? 'text-white/38' : 'text-foreground/35'}`}>\n849\t                    {displayCell(row![0])}\n850\t                  </dt>\n851\t                  <dd className={`font-body text-sm leading-relaxed ${isCovalba ? 'text-white/74' : 'text-foreground/62'}`}>\n852\t                    {displayCell(row![optionIndex + 1])}\n853\t                  </dd>\n854\t                </div>\n855\t              ))}\n856\t            </dl>\n857\t          </article>\n858\t        );\n859\t      })}\n860\t    </div>\n861\t  );\n862\t};\n863\t\n864\tconst ROICalculator = ({\n865\t  page,\n866\t  surface,\n867\t  selectedSituation,\n868\t  treatmentRange,\n869\t  onSurfaceChange,\n870\t  onSituationChange,\n871\t}: {\n872\t  page: RoofPageData;\n873\t  surface: number;\n874\t  selectedSituation: string;\n875\t  treatmentRange: ReturnType<typeof getTreatmentRange>;\n876\t  onSurfaceChange: (surface: number) => void;\n877\t  onSituationChange: (situation: string) => void;\n878\t}) => {\n879\t  const treatmentLow = surface * treatmentRange.min;\n880\t  const treatmentHigh = surface * treatmentRange.max;\n881\t  const referencePrice = selectedSituation.toLowerCase().includes('isolation') ? 150 : 90;\n882\t  const referenceCost = surface * referencePrice;\n883\t  const potentialGap = Math.max(referenceCost - treatmentHigh, 0);\n884\t\n885\t  return (\n886\t    <div className=\"mb-10 rounded-[2rem] bg-[#142333] p-5 text-white shadow-[0_34px_90px_-64px_hsl(var(--navy)/0.65)] lg:p-8\">\n887\t      <div className=\"grid gap-7 lg:grid-cols-[0.88fr_1.12fr] lg:items-end\">\n888\t        <div>\n889\t          <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-teal-vivid/70\">\n890\t            Calculateur indicatif\n891\t          </p>\n892\t          <h3 className=\"mt-4 max-w-lg font-satoshi text-2xl font-black leading-tight lg:text-3xl\">\n893\t            Ajustez la surface et l'état de la toiture.\n894\t          </h3>\n895\t          <p className=\"mt-3 max-w-lg font-body text-sm leading-relaxed text-white/52\">\n896\t            Par défaut : 5 000 m², surface type d'un entrepôt ou bâtiment industriel à traiter.\n897\t          </p>\n898\t        </div>\n899\t\n900\t        <div className=\"grid gap-3 sm:grid-cols-[0.72fr_1.28fr]\">\n901\t          <label className=\"block\">\n902\t            <span className=\"mb-2 block font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/40\">\n903\t              Surface\n904\t            </span>\n905\t            <input\n906\t              type=\"number\"\n907\t              min={100}\n908\t              step={100}\n909\t              value={surface}\n910\t              onChange={(event) => onSurfaceChange(Math.max(100, Number(event.target.value) || 100))}\n911\t              className=\"h-12 w-full rounded-xl border border-white/10 bg-white/[0.07] px-4 font-body text-sm font-semibold text-white outline-none transition focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20\"\n912\t              aria-label=\"Surface à traiter en mètres carrés\"\n913\t            />\n914\t          </label>\n915\t          <label className=\"block\">\n916\t            <span className=\"mb-2 block font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/40\">\n917\t              Situation\n918\t            </span>\n919\t            <select\n920\t              value={selectedSituation}\n921\t              onChange={(event) => onSituationChange(event.target.value)}\n922\t              className=\"h-12 w-full rounded-xl border border-white/10 bg-white/[0.07] px-4 font-body text-sm font-semibold text-white outline-none transition focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20\"\n923\t              aria-label=\"Situation de la toiture\"\n924\t            >\n925\t              {page.roi.situation.rows.map((row) => (\n926\t                <option key={row[0]} value={row[0]} className=\"bg-card text-foreground\">\n927\t                  {row[0]}\n928\t                </option>\n929\t              ))}\n930\t            </select>\n931\t          </label>\n932\t        </div>\n933\t      </div>\n934\t\n935\t      <div className=\"mt-7 grid gap-3 md:grid-cols-3\">\n936\t        {[\n937\t          {\n938\t            label: treatmentRange.label,\n939\t            value: `${formatCurrency(treatmentLow)} - ${formatCurrency(treatmentHigh)}`,\n940\t            detail: `${treatmentRange.min}-${treatmentRange.max} €/m² selon préparation`,\n941\t            valueClass: 'text-teal-vivid',\n942\t          },\n943\t          {\n944\t            label: 'Réfection de référence',\n945\t            value: `~${formatCurrency(referenceCost)}`,\n946\t            detail: `${referencePrice} €/m², ordre de grandeur à comparer`,\n947\t            valueClass: 'text-terracotta',\n948\t          },\n949\t          {\n950\t            label: 'Écart potentiel',\n951\t            value: `jusqu'à ${formatCurrency(potentialGap)}`,\n952\t            detail: \"Investissement lourd évité ou repoussé si le support est viable\",\n953\t            valueClass: 'text-teal-vivid',\n954\t          },\n955\t        ].map((item) => (\n956\t          <article key={item.label} className=\"rounded-2xl bg-white/[0.07] p-5 ring-1 ring-white/10\">\n957\t            <p className=\"font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/38\">{item.label}</p>\n958\t            <p className={`mt-3 font-satoshi text-2xl font-black leading-tight ${item.valueClass}`}>{item.value}</p>\n959\t            <p className=\"mt-2 font-body text-xs leading-relaxed text-white/45\">{item.detail}</p>\n960\t          </article>\n961\t        ))}\n962\t      </div>\n963\t      <p className=\"mt-4 font-body text-xs leading-relaxed text-white/38\">\n964\t        Chiffrage indicatif : l'étude ajuste le prix selon l'accès, la préparation, les points singuliers et l'état réel du support.\n965\t      </p>\n966\t    </div>\n967\t  );\n968\t};\n969\t\n970\tconst getSituationImage = (recommendation: string) => {\n971\t  const lower = recommendation.toLowerCase();\n972\t  if (lower.includes('covametal')) return covaMetalProduct;\n973\t  if (lower.includes('covaseal')) return covaSealProduct;\n974\t  if (lower.includes('cova')) return covaTherm20Product;\n975\t  return covaTherm8Product;\n976\t};\n977\t\n978\tconst SituationCards = ({ rows }: { rows: string[][] }) => (\n979\t  <div className=\"grid gap-4 md:grid-cols-2\">\n980\t    {rows.map((row) => (\n981\t      <article key={row[0]} className=\"grid gap-4 rounded-2xl bg-white p-4 ring-1 ring-foreground/[0.06] sm:grid-cols-[128px_1fr] lg:grid-cols-[190px_1fr] lg:gap-5 lg:p-5\">\n982\t        <div className=\"flex aspect-[4/3] items-center justify-center rounded-xl bg-gradient-to-br from-cream to-white p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.75),_0_18px_44px_-34px_hsl(var(--navy)/0.45)] ring-1 ring-foreground/[0.04] sm:aspect-square lg:p-6\">\n983\t          <img src={getSituationImage(row[1])} alt=\"\" className=\"max-h-full max-w-full object-contain\" loading=\"lazy\" decoding=\"async\" />\n984\t        </div>\n985\t        <div className=\"self-center\">\n986\t          <p className=\"font-satoshi text-lg font-bold leading-tight text-foreground\">{row[0]}</p>\n987\t          <p className=\"mt-2 font-body text-sm font-bold text-primary\">{row[1]}</p>\n988\t          <p className=\"mt-2 font-body text-sm leading-relaxed text-foreground/58\">{row[2]}</p>\n989\t        </div>\n990\t      </article>\n991\t    ))}\n992\t  </div>\n993\t);\n994\t\n995\tconst ROISection = ({ page }: { page: RoofPageData }) => {\n996\t  const [surface, setSurface] = useState(5000);\n997\t  const [selectedSituation, setSelectedSituation] = useState(page.roi.situation.rows[0]?.[0] ?? '');\n998\t  const treatmentRange = getTreatmentRange(page, selectedSituation);\n999\t\n1000\t  return (\n1001\t    <section className=\"bg-cream py-20 lg:py-32\">\n1002\t      <div className=\"container mx-auto px-4 lg:px-8\">\n1003\t      <ScrollReveal>\n1004\t        <div className=\"mx-auto mb-12 max-w-3xl text-center lg:mb-16\">\n1005\t          <div className=\"flex justify-center\">\n1006\t            <Label>{page.roi.badge}</Label>\n1007\t          </div>\n1008\t          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-[3rem]\">\n1009\t            {page.roi.title}\n1010\t          </h2>\n1011\t          <p className=\"mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-foreground/58 lg:text-lg\">\n1012\t            {page.roi.intro}\n1013\t          </p>\n1014\t        </div>\n1015\t      </ScrollReveal>\n1016\t\n1017\t      <ScrollReveal>\n1018\t        <div className=\"mb-12 grid gap-4 md:grid-cols-3\">\n1019\t          {[\n1020\t            ['20-25 €/m²', 'pour traiter et rafraîchir'],\n1021\t            ['8-10 ans', 'de réfection repoussée'],\n1022\t            ['0 arrêt', \"d'activité pendant le chantier\"],\n1023\t          ].map(([value, label]) => (\n1024\t            <article key={value} className=\"rounded-2xl bg-white p-6 text-center ring-1 ring-foreground/[0.06]\">\n1025\t              <p className=\"font-satoshi text-4xl font-black leading-none text-primary\">{value}</p>\n1026\t              <p className=\"mt-3 font-body text-sm font-semibold text-foreground/52\">{label}</p>\n1027\t            </article>\n1028\t          ))}\n1029\t        </div>\n1030\t      </ScrollReveal>\n1031\t\n1032\t      <ScrollReveal>\n1033\t        <div className=\"mb-8 max-w-2xl\">\n1034\t          <div>\n1035\t            <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55\">\n1036\t              Comparer les options\n1037\t            </p>\n1038\t            <h3 className=\"mt-4 font-satoshi text-2xl font-black leading-tight text-foreground lg:text-3xl\">\n1039\t              Une lecture rapide du budget.\n1040\t            </h3>\n1041\t          </div>\n1042\t        </div>\n1043\t      </ScrollReveal>\n1044\t\n1045\t      <ScrollReveal>\n1046\t        <ROICalculator\n1047\t          page={page}\n1048\t          surface={surface}\n1049\t          selectedSituation={selectedSituation}\n1050\t          treatmentRange={treatmentRange}\n1051\t          onSurfaceChange={setSurface}\n1052\t          onSituationChange={setSelectedSituation}\n1053\t        />\n1054\t      </ScrollReveal>\n1055\t\n1056\t      <ScrollReveal>\n1057\t        <RoiOptionCards page={page} surface={surface} treatmentRange={treatmentRange} />\n1058\t        {page.roi.comparison && page.roi.afterComparison && (\n1059\t          <p className=\"mt-5 max-w-3xl font-body text-sm leading-relaxed text-foreground/52 lg:text-base\">\n1060\t            {page.roi.afterComparison}\n1061\t          </p>\n1062\t        )}\n1063\t      </ScrollReveal>\n1064\t\n1065\t      <ScrollReveal>\n1066\t        <div className=\"mt-16 rounded-[2rem] bg-white p-5 ring-1 ring-foreground/[0.06] lg:mt-20 lg:p-8\">\n1067\t          <div className=\"mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between\">\n1068\t            <div>\n1069\t              <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55\">\n1070\t                Décider selon l'état réel\n1071\t              </p>\n1072\t              <h3 className=\"mt-4 max-w-xl font-satoshi text-2xl font-black leading-tight text-foreground lg:text-3xl\">\n1073\t                Quelle solution pour votre toiture ?\n1074\t              </h3>\n1075\t            </div>\n1076\t            <PrimaryCTA label={page.roi.cta} href=\"/diagnostic\" />\n1077\t          </div>\n1078\t          <SituationCards rows={page.roi.situation.rows} />\n1079\t        </div>\n1080\t      </ScrollReveal>\n1081\t    </div>\n1082\t  </section>\n1083\t  );\n1084\t};\n1085\t\n1086\tconst DiagnosticCTA = ({ title, text }: { title: string; text: string }) => (\n1087\t  <section className=\"relative overflow-hidden bg-[#182A3A] py-14 text-white lg:py-20\">\n1088\t    <div\n1089\t      aria-hidden=\"true\"\n1090\t      className=\"absolute inset-0 opacity-35\"\n1091\t      style={{\n1092\t        backgroundImage:\n1093\t          'radial-gradient(circle at 16% 20%, rgba(83, 207, 166, 0.22), transparent 28%), linear-gradient(115deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 120px)',\n1094\t      }}\n1095\t    />\n1096\t    <div className=\"container relative mx-auto px-4 lg:px-8\">\n1097\t      <ScrollReveal>\n1098\t        <div className=\"mx-auto grid max-w-5xl gap-7 lg:grid-cols-[1fr_auto] lg:items-center\">\n1099\t          <div>\n1100\t            <h2 className=\"font-satoshi text-2xl font-black leading-tight lg:text-4xl\">{title}</h2>\n1101\t            <p className=\"mt-3 max-w-2xl font-body text-sm leading-relaxed text-white/68 lg:text-base\">{text}</p>\n1102\t          </div>\n1103\t          <div className=\"flex flex-col gap-3 sm:flex-row lg:justify-end\">\n1104\t            <PrimaryCTA label=\"Demander un devis\" href=\"/diagnostic\" />\n1105\t          </div>\n1106\t        </div>\n1107\t      </ScrollReveal>\n1108\t    </div>\n1109\t  </section>\n1110\t);\n1111\t\n1112\tconst MethodSection = ({ page }: { page: RoofPageData }) => {\n1113\t  const [videoOpen, setVideoOpen] = useState(false);\n1114\t\n1115\t  return (\n1116\t    <section className=\"bg-white py-16 lg:py-32\">\n1117\t      <div className=\"container mx-auto px-4 lg:px-8\">\n1118\t        <div className=\"flex flex-col items-start gap-12 lg:flex-row lg:gap-20\">\n1119\t          <div className=\"lg:sticky lg:top-[120px] lg:w-[40%]\">\n1120\t            <ScrollReveal>\n1121\t              <p className=\"mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/50\">\n1122\t                Le process\n1123\t              </p>\n1124\t              <h2\n1125\t                className=\"mb-6 font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n1126\t                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n1127\t              >\n1128\t                4 étapes. Zéro interruption.\n1129\t                <span className=\"text-foreground/30\"> Zéro risque.</span>\n1130\t              </h2>\n1131\t              <p className=\"mb-8 font-body text-base leading-relaxed text-muted-foreground lg:text-lg\">\n1132\t                {page.method.reassurance}\n1133\t              </p>\n1134\t              <button\n1135\t                onClick={() => setVideoOpen(true)}\n1136\t                className=\"group flex items-center gap-3 text-primary transition-colors hover:text-primary\"\n1137\t              >\n1138\t                <span className=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 transition-colors group-hover:bg-primary/20\">\n1139\t                  <Play className=\"h-5 w-5\" />\n1140\t                </span>\n1141\t                <span className=\"font-body text-sm font-semibold\">Voir un chantier en 2 minutes</span>\n1142\t              </button>\n1143\t            </ScrollReveal>\n1144\t          </div>\n1145\t\n1146\t          <div className=\"relative lg:w-[60%]\">\n1147\t            <div className=\"absolute bottom-4 left-5 top-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent lg:left-6\" />\n1148\t            <div className=\"flex flex-col\">\n1149\t              {page.method.steps.map((step, index) => {\n1150\t                const Icon = methodIcons[index] ?? CheckCircle2;\n1151\t                return (\n1152\t                  <ScrollReveal key={step.title}>\n1153\t                    <div className=\"group relative flex items-start gap-5 py-8 lg:gap-7 lg:py-10\">\n1154\t                      <span className=\"relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-primary/10 transition-colors duration-500 group-hover:bg-primary/15 lg:h-12 lg:w-12\">\n1155\t                        <Icon className=\"h-4 w-4 text-primary lg:h-5 lg:w-5\" />\n1156\t                      </span>\n1157\t                      <div className=\"pt-1\">\n1158\t                        <span className=\"mb-2 block font-body text-xs font-bold uppercase tracking-widest text-primary/50\">\n1159\t                          Étape 0{index + 1}\n1160\t                        </span>\n1161\t                        <h3 className=\"mb-2 font-satoshi text-xl font-bold text-foreground lg:text-2xl\">\n1162\t                          {step.title}\n1163\t                        </h3>\n1164\t                        <p className=\"max-w-md font-body text-sm leading-relaxed text-muted-foreground lg:text-base\">\n1165\t                          {step.text}\n1166\t                        </p>\n1167\t                      </div>\n1168\t                    </div>\n1169\t                    {index < page.method.steps.length - 1 && <div className=\"ml-5 h-px bg-border lg:ml-6\" />}\n1170\t                  </ScrollReveal>\n1171\t                );\n1172\t              })}\n1173\t            </div>\n1174\t\n1175\t            <ScrollReveal>\n1176\t              <div className=\"ml-16 mt-4 lg:ml-20\">\n1177\t                <p className=\"font-body text-xs font-medium text-muted-foreground/50\">\n1178\t                  Durée moyenne : 3 jours · Sans arrêt d'activité\n1179\t                </p>\n1180\t              </div>\n1181\t            </ScrollReveal>\n1182\t          </div>\n1183\t        </div>\n1184\t      </div>\n1185\t\n1186\t      <Dialog open={videoOpen} onOpenChange={setVideoOpen}>\n1187\t        <DialogContent className=\"max-w-4xl overflow-hidden border-none bg-black p-0\">\n1188\t          <div className=\"aspect-video\">\n1189\t            <iframe\n1190\t              src=\"https://www.youtube.com/embed/9HOB5OVH0Ac?autoplay=1\"\n1191\t              className=\"h-full w-full\"\n1192\t              allow=\"autoplay; encrypted-media\"\n1193\t              allowFullScreen\n1194\t              title=\"Covalba Cool Roof, un chantier en 2 minutes\"\n1195\t            />\n1196\t          </div>\n1197\t        </DialogContent>\n1198\t      </Dialog>\n1199\t    </section>\n1200\t  );\n1201\t};\n1202\t\n1203\tconst ProofSection = ({ page }: { page: RoofPageData }) => (\n1204\t  <section className=\"bg-[#192A3A] py-20 text-white lg:py-32\">\n1205\t    <div className=\"container mx-auto px-4 lg:px-8\">\n1206\t      <ScrollReveal>\n1207\t        <div className=\"mb-12 grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-end\">\n1208\t          <div>\n1209\t            <Label light>{page.proof.badge}</Label>\n1210\t            <h2 className=\"font-satoshi text-3xl font-black leading-tight sm:text-4xl lg:text-5xl\">{page.proof.title}</h2>\n1211\t          </div>\n1212\t          <p className=\"max-w-xl font-body text-base leading-relaxed text-white/62\">\n1213\t            Des chiffres de terrain à confirmer chantier par chantier, utilisés ici comme repères de performance.\n1214\t          </p>\n1215\t        </div>\n1216\t      </ScrollReveal>\n1217\t\n1218\t      <ScrollReveal stagger>\n1219\t        <div className=\"grid gap-4 md:grid-cols-3\">\n1220\t          {page.proof.figures.map((figure, index) => {\n1221\t            const Icon = proofIcons[index] ?? BadgeCheck;\n1222\t            return (\n1223\t              <article key={figure.value} className=\"rounded-2xl border border-white/10 bg-white/[0.045] p-7\">\n1224\t                <Icon className=\"mb-6 h-6 w-6 text-teal-vivid\" strokeWidth={1.7} />\n1225\t                <p className=\"font-satoshi text-3xl font-black leading-none text-white lg:text-4xl\">{figure.value}</p>\n1226\t                <p className=\"mt-3 font-body text-sm leading-relaxed text-white/60\">{figure.label}</p>\n1227\t              </article>\n1228\t            );\n1229\t          })}\n1230\t        </div>\n1231\t      </ScrollReveal>\n1232\t\n1233\t      <ScrollReveal>\n1234\t        <div className=\"mt-14 border-t border-white/10 pt-10\">\n1235\t          <p className=\"mb-8 text-center font-body text-[10px] font-bold uppercase tracking-[0.22em] text-white/42\">\n1236\t            Références clients\n1237\t          </p>\n1238\t          <div className=\"flex flex-wrap items-center justify-center gap-x-10 gap-y-7 lg:gap-x-14\">\n1239\t            {logos.map((logo) => (\n1240\t              <span key={logo.name} className=\"flex h-8 w-28 items-center justify-center\">\n1241\t                <img\n1242\t                  src={logo.url}\n1243\t                  alt={logo.name}\n1244\t                  className=\"max-h-7 max-w-full object-contain opacity-45 transition-opacity duration-300 hover:opacity-80\"\n1245\t                  style={{ filter: 'brightness(0) invert(1)' }}\n1246\t                  loading=\"lazy\"\n1247\t                />\n1248\t              </span>\n1249\t            ))}\n1250\t          </div>\n1251\t        </div>\n1252\t      </ScrollReveal>\n1253\t    </div>\n1254\t  </section>\n1255\t);\n1256\t\n1257\tconst FAQSection = ({ faq }: { faq: RoofPageData['faq'] }) => (\n1258\t  <section className=\"bg-cream py-20 lg:py-32\">\n1259\t    <div className=\"container mx-auto px-4 lg:px-8\">\n1260\t      <div className=\"grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:gap-16\">\n1261\t        <ScrollReveal>\n1262\t          <div className=\"lg:sticky lg:top-24\">\n1263\t            <Label>FAQ</Label>\n1264\t            <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl\">\n1265\t              Vos questions,\n1266\t              <br />\n1267\t              <span className=\"text-foreground/40\">nos réponses.</span>\n1268\t            </h2>\n1269\t            <a href=\"#contact\" className=\"group mt-8 inline-flex items-center gap-2 font-body text-sm font-semibold text-primary transition-all hover:gap-3\">\n1270\t              Une autre question ? Parlons-en\n1271\t              <ArrowRight className=\"h-4 w-4\" />\n1272\t            </a>\n1273\t          </div>\n1274\t        </ScrollReveal>\n1275\t\n1276\t        <ScrollReveal>\n1277\t          <Accordion type=\"single\" collapsible className=\"space-y-3\">\n1278\t            {faq.map((item, index) => (\n1279\t              <AccordionItem\n1280\t                key={item.q}\n1281\t                value={`roof-faq-${index}`}\n1282\t                className=\"rounded-xl border border-foreground/[0.06] bg-white px-5 shadow-[0_12px_34px_rgba(24,42,58,0.04)] data-[state=open]:border-primary/20 lg:px-6\"\n1283\t              >\n1284\t                <AccordionTrigger className=\"py-5 text-left font-satoshi text-base font-bold text-foreground hover:no-underline lg:text-[17px]\">\n1285\t                  {item.q}\n1286\t                </AccordionTrigger>\n1287\t                <AccordionContent className=\"pb-5 font-body text-[14.5px] leading-relaxed text-foreground/67 lg:text-[15px]\">\n1288\t                  {item.a}\n1289\t                </AccordionContent>\n1290\t              </AccordionItem>\n1291\t            ))}\n1292\t          </Accordion>\n1293\t        </ScrollReveal>\n1294\t      </div>\n1295\t    </div>\n1296\t  </section>\n1297\t);\n1298\t\n1299\tconst FinalCTA = ({ page }: { page: RoofPageData }) => (\n1300\t  <section id=\"contact\" className=\"overflow-hidden bg-[#182A3A] py-20 text-white lg:py-32\">\n1301\t    <div className=\"container mx-auto px-4 lg:px-8\">\n1302\t      <ScrollReveal>\n1303\t        <div className=\"mx-auto max-w-4xl text-center\">\n1304\t          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl\">\n1305\t            {page.finalCta.title}\n1306\t          </h2>\n1307\t          <p className=\"mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-white/72 lg:text-lg\">\n1308\t            {page.finalCta.text}\n1309\t          </p>\n1310\t          <div className=\"mt-9 flex flex-col gap-3 sm:flex-row sm:justify-center\">\n1311\t            <PrimaryCTA label=\"Demander un devis\" href=\"/diagnostic\" />\n1312\t          </div>\n1313\t        </div>\n1314\t      </ScrollReveal>\n1315\t\n1316\t      <ScrollReveal>\n1317\t        <ul className=\"mx-auto mt-12 grid max-w-3xl gap-3 sm:grid-cols-3\">\n1318\t          {page.finalCta.reassurances.map((item) => (\n1319\t            <li key={item} className=\"flex items-center justify-center gap-2.5 rounded-lg border border-white/[0.12] bg-white/[0.045] px-4 py-3\">\n1320\t              <CalendarCheck className=\"h-4 w-4 shrink-0 text-teal-vivid\" strokeWidth={1.8} />\n1321\t              <span className=\"font-body text-sm text-white/[0.76]\">{item}</span>\n1322\t            </li>\n1323\t          ))}\n1324\t        </ul>\n1325\t      </ScrollReveal>\n1326\t    </div>\n1327\t  </section>\n1328\t);\n1329\t\n1330\tconst SEOContent = ({ page }: { page: RoofPageData }) => (\n1331\t  <section className=\"bg-white py-20 lg:py-28\">\n1332\t    <div className=\"container mx-auto px-4 lg:px-8\">\n1333\t      <ScrollReveal>\n1334\t        <article className=\"mx-auto max-w-3xl\">\n1335\t          <p className=\"mb-5 font-body text-[10px] font-bold uppercase tracking-[0.25em] text-primary/55\">\n1336\t            Guide support\n1337\t          </p>\n1338\t          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground lg:text-4xl\">\n1339\t            Tout comprendre sur le {page.eyebrow.toLowerCase()}.\n1340\t          </h2>\n1341\t          <p className=\"mt-6 font-body text-base leading-relaxed text-foreground/68 lg:text-lg\">\n1342\t            {page.seo.intro}\n1343\t          </p>\n1344\t\n1345\t          <div className=\"mt-10 space-y-9\">\n1346\t            {page.seo.sections.map((section) => (\n1347\t              <section key={section.title}>\n1348\t                <h3 className=\"font-satoshi text-2xl font-bold leading-tight text-foreground\">{section.title}</h3>\n1349\t                <p className=\"mt-3 font-body text-base leading-relaxed text-foreground/66\">{section.text}</p>\n1350\t              </section>\n1351\t            ))}\n1352\t          </div>\n1353\t\n1354\t          <div className=\"mt-12 rounded-2xl bg-cream p-6 ring-1 ring-foreground/[0.05]\">\n1355\t            <h3 className=\"font-satoshi text-lg font-bold text-foreground\">Sources</h3>\n1356\t            <ul className=\"mt-4 space-y-2\">\n1357\t              {page.seo.sources.map((source) => (\n1358\t                <li key={source.href}>\n1359\t                  <a href={source.href} className=\"font-body text-sm leading-relaxed text-primary underline-offset-4 hover:underline\" target=\"_blank\" rel=\"noreferrer\">\n1360\t                    {source.label}\n1361\t                  </a>\n1362\t                </li>\n1363\t              ))}\n1364\t            </ul>\n1365\t          </div>\n1366\t        </article>\n1367\t      </ScrollReveal>\n1368\t    </div>\n1369\t  </section>\n1370\t);\n1371\t\n1372\tconst buildFaqSchema = (page: RoofPageData) => ({\n1373\t  '@context': 'https://schema.org',\n1374\t  '@type': 'FAQPage',\n1375\t  mainEntity: page.faq.map((item) => ({\n1376\t    '@type': 'Question',\n1377\t    name: item.q,\n1378\t    acceptedAnswer: {\n1379\t      '@type': 'Answer',\n1380\t      text: item.a,\n1381\t    },\n1382\t  })),\n1383\t});\n1384\t\n1385\tconst buildBreadcrumbSchema = (page: RoofPageData) => ({\n1386\t  '@context': 'https://schema.org',\n1387\t  '@type': 'BreadcrumbList',\n1388\t  itemListElement: [\n1389\t    { '@type': 'ListItem', position: 1, name: 'Accueil', item: SITE_URL },\n1390\t    { '@type': 'ListItem', position: 2, name: 'Toitures', item: `${SITE_URL}/toitures` },\n1391\t    { '@type': 'ListItem', position: 3, name: page.breadcrumb, item: page.canonical },\n1392\t  ],\n1393\t});\n1394\t\n1395\tconst RoofPageTemplate = ({ page }: RoofPageTemplateProps) => {\n1396\t  usePageMeta({\n1397\t    title: page.title,\n1398\t    description: page.description,\n1399\t    canonical: page.canonical,\n1400\t  });\n1401\t  useJsonLd(`roof-${page.slug}-faq`, buildFaqSchema(page));\n1402\t  useJsonLd(`roof-${page.slug}-breadcrumb`, buildBreadcrumbSchema(page));\n1403\t\n1404\t  return (\n1405\t    <>\n1406\t      <Navbar />\n1407\t      <main>\n1408\t        <RoofHero page={page} />\n1409\t        <ProblemSection page={page} />\n1410\t        <SolutionSection page={page} />\n1411\t        <BenefitsSection page={page} />\n1412\t        <ROISection page={page} />\n1413\t        <DiagnosticCTA title={page.midCta.title} text={page.midCta.text} />\n1414\t        <MethodSection page={page} />\n1415\t        <ProofSection page={page} />\n1416\t        <FAQSection faq={page.faq} />\n1417\t        <FinalCTA page={page} />\n1418\t        <SEOContent page={page} />\n1419\t      </main>\n1420\t      <Footer />\n1421\t      <StickyMobileCTA />\n1422\t    </>\n1423\t  );\n1424\t};\n1425\t\n1426\texport default RoofPageTemplate;\n1427\t"}]},"uuid":"e3cee858-cfc7-4363-a4c9-6a5eb571d6cb","timestamp":"2026-06-22T14:54:37.820Z","toolUseResult":{"type":"text","file":{"filePath":"/opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/src/components/roof/RoofPageTemplate.tsx","content":"import { useState } from 'react';\nimport {\n  ArrowRight,\n  BadgeCheck,\n  CalendarClock,\n  CalendarCheck,\n  Check,\n  CheckCircle2,\n  ChevronDown,\n  ClipboardCheck,\n  Factory,\n  HelpCircle,\n  Play,\n  ShieldCheck,\n  ShieldAlert,\n  Sparkles,\n  SunMedium,\n  Thermometer,\n  TrendingDown,\n  Users,\n  Wrench,\n  type LucideIcon,\n} from 'lucide-react';\n\nimport Footer from '@/components/Footer';\nimport Navbar from '@/components/Navbar';\nimport ScrollReveal from '@/components/ScrollReveal';\nimport StickyMobileCTA from '@/components/StickyMobileCTA';\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';\nimport { Dialog, DialogContent } from '@/components/ui/dialog';\nimport { useJsonLd, usePageMeta } from '@/hooks/usePageMeta';\nimport type { RoofPageData } from '@/data/roofPages';\nimport coolRoofLayers from '@/assets/cool-roof-layers.webp';\nimport covaMetalProduct from '@/assets/produits/Covalba-CovaMetal20-Duo-Produit.webp';\nimport covaSealProduct from '@/assets/produits/Covalba-CovaSeal20-Duo-Produit.webp';\nimport covaTherm8Product from '@/assets/produits/Covalba-CovaTherm8-Produit.webp';\nimport covaTherm20Product from '@/assets/produits/Covalba-CovaTherm20-Produit.webp';\n\ninterface RoofPageTemplateProps {\n  page: RoofPageData;\n}\n\nconst SITE_URL = 'https://www.covalba.fr';\n\nconst cardIcons: LucideIcon[] = [SunMedium, Wrench, Factory, ShieldCheck];\nconst methodIcons: LucideIcon[] = [ClipboardCheck, CalendarClock, ShieldCheck, TrendingDown];\nconst proofIcons: LucideIcon[] = [Thermometer, ShieldCheck, BadgeCheck];\nconst problemIcons: LucideIcon[] = [Users, SunMedium, ShieldAlert];\n\nconst logos = [\n  { name: 'Continental', url: '/logos/logo-continental.svg' },\n  { name: 'Thales', url: '/logos/logo-thales.svg' },\n  { name: 'Nestlé', url: '/logos/logo-nestle.svg' },\n  { name: 'SNCF', url: '/logos/logo-sncf.svg' },\n  { name: 'Leclerc', url: '/logos/logo-leclerc.svg' },\n  { name: 'Super U', url: '/logos/logo-super-u.svg' },\n];\n\nconst displayCell = (value: string) => value.replace(/EUR/g, '€').replace(/m2/g, 'm²');\n\nconst formatCurrency = (value: number) =>\n  `${new Intl.NumberFormat('fr-FR', { maximumFractionDigits: 0 }).format(Math.round(value))} €`;\n\nconst parsePricePerM2 = (value: string) => {\n  const match = displayCell(value).match(/\\(([\\d,.]+)\\s*€\\/m²\\)/);\n  if (!match) return null;\n\n  return Number.parseFloat(match[1].replace(',', '.'));\n};\n\nconst getTreatmentRange = (page: RoofPageData, situation: string) => {\n  const text = `${page.slug} ${situation}`.toLowerCase();\n\n  if (text.includes('covaseal') || text.includes('vieillissante') || text.includes('fuite')) {\n    return { min: 28, max: 38, label: 'CovaSeal 20 estimatif' };\n  }\n\n  if (text.includes('covametal') || text.includes('corrosion') || text.includes('tôle')) {\n    return { min: 24, max: 32, label: 'CovaMetal 20 estimatif' };\n  }\n\n  if (text.includes('fibrociment') || text.includes('plaques')) {\n    return { min: 22, max: 28, label: 'CovaTherm support sensible' };\n  }\n\n  return { min: 20, max: 25, label: 'CovaTherm estimatif' };\n};\n\nconst getFallbackPricePerM2 = (option: string, optionIndex: number, treatmentMidpoint: number) => {\n  const lower = option.toLowerCase();\n\n  if (optionIndex === 0) return treatmentMidpoint;\n  if (lower.includes('anticorrosion simple')) return 16;\n  if (lower.includes('remplacement')) return 120;\n  if (lower.includes('membrane neuve')) return 90;\n  if (lower.includes('isolation')) return 150;\n\n  return null;\n};\n\nconst benefitImages = [\n  '/images/toitures/benefit-confort.webp',\n  '/images/toitures/benefit-protection-toiture.webp',\n  '/images/toitures/benefit-clim.webp',\n  '/images/toitures/benefit-chantier-evite.webp',\n];\n\nconst feedbackRoofBenefitImages = [\n  '/images/toitures/feedback-batiment-tempere.png',\n  '/images/toitures/feedback-etancheite.png',\n  '/images/toitures/feedback-economie-clim-1.png',\n  '/images/toitures/feedback-economie-clim-3.png',\n];\n\nconst getBenefitImage = (page: RoofPageData, benefit: TextCard, index: number) => {\n  if (['membrane-bitumineuse', 'toiture-plate'].includes(page.slug)) {\n    return feedbackRoofBenefitImages[index] ?? feedbackRoofBenefitImages[0];\n  }\n\n  const text = `${benefit.title} ${benefit.text}`.toLowerCase();\n\n  if (page.slug === 'bac-acier' && (text.includes('tôle') || text.includes('corrosion'))) {\n    return '/images/toitures/support-bac-acier-cool.webp';\n  }\n\n  if (text.includes('facture') || text.includes('clim') || text.includes('froid')) {\n    return '/images/toitures/benefit-clim.webp';\n  }\n\n  if (text.includes('chantier') || text.includes('réfection') || text.includes('remplacement') || text.includes('dépose')) {\n    return '/images/toitures/benefit-chantier-evite.webp';\n  }\n\n  if (text.includes('protég') || text.includes('étanchéité') || text.includes('corrosion') || text.includes('durée')) {\n    return '/images/toitures/benefit-protection-toiture.webp';\n  }\n\n  return benefitImages[index] ?? benefitImages[0];\n};\n\nconst supportVisuals: Record<string, { hot: string; cool: string; hotLabel: string; coolLabel: string }> = {\n  'membrane-bitumineuse': {\n    hot: '/images/toitures/support-bitume-chaud.webp',\n    cool: '/images/toitures/feedback-economie-clim-2.png',\n    hotLabel: 'Sans cool roof : membrane bitume en absorption',\n    coolLabel: 'Avec cool roof : membrane réfléchissante',\n  },\n  'bac-acier': {\n    hot: '/images/toitures/support-bac-acier-chaud.webp',\n    cool: '/images/toitures/support-bac-acier-cool.webp',\n    hotLabel: 'Sans cool roof : métal en surchauffe',\n    coolLabel: 'Avec cool roof : bac acier réfléchi et protégé',\n  },\n  'toiture-plate': {\n    hot: '/images/toitures/support-toiture-plate-chaud.webp',\n    cool: '/images/toitures/feedback-economie-clim-2.png',\n    hotLabel: 'Sans cool roof : terrasse en absorption',\n    coolLabel: 'Avec cool roof : terrasse réfléchissante',\n  },\n  fibrociment: {\n    hot: '/images/toitures/support-fibrociment-chaud.webp',\n    cool: '/images/toitures/support-fibrociment-cool.webp',\n    hotLabel: 'Sans cool roof : fibrociment en absorption',\n    coolLabel: 'Avec cool roof : plaques protégées',\n  },\n  'tuiles-ciment': {\n    hot: '/images/toitures/support-tuiles-ciment-chaud.webp',\n    cool: '/images/toitures/support-tuiles-ciment-cool.webp',\n    hotLabel: 'Sans cool roof : tuiles qui stockent la chaleur',\n    coolLabel: 'Avec cool roof : tuiles réfléchissantes',\n  },\n};\n\nconst layerTitles = [\"Primaire d'accroche\", 'Résine réfléchissante', 'Vernis de protection'];\n\nconst layerColors = [\n  {\n    pill: 'bg-terracotta text-white',\n    dot: 'bg-terracotta',\n    chevron: 'text-terracotta',\n  },\n  {\n    pill: 'bg-foreground text-white',\n    dot: 'bg-foreground',\n    chevron: 'text-foreground',\n  },\n  {\n    pill: 'bg-primary text-white',\n    dot: 'bg-primary',\n    chevron: 'text-primary',\n  },\n];\n\nconst layerPositions = [\n  { top: '56.7%', left: '36.5%' },\n  { top: '48.2%', left: '36.5%' },\n  { top: '36.3%', left: '35.6%' },\n];\n\nconst getProblemTitle = (title: string) => {\n  const map: Record<string, { strong: string; muted: string }> = {\n    \"Une toiture bitume noire, c'est un radiateur posé sur votre bâtiment.\": {\n      strong: 'Votre toiture chauffe.',\n      muted: 'Votre bâtiment encaisse.',\n    },\n    'Le bac acier chauffe vite, rouille vite, et fatigue vite.': {\n      strong: 'Le métal chauffe vite.',\n      muted: 'La toiture fatigue aussi.',\n    },\n    'À plat, votre toiture prend le soleil toute la journée.': {\n      strong: 'Votre terrasse prend tout.',\n      muted: \"Chaleur, UV, étanchéité.\",\n    },\n    'Le fibrociment chauffe, vieillit, et coûte cher à déposer.': {\n      strong: 'Le fibrociment chauffe.',\n      muted: 'Le déposer coûte cher.',\n    },\n    'Des tuiles ciment foncées, des combles en surchauffe.': {\n      strong: 'Les tuiles stockent la chaleur.',\n      muted: 'Les combles la subissent.',\n    },\n  };\n\n  return map[title] ?? { strong: title, muted: '' };\n};\n\nconst getLayerDescription = (index: number) => {\n  if (index === 0) {\n    return \"S'adapte au support existant. Chaque toiture a sa chimie, chaque chimie demande une préparation et une accroche adaptées.\";\n  }\n\n  if (index === 1) {\n    return \"C'est le coeur du système. La surface réfléchit le rayonnement solaire au lieu de l'absorber, donc la chaleur rentre moins dans le bâtiment.\";\n  }\n\n  return \"Un top coat protège la résine des UV, de la pollution et du vieillissement prématuré pour conserver la performance dans le temps.\";\n};\n\nconst getLayerExpert = (index: number) => {\n  const notes = [\n    \"Un primaire inadapté, c'est un système qui cloque et se décolle. Le support décide de tout.\",\n    \"Le cool roof traite la cause : la toiture chauffe moins, donc le bâtiment reçoit moins de calories.\",\n    \"La différence entre une peinture et un investissement, c'est la tenue dans le temps. La finition est là pour protéger la performance.\",\n  ];\n\n  return notes[index] ?? notes[0];\n};\n\nconst Label = ({ children, light = false }: { children: string; light?: boolean }) => (\n  <div className=\"mb-5 flex items-center gap-3\">\n    <span className={`h-px w-9 ${light ? 'bg-teal-vivid/70' : 'bg-primary/65'}`} aria-hidden=\"true\" />\n    <span\n      className={`font-body text-[11px] font-bold uppercase tracking-[0.22em] ${\n        light ? 'text-teal-vivid' : 'text-primary'\n      }`}\n    >\n      {children}\n    </span>\n  </div>\n);\n\nconst PrimaryCTA = ({ label, href }: { label: string; href: string }) => (\n  <a\n    href={href}\n    className=\"group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white\"\n  >\n    <span className=\"text-sm\">{label}</span>\n    <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5\">\n      <ArrowRight className=\"h-3.5 w-3.5\" />\n    </span>\n  </a>\n);\n\nconst RoofHero = ({ page }: { page: RoofPageData }) => {\n  const [form, setForm] = useState({ climate: '', surface: '', email: '' });\n  const [submitted, setSubmitted] = useState(false);\n  const surfaceNum = parseFloat(form.surface) || 0;\n  const estimate = surfaceNum ? `${new Intl.NumberFormat('fr-FR').format(surfaceNum * 22.5)} €` : '20-25 €/m²';\n\n  return (\n    <section\n      aria-labelledby={`${page.slug}-hero-title`}\n      className=\"relative isolate flex min-h-[100svh] flex-col overflow-hidden bg-navy text-cream\"\n    >\n      <img\n        src={page.heroImage}\n        alt={page.heroImageAlt}\n        className=\"absolute inset-0 -z-10 size-full scale-[1.02] object-cover\"\n        style={page.slug === 'membrane-bitumineuse' ? { objectPosition: 'center 28%' } : undefined}\n        loading=\"eager\"\n        decoding=\"async\"\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute inset-0 -z-10 hidden bg-gradient-to-r from-navy/[0.94] via-navy/62 to-navy/25 lg:block\"\n      />\n      <div\n        aria-hidden=\"true\"\n        className={`absolute inset-0 -z-10 bg-gradient-to-b lg:hidden ${\n          page.slug === 'membrane-bitumineuse'\n            ? 'from-navy/92 via-navy/58 to-navy/96'\n            : 'from-navy/84 via-navy/38 to-navy/96'\n        }`}\n      />\n      <div aria-hidden=\"true\" className=\"absolute inset-x-0 bottom-0 -z-10 h-[28%] bg-gradient-to-t from-navy via-navy/85 to-transparent\" />\n\n      <div className=\"container relative z-10 mx-auto flex flex-1 items-center px-6 pb-10 pt-24 lg:px-12 lg:pb-16 lg:pt-28\">\n        <div className=\"grid w-full grid-cols-1 items-center gap-10 lg:grid-cols-[55fr_45fr] lg:gap-12\">\n          <div className=\"max-w-2xl space-y-6 lg:space-y-8\">\n            <ScrollReveal>\n              <nav className=\"flex items-center gap-2 font-body text-xs text-cream/50\">\n                <a href=\"/\" className=\"transition-colors hover:text-cream/75\">Accueil</a>\n                <span className=\"text-cream/28\">/</span>\n                <span>Toitures</span>\n                <span className=\"text-cream/28\">/</span>\n                <span className=\"text-cream/78\">{page.breadcrumb}</span>\n              </nav>\n            </ScrollReveal>\n\n            <ScrollReveal>\n              <h1\n                id={`${page.slug}-hero-title`}\n                className=\"font-satoshi font-bold leading-[1.02] text-white\"\n                style={{ fontSize: 'clamp(2.25rem, 4.6vw, 4rem)', letterSpacing: '-0.03em' }}\n              >\n                {page.h1}\n              </h1>\n            </ScrollReveal>\n\n            <ScrollReveal>\n              <p\n                className=\"max-w-xl font-satoshi font-medium leading-[1.3] text-cream/66\"\n                style={{ fontSize: 'clamp(1rem, 1.5vw, 1.375rem)', letterSpacing: '-0.005em' }}\n              >\n                {page.lead}\n              </p>\n            </ScrollReveal>\n\n            <ScrollReveal>\n              <ul className=\"hidden gap-4 pt-1 sm:flex sm:flex-wrap lg:gap-6\" aria-label=\"Bénéfices clés\">\n                {page.heroStats.map((stat, index) => {\n                  const Icon = [Thermometer, ShieldCheck, TrendingDown][index] ?? BadgeCheck;\n                  return (\n                    <li\n                      key={stat.label}\n                      className={`flex items-start gap-3 ${index !== 0 ? 'sm:border-l sm:border-white/10 sm:pl-6' : ''}`}\n                    >\n                      <Icon className=\"mt-0.5 h-[18px] w-[18px] shrink-0 text-teal-vivid\" strokeWidth={1.5} />\n                      <div className=\"leading-tight\">\n                        <p className=\"font-satoshi text-[15px] font-bold text-white lg:text-base\">{stat.value}</p>\n                        <p className=\"mt-1 font-body text-[12.5px] text-cream/55 lg:text-[13px]\">{stat.label}</p>\n                      </div>\n                    </li>\n                  );\n                })}\n              </ul>\n            </ScrollReveal>\n          </div>\n\n          <ScrollReveal>\n            <div className=\"rounded-[1.5rem] border border-white/[0.08] bg-white/[0.04] p-1.5 backdrop-blur-sm\">\n              <div className=\"rounded-[calc(1.5rem-6px)] border border-white/[0.06] bg-[#0b1a2b]/80 p-4 shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)] backdrop-blur-xl lg:p-7\">\n                {!submitted ? (\n                  <>\n                    <h2 className=\"mb-1 text-center font-satoshi text-xl font-bold text-white lg:text-2xl\">\n                      Estimez le gain possible\n                    </h2>\n                    <p className=\"mb-4 text-center font-body text-[12px] text-white/50\">\n                      Réponse personnalisée sous 24h\n                    </p>\n                    <form\n                      onSubmit={(event) => {\n                        event.preventDefault();\n                        setSubmitted(true);\n                      }}\n                      className=\"space-y-2.5 lg:space-y-3\"\n                    >\n                      <input\n                        value={page.breadcrumb}\n                        readOnly\n                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white outline-none\"\n                      />\n                      <select\n                        required\n                        value={form.climate}\n                        onChange={(e) => setForm({ ...form, climate: e.target.value })}\n                        className=\"w-full appearance-none rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n                      >\n                        <option value=\"\" disabled className=\"bg-card text-foreground\">Bâtiment climatisé ?</option>\n                        {['Oui', 'Non', 'Partiellement', 'À confirmer'].map((option) => (\n                          <option key={option} value={option} className=\"bg-card text-foreground\">{option}</option>\n                        ))}\n                      </select>\n                      <input\n                        type=\"number\"\n                        placeholder=\"Surface toiture (m²)\"\n                        required\n                        min=\"1\"\n                        value={form.surface}\n                        onChange={(e) => setForm({ ...form, surface: e.target.value })}\n                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n                      />\n                      <input\n                        type=\"email\"\n                        placeholder=\"Email professionnel\"\n                        required\n                        value={form.email}\n                        onChange={(e) => setForm({ ...form, email: e.target.value })}\n                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n                      />\n\n                      <button\n                        type=\"submit\"\n                        className=\"group mt-1 flex w-full items-center justify-center gap-3 rounded-full cta-gradient py-3 font-semibold text-white active:scale-[0.98]\"\n                      >\n                        <span className=\"text-[15px]\">Voir mon potentiel</span>\n                        <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5\">\n                          <ArrowRight className=\"h-4 w-4\" />\n                        </span>\n                      </button>\n                    </form>\n\n                    <p className=\"mt-3 text-center font-body text-[11px] text-white/35\">\n                      Sans engagement · Étude adaptée au support\n                    </p>\n                  </>\n                ) : (\n                  <div className=\"py-4 text-center\">\n                    <div className=\"mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/20\">\n                      <ShieldCheck className=\"h-6 w-6 text-primary\" />\n                    </div>\n                    <p className=\"mb-1 font-body text-sm text-white/60\">Base indicative pour {new Intl.NumberFormat('fr-FR').format(surfaceNum)} m²</p>\n                    <p className=\"mb-4 font-satoshi text-2xl font-bold text-white\">{estimate}</p>\n                    <p className=\"mb-4 font-body text-[13px] text-white/50\">\n                      Un conseiller affine le chiffrage selon l'état réel de la toiture.\n                    </p>\n                    <button onClick={() => setSubmitted(false)} className=\"font-body text-sm font-semibold text-primary hover:underline\">\n                      Modifier ma demande\n                    </button>\n                  </div>\n                )}\n              </div>\n            </div>\n          </ScrollReveal>\n        </div>\n      </div>\n\n      <div className=\"relative z-10 hidden border-t border-white/10 bg-navy/78 backdrop-blur-md lg:block\">\n        <div className=\"container mx-auto flex items-center gap-8 px-12 py-5\">\n          <p className=\"shrink-0 font-body text-[10px] font-semibold uppercase tracking-[0.24em] text-cream/45\">\n            Ils nous font confiance\n          </p>\n          <div className=\"flex flex-1 items-center justify-between gap-8\">\n            {logos.map((logo) => (\n              <span key={logo.name} className=\"flex h-8 w-28 items-center justify-center\">\n                <img\n                  src={logo.url}\n                  alt={logo.name}\n                  className=\"max-h-7 max-w-full object-contain opacity-65 brightness-0 invert transition-opacity duration-300 hover:opacity-95\"\n                  loading=\"eager\"\n                  decoding=\"async\"\n                />\n              </span>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst ProblemSection = ({ page }: { page: RoofPageData }) => {\n  const title = getProblemTitle(page.problem.title);\n  const visual = supportVisuals[page.slug] ?? supportVisuals['membrane-bitumineuse'];\n\n  return (\n    <section className=\"relative overflow-hidden bg-cream py-16 lg:py-36\">\n      <div className=\"container relative mx-auto px-4 lg:px-8\">\n        <ScrollReveal>\n          <div className=\"mx-auto mb-14 max-w-3xl text-center lg:mb-20\">\n            <h2\n              className=\"font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n              style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n            >\n              {title.strong}\n              {title.muted && <span className=\"text-foreground/30\"> {title.muted}</span>}\n            </h2>\n          </div>\n        </ScrollReveal>\n\n        <div className=\"grid grid-cols-1 items-center gap-12 lg:grid-cols-12 lg:gap-16\">\n          <div className=\"order-2 lg:order-1 lg:col-span-5\">\n            <ScrollReveal>\n              <div className=\"relative\">\n                <div className=\"pointer-events-none absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_hsl(var(--terracotta)/0.18)_0%,_transparent_65%)] blur-2xl\" />\n                <div className=\"relative aspect-square overflow-hidden rounded-[2rem] bg-white shadow-[0_30px_80px_-15px_hsl(var(--terracotta-dark)/0.25),_0_10px_30px_-5px_hsl(var(--terracotta)/0.12)]\">\n                  <img\n                    src={visual.hot}\n                    alt=\"\"\n                    className=\"h-full w-full object-contain p-4\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                </div>\n              </div>\n              <p className=\"mt-4 text-center font-body text-[11px] uppercase tracking-wide text-terracotta/60\">\n                {visual.hotLabel}\n              </p>\n            </ScrollReveal>\n          </div>\n\n          <div className=\"order-1 lg:order-2 lg:col-span-7 lg:pl-12\">\n            <ScrollReveal stagger>\n              <div\n                className=\"space-y-8 border-l-2 pl-8 lg:space-y-10 lg:pl-10\"\n                style={{ borderImage: 'linear-gradient(to bottom, hsl(var(--terracotta)), hsl(var(--terracotta-dark))) 1' }}\n              >\n                {page.problem.cards.map((card, index) => {\n                  const Icon = problemIcons[index] ?? HelpCircle;\n                  return (\n                    <div key={card.title}>\n                      <div className=\"mb-2 flex items-center gap-3\">\n                        <Icon className=\"h-5 w-5 text-terracotta\" strokeWidth={1.8} />\n                        <h3\n                          className=\"font-satoshi text-xl font-bold text-foreground lg:text-2xl\"\n                          style={{ letterSpacing: '-0.02em', lineHeight: 1.2 }}\n                        >\n                          {card.title}\n                        </h3>\n                      </div>\n                      <p className=\"font-body text-base leading-relaxed text-foreground/55\">{card.text}</p>\n                    </div>\n                  );\n                })}\n              </div>\n            </ScrollReveal>\n          </div>\n        </div>\n\n        <div className=\"mt-20 grid grid-cols-1 items-center gap-12 lg:mt-28 lg:grid-cols-12 lg:gap-16\">\n          <div className=\"order-2 lg:order-2 lg:col-span-5\">\n            <ScrollReveal>\n              <div className=\"relative\">\n                <div className=\"pointer-events-none absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_rgba(32,150,140,0.18)_0%,_transparent_65%)] blur-2xl\" />\n                <div className=\"relative aspect-square overflow-hidden rounded-[2rem] bg-white shadow-[0_30px_80px_-15px_rgba(20,120,110,0.20),_0_10px_30px_-5px_rgba(32,150,140,0.10)]\">\n                  <img\n                    src={visual.cool}\n                    alt=\"\"\n                    className=\"h-full w-full object-contain p-4\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                </div>\n              </div>\n              <p className=\"mt-4 text-center font-body text-[11px] uppercase tracking-wide text-primary/60\">\n                {visual.coolLabel}\n              </p>\n            </ScrollReveal>\n          </div>\n\n          <div className=\"order-1 lg:order-1 lg:col-span-7 lg:pr-12\">\n            <ScrollReveal>\n              <h3\n                className=\"mb-8 max-w-xl font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n              >\n                Le cool roof : une réponse concrète\n                <span className=\"text-foreground/30\"> au problème de chaleur.</span>\n              </h3>\n              <p className=\"mb-8 max-w-lg font-body text-base leading-relaxed text-foreground/50\">\n                Une surface claire renvoie le rayonnement solaire avant qu'il ne pénètre dans le bâtiment. La toiture chauffe moins, les derniers niveaux respirent, et le support subit moins d'UV et de chocs thermiques.\n              </p>\n              <PrimaryCTA label=\"Demander un devis\" href=\"/diagnostic\" />\n            </ScrollReveal>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst SolutionSection = ({ page }: { page: RoofPageData }) => {\n  const [active, setActive] = useState(0);\n\n  return (\n    <section className=\"relative bg-white\">\n      <div className=\"container mx-auto px-4 lg:px-8\">\n        <ScrollReveal>\n          <div className=\"flex flex-col gap-8 pb-10 pt-16 lg:flex-row lg:items-end lg:gap-16 lg:pb-16 lg:pt-32\">\n            <div className=\"lg:w-2/3\">\n              <p className=\"mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-muted-foreground\">\n                {page.solution.badge}\n              </p>\n              <h2\n                className=\"font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n              >\n                <span className=\"text-foreground/30\">Un système conçu pour </span>\n                réfléchir, protéger et durer.\n              </h2>\n            </div>\n            <div className=\"lg:w-1/3 lg:pb-1\">\n              <p className=\"font-body text-base leading-relaxed text-foreground/52 lg:text-right lg:text-lg\">\n                Un primaire, une résine, un vernis qui garantissent la performance de votre toiture dans le temps.\n              </p>\n              <div className=\"mt-5 flex lg:justify-end\">\n                <PrimaryCTA label=\"Demander un devis\" href=\"/diagnostic\" />\n              </div>\n            </div>\n          </div>\n        </ScrollReveal>\n\n        <div className=\"flex flex-col gap-12 pb-24 lg:flex-row lg:gap-16 lg:pb-32\">\n          <div className=\"overflow-hidden rounded-2xl shadow-[0_20px_60px_-15px_rgba(0,0,0,0.08)] lg:hidden\">\n            <img src={coolRoofLayers} alt=\"Coupe du système cool roof Covalba\" className=\"w-full\" loading=\"lazy\" />\n          </div>\n\n          <div className=\"lg:w-1/2 lg:sticky lg:top-[20vh] lg:self-start\">\n            {layerTitles.map((item, index) => {\n              const isOpen = active === index;\n              const colors = layerColors[index] ?? layerColors[0];\n              return (\n                <div key={item} className=\"border-b border-border last:border-b-0\">\n                  <button\n                    onClick={() => setActive(index)}\n                    className=\"group flex w-full items-center gap-4 py-6 text-left\"\n                  >\n                    <span\n                      className={`inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-body text-[11px] font-bold transition-all duration-300 ${\n                        isOpen ? colors.pill : 'bg-muted text-muted-foreground'\n                      }`}\n                    >\n                      0{index + 1}\n                    </span>\n                    <h3\n                      className={`flex-1 font-satoshi text-xl font-bold transition-colors duration-300 lg:text-2xl ${\n                        isOpen ? 'text-foreground' : 'text-foreground/50 group-hover:text-foreground/80'\n                      }`}\n                    >\n                      {item}\n                    </h3>\n                    <ChevronDown\n                      className={`h-5 w-5 shrink-0 transition-all duration-300 ${\n                        isOpen ? `${colors.chevron} rotate-180` : 'text-foreground/25'\n                      }`}\n                      strokeWidth={2}\n                    />\n                  </button>\n\n                  <div\n                    className={`grid transition-all duration-500 ${\n                      isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'\n                    }`}\n                  >\n                    <div className=\"overflow-hidden\">\n                      <div className=\"pb-8 pl-6 lg:pl-12\">\n                        <p className=\"mb-6 font-body text-base leading-relaxed text-foreground/65 lg:text-lg\">\n                          {getLayerDescription(index)}\n                        </p>\n                        <div className=\"flex items-start gap-3 rounded-xl bg-foreground/[0.03] p-4\">\n                          <img\n                            src=\"/maxime-bourassin.jpg\"\n                            alt=\"Maxime Bourassin, fondateur Covalba\"\n                            className=\"mt-0.5 h-9 w-9 shrink-0 rounded-full object-cover\"\n                          />\n                          <div>\n                            <p className=\"font-body text-[15px] italic leading-relaxed text-foreground/65 lg:text-base\">\n                              \"{getLayerExpert(index)}\"\n                            </p>\n                            <p className=\"mt-2 font-body text-xs font-semibold text-foreground/50\">\n                              Maxime Bourassin, fondateur\n                            </p>\n                          </div>\n                        </div>\n                        {index === 0 && page.solution.note && (\n                          <p className=\"mt-4 rounded-xl bg-primary/5 p-4 font-body text-sm leading-relaxed text-foreground/62\">\n                            {page.solution.note}\n                          </p>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n\n          <div className=\"hidden lg:block lg:w-1/2\">\n            <div className=\"relative overflow-hidden rounded-2xl shadow-[0_30px_80px_-15px_rgba(0,0,0,0.08)]\">\n              <img src={coolRoofLayers} alt=\"Coupe du système cool roof Covalba\" className=\"w-full\" loading=\"lazy\" />\n              {layerTitles.map((item, index) => {\n                const pos = layerPositions[index];\n                const colors = layerColors[index] ?? layerColors[0];\n                const isActive = active === index;\n                if (!pos) return null;\n\n                return (\n                  <div key={item} className=\"absolute\" style={{ top: pos.top, left: pos.left }}>\n                    <div\n                      className={`absolute -translate-x-1/2 -translate-y-1/2 transition-all duration-500 ${\n                        isActive ? 'scale-125' : 'scale-75 opacity-40'\n                      }`}\n                    >\n                      <div\n                        className={`h-3.5 w-3.5 rounded-full ${\n                          isActive ? colors.dot : 'bg-foreground/20'\n                        } shadow-lg ring-2 ring-white transition-colors duration-500`}\n                      />\n                      {isActive && (\n                        <div className={`absolute inset-0 h-3.5 w-3.5 animate-ping rounded-full ${colors.dot} opacity-30`} />\n                      )}\n                    </div>\n                    <div\n                      className={`pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 transition-all duration-500 ${\n                        isActive ? 'translate-x-0 opacity-100' : 'translate-x-2 opacity-0'\n                      }`}\n                    >\n                      <span className={`whitespace-nowrap rounded-full px-4 py-1.5 font-body text-[13px] font-bold shadow-lg ${colors.pill}`}>\n                        {item}\n                      </span>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst BenefitsSection = ({ page }: { page: RoofPageData }) => (\n  <section className=\"bg-white py-20 lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mb-10 grid gap-8 lg:grid-cols-[0.82fr_1.18fr] lg:items-end lg:gap-14\">\n          <div>\n            <Label>{page.benefits.badge}</Label>\n            <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl\">\n              {page.benefits.title}\n            </h2>\n          </div>\n          <p className=\"max-w-xl border-l border-primary/30 pl-6 font-body text-base leading-relaxed text-foreground/62 lg:text-lg\">\n            {page.benefits.featured}\n          </p>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal stagger>\n        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          {page.benefits.cards.map((benefit, index) => {\n            const Icon = cardIcons[index] ?? Sparkles;\n            return (\n              <article\n                key={benefit.title}\n                className=\"group overflow-hidden rounded-2xl bg-cream ring-1 ring-foreground/[0.05] transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_24px_70px_-48px_hsl(var(--navy)/0.45)]\"\n              >\n                <div className=\"relative aspect-[4/3] overflow-hidden bg-foreground/[0.04]\">\n                  <img\n                    src={getBenefitImage(page, benefit, index)}\n                    alt=\"\"\n                    className=\"h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.035]\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                  <div className=\"absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-cream to-transparent\" />\n                </div>\n                <div className=\"p-5 lg:p-6\">\n                  <div className=\"mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-white text-primary shadow-[0_12px_30px_-24px_hsl(var(--navy)/0.35)]\">\n                    <Icon className=\"h-5 w-5\" strokeWidth={1.7} />\n                  </div>\n                  <h3 className=\"font-satoshi text-lg font-bold leading-tight text-foreground\">{benefit.title}</h3>\n                  <p className=\"mt-2 font-body text-sm leading-relaxed text-foreground/62\">{benefit.text}</p>\n                </div>\n              </article>\n            );\n          })}\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst RoiOptionCards = ({\n  page,\n  surface,\n  treatmentRange,\n}: {\n  page: RoofPageData;\n  surface: number;\n  treatmentRange: ReturnType<typeof getTreatmentRange>;\n}) => {\n  if (!page.roi.comparison) {\n    return page.roi.afterComparison ? (\n      <article className=\"rounded-2xl bg-white p-6 ring-1 ring-foreground/[0.06] lg:p-8\">\n        <p className=\"font-body text-base leading-relaxed text-foreground/66 lg:text-lg\">\n          {page.roi.afterComparison}\n        </p>\n      </article>\n    ) : null;\n  }\n\n  const options = page.roi.comparison.headers.slice(1);\n  const rows = page.roi.comparison.rows;\n  const investment = rows.find((row) => row[0].toLowerCase().includes('investissement'));\n  const duration = rows.find((row) => row[0].toLowerCase().includes('dur'));\n  const activity = rows.find((row) => row[0].toLowerCase().includes('activ'));\n  const treatmentMidpoint = (treatmentRange.min + treatmentRange.max) / 2;\n\n  return (\n    <div className=\"grid gap-4 lg:grid-cols-3\">\n      {options.map((option, optionIndex) => {\n        const isCovalba = optionIndex === 0;\n        const rawInvestment = investment?.[optionIndex + 1] ?? '';\n        const parsedPrice = parsePricePerM2(rawInvestment);\n        const pricePerM2 = parsedPrice ?? getFallbackPricePerM2(option, optionIndex, treatmentMidpoint);\n        const dynamicInvestment = pricePerM2 ? `~${formatCurrency(surface * pricePerM2)}` : displayCell(rawInvestment);\n\n        return (\n          <article\n            key={option}\n            className={`rounded-2xl p-6 ring-1 ${\n              isCovalba\n                ? 'bg-[#142333] text-white ring-transparent'\n                : 'bg-white text-foreground ring-foreground/[0.06]'\n            }`}\n          >\n            <div className=\"mb-6 flex items-start justify-between gap-4\">\n              <h3 className=\"font-satoshi text-xl font-black leading-tight\">{option}</h3>\n              {isCovalba && (\n                <span className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-teal-vivid/15 text-teal-vivid\">\n                  <Check className=\"h-4 w-4\" strokeWidth={2.4} />\n                </span>\n              )}\n            </div>\n            <p className={`font-satoshi text-3xl font-black leading-none ${isCovalba ? 'text-teal-vivid' : 'text-terracotta'}`}>\n              {dynamicInvestment}\n            </p>\n            {pricePerM2 && (\n              <p className={`mt-2 font-body text-xs font-semibold ${isCovalba ? 'text-white/45' : 'text-foreground/40'}`}>\n                base {new Intl.NumberFormat('fr-FR').format(surface)} m² · {pricePerM2.toLocaleString('fr-FR')} €/m²\n              </p>\n            )}\n            <dl className=\"mt-6 space-y-3 border-t border-current/10 pt-5\">\n              {[duration, activity].filter(Boolean).map((row) => (\n                <div key={row![0]} className=\"grid grid-cols-[0.75fr_1fr] gap-4\">\n                  <dt className={`font-body text-xs font-bold uppercase tracking-[0.14em] ${isCovalba ? 'text-white/38' : 'text-foreground/35'}`}>\n                    {displayCell(row![0])}\n                  </dt>\n                  <dd className={`font-body text-sm leading-relaxed ${isCovalba ? 'text-white/74' : 'text-foreground/62'}`}>\n                    {displayCell(row![optionIndex + 1])}\n                  </dd>\n                </div>\n              ))}\n            </dl>\n          </article>\n        );\n      })}\n    </div>\n  );\n};\n\nconst ROICalculator = ({\n  page,\n  surface,\n  selectedSituation,\n  treatmentRange,\n  onSurfaceChange,\n  onSituationChange,\n}: {\n  page: RoofPageData;\n  surface: number;\n  selectedSituation: string;\n  treatmentRange: ReturnType<typeof getTreatmentRange>;\n  onSurfaceChange: (surface: number) => void;\n  onSituationChange: (situation: string) => void;\n}) => {\n  const treatmentLow = surface * treatmentRange.min;\n  const treatmentHigh = surface * treatmentRange.max;\n  const referencePrice = selectedSituation.toLowerCase().includes('isolation') ? 150 : 90;\n  const referenceCost = surface * referencePrice;\n  const potentialGap = Math.max(referenceCost - treatmentHigh, 0);\n\n  return (\n    <div className=\"mb-10 rounded-[2rem] bg-[#142333] p-5 text-white shadow-[0_34px_90px_-64px_hsl(var(--navy)/0.65)] lg:p-8\">\n      <div className=\"grid gap-7 lg:grid-cols-[0.88fr_1.12fr] lg:items-end\">\n        <div>\n          <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-teal-vivid/70\">\n            Calculateur indicatif\n          </p>\n          <h3 className=\"mt-4 max-w-lg font-satoshi text-2xl font-black leading-tight lg:text-3xl\">\n            Ajustez la surface et l'état de la toiture.\n          </h3>\n          <p className=\"mt-3 max-w-lg font-body text-sm leading-relaxed text-white/52\">\n            Par défaut : 5 000 m², surface type d'un entrepôt ou bâtiment industriel à traiter.\n          </p>\n        </div>\n\n        <div className=\"grid gap-3 sm:grid-cols-[0.72fr_1.28fr]\">\n          <label className=\"block\">\n            <span className=\"mb-2 block font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/40\">\n              Surface\n            </span>\n            <input\n              type=\"number\"\n              min={100}\n              step={100}\n              value={surface}\n              onChange={(event) => onSurfaceChange(Math.max(100, Number(event.target.value) || 100))}\n              className=\"h-12 w-full rounded-xl border border-white/10 bg-white/[0.07] px-4 font-body text-sm font-semibold text-white outline-none transition focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20\"\n              aria-label=\"Surface à traiter en mètres carrés\"\n            />\n          </label>\n          <label className=\"block\">\n            <span className=\"mb-2 block font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/40\">\n              Situation\n            </span>\n            <select\n              value={selectedSituation}\n              onChange={(event) => onSituationChange(event.target.value)}\n              className=\"h-12 w-full rounded-xl border border-white/10 bg-white/[0.07] px-4 font-body text-sm font-semibold text-white outline-none transition focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20\"\n              aria-label=\"Situation de la toiture\"\n            >\n              {page.roi.situation.rows.map((row) => (\n                <option key={row[0]} value={row[0]} className=\"bg-card text-foreground\">\n                  {row[0]}\n                </option>\n              ))}\n            </select>\n          </label>\n        </div>\n      </div>\n\n      <div className=\"mt-7 grid gap-3 md:grid-cols-3\">\n        {[\n          {\n            label: treatmentRange.label,\n            value: `${formatCurrency(treatmentLow)} - ${formatCurrency(treatmentHigh)}`,\n            detail: `${treatmentRange.min}-${treatmentRange.max} €/m² selon préparation`,\n            valueClass: 'text-teal-vivid',\n          },\n          {\n            label: 'Réfection de référence',\n            value: `~${formatCurrency(referenceCost)}`,\n            detail: `${referencePrice} €/m², ordre de grandeur à comparer`,\n            valueClass: 'text-terracotta',\n          },\n          {\n            label: 'Écart potentiel',\n            value: `jusqu'à ${formatCurrency(potentialGap)}`,\n            detail: \"Investissement lourd évité ou repoussé si le support est viable\",\n            valueClass: 'text-teal-vivid',\n          },\n        ].map((item) => (\n          <article key={item.label} className=\"rounded-2xl bg-white/[0.07] p-5 ring-1 ring-white/10\">\n            <p className=\"font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/38\">{item.label}</p>\n            <p className={`mt-3 font-satoshi text-2xl font-black leading-tight ${item.valueClass}`}>{item.value}</p>\n            <p className=\"mt-2 font-body text-xs leading-relaxed text-white/45\">{item.detail}</p>\n          </article>\n        ))}\n      </div>\n      <p className=\"mt-4 font-body text-xs leading-relaxed text-white/38\">\n        Chiffrage indicatif : l'étude ajuste le prix selon l'accès, la préparation, les points singuliers et l'état réel du support.\n      </p>\n    </div>\n  );\n};\n\nconst getSituationImage = (recommendation: string) => {\n  const lower = recommendation.toLowerCase();\n  if (lower.includes('covametal')) return covaMetalProduct;\n  if (lower.includes('covaseal')) return covaSealProduct;\n  if (lower.includes('cova')) return covaTherm20Product;\n  return covaTherm8Product;\n};\n\nconst SituationCards = ({ rows }: { rows: string[][] }) => (\n  <div className=\"grid gap-4 md:grid-cols-2\">\n    {rows.map((row) => (\n      <article key={row[0]} className=\"grid gap-4 rounded-2xl bg-white p-4 ring-1 ring-foreground/[0.06] sm:grid-cols-[128px_1fr] lg:grid-cols-[190px_1fr] lg:gap-5 lg:p-5\">\n        <div className=\"flex aspect-[4/3] items-center justify-center rounded-xl bg-gradient-to-br from-cream to-white p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.75),_0_18px_44px_-34px_hsl(var(--navy)/0.45)] ring-1 ring-foreground/[0.04] sm:aspect-square lg:p-6\">\n          <img src={getSituationImage(row[1])} alt=\"\" className=\"max-h-full max-w-full object-contain\" loading=\"lazy\" decoding=\"async\" />\n        </div>\n        <div className=\"self-center\">\n          <p className=\"font-satoshi text-lg font-bold leading-tight text-foreground\">{row[0]}</p>\n          <p className=\"mt-2 font-body text-sm font-bold text-primary\">{row[1]}</p>\n          <p className=\"mt-2 font-body text-sm leading-relaxed text-foreground/58\">{row[2]}</p>\n        </div>\n      </article>\n    ))}\n  </div>\n);\n\nconst ROISection = ({ page }: { page: RoofPageData }) => {\n  const [surface, setSurface] = useState(5000);\n  const [selectedSituation, setSelectedSituation] = useState(page.roi.situation.rows[0]?.[0] ?? '');\n  const treatmentRange = getTreatmentRange(page, selectedSituation);\n\n  return (\n    <section className=\"bg-cream py-20 lg:py-32\">\n      <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mx-auto mb-12 max-w-3xl text-center lg:mb-16\">\n          <div className=\"flex justify-center\">\n            <Label>{page.roi.badge}</Label>\n          </div>\n          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-[3rem]\">\n            {page.roi.title}\n          </h2>\n          <p className=\"mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-foreground/58 lg:text-lg\">\n            {page.roi.intro}\n          </p>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mb-12 grid gap-4 md:grid-cols-3\">\n          {[\n            ['20-25 €/m²', 'pour traiter et rafraîchir'],\n            ['8-10 ans', 'de réfection repoussée'],\n            ['0 arrêt', \"d'activité pendant le chantier\"],\n          ].map(([value, label]) => (\n            <article key={value} className=\"rounded-2xl bg-white p-6 text-center ring-1 ring-foreground/[0.06]\">\n              <p className=\"font-satoshi text-4xl font-black leading-none text-primary\">{value}</p>\n              <p className=\"mt-3 font-body text-sm font-semibold text-foreground/52\">{label}</p>\n            </article>\n          ))}\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mb-8 max-w-2xl\">\n          <div>\n            <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55\">\n              Comparer les options\n            </p>\n            <h3 className=\"mt-4 font-satoshi text-2xl font-black leading-tight text-foreground lg:text-3xl\">\n              Une lecture rapide du budget.\n            </h3>\n          </div>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <ROICalculator\n          page={page}\n          surface={surface}\n          selectedSituation={selectedSituation}\n          treatmentRange={treatmentRange}\n          onSurfaceChange={setSurface}\n          onSituationChange={setSelectedSituation}\n        />\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <RoiOptionCards page={page} surface={surface} treatmentRange={treatmentRange} />\n        {page.roi.comparison && page.roi.afterComparison && (\n          <p className=\"mt-5 max-w-3xl font-body text-sm leading-relaxed text-foreground/52 lg:text-base\">\n            {page.roi.afterComparison}\n          </p>\n        )}\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mt-16 rounded-[2rem] bg-white p-5 ring-1 ring-foreground/[0.06] lg:mt-20 lg:p-8\">\n          <div className=\"mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between\">\n            <div>\n              <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55\">\n                Décider selon l'état réel\n              </p>\n              <h3 className=\"mt-4 max-w-xl font-satoshi text-2xl font-black leading-tight text-foreground lg:text-3xl\">\n                Quelle solution pour votre toiture ?\n              </h3>\n            </div>\n            <PrimaryCTA label={page.roi.cta} href=\"/diagnostic\" />\n          </div>\n          <SituationCards rows={page.roi.situation.rows} />\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n  );\n};\n\nconst DiagnosticCTA = ({ title, text }: { title: string; text: string }) => (\n  <section className=\"relative overflow-hidden bg-[#182A3A] py-14 text-white lg:py-20\">\n    <div\n      aria-hidden=\"true\"\n      className=\"absolute inset-0 opacity-35\"\n      style={{\n        backgroundImage:\n          'radial-gradient(circle at 16% 20%, rgba(83, 207, 166, 0.22), transparent 28%), linear-gradient(115deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 120px)',\n      }}\n    />\n    <div className=\"container relative mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mx-auto grid max-w-5xl gap-7 lg:grid-cols-[1fr_auto] lg:items-center\">\n          <div>\n            <h2 className=\"font-satoshi text-2xl font-black leading-tight lg:text-4xl\">{title}</h2>\n            <p className=\"mt-3 max-w-2xl font-body text-sm leading-relaxed text-white/68 lg:text-base\">{text}</p>\n          </div>\n          <div className=\"flex flex-col gap-3 sm:flex-row lg:justify-end\">\n            <PrimaryCTA label=\"Demander un devis\" href=\"/diagnostic\" />\n          </div>\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst MethodSection = ({ page }: { page: RoofPageData }) => {\n  const [videoOpen, setVideoOpen] = useState(false);\n\n  return (\n    <section className=\"bg-white py-16 lg:py-32\">\n      <div className=\"container mx-auto px-4 lg:px-8\">\n        <div className=\"flex flex-col items-start gap-12 lg:flex-row lg:gap-20\">\n          <div className=\"lg:sticky lg:top-[120px] lg:w-[40%]\">\n            <ScrollReveal>\n              <p className=\"mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/50\">\n                Le process\n              </p>\n              <h2\n                className=\"mb-6 font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n              >\n                4 étapes. Zéro interruption.\n                <span className=\"text-foreground/30\"> Zéro risque.</span>\n              </h2>\n              <p className=\"mb-8 font-body text-base leading-relaxed text-muted-foreground lg:text-lg\">\n                {page.method.reassurance}\n              </p>\n              <button\n                onClick={() => setVideoOpen(true)}\n                className=\"group flex items-center gap-3 text-primary transition-colors hover:text-primary\"\n              >\n                <span className=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 transition-colors group-hover:bg-primary/20\">\n                  <Play className=\"h-5 w-5\" />\n                </span>\n                <span className=\"font-body text-sm font-semibold\">Voir un chantier en 2 minutes</span>\n              </button>\n            </ScrollReveal>\n          </div>\n\n          <div className=\"relative lg:w-[60%]\">\n            <div className=\"absolute bottom-4 left-5 top-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent lg:left-6\" />\n            <div className=\"flex flex-col\">\n              {page.method.steps.map((step, index) => {\n                const Icon = methodIcons[index] ?? CheckCircle2;\n                return (\n                  <ScrollReveal key={step.title}>\n                    <div className=\"group relative flex items-start gap-5 py-8 lg:gap-7 lg:py-10\">\n                      <span className=\"relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-primary/10 transition-colors duration-500 group-hover:bg-primary/15 lg:h-12 lg:w-12\">\n                        <Icon className=\"h-4 w-4 text-primary lg:h-5 lg:w-5\" />\n                      </span>\n                      <div className=\"pt-1\">\n                        <span className=\"mb-2 block font-body text-xs font-bold uppercase tracking-widest text-primary/50\">\n                          Étape 0{index + 1}\n                        </span>\n                        <h3 className=\"mb-2 font-satoshi text-xl font-bold text-foreground lg:text-2xl\">\n                          {step.title}\n                        </h3>\n                        <p className=\"max-w-md font-body text-sm leading-relaxed text-muted-foreground lg:text-base\">\n                          {step.text}\n                        </p>\n                      </div>\n                    </div>\n                    {index < page.method.steps.length - 1 && <div className=\"ml-5 h-px bg-border lg:ml-6\" />}\n                  </ScrollReveal>\n                );\n              })}\n            </div>\n\n            <ScrollReveal>\n              <div className=\"ml-16 mt-4 lg:ml-20\">\n                <p className=\"font-body text-xs font-medium text-muted-foreground/50\">\n                  Durée moyenne : 3 jours · Sans arrêt d'activité\n                </p>\n              </div>\n            </ScrollReveal>\n          </div>\n        </div>\n      </div>\n\n      <Dialog open={videoOpen} onOpenChange={setVideoOpen}>\n        <DialogContent className=\"max-w-4xl overflow-hidden border-none bg-black p-0\">\n          <div className=\"aspect-video\">\n            <iframe\n              src=\"https://www.youtube.com/embed/9HOB5OVH0Ac?autoplay=1\"\n              className=\"h-full w-full\"\n              allow=\"autoplay; encrypted-media\"\n              allowFullScreen\n              title=\"Covalba Cool Roof, un chantier en 2 minutes\"\n            />\n          </div>\n        </DialogContent>\n      </Dialog>\n    </section>\n  );\n};\n\nconst ProofSection = ({ page }: { page: RoofPageData }) => (\n  <section className=\"bg-[#192A3A] py-20 text-white lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mb-12 grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-end\">\n          <div>\n            <Label light>{page.proof.badge}</Label>\n            <h2 className=\"font-satoshi text-3xl font-black leading-tight sm:text-4xl lg:text-5xl\">{page.proof.title}</h2>\n          </div>\n          <p className=\"max-w-xl font-body text-base leading-relaxed text-white/62\">\n            Des chiffres de terrain à confirmer chantier par chantier, utilisés ici comme repères de performance.\n          </p>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal stagger>\n        <div className=\"grid gap-4 md:grid-cols-3\">\n          {page.proof.figures.map((figure, index) => {\n            const Icon = proofIcons[index] ?? BadgeCheck;\n            return (\n              <article key={figure.value} className=\"rounded-2xl border border-white/10 bg-white/[0.045] p-7\">\n                <Icon className=\"mb-6 h-6 w-6 text-teal-vivid\" strokeWidth={1.7} />\n                <p className=\"font-satoshi text-3xl font-black leading-none text-white lg:text-4xl\">{figure.value}</p>\n                <p className=\"mt-3 font-body text-sm leading-relaxed text-white/60\">{figure.label}</p>\n              </article>\n            );\n          })}\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mt-14 border-t border-white/10 pt-10\">\n          <p className=\"mb-8 text-center font-body text-[10px] font-bold uppercase tracking-[0.22em] text-white/42\">\n            Références clients\n          </p>\n          <div className=\"flex flex-wrap items-center justify-center gap-x-10 gap-y-7 lg:gap-x-14\">\n            {logos.map((logo) => (\n              <span key={logo.name} className=\"flex h-8 w-28 items-center justify-center\">\n                <img\n                  src={logo.url}\n                  alt={logo.name}\n                  className=\"max-h-7 max-w-full object-contain opacity-45 transition-opacity duration-300 hover:opacity-80\"\n                  style={{ filter: 'brightness(0) invert(1)' }}\n                  loading=\"lazy\"\n                />\n              </span>\n            ))}\n          </div>\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst FAQSection = ({ faq }: { faq: RoofPageData['faq'] }) => (\n  <section className=\"bg-cream py-20 lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <div className=\"grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:gap-16\">\n        <ScrollReveal>\n          <div className=\"lg:sticky lg:top-24\">\n            <Label>FAQ</Label>\n            <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl\">\n              Vos questions,\n              <br />\n              <span className=\"text-foreground/40\">nos réponses.</span>\n            </h2>\n            <a href=\"#contact\" className=\"group mt-8 inline-flex items-center gap-2 font-body text-sm font-semibold text-primary transition-all hover:gap-3\">\n              Une autre question ? Parlons-en\n              <ArrowRight className=\"h-4 w-4\" />\n            </a>\n          </div>\n        </ScrollReveal>\n\n        <ScrollReveal>\n          <Accordion type=\"single\" collapsible className=\"space-y-3\">\n            {faq.map((item, index) => (\n              <AccordionItem\n                key={item.q}\n                value={`roof-faq-${index}`}\n                className=\"rounded-xl border border-foreground/[0.06] bg-white px-5 shadow-[0_12px_34px_rgba(24,42,58,0.04)] data-[state=open]:border-primary/20 lg:px-6\"\n              >\n                <AccordionTrigger className=\"py-5 text-left font-satoshi text-base font-bold text-foreground hover:no-underline lg:text-[17px]\">\n                  {item.q}\n                </AccordionTrigger>\n                <AccordionContent className=\"pb-5 font-body text-[14.5px] leading-relaxed text-foreground/67 lg:text-[15px]\">\n                  {item.a}\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </ScrollReveal>\n      </div>\n    </div>\n  </section>\n);\n\nconst FinalCTA = ({ page }: { page: RoofPageData }) => (\n  <section id=\"contact\" className=\"overflow-hidden bg-[#182A3A] py-20 text-white lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mx-auto max-w-4xl text-center\">\n          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl\">\n            {page.finalCta.title}\n          </h2>\n          <p className=\"mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-white/72 lg:text-lg\">\n            {page.finalCta.text}\n          </p>\n          <div className=\"mt-9 flex flex-col gap-3 sm:flex-row sm:justify-center\">\n            <PrimaryCTA label=\"Demander un devis\" href=\"/diagnostic\" />\n          </div>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <ul className=\"mx-auto mt-12 grid max-w-3xl gap-3 sm:grid-cols-3\">\n          {page.finalCta.reassurances.map((item) => (\n            <li key={item} className=\"flex items-center justify-center gap-2.5 rounded-lg border border-white/[0.12] bg-white/[0.045] px-4 py-3\">\n              <CalendarCheck className=\"h-4 w-4 shrink-0 text-teal-vivid\" strokeWidth={1.8} />\n              <span className=\"font-body text-sm text-white/[0.76]\">{item}</span>\n            </li>\n          ))}\n        </ul>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst SEOContent = ({ page }: { page: RoofPageData }) => (\n  <section className=\"bg-white py-20 lg:py-28\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <article className=\"mx-auto max-w-3xl\">\n          <p className=\"mb-5 font-body text-[10px] font-bold uppercase tracking-[0.25em] text-primary/55\">\n            Guide support\n          </p>\n          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground lg:text-4xl\">\n            Tout comprendre sur le {page.eyebrow.toLowerCase()}.\n          </h2>\n          <p className=\"mt-6 font-body text-base leading-relaxed text-foreground/68 lg:text-lg\">\n            {page.seo.intro}\n          </p>\n\n          <div className=\"mt-10 space-y-9\">\n            {page.seo.sections.map((section) => (\n              <section key={section.title}>\n                <h3 className=\"font-satoshi text-2xl font-bold leading-tight text-foreground\">{section.title}</h3>\n                <p className=\"mt-3 font-body text-base leading-relaxed text-foreground/66\">{section.text}</p>\n              </section>\n            ))}\n          </div>\n\n          <div className=\"mt-12 rounded-2xl bg-cream p-6 ring-1 ring-foreground/[0.05]\">\n            <h3 className=\"font-satoshi text-lg font-bold text-foreground\">Sources</h3>\n            <ul className=\"mt-4 space-y-2\">\n              {page.seo.sources.map((source) => (\n                <li key={source.href}>\n                  <a href={source.href} className=\"font-body text-sm leading-relaxed text-primary underline-offset-4 hover:underline\" target=\"_blank\" rel=\"noreferrer\">\n                    {source.label}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </article>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst buildFaqSchema = (page: RoofPageData) => ({\n  '@context': 'https://schema.org',\n  '@type': 'FAQPage',\n  mainEntity: page.faq.map((item) => ({\n    '@type': 'Question',\n    name: item.q,\n    acceptedAnswer: {\n      '@type': 'Answer',\n      text: item.a,\n    },\n  })),\n});\n\nconst buildBreadcrumbSchema = (page: RoofPageData) => ({\n  '@context': 'https://schema.org',\n  '@type': 'BreadcrumbList',\n  itemListElement: [\n    { '@type': 'ListItem', position: 1, name: 'Accueil', item: SITE_URL },\n    { '@type': 'ListItem', position: 2, name: 'Toitures', item: `${SITE_URL}/toitures` },\n    { '@type': 'ListItem', position: 3, name: page.breadcrumb, item: page.canonical },\n  ],\n});\n\nconst RoofPageTemplate = ({ page }: RoofPageTemplateProps) => {\n  usePageMeta({\n    title: page.title,\n    description: page.description,\n    canonical: page.canonical,\n  });\n  useJsonLd(`roof-${page.slug}-faq`, buildFaqSchema(page));\n  useJsonLd(`roof-${page.slug}-breadcrumb`, buildBreadcrumbSchema(page));\n\n  return (\n    <>\n      <Navbar />\n      <main>\n        <RoofHero page={page} />\n        <ProblemSection page={page} />\n        <SolutionSection page={page} />\n        <BenefitsSection page={page} />\n        <ROISection page={page} />\n        <DiagnosticCTA title={page.midCta.title} text={page.midCta.text} />\n        <MethodSection page={page} />\n        <ProofSection page={page} />\n        <FAQSection faq={page.faq} />\n        <FinalCTA page={page} />\n        <SEOContent page={page} />\n      </main>\n      <Footer />\n      <StickyMobileCTA />\n    </>\n  );\n};\n\nexport default RoofPageTemplate;\n","numLines":1427,"startLine":1,"totalLines":1427}},"sourceToolAssistantUUID":"09f639e5-1e3e-42ee-8b73-5c0957584d7c","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":"e3cee858-cfc7-4363-a4c9-6a5eb571d6cb","isSidechain":true,"agentId":"a01683a908360cb30","message":{"model":"claude-opus-4-8","id":"msg_01ULNFf2n8DHgxnrzCuf5cuW","type":"message","role":"assistant","content":[{"type":"tool_use","id":"toolu_018U9aAuGFXm8SHxddWZh1H3","name":"Read","input":{"file_path":"/opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/src/components/en/roof/RoofPageTemplateEN.tsx"},"caller":{"type":"direct"}}],"stop_reason":null,"stop_sequence":null,"stop_details":null,"usage":{"input_tokens":23605,"cache_creation_input_tokens":9266,"cache_read_input_tokens":5704,"cache_creation":{"ephemeral_5m_input_tokens":9266,"ephemeral_1h_input_tokens":0},"output_tokens":1,"service_tier":"standard","inference_geo":"not_available"},"diagnostics":null},"requestId":"req_011CcJVQBKnRk78iZDX1xHWu","attributionAgent":"general-purpose","type":"assistant","uuid":"d4d51f1c-6a89-4645-8a39-99aa49c6eba7","timestamp":"2026-06-22T14:54:37.987Z","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":"d4d51f1c-6a89-4645-8a39-99aa49c6eba7","isSidechain":true,"promptId":"d89edf80-4e6d-44ec-80c1-78c9295c891f","agentId":"a01683a908360cb30","type":"user","message":{"role":"user","content":[{"tool_use_id":"toolu_018U9aAuGFXm8SHxddWZh1H3","type":"tool_result","content":"1\timport { useState } from 'react';\n2\timport {\n3\t  ArrowRight,\n4\t  BadgeCheck,\n5\t  CalendarClock,\n6\t  CalendarCheck,\n7\t  Check,\n8\t  CheckCircle2,\n9\t  ChevronDown,\n10\t  Factory,\n11\t  HelpCircle,\n12\t  Play,\n13\t  ShieldCheck,\n14\t  ShieldAlert,\n15\t  Sparkles,\n16\t  SunMedium,\n17\t  Thermometer,\n18\t  TrendingDown,\n19\t  Users,\n20\t  Wrench,\n21\t  ClipboardCheck,\n22\t  type LucideIcon,\n23\t} from 'lucide-react';\n24\t\n25\timport FooterEN from '@/components/en/FooterEN';\n26\timport NavbarEN from '@/components/en/NavbarEN';\n27\timport ScrollReveal from '@/components/ScrollReveal';\n28\timport StickyMobileCTAEN from '@/components/en/StickyMobileCTAEN';\n29\timport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';\n30\timport { Dialog, DialogContent } from '@/components/ui/dialog';\n31\timport { useJsonLd, usePageMeta } from '@/hooks/usePageMeta';\n32\timport { type RoofPageData, type TextCard } from '@/data/roofPages';\n33\timport coolRoofLayers from '@/assets/cool-roof-layers.webp';\n34\timport covaMetalProduct from '@/assets/produits/Covalba-CovaMetal20-Duo-Produit.webp';\n35\timport covaSealProduct from '@/assets/produits/Covalba-CovaSeal20-Duo-Produit.webp';\n36\timport covaTherm8Product from '@/assets/produits/Covalba-CovaTherm8-Produit.webp';\n37\timport covaTherm20Product from '@/assets/produits/Covalba-CovaTherm20-Produit.webp';\n38\t\n39\tinterface RoofPageTemplateENProps {\n40\t  page: RoofPageData;\n41\t}\n42\t\n43\tconst SITE_URL = 'https://www.covalba.fr';\n44\t\n45\t// Internal route for all CTAs on the EN site. There is no dedicated EN\n46\t// diagnostic/contact route yet, so every conversion CTA points to the EN home.\n47\tconst CTA_HREF = '/en';\n48\t\n49\tconst cardIcons: LucideIcon[] = [SunMedium, Wrench, Factory, ShieldCheck];\n50\tconst methodIcons: LucideIcon[] = [ClipboardCheck, CalendarClock, ShieldCheck, TrendingDown];\n51\tconst proofIcons: LucideIcon[] = [Thermometer, ShieldCheck, BadgeCheck];\n52\tconst problemIcons: LucideIcon[] = [Users, SunMedium, ShieldAlert];\n53\t\n54\tconst logos = [\n55\t  { name: 'Continental', url: '/logos/logo-continental.svg' },\n56\t  { name: 'Thales', url: '/logos/logo-thales.svg' },\n57\t  { name: 'Nestlé', url: '/logos/logo-nestle.svg' },\n58\t  { name: 'SNCF', url: '/logos/logo-sncf.svg' },\n59\t  { name: 'Leclerc', url: '/logos/logo-leclerc.svg' },\n60\t  { name: 'Super U', url: '/logos/logo-super-u.svg' },\n61\t];\n62\t\n63\tconst displayCell = (value: string) => value.replace(/EUR/g, '€').replace(/m2/g, 'm²');\n64\t\n65\tconst formatCurrency = (value: number) =>\n66\t  `${new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(Math.round(value))} €`;\n67\t\n68\tconst parsePricePerM2 = (value: string) => {\n69\t  const match = displayCell(value).match(/\\(([\\d,.]+)\\s*€\\/m²\\)/);\n70\t  if (!match) return null;\n71\t\n72\t  return Number.parseFloat(match[1].replace(',', '.'));\n73\t};\n74\t\n75\tconst getTreatmentRange = (page: RoofPageData, situation: string) => {\n76\t  const text = `${page.slug} ${situation}`.toLowerCase();\n77\t\n78\t  if (\n79\t    text.includes('covaseal') ||\n80\t    text.includes('membrane-bitumineuse') ||\n81\t    text.includes('toiture-plate') ||\n82\t    text.includes('aging') ||\n83\t    text.includes('leak')\n84\t  ) {\n85\t    return { min: 28, max: 38, label: 'CovaSeal 20 estimate' };\n86\t  }\n87\t\n88\t  if (\n89\t    text.includes('covametal') ||\n90\t    text.includes('bac-acier') ||\n91\t    text.includes('corrosion') ||\n92\t    text.includes('steel')\n93\t  ) {\n94\t    return { min: 24, max: 32, label: 'CovaMetal 20 estimate' };\n95\t  }\n96\t\n97\t  if (text.includes('fibrociment') || text.includes('fiber') || text.includes('sheets')) {\n98\t    return { min: 22, max: 28, label: 'CovaTherm sensitive substrate' };\n99\t  }\n100\t\n101\t  return { min: 20, max: 25, label: 'CovaTherm estimate' };\n102\t};\n103\t\n104\tconst getFallbackPricePerM2 = (option: string, optionIndex: number, treatmentMidpoint: number) => {\n105\t  const lower = option.toLowerCase();\n106\t\n107\t  if (optionIndex === 0) return treatmentMidpoint;\n108\t  if (lower.includes('anticorrosion') || lower.includes('repaint')) return 16;\n109\t  if (lower.includes('replacement') || lower.includes('replace')) return 120;\n110\t  if (lower.includes('new membrane') || lower.includes('membrane')) return 90;\n111\t  if (lower.includes('insulation')) return 150;\n112\t\n113\t  return null;\n114\t};\n115\t\n116\tconst benefitImages = [\n117\t  '/images/toitures/benefit-confort.webp',\n118\t  '/images/toitures/benefit-protection-toiture.webp',\n119\t  '/images/toitures/benefit-clim.webp',\n120\t  '/images/toitures/benefit-chantier-evite.webp',\n121\t];\n122\t\n123\tconst feedbackRoofBenefitImages = [\n124\t  '/images/toitures/feedback-batiment-tempere.png',\n125\t  '/images/toitures/feedback-etancheite.png',\n126\t  '/images/toitures/feedback-economie-clim-1.png',\n127\t  '/images/toitures/feedback-economie-clim-3.png',\n128\t];\n129\t\n130\tconst getBenefitImage = (page: RoofPageData, benefit: TextCard, index: number) => {\n131\t  if (['membrane-bitumineuse', 'toiture-plate'].includes(page.slug)) {\n132\t    return feedbackRoofBenefitImages[index] ?? feedbackRoofBenefitImages[0];\n133\t  }\n134\t\n135\t  const text = `${benefit.title} ${benefit.text}`.toLowerCase();\n136\t\n137\t  if (page.slug === 'bac-acier' && (text.includes('steel') || text.includes('corrosion') || text.includes('rust'))) {\n138\t    return '/images/toitures/support-bac-acier-cool.webp';\n139\t  }\n140\t\n141\t  if (text.includes('bill') || text.includes('cooling') || text.includes('air conditioning') || text.includes('cold')) {\n142\t    return '/images/toitures/benefit-clim.webp';\n143\t  }\n144\t\n145\t  if (\n146\t    text.includes('project') ||\n147\t    text.includes('refurbishment') ||\n148\t    text.includes('replacement') ||\n149\t    text.includes('removal') ||\n150\t    text.includes('strip')\n151\t  ) {\n152\t    return '/images/toitures/benefit-chantier-evite.webp';\n153\t  }\n154\t\n155\t  if (\n156\t    text.includes('protect') ||\n157\t    text.includes('waterproof') ||\n158\t    text.includes('corrosion') ||\n159\t    text.includes('lifespan') ||\n160\t    text.includes('durab')\n161\t  ) {\n162\t    return '/images/toitures/benefit-protection-toiture.webp';\n163\t  }\n164\t\n165\t  return benefitImages[index] ?? benefitImages[0];\n166\t};\n167\t\n168\tconst supportVisuals: Record<string, { hot: string; cool: string; hotLabel: string; coolLabel: string }> = {\n169\t  'membrane-bitumineuse': {\n170\t    hot: '/images/toitures/support-bitume-chaud.webp',\n171\t    cool: '/images/toitures/feedback-economie-clim-2.png',\n172\t    hotLabel: 'Without cool roof: bitumen membrane absorbing heat',\n173\t    coolLabel: 'With cool roof: reflective membrane',\n174\t  },\n175\t  'bac-acier': {\n176\t    hot: '/images/toitures/support-bac-acier-chaud.webp',\n177\t    cool: '/images/toitures/support-bac-acier-cool.webp',\n178\t    hotLabel: 'Without cool roof: overheating metal',\n179\t    coolLabel: 'With cool roof: reflective, protected steel deck',\n180\t  },\n181\t  'toiture-plate': {\n182\t    hot: '/images/toitures/support-toiture-plate-chaud.webp',\n183\t    cool: '/images/toitures/feedback-economie-clim-2.png',\n184\t    hotLabel: 'Without cool roof: roof terrace absorbing heat',\n185\t    coolLabel: 'With cool roof: reflective roof terrace',\n186\t  },\n187\t  fibrociment: {\n188\t    hot: '/images/toitures/support-fibrociment-chaud.webp',\n189\t    cool: '/images/toitures/support-fibrociment-cool.webp',\n190\t    hotLabel: 'Without cool roof: fiber cement absorbing heat',\n191\t    coolLabel: 'With cool roof: protected sheets',\n192\t  },\n193\t  'tuiles-ciment': {\n194\t    hot: '/images/toitures/support-tuiles-ciment-chaud.webp',\n195\t    cool: '/images/toitures/support-tuiles-ciment-cool.webp',\n196\t    hotLabel: 'Without cool roof: tiles storing heat',\n197\t    coolLabel: 'With cool roof: reflective tiles',\n198\t  },\n199\t};\n200\t\n201\tconst layerTitles = ['Bonding primer', 'Reflective resin', 'Protective top coat'];\n202\t\n203\tconst layerColors = [\n204\t  {\n205\t    pill: 'bg-terracotta text-white',\n206\t    dot: 'bg-terracotta',\n207\t    chevron: 'text-terracotta',\n208\t  },\n209\t  {\n210\t    pill: 'bg-foreground text-white',\n211\t    dot: 'bg-foreground',\n212\t    chevron: 'text-foreground',\n213\t  },\n214\t  {\n215\t    pill: 'bg-primary text-white',\n216\t    dot: 'bg-primary',\n217\t    chevron: 'text-primary',\n218\t  },\n219\t];\n220\t\n221\tconst layerPositions = [\n222\t  { top: '56.7%', left: '36.5%' },\n223\t  { top: '48.2%', left: '36.5%' },\n224\t  { top: '36.3%', left: '35.6%' },\n225\t];\n226\t\n227\tconst getProblemTitle = (title: string) => {\n228\t  const map: Record<string, { strong: string; muted: string }> = {\n229\t    'A black bitumen roof is a radiator sitting on top of your building.': {\n230\t      strong: 'Your roof heats up.',\n231\t      muted: 'Your building takes the hit.',\n232\t    },\n233\t    'Steel decking heats up fast, rusts fast, and wears out fast.': {\n234\t      strong: 'The metal heats up fast.',\n235\t      muted: 'The roof wears out too.',\n236\t    },\n237\t    'Flat, your roof takes the sun all day long.': {\n238\t      strong: 'Your roof terrace takes it all.',\n239\t      muted: 'Heat, UV, waterproofing.',\n240\t    },\n241\t    'Fiber cement heats up, ages, and is expensive to remove.': {\n242\t      strong: 'Fiber cement heats up.',\n243\t      muted: 'Removing it is expensive.',\n244\t    },\n245\t    'Dark cement tiles, overheating attic space.': {\n246\t      strong: 'The tiles store the heat.',\n247\t      muted: 'The attic space takes it.',\n248\t    },\n249\t  };\n250\t\n251\t  return map[title] ?? { strong: title, muted: '' };\n252\t};\n253\t\n254\tconst getLayerDescription = (index: number) => {\n255\t  if (index === 0) {\n256\t    return 'Adapts to the existing substrate. Every roof has its own chemistry, and every chemistry calls for tailored preparation and bonding.';\n257\t  }\n258\t\n259\t  if (index === 1) {\n260\t    return 'This is the heart of the system. The surface reflects solar radiation instead of absorbing it, so less heat enters the building.';\n261\t  }\n262\t\n263\t  return 'A top coat protects the resin from UV, pollution and premature aging to preserve performance over time.';\n264\t};\n265\t\n266\tconst getLayerExpert = (index: number) => {\n267\t  const notes = [\n268\t    'An unsuitable primer means a system that blisters and peels off. The substrate decides everything.',\n269\t    'Cool roof treats the cause: the roof heats up less, so the building takes on less heat.',\n270\t    'The difference between a paint job and an investment is how it holds up over time. The finish is there to protect performance.',\n271\t  ];\n272\t\n273\t  return notes[index] ?? notes[0];\n274\t};\n275\t\n276\tconst Label = ({ children, light = false }: { children: string; light?: boolean }) => (\n277\t  <div className=\"mb-5 flex items-center gap-3\">\n278\t    <span className={`h-px w-9 ${light ? 'bg-teal-vivid/70' : 'bg-primary/65'}`} aria-hidden=\"true\" />\n279\t    <span\n280\t      className={`font-body text-[11px] font-bold uppercase tracking-[0.22em] ${\n281\t        light ? 'text-teal-vivid' : 'text-primary'\n282\t      }`}\n283\t    >\n284\t      {children}\n285\t    </span>\n286\t  </div>\n287\t);\n288\t\n289\tconst PrimaryCTA = ({ label, href }: { label: string; href: string }) => (\n290\t  <a\n291\t    href={href}\n292\t    className=\"group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white\"\n293\t  >\n294\t    <span className=\"text-sm\">{label}</span>\n295\t    <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5\">\n296\t      <ArrowRight className=\"h-3.5 w-3.5\" />\n297\t    </span>\n298\t  </a>\n299\t);\n300\t\n301\tconst RoofHero = ({ page }: { page: RoofPageData }) => {\n302\t  const [form, setForm] = useState({ climate: '', surface: '', email: '' });\n303\t  const [submitted, setSubmitted] = useState(false);\n304\t  const surfaceNum = parseFloat(form.surface) || 0;\n305\t  const estimate = surfaceNum ? `${new Intl.NumberFormat('en-US').format(surfaceNum * 22.5)} €` : '20-25 €/m²';\n306\t\n307\t  return (\n308\t    <section\n309\t      aria-labelledby={`${page.slug}-hero-title`}\n310\t      className=\"relative isolate flex min-h-[100svh] flex-col overflow-hidden bg-navy text-cream\"\n311\t    >\n312\t      <img\n313\t        src={page.heroImage}\n314\t        alt={page.heroImageAlt}\n315\t        className=\"absolute inset-0 -z-10 size-full scale-[1.02] object-cover\"\n316\t        style={page.slug === 'membrane-bitumineuse' ? { objectPosition: 'center 28%' } : undefined}\n317\t        loading=\"eager\"\n318\t        decoding=\"async\"\n319\t      />\n320\t      <div\n321\t        aria-hidden=\"true\"\n322\t        className=\"absolute inset-0 -z-10 hidden bg-gradient-to-r from-navy/[0.94] via-navy/62 to-navy/25 lg:block\"\n323\t      />\n324\t      <div\n325\t        aria-hidden=\"true\"\n326\t        className={`absolute inset-0 -z-10 bg-gradient-to-b lg:hidden ${\n327\t          page.slug === 'membrane-bitumineuse'\n328\t            ? 'from-navy/92 via-navy/58 to-navy/96'\n329\t            : 'from-navy/84 via-navy/38 to-navy/96'\n330\t        }`}\n331\t      />\n332\t      <div aria-hidden=\"true\" className=\"absolute inset-x-0 bottom-0 -z-10 h-[28%] bg-gradient-to-t from-navy via-navy/85 to-transparent\" />\n333\t\n334\t      <div className=\"container relative z-10 mx-auto flex flex-1 items-center px-6 pb-10 pt-24 lg:px-12 lg:pb-16 lg:pt-28\">\n335\t        <div className=\"grid w-full grid-cols-1 items-center gap-10 lg:grid-cols-[55fr_45fr] lg:gap-12\">\n336\t          <div className=\"max-w-2xl space-y-6 lg:space-y-8\">\n337\t            <ScrollReveal>\n338\t              <nav className=\"flex items-center gap-2 font-body text-xs text-cream/50\">\n339\t                <a href=\"/en\" className=\"transition-colors hover:text-cream/75\">Home</a>\n340\t                <span className=\"text-cream/28\">/</span>\n341\t                <span>Roofs</span>\n342\t                <span className=\"text-cream/28\">/</span>\n343\t                <span className=\"text-cream/78\">{page.breadcrumb}</span>\n344\t              </nav>\n345\t            </ScrollReveal>\n346\t\n347\t            <ScrollReveal>\n348\t              <h1\n349\t                id={`${page.slug}-hero-title`}\n350\t                className=\"font-satoshi font-bold leading-[1.02] text-white\"\n351\t                style={{ fontSize: 'clamp(2.25rem, 4.6vw, 4rem)', letterSpacing: '-0.03em' }}\n352\t              >\n353\t                {page.h1}\n354\t              </h1>\n355\t            </ScrollReveal>\n356\t\n357\t            <ScrollReveal>\n358\t              <p\n359\t                className=\"max-w-xl font-satoshi font-medium leading-[1.3] text-cream/66\"\n360\t                style={{ fontSize: 'clamp(1rem, 1.5vw, 1.375rem)', letterSpacing: '-0.005em' }}\n361\t              >\n362\t                {page.lead}\n363\t              </p>\n364\t            </ScrollReveal>\n365\t\n366\t            <ScrollReveal>\n367\t              <ul className=\"hidden gap-4 pt-1 sm:flex sm:flex-wrap lg:gap-6\" aria-label=\"Key benefits\">\n368\t                {page.heroStats.map((stat, index) => {\n369\t                  const Icon = [Thermometer, ShieldCheck, TrendingDown][index] ?? BadgeCheck;\n370\t                  return (\n371\t                    <li\n372\t                      key={stat.label}\n373\t                      className={`flex items-start gap-3 ${index !== 0 ? 'sm:border-l sm:border-white/10 sm:pl-6' : ''}`}\n374\t                    >\n375\t                      <Icon className=\"mt-0.5 h-[18px] w-[18px] shrink-0 text-teal-vivid\" strokeWidth={1.5} />\n376\t                      <div className=\"leading-tight\">\n377\t                        <p className=\"font-satoshi text-[15px] font-bold text-white lg:text-base\">{stat.value}</p>\n378\t                        <p className=\"mt-1 font-body text-[12.5px] text-cream/55 lg:text-[13px]\">{stat.label}</p>\n379\t                      </div>\n380\t                    </li>\n381\t                  );\n382\t                })}\n383\t              </ul>\n384\t            </ScrollReveal>\n385\t          </div>\n386\t\n387\t          <ScrollReveal>\n388\t            <div className=\"rounded-[1.5rem] border border-white/[0.08] bg-white/[0.04] p-1.5 backdrop-blur-sm\">\n389\t              <div className=\"rounded-[calc(1.5rem-6px)] border border-white/[0.06] bg-[#0b1a2b]/80 p-4 shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)] backdrop-blur-xl lg:p-7\">\n390\t                {!submitted ? (\n391\t                  <>\n392\t                    <h2 className=\"mb-1 text-center font-satoshi text-xl font-bold text-white lg:text-2xl\">\n393\t                      Estimate your potential savings\n394\t                    </h2>\n395\t                    <p className=\"mb-4 text-center font-body text-[12px] text-white/50\">\n396\t                      Tailored reply within 24h\n397\t                    </p>\n398\t                    <form\n399\t                      onSubmit={(event) => {\n400\t                        event.preventDefault();\n401\t                        setSubmitted(true);\n402\t                      }}\n403\t                      className=\"space-y-2.5 lg:space-y-3\"\n404\t                    >\n405\t                      <input\n406\t                        value={page.breadcrumb}\n407\t                        readOnly\n408\t                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white outline-none\"\n409\t                      />\n410\t                      <select\n411\t                        required\n412\t                        value={form.climate}\n413\t                        onChange={(e) => setForm({ ...form, climate: e.target.value })}\n414\t                        className=\"w-full appearance-none rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n415\t                      >\n416\t                        <option value=\"\" disabled className=\"bg-card text-foreground\">Is the building air-conditioned?</option>\n417\t                        {['Yes', 'No', 'Partially', 'To confirm'].map((option) => (\n418\t                          <option key={option} value={option} className=\"bg-card text-foreground\">{option}</option>\n419\t                        ))}\n420\t                      </select>\n421\t                      <input\n422\t                        type=\"number\"\n423\t                        placeholder=\"Roof surface (m²)\"\n424\t                        required\n425\t                        min=\"1\"\n426\t                        value={form.surface}\n427\t                        onChange={(e) => setForm({ ...form, surface: e.target.value })}\n428\t                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n429\t                      />\n430\t                      <input\n431\t                        type=\"email\"\n432\t                        placeholder=\"Work email\"\n433\t                        required\n434\t                        value={form.email}\n435\t                        onChange={(e) => setForm({ ...form, email: e.target.value })}\n436\t                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n437\t                      />\n438\t\n439\t                      <button\n440\t                        type=\"submit\"\n441\t                        className=\"group mt-1 flex w-full items-center justify-center gap-3 rounded-full cta-gradient py-3 font-semibold text-white active:scale-[0.98]\"\n442\t                      >\n443\t                        <span className=\"text-[15px]\">See my potential</span>\n444\t                        <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5\">\n445\t                          <ArrowRight className=\"h-4 w-4\" />\n446\t                        </span>\n447\t                      </button>\n448\t                    </form>\n449\t\n450\t                    <p className=\"mt-3 text-center font-body text-[11px] text-white/35\">\n451\t                      No commitment · Study tailored to your substrate\n452\t                    </p>\n453\t                  </>\n454\t                ) : (\n455\t                  <div className=\"py-4 text-center\">\n456\t                    <div className=\"mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/20\">\n457\t                      <ShieldCheck className=\"h-6 w-6 text-primary\" />\n458\t                    </div>\n459\t                    <p className=\"mb-1 font-body text-sm text-white/60\">Indicative basis for {new Intl.NumberFormat('en-US').format(surfaceNum)} m²</p>\n460\t                    <p className=\"mb-4 font-satoshi text-2xl font-bold text-white\">{estimate}</p>\n461\t                    <p className=\"mb-4 font-body text-[13px] text-white/50\">\n462\t                      An advisor refines the estimate based on the actual condition of the roof.\n463\t                    </p>\n464\t                    <button onClick={() => setSubmitted(false)} className=\"font-body text-sm font-semibold text-primary hover:underline\">\n465\t                      Edit my request\n466\t                    </button>\n467\t                  </div>\n468\t                )}\n469\t              </div>\n470\t            </div>\n471\t          </ScrollReveal>\n472\t        </div>\n473\t      </div>\n474\t\n475\t      <div className=\"relative z-10 hidden border-t border-white/10 bg-navy/78 backdrop-blur-md lg:block\">\n476\t        <div className=\"container mx-auto flex items-center gap-8 px-12 py-5\">\n477\t          <p className=\"shrink-0 font-body text-[10px] font-semibold uppercase tracking-[0.24em] text-cream/45\">\n478\t            They trust us\n479\t          </p>\n480\t          <div className=\"flex flex-1 items-center justify-between gap-8\">\n481\t            {logos.map((logo) => (\n482\t              <span key={logo.name} className=\"flex h-8 w-28 items-center justify-center\">\n483\t                <img\n484\t                  src={logo.url}\n485\t                  alt={logo.name}\n486\t                  className=\"max-h-7 max-w-full object-contain opacity-65 brightness-0 invert transition-opacity duration-300 hover:opacity-95\"\n487\t                  loading=\"eager\"\n488\t                  decoding=\"async\"\n489\t                />\n490\t              </span>\n491\t            ))}\n492\t          </div>\n493\t        </div>\n494\t      </div>\n495\t    </section>\n496\t  );\n497\t};\n498\t\n499\tconst ProblemSection = ({ page }: { page: RoofPageData }) => {\n500\t  const title = getProblemTitle(page.problem.title);\n501\t  const visual = supportVisuals[page.slug] ?? supportVisuals['membrane-bitumineuse'];\n502\t\n503\t  return (\n504\t    <section className=\"relative overflow-hidden bg-cream py-16 lg:py-36\">\n505\t      <div className=\"container relative mx-auto px-4 lg:px-8\">\n506\t        <ScrollReveal>\n507\t          <div className=\"mx-auto mb-14 max-w-3xl text-center lg:mb-20\">\n508\t            <h2\n509\t              className=\"font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n510\t              style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n511\t            >\n512\t              {title.strong}\n513\t              {title.muted && <span className=\"text-foreground/30\"> {title.muted}</span>}\n514\t            </h2>\n515\t          </div>\n516\t        </ScrollReveal>\n517\t\n518\t        <div className=\"grid grid-cols-1 items-center gap-12 lg:grid-cols-12 lg:gap-16\">\n519\t          <div className=\"order-2 lg:order-1 lg:col-span-5\">\n520\t            <ScrollReveal>\n521\t              <div className=\"relative\">\n522\t                <div className=\"pointer-events-none absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_hsl(var(--terracotta)/0.18)_0%,_transparent_65%)] blur-2xl\" />\n523\t                <div className=\"relative aspect-square overflow-hidden rounded-[2rem] bg-white shadow-[0_30px_80px_-15px_hsl(var(--terracotta-dark)/0.25),_0_10px_30px_-5px_hsl(var(--terracotta)/0.12)]\">\n524\t                  <img\n525\t                    src={visual.hot}\n526\t                    alt=\"\"\n527\t                    className=\"h-full w-full object-contain p-4\"\n528\t                    loading=\"lazy\"\n529\t                    decoding=\"async\"\n530\t                  />\n531\t                </div>\n532\t              </div>\n533\t              <p className=\"mt-4 text-center font-body text-[11px] uppercase tracking-wide text-terracotta/60\">\n534\t                {visual.hotLabel}\n535\t              </p>\n536\t            </ScrollReveal>\n537\t          </div>\n538\t\n539\t          <div className=\"order-1 lg:order-2 lg:col-span-7 lg:pl-12\">\n540\t            <ScrollReveal stagger>\n541\t              <div\n542\t                className=\"space-y-8 border-l-2 pl-8 lg:space-y-10 lg:pl-10\"\n543\t                style={{ borderImage: 'linear-gradient(to bottom, hsl(var(--terracotta)), hsl(var(--terracotta-dark))) 1' }}\n544\t              >\n545\t                {page.problem.cards.map((card, index) => {\n546\t                  const Icon = problemIcons[index] ?? HelpCircle;\n547\t                  return (\n548\t                    <div key={card.title}>\n549\t                      <div className=\"mb-2 flex items-center gap-3\">\n550\t                        <Icon className=\"h-5 w-5 text-terracotta\" strokeWidth={1.8} />\n551\t                        <h3\n552\t                          className=\"font-satoshi text-xl font-bold text-foreground lg:text-2xl\"\n553\t                          style={{ letterSpacing: '-0.02em', lineHeight: 1.2 }}\n554\t                        >\n555\t                          {card.title}\n556\t                        </h3>\n557\t                      </div>\n558\t                      <p className=\"font-body text-base leading-relaxed text-foreground/55\">{card.text}</p>\n559\t                    </div>\n560\t                  );\n561\t                })}\n562\t              </div>\n563\t            </ScrollReveal>\n564\t          </div>\n565\t        </div>\n566\t\n567\t        <div className=\"mt-20 grid grid-cols-1 items-center gap-12 lg:mt-28 lg:grid-cols-12 lg:gap-16\">\n568\t          <div className=\"order-2 lg:order-2 lg:col-span-5\">\n569\t            <ScrollReveal>\n570\t              <div className=\"relative\">\n571\t                <div className=\"pointer-events-none absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_rgba(32,150,140,0.18)_0%,_transparent_65%)] blur-2xl\" />\n572\t                <div className=\"relative aspect-square overflow-hidden rounded-[2rem] bg-white shadow-[0_30px_80px_-15px_rgba(20,120,110,0.20),_0_10px_30px_-5px_rgba(32,150,140,0.10)]\">\n573\t                  <img\n574\t                    src={visual.cool}\n575\t                    alt=\"\"\n576\t                    className=\"h-full w-full object-contain p-4\"\n577\t                    loading=\"lazy\"\n578\t                    decoding=\"async\"\n579\t                  />\n580\t                </div>\n581\t              </div>\n582\t              <p className=\"mt-4 text-center font-body text-[11px] uppercase tracking-wide text-primary/60\">\n583\t                {visual.coolLabel}\n584\t              </p>\n585\t            </ScrollReveal>\n586\t          </div>\n587\t\n588\t          <div className=\"order-1 lg:order-1 lg:col-span-7 lg:pr-12\">\n589\t            <ScrollReveal>\n590\t              <h3\n591\t                className=\"mb-8 max-w-xl font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n592\t                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n593\t              >\n594\t                Cool roof: a concrete answer\n595\t                <span className=\"text-foreground/30\"> to the heat problem.</span>\n596\t              </h3>\n597\t              <p className=\"mb-8 max-w-lg font-body text-base leading-relaxed text-foreground/50\">\n598\t                A light-colored surface sends solar radiation back before it penetrates the building. The roof heats up less, the top floors can breathe, and the substrate is subjected to less UV and thermal shock.\n599\t              </p>\n600\t              <PrimaryCTA label=\"Request a quote\" href={CTA_HREF} />\n601\t            </ScrollReveal>\n602\t          </div>\n603\t        </div>\n604\t      </div>\n605\t    </section>\n606\t  );\n607\t};\n608\t\n609\tconst SolutionSection = ({ page }: { page: RoofPageData }) => {\n610\t  const [active, setActive] = useState(0);\n611\t\n612\t  return (\n613\t    <section className=\"relative bg-white\">\n614\t      <div className=\"container mx-auto px-4 lg:px-8\">\n615\t        <ScrollReveal>\n616\t          <div className=\"flex flex-col gap-8 pb-10 pt-16 lg:flex-row lg:items-end lg:gap-16 lg:pb-16 lg:pt-32\">\n617\t            <div className=\"lg:w-2/3\">\n618\t              <p className=\"mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-muted-foreground\">\n619\t                {page.solution.badge}\n620\t              </p>\n621\t              <h2\n622\t                className=\"font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n623\t                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n624\t              >\n625\t                <span className=\"text-foreground/30\">A system designed to </span>\n626\t                reflect, protect and last.\n627\t              </h2>\n628\t            </div>\n629\t            <div className=\"lg:w-1/3 lg:pb-1\">\n630\t              <p className=\"font-body text-base leading-relaxed text-foreground/52 lg:text-right lg:text-lg\">\n631\t                A primer, a resin and a top coat that guarantee your roof's performance over time.\n632\t              </p>\n633\t              <div className=\"mt-5 flex lg:justify-end\">\n634\t                <PrimaryCTA label=\"Request a quote\" href={CTA_HREF} />\n635\t              </div>\n636\t            </div>\n637\t          </div>\n638\t        </ScrollReveal>\n639\t\n640\t        <div className=\"flex flex-col gap-12 pb-24 lg:flex-row lg:gap-16 lg:pb-32\">\n641\t          <div className=\"overflow-hidden rounded-2xl shadow-[0_20px_60px_-15px_rgba(0,0,0,0.08)] lg:hidden\">\n642\t            <img src={coolRoofLayers} alt=\"Cross-section of the Covalba cool roof system\" className=\"w-full\" loading=\"lazy\" />\n643\t          </div>\n644\t\n645\t          <div className=\"lg:w-1/2 lg:sticky lg:top-[20vh] lg:self-start\">\n646\t            {layerTitles.map((item, index) => {\n647\t              const isOpen = active === index;\n648\t              const colors = layerColors[index] ?? layerColors[0];\n649\t              return (\n650\t                <div key={item} className=\"border-b border-border last:border-b-0\">\n651\t                  <button\n652\t                    onClick={() => setActive(index)}\n653\t                    className=\"group flex w-full items-center gap-4 py-6 text-left\"\n654\t                  >\n655\t                    <span\n656\t                      className={`inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-body text-[11px] font-bold transition-all duration-300 ${\n657\t                        isOpen ? colors.pill : 'bg-muted text-muted-foreground'\n658\t                      }`}\n659\t                    >\n660\t                      0{index + 1}\n661\t                    </span>\n662\t                    <h3\n663\t                      className={`flex-1 font-satoshi text-xl font-bold transition-colors duration-300 lg:text-2xl ${\n664\t                        isOpen ? 'text-foreground' : 'text-foreground/50 group-hover:text-foreground/80'\n665\t                      }`}\n666\t                    >\n667\t                      {item}\n668\t                    </h3>\n669\t                    <ChevronDown\n670\t                      className={`h-5 w-5 shrink-0 transition-all duration-300 ${\n671\t                        isOpen ? `${colors.chevron} rotate-180` : 'text-foreground/25'\n672\t                      }`}\n673\t                      strokeWidth={2}\n674\t                    />\n675\t                  </button>\n676\t\n677\t                  <div\n678\t                    className={`grid transition-all duration-500 ${\n679\t                      isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'\n680\t                    }`}\n681\t                  >\n682\t                    <div className=\"overflow-hidden\">\n683\t                      <div className=\"pb-8 pl-6 lg:pl-12\">\n684\t                        <p className=\"mb-6 font-body text-base leading-relaxed text-foreground/65 lg:text-lg\">\n685\t                          {getLayerDescription(index)}\n686\t                        </p>\n687\t                        <div className=\"flex items-start gap-3 rounded-xl bg-foreground/[0.03] p-4\">\n688\t                          <img\n689\t                            src=\"/maxime-bourassin.jpg\"\n690\t                            alt=\"Maxime Bourassin, founder of Covalba\"\n691\t                            className=\"mt-0.5 h-9 w-9 shrink-0 rounded-full object-cover\"\n692\t                          />\n693\t                          <div>\n694\t                            <p className=\"font-body text-[15px] italic leading-relaxed text-foreground/65 lg:text-base\">\n695\t                              \"{getLayerExpert(index)}\"\n696\t                            </p>\n697\t                            <p className=\"mt-2 font-body text-xs font-semibold text-foreground/50\">\n698\t                              Maxime Bourassin, founder\n699\t                            </p>\n700\t                          </div>\n701\t                        </div>\n702\t                        {index === 0 && page.solution.note && (\n703\t                          <p className=\"mt-4 rounded-xl bg-primary/5 p-4 font-body text-sm leading-relaxed text-foreground/62\">\n704\t                            {page.solution.note}\n705\t                          </p>\n706\t                        )}\n707\t                      </div>\n708\t                    </div>\n709\t                  </div>\n710\t                </div>\n711\t              );\n712\t            })}\n713\t          </div>\n714\t\n715\t          <div className=\"hidden lg:block lg:w-1/2\">\n716\t            <div className=\"relative overflow-hidden rounded-2xl shadow-[0_30px_80px_-15px_rgba(0,0,0,0.08)]\">\n717\t              <img src={coolRoofLayers} alt=\"Cross-section of the Covalba cool roof system\" className=\"w-full\" loading=\"lazy\" />\n718\t              {layerTitles.map((item, index) => {\n719\t                const pos = layerPositions[index];\n720\t                const colors = layerColors[index] ?? layerColors[0];\n721\t                const isActive = active === index;\n722\t                if (!pos) return null;\n723\t\n724\t                return (\n725\t                  <div key={item} className=\"absolute\" style={{ top: pos.top, left: pos.left }}>\n726\t                    <div\n727\t                      className={`absolute -translate-x-1/2 -translate-y-1/2 transition-all duration-500 ${\n728\t                        isActive ? 'scale-125' : 'scale-75 opacity-40'\n729\t                      }`}\n730\t                    >\n731\t                      <div\n732\t                        className={`h-3.5 w-3.5 rounded-full ${\n733\t                          isActive ? colors.dot : 'bg-foreground/20'\n734\t                        } shadow-lg ring-2 ring-white transition-colors duration-500`}\n735\t                      />\n736\t                      {isActive && (\n737\t                        <div className={`absolute inset-0 h-3.5 w-3.5 animate-ping rounded-full ${colors.dot} opacity-30`} />\n738\t                      )}\n739\t                    </div>\n740\t                    <div\n741\t                      className={`pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 transition-all duration-500 ${\n742\t                        isActive ? 'translate-x-0 opacity-100' : 'translate-x-2 opacity-0'\n743\t                      }`}\n744\t                    >\n745\t                      <span className={`whitespace-nowrap rounded-full px-4 py-1.5 font-body text-[13px] font-bold shadow-lg ${colors.pill}`}>\n746\t                        {item}\n747\t                      </span>\n748\t                    </div>\n749\t                  </div>\n750\t                );\n751\t              })}\n752\t            </div>\n753\t          </div>\n754\t        </div>\n755\t      </div>\n756\t    </section>\n757\t  );\n758\t};\n759\t\n760\tconst BenefitsSection = ({ page }: { page: RoofPageData }) => (\n761\t  <section className=\"bg-white py-20 lg:py-32\">\n762\t    <div className=\"container mx-auto px-4 lg:px-8\">\n763\t      <ScrollReveal>\n764\t        <div className=\"mb-10 grid gap-8 lg:grid-cols-[0.82fr_1.18fr] lg:items-end lg:gap-14\">\n765\t          <div>\n766\t            <Label>{page.benefits.badge}</Label>\n767\t            <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl\">\n768\t              {page.benefits.title}\n769\t            </h2>\n770\t          </div>\n771\t          <p className=\"max-w-xl border-l border-primary/30 pl-6 font-body text-base leading-relaxed text-foreground/62 lg:text-lg\">\n772\t            {page.benefits.featured}\n773\t          </p>\n774\t        </div>\n775\t      </ScrollReveal>\n776\t\n777\t      <ScrollReveal stagger>\n778\t        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n779\t          {page.benefits.cards.map((benefit, index) => {\n780\t            const Icon = cardIcons[index] ?? Sparkles;\n781\t            return (\n782\t              <article\n783\t                key={benefit.title}\n784\t                className=\"group overflow-hidden rounded-2xl bg-cream ring-1 ring-foreground/[0.05] transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_24px_70px_-48px_hsl(var(--navy)/0.45)]\"\n785\t              >\n786\t                <div className=\"relative aspect-[4/3] overflow-hidden bg-foreground/[0.04]\">\n787\t                  <img\n788\t                    src={getBenefitImage(page, benefit, index)}\n789\t                    alt=\"\"\n790\t                    className=\"h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.035]\"\n791\t                    loading=\"lazy\"\n792\t                    decoding=\"async\"\n793\t                  />\n794\t                  <div className=\"absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-cream to-transparent\" />\n795\t                </div>\n796\t                <div className=\"p-5 lg:p-6\">\n797\t                  <div className=\"mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-white text-primary shadow-[0_12px_30px_-24px_hsl(var(--navy)/0.35)]\">\n798\t                    <Icon className=\"h-5 w-5\" strokeWidth={1.7} />\n799\t                  </div>\n800\t                  <h3 className=\"font-satoshi text-lg font-bold leading-tight text-foreground\">{benefit.title}</h3>\n801\t                  <p className=\"mt-2 font-body text-sm leading-relaxed text-foreground/62\">{benefit.text}</p>\n802\t                </div>\n803\t              </article>\n804\t            );\n805\t          })}\n806\t        </div>\n807\t      </ScrollReveal>\n808\t    </div>\n809\t  </section>\n810\t);\n811\t\n812\tconst RoiOptionCards = ({\n813\t  page,\n814\t  surface,\n815\t  treatmentRange,\n816\t}: {\n817\t  page: RoofPageData;\n818\t  surface: number;\n819\t  treatmentRange: ReturnType<typeof getTreatmentRange>;\n820\t}) => {\n821\t  if (!page.roi.comparison) {\n822\t    return page.roi.afterComparison ? (\n823\t      <article className=\"rounded-2xl bg-white p-6 ring-1 ring-foreground/[0.06] lg:p-8\">\n824\t        <p className=\"font-body text-base leading-relaxed text-foreground/66 lg:text-lg\">\n825\t          {page.roi.afterComparison}\n826\t        </p>\n827\t      </article>\n828\t    ) : null;\n829\t  }\n830\t\n831\t  const options = page.roi.comparison.headers.slice(1);\n832\t  const rows = page.roi.comparison.rows;\n833\t  const investment = rows.find((row) => row[0].toLowerCase().includes('investment'));\n834\t  const duration = rows.find((row) => {\n835\t    const key = row[0].toLowerCase();\n836\t    return key.includes('life') || key.includes('durat') || key.includes('lifespan');\n837\t  });\n838\t  const activity = rows.find((row) => {\n839\t    const key = row[0].toLowerCase();\n840\t    return key.includes('activity') || key.includes('operation');\n841\t  });\n842\t  const treatmentMidpoint = (treatmentRange.min + treatmentRange.max) / 2;\n843\t\n844\t  return (\n845\t    <div className=\"grid gap-4 lg:grid-cols-3\">\n846\t      {options.map((option, optionIndex) => {\n847\t        const isCovalba = optionIndex === 0;\n848\t        const rawInvestment = investment?.[optionIndex + 1] ?? '';\n849\t        const parsedPrice = parsePricePerM2(rawInvestment);\n850\t        const pricePerM2 = parsedPrice ?? getFallbackPricePerM2(option, optionIndex, treatmentMidpoint);\n851\t        const dynamicInvestment = pricePerM2 ? `~${formatCurrency(surface * pricePerM2)}` : displayCell(rawInvestment);\n852\t\n853\t        return (\n854\t          <article\n855\t            key={option}\n856\t            className={`rounded-2xl p-6 ring-1 ${\n857\t              isCovalba\n858\t                ? 'bg-[#142333] text-white ring-transparent'\n859\t                : 'bg-white text-foreground ring-foreground/[0.06]'\n860\t            }`}\n861\t          >\n862\t            <div className=\"mb-6 flex items-start justify-between gap-4\">\n863\t              <h3 className=\"font-satoshi text-xl font-black leading-tight\">{option}</h3>\n864\t              {isCovalba && (\n865\t                <span className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-teal-vivid/15 text-teal-vivid\">\n866\t                  <Check className=\"h-4 w-4\" strokeWidth={2.4} />\n867\t                </span>\n868\t              )}\n869\t            </div>\n870\t            <p className={`font-satoshi text-3xl font-black leading-none ${isCovalba ? 'text-teal-vivid' : 'text-terracotta'}`}>\n871\t              {dynamicInvestment}\n872\t            </p>\n873\t            {pricePerM2 && (\n874\t              <p className={`mt-2 font-body text-xs font-semibold ${isCovalba ? 'text-white/45' : 'text-foreground/40'}`}>\n875\t                basis {new Intl.NumberFormat('en-US').format(surface)} m² · {pricePerM2.toLocaleString('en-US')} €/m²\n876\t              </p>\n877\t            )}\n878\t            <dl className=\"mt-6 space-y-3 border-t border-current/10 pt-5\">\n879\t              {[duration, activity].filter(Boolean).map((row) => (\n880\t                <div key={row![0]} className=\"grid grid-cols-[0.75fr_1fr] gap-4\">\n881\t                  <dt className={`font-body text-xs font-bold uppercase tracking-[0.14em] ${isCovalba ? 'text-white/38' : 'text-foreground/35'}`}>\n882\t                    {displayCell(row![0])}\n883\t                  </dt>\n884\t                  <dd className={`font-body text-sm leading-relaxed ${isCovalba ? 'text-white/74' : 'text-foreground/62'}`}>\n885\t                    {displayCell(row![optionIndex + 1])}\n886\t                  </dd>\n887\t                </div>\n888\t              ))}\n889\t            </dl>\n890\t          </article>\n891\t        );\n892\t      })}\n893\t    </div>\n894\t  );\n895\t};\n896\t\n897\tconst ROICalculator = ({\n898\t  page,\n899\t  surface,\n900\t  selectedSituation,\n901\t  treatmentRange,\n902\t  onSurfaceChange,\n903\t  onSituationChange,\n904\t}: {\n905\t  page: RoofPageData;\n906\t  surface: number;\n907\t  selectedSituation: string;\n908\t  treatmentRange: ReturnType<typeof getTreatmentRange>;\n909\t  onSurfaceChange: (surface: number) => void;\n910\t  onSituationChange: (situation: string) => void;\n911\t}) => {\n912\t  const treatmentLow = surface * treatmentRange.min;\n913\t  const treatmentHigh = surface * treatmentRange.max;\n914\t  const referencePrice = selectedSituation.toLowerCase().includes('insulation') ? 150 : 90;\n915\t  const referenceCost = surface * referencePrice;\n916\t  const potentialGap = Math.max(referenceCost - treatmentHigh, 0);\n917\t\n918\t  return (\n919\t    <div className=\"mb-10 rounded-[2rem] bg-[#142333] p-5 text-white shadow-[0_34px_90px_-64px_hsl(var(--navy)/0.65)] lg:p-8\">\n920\t      <div className=\"grid gap-7 lg:grid-cols-[0.88fr_1.12fr] lg:items-end\">\n921\t        <div>\n922\t          <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-teal-vivid/70\">\n923\t            Indicative calculator\n924\t          </p>\n925\t          <h3 className=\"mt-4 max-w-lg font-satoshi text-2xl font-black leading-tight lg:text-3xl\">\n926\t            Adjust the surface and the condition of the roof.\n927\t          </h3>\n928\t          <p className=\"mt-3 max-w-lg font-body text-sm leading-relaxed text-white/52\">\n929\t            Default: 5,000 m², a typical surface for a warehouse or industrial building to treat.\n930\t          </p>\n931\t        </div>\n932\t\n933\t        <div className=\"grid gap-3 sm:grid-cols-[0.72fr_1.28fr]\">\n934\t          <label className=\"block\">\n935\t            <span className=\"mb-2 block font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/40\">\n936\t              Surface\n937\t            </span>\n938\t            <input\n939\t              type=\"number\"\n940\t              min={100}\n941\t              step={100}\n942\t              value={surface}\n943\t              onChange={(event) => onSurfaceChange(Math.max(100, Number(event.target.value) || 100))}\n944\t              className=\"h-12 w-full rounded-xl border border-white/10 bg-white/[0.07] px-4 font-body text-sm font-semibold text-white outline-none transition focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20\"\n945\t              aria-label=\"Surface to treat in square meters\"\n946\t            />\n947\t          </label>\n948\t          <label className=\"block\">\n949\t            <span className=\"mb-2 block font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/40\">\n950\t              Situation\n951\t            </span>\n952\t            <select\n953\t              value={selectedSituation}\n954\t              onChange={(event) => onSituationChange(event.target.value)}\n955\t              className=\"h-12 w-full rounded-xl border border-white/10 bg-white/[0.07] px-4 font-body text-sm font-semibold text-white outline-none transition focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20\"\n956\t              aria-label=\"Roof situation\"\n957\t            >\n958\t              {page.roi.situation.rows.map((row) => (\n959\t                <option key={row[0]} value={row[0]} className=\"bg-card text-foreground\">\n960\t                  {row[0]}\n961\t                </option>\n962\t              ))}\n963\t            </select>\n964\t          </label>\n965\t        </div>\n966\t      </div>\n967\t\n968\t      <div className=\"mt-7 grid gap-3 md:grid-cols-3\">\n969\t        {[\n970\t          {\n971\t            label: treatmentRange.label,\n972\t            value: `${formatCurrency(treatmentLow)} - ${formatCurrency(treatmentHigh)}`,\n973\t            detail: `${treatmentRange.min}-${treatmentRange.max} €/m² depending on preparation`,\n974\t            valueClass: 'text-teal-vivid',\n975\t          },\n976\t          {\n977\t            label: 'Reference refurbishment',\n978\t            value: `~${formatCurrency(referenceCost)}`,\n979\t            detail: `${referencePrice} €/m², order of magnitude for comparison`,\n980\t            valueClass: 'text-terracotta',\n981\t          },\n982\t          {\n983\t            label: 'Potential gap',\n984\t            value: `up to ${formatCurrency(potentialGap)}`,\n985\t            detail: 'Heavy investment avoided or deferred if the substrate is viable',\n986\t            valueClass: 'text-teal-vivid',\n987\t          },\n988\t        ].map((item) => (\n989\t          <article key={item.label} className=\"rounded-2xl bg-white/[0.07] p-5 ring-1 ring-white/10\">\n990\t            <p className=\"font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/38\">{item.label}</p>\n991\t            <p className={`mt-3 font-satoshi text-2xl font-black leading-tight ${item.valueClass}`}>{item.value}</p>\n992\t            <p className=\"mt-2 font-body text-xs leading-relaxed text-white/45\">{item.detail}</p>\n993\t          </article>\n994\t        ))}\n995\t      </div>\n996\t      <p className=\"mt-4 font-body text-xs leading-relaxed text-white/38\">\n997\t        Indicative estimate: the study adjusts the price based on access, preparation, detailing points and the actual condition of the substrate.\n998\t      </p>\n999\t    </div>\n1000\t  );\n1001\t};\n1002\t\n1003\tconst getSituationImage = (recommendation: string) => {\n1004\t  const lower = recommendation.toLowerCase();\n1005\t  if (lower.includes('covametal')) return covaMetalProduct;\n1006\t  if (lower.includes('covaseal')) return covaSealProduct;\n1007\t  if (lower.includes('cova')) return covaTherm20Product;\n1008\t  return covaTherm8Product;\n1009\t};\n1010\t\n1011\tconst SituationCards = ({ rows }: { rows: string[][] }) => (\n1012\t  <div className=\"grid gap-4 md:grid-cols-2\">\n1013\t    {rows.map((row) => (\n1014\t      <article key={row[0]} className=\"grid gap-4 rounded-2xl bg-white p-4 ring-1 ring-foreground/[0.06] sm:grid-cols-[128px_1fr] lg:grid-cols-[190px_1fr] lg:gap-5 lg:p-5\">\n1015\t        <div className=\"flex aspect-[4/3] items-center justify-center rounded-xl bg-gradient-to-br from-cream to-white p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.75),_0_18px_44px_-34px_hsl(var(--navy)/0.45)] ring-1 ring-foreground/[0.04] sm:aspect-square lg:p-6\">\n1016\t          <img src={getSituationImage(row[1])} alt=\"\" className=\"max-h-full max-w-full object-contain\" loading=\"lazy\" decoding=\"async\" />\n1017\t        </div>\n1018\t        <div className=\"self-center\">\n1019\t          <p className=\"font-satoshi text-lg font-bold leading-tight text-foreground\">{row[0]}</p>\n1020\t          <p className=\"mt-2 font-body text-sm font-bold text-primary\">{row[1]}</p>\n1021\t          <p className=\"mt-2 font-body text-sm leading-relaxed text-foreground/58\">{row[2]}</p>\n1022\t        </div>\n1023\t      </article>\n1024\t    ))}\n1025\t  </div>\n1026\t);\n1027\t\n1028\tconst ROISection = ({ page }: { page: RoofPageData }) => {\n1029\t  const [surface, setSurface] = useState(5000);\n1030\t  const [selectedSituation, setSelectedSituation] = useState(page.roi.situation.rows[0]?.[0] ?? '');\n1031\t  const treatmentRange = getTreatmentRange(page, selectedSituation);\n1032\t\n1033\t  return (\n1034\t    <section className=\"bg-cream py-20 lg:py-32\">\n1035\t      <div className=\"container mx-auto px-4 lg:px-8\">\n1036\t      <ScrollReveal>\n1037\t        <div className=\"mx-auto mb-12 max-w-3xl text-center lg:mb-16\">\n1038\t          <div className=\"flex justify-center\">\n1039\t            <Label>{page.roi.badge}</Label>\n1040\t          </div>\n1041\t          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-[3rem]\">\n1042\t            {page.roi.title}\n1043\t          </h2>\n1044\t          <p className=\"mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-foreground/58 lg:text-lg\">\n1045\t            {page.roi.intro}\n1046\t          </p>\n1047\t        </div>\n1048\t      </ScrollReveal>\n1049\t\n1050\t      <ScrollReveal>\n1051\t        <div className=\"mb-12 grid gap-4 md:grid-cols-3\">\n1052\t          {[\n1053\t            ['20-25 €/m²', 'to treat and cool down'],\n1054\t            ['8-10 years', 'of refurbishment deferred'],\n1055\t            ['0 downtime', 'during the works'],\n1056\t          ].map(([value, label]) => (\n1057\t            <article key={value} className=\"rounded-2xl bg-white p-6 text-center ring-1 ring-foreground/[0.06]\">\n1058\t              <p className=\"font-satoshi text-4xl font-black leading-none text-primary\">{value}</p>\n1059\t              <p className=\"mt-3 font-body text-sm font-semibold text-foreground/52\">{label}</p>\n1060\t            </article>\n1061\t          ))}\n1062\t        </div>\n1063\t      </ScrollReveal>\n1064\t\n1065\t      <ScrollReveal>\n1066\t        <div className=\"mb-8 max-w-2xl\">\n1067\t          <div>\n1068\t            <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55\">\n1069\t              Compare the options\n1070\t            </p>\n1071\t            <h3 className=\"mt-4 font-satoshi text-2xl font-black leading-tight text-foreground lg:text-3xl\">\n1072\t              A quick read on the budget.\n1073\t            </h3>\n1074\t          </div>\n1075\t        </div>\n1076\t      </ScrollReveal>\n1077\t\n1078\t      <ScrollReveal>\n1079\t        <ROICalculator\n1080\t          page={page}\n1081\t          surface={surface}\n1082\t          selectedSituation={selectedSituation}\n1083\t          treatmentRange={treatmentRange}\n1084\t          onSurfaceChange={setSurface}\n1085\t          onSituationChange={setSelectedSituation}\n1086\t        />\n1087\t      </ScrollReveal>\n1088\t\n1089\t      <ScrollReveal>\n1090\t        <RoiOptionCards page={page} surface={surface} treatmentRange={treatmentRange} />\n1091\t        {page.roi.comparison && page.roi.afterComparison && (\n1092\t          <p className=\"mt-5 max-w-3xl font-body text-sm leading-relaxed text-foreground/52 lg:text-base\">\n1093\t            {page.roi.afterComparison}\n1094\t          </p>\n1095\t        )}\n1096\t      </ScrollReveal>\n1097\t\n1098\t      <ScrollReveal>\n1099\t        <div className=\"mt-16 rounded-[2rem] bg-white p-5 ring-1 ring-foreground/[0.06] lg:mt-20 lg:p-8\">\n1100\t          <div className=\"mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between\">\n1101\t            <div>\n1102\t              <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55\">\n1103\t                Decide on the actual condition\n1104\t              </p>\n1105\t              <h3 className=\"mt-4 max-w-xl font-satoshi text-2xl font-black leading-tight text-foreground lg:text-3xl\">\n1106\t                Which solution for your roof?\n1107\t              </h3>\n1108\t            </div>\n1109\t            <PrimaryCTA label={page.roi.cta} href={CTA_HREF} />\n1110\t          </div>\n1111\t          <SituationCards rows={page.roi.situation.rows} />\n1112\t        </div>\n1113\t      </ScrollReveal>\n1114\t    </div>\n1115\t  </section>\n1116\t  );\n1117\t};\n1118\t\n1119\tconst DiagnosticCTA = ({ title, text }: { title: string; text: string }) => (\n1120\t  <section className=\"relative overflow-hidden bg-[#182A3A] py-14 text-white lg:py-20\">\n1121\t    <div\n1122\t      aria-hidden=\"true\"\n1123\t      className=\"absolute inset-0 opacity-35\"\n1124\t      style={{\n1125\t        backgroundImage:\n1126\t          'radial-gradient(circle at 16% 20%, rgba(83, 207, 166, 0.22), transparent 28%), linear-gradient(115deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 120px)',\n1127\t      }}\n1128\t    />\n1129\t    <div className=\"container relative mx-auto px-4 lg:px-8\">\n1130\t      <ScrollReveal>\n1131\t        <div className=\"mx-auto grid max-w-5xl gap-7 lg:grid-cols-[1fr_auto] lg:items-center\">\n1132\t          <div>\n1133\t            <h2 className=\"font-satoshi text-2xl font-black leading-tight lg:text-4xl\">{title}</h2>\n1134\t            <p className=\"mt-3 max-w-2xl font-body text-sm leading-relaxed text-white/68 lg:text-base\">{text}</p>\n1135\t          </div>\n1136\t          <div className=\"flex flex-col gap-3 sm:flex-row lg:justify-end\">\n1137\t            <PrimaryCTA label=\"Request a quote\" href={CTA_HREF} />\n1138\t          </div>\n1139\t        </div>\n1140\t      </ScrollReveal>\n1141\t    </div>\n1142\t  </section>\n1143\t);\n1144\t\n1145\tconst MethodSection = ({ page }: { page: RoofPageData }) => {\n1146\t  const [videoOpen, setVideoOpen] = useState(false);\n1147\t\n1148\t  return (\n1149\t    <section className=\"bg-white py-16 lg:py-32\">\n1150\t      <div className=\"container mx-auto px-4 lg:px-8\">\n1151\t        <div className=\"flex flex-col items-start gap-12 lg:flex-row lg:gap-20\">\n1152\t          <div className=\"lg:sticky lg:top-[120px] lg:w-[40%]\">\n1153\t            <ScrollReveal>\n1154\t              <p className=\"mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/50\">\n1155\t                The process\n1156\t              </p>\n1157\t              <h2\n1158\t                className=\"mb-6 font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n1159\t                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n1160\t              >\n1161\t                4 steps. Zero interruption.\n1162\t                <span className=\"text-foreground/30\"> Zero risk.</span>\n1163\t              </h2>\n1164\t              <p className=\"mb-8 font-body text-base leading-relaxed text-muted-foreground lg:text-lg\">\n1165\t                {page.method.reassurance}\n1166\t              </p>\n1167\t              <button\n1168\t                onClick={() => setVideoOpen(true)}\n1169\t                className=\"group flex items-center gap-3 text-primary transition-colors hover:text-primary\"\n1170\t              >\n1171\t                <span className=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 transition-colors group-hover:bg-primary/20\">\n1172\t                  <Play className=\"h-5 w-5\" />\n1173\t                </span>\n1174\t                <span className=\"font-body text-sm font-semibold\">Watch a project in 2 minutes</span>\n1175\t              </button>\n1176\t            </ScrollReveal>\n1177\t          </div>\n1178\t\n1179\t          <div className=\"relative lg:w-[60%]\">\n1180\t            <div className=\"absolute bottom-4 left-5 top-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent lg:left-6\" />\n1181\t            <div className=\"flex flex-col\">\n1182\t              {page.method.steps.map((step, index) => {\n1183\t                const Icon = methodIcons[index] ?? CheckCircle2;\n1184\t                return (\n1185\t                  <ScrollReveal key={step.title}>\n1186\t                    <div className=\"group relative flex items-start gap-5 py-8 lg:gap-7 lg:py-10\">\n1187\t                      <span className=\"relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-primary/10 transition-colors duration-500 group-hover:bg-primary/15 lg:h-12 lg:w-12\">\n1188\t                        <Icon className=\"h-4 w-4 text-primary lg:h-5 lg:w-5\" />\n1189\t                      </span>\n1190\t                      <div className=\"pt-1\">\n1191\t                        <span className=\"mb-2 block font-body text-xs font-bold uppercase tracking-widest text-primary/50\">\n1192\t                          Step 0{index + 1}\n1193\t                        </span>\n1194\t                        <h3 className=\"mb-2 font-satoshi text-xl font-bold text-foreground lg:text-2xl\">\n1195\t                          {step.title}\n1196\t                        </h3>\n1197\t                        <p className=\"max-w-md font-body text-sm leading-relaxed text-muted-foreground lg:text-base\">\n1198\t                          {step.text}\n1199\t                        </p>\n1200\t                      </div>\n1201\t                    </div>\n1202\t                    {index < page.method.steps.length - 1 && <div className=\"ml-5 h-px bg-border lg:ml-6\" />}\n1203\t                  </ScrollReveal>\n1204\t                );\n1205\t              })}\n1206\t            </div>\n1207\t\n1208\t            <ScrollReveal>\n1209\t              <div className=\"ml-16 mt-4 lg:ml-20\">\n1210\t                <p className=\"font-body text-xs font-medium text-muted-foreground/50\">\n1211\t                  Average duration: 3 days · No interruption of activity\n1212\t                </p>\n1213\t              </div>\n1214\t            </ScrollReveal>\n1215\t          </div>\n1216\t        </div>\n1217\t      </div>\n1218\t\n1219\t      <Dialog open={videoOpen} onOpenChange={setVideoOpen}>\n1220\t        <DialogContent className=\"max-w-4xl overflow-hidden border-none bg-black p-0\">\n1221\t          <div className=\"aspect-video\">\n1222\t            <iframe\n1223\t              src=\"https://www.youtube.com/embed/9HOB5OVH0Ac?autoplay=1\"\n1224\t              className=\"h-full w-full\"\n1225\t              allow=\"autoplay; encrypted-media\"\n1226\t              allowFullScreen\n1227\t              title=\"Covalba Cool Roof, a project in 2 minutes\"\n1228\t            />\n1229\t          </div>\n1230\t        </DialogContent>\n1231\t      </Dialog>\n1232\t    </section>\n1233\t  );\n1234\t};\n1235\t\n1236\tconst ProofSection = ({ page }: { page: RoofPageData }) => (\n1237\t  <section className=\"bg-[#192A3A] py-20 text-white lg:py-32\">\n1238\t    <div className=\"container mx-auto px-4 lg:px-8\">\n1239\t      <ScrollReveal>\n1240\t        <div className=\"mb-12 grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-end\">\n1241\t          <div>\n1242\t            <Label light>{page.proof.badge}</Label>\n1243\t            <h2 className=\"font-satoshi text-3xl font-black leading-tight sm:text-4xl lg:text-5xl\">{page.proof.title}</h2>\n1244\t          </div>\n1245\t          <p className=\"max-w-xl font-body text-base leading-relaxed text-white/62\">\n1246\t            Field figures to be confirmed project by project, used here as performance benchmarks.\n1247\t          </p>\n1248\t        </div>\n1249\t      </ScrollReveal>\n1250\t\n1251\t      <ScrollReveal stagger>\n1252\t        <div className=\"grid gap-4 md:grid-cols-3\">\n1253\t          {page.proof.figures.map((figure, index) => {\n1254\t            const Icon = proofIcons[index] ?? BadgeCheck;\n1255\t            return (\n1256\t              <article key={figure.value} className=\"rounded-2xl border border-white/10 bg-white/[0.045] p-7\">\n1257\t                <Icon className=\"mb-6 h-6 w-6 text-teal-vivid\" strokeWidth={1.7} />\n1258\t                <p className=\"font-satoshi text-3xl font-black leading-none text-white lg:text-4xl\">{figure.value}</p>\n1259\t                <p className=\"mt-3 font-body text-sm leading-relaxed text-white/60\">{figure.label}</p>\n1260\t              </article>\n1261\t            );\n1262\t          })}\n1263\t        </div>\n1264\t      </ScrollReveal>\n1265\t\n1266\t      <ScrollReveal>\n1267\t        <div className=\"mt-14 border-t border-white/10 pt-10\">\n1268\t          <p className=\"mb-8 text-center font-body text-[10px] font-bold uppercase tracking-[0.22em] text-white/42\">\n1269\t            Client references\n1270\t          </p>\n1271\t          <div className=\"flex flex-wrap items-center justify-center gap-x-10 gap-y-7 lg:gap-x-14\">\n1272\t            {logos.map((logo) => (\n1273\t              <span key={logo.name} className=\"flex h-8 w-28 items-center justify-center\">\n1274\t                <img\n1275\t                  src={logo.url}\n1276\t                  alt={logo.name}\n1277\t                  className=\"max-h-7 max-w-full object-contain opacity-45 transition-opacity duration-300 hover:opacity-80\"\n1278\t                  style={{ filter: 'brightness(0) invert(1)' }}\n1279\t                  loading=\"lazy\"\n1280\t                />\n1281\t              </span>\n1282\t            ))}\n1283\t          </div>\n1284\t        </div>\n1285\t      </ScrollReveal>\n1286\t    </div>\n1287\t  </section>\n1288\t);\n1289\t\n1290\tconst FAQSection = ({ faq }: { faq: RoofPageData['faq'] }) => (\n1291\t  <section className=\"bg-cream py-20 lg:py-32\">\n1292\t    <div className=\"container mx-auto px-4 lg:px-8\">\n1293\t      <div className=\"grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:gap-16\">\n1294\t        <ScrollReveal>\n1295\t          <div className=\"lg:sticky lg:top-24\">\n1296\t            <Label>FAQ</Label>\n1297\t            <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl\">\n1298\t              Your questions,\n1299\t              <br />\n1300\t              <span className=\"text-foreground/40\">our answers.</span>\n1301\t            </h2>\n1302\t            <a href=\"#contact\" className=\"group mt-8 inline-flex items-center gap-2 font-body text-sm font-semibold text-primary transition-all hover:gap-3\">\n1303\t              Another question? Let's talk\n1304\t              <ArrowRight className=\"h-4 w-4\" />\n1305\t            </a>\n1306\t          </div>\n1307\t        </ScrollReveal>\n1308\t\n1309\t        <ScrollReveal>\n1310\t          <Accordion type=\"single\" collapsible className=\"space-y-3\">\n1311\t            {faq.map((item, index) => (\n1312\t              <AccordionItem\n1313\t                key={item.q}\n1314\t                value={`roof-faq-${index}`}\n1315\t                className=\"rounded-xl border border-foreground/[0.06] bg-white px-5 shadow-[0_12px_34px_rgba(24,42,58,0.04)] data-[state=open]:border-primary/20 lg:px-6\"\n1316\t              >\n1317\t                <AccordionTrigger className=\"py-5 text-left font-satoshi text-base font-bold text-foreground hover:no-underline lg:text-[17px]\">\n1318\t                  {item.q}\n1319\t                </AccordionTrigger>\n1320\t                <AccordionContent className=\"pb-5 font-body text-[14.5px] leading-relaxed text-foreground/67 lg:text-[15px]\">\n1321\t                  {item.a}\n1322\t                </AccordionContent>\n1323\t              </AccordionItem>\n1324\t            ))}\n1325\t          </Accordion>\n1326\t        </ScrollReveal>\n1327\t      </div>\n1328\t    </div>\n1329\t  </section>\n1330\t);\n1331\t\n1332\tconst FinalCTA = ({ page }: { page: RoofPageData }) => (\n1333\t  <section id=\"contact\" className=\"overflow-hidden bg-[#182A3A] py-20 text-white lg:py-32\">\n1334\t    <div className=\"container mx-auto px-4 lg:px-8\">\n1335\t      <ScrollReveal>\n1336\t        <div className=\"mx-auto max-w-4xl text-center\">\n1337\t          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl\">\n1338\t            {page.finalCta.title}\n1339\t          </h2>\n1340\t          <p className=\"mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-white/72 lg:text-lg\">\n1341\t            {page.finalCta.text}\n1342\t          </p>\n1343\t          <div className=\"mt-9 flex flex-col gap-3 sm:flex-row sm:justify-center\">\n1344\t            <PrimaryCTA label=\"Request a quote\" href={CTA_HREF} />\n1345\t          </div>\n1346\t        </div>\n1347\t      </ScrollReveal>\n1348\t\n1349\t      <ScrollReveal>\n1350\t        <ul className=\"mx-auto mt-12 grid max-w-3xl gap-3 sm:grid-cols-3\">\n1351\t          {page.finalCta.reassurances.map((item) => (\n1352\t            <li key={item} className=\"flex items-center justify-center gap-2.5 rounded-lg border border-white/[0.12] bg-white/[0.045] px-4 py-3\">\n1353\t              <CalendarCheck className=\"h-4 w-4 shrink-0 text-teal-vivid\" strokeWidth={1.8} />\n1354\t              <span className=\"font-body text-sm text-white/[0.76]\">{item}</span>\n1355\t            </li>\n1356\t          ))}\n1357\t        </ul>\n1358\t      </ScrollReveal>\n1359\t    </div>\n1360\t  </section>\n1361\t);\n1362\t\n1363\tconst SEOContent = ({ page }: { page: RoofPageData }) => (\n1364\t  <section className=\"bg-white py-20 lg:py-28\">\n1365\t    <div className=\"container mx-auto px-4 lg:px-8\">\n1366\t      <ScrollReveal>\n1367\t        <article className=\"mx-auto max-w-3xl\">\n1368\t          <p className=\"mb-5 font-body text-[10px] font-bold uppercase tracking-[0.25em] text-primary/55\">\n1369\t            Substrate guide\n1370\t          </p>\n1371\t          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground lg:text-4xl\">\n1372\t            Everything you need to know about {page.eyebrow.toLowerCase()}.\n1373\t          </h2>\n1374\t          <p className=\"mt-6 font-body text-base leading-relaxed text-foreground/68 lg:text-lg\">\n1375\t            {page.seo.intro}\n1376\t          </p>\n1377\t\n1378\t          <div className=\"mt-10 space-y-9\">\n1379\t            {page.seo.sections.map((section) => (\n1380\t              <section key={section.title}>\n1381\t                <h3 className=\"font-satoshi text-2xl font-bold leading-tight text-foreground\">{section.title}</h3>\n1382\t                <p className=\"mt-3 font-body text-base leading-relaxed text-foreground/66\">{section.text}</p>\n1383\t              </section>\n1384\t            ))}\n1385\t          </div>\n1386\t\n1387\t          <div className=\"mt-12 rounded-2xl bg-cream p-6 ring-1 ring-foreground/[0.05]\">\n1388\t            <h3 className=\"font-satoshi text-lg font-bold text-foreground\">Sources</h3>\n1389\t            <ul className=\"mt-4 space-y-2\">\n1390\t              {page.seo.sources.map((source) => (\n1391\t                <li key={source.href}>\n1392\t                  <a href={source.href} className=\"font-body text-sm leading-relaxed text-primary underline-offset-4 hover:underline\" target=\"_blank\" rel=\"noreferrer\">\n1393\t                    {source.label}\n1394\t                  </a>\n1395\t                </li>\n1396\t              ))}\n1397\t            </ul>\n1398\t          </div>\n1399\t        </article>\n1400\t      </ScrollReveal>\n1401\t    </div>\n1402\t  </section>\n1403\t);\n1404\t\n1405\tconst buildFaqSchema = (page: RoofPageData) => ({\n1406\t  '@context': 'https://schema.org',\n1407\t  '@type': 'FAQPage',\n1408\t  mainEntity: page.faq.map((item) => ({\n1409\t    '@type': 'Question',\n1410\t    name: item.q,\n1411\t    acceptedAnswer: {\n1412\t      '@type': 'Answer',\n1413\t      text: item.a,\n1414\t    },\n1415\t  })),\n1416\t});\n1417\t\n1418\tconst buildBreadcrumbSchema = (page: RoofPageData) => ({\n1419\t  '@context': 'https://schema.org',\n1420\t  '@type': 'BreadcrumbList',\n1421\t  itemListElement: [\n1422\t    { '@type': 'ListItem', position: 1, name: 'Home', item: `${SITE_URL}/en` },\n1423\t    { '@type': 'ListItem', position: 2, name: 'Roofs', item: `${SITE_URL}/en` },\n1424\t    { '@type': 'ListItem', position: 3, name: page.breadcrumb, item: page.canonical },\n1425\t  ],\n1426\t});\n1427\t\n1428\tconst RoofPageTemplateEN = ({ page }: RoofPageTemplateENProps) => {\n1429\t  usePageMeta({\n1430\t    title: page.title,\n1431\t    description: page.description,\n1432\t    canonical: page.canonical,\n1433\t  });\n1434\t  useJsonLd(`roof-en-${page.slug}-faq`, buildFaqSchema(page));\n1435\t  useJsonLd(`roof-en-${page.slug}-breadcrumb`, buildBreadcrumbSchema(page));\n1436\t\n1437\t  return (\n1438\t    <>\n1439\t      <NavbarEN />\n1440\t      <main>\n1441\t        <RoofHero page={page} />\n1442\t        <ProblemSection page={page} />\n1443\t        <SolutionSection page={page} />\n1444\t        <BenefitsSection page={page} />\n1445\t        <ROISection page={page} />\n1446\t        <DiagnosticCTA title={page.midCta.title} text={page.midCta.text} />\n1447\t        <MethodSection page={page} />\n1448\t        <ProofSection page={page} />\n1449\t        <FAQSection faq={page.faq} />\n1450\t        <FinalCTA page={page} />\n1451\t        <SEOContent page={page} />\n1452\t      </main>\n1453\t      <FooterEN />\n1454\t      <StickyMobileCTAEN />\n1455\t    </>\n1456\t  );\n1457\t};\n1458\t\n1459\texport default RoofPageTemplateEN;\n1460\t"}]},"uuid":"f405b837-a198-4fd6-8e3b-6218e6e8211e","timestamp":"2026-06-22T14:54:38.347Z","toolUseResult":{"type":"text","file":{"filePath":"/opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/src/components/en/roof/RoofPageTemplateEN.tsx","content":"import { useState } from 'react';\nimport {\n  ArrowRight,\n  BadgeCheck,\n  CalendarClock,\n  CalendarCheck,\n  Check,\n  CheckCircle2,\n  ChevronDown,\n  Factory,\n  HelpCircle,\n  Play,\n  ShieldCheck,\n  ShieldAlert,\n  Sparkles,\n  SunMedium,\n  Thermometer,\n  TrendingDown,\n  Users,\n  Wrench,\n  ClipboardCheck,\n  type LucideIcon,\n} from 'lucide-react';\n\nimport FooterEN from '@/components/en/FooterEN';\nimport NavbarEN from '@/components/en/NavbarEN';\nimport ScrollReveal from '@/components/ScrollReveal';\nimport StickyMobileCTAEN from '@/components/en/StickyMobileCTAEN';\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';\nimport { Dialog, DialogContent } from '@/components/ui/dialog';\nimport { useJsonLd, usePageMeta } from '@/hooks/usePageMeta';\nimport { type RoofPageData, type TextCard } from '@/data/roofPages';\nimport coolRoofLayers from '@/assets/cool-roof-layers.webp';\nimport covaMetalProduct from '@/assets/produits/Covalba-CovaMetal20-Duo-Produit.webp';\nimport covaSealProduct from '@/assets/produits/Covalba-CovaSeal20-Duo-Produit.webp';\nimport covaTherm8Product from '@/assets/produits/Covalba-CovaTherm8-Produit.webp';\nimport covaTherm20Product from '@/assets/produits/Covalba-CovaTherm20-Produit.webp';\n\ninterface RoofPageTemplateENProps {\n  page: RoofPageData;\n}\n\nconst SITE_URL = 'https://www.covalba.fr';\n\n// Internal route for all CTAs on the EN site. There is no dedicated EN\n// diagnostic/contact route yet, so every conversion CTA points to the EN home.\nconst CTA_HREF = '/en';\n\nconst cardIcons: LucideIcon[] = [SunMedium, Wrench, Factory, ShieldCheck];\nconst methodIcons: LucideIcon[] = [ClipboardCheck, CalendarClock, ShieldCheck, TrendingDown];\nconst proofIcons: LucideIcon[] = [Thermometer, ShieldCheck, BadgeCheck];\nconst problemIcons: LucideIcon[] = [Users, SunMedium, ShieldAlert];\n\nconst logos = [\n  { name: 'Continental', url: '/logos/logo-continental.svg' },\n  { name: 'Thales', url: '/logos/logo-thales.svg' },\n  { name: 'Nestlé', url: '/logos/logo-nestle.svg' },\n  { name: 'SNCF', url: '/logos/logo-sncf.svg' },\n  { name: 'Leclerc', url: '/logos/logo-leclerc.svg' },\n  { name: 'Super U', url: '/logos/logo-super-u.svg' },\n];\n\nconst displayCell = (value: string) => value.replace(/EUR/g, '€').replace(/m2/g, 'm²');\n\nconst formatCurrency = (value: number) =>\n  `${new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(Math.round(value))} €`;\n\nconst parsePricePerM2 = (value: string) => {\n  const match = displayCell(value).match(/\\(([\\d,.]+)\\s*€\\/m²\\)/);\n  if (!match) return null;\n\n  return Number.parseFloat(match[1].replace(',', '.'));\n};\n\nconst getTreatmentRange = (page: RoofPageData, situation: string) => {\n  const text = `${page.slug} ${situation}`.toLowerCase();\n\n  if (\n    text.includes('covaseal') ||\n    text.includes('membrane-bitumineuse') ||\n    text.includes('toiture-plate') ||\n    text.includes('aging') ||\n    text.includes('leak')\n  ) {\n    return { min: 28, max: 38, label: 'CovaSeal 20 estimate' };\n  }\n\n  if (\n    text.includes('covametal') ||\n    text.includes('bac-acier') ||\n    text.includes('corrosion') ||\n    text.includes('steel')\n  ) {\n    return { min: 24, max: 32, label: 'CovaMetal 20 estimate' };\n  }\n\n  if (text.includes('fibrociment') || text.includes('fiber') || text.includes('sheets')) {\n    return { min: 22, max: 28, label: 'CovaTherm sensitive substrate' };\n  }\n\n  return { min: 20, max: 25, label: 'CovaTherm estimate' };\n};\n\nconst getFallbackPricePerM2 = (option: string, optionIndex: number, treatmentMidpoint: number) => {\n  const lower = option.toLowerCase();\n\n  if (optionIndex === 0) return treatmentMidpoint;\n  if (lower.includes('anticorrosion') || lower.includes('repaint')) return 16;\n  if (lower.includes('replacement') || lower.includes('replace')) return 120;\n  if (lower.includes('new membrane') || lower.includes('membrane')) return 90;\n  if (lower.includes('insulation')) return 150;\n\n  return null;\n};\n\nconst benefitImages = [\n  '/images/toitures/benefit-confort.webp',\n  '/images/toitures/benefit-protection-toiture.webp',\n  '/images/toitures/benefit-clim.webp',\n  '/images/toitures/benefit-chantier-evite.webp',\n];\n\nconst feedbackRoofBenefitImages = [\n  '/images/toitures/feedback-batiment-tempere.png',\n  '/images/toitures/feedback-etancheite.png',\n  '/images/toitures/feedback-economie-clim-1.png',\n  '/images/toitures/feedback-economie-clim-3.png',\n];\n\nconst getBenefitImage = (page: RoofPageData, benefit: TextCard, index: number) => {\n  if (['membrane-bitumineuse', 'toiture-plate'].includes(page.slug)) {\n    return feedbackRoofBenefitImages[index] ?? feedbackRoofBenefitImages[0];\n  }\n\n  const text = `${benefit.title} ${benefit.text}`.toLowerCase();\n\n  if (page.slug === 'bac-acier' && (text.includes('steel') || text.includes('corrosion') || text.includes('rust'))) {\n    return '/images/toitures/support-bac-acier-cool.webp';\n  }\n\n  if (text.includes('bill') || text.includes('cooling') || text.includes('air conditioning') || text.includes('cold')) {\n    return '/images/toitures/benefit-clim.webp';\n  }\n\n  if (\n    text.includes('project') ||\n    text.includes('refurbishment') ||\n    text.includes('replacement') ||\n    text.includes('removal') ||\n    text.includes('strip')\n  ) {\n    return '/images/toitures/benefit-chantier-evite.webp';\n  }\n\n  if (\n    text.includes('protect') ||\n    text.includes('waterproof') ||\n    text.includes('corrosion') ||\n    text.includes('lifespan') ||\n    text.includes('durab')\n  ) {\n    return '/images/toitures/benefit-protection-toiture.webp';\n  }\n\n  return benefitImages[index] ?? benefitImages[0];\n};\n\nconst supportVisuals: Record<string, { hot: string; cool: string; hotLabel: string; coolLabel: string }> = {\n  'membrane-bitumineuse': {\n    hot: '/images/toitures/support-bitume-chaud.webp',\n    cool: '/images/toitures/feedback-economie-clim-2.png',\n    hotLabel: 'Without cool roof: bitumen membrane absorbing heat',\n    coolLabel: 'With cool roof: reflective membrane',\n  },\n  'bac-acier': {\n    hot: '/images/toitures/support-bac-acier-chaud.webp',\n    cool: '/images/toitures/support-bac-acier-cool.webp',\n    hotLabel: 'Without cool roof: overheating metal',\n    coolLabel: 'With cool roof: reflective, protected steel deck',\n  },\n  'toiture-plate': {\n    hot: '/images/toitures/support-toiture-plate-chaud.webp',\n    cool: '/images/toitures/feedback-economie-clim-2.png',\n    hotLabel: 'Without cool roof: roof terrace absorbing heat',\n    coolLabel: 'With cool roof: reflective roof terrace',\n  },\n  fibrociment: {\n    hot: '/images/toitures/support-fibrociment-chaud.webp',\n    cool: '/images/toitures/support-fibrociment-cool.webp',\n    hotLabel: 'Without cool roof: fiber cement absorbing heat',\n    coolLabel: 'With cool roof: protected sheets',\n  },\n  'tuiles-ciment': {\n    hot: '/images/toitures/support-tuiles-ciment-chaud.webp',\n    cool: '/images/toitures/support-tuiles-ciment-cool.webp',\n    hotLabel: 'Without cool roof: tiles storing heat',\n    coolLabel: 'With cool roof: reflective tiles',\n  },\n};\n\nconst layerTitles = ['Bonding primer', 'Reflective resin', 'Protective top coat'];\n\nconst layerColors = [\n  {\n    pill: 'bg-terracotta text-white',\n    dot: 'bg-terracotta',\n    chevron: 'text-terracotta',\n  },\n  {\n    pill: 'bg-foreground text-white',\n    dot: 'bg-foreground',\n    chevron: 'text-foreground',\n  },\n  {\n    pill: 'bg-primary text-white',\n    dot: 'bg-primary',\n    chevron: 'text-primary',\n  },\n];\n\nconst layerPositions = [\n  { top: '56.7%', left: '36.5%' },\n  { top: '48.2%', left: '36.5%' },\n  { top: '36.3%', left: '35.6%' },\n];\n\nconst getProblemTitle = (title: string) => {\n  const map: Record<string, { strong: string; muted: string }> = {\n    'A black bitumen roof is a radiator sitting on top of your building.': {\n      strong: 'Your roof heats up.',\n      muted: 'Your building takes the hit.',\n    },\n    'Steel decking heats up fast, rusts fast, and wears out fast.': {\n      strong: 'The metal heats up fast.',\n      muted: 'The roof wears out too.',\n    },\n    'Flat, your roof takes the sun all day long.': {\n      strong: 'Your roof terrace takes it all.',\n      muted: 'Heat, UV, waterproofing.',\n    },\n    'Fiber cement heats up, ages, and is expensive to remove.': {\n      strong: 'Fiber cement heats up.',\n      muted: 'Removing it is expensive.',\n    },\n    'Dark cement tiles, overheating attic space.': {\n      strong: 'The tiles store the heat.',\n      muted: 'The attic space takes it.',\n    },\n  };\n\n  return map[title] ?? { strong: title, muted: '' };\n};\n\nconst getLayerDescription = (index: number) => {\n  if (index === 0) {\n    return 'Adapts to the existing substrate. Every roof has its own chemistry, and every chemistry calls for tailored preparation and bonding.';\n  }\n\n  if (index === 1) {\n    return 'This is the heart of the system. The surface reflects solar radiation instead of absorbing it, so less heat enters the building.';\n  }\n\n  return 'A top coat protects the resin from UV, pollution and premature aging to preserve performance over time.';\n};\n\nconst getLayerExpert = (index: number) => {\n  const notes = [\n    'An unsuitable primer means a system that blisters and peels off. The substrate decides everything.',\n    'Cool roof treats the cause: the roof heats up less, so the building takes on less heat.',\n    'The difference between a paint job and an investment is how it holds up over time. The finish is there to protect performance.',\n  ];\n\n  return notes[index] ?? notes[0];\n};\n\nconst Label = ({ children, light = false }: { children: string; light?: boolean }) => (\n  <div className=\"mb-5 flex items-center gap-3\">\n    <span className={`h-px w-9 ${light ? 'bg-teal-vivid/70' : 'bg-primary/65'}`} aria-hidden=\"true\" />\n    <span\n      className={`font-body text-[11px] font-bold uppercase tracking-[0.22em] ${\n        light ? 'text-teal-vivid' : 'text-primary'\n      }`}\n    >\n      {children}\n    </span>\n  </div>\n);\n\nconst PrimaryCTA = ({ label, href }: { label: string; href: string }) => (\n  <a\n    href={href}\n    className=\"group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white\"\n  >\n    <span className=\"text-sm\">{label}</span>\n    <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5\">\n      <ArrowRight className=\"h-3.5 w-3.5\" />\n    </span>\n  </a>\n);\n\nconst RoofHero = ({ page }: { page: RoofPageData }) => {\n  const [form, setForm] = useState({ climate: '', surface: '', email: '' });\n  const [submitted, setSubmitted] = useState(false);\n  const surfaceNum = parseFloat(form.surface) || 0;\n  const estimate = surfaceNum ? `${new Intl.NumberFormat('en-US').format(surfaceNum * 22.5)} €` : '20-25 €/m²';\n\n  return (\n    <section\n      aria-labelledby={`${page.slug}-hero-title`}\n      className=\"relative isolate flex min-h-[100svh] flex-col overflow-hidden bg-navy text-cream\"\n    >\n      <img\n        src={page.heroImage}\n        alt={page.heroImageAlt}\n        className=\"absolute inset-0 -z-10 size-full scale-[1.02] object-cover\"\n        style={page.slug === 'membrane-bitumineuse' ? { objectPosition: 'center 28%' } : undefined}\n        loading=\"eager\"\n        decoding=\"async\"\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute inset-0 -z-10 hidden bg-gradient-to-r from-navy/[0.94] via-navy/62 to-navy/25 lg:block\"\n      />\n      <div\n        aria-hidden=\"true\"\n        className={`absolute inset-0 -z-10 bg-gradient-to-b lg:hidden ${\n          page.slug === 'membrane-bitumineuse'\n            ? 'from-navy/92 via-navy/58 to-navy/96'\n            : 'from-navy/84 via-navy/38 to-navy/96'\n        }`}\n      />\n      <div aria-hidden=\"true\" className=\"absolute inset-x-0 bottom-0 -z-10 h-[28%] bg-gradient-to-t from-navy via-navy/85 to-transparent\" />\n\n      <div className=\"container relative z-10 mx-auto flex flex-1 items-center px-6 pb-10 pt-24 lg:px-12 lg:pb-16 lg:pt-28\">\n        <div className=\"grid w-full grid-cols-1 items-center gap-10 lg:grid-cols-[55fr_45fr] lg:gap-12\">\n          <div className=\"max-w-2xl space-y-6 lg:space-y-8\">\n            <ScrollReveal>\n              <nav className=\"flex items-center gap-2 font-body text-xs text-cream/50\">\n                <a href=\"/en\" className=\"transition-colors hover:text-cream/75\">Home</a>\n                <span className=\"text-cream/28\">/</span>\n                <span>Roofs</span>\n                <span className=\"text-cream/28\">/</span>\n                <span className=\"text-cream/78\">{page.breadcrumb}</span>\n              </nav>\n            </ScrollReveal>\n\n            <ScrollReveal>\n              <h1\n                id={`${page.slug}-hero-title`}\n                className=\"font-satoshi font-bold leading-[1.02] text-white\"\n                style={{ fontSize: 'clamp(2.25rem, 4.6vw, 4rem)', letterSpacing: '-0.03em' }}\n              >\n                {page.h1}\n              </h1>\n            </ScrollReveal>\n\n            <ScrollReveal>\n              <p\n                className=\"max-w-xl font-satoshi font-medium leading-[1.3] text-cream/66\"\n                style={{ fontSize: 'clamp(1rem, 1.5vw, 1.375rem)', letterSpacing: '-0.005em' }}\n              >\n                {page.lead}\n              </p>\n            </ScrollReveal>\n\n            <ScrollReveal>\n              <ul className=\"hidden gap-4 pt-1 sm:flex sm:flex-wrap lg:gap-6\" aria-label=\"Key benefits\">\n                {page.heroStats.map((stat, index) => {\n                  const Icon = [Thermometer, ShieldCheck, TrendingDown][index] ?? BadgeCheck;\n                  return (\n                    <li\n                      key={stat.label}\n                      className={`flex items-start gap-3 ${index !== 0 ? 'sm:border-l sm:border-white/10 sm:pl-6' : ''}`}\n                    >\n                      <Icon className=\"mt-0.5 h-[18px] w-[18px] shrink-0 text-teal-vivid\" strokeWidth={1.5} />\n                      <div className=\"leading-tight\">\n                        <p className=\"font-satoshi text-[15px] font-bold text-white lg:text-base\">{stat.value}</p>\n                        <p className=\"mt-1 font-body text-[12.5px] text-cream/55 lg:text-[13px]\">{stat.label}</p>\n                      </div>\n                    </li>\n                  );\n                })}\n              </ul>\n            </ScrollReveal>\n          </div>\n\n          <ScrollReveal>\n            <div className=\"rounded-[1.5rem] border border-white/[0.08] bg-white/[0.04] p-1.5 backdrop-blur-sm\">\n              <div className=\"rounded-[calc(1.5rem-6px)] border border-white/[0.06] bg-[#0b1a2b]/80 p-4 shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)] backdrop-blur-xl lg:p-7\">\n                {!submitted ? (\n                  <>\n                    <h2 className=\"mb-1 text-center font-satoshi text-xl font-bold text-white lg:text-2xl\">\n                      Estimate your potential savings\n                    </h2>\n                    <p className=\"mb-4 text-center font-body text-[12px] text-white/50\">\n                      Tailored reply within 24h\n                    </p>\n                    <form\n                      onSubmit={(event) => {\n                        event.preventDefault();\n                        setSubmitted(true);\n                      }}\n                      className=\"space-y-2.5 lg:space-y-3\"\n                    >\n                      <input\n                        value={page.breadcrumb}\n                        readOnly\n                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white outline-none\"\n                      />\n                      <select\n                        required\n                        value={form.climate}\n                        onChange={(e) => setForm({ ...form, climate: e.target.value })}\n                        className=\"w-full appearance-none rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n                      >\n                        <option value=\"\" disabled className=\"bg-card text-foreground\">Is the building air-conditioned?</option>\n                        {['Yes', 'No', 'Partially', 'To confirm'].map((option) => (\n                          <option key={option} value={option} className=\"bg-card text-foreground\">{option}</option>\n                        ))}\n                      </select>\n                      <input\n                        type=\"number\"\n                        placeholder=\"Roof surface (m²)\"\n                        required\n                        min=\"1\"\n                        value={form.surface}\n                        onChange={(e) => setForm({ ...form, surface: e.target.value })}\n                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n                      />\n                      <input\n                        type=\"email\"\n                        placeholder=\"Work email\"\n                        required\n                        value={form.email}\n                        onChange={(e) => setForm({ ...form, email: e.target.value })}\n                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n                      />\n\n                      <button\n                        type=\"submit\"\n                        className=\"group mt-1 flex w-full items-center justify-center gap-3 rounded-full cta-gradient py-3 font-semibold text-white active:scale-[0.98]\"\n                      >\n                        <span className=\"text-[15px]\">See my potential</span>\n                        <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5\">\n                          <ArrowRight className=\"h-4 w-4\" />\n                        </span>\n                      </button>\n                    </form>\n\n                    <p className=\"mt-3 text-center font-body text-[11px] text-white/35\">\n                      No commitment · Study tailored to your substrate\n                    </p>\n                  </>\n                ) : (\n                  <div className=\"py-4 text-center\">\n                    <div className=\"mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/20\">\n                      <ShieldCheck className=\"h-6 w-6 text-primary\" />\n                    </div>\n                    <p className=\"mb-1 font-body text-sm text-white/60\">Indicative basis for {new Intl.NumberFormat('en-US').format(surfaceNum)} m²</p>\n                    <p className=\"mb-4 font-satoshi text-2xl font-bold text-white\">{estimate}</p>\n                    <p className=\"mb-4 font-body text-[13px] text-white/50\">\n                      An advisor refines the estimate based on the actual condition of the roof.\n                    </p>\n                    <button onClick={() => setSubmitted(false)} className=\"font-body text-sm font-semibold text-primary hover:underline\">\n                      Edit my request\n                    </button>\n                  </div>\n                )}\n              </div>\n            </div>\n          </ScrollReveal>\n        </div>\n      </div>\n\n      <div className=\"relative z-10 hidden border-t border-white/10 bg-navy/78 backdrop-blur-md lg:block\">\n        <div className=\"container mx-auto flex items-center gap-8 px-12 py-5\">\n          <p className=\"shrink-0 font-body text-[10px] font-semibold uppercase tracking-[0.24em] text-cream/45\">\n            They trust us\n          </p>\n          <div className=\"flex flex-1 items-center justify-between gap-8\">\n            {logos.map((logo) => (\n              <span key={logo.name} className=\"flex h-8 w-28 items-center justify-center\">\n                <img\n                  src={logo.url}\n                  alt={logo.name}\n                  className=\"max-h-7 max-w-full object-contain opacity-65 brightness-0 invert transition-opacity duration-300 hover:opacity-95\"\n                  loading=\"eager\"\n                  decoding=\"async\"\n                />\n              </span>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst ProblemSection = ({ page }: { page: RoofPageData }) => {\n  const title = getProblemTitle(page.problem.title);\n  const visual = supportVisuals[page.slug] ?? supportVisuals['membrane-bitumineuse'];\n\n  return (\n    <section className=\"relative overflow-hidden bg-cream py-16 lg:py-36\">\n      <div className=\"container relative mx-auto px-4 lg:px-8\">\n        <ScrollReveal>\n          <div className=\"mx-auto mb-14 max-w-3xl text-center lg:mb-20\">\n            <h2\n              className=\"font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n              style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n            >\n              {title.strong}\n              {title.muted && <span className=\"text-foreground/30\"> {title.muted}</span>}\n            </h2>\n          </div>\n        </ScrollReveal>\n\n        <div className=\"grid grid-cols-1 items-center gap-12 lg:grid-cols-12 lg:gap-16\">\n          <div className=\"order-2 lg:order-1 lg:col-span-5\">\n            <ScrollReveal>\n              <div className=\"relative\">\n                <div className=\"pointer-events-none absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_hsl(var(--terracotta)/0.18)_0%,_transparent_65%)] blur-2xl\" />\n                <div className=\"relative aspect-square overflow-hidden rounded-[2rem] bg-white shadow-[0_30px_80px_-15px_hsl(var(--terracotta-dark)/0.25),_0_10px_30px_-5px_hsl(var(--terracotta)/0.12)]\">\n                  <img\n                    src={visual.hot}\n                    alt=\"\"\n                    className=\"h-full w-full object-contain p-4\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                </div>\n              </div>\n              <p className=\"mt-4 text-center font-body text-[11px] uppercase tracking-wide text-terracotta/60\">\n                {visual.hotLabel}\n              </p>\n            </ScrollReveal>\n          </div>\n\n          <div className=\"order-1 lg:order-2 lg:col-span-7 lg:pl-12\">\n            <ScrollReveal stagger>\n              <div\n                className=\"space-y-8 border-l-2 pl-8 lg:space-y-10 lg:pl-10\"\n                style={{ borderImage: 'linear-gradient(to bottom, hsl(var(--terracotta)), hsl(var(--terracotta-dark))) 1' }}\n              >\n                {page.problem.cards.map((card, index) => {\n                  const Icon = problemIcons[index] ?? HelpCircle;\n                  return (\n                    <div key={card.title}>\n                      <div className=\"mb-2 flex items-center gap-3\">\n                        <Icon className=\"h-5 w-5 text-terracotta\" strokeWidth={1.8} />\n                        <h3\n                          className=\"font-satoshi text-xl font-bold text-foreground lg:text-2xl\"\n                          style={{ letterSpacing: '-0.02em', lineHeight: 1.2 }}\n                        >\n                          {card.title}\n                        </h3>\n                      </div>\n                      <p className=\"font-body text-base leading-relaxed text-foreground/55\">{card.text}</p>\n                    </div>\n                  );\n                })}\n              </div>\n            </ScrollReveal>\n          </div>\n        </div>\n\n        <div className=\"mt-20 grid grid-cols-1 items-center gap-12 lg:mt-28 lg:grid-cols-12 lg:gap-16\">\n          <div className=\"order-2 lg:order-2 lg:col-span-5\">\n            <ScrollReveal>\n              <div className=\"relative\">\n                <div className=\"pointer-events-none absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_rgba(32,150,140,0.18)_0%,_transparent_65%)] blur-2xl\" />\n                <div className=\"relative aspect-square overflow-hidden rounded-[2rem] bg-white shadow-[0_30px_80px_-15px_rgba(20,120,110,0.20),_0_10px_30px_-5px_rgba(32,150,140,0.10)]\">\n                  <img\n                    src={visual.cool}\n                    alt=\"\"\n                    className=\"h-full w-full object-contain p-4\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                </div>\n              </div>\n              <p className=\"mt-4 text-center font-body text-[11px] uppercase tracking-wide text-primary/60\">\n                {visual.coolLabel}\n              </p>\n            </ScrollReveal>\n          </div>\n\n          <div className=\"order-1 lg:order-1 lg:col-span-7 lg:pr-12\">\n            <ScrollReveal>\n              <h3\n                className=\"mb-8 max-w-xl font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n              >\n                Cool roof: a concrete answer\n                <span className=\"text-foreground/30\"> to the heat problem.</span>\n              </h3>\n              <p className=\"mb-8 max-w-lg font-body text-base leading-relaxed text-foreground/50\">\n                A light-colored surface sends solar radiation back before it penetrates the building. The roof heats up less, the top floors can breathe, and the substrate is subjected to less UV and thermal shock.\n              </p>\n              <PrimaryCTA label=\"Request a quote\" href={CTA_HREF} />\n            </ScrollReveal>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst SolutionSection = ({ page }: { page: RoofPageData }) => {\n  const [active, setActive] = useState(0);\n\n  return (\n    <section className=\"relative bg-white\">\n      <div className=\"container mx-auto px-4 lg:px-8\">\n        <ScrollReveal>\n          <div className=\"flex flex-col gap-8 pb-10 pt-16 lg:flex-row lg:items-end lg:gap-16 lg:pb-16 lg:pt-32\">\n            <div className=\"lg:w-2/3\">\n              <p className=\"mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-muted-foreground\">\n                {page.solution.badge}\n              </p>\n              <h2\n                className=\"font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n              >\n                <span className=\"text-foreground/30\">A system designed to </span>\n                reflect, protect and last.\n              </h2>\n            </div>\n            <div className=\"lg:w-1/3 lg:pb-1\">\n              <p className=\"font-body text-base leading-relaxed text-foreground/52 lg:text-right lg:text-lg\">\n                A primer, a resin and a top coat that guarantee your roof's performance over time.\n              </p>\n              <div className=\"mt-5 flex lg:justify-end\">\n                <PrimaryCTA label=\"Request a quote\" href={CTA_HREF} />\n              </div>\n            </div>\n          </div>\n        </ScrollReveal>\n\n        <div className=\"flex flex-col gap-12 pb-24 lg:flex-row lg:gap-16 lg:pb-32\">\n          <div className=\"overflow-hidden rounded-2xl shadow-[0_20px_60px_-15px_rgba(0,0,0,0.08)] lg:hidden\">\n            <img src={coolRoofLayers} alt=\"Cross-section of the Covalba cool roof system\" className=\"w-full\" loading=\"lazy\" />\n          </div>\n\n          <div className=\"lg:w-1/2 lg:sticky lg:top-[20vh] lg:self-start\">\n            {layerTitles.map((item, index) => {\n              const isOpen = active === index;\n              const colors = layerColors[index] ?? layerColors[0];\n              return (\n                <div key={item} className=\"border-b border-border last:border-b-0\">\n                  <button\n                    onClick={() => setActive(index)}\n                    className=\"group flex w-full items-center gap-4 py-6 text-left\"\n                  >\n                    <span\n                      className={`inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-body text-[11px] font-bold transition-all duration-300 ${\n                        isOpen ? colors.pill : 'bg-muted text-muted-foreground'\n                      }`}\n                    >\n                      0{index + 1}\n                    </span>\n                    <h3\n                      className={`flex-1 font-satoshi text-xl font-bold transition-colors duration-300 lg:text-2xl ${\n                        isOpen ? 'text-foreground' : 'text-foreground/50 group-hover:text-foreground/80'\n                      }`}\n                    >\n                      {item}\n                    </h3>\n                    <ChevronDown\n                      className={`h-5 w-5 shrink-0 transition-all duration-300 ${\n                        isOpen ? `${colors.chevron} rotate-180` : 'text-foreground/25'\n                      }`}\n                      strokeWidth={2}\n                    />\n                  </button>\n\n                  <div\n                    className={`grid transition-all duration-500 ${\n                      isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'\n                    }`}\n                  >\n                    <div className=\"overflow-hidden\">\n                      <div className=\"pb-8 pl-6 lg:pl-12\">\n                        <p className=\"mb-6 font-body text-base leading-relaxed text-foreground/65 lg:text-lg\">\n                          {getLayerDescription(index)}\n                        </p>\n                        <div className=\"flex items-start gap-3 rounded-xl bg-foreground/[0.03] p-4\">\n                          <img\n                            src=\"/maxime-bourassin.jpg\"\n                            alt=\"Maxime Bourassin, founder of Covalba\"\n                            className=\"mt-0.5 h-9 w-9 shrink-0 rounded-full object-cover\"\n                          />\n                          <div>\n                            <p className=\"font-body text-[15px] italic leading-relaxed text-foreground/65 lg:text-base\">\n                              \"{getLayerExpert(index)}\"\n                            </p>\n                            <p className=\"mt-2 font-body text-xs font-semibold text-foreground/50\">\n                              Maxime Bourassin, founder\n                            </p>\n                          </div>\n                        </div>\n                        {index === 0 && page.solution.note && (\n                          <p className=\"mt-4 rounded-xl bg-primary/5 p-4 font-body text-sm leading-relaxed text-foreground/62\">\n                            {page.solution.note}\n                          </p>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n\n          <div className=\"hidden lg:block lg:w-1/2\">\n            <div className=\"relative overflow-hidden rounded-2xl shadow-[0_30px_80px_-15px_rgba(0,0,0,0.08)]\">\n              <img src={coolRoofLayers} alt=\"Cross-section of the Covalba cool roof system\" className=\"w-full\" loading=\"lazy\" />\n              {layerTitles.map((item, index) => {\n                const pos = layerPositions[index];\n                const colors = layerColors[index] ?? layerColors[0];\n                const isActive = active === index;\n                if (!pos) return null;\n\n                return (\n                  <div key={item} className=\"absolute\" style={{ top: pos.top, left: pos.left }}>\n                    <div\n                      className={`absolute -translate-x-1/2 -translate-y-1/2 transition-all duration-500 ${\n                        isActive ? 'scale-125' : 'scale-75 opacity-40'\n                      }`}\n                    >\n                      <div\n                        className={`h-3.5 w-3.5 rounded-full ${\n                          isActive ? colors.dot : 'bg-foreground/20'\n                        } shadow-lg ring-2 ring-white transition-colors duration-500`}\n                      />\n                      {isActive && (\n                        <div className={`absolute inset-0 h-3.5 w-3.5 animate-ping rounded-full ${colors.dot} opacity-30`} />\n                      )}\n                    </div>\n                    <div\n                      className={`pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 transition-all duration-500 ${\n                        isActive ? 'translate-x-0 opacity-100' : 'translate-x-2 opacity-0'\n                      }`}\n                    >\n                      <span className={`whitespace-nowrap rounded-full px-4 py-1.5 font-body text-[13px] font-bold shadow-lg ${colors.pill}`}>\n                        {item}\n                      </span>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst BenefitsSection = ({ page }: { page: RoofPageData }) => (\n  <section className=\"bg-white py-20 lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mb-10 grid gap-8 lg:grid-cols-[0.82fr_1.18fr] lg:items-end lg:gap-14\">\n          <div>\n            <Label>{page.benefits.badge}</Label>\n            <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl\">\n              {page.benefits.title}\n            </h2>\n          </div>\n          <p className=\"max-w-xl border-l border-primary/30 pl-6 font-body text-base leading-relaxed text-foreground/62 lg:text-lg\">\n            {page.benefits.featured}\n          </p>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal stagger>\n        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          {page.benefits.cards.map((benefit, index) => {\n            const Icon = cardIcons[index] ?? Sparkles;\n            return (\n              <article\n                key={benefit.title}\n                className=\"group overflow-hidden rounded-2xl bg-cream ring-1 ring-foreground/[0.05] transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_24px_70px_-48px_hsl(var(--navy)/0.45)]\"\n              >\n                <div className=\"relative aspect-[4/3] overflow-hidden bg-foreground/[0.04]\">\n                  <img\n                    src={getBenefitImage(page, benefit, index)}\n                    alt=\"\"\n                    className=\"h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.035]\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                  <div className=\"absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-cream to-transparent\" />\n                </div>\n                <div className=\"p-5 lg:p-6\">\n                  <div className=\"mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-white text-primary shadow-[0_12px_30px_-24px_hsl(var(--navy)/0.35)]\">\n                    <Icon className=\"h-5 w-5\" strokeWidth={1.7} />\n                  </div>\n                  <h3 className=\"font-satoshi text-lg font-bold leading-tight text-foreground\">{benefit.title}</h3>\n                  <p className=\"mt-2 font-body text-sm leading-relaxed text-foreground/62\">{benefit.text}</p>\n                </div>\n              </article>\n            );\n          })}\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst RoiOptionCards = ({\n  page,\n  surface,\n  treatmentRange,\n}: {\n  page: RoofPageData;\n  surface: number;\n  treatmentRange: ReturnType<typeof getTreatmentRange>;\n}) => {\n  if (!page.roi.comparison) {\n    return page.roi.afterComparison ? (\n      <article className=\"rounded-2xl bg-white p-6 ring-1 ring-foreground/[0.06] lg:p-8\">\n        <p className=\"font-body text-base leading-relaxed text-foreground/66 lg:text-lg\">\n          {page.roi.afterComparison}\n        </p>\n      </article>\n    ) : null;\n  }\n\n  const options = page.roi.comparison.headers.slice(1);\n  const rows = page.roi.comparison.rows;\n  const investment = rows.find((row) => row[0].toLowerCase().includes('investment'));\n  const duration = rows.find((row) => {\n    const key = row[0].toLowerCase();\n    return key.includes('life') || key.includes('durat') || key.includes('lifespan');\n  });\n  const activity = rows.find((row) => {\n    const key = row[0].toLowerCase();\n    return key.includes('activity') || key.includes('operation');\n  });\n  const treatmentMidpoint = (treatmentRange.min + treatmentRange.max) / 2;\n\n  return (\n    <div className=\"grid gap-4 lg:grid-cols-3\">\n      {options.map((option, optionIndex) => {\n        const isCovalba = optionIndex === 0;\n        const rawInvestment = investment?.[optionIndex + 1] ?? '';\n        const parsedPrice = parsePricePerM2(rawInvestment);\n        const pricePerM2 = parsedPrice ?? getFallbackPricePerM2(option, optionIndex, treatmentMidpoint);\n        const dynamicInvestment = pricePerM2 ? `~${formatCurrency(surface * pricePerM2)}` : displayCell(rawInvestment);\n\n        return (\n          <article\n            key={option}\n            className={`rounded-2xl p-6 ring-1 ${\n              isCovalba\n                ? 'bg-[#142333] text-white ring-transparent'\n                : 'bg-white text-foreground ring-foreground/[0.06]'\n            }`}\n          >\n            <div className=\"mb-6 flex items-start justify-between gap-4\">\n              <h3 className=\"font-satoshi text-xl font-black leading-tight\">{option}</h3>\n              {isCovalba && (\n                <span className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-teal-vivid/15 text-teal-vivid\">\n                  <Check className=\"h-4 w-4\" strokeWidth={2.4} />\n                </span>\n              )}\n            </div>\n            <p className={`font-satoshi text-3xl font-black leading-none ${isCovalba ? 'text-teal-vivid' : 'text-terracotta'}`}>\n              {dynamicInvestment}\n            </p>\n            {pricePerM2 && (\n              <p className={`mt-2 font-body text-xs font-semibold ${isCovalba ? 'text-white/45' : 'text-foreground/40'}`}>\n                basis {new Intl.NumberFormat('en-US').format(surface)} m² · {pricePerM2.toLocaleString('en-US')} €/m²\n              </p>\n            )}\n            <dl className=\"mt-6 space-y-3 border-t border-current/10 pt-5\">\n              {[duration, activity].filter(Boolean).map((row) => (\n                <div key={row![0]} className=\"grid grid-cols-[0.75fr_1fr] gap-4\">\n                  <dt className={`font-body text-xs font-bold uppercase tracking-[0.14em] ${isCovalba ? 'text-white/38' : 'text-foreground/35'}`}>\n                    {displayCell(row![0])}\n                  </dt>\n                  <dd className={`font-body text-sm leading-relaxed ${isCovalba ? 'text-white/74' : 'text-foreground/62'}`}>\n                    {displayCell(row![optionIndex + 1])}\n                  </dd>\n                </div>\n              ))}\n            </dl>\n          </article>\n        );\n      })}\n    </div>\n  );\n};\n\nconst ROICalculator = ({\n  page,\n  surface,\n  selectedSituation,\n  treatmentRange,\n  onSurfaceChange,\n  onSituationChange,\n}: {\n  page: RoofPageData;\n  surface: number;\n  selectedSituation: string;\n  treatmentRange: ReturnType<typeof getTreatmentRange>;\n  onSurfaceChange: (surface: number) => void;\n  onSituationChange: (situation: string) => void;\n}) => {\n  const treatmentLow = surface * treatmentRange.min;\n  const treatmentHigh = surface * treatmentRange.max;\n  const referencePrice = selectedSituation.toLowerCase().includes('insulation') ? 150 : 90;\n  const referenceCost = surface * referencePrice;\n  const potentialGap = Math.max(referenceCost - treatmentHigh, 0);\n\n  return (\n    <div className=\"mb-10 rounded-[2rem] bg-[#142333] p-5 text-white shadow-[0_34px_90px_-64px_hsl(var(--navy)/0.65)] lg:p-8\">\n      <div className=\"grid gap-7 lg:grid-cols-[0.88fr_1.12fr] lg:items-end\">\n        <div>\n          <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-teal-vivid/70\">\n            Indicative calculator\n          </p>\n          <h3 className=\"mt-4 max-w-lg font-satoshi text-2xl font-black leading-tight lg:text-3xl\">\n            Adjust the surface and the condition of the roof.\n          </h3>\n          <p className=\"mt-3 max-w-lg font-body text-sm leading-relaxed text-white/52\">\n            Default: 5,000 m², a typical surface for a warehouse or industrial building to treat.\n          </p>\n        </div>\n\n        <div className=\"grid gap-3 sm:grid-cols-[0.72fr_1.28fr]\">\n          <label className=\"block\">\n            <span className=\"mb-2 block font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/40\">\n              Surface\n            </span>\n            <input\n              type=\"number\"\n              min={100}\n              step={100}\n              value={surface}\n              onChange={(event) => onSurfaceChange(Math.max(100, Number(event.target.value) || 100))}\n              className=\"h-12 w-full rounded-xl border border-white/10 bg-white/[0.07] px-4 font-body text-sm font-semibold text-white outline-none transition focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20\"\n              aria-label=\"Surface to treat in square meters\"\n            />\n          </label>\n          <label className=\"block\">\n            <span className=\"mb-2 block font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/40\">\n              Situation\n            </span>\n            <select\n              value={selectedSituation}\n              onChange={(event) => onSituationChange(event.target.value)}\n              className=\"h-12 w-full rounded-xl border border-white/10 bg-white/[0.07] px-4 font-body text-sm font-semibold text-white outline-none transition focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20\"\n              aria-label=\"Roof situation\"\n            >\n              {page.roi.situation.rows.map((row) => (\n                <option key={row[0]} value={row[0]} className=\"bg-card text-foreground\">\n                  {row[0]}\n                </option>\n              ))}\n            </select>\n          </label>\n        </div>\n      </div>\n\n      <div className=\"mt-7 grid gap-3 md:grid-cols-3\">\n        {[\n          {\n            label: treatmentRange.label,\n            value: `${formatCurrency(treatmentLow)} - ${formatCurrency(treatmentHigh)}`,\n            detail: `${treatmentRange.min}-${treatmentRange.max} €/m² depending on preparation`,\n            valueClass: 'text-teal-vivid',\n          },\n          {\n            label: 'Reference refurbishment',\n            value: `~${formatCurrency(referenceCost)}`,\n            detail: `${referencePrice} €/m², order of magnitude for comparison`,\n            valueClass: 'text-terracotta',\n          },\n          {\n            label: 'Potential gap',\n            value: `up to ${formatCurrency(potentialGap)}`,\n            detail: 'Heavy investment avoided or deferred if the substrate is viable',\n            valueClass: 'text-teal-vivid',\n          },\n        ].map((item) => (\n          <article key={item.label} className=\"rounded-2xl bg-white/[0.07] p-5 ring-1 ring-white/10\">\n            <p className=\"font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/38\">{item.label}</p>\n            <p className={`mt-3 font-satoshi text-2xl font-black leading-tight ${item.valueClass}`}>{item.value}</p>\n            <p className=\"mt-2 font-body text-xs leading-relaxed text-white/45\">{item.detail}</p>\n          </article>\n        ))}\n      </div>\n      <p className=\"mt-4 font-body text-xs leading-relaxed text-white/38\">\n        Indicative estimate: the study adjusts the price based on access, preparation, detailing points and the actual condition of the substrate.\n      </p>\n    </div>\n  );\n};\n\nconst getSituationImage = (recommendation: string) => {\n  const lower = recommendation.toLowerCase();\n  if (lower.includes('covametal')) return covaMetalProduct;\n  if (lower.includes('covaseal')) return covaSealProduct;\n  if (lower.includes('cova')) return covaTherm20Product;\n  return covaTherm8Product;\n};\n\nconst SituationCards = ({ rows }: { rows: string[][] }) => (\n  <div className=\"grid gap-4 md:grid-cols-2\">\n    {rows.map((row) => (\n      <article key={row[0]} className=\"grid gap-4 rounded-2xl bg-white p-4 ring-1 ring-foreground/[0.06] sm:grid-cols-[128px_1fr] lg:grid-cols-[190px_1fr] lg:gap-5 lg:p-5\">\n        <div className=\"flex aspect-[4/3] items-center justify-center rounded-xl bg-gradient-to-br from-cream to-white p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.75),_0_18px_44px_-34px_hsl(var(--navy)/0.45)] ring-1 ring-foreground/[0.04] sm:aspect-square lg:p-6\">\n          <img src={getSituationImage(row[1])} alt=\"\" className=\"max-h-full max-w-full object-contain\" loading=\"lazy\" decoding=\"async\" />\n        </div>\n        <div className=\"self-center\">\n          <p className=\"font-satoshi text-lg font-bold leading-tight text-foreground\">{row[0]}</p>\n          <p className=\"mt-2 font-body text-sm font-bold text-primary\">{row[1]}</p>\n          <p className=\"mt-2 font-body text-sm leading-relaxed text-foreground/58\">{row[2]}</p>\n        </div>\n      </article>\n    ))}\n  </div>\n);\n\nconst ROISection = ({ page }: { page: RoofPageData }) => {\n  const [surface, setSurface] = useState(5000);\n  const [selectedSituation, setSelectedSituation] = useState(page.roi.situation.rows[0]?.[0] ?? '');\n  const treatmentRange = getTreatmentRange(page, selectedSituation);\n\n  return (\n    <section className=\"bg-cream py-20 lg:py-32\">\n      <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mx-auto mb-12 max-w-3xl text-center lg:mb-16\">\n          <div className=\"flex justify-center\">\n            <Label>{page.roi.badge}</Label>\n          </div>\n          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-[3rem]\">\n            {page.roi.title}\n          </h2>\n          <p className=\"mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-foreground/58 lg:text-lg\">\n            {page.roi.intro}\n          </p>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mb-12 grid gap-4 md:grid-cols-3\">\n          {[\n            ['20-25 €/m²', 'to treat and cool down'],\n            ['8-10 years', 'of refurbishment deferred'],\n            ['0 downtime', 'during the works'],\n          ].map(([value, label]) => (\n            <article key={value} className=\"rounded-2xl bg-white p-6 text-center ring-1 ring-foreground/[0.06]\">\n              <p className=\"font-satoshi text-4xl font-black leading-none text-primary\">{value}</p>\n              <p className=\"mt-3 font-body text-sm font-semibold text-foreground/52\">{label}</p>\n            </article>\n          ))}\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mb-8 max-w-2xl\">\n          <div>\n            <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55\">\n              Compare the options\n            </p>\n            <h3 className=\"mt-4 font-satoshi text-2xl font-black leading-tight text-foreground lg:text-3xl\">\n              A quick read on the budget.\n            </h3>\n          </div>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <ROICalculator\n          page={page}\n          surface={surface}\n          selectedSituation={selectedSituation}\n          treatmentRange={treatmentRange}\n          onSurfaceChange={setSurface}\n          onSituationChange={setSelectedSituation}\n        />\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <RoiOptionCards page={page} surface={surface} treatmentRange={treatmentRange} />\n        {page.roi.comparison && page.roi.afterComparison && (\n          <p className=\"mt-5 max-w-3xl font-body text-sm leading-relaxed text-foreground/52 lg:text-base\">\n            {page.roi.afterComparison}\n          </p>\n        )}\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mt-16 rounded-[2rem] bg-white p-5 ring-1 ring-foreground/[0.06] lg:mt-20 lg:p-8\">\n          <div className=\"mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between\">\n            <div>\n              <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55\">\n                Decide on the actual condition\n              </p>\n              <h3 className=\"mt-4 max-w-xl font-satoshi text-2xl font-black leading-tight text-foreground lg:text-3xl\">\n                Which solution for your roof?\n              </h3>\n            </div>\n            <PrimaryCTA label={page.roi.cta} href={CTA_HREF} />\n          </div>\n          <SituationCards rows={page.roi.situation.rows} />\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n  );\n};\n\nconst DiagnosticCTA = ({ title, text }: { title: string; text: string }) => (\n  <section className=\"relative overflow-hidden bg-[#182A3A] py-14 text-white lg:py-20\">\n    <div\n      aria-hidden=\"true\"\n      className=\"absolute inset-0 opacity-35\"\n      style={{\n        backgroundImage:\n          'radial-gradient(circle at 16% 20%, rgba(83, 207, 166, 0.22), transparent 28%), linear-gradient(115deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 120px)',\n      }}\n    />\n    <div className=\"container relative mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mx-auto grid max-w-5xl gap-7 lg:grid-cols-[1fr_auto] lg:items-center\">\n          <div>\n            <h2 className=\"font-satoshi text-2xl font-black leading-tight lg:text-4xl\">{title}</h2>\n            <p className=\"mt-3 max-w-2xl font-body text-sm leading-relaxed text-white/68 lg:text-base\">{text}</p>\n          </div>\n          <div className=\"flex flex-col gap-3 sm:flex-row lg:justify-end\">\n            <PrimaryCTA label=\"Request a quote\" href={CTA_HREF} />\n          </div>\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst MethodSection = ({ page }: { page: RoofPageData }) => {\n  const [videoOpen, setVideoOpen] = useState(false);\n\n  return (\n    <section className=\"bg-white py-16 lg:py-32\">\n      <div className=\"container mx-auto px-4 lg:px-8\">\n        <div className=\"flex flex-col items-start gap-12 lg:flex-row lg:gap-20\">\n          <div className=\"lg:sticky lg:top-[120px] lg:w-[40%]\">\n            <ScrollReveal>\n              <p className=\"mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/50\">\n                The process\n              </p>\n              <h2\n                className=\"mb-6 font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n              >\n                4 steps. Zero interruption.\n                <span className=\"text-foreground/30\"> Zero risk.</span>\n              </h2>\n              <p className=\"mb-8 font-body text-base leading-relaxed text-muted-foreground lg:text-lg\">\n                {page.method.reassurance}\n              </p>\n              <button\n                onClick={() => setVideoOpen(true)}\n                className=\"group flex items-center gap-3 text-primary transition-colors hover:text-primary\"\n              >\n                <span className=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 transition-colors group-hover:bg-primary/20\">\n                  <Play className=\"h-5 w-5\" />\n                </span>\n                <span className=\"font-body text-sm font-semibold\">Watch a project in 2 minutes</span>\n              </button>\n            </ScrollReveal>\n          </div>\n\n          <div className=\"relative lg:w-[60%]\">\n            <div className=\"absolute bottom-4 left-5 top-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent lg:left-6\" />\n            <div className=\"flex flex-col\">\n              {page.method.steps.map((step, index) => {\n                const Icon = methodIcons[index] ?? CheckCircle2;\n                return (\n                  <ScrollReveal key={step.title}>\n                    <div className=\"group relative flex items-start gap-5 py-8 lg:gap-7 lg:py-10\">\n                      <span className=\"relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-primary/10 transition-colors duration-500 group-hover:bg-primary/15 lg:h-12 lg:w-12\">\n                        <Icon className=\"h-4 w-4 text-primary lg:h-5 lg:w-5\" />\n                      </span>\n                      <div className=\"pt-1\">\n                        <span className=\"mb-2 block font-body text-xs font-bold uppercase tracking-widest text-primary/50\">\n                          Step 0{index + 1}\n                        </span>\n                        <h3 className=\"mb-2 font-satoshi text-xl font-bold text-foreground lg:text-2xl\">\n                          {step.title}\n                        </h3>\n                        <p className=\"max-w-md font-body text-sm leading-relaxed text-muted-foreground lg:text-base\">\n                          {step.text}\n                        </p>\n                      </div>\n                    </div>\n                    {index < page.method.steps.length - 1 && <div className=\"ml-5 h-px bg-border lg:ml-6\" />}\n                  </ScrollReveal>\n                );\n              })}\n            </div>\n\n            <ScrollReveal>\n              <div className=\"ml-16 mt-4 lg:ml-20\">\n                <p className=\"font-body text-xs font-medium text-muted-foreground/50\">\n                  Average duration: 3 days · No interruption of activity\n                </p>\n              </div>\n            </ScrollReveal>\n          </div>\n        </div>\n      </div>\n\n      <Dialog open={videoOpen} onOpenChange={setVideoOpen}>\n        <DialogContent className=\"max-w-4xl overflow-hidden border-none bg-black p-0\">\n          <div className=\"aspect-video\">\n            <iframe\n              src=\"https://www.youtube.com/embed/9HOB5OVH0Ac?autoplay=1\"\n              className=\"h-full w-full\"\n              allow=\"autoplay; encrypted-media\"\n              allowFullScreen\n              title=\"Covalba Cool Roof, a project in 2 minutes\"\n            />\n          </div>\n        </DialogContent>\n      </Dialog>\n    </section>\n  );\n};\n\nconst ProofSection = ({ page }: { page: RoofPageData }) => (\n  <section className=\"bg-[#192A3A] py-20 text-white lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mb-12 grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-end\">\n          <div>\n            <Label light>{page.proof.badge}</Label>\n            <h2 className=\"font-satoshi text-3xl font-black leading-tight sm:text-4xl lg:text-5xl\">{page.proof.title}</h2>\n          </div>\n          <p className=\"max-w-xl font-body text-base leading-relaxed text-white/62\">\n            Field figures to be confirmed project by project, used here as performance benchmarks.\n          </p>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal stagger>\n        <div className=\"grid gap-4 md:grid-cols-3\">\n          {page.proof.figures.map((figure, index) => {\n            const Icon = proofIcons[index] ?? BadgeCheck;\n            return (\n              <article key={figure.value} className=\"rounded-2xl border border-white/10 bg-white/[0.045] p-7\">\n                <Icon className=\"mb-6 h-6 w-6 text-teal-vivid\" strokeWidth={1.7} />\n                <p className=\"font-satoshi text-3xl font-black leading-none text-white lg:text-4xl\">{figure.value}</p>\n                <p className=\"mt-3 font-body text-sm leading-relaxed text-white/60\">{figure.label}</p>\n              </article>\n            );\n          })}\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mt-14 border-t border-white/10 pt-10\">\n          <p className=\"mb-8 text-center font-body text-[10px] font-bold uppercase tracking-[0.22em] text-white/42\">\n            Client references\n          </p>\n          <div className=\"flex flex-wrap items-center justify-center gap-x-10 gap-y-7 lg:gap-x-14\">\n            {logos.map((logo) => (\n              <span key={logo.name} className=\"flex h-8 w-28 items-center justify-center\">\n                <img\n                  src={logo.url}\n                  alt={logo.name}\n                  className=\"max-h-7 max-w-full object-contain opacity-45 transition-opacity duration-300 hover:opacity-80\"\n                  style={{ filter: 'brightness(0) invert(1)' }}\n                  loading=\"lazy\"\n                />\n              </span>\n            ))}\n          </div>\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst FAQSection = ({ faq }: { faq: RoofPageData['faq'] }) => (\n  <section className=\"bg-cream py-20 lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <div className=\"grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:gap-16\">\n        <ScrollReveal>\n          <div className=\"lg:sticky lg:top-24\">\n            <Label>FAQ</Label>\n            <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl\">\n              Your questions,\n              <br />\n              <span className=\"text-foreground/40\">our answers.</span>\n            </h2>\n            <a href=\"#contact\" className=\"group mt-8 inline-flex items-center gap-2 font-body text-sm font-semibold text-primary transition-all hover:gap-3\">\n              Another question? Let's talk\n              <ArrowRight className=\"h-4 w-4\" />\n            </a>\n          </div>\n        </ScrollReveal>\n\n        <ScrollReveal>\n          <Accordion type=\"single\" collapsible className=\"space-y-3\">\n            {faq.map((item, index) => (\n              <AccordionItem\n                key={item.q}\n                value={`roof-faq-${index}`}\n                className=\"rounded-xl border border-foreground/[0.06] bg-white px-5 shadow-[0_12px_34px_rgba(24,42,58,0.04)] data-[state=open]:border-primary/20 lg:px-6\"\n              >\n                <AccordionTrigger className=\"py-5 text-left font-satoshi text-base font-bold text-foreground hover:no-underline lg:text-[17px]\">\n                  {item.q}\n                </AccordionTrigger>\n                <AccordionContent className=\"pb-5 font-body text-[14.5px] leading-relaxed text-foreground/67 lg:text-[15px]\">\n                  {item.a}\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </ScrollReveal>\n      </div>\n    </div>\n  </section>\n);\n\nconst FinalCTA = ({ page }: { page: RoofPageData }) => (\n  <section id=\"contact\" className=\"overflow-hidden bg-[#182A3A] py-20 text-white lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mx-auto max-w-4xl text-center\">\n          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl\">\n            {page.finalCta.title}\n          </h2>\n          <p className=\"mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-white/72 lg:text-lg\">\n            {page.finalCta.text}\n          </p>\n          <div className=\"mt-9 flex flex-col gap-3 sm:flex-row sm:justify-center\">\n            <PrimaryCTA label=\"Request a quote\" href={CTA_HREF} />\n          </div>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <ul className=\"mx-auto mt-12 grid max-w-3xl gap-3 sm:grid-cols-3\">\n          {page.finalCta.reassurances.map((item) => (\n            <li key={item} className=\"flex items-center justify-center gap-2.5 rounded-lg border border-white/[0.12] bg-white/[0.045] px-4 py-3\">\n              <CalendarCheck className=\"h-4 w-4 shrink-0 text-teal-vivid\" strokeWidth={1.8} />\n              <span className=\"font-body text-sm text-white/[0.76]\">{item}</span>\n            </li>\n          ))}\n        </ul>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst SEOContent = ({ page }: { page: RoofPageData }) => (\n  <section className=\"bg-white py-20 lg:py-28\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <article className=\"mx-auto max-w-3xl\">\n          <p className=\"mb-5 font-body text-[10px] font-bold uppercase tracking-[0.25em] text-primary/55\">\n            Substrate guide\n          </p>\n          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground lg:text-4xl\">\n            Everything you need to know about {page.eyebrow.toLowerCase()}.\n          </h2>\n          <p className=\"mt-6 font-body text-base leading-relaxed text-foreground/68 lg:text-lg\">\n            {page.seo.intro}\n          </p>\n\n          <div className=\"mt-10 space-y-9\">\n            {page.seo.sections.map((section) => (\n              <section key={section.title}>\n                <h3 className=\"font-satoshi text-2xl font-bold leading-tight text-foreground\">{section.title}</h3>\n                <p className=\"mt-3 font-body text-base leading-relaxed text-foreground/66\">{section.text}</p>\n              </section>\n            ))}\n          </div>\n\n          <div className=\"mt-12 rounded-2xl bg-cream p-6 ring-1 ring-foreground/[0.05]\">\n            <h3 className=\"font-satoshi text-lg font-bold text-foreground\">Sources</h3>\n            <ul className=\"mt-4 space-y-2\">\n              {page.seo.sources.map((source) => (\n                <li key={source.href}>\n                  <a href={source.href} className=\"font-body text-sm leading-relaxed text-primary underline-offset-4 hover:underline\" target=\"_blank\" rel=\"noreferrer\">\n                    {source.label}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </article>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst buildFaqSchema = (page: RoofPageData) => ({\n  '@context': 'https://schema.org',\n  '@type': 'FAQPage',\n  mainEntity: page.faq.map((item) => ({\n    '@type': 'Question',\n    name: item.q,\n    acceptedAnswer: {\n      '@type': 'Answer',\n      text: item.a,\n    },\n  })),\n});\n\nconst buildBreadcrumbSchema = (page: RoofPageData) => ({\n  '@context': 'https://schema.org',\n  '@type': 'BreadcrumbList',\n  itemListElement: [\n    { '@type': 'ListItem', position: 1, name: 'Home', item: `${SITE_URL}/en` },\n    { '@type': 'ListItem', position: 2, name: 'Roofs', item: `${SITE_URL}/en` },\n    { '@type': 'ListItem', position: 3, name: page.breadcrumb, item: page.canonical },\n  ],\n});\n\nconst RoofPageTemplateEN = ({ page }: RoofPageTemplateENProps) => {\n  usePageMeta({\n    title: page.title,\n    description: page.description,\n    canonical: page.canonical,\n  });\n  useJsonLd(`roof-en-${page.slug}-faq`, buildFaqSchema(page));\n  useJsonLd(`roof-en-${page.slug}-breadcrumb`, buildBreadcrumbSchema(page));\n\n  return (\n    <>\n      <NavbarEN />\n      <main>\n        <RoofHero page={page} />\n        <ProblemSection page={page} />\n        <SolutionSection page={page} />\n        <BenefitsSection page={page} />\n        <ROISection page={page} />\n        <DiagnosticCTA title={page.midCta.title} text={page.midCta.text} />\n        <MethodSection page={page} />\n        <ProofSection page={page} />\n        <FAQSection faq={page.faq} />\n        <FinalCTA page={page} />\n        <SEOContent page={page} />\n      </main>\n      <FooterEN />\n      <StickyMobileCTAEN />\n    </>\n  );\n};\n\nexport default RoofPageTemplateEN;\n","numLines":1460,"startLine":1,"totalLines":1460}},"sourceToolAssistantUUID":"d4d51f1c-6a89-4645-8a39-99aa49c6eba7","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":"f405b837-a198-4fd6-8e3b-6218e6e8211e","isSidechain":true,"agentId":"a01683a908360cb30","message":{"model":"claude-opus-4-8","id":"msg_01HuEQnV8TkDCtKDtGEqjo2g","type":"message","role":"assistant","content":[{"type":"text","text":"Now let me check the actual data type exports and an ES component to confirm import paths."}],"stop_reason":null,"stop_sequence":null,"stop_details":null,"usage":{"input_tokens":2799,"cache_creation_input_tokens":80501,"cache_read_input_tokens":14970,"cache_creation":{"ephemeral_5m_input_tokens":80501,"ephemeral_1h_input_tokens":0},"output_tokens":5,"service_tier":"standard","inference_geo":"not_available"},"diagnostics":null},"requestId":"req_011CcJVQWj6cHGhPXumN9z47","attributionAgent":"general-purpose","type":"assistant","uuid":"7101524a-0beb-4cf5-ac0c-49fa43d339ce","timestamp":"2026-06-22T14:54:42.805Z","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":"7101524a-0beb-4cf5-ac0c-49fa43d339ce","isSidechain":true,"agentId":"a01683a908360cb30","message":{"model":"claude-opus-4-8","id":"msg_01HuEQnV8TkDCtKDtGEqjo2g","type":"message","role":"assistant","content":[{"type":"tool_use","id":"toolu_01Dv3CaBjFZKvWe58E3uYuSu","name":"Bash","input":{"command":"grep -nE \"export (type|interface) (RoofPageData|TextCard)\" src/data/roofPages.ts; echo \"---ES dir---\"; ls src/components/es/ 2>/dev/null; echo \"---ES roof dir---\"; ls src/components/es/roof/ 2>/dev/null; echo \"---check ES chrome---\"; ls src/components/es/NavbarES.tsx src/components/es/FooterES.tsx src/components/es/StickyMobileCTAES.tsx 2>&1"},"caller":{"type":"direct"}}],"stop_reason":"tool_use","stop_sequence":null,"stop_details":null,"usage":{"input_tokens":2799,"cache_creation_input_tokens":80501,"cache_read_input_tokens":14970,"output_tokens":278,"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":80501},"inference_geo":"not_available","iterations":[{"input_tokens":2799,"output_tokens":278,"cache_read_input_tokens":14970,"cache_creation_input_tokens":80501,"cache_creation":{"ephemeral_5m_input_tokens":80501,"ephemeral_1h_input_tokens":0},"type":"message"}],"speed":"standard"},"diagnostics":null},"requestId":"req_011CcJVQWj6cHGhPXumN9z47","attributionAgent":"general-purpose","type":"assistant","uuid":"cda48879-e260-4f02-99d3-16664a341b4d","timestamp":"2026-06-22T14:54:45.283Z","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":"cda48879-e260-4f02-99d3-16664a341b4d","isSidechain":true,"promptId":"d89edf80-4e6d-44ec-80c1-78c9295c891f","agentId":"a01683a908360cb30","type":"user","message":{"role":"user","content":[{"tool_use_id":"toolu_01Dv3CaBjFZKvWe58E3uYuSu","type":"tool_result","content":"7:export interface TextCard {\n17:export interface RoofPageData {\n---ES dir---\nFooterES.tsx\nNavbarES.tsx\nStickyMobileCTAES.tsx\nhome\nindustries\nproduct\n---ES roof dir---\n---check ES chrome---\nsrc/components/es/FooterES.tsx\nsrc/components/es/NavbarES.tsx\nsrc/components/es/StickyMobileCTAES.tsx","is_error":false}]},"uuid":"81223d3a-e53b-43fd-82e1-a4b93cf9b19a","timestamp":"2026-06-22T14:54:45.382Z","toolUseResult":{"stdout":"7:export interface TextCard {\n17:export interface RoofPageData {\n---ES dir---\nFooterES.tsx\nNavbarES.tsx\nStickyMobileCTAES.tsx\nhome\nindustries\nproduct\n---ES roof dir---\n---check ES chrome---\nsrc/components/es/FooterES.tsx\nsrc/components/es/NavbarES.tsx\nsrc/components/es/StickyMobileCTAES.tsx","stderr":"","interrupted":false,"isImage":false,"noOutputExpected":false},"sourceToolAssistantUUID":"cda48879-e260-4f02-99d3-16664a341b4d","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":"81223d3a-e53b-43fd-82e1-a4b93cf9b19a","isSidechain":true,"agentId":"a01683a908360cb30","message":{"model":"claude-opus-4-8","id":"msg_018HtkdzcmUFPnMzC9rBijRC","type":"message","role":"assistant","content":[{"type":"text","text":"All ES chrome components exist and both `RoofPageData` and `TextCard` are exported. Now let me check what CTA route convention the ES site uses (the EN used `/en` as fallback). Let me check ES product/home for the route base."}],"stop_reason":null,"stop_sequence":null,"stop_details":null,"usage":{"input_tokens":2,"cache_creation_input_tokens":3186,"cache_read_input_tokens":95471,"cache_creation":{"ephemeral_5m_input_tokens":3186,"ephemeral_1h_input_tokens":0},"output_tokens":1,"service_tier":"standard","inference_geo":"not_available"},"diagnostics":null},"requestId":"req_011CcJVR2gerzN5JGoSJ6Ah2","attributionAgent":"general-purpose","type":"assistant","uuid":"c2a8d3f0-fe16-4e6a-b7fe-ae76038ea337","timestamp":"2026-06-22T14:54:49.151Z","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":"c2a8d3f0-fe16-4e6a-b7fe-ae76038ea337","isSidechain":true,"agentId":"a01683a908360cb30","message":{"model":"claude-opus-4-8","id":"msg_018HtkdzcmUFPnMzC9rBijRC","type":"message","role":"assistant","content":[{"type":"tool_use","id":"toolu_012eBSkg1iMi8mQdD2kSAGMt","name":"Bash","input":{"command":"grep -rhoE 'href=\"/es[^\"]*\"' src/components/es/NavbarES.tsx src/components/es/StickyMobileCTAES.tsx src/components/es/FooterES.tsx 2>/dev/null | sort -u | head -40"},"caller":{"type":"direct"}}],"stop_reason":"tool_use","stop_sequence":null,"stop_details":null,"usage":{"input_tokens":2,"cache_creation_input_tokens":3186,"cache_read_input_tokens":95471,"output_tokens":209,"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":3186},"inference_geo":"not_available","iterations":[{"input_tokens":2,"output_tokens":209,"cache_read_input_tokens":95471,"cache_creation_input_tokens":3186,"cache_creation":{"ephemeral_5m_input_tokens":3186,"ephemeral_1h_input_tokens":0},"type":"message"}],"speed":"standard"},"diagnostics":null},"requestId":"req_011CcJVR2gerzN5JGoSJ6Ah2","attributionAgent":"general-purpose","type":"assistant","uuid":"d8f87218-fa66-47d4-b411-a591489fb77e","timestamp":"2026-06-22T14:54:49.651Z","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":"d8f87218-fa66-47d4-b411-a591489fb77e","isSidechain":true,"promptId":"d89edf80-4e6d-44ec-80c1-78c9295c891f","agentId":"a01683a908360cb30","type":"user","message":{"role":"user","content":[{"tool_use_id":"toolu_012eBSkg1iMi8mQdD2kSAGMt","type":"tool_result","content":"href=\"/es\"","is_error":false}]},"uuid":"efecf81d-efcf-4ce2-bf91-55a1d6351593","timestamp":"2026-06-22T14:54:49.779Z","toolUseResult":{"stdout":"href=\"/es\"","stderr":"","interrupted":false,"isImage":false,"noOutputExpected":false},"sourceToolAssistantUUID":"d8f87218-fa66-47d4-b411-a591489fb77e","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":"efecf81d-efcf-4ce2-bf91-55a1d6351593","isSidechain":true,"agentId":"a01683a908360cb30","message":{"model":"claude-opus-4-8","id":"msg_01KArgv5SFEXwaNt5VxN5VwB","type":"message","role":"assistant","content":[{"type":"text","text":"ES chrome links to `/es`. Consistent with the EN approach (single CTA href to the ES home, since no dedicated diagnostic route). I'll use `CTA_HREF = '/es'`. Now I'll create the ES template, mirroring the EN structure with Castilian Spanish chrome."}],"stop_reason":null,"stop_sequence":null,"stop_details":null,"usage":{"input_tokens":2,"cache_creation_input_tokens":219,"cache_read_input_tokens":98657,"cache_creation":{"ephemeral_5m_input_tokens":219,"ephemeral_1h_input_tokens":0},"output_tokens":3,"service_tier":"standard","inference_geo":"not_available"},"diagnostics":null},"requestId":"req_011CcJVRMVzccXDAWkm9EbMz","attributionAgent":"general-purpose","type":"assistant","uuid":"8fff2717-4b44-454c-a3e1-422b77b30f9d","timestamp":"2026-06-22T14:54:54.357Z","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":"8fff2717-4b44-454c-a3e1-422b77b30f9d","isSidechain":true,"agentId":"a01683a908360cb30","message":{"model":"claude-opus-4-8","id":"msg_01KArgv5SFEXwaNt5VxN5VwB","type":"message","role":"assistant","content":[{"type":"tool_use","id":"toolu_01DwNpCDGGNSuU3pRwDzCMbT","name":"Write","input":{"file_path":"/opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/src/components/es/roof/RoofPageTemplateES.tsx","content":"import { useState } from 'react';\nimport {\n  ArrowRight,\n  BadgeCheck,\n  CalendarClock,\n  CalendarCheck,\n  Check,\n  CheckCircle2,\n  ChevronDown,\n  Factory,\n  HelpCircle,\n  Play,\n  ShieldCheck,\n  ShieldAlert,\n  Sparkles,\n  SunMedium,\n  Thermometer,\n  TrendingDown,\n  Users,\n  Wrench,\n  ClipboardCheck,\n  type LucideIcon,\n} from 'lucide-react';\n\nimport FooterES from '@/components/es/FooterES';\nimport NavbarES from '@/components/es/NavbarES';\nimport ScrollReveal from '@/components/ScrollReveal';\nimport StickyMobileCTAES from '@/components/es/StickyMobileCTAES';\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';\nimport { Dialog, DialogContent } from '@/components/ui/dialog';\nimport { useJsonLd, usePageMeta } from '@/hooks/usePageMeta';\nimport { type RoofPageData, type TextCard } from '@/data/roofPages';\nimport coolRoofLayers from '@/assets/cool-roof-layers.webp';\nimport covaMetalProduct from '@/assets/produits/Covalba-CovaMetal20-Duo-Produit.webp';\nimport covaSealProduct from '@/assets/produits/Covalba-CovaSeal20-Duo-Produit.webp';\nimport covaTherm8Product from '@/assets/produits/Covalba-CovaTherm8-Produit.webp';\nimport covaTherm20Product from '@/assets/produits/Covalba-CovaTherm20-Produit.webp';\n\ninterface RoofPageTemplateESProps {\n  page: RoofPageData;\n}\n\nconst SITE_URL = 'https://www.covalba.fr';\n\n// Internal route for all CTAs on the ES site. There is no dedicated ES\n// diagnostic/contact route yet, so every conversion CTA points to the ES home.\nconst CTA_HREF = '/es';\n\nconst cardIcons: LucideIcon[] = [SunMedium, Wrench, Factory, ShieldCheck];\nconst methodIcons: LucideIcon[] = [ClipboardCheck, CalendarClock, ShieldCheck, TrendingDown];\nconst proofIcons: LucideIcon[] = [Thermometer, ShieldCheck, BadgeCheck];\nconst problemIcons: LucideIcon[] = [Users, SunMedium, ShieldAlert];\n\nconst logos = [\n  { name: 'Continental', url: '/logos/logo-continental.svg' },\n  { name: 'Thales', url: '/logos/logo-thales.svg' },\n  { name: 'Nestlé', url: '/logos/logo-nestle.svg' },\n  { name: 'SNCF', url: '/logos/logo-sncf.svg' },\n  { name: 'Leclerc', url: '/logos/logo-leclerc.svg' },\n  { name: 'Super U', url: '/logos/logo-super-u.svg' },\n];\n\nconst displayCell = (value: string) => value.replace(/EUR/g, '€').replace(/m2/g, 'm²');\n\nconst formatCurrency = (value: number) =>\n  `${new Intl.NumberFormat('es-ES', { maximumFractionDigits: 0 }).format(Math.round(value))} €`;\n\nconst parsePricePerM2 = (value: string) => {\n  const match = displayCell(value).match(/\\(([\\d,.]+)\\s*€\\/m²\\)/);\n  if (!match) return null;\n\n  return Number.parseFloat(match[1].replace(',', '.'));\n};\n\n// Keyword-matching anchored on FR slugs (page.slug values are shared across all\n// locales) plus a few Spanish copy keywords. Slug matching keeps the pricing\n// helpers stable regardless of the translated situation labels.\nconst getTreatmentRange = (page: RoofPageData, situation: string) => {\n  const text = `${page.slug} ${situation}`.toLowerCase();\n\n  if (\n    text.includes('covaseal') ||\n    text.includes('membrane-bitumineuse') ||\n    text.includes('toiture-plate') ||\n    text.includes('envejec') ||\n    text.includes('fuga')\n  ) {\n    return { min: 28, max: 38, label: 'CovaSeal 20 estimado' };\n  }\n\n  if (\n    text.includes('covametal') ||\n    text.includes('bac-acier') ||\n    text.includes('corrosión') ||\n    text.includes('corrosion') ||\n    text.includes('acero')\n  ) {\n    return { min: 24, max: 32, label: 'CovaMetal 20 estimado' };\n  }\n\n  if (text.includes('fibrociment') || text.includes('fibrocemento') || text.includes('placas')) {\n    return { min: 22, max: 28, label: 'CovaTherm soporte sensible' };\n  }\n\n  return { min: 20, max: 25, label: 'CovaTherm estimado' };\n};\n\nconst getFallbackPricePerM2 = (option: string, optionIndex: number, treatmentMidpoint: number) => {\n  const lower = option.toLowerCase();\n\n  if (optionIndex === 0) return treatmentMidpoint;\n  if (lower.includes('anticorrosión') || lower.includes('anticorrosion') || lower.includes('repintado')) return 16;\n  if (lower.includes('sustitución') || lower.includes('reemplazo') || lower.includes('cambio')) return 120;\n  if (lower.includes('membrana nueva') || lower.includes('membrana')) return 90;\n  if (lower.includes('aislamiento')) return 150;\n\n  return null;\n};\n\nconst benefitImages = [\n  '/images/toitures/benefit-confort.webp',\n  '/images/toitures/benefit-protection-toiture.webp',\n  '/images/toitures/benefit-clim.webp',\n  '/images/toitures/benefit-chantier-evite.webp',\n];\n\nconst feedbackRoofBenefitImages = [\n  '/images/toitures/feedback-batiment-tempere.png',\n  '/images/toitures/feedback-etancheite.png',\n  '/images/toitures/feedback-economie-clim-1.png',\n  '/images/toitures/feedback-economie-clim-3.png',\n];\n\nconst getBenefitImage = (page: RoofPageData, benefit: TextCard, index: number) => {\n  if (['membrane-bitumineuse', 'toiture-plate'].includes(page.slug)) {\n    return feedbackRoofBenefitImages[index] ?? feedbackRoofBenefitImages[0];\n  }\n\n  const text = `${benefit.title} ${benefit.text}`.toLowerCase();\n\n  if (page.slug === 'bac-acier' && (text.includes('acero') || text.includes('corrosión') || text.includes('óxido') || text.includes('oxidación'))) {\n    return '/images/toitures/support-bac-acier-cool.webp';\n  }\n\n  if (text.includes('factura') || text.includes('refrigeración') || text.includes('climatización') || text.includes('aire acondicionado') || text.includes('frío')) {\n    return '/images/toitures/benefit-clim.webp';\n  }\n\n  if (\n    text.includes('obra') ||\n    text.includes('reforma') ||\n    text.includes('rehabilitación') ||\n    text.includes('sustitución') ||\n    text.includes('retirada') ||\n    text.includes('desmontaje')\n  ) {\n    return '/images/toitures/benefit-chantier-evite.webp';\n  }\n\n  if (\n    text.includes('proteg') ||\n    text.includes('impermeab') ||\n    text.includes('estanqueidad') ||\n    text.includes('corrosión') ||\n    text.includes('vida útil') ||\n    text.includes('durab')\n  ) {\n    return '/images/toitures/benefit-protection-toiture.webp';\n  }\n\n  return benefitImages[index] ?? benefitImages[0];\n};\n\nconst supportVisuals: Record<string, { hot: string; cool: string; hotLabel: string; coolLabel: string }> = {\n  'membrane-bitumineuse': {\n    hot: '/images/toitures/support-bitume-chaud.webp',\n    cool: '/images/toitures/feedback-economie-clim-2.png',\n    hotLabel: 'Sin cool roof: membrana bituminosa que absorbe el calor',\n    coolLabel: 'Con cool roof: membrana reflectante',\n  },\n  'bac-acier': {\n    hot: '/images/toitures/support-bac-acier-chaud.webp',\n    cool: '/images/toitures/support-bac-acier-cool.webp',\n    hotLabel: 'Sin cool roof: metal sobrecalentado',\n    coolLabel: 'Con cool roof: chapa de acero reflectante y protegida',\n  },\n  'toiture-plate': {\n    hot: '/images/toitures/support-toiture-plate-chaud.webp',\n    cool: '/images/toitures/feedback-economie-clim-2.png',\n    hotLabel: 'Sin cool roof: cubierta plana que absorbe el calor',\n    coolLabel: 'Con cool roof: cubierta plana reflectante',\n  },\n  fibrociment: {\n    hot: '/images/toitures/support-fibrociment-chaud.webp',\n    cool: '/images/toitures/support-fibrociment-cool.webp',\n    hotLabel: 'Sin cool roof: fibrocemento que absorbe el calor',\n    coolLabel: 'Con cool roof: placas protegidas',\n  },\n  'tuiles-ciment': {\n    hot: '/images/toitures/support-tuiles-ciment-chaud.webp',\n    cool: '/images/toitures/support-tuiles-ciment-cool.webp',\n    hotLabel: 'Sin cool roof: tejas que acumulan calor',\n    coolLabel: 'Con cool roof: tejas reflectantes',\n  },\n};\n\nconst layerTitles = ['Imprimación de adherencia', 'Resina reflectante', 'Barniz de protección'];\n\nconst layerColors = [\n  {\n    pill: 'bg-terracotta text-white',\n    dot: 'bg-terracotta',\n    chevron: 'text-terracotta',\n  },\n  {\n    pill: 'bg-foreground text-white',\n    dot: 'bg-foreground',\n    chevron: 'text-foreground',\n  },\n  {\n    pill: 'bg-primary text-white',\n    dot: 'bg-primary',\n    chevron: 'text-primary',\n  },\n];\n\nconst layerPositions = [\n  { top: '56.7%', left: '36.5%' },\n  { top: '48.2%', left: '36.5%' },\n  { top: '36.3%', left: '35.6%' },\n];\n\nconst getProblemTitle = (title: string) => {\n  const map: Record<string, { strong: string; muted: string }> = {\n    'Una cubierta bituminosa negra es un radiador colocado sobre su edificio.': {\n      strong: 'Su cubierta se calienta.',\n      muted: 'Su edificio lo sufre.',\n    },\n    'La chapa de acero se calienta rápido, se oxida rápido y se desgasta rápido.': {\n      strong: 'El metal se calienta rápido.',\n      muted: 'La cubierta también se desgasta.',\n    },\n    'En plano, su cubierta recibe el sol todo el día.': {\n      strong: 'Su cubierta lo recibe todo.',\n      muted: 'Calor, UV, estanqueidad.',\n    },\n    'El fibrocemento se calienta, envejece y es caro de retirar.': {\n      strong: 'El fibrocemento se calienta.',\n      muted: 'Retirarlo cuesta caro.',\n    },\n    'Tejas de cemento oscuras, desvanes sobrecalentados.': {\n      strong: 'Las tejas acumulan calor.',\n      muted: 'Los desvanes lo sufren.',\n    },\n  };\n\n  return map[title] ?? { strong: title, muted: '' };\n};\n\nconst getLayerDescription = (index: number) => {\n  if (index === 0) {\n    return 'Se adapta al soporte existente. Cada cubierta tiene su química, y cada química requiere una preparación y una adherencia adaptadas.';\n  }\n\n  if (index === 1) {\n    return 'Es el corazón del sistema. La superficie refleja la radiación solar en lugar de absorberla, de modo que entra menos calor en el edificio.';\n  }\n\n  return 'Un barniz de acabado protege la resina de los UV, la contaminación y el envejecimiento prematuro para conservar el rendimiento en el tiempo.';\n};\n\nconst getLayerExpert = (index: number) => {\n  const notes = [\n    'Una imprimación inadecuada es un sistema que se ampolla y se despega. El soporte lo decide todo.',\n    'El cool roof trata la causa: la cubierta se calienta menos, así que el edificio recibe menos calor.',\n    'La diferencia entre una pintura y una inversión es cómo aguanta en el tiempo. El acabado está para proteger el rendimiento.',\n  ];\n\n  return notes[index] ?? notes[0];\n};\n\nconst Label = ({ children, light = false }: { children: string; light?: boolean }) => (\n  <div className=\"mb-5 flex items-center gap-3\">\n    <span className={`h-px w-9 ${light ? 'bg-teal-vivid/70' : 'bg-primary/65'}`} aria-hidden=\"true\" />\n    <span\n      className={`font-body text-[11px] font-bold uppercase tracking-[0.22em] ${\n        light ? 'text-teal-vivid' : 'text-primary'\n      }`}\n    >\n      {children}\n    </span>\n  </div>\n);\n\nconst PrimaryCTA = ({ label, href }: { label: string; href: string }) => (\n  <a\n    href={href}\n    className=\"group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white\"\n  >\n    <span className=\"text-sm\">{label}</span>\n    <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5\">\n      <ArrowRight className=\"h-3.5 w-3.5\" />\n    </span>\n  </a>\n);\n\nconst RoofHero = ({ page }: { page: RoofPageData }) => {\n  const [form, setForm] = useState({ climate: '', surface: '', email: '' });\n  const [submitted, setSubmitted] = useState(false);\n  const surfaceNum = parseFloat(form.surface) || 0;\n  const estimate = surfaceNum ? `${new Intl.NumberFormat('es-ES').format(surfaceNum * 22.5)} €` : '20-25 €/m²';\n\n  return (\n    <section\n      aria-labelledby={`${page.slug}-hero-title`}\n      className=\"relative isolate flex min-h-[100svh] flex-col overflow-hidden bg-navy text-cream\"\n    >\n      <img\n        src={page.heroImage}\n        alt={page.heroImageAlt}\n        className=\"absolute inset-0 -z-10 size-full scale-[1.02] object-cover\"\n        style={page.slug === 'membrane-bitumineuse' ? { objectPosition: 'center 28%' } : undefined}\n        loading=\"eager\"\n        decoding=\"async\"\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute inset-0 -z-10 hidden bg-gradient-to-r from-navy/[0.94] via-navy/62 to-navy/25 lg:block\"\n      />\n      <div\n        aria-hidden=\"true\"\n        className={`absolute inset-0 -z-10 bg-gradient-to-b lg:hidden ${\n          page.slug === 'membrane-bitumineuse'\n            ? 'from-navy/92 via-navy/58 to-navy/96'\n            : 'from-navy/84 via-navy/38 to-navy/96'\n        }`}\n      />\n      <div aria-hidden=\"true\" className=\"absolute inset-x-0 bottom-0 -z-10 h-[28%] bg-gradient-to-t from-navy via-navy/85 to-transparent\" />\n\n      <div className=\"container relative z-10 mx-auto flex flex-1 items-center px-6 pb-10 pt-24 lg:px-12 lg:pb-16 lg:pt-28\">\n        <div className=\"grid w-full grid-cols-1 items-center gap-10 lg:grid-cols-[55fr_45fr] lg:gap-12\">\n          <div className=\"max-w-2xl space-y-6 lg:space-y-8\">\n            <ScrollReveal>\n              <nav className=\"flex items-center gap-2 font-body text-xs text-cream/50\">\n                <a href=\"/es\" className=\"transition-colors hover:text-cream/75\">Inicio</a>\n                <span className=\"text-cream/28\">/</span>\n                <span>Cubiertas</span>\n                <span className=\"text-cream/28\">/</span>\n                <span className=\"text-cream/78\">{page.breadcrumb}</span>\n              </nav>\n            </ScrollReveal>\n\n            <ScrollReveal>\n              <h1\n                id={`${page.slug}-hero-title`}\n                className=\"font-satoshi font-bold leading-[1.02] text-white\"\n                style={{ fontSize: 'clamp(2.25rem, 4.6vw, 4rem)', letterSpacing: '-0.03em' }}\n              >\n                {page.h1}\n              </h1>\n            </ScrollReveal>\n\n            <ScrollReveal>\n              <p\n                className=\"max-w-xl font-satoshi font-medium leading-[1.3] text-cream/66\"\n                style={{ fontSize: 'clamp(1rem, 1.5vw, 1.375rem)', letterSpacing: '-0.005em' }}\n              >\n                {page.lead}\n              </p>\n            </ScrollReveal>\n\n            <ScrollReveal>\n              <ul className=\"hidden gap-4 pt-1 sm:flex sm:flex-wrap lg:gap-6\" aria-label=\"Beneficios clave\">\n                {page.heroStats.map((stat, index) => {\n                  const Icon = [Thermometer, ShieldCheck, TrendingDown][index] ?? BadgeCheck;\n                  return (\n                    <li\n                      key={stat.label}\n                      className={`flex items-start gap-3 ${index !== 0 ? 'sm:border-l sm:border-white/10 sm:pl-6' : ''}`}\n                    >\n                      <Icon className=\"mt-0.5 h-[18px] w-[18px] shrink-0 text-teal-vivid\" strokeWidth={1.5} />\n                      <div className=\"leading-tight\">\n                        <p className=\"font-satoshi text-[15px] font-bold text-white lg:text-base\">{stat.value}</p>\n                        <p className=\"mt-1 font-body text-[12.5px] text-cream/55 lg:text-[13px]\">{stat.label}</p>\n                      </div>\n                    </li>\n                  );\n                })}\n              </ul>\n            </ScrollReveal>\n          </div>\n\n          <ScrollReveal>\n            <div className=\"rounded-[1.5rem] border border-white/[0.08] bg-white/[0.04] p-1.5 backdrop-blur-sm\">\n              <div className=\"rounded-[calc(1.5rem-6px)] border border-white/[0.06] bg-[#0b1a2b]/80 p-4 shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)] backdrop-blur-xl lg:p-7\">\n                {!submitted ? (\n                  <>\n                    <h2 className=\"mb-1 text-center font-satoshi text-xl font-bold text-white lg:text-2xl\">\n                      Estime el ahorro posible\n                    </h2>\n                    <p className=\"mb-4 text-center font-body text-[12px] text-white/50\">\n                      Respuesta personalizada en 24 h\n                    </p>\n                    <form\n                      onSubmit={(event) => {\n                        event.preventDefault();\n                        setSubmitted(true);\n                      }}\n                      className=\"space-y-2.5 lg:space-y-3\"\n                    >\n                      <input\n                        value={page.breadcrumb}\n                        readOnly\n                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white outline-none\"\n                      />\n                      <select\n                        required\n                        value={form.climate}\n                        onChange={(e) => setForm({ ...form, climate: e.target.value })}\n                        className=\"w-full appearance-none rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n                      >\n                        <option value=\"\" disabled className=\"bg-card text-foreground\">¿Edificio climatizado?</option>\n                        {['Sí', 'No', 'Parcialmente', 'Por confirmar'].map((option) => (\n                          <option key={option} value={option} className=\"bg-card text-foreground\">{option}</option>\n                        ))}\n                      </select>\n                      <input\n                        type=\"number\"\n                        placeholder=\"Superficie de cubierta (m²)\"\n                        required\n                        min=\"1\"\n                        value={form.surface}\n                        onChange={(e) => setForm({ ...form, surface: e.target.value })}\n                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n                      />\n                      <input\n                        type=\"email\"\n                        placeholder=\"Correo profesional\"\n                        required\n                        value={form.email}\n                        onChange={(e) => setForm({ ...form, email: e.target.value })}\n                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n                      />\n\n                      <button\n                        type=\"submit\"\n                        className=\"group mt-1 flex w-full items-center justify-center gap-3 rounded-full cta-gradient py-3 font-semibold text-white active:scale-[0.98]\"\n                      >\n                        <span className=\"text-[15px]\">Ver mi potencial</span>\n                        <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5\">\n                          <ArrowRight className=\"h-4 w-4\" />\n                        </span>\n                      </button>\n                    </form>\n\n                    <p className=\"mt-3 text-center font-body text-[11px] text-white/35\">\n                      Sin compromiso · Estudio adaptado al soporte\n                    </p>\n                  </>\n                ) : (\n                  <div className=\"py-4 text-center\">\n                    <div className=\"mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/20\">\n                      <ShieldCheck className=\"h-6 w-6 text-primary\" />\n                    </div>\n                    <p className=\"mb-1 font-body text-sm text-white/60\">Base indicativa para {new Intl.NumberFormat('es-ES').format(surfaceNum)} m²</p>\n                    <p className=\"mb-4 font-satoshi text-2xl font-bold text-white\">{estimate}</p>\n                    <p className=\"mb-4 font-body text-[13px] text-white/50\">\n                      Un asesor ajusta el presupuesto según el estado real de la cubierta.\n                    </p>\n                    <button onClick={() => setSubmitted(false)} className=\"font-body text-sm font-semibold text-primary hover:underline\">\n                      Modificar mi solicitud\n                    </button>\n                  </div>\n                )}\n              </div>\n            </div>\n          </ScrollReveal>\n        </div>\n      </div>\n\n      <div className=\"relative z-10 hidden border-t border-white/10 bg-navy/78 backdrop-blur-md lg:block\">\n        <div className=\"container mx-auto flex items-center gap-8 px-12 py-5\">\n          <p className=\"shrink-0 font-body text-[10px] font-semibold uppercase tracking-[0.24em] text-cream/45\">\n            Confían en nosotros\n          </p>\n          <div className=\"flex flex-1 items-center justify-between gap-8\">\n            {logos.map((logo) => (\n              <span key={logo.name} className=\"flex h-8 w-28 items-center justify-center\">\n                <img\n                  src={logo.url}\n                  alt={logo.name}\n                  className=\"max-h-7 max-w-full object-contain opacity-65 brightness-0 invert transition-opacity duration-300 hover:opacity-95\"\n                  loading=\"eager\"\n                  decoding=\"async\"\n                />\n              </span>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst ProblemSection = ({ page }: { page: RoofPageData }) => {\n  const title = getProblemTitle(page.problem.title);\n  const visual = supportVisuals[page.slug] ?? supportVisuals['membrane-bitumineuse'];\n\n  return (\n    <section className=\"relative overflow-hidden bg-cream py-16 lg:py-36\">\n      <div className=\"container relative mx-auto px-4 lg:px-8\">\n        <ScrollReveal>\n          <div className=\"mx-auto mb-14 max-w-3xl text-center lg:mb-20\">\n            <h2\n              className=\"font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n              style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n            >\n              {title.strong}\n              {title.muted && <span className=\"text-foreground/30\"> {title.muted}</span>}\n            </h2>\n          </div>\n        </ScrollReveal>\n\n        <div className=\"grid grid-cols-1 items-center gap-12 lg:grid-cols-12 lg:gap-16\">\n          <div className=\"order-2 lg:order-1 lg:col-span-5\">\n            <ScrollReveal>\n              <div className=\"relative\">\n                <div className=\"pointer-events-none absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_hsl(var(--terracotta)/0.18)_0%,_transparent_65%)] blur-2xl\" />\n                <div className=\"relative aspect-square overflow-hidden rounded-[2rem] bg-white shadow-[0_30px_80px_-15px_hsl(var(--terracotta-dark)/0.25),_0_10px_30px_-5px_hsl(var(--terracotta)/0.12)]\">\n                  <img\n                    src={visual.hot}\n                    alt=\"\"\n                    className=\"h-full w-full object-contain p-4\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                </div>\n              </div>\n              <p className=\"mt-4 text-center font-body text-[11px] uppercase tracking-wide text-terracotta/60\">\n                {visual.hotLabel}\n              </p>\n            </ScrollReveal>\n          </div>\n\n          <div className=\"order-1 lg:order-2 lg:col-span-7 lg:pl-12\">\n            <ScrollReveal stagger>\n              <div\n                className=\"space-y-8 border-l-2 pl-8 lg:space-y-10 lg:pl-10\"\n                style={{ borderImage: 'linear-gradient(to bottom, hsl(var(--terracotta)), hsl(var(--terracotta-dark))) 1' }}\n              >\n                {page.problem.cards.map((card, index) => {\n                  const Icon = problemIcons[index] ?? HelpCircle;\n                  return (\n                    <div key={card.title}>\n                      <div className=\"mb-2 flex items-center gap-3\">\n                        <Icon className=\"h-5 w-5 text-terracotta\" strokeWidth={1.8} />\n                        <h3\n                          className=\"font-satoshi text-xl font-bold text-foreground lg:text-2xl\"\n                          style={{ letterSpacing: '-0.02em', lineHeight: 1.2 }}\n                        >\n                          {card.title}\n                        </h3>\n                      </div>\n                      <p className=\"font-body text-base leading-relaxed text-foreground/55\">{card.text}</p>\n                    </div>\n                  );\n                })}\n              </div>\n            </ScrollReveal>\n          </div>\n        </div>\n\n        <div className=\"mt-20 grid grid-cols-1 items-center gap-12 lg:mt-28 lg:grid-cols-12 lg:gap-16\">\n          <div className=\"order-2 lg:order-2 lg:col-span-5\">\n            <ScrollReveal>\n              <div className=\"relative\">\n                <div className=\"pointer-events-none absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_rgba(32,150,140,0.18)_0%,_transparent_65%)] blur-2xl\" />\n                <div className=\"relative aspect-square overflow-hidden rounded-[2rem] bg-white shadow-[0_30px_80px_-15px_rgba(20,120,110,0.20),_0_10px_30px_-5px_rgba(32,150,140,0.10)]\">\n                  <img\n                    src={visual.cool}\n                    alt=\"\"\n                    className=\"h-full w-full object-contain p-4\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                </div>\n              </div>\n              <p className=\"mt-4 text-center font-body text-[11px] uppercase tracking-wide text-primary/60\">\n                {visual.coolLabel}\n              </p>\n            </ScrollReveal>\n          </div>\n\n          <div className=\"order-1 lg:order-1 lg:col-span-7 lg:pr-12\">\n            <ScrollReveal>\n              <h3\n                className=\"mb-8 max-w-xl font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n              >\n                El cool roof: una respuesta concreta\n                <span className=\"text-foreground/30\"> al problema del calor.</span>\n              </h3>\n              <p className=\"mb-8 max-w-lg font-body text-base leading-relaxed text-foreground/50\">\n                Una superficie clara devuelve la radiación solar antes de que penetre en el edificio. La cubierta se calienta menos, las últimas plantas respiran y el soporte sufre menos UV y choques térmicos.\n              </p>\n              <PrimaryCTA label=\"Solicitar presupuesto\" href={CTA_HREF} />\n            </ScrollReveal>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst SolutionSection = ({ page }: { page: RoofPageData }) => {\n  const [active, setActive] = useState(0);\n\n  return (\n    <section className=\"relative bg-white\">\n      <div className=\"container mx-auto px-4 lg:px-8\">\n        <ScrollReveal>\n          <div className=\"flex flex-col gap-8 pb-10 pt-16 lg:flex-row lg:items-end lg:gap-16 lg:pb-16 lg:pt-32\">\n            <div className=\"lg:w-2/3\">\n              <p className=\"mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-muted-foreground\">\n                {page.solution.badge}\n              </p>\n              <h2\n                className=\"font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n              >\n                <span className=\"text-foreground/30\">Un sistema diseñado para </span>\n                reflejar, proteger y durar.\n              </h2>\n            </div>\n            <div className=\"lg:w-1/3 lg:pb-1\">\n              <p className=\"font-body text-base leading-relaxed text-foreground/52 lg:text-right lg:text-lg\">\n                Una imprimación, una resina y un barniz que garantizan el rendimiento de su cubierta en el tiempo.\n              </p>\n              <div className=\"mt-5 flex lg:justify-end\">\n                <PrimaryCTA label=\"Solicitar presupuesto\" href={CTA_HREF} />\n              </div>\n            </div>\n          </div>\n        </ScrollReveal>\n\n        <div className=\"flex flex-col gap-12 pb-24 lg:flex-row lg:gap-16 lg:pb-32\">\n          <div className=\"overflow-hidden rounded-2xl shadow-[0_20px_60px_-15px_rgba(0,0,0,0.08)] lg:hidden\">\n            <img src={coolRoofLayers} alt=\"Sección del sistema cool roof de Covalba\" className=\"w-full\" loading=\"lazy\" />\n          </div>\n\n          <div className=\"lg:w-1/2 lg:sticky lg:top-[20vh] lg:self-start\">\n            {layerTitles.map((item, index) => {\n              const isOpen = active === index;\n              const colors = layerColors[index] ?? layerColors[0];\n              return (\n                <div key={item} className=\"border-b border-border last:border-b-0\">\n                  <button\n                    onClick={() => setActive(index)}\n                    className=\"group flex w-full items-center gap-4 py-6 text-left\"\n                  >\n                    <span\n                      className={`inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-body text-[11px] font-bold transition-all duration-300 ${\n                        isOpen ? colors.pill : 'bg-muted text-muted-foreground'\n                      }`}\n                    >\n                      0{index + 1}\n                    </span>\n                    <h3\n                      className={`flex-1 font-satoshi text-xl font-bold transition-colors duration-300 lg:text-2xl ${\n                        isOpen ? 'text-foreground' : 'text-foreground/50 group-hover:text-foreground/80'\n                      }`}\n                    >\n                      {item}\n                    </h3>\n                    <ChevronDown\n                      className={`h-5 w-5 shrink-0 transition-all duration-300 ${\n                        isOpen ? `${colors.chevron} rotate-180` : 'text-foreground/25'\n                      }`}\n                      strokeWidth={2}\n                    />\n                  </button>\n\n                  <div\n                    className={`grid transition-all duration-500 ${\n                      isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'\n                    }`}\n                  >\n                    <div className=\"overflow-hidden\">\n                      <div className=\"pb-8 pl-6 lg:pl-12\">\n                        <p className=\"mb-6 font-body text-base leading-relaxed text-foreground/65 lg:text-lg\">\n                          {getLayerDescription(index)}\n                        </p>\n                        <div className=\"flex items-start gap-3 rounded-xl bg-foreground/[0.03] p-4\">\n                          <img\n                            src=\"/maxime-bourassin.jpg\"\n                            alt=\"Maxime Bourassin, fundador de Covalba\"\n                            className=\"mt-0.5 h-9 w-9 shrink-0 rounded-full object-cover\"\n                          />\n                          <div>\n                            <p className=\"font-body text-[15px] italic leading-relaxed text-foreground/65 lg:text-base\">\n                              \"{getLayerExpert(index)}\"\n                            </p>\n                            <p className=\"mt-2 font-body text-xs font-semibold text-foreground/50\">\n                              Maxime Bourassin, fundador\n                            </p>\n                          </div>\n                        </div>\n                        {index === 0 && page.solution.note && (\n                          <p className=\"mt-4 rounded-xl bg-primary/5 p-4 font-body text-sm leading-relaxed text-foreground/62\">\n                            {page.solution.note}\n                          </p>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n\n          <div className=\"hidden lg:block lg:w-1/2\">\n            <div className=\"relative overflow-hidden rounded-2xl shadow-[0_30px_80px_-15px_rgba(0,0,0,0.08)]\">\n              <img src={coolRoofLayers} alt=\"Sección del sistema cool roof de Covalba\" className=\"w-full\" loading=\"lazy\" />\n              {layerTitles.map((item, index) => {\n                const pos = layerPositions[index];\n                const colors = layerColors[index] ?? layerColors[0];\n                const isActive = active === index;\n                if (!pos) return null;\n\n                return (\n                  <div key={item} className=\"absolute\" style={{ top: pos.top, left: pos.left }}>\n                    <div\n                      className={`absolute -translate-x-1/2 -translate-y-1/2 transition-all duration-500 ${\n                        isActive ? 'scale-125' : 'scale-75 opacity-40'\n                      }`}\n                    >\n                      <div\n                        className={`h-3.5 w-3.5 rounded-full ${\n                          isActive ? colors.dot : 'bg-foreground/20'\n                        } shadow-lg ring-2 ring-white transition-colors duration-500`}\n                      />\n                      {isActive && (\n                        <div className={`absolute inset-0 h-3.5 w-3.5 animate-ping rounded-full ${colors.dot} opacity-30`} />\n                      )}\n                    </div>\n                    <div\n                      className={`pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 transition-all duration-500 ${\n                        isActive ? 'translate-x-0 opacity-100' : 'translate-x-2 opacity-0'\n                      }`}\n                    >\n                      <span className={`whitespace-nowrap rounded-full px-4 py-1.5 font-body text-[13px] font-bold shadow-lg ${colors.pill}`}>\n                        {item}\n                      </span>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst BenefitsSection = ({ page }: { page: RoofPageData }) => (\n  <section className=\"bg-white py-20 lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mb-10 grid gap-8 lg:grid-cols-[0.82fr_1.18fr] lg:items-end lg:gap-14\">\n          <div>\n            <Label>{page.benefits.badge}</Label>\n            <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl\">\n              {page.benefits.title}\n            </h2>\n          </div>\n          <p className=\"max-w-xl border-l border-primary/30 pl-6 font-body text-base leading-relaxed text-foreground/62 lg:text-lg\">\n            {page.benefits.featured}\n          </p>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal stagger>\n        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          {page.benefits.cards.map((benefit, index) => {\n            const Icon = cardIcons[index] ?? Sparkles;\n            return (\n              <article\n                key={benefit.title}\n                className=\"group overflow-hidden rounded-2xl bg-cream ring-1 ring-foreground/[0.05] transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_24px_70px_-48px_hsl(var(--navy)/0.45)]\"\n              >\n                <div className=\"relative aspect-[4/3] overflow-hidden bg-foreground/[0.04]\">\n                  <img\n                    src={getBenefitImage(page, benefit, index)}\n                    alt=\"\"\n                    className=\"h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.035]\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                  <div className=\"absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-cream to-transparent\" />\n                </div>\n                <div className=\"p-5 lg:p-6\">\n                  <div className=\"mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-white text-primary shadow-[0_12px_30px_-24px_hsl(var(--navy)/0.35)]\">\n                    <Icon className=\"h-5 w-5\" strokeWidth={1.7} />\n                  </div>\n                  <h3 className=\"font-satoshi text-lg font-bold leading-tight text-foreground\">{benefit.title}</h3>\n                  <p className=\"mt-2 font-body text-sm leading-relaxed text-foreground/62\">{benefit.text}</p>\n                </div>\n              </article>\n            );\n          })}\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst RoiOptionCards = ({\n  page,\n  surface,\n  treatmentRange,\n}: {\n  page: RoofPageData;\n  surface: number;\n  treatmentRange: ReturnType<typeof getTreatmentRange>;\n}) => {\n  if (!page.roi.comparison) {\n    return page.roi.afterComparison ? (\n      <article className=\"rounded-2xl bg-white p-6 ring-1 ring-foreground/[0.06] lg:p-8\">\n        <p className=\"font-body text-base leading-relaxed text-foreground/66 lg:text-lg\">\n          {page.roi.afterComparison}\n        </p>\n      </article>\n    ) : null;\n  }\n\n  const options = page.roi.comparison.headers.slice(1);\n  const rows = page.roi.comparison.rows;\n  const investment = rows.find((row) => {\n    const key = row[0].toLowerCase();\n    return key.includes('inversión') || key.includes('inversion');\n  });\n  const duration = rows.find((row) => {\n    const key = row[0].toLowerCase();\n    return key.includes('durac') || key.includes('vida útil') || key.includes('vida');\n  });\n  const activity = rows.find((row) => {\n    const key = row[0].toLowerCase();\n    return key.includes('activ') || key.includes('operac');\n  });\n  const treatmentMidpoint = (treatmentRange.min + treatmentRange.max) / 2;\n\n  return (\n    <div className=\"grid gap-4 lg:grid-cols-3\">\n      {options.map((option, optionIndex) => {\n        const isCovalba = optionIndex === 0;\n        const rawInvestment = investment?.[optionIndex + 1] ?? '';\n        const parsedPrice = parsePricePerM2(rawInvestment);\n        const pricePerM2 = parsedPrice ?? getFallbackPricePerM2(option, optionIndex, treatmentMidpoint);\n        const dynamicInvestment = pricePerM2 ? `~${formatCurrency(surface * pricePerM2)}` : displayCell(rawInvestment);\n\n        return (\n          <article\n            key={option}\n            className={`rounded-2xl p-6 ring-1 ${\n              isCovalba\n                ? 'bg-[#142333] text-white ring-transparent'\n                : 'bg-white text-foreground ring-foreground/[0.06]'\n            }`}\n          >\n            <div className=\"mb-6 flex items-start justify-between gap-4\">\n              <h3 className=\"font-satoshi text-xl font-black leading-tight\">{option}</h3>\n              {isCovalba && (\n                <span className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-teal-vivid/15 text-teal-vivid\">\n                  <Check className=\"h-4 w-4\" strokeWidth={2.4} />\n                </span>\n              )}\n            </div>\n            <p className={`font-satoshi text-3xl font-black leading-none ${isCovalba ? 'text-teal-vivid' : 'text-terracotta'}`}>\n              {dynamicInvestment}\n            </p>\n            {pricePerM2 && (\n              <p className={`mt-2 font-body text-xs font-semibold ${isCovalba ? 'text-white/45' : 'text-foreground/40'}`}>\n                base {new Intl.NumberFormat('es-ES').format(surface)} m² · {pricePerM2.toLocaleString('es-ES')} €/m²\n              </p>\n            )}\n            <dl className=\"mt-6 space-y-3 border-t border-current/10 pt-5\">\n              {[duration, activity].filter(Boolean).map((row) => (\n                <div key={row![0]} className=\"grid grid-cols-[0.75fr_1fr] gap-4\">\n                  <dt className={`font-body text-xs font-bold uppercase tracking-[0.14em] ${isCovalba ? 'text-white/38' : 'text-foreground/35'}`}>\n                    {displayCell(row![0])}\n                  </dt>\n                  <dd className={`font-body text-sm leading-relaxed ${isCovalba ? 'text-white/74' : 'text-foreground/62'}`}>\n                    {displayCell(row![optionIndex + 1])}\n                  </dd>\n                </div>\n              ))}\n            </dl>\n          </article>\n        );\n      })}\n    </div>\n  );\n};\n\nconst ROICalculator = ({\n  page,\n  surface,\n  selectedSituation,\n  treatmentRange,\n  onSurfaceChange,\n  onSituationChange,\n}: {\n  page: RoofPageData;\n  surface: number;\n  selectedSituation: string;\n  treatmentRange: ReturnType<typeof getTreatmentRange>;\n  onSurfaceChange: (surface: number) => void;\n  onSituationChange: (situation: string) => void;\n}) => {\n  const treatmentLow = surface * treatmentRange.min;\n  const treatmentHigh = surface * treatmentRange.max;\n  const referencePrice = selectedSituation.toLowerCase().includes('aislamiento') ? 150 : 90;\n  const referenceCost = surface * referencePrice;\n  const potentialGap = Math.max(referenceCost - treatmentHigh, 0);\n\n  return (\n    <div className=\"mb-10 rounded-[2rem] bg-[#142333] p-5 text-white shadow-[0_34px_90px_-64px_hsl(var(--navy)/0.65)] lg:p-8\">\n      <div className=\"grid gap-7 lg:grid-cols-[0.88fr_1.12fr] lg:items-end\">\n        <div>\n          <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-teal-vivid/70\">\n            Calculadora indicativa\n          </p>\n          <h3 className=\"mt-4 max-w-lg font-satoshi text-2xl font-black leading-tight lg:text-3xl\">\n            Ajuste la superficie y el estado de la cubierta.\n          </h3>\n          <p className=\"mt-3 max-w-lg font-body text-sm leading-relaxed text-white/52\">\n            Por defecto: 5.000 m², superficie típica de una nave o edificio industrial a tratar.\n          </p>\n        </div>\n\n        <div className=\"grid gap-3 sm:grid-cols-[0.72fr_1.28fr]\">\n          <label className=\"block\">\n            <span className=\"mb-2 block font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/40\">\n              Superficie\n            </span>\n            <input\n              type=\"number\"\n              min={100}\n              step={100}\n              value={surface}\n              onChange={(event) => onSurfaceChange(Math.max(100, Number(event.target.value) || 100))}\n              className=\"h-12 w-full rounded-xl border border-white/10 bg-white/[0.07] px-4 font-body text-sm font-semibold text-white outline-none transition focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20\"\n              aria-label=\"Superficie a tratar en metros cuadrados\"\n            />\n          </label>\n          <label className=\"block\">\n            <span className=\"mb-2 block font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/40\">\n              Situación\n            </span>\n            <select\n              value={selectedSituation}\n              onChange={(event) => onSituationChange(event.target.value)}\n              className=\"h-12 w-full rounded-xl border border-white/10 bg-white/[0.07] px-4 font-body text-sm font-semibold text-white outline-none transition focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20\"\n              aria-label=\"Situación de la cubierta\"\n            >\n              {page.roi.situation.rows.map((row) => (\n                <option key={row[0]} value={row[0]} className=\"bg-card text-foreground\">\n                  {row[0]}\n                </option>\n              ))}\n            </select>\n          </label>\n        </div>\n      </div>\n\n      <div className=\"mt-7 grid gap-3 md:grid-cols-3\">\n        {[\n          {\n            label: treatmentRange.label,\n            value: `${formatCurrency(treatmentLow)} - ${formatCurrency(treatmentHigh)}`,\n            detail: `${treatmentRange.min}-${treatmentRange.max} €/m² según preparación`,\n            valueClass: 'text-teal-vivid',\n          },\n          {\n            label: 'Rehabilitación de referencia',\n            value: `~${formatCurrency(referenceCost)}`,\n            detail: `${referencePrice} €/m², orden de magnitud a comparar`,\n            valueClass: 'text-terracotta',\n          },\n          {\n            label: 'Diferencia potencial',\n            value: `hasta ${formatCurrency(potentialGap)}`,\n            detail: 'Inversión pesada evitada o aplazada si el soporte es viable',\n            valueClass: 'text-teal-vivid',\n          },\n        ].map((item) => (\n          <article key={item.label} className=\"rounded-2xl bg-white/[0.07] p-5 ring-1 ring-white/10\">\n            <p className=\"font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/38\">{item.label}</p>\n            <p className={`mt-3 font-satoshi text-2xl font-black leading-tight ${item.valueClass}`}>{item.value}</p>\n            <p className=\"mt-2 font-body text-xs leading-relaxed text-white/45\">{item.detail}</p>\n          </article>\n        ))}\n      </div>\n      <p className=\"mt-4 font-body text-xs leading-relaxed text-white/38\">\n        Presupuesto indicativo: el estudio ajusta el precio según el acceso, la preparación, los puntos singulares y el estado real del soporte.\n      </p>\n    </div>\n  );\n};\n\nconst getSituationImage = (recommendation: string) => {\n  const lower = recommendation.toLowerCase();\n  if (lower.includes('covametal')) return covaMetalProduct;\n  if (lower.includes('covaseal')) return covaSealProduct;\n  if (lower.includes('cova')) return covaTherm20Product;\n  return covaTherm8Product;\n};\n\nconst SituationCards = ({ rows }: { rows: string[][] }) => (\n  <div className=\"grid gap-4 md:grid-cols-2\">\n    {rows.map((row) => (\n      <article key={row[0]} className=\"grid gap-4 rounded-2xl bg-white p-4 ring-1 ring-foreground/[0.06] sm:grid-cols-[128px_1fr] lg:grid-cols-[190px_1fr] lg:gap-5 lg:p-5\">\n        <div className=\"flex aspect-[4/3] items-center justify-center rounded-xl bg-gradient-to-br from-cream to-white p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.75),_0_18px_44px_-34px_hsl(var(--navy)/0.45)] ring-1 ring-foreground/[0.04] sm:aspect-square lg:p-6\">\n          <img src={getSituationImage(row[1])} alt=\"\" className=\"max-h-full max-w-full object-contain\" loading=\"lazy\" decoding=\"async\" />\n        </div>\n        <div className=\"self-center\">\n          <p className=\"font-satoshi text-lg font-bold leading-tight text-foreground\">{row[0]}</p>\n          <p className=\"mt-2 font-body text-sm font-bold text-primary\">{row[1]}</p>\n          <p className=\"mt-2 font-body text-sm leading-relaxed text-foreground/58\">{row[2]}</p>\n        </div>\n      </article>\n    ))}\n  </div>\n);\n\nconst ROISection = ({ page }: { page: RoofPageData }) => {\n  const [surface, setSurface] = useState(5000);\n  const [selectedSituation, setSelectedSituation] = useState(page.roi.situation.rows[0]?.[0] ?? '');\n  const treatmentRange = getTreatmentRange(page, selectedSituation);\n\n  return (\n    <section className=\"bg-cream py-20 lg:py-32\">\n      <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mx-auto mb-12 max-w-3xl text-center lg:mb-16\">\n          <div className=\"flex justify-center\">\n            <Label>{page.roi.badge}</Label>\n          </div>\n          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-[3rem]\">\n            {page.roi.title}\n          </h2>\n          <p className=\"mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-foreground/58 lg:text-lg\">\n            {page.roi.intro}\n          </p>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mb-12 grid gap-4 md:grid-cols-3\">\n          {[\n            ['20-25 €/m²', 'para tratar y refrescar'],\n            ['8-10 años', 'de rehabilitación aplazada'],\n            ['0 paradas', 'de actividad durante la obra'],\n          ].map(([value, label]) => (\n            <article key={value} className=\"rounded-2xl bg-white p-6 text-center ring-1 ring-foreground/[0.06]\">\n              <p className=\"font-satoshi text-4xl font-black leading-none text-primary\">{value}</p>\n              <p className=\"mt-3 font-body text-sm font-semibold text-foreground/52\">{label}</p>\n            </article>\n          ))}\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mb-8 max-w-2xl\">\n          <div>\n            <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55\">\n              Comparar las opciones\n            </p>\n            <h3 className=\"mt-4 font-satoshi text-2xl font-black leading-tight text-foreground lg:text-3xl\">\n              Una lectura rápida del presupuesto.\n            </h3>\n          </div>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <ROICalculator\n          page={page}\n          surface={surface}\n          selectedSituation={selectedSituation}\n          treatmentRange={treatmentRange}\n          onSurfaceChange={setSurface}\n          onSituationChange={setSelectedSituation}\n        />\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <RoiOptionCards page={page} surface={surface} treatmentRange={treatmentRange} />\n        {page.roi.comparison && page.roi.afterComparison && (\n          <p className=\"mt-5 max-w-3xl font-body text-sm leading-relaxed text-foreground/52 lg:text-base\">\n            {page.roi.afterComparison}\n          </p>\n        )}\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mt-16 rounded-[2rem] bg-white p-5 ring-1 ring-foreground/[0.06] lg:mt-20 lg:p-8\">\n          <div className=\"mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between\">\n            <div>\n              <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55\">\n                Decidir según el estado real\n              </p>\n              <h3 className=\"mt-4 max-w-xl font-satoshi text-2xl font-black leading-tight text-foreground lg:text-3xl\">\n                ¿Qué solución para su cubierta?\n              </h3>\n            </div>\n            <PrimaryCTA label={page.roi.cta} href={CTA_HREF} />\n          </div>\n          <SituationCards rows={page.roi.situation.rows} />\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n  );\n};\n\nconst DiagnosticCTA = ({ title, text }: { title: string; text: string }) => (\n  <section className=\"relative overflow-hidden bg-[#182A3A] py-14 text-white lg:py-20\">\n    <div\n      aria-hidden=\"true\"\n      className=\"absolute inset-0 opacity-35\"\n      style={{\n        backgroundImage:\n          'radial-gradient(circle at 16% 20%, rgba(83, 207, 166, 0.22), transparent 28%), linear-gradient(115deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 120px)',\n      }}\n    />\n    <div className=\"container relative mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mx-auto grid max-w-5xl gap-7 lg:grid-cols-[1fr_auto] lg:items-center\">\n          <div>\n            <h2 className=\"font-satoshi text-2xl font-black leading-tight lg:text-4xl\">{title}</h2>\n            <p className=\"mt-3 max-w-2xl font-body text-sm leading-relaxed text-white/68 lg:text-base\">{text}</p>\n          </div>\n          <div className=\"flex flex-col gap-3 sm:flex-row lg:justify-end\">\n            <PrimaryCTA label=\"Solicitar presupuesto\" href={CTA_HREF} />\n          </div>\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst MethodSection = ({ page }: { page: RoofPageData }) => {\n  const [videoOpen, setVideoOpen] = useState(false);\n\n  return (\n    <section className=\"bg-white py-16 lg:py-32\">\n      <div className=\"container mx-auto px-4 lg:px-8\">\n        <div className=\"flex flex-col items-start gap-12 lg:flex-row lg:gap-20\">\n          <div className=\"lg:sticky lg:top-[120px] lg:w-[40%]\">\n            <ScrollReveal>\n              <p className=\"mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/50\">\n                El proceso\n              </p>\n              <h2\n                className=\"mb-6 font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n              >\n                4 etapas. Cero interrupción.\n                <span className=\"text-foreground/30\"> Cero riesgo.</span>\n              </h2>\n              <p className=\"mb-8 font-body text-base leading-relaxed text-muted-foreground lg:text-lg\">\n                {page.method.reassurance}\n              </p>\n              <button\n                onClick={() => setVideoOpen(true)}\n                className=\"group flex items-center gap-3 text-primary transition-colors hover:text-primary\"\n              >\n                <span className=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 transition-colors group-hover:bg-primary/20\">\n                  <Play className=\"h-5 w-5\" />\n                </span>\n                <span className=\"font-body text-sm font-semibold\">Ver una obra en 2 minutos</span>\n              </button>\n            </ScrollReveal>\n          </div>\n\n          <div className=\"relative lg:w-[60%]\">\n            <div className=\"absolute bottom-4 left-5 top-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent lg:left-6\" />\n            <div className=\"flex flex-col\">\n              {page.method.steps.map((step, index) => {\n                const Icon = methodIcons[index] ?? CheckCircle2;\n                return (\n                  <ScrollReveal key={step.title}>\n                    <div className=\"group relative flex items-start gap-5 py-8 lg:gap-7 lg:py-10\">\n                      <span className=\"relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-primary/10 transition-colors duration-500 group-hover:bg-primary/15 lg:h-12 lg:w-12\">\n                        <Icon className=\"h-4 w-4 text-primary lg:h-5 lg:w-5\" />\n                      </span>\n                      <div className=\"pt-1\">\n                        <span className=\"mb-2 block font-body text-xs font-bold uppercase tracking-widest text-primary/50\">\n                          Etapa 0{index + 1}\n                        </span>\n                        <h3 className=\"mb-2 font-satoshi text-xl font-bold text-foreground lg:text-2xl\">\n                          {step.title}\n                        </h3>\n                        <p className=\"max-w-md font-body text-sm leading-relaxed text-muted-foreground lg:text-base\">\n                          {step.text}\n                        </p>\n                      </div>\n                    </div>\n                    {index < page.method.steps.length - 1 && <div className=\"ml-5 h-px bg-border lg:ml-6\" />}\n                  </ScrollReveal>\n                );\n              })}\n            </div>\n\n            <ScrollReveal>\n              <div className=\"ml-16 mt-4 lg:ml-20\">\n                <p className=\"font-body text-xs font-medium text-muted-foreground/50\">\n                  Duración media: 3 días · Sin parada de actividad\n                </p>\n              </div>\n            </ScrollReveal>\n          </div>\n        </div>\n      </div>\n\n      <Dialog open={videoOpen} onOpenChange={setVideoOpen}>\n        <DialogContent className=\"max-w-4xl overflow-hidden border-none bg-black p-0\">\n          <div className=\"aspect-video\">\n            <iframe\n              src=\"https://www.youtube.com/embed/9HOB5OVH0Ac?autoplay=1\"\n              className=\"h-full w-full\"\n              allow=\"autoplay; encrypted-media\"\n              allowFullScreen\n              title=\"Covalba Cool Roof, una obra en 2 minutos\"\n            />\n          </div>\n        </DialogContent>\n      </Dialog>\n    </section>\n  );\n};\n\nconst ProofSection = ({ page }: { page: RoofPageData }) => (\n  <section className=\"bg-[#192A3A] py-20 text-white lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mb-12 grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-end\">\n          <div>\n            <Label light>{page.proof.badge}</Label>\n            <h2 className=\"font-satoshi text-3xl font-black leading-tight sm:text-4xl lg:text-5xl\">{page.proof.title}</h2>\n          </div>\n          <p className=\"max-w-xl font-body text-base leading-relaxed text-white/62\">\n            Cifras de campo a confirmar obra por obra, utilizadas aquí como referencias de rendimiento.\n          </p>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal stagger>\n        <div className=\"grid gap-4 md:grid-cols-3\">\n          {page.proof.figures.map((figure, index) => {\n            const Icon = proofIcons[index] ?? BadgeCheck;\n            return (\n              <article key={figure.value} className=\"rounded-2xl border border-white/10 bg-white/[0.045] p-7\">\n                <Icon className=\"mb-6 h-6 w-6 text-teal-vivid\" strokeWidth={1.7} />\n                <p className=\"font-satoshi text-3xl font-black leading-none text-white lg:text-4xl\">{figure.value}</p>\n                <p className=\"mt-3 font-body text-sm leading-relaxed text-white/60\">{figure.label}</p>\n              </article>\n            );\n          })}\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mt-14 border-t border-white/10 pt-10\">\n          <p className=\"mb-8 text-center font-body text-[10px] font-bold uppercase tracking-[0.22em] text-white/42\">\n            Referencias de clientes\n          </p>\n          <div className=\"flex flex-wrap items-center justify-center gap-x-10 gap-y-7 lg:gap-x-14\">\n            {logos.map((logo) => (\n              <span key={logo.name} className=\"flex h-8 w-28 items-center justify-center\">\n                <img\n                  src={logo.url}\n                  alt={logo.name}\n                  className=\"max-h-7 max-w-full object-contain opacity-45 transition-opacity duration-300 hover:opacity-80\"\n                  style={{ filter: 'brightness(0) invert(1)' }}\n                  loading=\"lazy\"\n                />\n              </span>\n            ))}\n          </div>\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst FAQSection = ({ faq }: { faq: RoofPageData['faq'] }) => (\n  <section className=\"bg-cream py-20 lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <div className=\"grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:gap-16\">\n        <ScrollReveal>\n          <div className=\"lg:sticky lg:top-24\">\n            <Label>FAQ</Label>\n            <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl\">\n              Sus preguntas,\n              <br />\n              <span className=\"text-foreground/40\">nuestras respuestas.</span>\n            </h2>\n            <a href=\"#contact\" className=\"group mt-8 inline-flex items-center gap-2 font-body text-sm font-semibold text-primary transition-all hover:gap-3\">\n              ¿Otra pregunta? Hablemos\n              <ArrowRight className=\"h-4 w-4\" />\n            </a>\n          </div>\n        </ScrollReveal>\n\n        <ScrollReveal>\n          <Accordion type=\"single\" collapsible className=\"space-y-3\">\n            {faq.map((item, index) => (\n              <AccordionItem\n                key={item.q}\n                value={`roof-faq-${index}`}\n                className=\"rounded-xl border border-foreground/[0.06] bg-white px-5 shadow-[0_12px_34px_rgba(24,42,58,0.04)] data-[state=open]:border-primary/20 lg:px-6\"\n              >\n                <AccordionTrigger className=\"py-5 text-left font-satoshi text-base font-bold text-foreground hover:no-underline lg:text-[17px]\">\n                  {item.q}\n                </AccordionTrigger>\n                <AccordionContent className=\"pb-5 font-body text-[14.5px] leading-relaxed text-foreground/67 lg:text-[15px]\">\n                  {item.a}\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </ScrollReveal>\n      </div>\n    </div>\n  </section>\n);\n\nconst FinalCTA = ({ page }: { page: RoofPageData }) => (\n  <section id=\"contact\" className=\"overflow-hidden bg-[#182A3A] py-20 text-white lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mx-auto max-w-4xl text-center\">\n          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl\">\n            {page.finalCta.title}\n          </h2>\n          <p className=\"mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-white/72 lg:text-lg\">\n            {page.finalCta.text}\n          </p>\n          <div className=\"mt-9 flex flex-col gap-3 sm:flex-row sm:justify-center\">\n            <PrimaryCTA label=\"Solicitar presupuesto\" href={CTA_HREF} />\n          </div>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <ul className=\"mx-auto mt-12 grid max-w-3xl gap-3 sm:grid-cols-3\">\n          {page.finalCta.reassurances.map((item) => (\n            <li key={item} className=\"flex items-center justify-center gap-2.5 rounded-lg border border-white/[0.12] bg-white/[0.045] px-4 py-3\">\n              <CalendarCheck className=\"h-4 w-4 shrink-0 text-teal-vivid\" strokeWidth={1.8} />\n              <span className=\"font-body text-sm text-white/[0.76]\">{item}</span>\n            </li>\n          ))}\n        </ul>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst SEOContent = ({ page }: { page: RoofPageData }) => (\n  <section className=\"bg-white py-20 lg:py-28\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <article className=\"mx-auto max-w-3xl\">\n          <p className=\"mb-5 font-body text-[10px] font-bold uppercase tracking-[0.25em] text-primary/55\">\n            Guía de soporte\n          </p>\n          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground lg:text-4xl\">\n            Todo lo que hay que saber sobre {page.eyebrow.toLowerCase()}.\n          </h2>\n          <p className=\"mt-6 font-body text-base leading-relaxed text-foreground/68 lg:text-lg\">\n            {page.seo.intro}\n          </p>\n\n          <div className=\"mt-10 space-y-9\">\n            {page.seo.sections.map((section) => (\n              <section key={section.title}>\n                <h3 className=\"font-satoshi text-2xl font-bold leading-tight text-foreground\">{section.title}</h3>\n                <p className=\"mt-3 font-body text-base leading-relaxed text-foreground/66\">{section.text}</p>\n              </section>\n            ))}\n          </div>\n\n          <div className=\"mt-12 rounded-2xl bg-cream p-6 ring-1 ring-foreground/[0.05]\">\n            <h3 className=\"font-satoshi text-lg font-bold text-foreground\">Fuentes</h3>\n            <ul className=\"mt-4 space-y-2\">\n              {page.seo.sources.map((source) => (\n                <li key={source.href}>\n                  <a href={source.href} className=\"font-body text-sm leading-relaxed text-primary underline-offset-4 hover:underline\" target=\"_blank\" rel=\"noreferrer\">\n                    {source.label}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </article>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst buildFaqSchema = (page: RoofPageData) => ({\n  '@context': 'https://schema.org',\n  '@type': 'FAQPage',\n  mainEntity: page.faq.map((item) => ({\n    '@type': 'Question',\n    name: item.q,\n    acceptedAnswer: {\n      '@type': 'Answer',\n      text: item.a,\n    },\n  })),\n});\n\nconst buildBreadcrumbSchema = (page: RoofPageData) => ({\n  '@context': 'https://schema.org',\n  '@type': 'BreadcrumbList',\n  itemListElement: [\n    { '@type': 'ListItem', position: 1, name: 'Inicio', item: `${SITE_URL}/es` },\n    { '@type': 'ListItem', position: 2, name: 'Cubiertas', item: `${SITE_URL}/es` },\n    { '@type': 'ListItem', position: 3, name: page.breadcrumb, item: page.canonical },\n  ],\n});\n\nconst RoofPageTemplateES = ({ page }: RoofPageTemplateESProps) => {\n  usePageMeta({\n    title: page.title,\n    description: page.description,\n    canonical: page.canonical,\n  });\n  useJsonLd(`roof-es-${page.slug}-faq`, buildFaqSchema(page));\n  useJsonLd(`roof-es-${page.slug}-breadcrumb`, buildBreadcrumbSchema(page));\n\n  return (\n    <>\n      <NavbarES />\n      <main>\n        <RoofHero page={page} />\n        <ProblemSection page={page} />\n        <SolutionSection page={page} />\n        <BenefitsSection page={page} />\n        <ROISection page={page} />\n        <DiagnosticCTA title={page.midCta.title} text={page.midCta.text} />\n        <MethodSection page={page} />\n        <ProofSection page={page} />\n        <FAQSection faq={page.faq} />\n        <FinalCTA page={page} />\n        <SEOContent page={page} />\n      </main>\n      <FooterES />\n      <StickyMobileCTAES />\n    </>\n  );\n};\n\nexport default RoofPageTemplateES;\n"},"caller":{"type":"direct"}}],"stop_reason":"tool_use","stop_sequence":null,"stop_details":null,"usage":{"input_tokens":2,"cache_creation_input_tokens":219,"cache_read_input_tokens":98657,"output_tokens":25707,"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":219},"inference_geo":"not_available","iterations":[{"input_tokens":2,"output_tokens":25707,"cache_read_input_tokens":98657,"cache_creation_input_tokens":219,"cache_creation":{"ephemeral_5m_input_tokens":219,"ephemeral_1h_input_tokens":0},"type":"message"}],"speed":"standard"},"diagnostics":null},"requestId":"req_011CcJVRMVzccXDAWkm9EbMz","attributionAgent":"general-purpose","type":"assistant","uuid":"ff17c7f4-df06-4a2e-bc62-126ddb9f5558","timestamp":"2026-06-22T14:58:19.759Z","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":"ff17c7f4-df06-4a2e-bc62-126ddb9f5558","isSidechain":true,"promptId":"d89edf80-4e6d-44ec-80c1-78c9295c891f","agentId":"a01683a908360cb30","type":"user","message":{"role":"user","content":[{"tool_use_id":"toolu_01DwNpCDGGNSuU3pRwDzCMbT","type":"tool_result","content":"File created successfully at: /opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/src/components/es/roof/RoofPageTemplateES.tsx (file state is current in your context — no need to Read it back)"}]},"uuid":"703d7c9d-fc1b-4f0a-b470-c5771bde0018","timestamp":"2026-06-22T14:58:19.876Z","toolUseResult":{"type":"create","filePath":"/opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/src/components/es/roof/RoofPageTemplateES.tsx","content":"import { useState } from 'react';\nimport {\n  ArrowRight,\n  BadgeCheck,\n  CalendarClock,\n  CalendarCheck,\n  Check,\n  CheckCircle2,\n  ChevronDown,\n  Factory,\n  HelpCircle,\n  Play,\n  ShieldCheck,\n  ShieldAlert,\n  Sparkles,\n  SunMedium,\n  Thermometer,\n  TrendingDown,\n  Users,\n  Wrench,\n  ClipboardCheck,\n  type LucideIcon,\n} from 'lucide-react';\n\nimport FooterES from '@/components/es/FooterES';\nimport NavbarES from '@/components/es/NavbarES';\nimport ScrollReveal from '@/components/ScrollReveal';\nimport StickyMobileCTAES from '@/components/es/StickyMobileCTAES';\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';\nimport { Dialog, DialogContent } from '@/components/ui/dialog';\nimport { useJsonLd, usePageMeta } from '@/hooks/usePageMeta';\nimport { type RoofPageData, type TextCard } from '@/data/roofPages';\nimport coolRoofLayers from '@/assets/cool-roof-layers.webp';\nimport covaMetalProduct from '@/assets/produits/Covalba-CovaMetal20-Duo-Produit.webp';\nimport covaSealProduct from '@/assets/produits/Covalba-CovaSeal20-Duo-Produit.webp';\nimport covaTherm8Product from '@/assets/produits/Covalba-CovaTherm8-Produit.webp';\nimport covaTherm20Product from '@/assets/produits/Covalba-CovaTherm20-Produit.webp';\n\ninterface RoofPageTemplateESProps {\n  page: RoofPageData;\n}\n\nconst SITE_URL = 'https://www.covalba.fr';\n\n// Internal route for all CTAs on the ES site. There is no dedicated ES\n// diagnostic/contact route yet, so every conversion CTA points to the ES home.\nconst CTA_HREF = '/es';\n\nconst cardIcons: LucideIcon[] = [SunMedium, Wrench, Factory, ShieldCheck];\nconst methodIcons: LucideIcon[] = [ClipboardCheck, CalendarClock, ShieldCheck, TrendingDown];\nconst proofIcons: LucideIcon[] = [Thermometer, ShieldCheck, BadgeCheck];\nconst problemIcons: LucideIcon[] = [Users, SunMedium, ShieldAlert];\n\nconst logos = [\n  { name: 'Continental', url: '/logos/logo-continental.svg' },\n  { name: 'Thales', url: '/logos/logo-thales.svg' },\n  { name: 'Nestlé', url: '/logos/logo-nestle.svg' },\n  { name: 'SNCF', url: '/logos/logo-sncf.svg' },\n  { name: 'Leclerc', url: '/logos/logo-leclerc.svg' },\n  { name: 'Super U', url: '/logos/logo-super-u.svg' },\n];\n\nconst displayCell = (value: string) => value.replace(/EUR/g, '€').replace(/m2/g, 'm²');\n\nconst formatCurrency = (value: number) =>\n  `${new Intl.NumberFormat('es-ES', { maximumFractionDigits: 0 }).format(Math.round(value))} €`;\n\nconst parsePricePerM2 = (value: string) => {\n  const match = displayCell(value).match(/\\(([\\d,.]+)\\s*€\\/m²\\)/);\n  if (!match) return null;\n\n  return Number.parseFloat(match[1].replace(',', '.'));\n};\n\n// Keyword-matching anchored on FR slugs (page.slug values are shared across all\n// locales) plus a few Spanish copy keywords. Slug matching keeps the pricing\n// helpers stable regardless of the translated situation labels.\nconst getTreatmentRange = (page: RoofPageData, situation: string) => {\n  const text = `${page.slug} ${situation}`.toLowerCase();\n\n  if (\n    text.includes('covaseal') ||\n    text.includes('membrane-bitumineuse') ||\n    text.includes('toiture-plate') ||\n    text.includes('envejec') ||\n    text.includes('fuga')\n  ) {\n    return { min: 28, max: 38, label: 'CovaSeal 20 estimado' };\n  }\n\n  if (\n    text.includes('covametal') ||\n    text.includes('bac-acier') ||\n    text.includes('corrosión') ||\n    text.includes('corrosion') ||\n    text.includes('acero')\n  ) {\n    return { min: 24, max: 32, label: 'CovaMetal 20 estimado' };\n  }\n\n  if (text.includes('fibrociment') || text.includes('fibrocemento') || text.includes('placas')) {\n    return { min: 22, max: 28, label: 'CovaTherm soporte sensible' };\n  }\n\n  return { min: 20, max: 25, label: 'CovaTherm estimado' };\n};\n\nconst getFallbackPricePerM2 = (option: string, optionIndex: number, treatmentMidpoint: number) => {\n  const lower = option.toLowerCase();\n\n  if (optionIndex === 0) return treatmentMidpoint;\n  if (lower.includes('anticorrosión') || lower.includes('anticorrosion') || lower.includes('repintado')) return 16;\n  if (lower.includes('sustitución') || lower.includes('reemplazo') || lower.includes('cambio')) return 120;\n  if (lower.includes('membrana nueva') || lower.includes('membrana')) return 90;\n  if (lower.includes('aislamiento')) return 150;\n\n  return null;\n};\n\nconst benefitImages = [\n  '/images/toitures/benefit-confort.webp',\n  '/images/toitures/benefit-protection-toiture.webp',\n  '/images/toitures/benefit-clim.webp',\n  '/images/toitures/benefit-chantier-evite.webp',\n];\n\nconst feedbackRoofBenefitImages = [\n  '/images/toitures/feedback-batiment-tempere.png',\n  '/images/toitures/feedback-etancheite.png',\n  '/images/toitures/feedback-economie-clim-1.png',\n  '/images/toitures/feedback-economie-clim-3.png',\n];\n\nconst getBenefitImage = (page: RoofPageData, benefit: TextCard, index: number) => {\n  if (['membrane-bitumineuse', 'toiture-plate'].includes(page.slug)) {\n    return feedbackRoofBenefitImages[index] ?? feedbackRoofBenefitImages[0];\n  }\n\n  const text = `${benefit.title} ${benefit.text}`.toLowerCase();\n\n  if (page.slug === 'bac-acier' && (text.includes('acero') || text.includes('corrosión') || text.includes('óxido') || text.includes('oxidación'))) {\n    return '/images/toitures/support-bac-acier-cool.webp';\n  }\n\n  if (text.includes('factura') || text.includes('refrigeración') || text.includes('climatización') || text.includes('aire acondicionado') || text.includes('frío')) {\n    return '/images/toitures/benefit-clim.webp';\n  }\n\n  if (\n    text.includes('obra') ||\n    text.includes('reforma') ||\n    text.includes('rehabilitación') ||\n    text.includes('sustitución') ||\n    text.includes('retirada') ||\n    text.includes('desmontaje')\n  ) {\n    return '/images/toitures/benefit-chantier-evite.webp';\n  }\n\n  if (\n    text.includes('proteg') ||\n    text.includes('impermeab') ||\n    text.includes('estanqueidad') ||\n    text.includes('corrosión') ||\n    text.includes('vida útil') ||\n    text.includes('durab')\n  ) {\n    return '/images/toitures/benefit-protection-toiture.webp';\n  }\n\n  return benefitImages[index] ?? benefitImages[0];\n};\n\nconst supportVisuals: Record<string, { hot: string; cool: string; hotLabel: string; coolLabel: string }> = {\n  'membrane-bitumineuse': {\n    hot: '/images/toitures/support-bitume-chaud.webp',\n    cool: '/images/toitures/feedback-economie-clim-2.png',\n    hotLabel: 'Sin cool roof: membrana bituminosa que absorbe el calor',\n    coolLabel: 'Con cool roof: membrana reflectante',\n  },\n  'bac-acier': {\n    hot: '/images/toitures/support-bac-acier-chaud.webp',\n    cool: '/images/toitures/support-bac-acier-cool.webp',\n    hotLabel: 'Sin cool roof: metal sobrecalentado',\n    coolLabel: 'Con cool roof: chapa de acero reflectante y protegida',\n  },\n  'toiture-plate': {\n    hot: '/images/toitures/support-toiture-plate-chaud.webp',\n    cool: '/images/toitures/feedback-economie-clim-2.png',\n    hotLabel: 'Sin cool roof: cubierta plana que absorbe el calor',\n    coolLabel: 'Con cool roof: cubierta plana reflectante',\n  },\n  fibrociment: {\n    hot: '/images/toitures/support-fibrociment-chaud.webp',\n    cool: '/images/toitures/support-fibrociment-cool.webp',\n    hotLabel: 'Sin cool roof: fibrocemento que absorbe el calor',\n    coolLabel: 'Con cool roof: placas protegidas',\n  },\n  'tuiles-ciment': {\n    hot: '/images/toitures/support-tuiles-ciment-chaud.webp',\n    cool: '/images/toitures/support-tuiles-ciment-cool.webp',\n    hotLabel: 'Sin cool roof: tejas que acumulan calor',\n    coolLabel: 'Con cool roof: tejas reflectantes',\n  },\n};\n\nconst layerTitles = ['Imprimación de adherencia', 'Resina reflectante', 'Barniz de protección'];\n\nconst layerColors = [\n  {\n    pill: 'bg-terracotta text-white',\n    dot: 'bg-terracotta',\n    chevron: 'text-terracotta',\n  },\n  {\n    pill: 'bg-foreground text-white',\n    dot: 'bg-foreground',\n    chevron: 'text-foreground',\n  },\n  {\n    pill: 'bg-primary text-white',\n    dot: 'bg-primary',\n    chevron: 'text-primary',\n  },\n];\n\nconst layerPositions = [\n  { top: '56.7%', left: '36.5%' },\n  { top: '48.2%', left: '36.5%' },\n  { top: '36.3%', left: '35.6%' },\n];\n\nconst getProblemTitle = (title: string) => {\n  const map: Record<string, { strong: string; muted: string }> = {\n    'Una cubierta bituminosa negra es un radiador colocado sobre su edificio.': {\n      strong: 'Su cubierta se calienta.',\n      muted: 'Su edificio lo sufre.',\n    },\n    'La chapa de acero se calienta rápido, se oxida rápido y se desgasta rápido.': {\n      strong: 'El metal se calienta rápido.',\n      muted: 'La cubierta también se desgasta.',\n    },\n    'En plano, su cubierta recibe el sol todo el día.': {\n      strong: 'Su cubierta lo recibe todo.',\n      muted: 'Calor, UV, estanqueidad.',\n    },\n    'El fibrocemento se calienta, envejece y es caro de retirar.': {\n      strong: 'El fibrocemento se calienta.',\n      muted: 'Retirarlo cuesta caro.',\n    },\n    'Tejas de cemento oscuras, desvanes sobrecalentados.': {\n      strong: 'Las tejas acumulan calor.',\n      muted: 'Los desvanes lo sufren.',\n    },\n  };\n\n  return map[title] ?? { strong: title, muted: '' };\n};\n\nconst getLayerDescription = (index: number) => {\n  if (index === 0) {\n    return 'Se adapta al soporte existente. Cada cubierta tiene su química, y cada química requiere una preparación y una adherencia adaptadas.';\n  }\n\n  if (index === 1) {\n    return 'Es el corazón del sistema. La superficie refleja la radiación solar en lugar de absorberla, de modo que entra menos calor en el edificio.';\n  }\n\n  return 'Un barniz de acabado protege la resina de los UV, la contaminación y el envejecimiento prematuro para conservar el rendimiento en el tiempo.';\n};\n\nconst getLayerExpert = (index: number) => {\n  const notes = [\n    'Una imprimación inadecuada es un sistema que se ampolla y se despega. El soporte lo decide todo.',\n    'El cool roof trata la causa: la cubierta se calienta menos, así que el edificio recibe menos calor.',\n    'La diferencia entre una pintura y una inversión es cómo aguanta en el tiempo. El acabado está para proteger el rendimiento.',\n  ];\n\n  return notes[index] ?? notes[0];\n};\n\nconst Label = ({ children, light = false }: { children: string; light?: boolean }) => (\n  <div className=\"mb-5 flex items-center gap-3\">\n    <span className={`h-px w-9 ${light ? 'bg-teal-vivid/70' : 'bg-primary/65'}`} aria-hidden=\"true\" />\n    <span\n      className={`font-body text-[11px] font-bold uppercase tracking-[0.22em] ${\n        light ? 'text-teal-vivid' : 'text-primary'\n      }`}\n    >\n      {children}\n    </span>\n  </div>\n);\n\nconst PrimaryCTA = ({ label, href }: { label: string; href: string }) => (\n  <a\n    href={href}\n    className=\"group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white\"\n  >\n    <span className=\"text-sm\">{label}</span>\n    <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5\">\n      <ArrowRight className=\"h-3.5 w-3.5\" />\n    </span>\n  </a>\n);\n\nconst RoofHero = ({ page }: { page: RoofPageData }) => {\n  const [form, setForm] = useState({ climate: '', surface: '', email: '' });\n  const [submitted, setSubmitted] = useState(false);\n  const surfaceNum = parseFloat(form.surface) || 0;\n  const estimate = surfaceNum ? `${new Intl.NumberFormat('es-ES').format(surfaceNum * 22.5)} €` : '20-25 €/m²';\n\n  return (\n    <section\n      aria-labelledby={`${page.slug}-hero-title`}\n      className=\"relative isolate flex min-h-[100svh] flex-col overflow-hidden bg-navy text-cream\"\n    >\n      <img\n        src={page.heroImage}\n        alt={page.heroImageAlt}\n        className=\"absolute inset-0 -z-10 size-full scale-[1.02] object-cover\"\n        style={page.slug === 'membrane-bitumineuse' ? { objectPosition: 'center 28%' } : undefined}\n        loading=\"eager\"\n        decoding=\"async\"\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute inset-0 -z-10 hidden bg-gradient-to-r from-navy/[0.94] via-navy/62 to-navy/25 lg:block\"\n      />\n      <div\n        aria-hidden=\"true\"\n        className={`absolute inset-0 -z-10 bg-gradient-to-b lg:hidden ${\n          page.slug === 'membrane-bitumineuse'\n            ? 'from-navy/92 via-navy/58 to-navy/96'\n            : 'from-navy/84 via-navy/38 to-navy/96'\n        }`}\n      />\n      <div aria-hidden=\"true\" className=\"absolute inset-x-0 bottom-0 -z-10 h-[28%] bg-gradient-to-t from-navy via-navy/85 to-transparent\" />\n\n      <div className=\"container relative z-10 mx-auto flex flex-1 items-center px-6 pb-10 pt-24 lg:px-12 lg:pb-16 lg:pt-28\">\n        <div className=\"grid w-full grid-cols-1 items-center gap-10 lg:grid-cols-[55fr_45fr] lg:gap-12\">\n          <div className=\"max-w-2xl space-y-6 lg:space-y-8\">\n            <ScrollReveal>\n              <nav className=\"flex items-center gap-2 font-body text-xs text-cream/50\">\n                <a href=\"/es\" className=\"transition-colors hover:text-cream/75\">Inicio</a>\n                <span className=\"text-cream/28\">/</span>\n                <span>Cubiertas</span>\n                <span className=\"text-cream/28\">/</span>\n                <span className=\"text-cream/78\">{page.breadcrumb}</span>\n              </nav>\n            </ScrollReveal>\n\n            <ScrollReveal>\n              <h1\n                id={`${page.slug}-hero-title`}\n                className=\"font-satoshi font-bold leading-[1.02] text-white\"\n                style={{ fontSize: 'clamp(2.25rem, 4.6vw, 4rem)', letterSpacing: '-0.03em' }}\n              >\n                {page.h1}\n              </h1>\n            </ScrollReveal>\n\n            <ScrollReveal>\n              <p\n                className=\"max-w-xl font-satoshi font-medium leading-[1.3] text-cream/66\"\n                style={{ fontSize: 'clamp(1rem, 1.5vw, 1.375rem)', letterSpacing: '-0.005em' }}\n              >\n                {page.lead}\n              </p>\n            </ScrollReveal>\n\n            <ScrollReveal>\n              <ul className=\"hidden gap-4 pt-1 sm:flex sm:flex-wrap lg:gap-6\" aria-label=\"Beneficios clave\">\n                {page.heroStats.map((stat, index) => {\n                  const Icon = [Thermometer, ShieldCheck, TrendingDown][index] ?? BadgeCheck;\n                  return (\n                    <li\n                      key={stat.label}\n                      className={`flex items-start gap-3 ${index !== 0 ? 'sm:border-l sm:border-white/10 sm:pl-6' : ''}`}\n                    >\n                      <Icon className=\"mt-0.5 h-[18px] w-[18px] shrink-0 text-teal-vivid\" strokeWidth={1.5} />\n                      <div className=\"leading-tight\">\n                        <p className=\"font-satoshi text-[15px] font-bold text-white lg:text-base\">{stat.value}</p>\n                        <p className=\"mt-1 font-body text-[12.5px] text-cream/55 lg:text-[13px]\">{stat.label}</p>\n                      </div>\n                    </li>\n                  );\n                })}\n              </ul>\n            </ScrollReveal>\n          </div>\n\n          <ScrollReveal>\n            <div className=\"rounded-[1.5rem] border border-white/[0.08] bg-white/[0.04] p-1.5 backdrop-blur-sm\">\n              <div className=\"rounded-[calc(1.5rem-6px)] border border-white/[0.06] bg-[#0b1a2b]/80 p-4 shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)] backdrop-blur-xl lg:p-7\">\n                {!submitted ? (\n                  <>\n                    <h2 className=\"mb-1 text-center font-satoshi text-xl font-bold text-white lg:text-2xl\">\n                      Estime el ahorro posible\n                    </h2>\n                    <p className=\"mb-4 text-center font-body text-[12px] text-white/50\">\n                      Respuesta personalizada en 24 h\n                    </p>\n                    <form\n                      onSubmit={(event) => {\n                        event.preventDefault();\n                        setSubmitted(true);\n                      }}\n                      className=\"space-y-2.5 lg:space-y-3\"\n                    >\n                      <input\n                        value={page.breadcrumb}\n                        readOnly\n                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white outline-none\"\n                      />\n                      <select\n                        required\n                        value={form.climate}\n                        onChange={(e) => setForm({ ...form, climate: e.target.value })}\n                        className=\"w-full appearance-none rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n                      >\n                        <option value=\"\" disabled className=\"bg-card text-foreground\">¿Edificio climatizado?</option>\n                        {['Sí', 'No', 'Parcialmente', 'Por confirmar'].map((option) => (\n                          <option key={option} value={option} className=\"bg-card text-foreground\">{option}</option>\n                        ))}\n                      </select>\n                      <input\n                        type=\"number\"\n                        placeholder=\"Superficie de cubierta (m²)\"\n                        required\n                        min=\"1\"\n                        value={form.surface}\n                        onChange={(e) => setForm({ ...form, surface: e.target.value })}\n                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n                      />\n                      <input\n                        type=\"email\"\n                        placeholder=\"Correo profesional\"\n                        required\n                        value={form.email}\n                        onChange={(e) => setForm({ ...form, email: e.target.value })}\n                        className=\"w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50\"\n                      />\n\n                      <button\n                        type=\"submit\"\n                        className=\"group mt-1 flex w-full items-center justify-center gap-3 rounded-full cta-gradient py-3 font-semibold text-white active:scale-[0.98]\"\n                      >\n                        <span className=\"text-[15px]\">Ver mi potencial</span>\n                        <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5\">\n                          <ArrowRight className=\"h-4 w-4\" />\n                        </span>\n                      </button>\n                    </form>\n\n                    <p className=\"mt-3 text-center font-body text-[11px] text-white/35\">\n                      Sin compromiso · Estudio adaptado al soporte\n                    </p>\n                  </>\n                ) : (\n                  <div className=\"py-4 text-center\">\n                    <div className=\"mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/20\">\n                      <ShieldCheck className=\"h-6 w-6 text-primary\" />\n                    </div>\n                    <p className=\"mb-1 font-body text-sm text-white/60\">Base indicativa para {new Intl.NumberFormat('es-ES').format(surfaceNum)} m²</p>\n                    <p className=\"mb-4 font-satoshi text-2xl font-bold text-white\">{estimate}</p>\n                    <p className=\"mb-4 font-body text-[13px] text-white/50\">\n                      Un asesor ajusta el presupuesto según el estado real de la cubierta.\n                    </p>\n                    <button onClick={() => setSubmitted(false)} className=\"font-body text-sm font-semibold text-primary hover:underline\">\n                      Modificar mi solicitud\n                    </button>\n                  </div>\n                )}\n              </div>\n            </div>\n          </ScrollReveal>\n        </div>\n      </div>\n\n      <div className=\"relative z-10 hidden border-t border-white/10 bg-navy/78 backdrop-blur-md lg:block\">\n        <div className=\"container mx-auto flex items-center gap-8 px-12 py-5\">\n          <p className=\"shrink-0 font-body text-[10px] font-semibold uppercase tracking-[0.24em] text-cream/45\">\n            Confían en nosotros\n          </p>\n          <div className=\"flex flex-1 items-center justify-between gap-8\">\n            {logos.map((logo) => (\n              <span key={logo.name} className=\"flex h-8 w-28 items-center justify-center\">\n                <img\n                  src={logo.url}\n                  alt={logo.name}\n                  className=\"max-h-7 max-w-full object-contain opacity-65 brightness-0 invert transition-opacity duration-300 hover:opacity-95\"\n                  loading=\"eager\"\n                  decoding=\"async\"\n                />\n              </span>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst ProblemSection = ({ page }: { page: RoofPageData }) => {\n  const title = getProblemTitle(page.problem.title);\n  const visual = supportVisuals[page.slug] ?? supportVisuals['membrane-bitumineuse'];\n\n  return (\n    <section className=\"relative overflow-hidden bg-cream py-16 lg:py-36\">\n      <div className=\"container relative mx-auto px-4 lg:px-8\">\n        <ScrollReveal>\n          <div className=\"mx-auto mb-14 max-w-3xl text-center lg:mb-20\">\n            <h2\n              className=\"font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n              style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n            >\n              {title.strong}\n              {title.muted && <span className=\"text-foreground/30\"> {title.muted}</span>}\n            </h2>\n          </div>\n        </ScrollReveal>\n\n        <div className=\"grid grid-cols-1 items-center gap-12 lg:grid-cols-12 lg:gap-16\">\n          <div className=\"order-2 lg:order-1 lg:col-span-5\">\n            <ScrollReveal>\n              <div className=\"relative\">\n                <div className=\"pointer-events-none absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_hsl(var(--terracotta)/0.18)_0%,_transparent_65%)] blur-2xl\" />\n                <div className=\"relative aspect-square overflow-hidden rounded-[2rem] bg-white shadow-[0_30px_80px_-15px_hsl(var(--terracotta-dark)/0.25),_0_10px_30px_-5px_hsl(var(--terracotta)/0.12)]\">\n                  <img\n                    src={visual.hot}\n                    alt=\"\"\n                    className=\"h-full w-full object-contain p-4\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                </div>\n              </div>\n              <p className=\"mt-4 text-center font-body text-[11px] uppercase tracking-wide text-terracotta/60\">\n                {visual.hotLabel}\n              </p>\n            </ScrollReveal>\n          </div>\n\n          <div className=\"order-1 lg:order-2 lg:col-span-7 lg:pl-12\">\n            <ScrollReveal stagger>\n              <div\n                className=\"space-y-8 border-l-2 pl-8 lg:space-y-10 lg:pl-10\"\n                style={{ borderImage: 'linear-gradient(to bottom, hsl(var(--terracotta)), hsl(var(--terracotta-dark))) 1' }}\n              >\n                {page.problem.cards.map((card, index) => {\n                  const Icon = problemIcons[index] ?? HelpCircle;\n                  return (\n                    <div key={card.title}>\n                      <div className=\"mb-2 flex items-center gap-3\">\n                        <Icon className=\"h-5 w-5 text-terracotta\" strokeWidth={1.8} />\n                        <h3\n                          className=\"font-satoshi text-xl font-bold text-foreground lg:text-2xl\"\n                          style={{ letterSpacing: '-0.02em', lineHeight: 1.2 }}\n                        >\n                          {card.title}\n                        </h3>\n                      </div>\n                      <p className=\"font-body text-base leading-relaxed text-foreground/55\">{card.text}</p>\n                    </div>\n                  );\n                })}\n              </div>\n            </ScrollReveal>\n          </div>\n        </div>\n\n        <div className=\"mt-20 grid grid-cols-1 items-center gap-12 lg:mt-28 lg:grid-cols-12 lg:gap-16\">\n          <div className=\"order-2 lg:order-2 lg:col-span-5\">\n            <ScrollReveal>\n              <div className=\"relative\">\n                <div className=\"pointer-events-none absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_rgba(32,150,140,0.18)_0%,_transparent_65%)] blur-2xl\" />\n                <div className=\"relative aspect-square overflow-hidden rounded-[2rem] bg-white shadow-[0_30px_80px_-15px_rgba(20,120,110,0.20),_0_10px_30px_-5px_rgba(32,150,140,0.10)]\">\n                  <img\n                    src={visual.cool}\n                    alt=\"\"\n                    className=\"h-full w-full object-contain p-4\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                </div>\n              </div>\n              <p className=\"mt-4 text-center font-body text-[11px] uppercase tracking-wide text-primary/60\">\n                {visual.coolLabel}\n              </p>\n            </ScrollReveal>\n          </div>\n\n          <div className=\"order-1 lg:order-1 lg:col-span-7 lg:pr-12\">\n            <ScrollReveal>\n              <h3\n                className=\"mb-8 max-w-xl font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n              >\n                El cool roof: una respuesta concreta\n                <span className=\"text-foreground/30\"> al problema del calor.</span>\n              </h3>\n              <p className=\"mb-8 max-w-lg font-body text-base leading-relaxed text-foreground/50\">\n                Una superficie clara devuelve la radiación solar antes de que penetre en el edificio. La cubierta se calienta menos, las últimas plantas respiran y el soporte sufre menos UV y choques térmicos.\n              </p>\n              <PrimaryCTA label=\"Solicitar presupuesto\" href={CTA_HREF} />\n            </ScrollReveal>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst SolutionSection = ({ page }: { page: RoofPageData }) => {\n  const [active, setActive] = useState(0);\n\n  return (\n    <section className=\"relative bg-white\">\n      <div className=\"container mx-auto px-4 lg:px-8\">\n        <ScrollReveal>\n          <div className=\"flex flex-col gap-8 pb-10 pt-16 lg:flex-row lg:items-end lg:gap-16 lg:pb-16 lg:pt-32\">\n            <div className=\"lg:w-2/3\">\n              <p className=\"mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-muted-foreground\">\n                {page.solution.badge}\n              </p>\n              <h2\n                className=\"font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n              >\n                <span className=\"text-foreground/30\">Un sistema diseñado para </span>\n                reflejar, proteger y durar.\n              </h2>\n            </div>\n            <div className=\"lg:w-1/3 lg:pb-1\">\n              <p className=\"font-body text-base leading-relaxed text-foreground/52 lg:text-right lg:text-lg\">\n                Una imprimación, una resina y un barniz que garantizan el rendimiento de su cubierta en el tiempo.\n              </p>\n              <div className=\"mt-5 flex lg:justify-end\">\n                <PrimaryCTA label=\"Solicitar presupuesto\" href={CTA_HREF} />\n              </div>\n            </div>\n          </div>\n        </ScrollReveal>\n\n        <div className=\"flex flex-col gap-12 pb-24 lg:flex-row lg:gap-16 lg:pb-32\">\n          <div className=\"overflow-hidden rounded-2xl shadow-[0_20px_60px_-15px_rgba(0,0,0,0.08)] lg:hidden\">\n            <img src={coolRoofLayers} alt=\"Sección del sistema cool roof de Covalba\" className=\"w-full\" loading=\"lazy\" />\n          </div>\n\n          <div className=\"lg:w-1/2 lg:sticky lg:top-[20vh] lg:self-start\">\n            {layerTitles.map((item, index) => {\n              const isOpen = active === index;\n              const colors = layerColors[index] ?? layerColors[0];\n              return (\n                <div key={item} className=\"border-b border-border last:border-b-0\">\n                  <button\n                    onClick={() => setActive(index)}\n                    className=\"group flex w-full items-center gap-4 py-6 text-left\"\n                  >\n                    <span\n                      className={`inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-body text-[11px] font-bold transition-all duration-300 ${\n                        isOpen ? colors.pill : 'bg-muted text-muted-foreground'\n                      }`}\n                    >\n                      0{index + 1}\n                    </span>\n                    <h3\n                      className={`flex-1 font-satoshi text-xl font-bold transition-colors duration-300 lg:text-2xl ${\n                        isOpen ? 'text-foreground' : 'text-foreground/50 group-hover:text-foreground/80'\n                      }`}\n                    >\n                      {item}\n                    </h3>\n                    <ChevronDown\n                      className={`h-5 w-5 shrink-0 transition-all duration-300 ${\n                        isOpen ? `${colors.chevron} rotate-180` : 'text-foreground/25'\n                      }`}\n                      strokeWidth={2}\n                    />\n                  </button>\n\n                  <div\n                    className={`grid transition-all duration-500 ${\n                      isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'\n                    }`}\n                  >\n                    <div className=\"overflow-hidden\">\n                      <div className=\"pb-8 pl-6 lg:pl-12\">\n                        <p className=\"mb-6 font-body text-base leading-relaxed text-foreground/65 lg:text-lg\">\n                          {getLayerDescription(index)}\n                        </p>\n                        <div className=\"flex items-start gap-3 rounded-xl bg-foreground/[0.03] p-4\">\n                          <img\n                            src=\"/maxime-bourassin.jpg\"\n                            alt=\"Maxime Bourassin, fundador de Covalba\"\n                            className=\"mt-0.5 h-9 w-9 shrink-0 rounded-full object-cover\"\n                          />\n                          <div>\n                            <p className=\"font-body text-[15px] italic leading-relaxed text-foreground/65 lg:text-base\">\n                              \"{getLayerExpert(index)}\"\n                            </p>\n                            <p className=\"mt-2 font-body text-xs font-semibold text-foreground/50\">\n                              Maxime Bourassin, fundador\n                            </p>\n                          </div>\n                        </div>\n                        {index === 0 && page.solution.note && (\n                          <p className=\"mt-4 rounded-xl bg-primary/5 p-4 font-body text-sm leading-relaxed text-foreground/62\">\n                            {page.solution.note}\n                          </p>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n\n          <div className=\"hidden lg:block lg:w-1/2\">\n            <div className=\"relative overflow-hidden rounded-2xl shadow-[0_30px_80px_-15px_rgba(0,0,0,0.08)]\">\n              <img src={coolRoofLayers} alt=\"Sección del sistema cool roof de Covalba\" className=\"w-full\" loading=\"lazy\" />\n              {layerTitles.map((item, index) => {\n                const pos = layerPositions[index];\n                const colors = layerColors[index] ?? layerColors[0];\n                const isActive = active === index;\n                if (!pos) return null;\n\n                return (\n                  <div key={item} className=\"absolute\" style={{ top: pos.top, left: pos.left }}>\n                    <div\n                      className={`absolute -translate-x-1/2 -translate-y-1/2 transition-all duration-500 ${\n                        isActive ? 'scale-125' : 'scale-75 opacity-40'\n                      }`}\n                    >\n                      <div\n                        className={`h-3.5 w-3.5 rounded-full ${\n                          isActive ? colors.dot : 'bg-foreground/20'\n                        } shadow-lg ring-2 ring-white transition-colors duration-500`}\n                      />\n                      {isActive && (\n                        <div className={`absolute inset-0 h-3.5 w-3.5 animate-ping rounded-full ${colors.dot} opacity-30`} />\n                      )}\n                    </div>\n                    <div\n                      className={`pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 transition-all duration-500 ${\n                        isActive ? 'translate-x-0 opacity-100' : 'translate-x-2 opacity-0'\n                      }`}\n                    >\n                      <span className={`whitespace-nowrap rounded-full px-4 py-1.5 font-body text-[13px] font-bold shadow-lg ${colors.pill}`}>\n                        {item}\n                      </span>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst BenefitsSection = ({ page }: { page: RoofPageData }) => (\n  <section className=\"bg-white py-20 lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mb-10 grid gap-8 lg:grid-cols-[0.82fr_1.18fr] lg:items-end lg:gap-14\">\n          <div>\n            <Label>{page.benefits.badge}</Label>\n            <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl\">\n              {page.benefits.title}\n            </h2>\n          </div>\n          <p className=\"max-w-xl border-l border-primary/30 pl-6 font-body text-base leading-relaxed text-foreground/62 lg:text-lg\">\n            {page.benefits.featured}\n          </p>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal stagger>\n        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          {page.benefits.cards.map((benefit, index) => {\n            const Icon = cardIcons[index] ?? Sparkles;\n            return (\n              <article\n                key={benefit.title}\n                className=\"group overflow-hidden rounded-2xl bg-cream ring-1 ring-foreground/[0.05] transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_24px_70px_-48px_hsl(var(--navy)/0.45)]\"\n              >\n                <div className=\"relative aspect-[4/3] overflow-hidden bg-foreground/[0.04]\">\n                  <img\n                    src={getBenefitImage(page, benefit, index)}\n                    alt=\"\"\n                    className=\"h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.035]\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                  <div className=\"absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-cream to-transparent\" />\n                </div>\n                <div className=\"p-5 lg:p-6\">\n                  <div className=\"mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-white text-primary shadow-[0_12px_30px_-24px_hsl(var(--navy)/0.35)]\">\n                    <Icon className=\"h-5 w-5\" strokeWidth={1.7} />\n                  </div>\n                  <h3 className=\"font-satoshi text-lg font-bold leading-tight text-foreground\">{benefit.title}</h3>\n                  <p className=\"mt-2 font-body text-sm leading-relaxed text-foreground/62\">{benefit.text}</p>\n                </div>\n              </article>\n            );\n          })}\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst RoiOptionCards = ({\n  page,\n  surface,\n  treatmentRange,\n}: {\n  page: RoofPageData;\n  surface: number;\n  treatmentRange: ReturnType<typeof getTreatmentRange>;\n}) => {\n  if (!page.roi.comparison) {\n    return page.roi.afterComparison ? (\n      <article className=\"rounded-2xl bg-white p-6 ring-1 ring-foreground/[0.06] lg:p-8\">\n        <p className=\"font-body text-base leading-relaxed text-foreground/66 lg:text-lg\">\n          {page.roi.afterComparison}\n        </p>\n      </article>\n    ) : null;\n  }\n\n  const options = page.roi.comparison.headers.slice(1);\n  const rows = page.roi.comparison.rows;\n  const investment = rows.find((row) => {\n    const key = row[0].toLowerCase();\n    return key.includes('inversión') || key.includes('inversion');\n  });\n  const duration = rows.find((row) => {\n    const key = row[0].toLowerCase();\n    return key.includes('durac') || key.includes('vida útil') || key.includes('vida');\n  });\n  const activity = rows.find((row) => {\n    const key = row[0].toLowerCase();\n    return key.includes('activ') || key.includes('operac');\n  });\n  const treatmentMidpoint = (treatmentRange.min + treatmentRange.max) / 2;\n\n  return (\n    <div className=\"grid gap-4 lg:grid-cols-3\">\n      {options.map((option, optionIndex) => {\n        const isCovalba = optionIndex === 0;\n        const rawInvestment = investment?.[optionIndex + 1] ?? '';\n        const parsedPrice = parsePricePerM2(rawInvestment);\n        const pricePerM2 = parsedPrice ?? getFallbackPricePerM2(option, optionIndex, treatmentMidpoint);\n        const dynamicInvestment = pricePerM2 ? `~${formatCurrency(surface * pricePerM2)}` : displayCell(rawInvestment);\n\n        return (\n          <article\n            key={option}\n            className={`rounded-2xl p-6 ring-1 ${\n              isCovalba\n                ? 'bg-[#142333] text-white ring-transparent'\n                : 'bg-white text-foreground ring-foreground/[0.06]'\n            }`}\n          >\n            <div className=\"mb-6 flex items-start justify-between gap-4\">\n              <h3 className=\"font-satoshi text-xl font-black leading-tight\">{option}</h3>\n              {isCovalba && (\n                <span className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-teal-vivid/15 text-teal-vivid\">\n                  <Check className=\"h-4 w-4\" strokeWidth={2.4} />\n                </span>\n              )}\n            </div>\n            <p className={`font-satoshi text-3xl font-black leading-none ${isCovalba ? 'text-teal-vivid' : 'text-terracotta'}`}>\n              {dynamicInvestment}\n            </p>\n            {pricePerM2 && (\n              <p className={`mt-2 font-body text-xs font-semibold ${isCovalba ? 'text-white/45' : 'text-foreground/40'}`}>\n                base {new Intl.NumberFormat('es-ES').format(surface)} m² · {pricePerM2.toLocaleString('es-ES')} €/m²\n              </p>\n            )}\n            <dl className=\"mt-6 space-y-3 border-t border-current/10 pt-5\">\n              {[duration, activity].filter(Boolean).map((row) => (\n                <div key={row![0]} className=\"grid grid-cols-[0.75fr_1fr] gap-4\">\n                  <dt className={`font-body text-xs font-bold uppercase tracking-[0.14em] ${isCovalba ? 'text-white/38' : 'text-foreground/35'}`}>\n                    {displayCell(row![0])}\n                  </dt>\n                  <dd className={`font-body text-sm leading-relaxed ${isCovalba ? 'text-white/74' : 'text-foreground/62'}`}>\n                    {displayCell(row![optionIndex + 1])}\n                  </dd>\n                </div>\n              ))}\n            </dl>\n          </article>\n        );\n      })}\n    </div>\n  );\n};\n\nconst ROICalculator = ({\n  page,\n  surface,\n  selectedSituation,\n  treatmentRange,\n  onSurfaceChange,\n  onSituationChange,\n}: {\n  page: RoofPageData;\n  surface: number;\n  selectedSituation: string;\n  treatmentRange: ReturnType<typeof getTreatmentRange>;\n  onSurfaceChange: (surface: number) => void;\n  onSituationChange: (situation: string) => void;\n}) => {\n  const treatmentLow = surface * treatmentRange.min;\n  const treatmentHigh = surface * treatmentRange.max;\n  const referencePrice = selectedSituation.toLowerCase().includes('aislamiento') ? 150 : 90;\n  const referenceCost = surface * referencePrice;\n  const potentialGap = Math.max(referenceCost - treatmentHigh, 0);\n\n  return (\n    <div className=\"mb-10 rounded-[2rem] bg-[#142333] p-5 text-white shadow-[0_34px_90px_-64px_hsl(var(--navy)/0.65)] lg:p-8\">\n      <div className=\"grid gap-7 lg:grid-cols-[0.88fr_1.12fr] lg:items-end\">\n        <div>\n          <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-teal-vivid/70\">\n            Calculadora indicativa\n          </p>\n          <h3 className=\"mt-4 max-w-lg font-satoshi text-2xl font-black leading-tight lg:text-3xl\">\n            Ajuste la superficie y el estado de la cubierta.\n          </h3>\n          <p className=\"mt-3 max-w-lg font-body text-sm leading-relaxed text-white/52\">\n            Por defecto: 5.000 m², superficie típica de una nave o edificio industrial a tratar.\n          </p>\n        </div>\n\n        <div className=\"grid gap-3 sm:grid-cols-[0.72fr_1.28fr]\">\n          <label className=\"block\">\n            <span className=\"mb-2 block font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/40\">\n              Superficie\n            </span>\n            <input\n              type=\"number\"\n              min={100}\n              step={100}\n              value={surface}\n              onChange={(event) => onSurfaceChange(Math.max(100, Number(event.target.value) || 100))}\n              className=\"h-12 w-full rounded-xl border border-white/10 bg-white/[0.07] px-4 font-body text-sm font-semibold text-white outline-none transition focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20\"\n              aria-label=\"Superficie a tratar en metros cuadrados\"\n            />\n          </label>\n          <label className=\"block\">\n            <span className=\"mb-2 block font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/40\">\n              Situación\n            </span>\n            <select\n              value={selectedSituation}\n              onChange={(event) => onSituationChange(event.target.value)}\n              className=\"h-12 w-full rounded-xl border border-white/10 bg-white/[0.07] px-4 font-body text-sm font-semibold text-white outline-none transition focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20\"\n              aria-label=\"Situación de la cubierta\"\n            >\n              {page.roi.situation.rows.map((row) => (\n                <option key={row[0]} value={row[0]} className=\"bg-card text-foreground\">\n                  {row[0]}\n                </option>\n              ))}\n            </select>\n          </label>\n        </div>\n      </div>\n\n      <div className=\"mt-7 grid gap-3 md:grid-cols-3\">\n        {[\n          {\n            label: treatmentRange.label,\n            value: `${formatCurrency(treatmentLow)} - ${formatCurrency(treatmentHigh)}`,\n            detail: `${treatmentRange.min}-${treatmentRange.max} €/m² según preparación`,\n            valueClass: 'text-teal-vivid',\n          },\n          {\n            label: 'Rehabilitación de referencia',\n            value: `~${formatCurrency(referenceCost)}`,\n            detail: `${referencePrice} €/m², orden de magnitud a comparar`,\n            valueClass: 'text-terracotta',\n          },\n          {\n            label: 'Diferencia potencial',\n            value: `hasta ${formatCurrency(potentialGap)}`,\n            detail: 'Inversión pesada evitada o aplazada si el soporte es viable',\n            valueClass: 'text-teal-vivid',\n          },\n        ].map((item) => (\n          <article key={item.label} className=\"rounded-2xl bg-white/[0.07] p-5 ring-1 ring-white/10\">\n            <p className=\"font-body text-[11px] font-bold uppercase tracking-[0.16em] text-white/38\">{item.label}</p>\n            <p className={`mt-3 font-satoshi text-2xl font-black leading-tight ${item.valueClass}`}>{item.value}</p>\n            <p className=\"mt-2 font-body text-xs leading-relaxed text-white/45\">{item.detail}</p>\n          </article>\n        ))}\n      </div>\n      <p className=\"mt-4 font-body text-xs leading-relaxed text-white/38\">\n        Presupuesto indicativo: el estudio ajusta el precio según el acceso, la preparación, los puntos singulares y el estado real del soporte.\n      </p>\n    </div>\n  );\n};\n\nconst getSituationImage = (recommendation: string) => {\n  const lower = recommendation.toLowerCase();\n  if (lower.includes('covametal')) return covaMetalProduct;\n  if (lower.includes('covaseal')) return covaSealProduct;\n  if (lower.includes('cova')) return covaTherm20Product;\n  return covaTherm8Product;\n};\n\nconst SituationCards = ({ rows }: { rows: string[][] }) => (\n  <div className=\"grid gap-4 md:grid-cols-2\">\n    {rows.map((row) => (\n      <article key={row[0]} className=\"grid gap-4 rounded-2xl bg-white p-4 ring-1 ring-foreground/[0.06] sm:grid-cols-[128px_1fr] lg:grid-cols-[190px_1fr] lg:gap-5 lg:p-5\">\n        <div className=\"flex aspect-[4/3] items-center justify-center rounded-xl bg-gradient-to-br from-cream to-white p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.75),_0_18px_44px_-34px_hsl(var(--navy)/0.45)] ring-1 ring-foreground/[0.04] sm:aspect-square lg:p-6\">\n          <img src={getSituationImage(row[1])} alt=\"\" className=\"max-h-full max-w-full object-contain\" loading=\"lazy\" decoding=\"async\" />\n        </div>\n        <div className=\"self-center\">\n          <p className=\"font-satoshi text-lg font-bold leading-tight text-foreground\">{row[0]}</p>\n          <p className=\"mt-2 font-body text-sm font-bold text-primary\">{row[1]}</p>\n          <p className=\"mt-2 font-body text-sm leading-relaxed text-foreground/58\">{row[2]}</p>\n        </div>\n      </article>\n    ))}\n  </div>\n);\n\nconst ROISection = ({ page }: { page: RoofPageData }) => {\n  const [surface, setSurface] = useState(5000);\n  const [selectedSituation, setSelectedSituation] = useState(page.roi.situation.rows[0]?.[0] ?? '');\n  const treatmentRange = getTreatmentRange(page, selectedSituation);\n\n  return (\n    <section className=\"bg-cream py-20 lg:py-32\">\n      <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mx-auto mb-12 max-w-3xl text-center lg:mb-16\">\n          <div className=\"flex justify-center\">\n            <Label>{page.roi.badge}</Label>\n          </div>\n          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-[3rem]\">\n            {page.roi.title}\n          </h2>\n          <p className=\"mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-foreground/58 lg:text-lg\">\n            {page.roi.intro}\n          </p>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mb-12 grid gap-4 md:grid-cols-3\">\n          {[\n            ['20-25 €/m²', 'para tratar y refrescar'],\n            ['8-10 años', 'de rehabilitación aplazada'],\n            ['0 paradas', 'de actividad durante la obra'],\n          ].map(([value, label]) => (\n            <article key={value} className=\"rounded-2xl bg-white p-6 text-center ring-1 ring-foreground/[0.06]\">\n              <p className=\"font-satoshi text-4xl font-black leading-none text-primary\">{value}</p>\n              <p className=\"mt-3 font-body text-sm font-semibold text-foreground/52\">{label}</p>\n            </article>\n          ))}\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mb-8 max-w-2xl\">\n          <div>\n            <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55\">\n              Comparar las opciones\n            </p>\n            <h3 className=\"mt-4 font-satoshi text-2xl font-black leading-tight text-foreground lg:text-3xl\">\n              Una lectura rápida del presupuesto.\n            </h3>\n          </div>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <ROICalculator\n          page={page}\n          surface={surface}\n          selectedSituation={selectedSituation}\n          treatmentRange={treatmentRange}\n          onSurfaceChange={setSurface}\n          onSituationChange={setSelectedSituation}\n        />\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <RoiOptionCards page={page} surface={surface} treatmentRange={treatmentRange} />\n        {page.roi.comparison && page.roi.afterComparison && (\n          <p className=\"mt-5 max-w-3xl font-body text-sm leading-relaxed text-foreground/52 lg:text-base\">\n            {page.roi.afterComparison}\n          </p>\n        )}\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mt-16 rounded-[2rem] bg-white p-5 ring-1 ring-foreground/[0.06] lg:mt-20 lg:p-8\">\n          <div className=\"mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between\">\n            <div>\n              <p className=\"font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55\">\n                Decidir según el estado real\n              </p>\n              <h3 className=\"mt-4 max-w-xl font-satoshi text-2xl font-black leading-tight text-foreground lg:text-3xl\">\n                ¿Qué solución para su cubierta?\n              </h3>\n            </div>\n            <PrimaryCTA label={page.roi.cta} href={CTA_HREF} />\n          </div>\n          <SituationCards rows={page.roi.situation.rows} />\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n  );\n};\n\nconst DiagnosticCTA = ({ title, text }: { title: string; text: string }) => (\n  <section className=\"relative overflow-hidden bg-[#182A3A] py-14 text-white lg:py-20\">\n    <div\n      aria-hidden=\"true\"\n      className=\"absolute inset-0 opacity-35\"\n      style={{\n        backgroundImage:\n          'radial-gradient(circle at 16% 20%, rgba(83, 207, 166, 0.22), transparent 28%), linear-gradient(115deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 120px)',\n      }}\n    />\n    <div className=\"container relative mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mx-auto grid max-w-5xl gap-7 lg:grid-cols-[1fr_auto] lg:items-center\">\n          <div>\n            <h2 className=\"font-satoshi text-2xl font-black leading-tight lg:text-4xl\">{title}</h2>\n            <p className=\"mt-3 max-w-2xl font-body text-sm leading-relaxed text-white/68 lg:text-base\">{text}</p>\n          </div>\n          <div className=\"flex flex-col gap-3 sm:flex-row lg:justify-end\">\n            <PrimaryCTA label=\"Solicitar presupuesto\" href={CTA_HREF} />\n          </div>\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst MethodSection = ({ page }: { page: RoofPageData }) => {\n  const [videoOpen, setVideoOpen] = useState(false);\n\n  return (\n    <section className=\"bg-white py-16 lg:py-32\">\n      <div className=\"container mx-auto px-4 lg:px-8\">\n        <div className=\"flex flex-col items-start gap-12 lg:flex-row lg:gap-20\">\n          <div className=\"lg:sticky lg:top-[120px] lg:w-[40%]\">\n            <ScrollReveal>\n              <p className=\"mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/50\">\n                El proceso\n              </p>\n              <h2\n                className=\"mb-6 font-satoshi text-3xl font-black text-foreground sm:text-4xl lg:text-[3rem]\"\n                style={{ letterSpacing: '-0.03em', lineHeight: 1.05 }}\n              >\n                4 etapas. Cero interrupción.\n                <span className=\"text-foreground/30\"> Cero riesgo.</span>\n              </h2>\n              <p className=\"mb-8 font-body text-base leading-relaxed text-muted-foreground lg:text-lg\">\n                {page.method.reassurance}\n              </p>\n              <button\n                onClick={() => setVideoOpen(true)}\n                className=\"group flex items-center gap-3 text-primary transition-colors hover:text-primary\"\n              >\n                <span className=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 transition-colors group-hover:bg-primary/20\">\n                  <Play className=\"h-5 w-5\" />\n                </span>\n                <span className=\"font-body text-sm font-semibold\">Ver una obra en 2 minutos</span>\n              </button>\n            </ScrollReveal>\n          </div>\n\n          <div className=\"relative lg:w-[60%]\">\n            <div className=\"absolute bottom-4 left-5 top-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent lg:left-6\" />\n            <div className=\"flex flex-col\">\n              {page.method.steps.map((step, index) => {\n                const Icon = methodIcons[index] ?? CheckCircle2;\n                return (\n                  <ScrollReveal key={step.title}>\n                    <div className=\"group relative flex items-start gap-5 py-8 lg:gap-7 lg:py-10\">\n                      <span className=\"relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-primary/10 transition-colors duration-500 group-hover:bg-primary/15 lg:h-12 lg:w-12\">\n                        <Icon className=\"h-4 w-4 text-primary lg:h-5 lg:w-5\" />\n                      </span>\n                      <div className=\"pt-1\">\n                        <span className=\"mb-2 block font-body text-xs font-bold uppercase tracking-widest text-primary/50\">\n                          Etapa 0{index + 1}\n                        </span>\n                        <h3 className=\"mb-2 font-satoshi text-xl font-bold text-foreground lg:text-2xl\">\n                          {step.title}\n                        </h3>\n                        <p className=\"max-w-md font-body text-sm leading-relaxed text-muted-foreground lg:text-base\">\n                          {step.text}\n                        </p>\n                      </div>\n                    </div>\n                    {index < page.method.steps.length - 1 && <div className=\"ml-5 h-px bg-border lg:ml-6\" />}\n                  </ScrollReveal>\n                );\n              })}\n            </div>\n\n            <ScrollReveal>\n              <div className=\"ml-16 mt-4 lg:ml-20\">\n                <p className=\"font-body text-xs font-medium text-muted-foreground/50\">\n                  Duración media: 3 días · Sin parada de actividad\n                </p>\n              </div>\n            </ScrollReveal>\n          </div>\n        </div>\n      </div>\n\n      <Dialog open={videoOpen} onOpenChange={setVideoOpen}>\n        <DialogContent className=\"max-w-4xl overflow-hidden border-none bg-black p-0\">\n          <div className=\"aspect-video\">\n            <iframe\n              src=\"https://www.youtube.com/embed/9HOB5OVH0Ac?autoplay=1\"\n              className=\"h-full w-full\"\n              allow=\"autoplay; encrypted-media\"\n              allowFullScreen\n              title=\"Covalba Cool Roof, una obra en 2 minutos\"\n            />\n          </div>\n        </DialogContent>\n      </Dialog>\n    </section>\n  );\n};\n\nconst ProofSection = ({ page }: { page: RoofPageData }) => (\n  <section className=\"bg-[#192A3A] py-20 text-white lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mb-12 grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-end\">\n          <div>\n            <Label light>{page.proof.badge}</Label>\n            <h2 className=\"font-satoshi text-3xl font-black leading-tight sm:text-4xl lg:text-5xl\">{page.proof.title}</h2>\n          </div>\n          <p className=\"max-w-xl font-body text-base leading-relaxed text-white/62\">\n            Cifras de campo a confirmar obra por obra, utilizadas aquí como referencias de rendimiento.\n          </p>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal stagger>\n        <div className=\"grid gap-4 md:grid-cols-3\">\n          {page.proof.figures.map((figure, index) => {\n            const Icon = proofIcons[index] ?? BadgeCheck;\n            return (\n              <article key={figure.value} className=\"rounded-2xl border border-white/10 bg-white/[0.045] p-7\">\n                <Icon className=\"mb-6 h-6 w-6 text-teal-vivid\" strokeWidth={1.7} />\n                <p className=\"font-satoshi text-3xl font-black leading-none text-white lg:text-4xl\">{figure.value}</p>\n                <p className=\"mt-3 font-body text-sm leading-relaxed text-white/60\">{figure.label}</p>\n              </article>\n            );\n          })}\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <div className=\"mt-14 border-t border-white/10 pt-10\">\n          <p className=\"mb-8 text-center font-body text-[10px] font-bold uppercase tracking-[0.22em] text-white/42\">\n            Referencias de clientes\n          </p>\n          <div className=\"flex flex-wrap items-center justify-center gap-x-10 gap-y-7 lg:gap-x-14\">\n            {logos.map((logo) => (\n              <span key={logo.name} className=\"flex h-8 w-28 items-center justify-center\">\n                <img\n                  src={logo.url}\n                  alt={logo.name}\n                  className=\"max-h-7 max-w-full object-contain opacity-45 transition-opacity duration-300 hover:opacity-80\"\n                  style={{ filter: 'brightness(0) invert(1)' }}\n                  loading=\"lazy\"\n                />\n              </span>\n            ))}\n          </div>\n        </div>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst FAQSection = ({ faq }: { faq: RoofPageData['faq'] }) => (\n  <section className=\"bg-cream py-20 lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <div className=\"grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:gap-16\">\n        <ScrollReveal>\n          <div className=\"lg:sticky lg:top-24\">\n            <Label>FAQ</Label>\n            <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl\">\n              Sus preguntas,\n              <br />\n              <span className=\"text-foreground/40\">nuestras respuestas.</span>\n            </h2>\n            <a href=\"#contact\" className=\"group mt-8 inline-flex items-center gap-2 font-body text-sm font-semibold text-primary transition-all hover:gap-3\">\n              ¿Otra pregunta? Hablemos\n              <ArrowRight className=\"h-4 w-4\" />\n            </a>\n          </div>\n        </ScrollReveal>\n\n        <ScrollReveal>\n          <Accordion type=\"single\" collapsible className=\"space-y-3\">\n            {faq.map((item, index) => (\n              <AccordionItem\n                key={item.q}\n                value={`roof-faq-${index}`}\n                className=\"rounded-xl border border-foreground/[0.06] bg-white px-5 shadow-[0_12px_34px_rgba(24,42,58,0.04)] data-[state=open]:border-primary/20 lg:px-6\"\n              >\n                <AccordionTrigger className=\"py-5 text-left font-satoshi text-base font-bold text-foreground hover:no-underline lg:text-[17px]\">\n                  {item.q}\n                </AccordionTrigger>\n                <AccordionContent className=\"pb-5 font-body text-[14.5px] leading-relaxed text-foreground/67 lg:text-[15px]\">\n                  {item.a}\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </ScrollReveal>\n      </div>\n    </div>\n  </section>\n);\n\nconst FinalCTA = ({ page }: { page: RoofPageData }) => (\n  <section id=\"contact\" className=\"overflow-hidden bg-[#182A3A] py-20 text-white lg:py-32\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <div className=\"mx-auto max-w-4xl text-center\">\n          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl\">\n            {page.finalCta.title}\n          </h2>\n          <p className=\"mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-white/72 lg:text-lg\">\n            {page.finalCta.text}\n          </p>\n          <div className=\"mt-9 flex flex-col gap-3 sm:flex-row sm:justify-center\">\n            <PrimaryCTA label=\"Solicitar presupuesto\" href={CTA_HREF} />\n          </div>\n        </div>\n      </ScrollReveal>\n\n      <ScrollReveal>\n        <ul className=\"mx-auto mt-12 grid max-w-3xl gap-3 sm:grid-cols-3\">\n          {page.finalCta.reassurances.map((item) => (\n            <li key={item} className=\"flex items-center justify-center gap-2.5 rounded-lg border border-white/[0.12] bg-white/[0.045] px-4 py-3\">\n              <CalendarCheck className=\"h-4 w-4 shrink-0 text-teal-vivid\" strokeWidth={1.8} />\n              <span className=\"font-body text-sm text-white/[0.76]\">{item}</span>\n            </li>\n          ))}\n        </ul>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst SEOContent = ({ page }: { page: RoofPageData }) => (\n  <section className=\"bg-white py-20 lg:py-28\">\n    <div className=\"container mx-auto px-4 lg:px-8\">\n      <ScrollReveal>\n        <article className=\"mx-auto max-w-3xl\">\n          <p className=\"mb-5 font-body text-[10px] font-bold uppercase tracking-[0.25em] text-primary/55\">\n            Guía de soporte\n          </p>\n          <h2 className=\"font-satoshi text-3xl font-black leading-tight text-foreground lg:text-4xl\">\n            Todo lo que hay que saber sobre {page.eyebrow.toLowerCase()}.\n          </h2>\n          <p className=\"mt-6 font-body text-base leading-relaxed text-foreground/68 lg:text-lg\">\n            {page.seo.intro}\n          </p>\n\n          <div className=\"mt-10 space-y-9\">\n            {page.seo.sections.map((section) => (\n              <section key={section.title}>\n                <h3 className=\"font-satoshi text-2xl font-bold leading-tight text-foreground\">{section.title}</h3>\n                <p className=\"mt-3 font-body text-base leading-relaxed text-foreground/66\">{section.text}</p>\n              </section>\n            ))}\n          </div>\n\n          <div className=\"mt-12 rounded-2xl bg-cream p-6 ring-1 ring-foreground/[0.05]\">\n            <h3 className=\"font-satoshi text-lg font-bold text-foreground\">Fuentes</h3>\n            <ul className=\"mt-4 space-y-2\">\n              {page.seo.sources.map((source) => (\n                <li key={source.href}>\n                  <a href={source.href} className=\"font-body text-sm leading-relaxed text-primary underline-offset-4 hover:underline\" target=\"_blank\" rel=\"noreferrer\">\n                    {source.label}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </article>\n      </ScrollReveal>\n    </div>\n  </section>\n);\n\nconst buildFaqSchema = (page: RoofPageData) => ({\n  '@context': 'https://schema.org',\n  '@type': 'FAQPage',\n  mainEntity: page.faq.map((item) => ({\n    '@type': 'Question',\n    name: item.q,\n    acceptedAnswer: {\n      '@type': 'Answer',\n      text: item.a,\n    },\n  })),\n});\n\nconst buildBreadcrumbSchema = (page: RoofPageData) => ({\n  '@context': 'https://schema.org',\n  '@type': 'BreadcrumbList',\n  itemListElement: [\n    { '@type': 'ListItem', position: 1, name: 'Inicio', item: `${SITE_URL}/es` },\n    { '@type': 'ListItem', position: 2, name: 'Cubiertas', item: `${SITE_URL}/es` },\n    { '@type': 'ListItem', position: 3, name: page.breadcrumb, item: page.canonical },\n  ],\n});\n\nconst RoofPageTemplateES = ({ page }: RoofPageTemplateESProps) => {\n  usePageMeta({\n    title: page.title,\n    description: page.description,\n    canonical: page.canonical,\n  });\n  useJsonLd(`roof-es-${page.slug}-faq`, buildFaqSchema(page));\n  useJsonLd(`roof-es-${page.slug}-breadcrumb`, buildBreadcrumbSchema(page));\n\n  return (\n    <>\n      <NavbarES />\n      <main>\n        <RoofHero page={page} />\n        <ProblemSection page={page} />\n        <SolutionSection page={page} />\n        <BenefitsSection page={page} />\n        <ROISection page={page} />\n        <DiagnosticCTA title={page.midCta.title} text={page.midCta.text} />\n        <MethodSection page={page} />\n        <ProofSection page={page} />\n        <FAQSection faq={page.faq} />\n        <FinalCTA page={page} />\n        <SEOContent page={page} />\n      </main>\n      <FooterES />\n      <StickyMobileCTAES />\n    </>\n  );\n};\n\nexport default RoofPageTemplateES;\n","structuredPatch":[],"originalFile":null,"userModified":false},"sourceToolAssistantUUID":"ff17c7f4-df06-4a2e-bc62-126ddb9f5558","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":"703d7c9d-fc1b-4f0a-b470-c5771bde0018","isSidechain":true,"agentId":"a01683a908360cb30","message":{"model":"claude-opus-4-8","id":"msg_01KuLBgbwNKkSebJ1GsRDjHf","type":"message","role":"assistant","content":[{"type":"text","text":"File created. Done.\n\n## Summary\n\nCreated `/opt/projects/.covalba-refonte-worktrees/nico-feature-traduction-all/src/components/es/roof/RoofPageTemplateES.tsx` — a faithful Castilian-Spanish copy of the FR `RoofPageTemplate.tsx`. Identical JSX structure, Tailwind classes, image/icon imports, state and animations preserved. All `page.*` config values left untouched (already Spanish per-page).\n\n**Import used:** `import { type RoofPageData, type TextCard } from '@/data/roofPages'` — both are real exports (`getBenefitImage` needs the `TextCard` type). ES chrome wired in: `NavbarES`, `FooterES`, `StickyMobileCTAES`. `usePageMeta` still derives canonical from `page.canonical`; JSON-LD ids namespaced `roof-es-*`.\n\n**French chrome translated (grouped):**\n- Breadcrumb / nav: Accueil→Inicio, Toitures→Cubiertas; breadcrumb JSON-LD names + items point to `/es`.\n- Hero form: \"Estimez le gain possible\"→\"Estime el ahorro posible\", \"Réponse personnalisée sous 24h\", climate select + options (Oui/Non/Partiellement/À confirmer → Sí/No/Parcialmente/Por confirmar), \"¿Edificio climatizado?\", placeholders (Superficie de cubierta, Correo profesional), \"Ver mi potencial\", \"Sin compromiso · Estudio adaptado al soporte\", success state (\"Base indicativa para…\", advisor note, \"Modificar mi solicitud\"), \"Confían en nosotros\", aria-label \"Beneficios clave\".\n- Problem section: 5 `getProblemTitle` map keys + strong/muted, \"El cool roof: una respuesta concreta al problema del calor.\" + body, support hot/cool labels.\n- Solution: layerTitles (Imprimación de adherencia / Resina reflectante / Barniz de protección), heading \"Un sistema diseñado para reflejar, proteger y durar.\", subcopy, `getLayerDescription`/`getLayerExpert` notes, Maxime alt + \"fundador\", cool-roof image alts.\n- ROI: badge/heading/detail strings, stat tiles (€/m², años, 0 paradas), \"Comparar las opciones\", calculator labels/aria, \"Rehabilitación de referencia\", \"Diferencia potencial\", disclaimer, \"¿Qué solución para su cubierta?\".\n- Method: \"El proceso\", \"4 etapas. Cero interrupción. Cero riesgo.\", \"Ver una obra en 2 minutos\", \"Etapa 0X\", \"Duración media: 3 días · Sin parada de actividad\", iframe title.\n- Proof: benchmark sentence, \"Referencias de clientes\".\n- FAQ: \"FAQ\" kept, \"Sus preguntas, nuestras respuestas.\", \"¿Otra pregunta? Hablemos\".\n- Final CTA + SEO: all \"Demander un devis\" CTAs → \"Solicitar presupuesto\", \"Guía de soporte\", \"Fuentes\".\n\n**Product pivot / France-specific:** All conversion CTAs use a single `CTA_HREF = '/es'` constant (no `/diagnostic` route on ES, matching the EN decision; ES chrome only links to `/es`). Labels are \"Solicitar presupuesto\" (buyer requesting a quote, applicator = their contractor).\n\n**Helper-matching flags:**\n1. **`getTreatmentRange`** — anchored on FR slugs (`covaseal`, `membrane-bitumineuse`, `toiture-plate`, `covametal`, `bac-acier`, `fibrociment`) so pricing stays correct regardless of translated `situation` labels. I added Spanish copy keywords (`envejec`, `fuga`, `corrosión`, `acero`, `fibrocemento`, `placas`) as secondary matches — these only fire if the FR slug is missing, so harmless. The `situation` argument comes from translated `page.roi.situation.rows`, so the original FR keyword fallbacks (`vieillissante`, `fuite`, `tôle`) would not match Spanish copy; slug matching is what keeps it working. Flag: if a page has a non-standard slug, it falls back to the default CovaTherm range.\n2. **`getFallbackPricePerM2`** — matches against `option` (a translated comparison header). FR keywords replaced with Spanish (`anticorrosión`/`repintado`→16, `sustitución`/`reemplazo`→120, `membrana`→90, `aislamiento`→150). **Flag:** depends entirely on ES copy in `page.roi.comparison.headers`; if those headers use different wording, prices fall back to `null`/`displayCell`. Index 0 (Covalba) is always the treatment midpoint regardless.\n3. **`getBenefitImage`** — keyword-matches translated `benefit.title`/`benefit.text`; FR keywords replaced with Spanish. The `membrane-bitumineuse`/`toiture-plate` slug branch and the `bac-acier` slug guard still work on slugs. **Flag:** the text-keyword branches depend on ES copy; mismatches just fall through to the indexed default image (non-breaking).\n4. **`RoiOptionCards` row finders** (`investment`/`duration`/`activity`) — match against translated `comparison.rows[0]` labels. Translated to Spanish keywords (`inversión`, `durac`/`vida útil`, `activ`/`operac`). **Flag:** depends on ES comparison row labels; if a row label doesn't contain these stems, that row won't render in the option cards (matches EN's same risk).\n5. **`ROICalculator` referencePrice** — checks `selectedSituation.includes('aislamiento')` (was `isolation`). Depends on ES situation copy; defaults to 90 otherwise.\n\nNo French display data is embedded that would leak into the page — the only hardcoded proper nouns are brand/product names (Covalba, CovaTherm/CovaSeal/CovaMetal, Maxime Bourassin) and client logos, all locale-agnostic and intentionally kept. No FR files were modified."}],"stop_reason":"end_turn","stop_sequence":null,"stop_details":null,"usage":{"input_tokens":2,"cache_creation_input_tokens":25792,"cache_read_input_tokens":98876,"output_tokens":2135,"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":25792},"inference_geo":"not_available","iterations":[{"input_tokens":2,"output_tokens":2135,"cache_read_input_tokens":98876,"cache_creation_input_tokens":25792,"cache_creation":{"ephemeral_5m_input_tokens":25792,"ephemeral_1h_input_tokens":0},"type":"message"}],"speed":"standard"},"diagnostics":null},"requestId":"req_011CcJVgqoWNtjaDjsaCcAUj","attributionAgent":"general-purpose","type":"assistant","uuid":"9bce12d9-5305-4f73-afcb-b0e4f17e8d2b","timestamp":"2026-06-22T14:58:50.467Z","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"}