// shared.jsx — Shared components for Ultra Dry Touch site // Exports: THEMES, Nav, Footer, WAFloat, CTABanner, ServiceHero, ServiceFeatures, RelatedServices, Stars const THEMES = { blue: { navy: '#0c1f45', navyDark: '#081430', accent: '#1a7dc4', accentHover: '#1568a8', accentLight: '#e8f3fb', cta: '#0097d6', ctaText: '#fff', star: '#f5a623' }, teal: { navy: '#0d2f2f', navyDark: '#071e1e', accent: '#00a887', accentHover: '#008a6f', accentLight: '#e0f5f1', cta: '#00c49a', ctaText: '#fff', star: '#f5a623' }, slate: { navy: '#1e2c44', navyDark: '#111b2c', accent: '#4f6af0', accentHover: '#3a55e8', accentLight: '#eef0fe', cta: '#4f6af0', ctaText: '#fff', star: '#f5a623' } }; function Stars({ color = '#f5a623', size = 16 }) { return ( {[...Array(5)].map((_, i) => ( ))} ); } // ─── Nav ────────────────────────────────────────────────────────────────────── function SharedNav({ theme, currentPage }) { const [open, setOpen] = React.useState(false); const [scrolled, setScrolled] = React.useState(false); const [svcOpen, setSvcOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const services = [ { label: 'Dry Carpet Cleaning', href: '/carpetcleaning' }, { label: 'Hard Floor Cleaning', href: '/hardfloorcleaning' }, { label: 'Upholstery Cleaning', href: '/upholsterycleaning' }, { label: 'Leather Cleaning', href: '/leathercleaning' }, { label: 'Mattress Cleaning', href: '/mattresscleaning' }, { label: 'Commercial Cleaning', href: '/commercialcleaning' }, { label: 'End of Tenancy Clean', href: '/endoftenancyclean' }, ]; const navStyle = { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100, background: scrolled ? 'rgba(255,255,255,0.97)' : '#fff', borderBottom: scrolled ? '1px solid #e8ecf2' : '1px solid transparent', backdropFilter: 'blur(12px)', transition: 'all 0.3s ease', boxShadow: scrolled ? '0 2px 20px rgba(0,0,0,0.08)' : 'none', }; const navLink = (label, href, active) => ( { if (!active) { e.target.style.background = theme.accentLight; e.target.style.color = theme.accent; } }} onMouseLeave={e => { if (!active) { e.target.style.background = 'transparent'; e.target.style.color = '#3a4a60'; } }}> {label} ); return (
Ultra Dry Touch
Ultra Dry Touch LTD.
North & West Yorkshire
0800 193 2026
{open && (
{['Home', 'Services', 'About', 'Contact'].map(label => ( setOpen(false)} style={{ display: 'block', padding: '12px 16px', color: '#3a4a60', fontWeight: 600, fontSize: 15, borderRadius: 8 }}>{label} ))}
)}
); } // ─── Service Hero ──────────────────────────────────────────────────────────── function ServiceHero({ theme, title, subtitle, image }) { return (
Back to Home

{title}

{subtitle}

); } // ─── Service Content Section ───────────────────────────────────────────────── function ServiceContent({ theme, heading, text, features, image }) { return (

{heading}

{text}

{features.map((f, i) => (
{f}
))}
{heading}
); } // ─── Service FAQ ────────────────────────────────────────────────────────────── function ServiceFAQ({ theme, faqs }) { const [open, setOpen] = React.useState(null); return (

Frequently Asked Questions

{faqs.map((item, i) => (
{open === i &&
{item.a}
}
))}
); } // ─── CTA Banner (shared) ───────────────────────────────────────────────────── function SharedCTABanner({ theme }) { return (

Ready for cleaner floors?

Call us for a fast, friendly quote. Mon–Sat, 8am–6pm.

0800 193 2026 Email Us
); } // ─── Related Services ──────────────────────────────────────────────────────── function RelatedServices({ theme, exclude }) { const all = [ { title: 'Dry Carpet Cleaning', img: '/img/svc-carpet.jpg', href: '/carpetcleaning' }, { title: 'Hard Floor Cleaning', img: '/img/svc-hardfloor.jpg', href: '/hardfloorcleaning' }, { title: 'Upholstery Cleaning', img: '/img/svc-upholstery.jpg', href: '/upholsterycleaning' }, { title: 'Leather Cleaning', img: '/img/service-leather.jpg', href: '/leathercleaning' }, { title: 'Mattress Cleaning', img: '/img/service-mattress.jpg', href: '/mattresscleaning' }, { title: 'Commercial Cleaning', img: '/img/service-commercial.jpg', href: '/commercialcleaning' }, { title: 'End of Tenancy Clean', img: '/img/end_of_tenancy_clean.webp', href: '/endoftenancyclean' }, ]; const filtered = all.filter(s => s.title !== exclude).slice(0, 3); return (

Other Services

{filtered.map(s => ( { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 16px 40px rgba(0,0,0,0.12)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)'; }}> {s.title}
{s.title}
))}
); } // ─── Footer ────────────────────────────────────────────────────────────────── function SharedFooter({ theme }) { return ( ); } // ─── WhatsApp Float ────────────────────────────────────────────────────────── function WAFloat() { return ( e.currentTarget.style.transform = 'scale(1.1)'} onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}> ); } // Export all to window Object.assign(window, { THEMES, Stars, SharedNav, ServiceHero, ServiceContent, ServiceFAQ, SharedCTABanner, RelatedServices, SharedFooter, WAFloat });