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 FooterEN from '@/components/en/FooterEN'; import NavbarEN from '@/components/en/NavbarEN'; import ScrollReveal from '@/components/ScrollReveal'; import StickyMobileCTAEN from '@/components/en/StickyMobileCTAEN'; 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 RoofPageTemplateENProps { page: RoofPageData; } const SITE_URL = 'https://www.covalba.fr'; // Internal route for all CTAs on the EN site. There is no dedicated EN // diagnostic/contact route yet, so every conversion CTA points to the EN home. const CTA_HREF = '/en'; 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('en-US', { 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(',', '.')); }; 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('aging') || text.includes('leak') ) { return { min: 28, max: 38, label: 'CovaSeal 20 estimate' }; } if ( text.includes('covametal') || text.includes('bac-acier') || text.includes('corrosion') || text.includes('steel') ) { return { min: 24, max: 32, label: 'CovaMetal 20 estimate' }; } if (text.includes('fibrociment') || text.includes('fiber') || text.includes('sheets')) { return { min: 22, max: 28, label: 'CovaTherm sensitive substrate' }; } return { min: 20, max: 25, label: 'CovaTherm estimate' }; }; const getFallbackPricePerM2 = (option: string, optionIndex: number, treatmentMidpoint: number) => { const lower = option.toLowerCase(); if (optionIndex === 0) return treatmentMidpoint; if (lower.includes('anticorrosion') || lower.includes('repaint')) return 16; if (lower.includes('replacement') || lower.includes('replace')) return 120; if (lower.includes('new membrane') || lower.includes('membrane')) return 90; if (lower.includes('insulation')) 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('steel') || text.includes('corrosion') || text.includes('rust'))) { return '/images/toitures/support-bac-acier-cool.webp'; } if (text.includes('bill') || text.includes('cooling') || text.includes('air conditioning') || text.includes('cold')) { return '/images/toitures/benefit-clim.webp'; } if ( text.includes('project') || text.includes('refurbishment') || text.includes('replacement') || text.includes('removal') || text.includes('strip') ) { return '/images/toitures/benefit-chantier-evite.webp'; } if ( text.includes('protect') || text.includes('waterproof') || text.includes('corrosion') || text.includes('lifespan') || 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: 'Without cool roof: bitumen membrane absorbing heat', coolLabel: 'With cool roof: reflective membrane', }, 'bac-acier': { hot: '/images/toitures/support-bac-acier-chaud.webp', cool: '/images/toitures/support-bac-acier-cool.webp', hotLabel: 'Without cool roof: overheating metal', coolLabel: 'With cool roof: reflective, protected steel deck', }, 'toiture-plate': { hot: '/images/toitures/support-toiture-plate-chaud.webp', cool: '/images/toitures/feedback-economie-clim-2.png', hotLabel: 'Without cool roof: roof terrace absorbing heat', coolLabel: 'With cool roof: reflective roof terrace', }, fibrociment: { hot: '/images/toitures/support-fibrociment-chaud.webp', cool: '/images/toitures/support-fibrociment-cool.webp', hotLabel: 'Without cool roof: fiber cement absorbing heat', coolLabel: 'With cool roof: protected sheets', }, 'tuiles-ciment': { hot: '/images/toitures/support-tuiles-ciment-chaud.webp', cool: '/images/toitures/support-tuiles-ciment-cool.webp', hotLabel: 'Without cool roof: tiles storing heat', coolLabel: 'With cool roof: reflective tiles', }, }; const layerTitles = ['Bonding primer', 'Reflective resin', 'Protective top coat']; 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 = { 'A black bitumen roof is a radiator sitting on top of your building.': { strong: 'Your roof heats up.', muted: 'Your building takes the hit.', }, 'Steel decking heats up fast, rusts fast, and wears out fast.': { strong: 'The metal heats up fast.', muted: 'The roof wears out too.', }, 'Flat, your roof takes the sun all day long.': { strong: 'Your roof terrace takes it all.', muted: 'Heat, UV, waterproofing.', }, 'Fiber cement heats up, ages, and is expensive to remove.': { strong: 'Fiber cement heats up.', muted: 'Removing it is expensive.', }, 'Dark cement tiles, overheating attic space.': { strong: 'The tiles store the heat.', muted: 'The attic space takes it.', }, }; return map[title] ?? { strong: title, muted: '' }; }; const getLayerDescription = (index: number) => { if (index === 0) { return 'Adapts to the existing substrate. Every roof has its own chemistry, and every chemistry calls for tailored preparation and bonding.'; } if (index === 1) { return 'This is the heart of the system. The surface reflects solar radiation instead of absorbing it, so less heat enters the building.'; } return 'A top coat protects the resin from UV, pollution and premature aging to preserve performance over time.'; }; const getLayerExpert = (index: number) => { const notes = [ 'An unsuitable primer means a system that blisters and peels off. The substrate decides everything.', 'Cool roof treats the cause: the roof heats up less, so the building takes on less heat.', 'The difference between a paint job and an investment is how it holds up over time. The finish is there to protect performance.', ]; 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('en-US').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}

