import { useEffect } from 'react'; import { ArrowRight, CheckCircle2, Clock, Globe2, Linkedin, Mail, Share2, Youtube, } from 'lucide-react'; import NavbarEN from '@/components/en/NavbarEN'; import FooterEN from '@/components/en/FooterEN'; import StickyMobileCTAEN from '@/components/en/StickyMobileCTAEN'; import ScrollReveal from '@/components/ScrollReveal'; import { Badge } from '@/components/ui/badge'; import { useJsonLd, usePageMeta } from '@/hooks/usePageMeta'; const PAGE_URL = 'https://www.covalba.fr/en/contact'; const HUBSPOT_TARGET_ID = 'hubspot-contact-form-en'; const EMAIL = 'contact@covalba.fr'; declare global { interface Window { hbspt?: { forms?: { create: (options: Record<string, unknown>) => void; }; }; } } const trustLogos = [ { name: 'E.Leclerc', src: '/logos/logo-leclerc.svg' }, { name: "McDonald's", src: '/logos/logo-mcdonalds.svg' }, { name: 'Super U', src: '/logos/logo-super-u.svg' }, { name: 'SNCF', src: '/logos/logo-sncf.svg' }, { name: 'Thales', src: '/logos/logo-thales.svg' }, { name: 'Carrefour Market', src: '/logos/logo-carrefour-market.svg' }, ]; const contactMethods = [ { icon: Mail, label: 'Email', value: EMAIL, href: `mailto:${EMAIL}`, }, ]; const availabilityZones = [ { area: 'Europe', detail: 'Available', places: 'Belgium, Spain, Switzerland', }, { area: 'Africa', detail: 'Available', places: "Benin, Burkina Faso, Cameroon, Côte d'Ivoire, Djibouti, Gabon, Ghana, Morocco, Nigeria, Senegal, Togo, DR Congo", }, { area: 'Other regions', detail: 'On request', places: 'Contact us to check availability in your country.', }, ]; const socialLinks = [ { name: 'LinkedIn', href: 'https://www.linkedin.com/company/covalba', icon: Linkedin, }, { name: 'YouTube', href: 'https://www.youtube.com/channel/UCg_Vri5gC5ORFhhs_-GGAXQ/featured', icon: Youtube, }, { name: 'Facebook', href: 'https://www.facebook.com/covalba', icon: Share2, }, ]; const HubSpotContactForm = () => { useEffect(() => { const mountForm = () => { const target = document.getElementById(HUBSPOT_TARGET_ID); if (!target || !window.hbspt?.forms) return; target.innerHTML = ''; window.hbspt.forms.create({ portalId: '5524202', formId: '2d46ca13-94d3-4de4-9bda-e42936288b63', target: `#${HUBSPOT_TARGET_ID}`, }); }; if (window.hbspt?.forms) { mountForm(); return undefined; } let script = document.querySelector<HTMLScriptElement>('script[src="https://js.hsforms.net/forms/v2.js"]'); if (!script) { script = document.createElement('script'); script.src = 'https://js.hsforms.net/forms/v2.js'; script.async = true; document.body.appendChild(script); } script.addEventListener('load', mountForm); return () => { script?.removeEventListener('load', mountForm); }; }, []); return ( <div className="rounded-lg border border-border bg-card p-5 shadow-sm lg:p-8"> <div className="mb-6 flex flex-col gap-3 border-b border-border pb-5 sm:flex-row sm:items-center sm:justify-between"> <div> <p className="font-body text-xs font-bold uppercase tracking-[0.18em] text-primary/70">Contact form</p> <h2 className="mt-1 font-satoshi text-2xl font-black tracking-tight text-foreground"> Tell us about your project </h2> </div> <span className="inline-flex w-fit items-center gap-2 rounded-full bg-teal-vivid/10 px-3 py-1.5 font-body text-xs font-semibold text-primary"> <Clock className="h-3.5 w-3.5" /> Request submitted </span> </div> <div id={HUBSPOT_TARGET_ID} className="min-h-[500px]" /> <p className="mt-4 text-xs leading-relaxed text-foreground/45"> Your information is used by Covalba to process your contact request. </p> </div> ); }; const ContactEN = () => { usePageMeta({ title: 'Contact Covalba — request a reflective roof coating quote', description: 'Contact Covalba for a quote or a question about our reflective roof coatings. Request a quote or order a sample.', canonical: PAGE_URL, }); useJsonLd('contact-en-jsonld', [ { '@context': 'https://schema.org', '@type': 'ContactPage', name: 'Contact Covalba', url: PAGE_URL, description: 'Covalba contact page for reflective roof coating projects, quote requests, and product information.', mainEntity: { '@type': 'Organization', name: 'Covalba', url: 'https://www.covalba.fr', email: EMAIL, }, }, { '@context': 'https://schema.org', '@type': 'BreadcrumbList', itemListElement: [ { '@type': 'ListItem', position: 1, name: 'Home', item: 'https://www.covalba.fr/en' }, { '@type': 'ListItem', position: 2, name: 'Contact', item: PAGE_URL }, ], }, ]); return ( <div className="min-h-screen bg-background"> <NavbarEN lightBg /> <main> <section id="formulaire-contact" className="bg-background pb-16 pt-24 lg:pb-24 lg:pt-28"> <div className="container mx-auto px-4 lg:px-8"> <ScrollReveal className="mb-8 max-w-3xl"> <Badge className="mb-5 bg-teal-light text-primary">Contact</Badge> <h1 className="font-satoshi text-4xl font-black leading-tight tracking-tight text-foreground md:text-5xl lg:text-6xl"> Let's talk about your roof. </h1> <p className="mt-5 max-w-2xl font-body text-base leading-relaxed text-foreground/66 lg:text-lg"> Tell us about your project, your building, or your product question. The Covalba team will get back to you with the right next steps. </p> </ScrollReveal> <div className="grid gap-8 lg:grid-cols-[1fr_0.45fr] lg:items-start"> <ScrollReveal> <HubSpotContactForm /> </ScrollReveal> <ScrollReveal className="lg:sticky lg:top-24"> <div className="space-y-4"> {contactMethods.map((method) => { const Icon = method.icon; return ( <a key={method.label} href={method.href} target={method.href.startsWith('http') ? '_blank' : undefined} rel={method.href.startsWith('http') ? 'noreferrer' : undefined} className="group block rounded-lg border border-border bg-card p-5 shadow-sm transition-colors hover:border-primary/25 hover:bg-primary/5" > <div className="flex items-start gap-4"> <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"> <Icon className="h-5 w-5" /> </span> <div className="min-w-0"> <p className="font-body text-xs font-bold uppercase tracking-[0.16em] text-foreground/35"> {method.label} </p> <p className="mt-1 font-satoshi text-lg font-bold text-foreground">{method.value}</p> </div> <ArrowRight className="ml-auto mt-1 h-4 w-4 text-primary opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100" /> </div> </a> ); })} <div className="rounded-lg border border-primary/15 bg-primary/5 p-5"> <div className="flex items-start gap-3"> <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" /> <div> <h3 className="font-satoshi text-lg font-bold text-foreground">For a faster reply</h3> <p className="mt-2 font-body text-sm leading-relaxed text-foreground/60"> Include the building location, the approximate roof area, the roof type, and your main goal: thermal comfort, energy savings, or waterproofing. </p> </div> </div> </div> </div> </ScrollReveal> </div> </div> </section> <section className="border-b border-border bg-card py-8"> <div className="container mx-auto px-4 lg:px-8"> <ScrollReveal className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between"> <div> <p className="font-body text-xs font-bold uppercase tracking-[0.18em] text-foreground/35"> They trust us </p> <p className="mt-1 font-satoshi text-2xl font-black tracking-tight text-foreground"> Leading organizations trust us. </p> </div> <div className="grid grid-cols-3 items-center gap-3 sm:grid-cols-6 lg:w-[58%]"> {trustLogos.map((logo) => ( <div key={logo.name} className="flex h-16 items-center justify-center rounded-lg border border-border bg-background px-4" > <img src={logo.src} alt={logo.name} className="max-h-8 max-w-full object-contain opacity-75" /> </div> ))} </div> </ScrollReveal> </div> </section> <section className="bg-secondary py-16 lg:py-24"> <div className="container mx-auto px-4 lg:px-8"> <ScrollReveal className="mx-auto max-w-3xl text-center"> <Badge className="mb-4 bg-white text-primary">Availability</Badge> <h2 className="font-satoshi text-4xl font-black tracking-tight text-foreground lg:text-5xl"> A reflective roof coating available worldwide. </h2> <p className="mt-5 font-body text-lg leading-relaxed text-foreground/62"> Covalba reflective roof coatings ship through a network of distributors and professional applicators, with local support close to your buildings. </p> </ScrollReveal> <div className="mx-auto mt-10 grid max-w-4xl gap-3 sm:grid-cols-3"> {availabilityZones.map((zone) => ( <div key={zone.area} className="rounded-lg border border-border bg-card p-5"> <div className="mb-3 flex items-center gap-2"> <Globe2 className="h-4 w-4 text-primary" /> <h3 className="font-satoshi text-base font-bold text-foreground">{zone.area}</h3> </div> <p className="font-body text-sm font-semibold text-primary">{zone.detail}</p> <p className="mt-1 font-body text-sm leading-relaxed text-foreground/56">{zone.places}</p> </div> ))} </div> </div> </section> <section className="bg-navy py-16 text-white lg:py-20"> <div className="container mx-auto px-4 lg:px-8"> <ScrollReveal className="grid gap-8 lg:grid-cols-[1fr_0.82fr] lg:items-center"> <div> <Badge className="mb-4 border-white/12 bg-white/10 text-white">Social media</Badge> <h2 className="font-satoshi text-4xl font-black tracking-tight lg:text-5xl"> Follow the latest reflective roofing and Covalba news. </h2> <p className="mt-5 max-w-2xl font-body text-lg leading-relaxed text-white/62"> Follow our projects, real-world results, product news, and industry insights on social media. </p> </div> <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-1"> {socialLinks.map((link) => { const Icon = link.icon; return ( <a key={link.name} href={link.href} target="_blank" rel="noreferrer" className="group flex items-center justify-between rounded-lg border border-white/10 bg-white/[0.06] p-4 transition-colors hover:bg-white/[0.1]" > <span className="flex items-center gap-3"> <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/10 text-teal-vivid"> <Icon className="h-4.5 w-4.5" /> </span> <span className="font-satoshi text-lg font-bold text-white">{link.name}</span> </span> <ArrowRight className="h-4 w-4 text-teal-vivid transition-transform group-hover:translate-x-0.5" /> </a> ); })} </div> </ScrollReveal> </div> </section> </main> <FooterEN /> <StickyMobileCTAEN /> </div> ); }; export default ContactEN;