// Shared utilities, icons, placeholder visuals for both variations const PHONE_DISPLAY = "(205) 452-9543"; const PHONE_HREF = "tel:+12054529543"; const SERVICE_AREAS = [ "Birmingham", "Hoover", "Vestavia", "Mountain Brook", "Homewood", "Trussville", "Pinson", "Gardendale", "Fultondale", "Irondale", "Pelham", "Alabaster", "Helena", "Bessemer", "McCalla", "Center Point", "Chelsea", "Leeds", "Moody" ]; // ---------- Countdown hook ---------- function useCountdown() { const [t, setT] = React.useState(() => { const stored = parseInt(localStorage.getItem("xs-cd-end") || "0", 10); if (stored && stored > Date.now()) return stored; const end = Date.now() + 24 * 3600 * 1000; localStorage.setItem("xs-cd-end", String(end)); return end; }); const [now, setNow] = React.useState(Date.now()); React.useEffect(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []); let diff = Math.max(0, t - now); const h = Math.floor(diff / 3600000); diff -= h * 3600000; const m = Math.floor(diff / 60000); diff -= m * 60000; const s = Math.floor(diff / 1000); return { h: String(h).padStart(2, "0"), m: String(m).padStart(2, "0"), s: String(s).padStart(2, "0"), }; } // ---------- Before/After slider ---------- function BeforeAfter({ height = 480, primary = "#00C6F3", round = 24 }) { const ref = React.useRef(null); const [pos, setPos] = React.useState(54); const [drag, setDrag] = React.useState(false); const handleMove = (clientX) => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); const p = Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100)); setPos(p); }; React.useEffect(() => { const up = () => setDrag(false); const move = (e) => { if (!drag) return; const x = e.touches ? e.touches[0].clientX : e.clientX; handleMove(x); }; window.addEventListener("mouseup", up); window.addEventListener("touchend", up); window.addEventListener("mousemove", move); window.addEventListener("touchmove", move); return () => { window.removeEventListener("mouseup", up); window.removeEventListener("touchend", up); window.removeEventListener("mousemove", move); window.removeEventListener("touchmove", move); }; }, [drag]); return (
{ setDrag(true); handleMove(e.clientX); }} onTouchStart={(e) => { setDrag(true); handleMove(e.touches[0].clientX); }} > {/* BEFORE - dingy carpet */} {/* AFTER - clean carpet, clipped */}
{/* Labels */}
BEFORE
AFTER
{/* Divider line + handle */}
); } function DirtyCarpet() { return ( {/* Stains */} {/* footprint hints */} ); } function CleanCarpet({ primary = "#00C6F3" }) { return ( {/* Vacuum tracks */} {[0,1,2,3,4,5,6,7].map(i => ( ))} {/* Sparkles */} ); } // ---------- Stars ---------- function Stars({ n = 5, size = 16, color = "#FFB800" }) { return ( {Array.from({ length: n }).map((_, i) => ( ))} ); } // ---------- Icons (line, geometric) ---------- const Icon = ({ name, size = 28, color = "currentColor", strokeWidth = 1.8 }) => { const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "shield": return ; case "leaf": return ; case "clock": return ; case "badge": return ; case "phone": return ; case "calendar": return ; case "truck": return ; case "spray": return ; case "check": return ; case "arrow": return ; case "pin": return ; case "plus": return ; case "minus": return ; case "google": return ; default: return null; } }; // ---------- Service area map (stylized SVG, not real geography) ---------- function ServiceMap({ primary = "#00C6F3" }) { // arranged loosely around a Birmingham core const dots = [ { x: 50, y: 50, label: "Birmingham", primary: true, r: 14 }, { x: 38, y: 38, label: "Fultondale", r: 7 }, { x: 30, y: 30, label: "Gardendale", r: 7 }, { x: 25, y: 22, label: "Pinson", r: 6 }, { x: 65, y: 28, label: "Trussville", r: 8 }, { x: 78, y: 38, label: "Leeds", r: 7 }, { x: 82, y: 48, label: "Moody", r: 6 }, { x: 70, y: 50, label: "Irondale", r: 7 }, { x: 62, y: 60, label: "Mountain Brook", r: 8 }, { x: 55, y: 70, label: "Homewood", r: 8 }, { x: 48, y: 78, label: "Vestavia", r: 8 }, { x: 55, y: 86, label: "Hoover", r: 9 }, { x: 70, y: 80, label: "Chelsea", r: 7 }, { x: 68, y: 90, label: "Pelham", r: 7 }, { x: 60, y: 95, label: "Helena", r: 7 }, { x: 35, y: 88, label: "Bessemer", r: 8 }, { x: 22, y: 80, label: "McCalla", r: 7 }, { x: 40, y: 60, label: "Center Point", r: 7 }, { x: 48, y: 92, label: "Alabaster", r: 7 }, ]; return (
{/* abstract roads */} {/* coverage halo */} {dots.map((d, i) => (
{d.label}
))}
); } // ---------- Exit-intent ribbon ---------- function ExitRibbon({ primary, accent = "#FF5B1F" }) { const [shown, setShown] = React.useState(false); const [closed, setClosed] = React.useState(false); React.useEffect(() => { const onMove = (e) => { if (e.clientY < 8 && !closed) setShown(true); }; document.addEventListener("mouseleave", onMove); document.addEventListener("mousemove", onMove); return () => { document.removeEventListener("mouseleave", onMove); document.removeEventListener("mousemove", onMove); }; }, [closed]); if (!shown || closed) return null; return (
WAIT! Don't leave without claiming your 2 rooms for $120 deal. setShown(false)} style={{ background: accent, color: "#fff", padding: "8px 18px", borderRadius: 6, textDecoration: "none", fontWeight: 600, }}>Claim it now →
); } Object.assign(window, { PHONE_DISPLAY, PHONE_HREF, SERVICE_AREAS, useCountdown, BeforeAfter, Stars, Icon, ServiceMap, ExitRibbon, });