Cool roof: a concrete answer to the heat problem.

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.

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

{page.solution.badge}

A system designed to reflect, protect and last.

A primer, a resin and a top coat that guarantee your roof's performance over time.

Cross-section of the Covalba cool roof system
{layerTitles.map((item, index) => { const isOpen = active === index; const colors = layerColors[index] ?? layerColors[0]; return (

{getLayerDescription(index)}

Maxime Bourassin, founder of Covalba

"{getLayerExpert(index)}"

Maxime Bourassin, founder

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

{page.solution.note}

)}
); })}
Cross-section of the Covalba cool roof system {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) => row[0].toLowerCase().includes('investment')); const duration = rows.find((row) => { const key = row[0].toLowerCase(); return key.includes('life') || key.includes('durat') || key.includes('lifespan'); }); const activity = rows.find((row) => { const key = row[0].toLowerCase(); return key.includes('activity') || key.includes('operation'); }); 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 && (

basis {new Intl.NumberFormat('en-US').format(surface)} m² · {pricePerM2.toLocaleString('en-US')} €/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('insulation') ? 150 : 90; const referenceCost = surface * referencePrice; const potentialGap = Math.max(referenceCost - treatmentHigh, 0); return (

Indicative calculator

Adjust the surface and the condition of the roof.

Default: 5,000 m², a typical surface for a warehouse or industrial building to treat.

{[ { label: treatmentRange.label, value: `${formatCurrency(treatmentLow)} - ${formatCurrency(treatmentHigh)}`, detail: `${treatmentRange.min}-${treatmentRange.max} €/m² depending on preparation`, valueClass: 'text-teal-vivid', }, { label: 'Reference refurbishment', value: `~${formatCurrency(referenceCost)}`, detail: `${referencePrice} €/m², order of magnitude for comparison`, valueClass: 'text-terracotta', }, { label: 'Potential gap', value: `up to ${formatCurrency(potentialGap)}`, detail: 'Heavy investment avoided or deferred if the substrate is viable', valueClass: 'text-teal-vivid', }, ].map((item) => (

{item.label}

{item.value}

{item.detail}

))}

Indicative estimate: the study adjusts the price based on access, preparation, detailing points and the actual condition of the substrate.

); }; 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²', 'to treat and cool down'], ['8-10 years', 'of refurbishment deferred'], ['0 downtime', 'during the works'], ].map(([value, label]) => (

{value}

{label}

))}

Compare the options

A quick read on the budget.

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

{page.roi.afterComparison}

)}

Decide on the actual condition

Which solution for your roof?

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

The process

4 steps. Zero interruption. Zero risk.

{page.method.reassurance}

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

{step.title}

{step.text}

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

Average duration: 3 days · No interruption of activity