import { useState } from 'react'; import { ArrowRight, BadgeCheck, CalendarClock, CalendarCheck, Check, CheckCircle2, ChevronDown, Factory, HelpCircle, Play, ShieldCheck, ShieldAlert, Sparkles, SunMedium, Thermometer, TrendingDown, Users, Wrench, ClipboardCheck, type LucideIcon, } from 'lucide-react'; import FooterES from '@/components/es/FooterES'; import NavbarES from '@/components/es/NavbarES'; import ScrollReveal from '@/components/ScrollReveal'; import StickyMobileCTAES from '@/components/es/StickyMobileCTAES'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'; import { Dialog, DialogContent } from '@/components/ui/dialog'; import { useJsonLd, usePageMeta } from '@/hooks/usePageMeta'; import { type RoofPageData, type TextCard } from '@/data/roofPages'; import coolRoofLayers from '@/assets/cool-roof-layers.webp'; import covaMetalProduct from '@/assets/produits/Covalba-CovaMetal20-Duo-Produit.webp'; import covaSealProduct from '@/assets/produits/Covalba-CovaSeal20-Duo-Produit.webp'; import covaTherm8Product from '@/assets/produits/Covalba-CovaTherm8-Produit.webp'; import covaTherm20Product from '@/assets/produits/Covalba-CovaTherm20-Produit.webp'; interface RoofPageTemplateESProps { page: RoofPageData; } const SITE_URL = 'https://www.covalba.fr'; // Internal route for all CTAs on the ES site. There is no dedicated ES // diagnostic/contact route yet, so every conversion CTA points to the ES home. const CTA_HREF = '/es'; const cardIcons: LucideIcon[] = [SunMedium, Wrench, Factory, ShieldCheck]; const methodIcons: LucideIcon[] = [ClipboardCheck, CalendarClock, ShieldCheck, TrendingDown]; const proofIcons: LucideIcon[] = [Thermometer, ShieldCheck, BadgeCheck]; const problemIcons: LucideIcon[] = [Users, SunMedium, ShieldAlert]; const logos = [ { name: 'Continental', url: '/logos/logo-continental.svg' }, { name: 'Thales', url: '/logos/logo-thales.svg' }, { name: 'Nestlé', url: '/logos/logo-nestle.svg' }, { name: 'SNCF', url: '/logos/logo-sncf.svg' }, { name: 'Leclerc', url: '/logos/logo-leclerc.svg' }, { name: 'Super U', url: '/logos/logo-super-u.svg' }, ]; const displayCell = (value: string) => value.replace(/EUR/g, '€').replace(/m2/g, 'm²'); const formatCurrency = (value: number) => `${new Intl.NumberFormat('es-ES', { maximumFractionDigits: 0 }).format(Math.round(value))} €`; const parsePricePerM2 = (value: string) => { const match = displayCell(value).match(/\(([\d,.]+)\s*€\/m²\)/); if (!match) return null; return Number.parseFloat(match[1].replace(',', '.')); }; // Keyword-matching anchored on FR slugs (page.slug values are shared across all // locales) plus a few Spanish copy keywords. Slug matching keeps the pricing // helpers stable regardless of the translated situation labels. const getTreatmentRange = (page: RoofPageData, situation: string) => { const text = `${page.slug} ${situation}`.toLowerCase(); if ( text.includes('covaseal') || text.includes('membrane-bitumineuse') || text.includes('toiture-plate') || text.includes('envejec') || text.includes('fuga') ) { return { min: 28, max: 38, label: 'CovaSeal 20 estimado' }; } if ( text.includes('covametal') || text.includes('bac-acier') || text.includes('corrosión') || text.includes('corrosion') || text.includes('acero') ) { return { min: 24, max: 32, label: 'CovaMetal 20 estimado' }; } if (text.includes('fibrociment') || text.includes('fibrocemento') || text.includes('placas')) { return { min: 22, max: 28, label: 'CovaTherm soporte sensible' }; } return { min: 20, max: 25, label: 'CovaTherm estimado' }; }; const getFallbackPricePerM2 = (option: string, optionIndex: number, treatmentMidpoint: number) => { const lower = option.toLowerCase(); if (optionIndex === 0) return treatmentMidpoint; if (lower.includes('anticorrosión') || lower.includes('anticorrosion') || lower.includes('repintado')) return 16; if (lower.includes('sustitución') || lower.includes('reemplazo') || lower.includes('cambio')) return 120; if (lower.includes('membrana nueva') || lower.includes('membrana')) return 90; if (lower.includes('aislamiento')) return 150; return null; }; const benefitImages = [ '/images/toitures/benefit-confort.webp', '/images/toitures/benefit-protection-toiture.webp', '/images/toitures/benefit-clim.webp', '/images/toitures/benefit-chantier-evite.webp', ]; const feedbackRoofBenefitImages = [ '/images/toitures/feedback-batiment-tempere.png', '/images/toitures/feedback-etancheite.png', '/images/toitures/feedback-economie-clim-1.png', '/images/toitures/feedback-economie-clim-3.png', ]; const getBenefitImage = (page: RoofPageData, benefit: TextCard, index: number) => { if (['membrane-bitumineuse', 'toiture-plate'].includes(page.slug)) { return feedbackRoofBenefitImages[index] ?? feedbackRoofBenefitImages[0]; } const text = `${benefit.title} ${benefit.text}`.toLowerCase(); if (page.slug === 'bac-acier' && (text.includes('acero') || text.includes('corrosión') || text.includes('óxido') || text.includes('oxidación'))) { return '/images/toitures/support-bac-acier-cool.webp'; } if (text.includes('factura') || text.includes('refrigeración') || text.includes('climatización') || text.includes('aire acondicionado') || text.includes('frío')) { return '/images/toitures/benefit-clim.webp'; } if ( text.includes('obra') || text.includes('reforma') || text.includes('rehabilitación') || text.includes('sustitución') || text.includes('retirada') || text.includes('desmontaje') ) { return '/images/toitures/benefit-chantier-evite.webp'; } if ( text.includes('proteg') || text.includes('impermeab') || text.includes('estanqueidad') || text.includes('corrosión') || text.includes('vida útil') || text.includes('durab') ) { return '/images/toitures/benefit-protection-toiture.webp'; } return benefitImages[index] ?? benefitImages[0]; }; const supportVisuals: Record = { 'membrane-bitumineuse': { hot: '/images/toitures/support-bitume-chaud.webp', cool: '/images/toitures/feedback-economie-clim-2.png', hotLabel: 'Sin cool roof: membrana bituminosa que absorbe el calor', coolLabel: 'Con cool roof: membrana reflectante', }, 'bac-acier': { hot: '/images/toitures/support-bac-acier-chaud.webp', cool: '/images/toitures/support-bac-acier-cool.webp', hotLabel: 'Sin cool roof: metal sobrecalentado', coolLabel: 'Con cool roof: chapa de acero reflectante y protegida', }, 'toiture-plate': { hot: '/images/toitures/support-toiture-plate-chaud.webp', cool: '/images/toitures/feedback-economie-clim-2.png', hotLabel: 'Sin cool roof: cubierta plana que absorbe el calor', coolLabel: 'Con cool roof: cubierta plana reflectante', }, fibrociment: { hot: '/images/toitures/support-fibrociment-chaud.webp', cool: '/images/toitures/support-fibrociment-cool.webp', hotLabel: 'Sin cool roof: fibrocemento que absorbe el calor', coolLabel: 'Con cool roof: placas protegidas', }, 'tuiles-ciment': { hot: '/images/toitures/support-tuiles-ciment-chaud.webp', cool: '/images/toitures/support-tuiles-ciment-cool.webp', hotLabel: 'Sin cool roof: tejas que acumulan calor', coolLabel: 'Con cool roof: tejas reflectantes', }, }; const layerTitles = ['Imprimación de adherencia', 'Resina reflectante', 'Barniz de protección']; const layerColors = [ { pill: 'bg-terracotta text-white', dot: 'bg-terracotta', chevron: 'text-terracotta', }, { pill: 'bg-foreground text-white', dot: 'bg-foreground', chevron: 'text-foreground', }, { pill: 'bg-primary text-white', dot: 'bg-primary', chevron: 'text-primary', }, ]; const layerPositions = [ { top: '56.7%', left: '36.5%' }, { top: '48.2%', left: '36.5%' }, { top: '36.3%', left: '35.6%' }, ]; const getProblemTitle = (title: string) => { const map: Record = { 'Una cubierta bituminosa negra es un radiador colocado sobre su edificio.': { strong: 'Su cubierta se calienta.', muted: 'Su edificio lo sufre.', }, 'La chapa de acero se calienta rápido, se oxida rápido y se desgasta rápido.': { strong: 'El metal se calienta rápido.', muted: 'La cubierta también se desgasta.', }, 'En plano, su cubierta recibe el sol todo el día.': { strong: 'Su cubierta lo recibe todo.', muted: 'Calor, UV, estanqueidad.', }, 'El fibrocemento se calienta, envejece y es caro de retirar.': { strong: 'El fibrocemento se calienta.', muted: 'Retirarlo cuesta caro.', }, 'Tejas de cemento oscuras, desvanes sobrecalentados.': { strong: 'Las tejas acumulan calor.', muted: 'Los desvanes lo sufren.', }, }; return map[title] ?? { strong: title, muted: '' }; }; const getLayerDescription = (index: number) => { if (index === 0) { return 'Se adapta al soporte existente. Cada cubierta tiene su química, y cada química requiere una preparación y una adherencia adaptadas.'; } if (index === 1) { 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.'; } 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.'; }; const getLayerExpert = (index: number) => { const notes = [ 'Una imprimación inadecuada es un sistema que se ampolla y se despega. El soporte lo decide todo.', 'El cool roof trata la causa: la cubierta se calienta menos, así que el edificio recibe menos calor.', 'La diferencia entre una pintura y una inversión es cómo aguanta en el tiempo. El acabado está para proteger el rendimiento.', ]; return notes[index] ?? notes[0]; }; const Label = ({ children, light = false }: { children: string; light?: boolean }) => (
); const PrimaryCTA = ({ label, href }: { label: string; href: string }) => ( {label} ); const RoofHero = ({ page }: { page: RoofPageData }) => { const [form, setForm] = useState({ climate: '', surface: '', email: '' }); const [submitted, setSubmitted] = useState(false); const surfaceNum = parseFloat(form.surface) || 0; const estimate = surfaceNum ? `${new Intl.NumberFormat('es-ES').format(surfaceNum * 22.5)} €` : '20-25 €/m²'; return (
{page.heroImageAlt}
); }; const ProblemSection = ({ page }: { page: RoofPageData }) => { const title = getProblemTitle(page.problem.title); const visual = supportVisuals[page.slug] ?? supportVisuals['membrane-bitumineuse']; return (

{title.strong} {title.muted && {title.muted}}

{visual.hotLabel}

{page.problem.cards.map((card, index) => { const Icon = problemIcons[index] ?? HelpCircle; return (

{card.title}

{card.text}

); })}

{visual.coolLabel}

El cool roof: una respuesta concreta al problema del calor.

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.

); }; const SolutionSection = ({ page }: { page: RoofPageData }) => { const [active, setActive] = useState(0); return (

{page.solution.badge}

Un sistema diseñado para reflejar, proteger y durar.

Una imprimación, una resina y un barniz que garantizan el rendimiento de su cubierta en el tiempo.

Sección del sistema cool roof de Covalba
{layerTitles.map((item, index) => { const isOpen = active === index; const colors = layerColors[index] ?? layerColors[0]; return (

{getLayerDescription(index)}

Maxime Bourassin, fundador de Covalba

"{getLayerExpert(index)}"

Maxime Bourassin, fundador

{index === 0 && page.solution.note && (

{page.solution.note}

)}
); })}
Sección del sistema cool roof de Covalba {layerTitles.map((item, index) => { const pos = layerPositions[index]; const colors = layerColors[index] ?? layerColors[0]; const isActive = active === index; if (!pos) return null; return (
{isActive && (
)}
{item}
); })}
); }; const BenefitsSection = ({ page }: { page: RoofPageData }) => (

{page.benefits.title}

{page.benefits.featured}

{page.benefits.cards.map((benefit, index) => { const Icon = cardIcons[index] ?? Sparkles; return (

{benefit.title}

{benefit.text}

); })}
); const RoiOptionCards = ({ page, surface, treatmentRange, }: { page: RoofPageData; surface: number; treatmentRange: ReturnType; }) => { if (!page.roi.comparison) { return page.roi.afterComparison ? (

{page.roi.afterComparison}

) : null; } const options = page.roi.comparison.headers.slice(1); const rows = page.roi.comparison.rows; const investment = rows.find((row) => { const key = row[0].toLowerCase(); return key.includes('inversión') || key.includes('inversion'); }); const duration = rows.find((row) => { const key = row[0].toLowerCase(); return key.includes('durac') || key.includes('vida útil') || key.includes('vida'); }); const activity = rows.find((row) => { const key = row[0].toLowerCase(); return key.includes('activ') || key.includes('operac'); }); const treatmentMidpoint = (treatmentRange.min + treatmentRange.max) / 2; return (
{options.map((option, optionIndex) => { const isCovalba = optionIndex === 0; const rawInvestment = investment?.[optionIndex + 1] ?? ''; const parsedPrice = parsePricePerM2(rawInvestment); const pricePerM2 = parsedPrice ?? getFallbackPricePerM2(option, optionIndex, treatmentMidpoint); const dynamicInvestment = pricePerM2 ? `~${formatCurrency(surface * pricePerM2)}` : displayCell(rawInvestment); return (

{option}

{isCovalba && ( )}

{dynamicInvestment}

{pricePerM2 && (

base {new Intl.NumberFormat('es-ES').format(surface)} m² · {pricePerM2.toLocaleString('es-ES')} €/m²

)}
{[duration, activity].filter(Boolean).map((row) => (
{displayCell(row![0])}
{displayCell(row![optionIndex + 1])}
))}
); })}
); }; const ROICalculator = ({ page, surface, selectedSituation, treatmentRange, onSurfaceChange, onSituationChange, }: { page: RoofPageData; surface: number; selectedSituation: string; treatmentRange: ReturnType; onSurfaceChange: (surface: number) => void; onSituationChange: (situation: string) => void; }) => { const treatmentLow = surface * treatmentRange.min; const treatmentHigh = surface * treatmentRange.max; const referencePrice = selectedSituation.toLowerCase().includes('aislamiento') ? 150 : 90; const referenceCost = surface * referencePrice; const potentialGap = Math.max(referenceCost - treatmentHigh, 0); return (

Calculadora indicativa

Ajuste la superficie y el estado de la cubierta.

Por defecto: 5.000 m², superficie típica de una nave o edificio industrial a tratar.

{[ { label: treatmentRange.label, value: `${formatCurrency(treatmentLow)} - ${formatCurrency(treatmentHigh)}`, detail: `${treatmentRange.min}-${treatmentRange.max} €/m² según preparación`, valueClass: 'text-teal-vivid', }, { label: 'Rehabilitación de referencia', value: `~${formatCurrency(referenceCost)}`, detail: `${referencePrice} €/m², orden de magnitud a comparar`, valueClass: 'text-terracotta', }, { label: 'Diferencia potencial', value: `hasta ${formatCurrency(potentialGap)}`, detail: 'Inversión pesada evitada o aplazada si el soporte es viable', valueClass: 'text-teal-vivid', }, ].map((item) => (

{item.label}

{item.value}

{item.detail}

))}

Presupuesto indicativo: el estudio ajusta el precio según el acceso, la preparación, los puntos singulares y el estado real del soporte.

); }; const getSituationImage = (recommendation: string) => { const lower = recommendation.toLowerCase(); if (lower.includes('covametal')) return covaMetalProduct.src; if (lower.includes('covaseal')) return covaSealProduct.src; if (lower.includes('cova')) return covaTherm20Product.src; return covaTherm8Product.src; }; const SituationCards = ({ rows }: { rows: string[][] }) => (
{rows.map((row) => (

{row[0]}

{row[1]}

{row[2]}

))}
); const ROISection = ({ page }: { page: RoofPageData }) => { const [surface, setSurface] = useState(5000); const [selectedSituation, setSelectedSituation] = useState(page.roi.situation.rows[0]?.[0] ?? ''); const treatmentRange = getTreatmentRange(page, selectedSituation); return (

{page.roi.title}

{page.roi.intro}

{[ ['20-25 €/m²', 'para tratar y refrescar'], ['8-10 años', 'de rehabilitación aplazada'], ['0 paradas', 'de actividad durante la obra'], ].map(([value, label]) => (

{value}

{label}

))}

Comparar las opciones

Una lectura rápida del presupuesto.

{page.roi.comparison && page.roi.afterComparison && (

{page.roi.afterComparison}

)}

Decidir según el estado real

¿Qué solución para su cubierta?

); }; const DiagnosticCTA = ({ title, text }: { title: string; text: string }) => (
); const MethodSection = ({ page }: { page: RoofPageData }) => { const [videoOpen, setVideoOpen] = useState(false); return (

El proceso

4 etapas. Cero interrupción. Cero riesgo.

{page.method.reassurance}

{page.method.steps.map((step, index) => { const Icon = methodIcons[index] ?? CheckCircle2; return (
Etapa 0{index + 1}

{step.title}

{step.text}

{index < page.method.steps.length - 1 &&
} ); })}

Duración media: 3 días · Sin parada de actividad