// Shared UI: Header, Footer, Logo, trust bar — used by every page. const { useState, useEffect, useRef } = React; // Inject favicon + Apple touch icon + theme colour into every page's . // Done at runtime so linter-driven head rewrites (preload dumps etc.) don't // strip them. Runs once per page load and is idempotent. (function injectHeadAssets() { if (typeof document === 'undefined' || document.head.dataset.carterHeadInjected) return; document.head.dataset.carterHeadInjected = '1'; const links = [ { rel: 'icon', type: 'image/png', sizes: '32x32', href: 'uploads/favicon-32x32-1.png' }, { rel: 'shortcut icon', type: 'image/png', href: 'uploads/favicon-32x32-1.png' }, { rel: 'apple-touch-icon', href: 'uploads/favicon-32x32-1.png' }, ]; links.forEach(attrs => { const el = document.createElement('link'); Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v)); document.head.appendChild(el); }); const theme = document.createElement('meta'); theme.setAttribute('name', 'theme-color'); theme.setAttribute('content', '#111111'); document.head.appendChild(theme); })(); window.Logo = function Logo({ light = true }) { return ( Carter Electrical Contracting ); }; window.Header = function Header({ current = 'home', theme = 'dark' }) { const [condensed, setCondensed] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setCondensed(window.scrollY > 30); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const links = [ { id: 'commercial', label: 'Commercial', href: 'commercial.html' }, { id: 'services', label: 'Services', href: 'services.html' }, { id: 'cases', label: 'Case Studies', href: 'case-studies.html' }, { id: 'areas', label: 'Areas', href: 'areas.html' }, { id: 'contact', label: 'Contact', href: 'contact.html' }, ]; return (
{CARTER.company.phone}
Discuss Project
); }; window.TrustBar = function TrustBar() { const items = [ { img: 'uploads/nic.png', alt: 'NICEIC Approved Contractor logo', top: 'NICEIC', bottom: 'Approved Contractor' }, { glyph: CARTER.svg.check, top: 'Fully Insured', bottom: 'Guaranteed Work' }, { glyph: CARTER.svg.pin, top: 'Chester · CH3', bottom: 'Local & On-Call' }, { img: 'uploads/ozev-logo.jpg', alt: 'OZEV-approved EV charger installer logo', top: 'OZEV Registered', bottom: 'EV Charger Install' }, { glyph: CARTER.svg.shield, top: '18th Edition', bottom: 'BS 7671 Compliant' }, ]; return (
{items.map((it, i) => (
{it.img ? {it.alt} : } {it.top} {it.bottom}
))}
); }; window.Footer = function Footer() { return ( ); }; // Scroll-reveal helper — adds `.in` to `.reveal` on entry window.useScrollReveal = function useScrollReveal() { useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.12 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }); }; window.PageHero = function PageHero({ section, sectionNum, title, titleAccent, subtext, ctas, children }) { return (
{window.HeroCanvas ? : null}
{section} {sectionNum} Ref · carterelec.co.uk

{title} {titleAccent && <>
{titleAccent}}

{subtext}

{ctas && (
{ctas}
)}
{children}
); }; // Mobile sticky CTA bar — visible only on mobile, hides near footer window.MobileStickyCTA = function MobileStickyCTA() { const [visible, setVisible] = useState(false); const [hidden, setHidden] = useState(false); useEffect(() => { // Show after 1.5s or on first scroll past 200px const showTimer = setTimeout(() => setVisible(true), 1500); const onScroll = () => { // Show on scroll if (window.scrollY > 200) setVisible(true); // Hide when footer is visible const footer = document.querySelector('.site-footer'); if (footer) { const rect = footer.getBoundingClientRect(); setHidden(rect.top < window.innerHeight + 80); } }; window.addEventListener('scroll', onScroll, { passive: true }); return () => { clearTimeout(showTimer); window.removeEventListener('scroll', onScroll); }; }, []); return (
Get a Free Quote Call Us
); }; // Animated stat counter window.StatNumber = function StatNumber({ target, unit = '', suffix = '', duration = 1400 }) { const [n, setN] = useState(0); const ref = useRef(null); const started = useRef(false); useEffect(() => { const io = new IntersectionObserver((entries) => { if (entries[0].isIntersecting && !started.current) { started.current = true; const start = performance.now(); const step = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setN(Math.floor(target * eased)); if (p < 1) requestAnimationFrame(step); else setN(target); }; requestAnimationFrame(step); } }, { threshold: 0.4 }); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, [target, duration]); return {n}{suffix}{unit}; };