/* global React, Icon, Button, Eyebrow, Chip, Logo */ const { useState, useEffect } = React; const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth" }); }; // ================= NAV ================= function Nav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const h = () => setScrolled(window.scrollY > 20); window.addEventListener("scroll", h); return () => window.removeEventListener("scroll", h); }, []); useEffect(() => { const close = (e) => { document.querySelectorAll("details[data-nav]").forEach(d => { if (!d.contains(e.target)) d.removeAttribute("open"); }); }; document.addEventListener("click", close); return () => document.removeEventListener("click", close); }, []); const LINKS = [ {t:"scroll", id:"hero", label:"Home"}, {t:"dropdown", label:"Services", items:[ ["/services/tv-mounting/","TV Mounting"], ["/services/furniture-assembly/","Furniture Assembly"], ["/services/wall-drywall/","Wall & Drywall"], ["/services/fixtures-hardware/","Fixtures & Hardware"], ["/services/smart-home-lighting/","Smart Home & Lighting"], ["/services/faucet-toilet-repair/","Faucet & Toilet Repair"], ]}, {t:"scroll", id:"about", label:"About"}, {t:"scroll", id:"reviews", label:"Reviews"}, {t:"dropdown", label:"Areas", items:[ ["/areas/palo-alto/","Palo Alto"], ["/areas/menlo-park/","Menlo Park"], ["/areas/mountain-view/","Mountain View"], ["/areas/sunnyvale/","Sunnyvale"], ["/areas/cupertino/","Cupertino"], ["/areas/san-mateo/","San Mateo & Foster City"], ["/areas/burlingame/","Burlingame & Millbrae"], ["/areas/redwood-city/","Redwood City & San Carlos"], ["/areas/san-jose-south/","South San Jose"], ]}, {t:"scroll", id:"contact", label:"Contact"}, ]; return (
(669) 280-5858
); } // ================= HERO ================= function Hero() { return (
SF Peninsula · South Bay · Same-day available

White Glove Handyman
for the Silicon Valley Home

Insured · Same-day
Mon–Wed, Fri–Sat · 8 AM–8 PM · Closed Thu & Sun

(669) 280-5858
); } // ================= TRUST BAR ================= function TrustBar() { const items = [ { icon: "star", text: "4.97 ★ Rating" }, { icon: "briefcase", text: "1,000+ Projects" }, { icon: "shield-check", text: "Insured · $1M GL" }, ]; return (
{items.map((item, i) => (
{item.text}
))}
); } // ================= SERVICES ================= function ServiceCard({ s }) { const [open, setOpen] = React.useState(false); const tiers = { A: { color: "#1A7A52", bg: "#E8F5EF" }, B: { color: "#1E5DB8", bg: "#E8F2FF" }, C: { color: "#7A5716", bg: "#FAF3E4" }, }; const t = tiers[s.tier] || tiers.A; return (
{s.title}
{s.blurb}
{s.subs && s.subs.length > 0 && (
{open && ( )}
)}
from ${s.price} {s.unit}
); } function ServicesSection() { return (
Services

What we fix, build & install

{(window.GS_SERVICES || []).map(s => )}
All visits capped at $1,000 · After 90 min: +$40–$67/30 min (rate varies by service) · Materials not included
); } // ================= ABOUT ================= function AboutSection() { const stats = [["1,000+","Projects"],["4.97★","Avg Rating"],["2023","Founded"],["$1M","GL Insurance"]]; return (
About

One person. Full accountability.

Grace Services was founded in 2023 to fill a gap in the Peninsula market: a single skilled professional who shows up on time, communicates clearly, and takes full responsibility for the result.

GL $1M · per occ. CA handyman exempt (§7048.5, under $1,000 cap)
{stats.map(([val, lbl]) => (
{val}
{lbl}
))}
); } // ================= REVIEWS ================= function ReviewsSection() { return (
Reviews

What clients say

{(window.GS_REVIEWS || []).map((r, i) => (
{Array.from({length: r.stars}).map((_, j) => ( ★ ))}

“{r.text}”

{r.name}
{r.city} · {r.zip}
{r.date}
))}
); } // ================= ZONE MAP ================= function ZoneMap() { useEffect(() => { if (!window.L) return; const container = document.getElementById("gs-zone-map"); if (!container || container._leaflet_id) return; const map = L.map("gs-zone-map", { zoomControl: true, scrollWheelZoom: false }) .setView([37.43, -122.14], 10); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "\u00a9 OpenStreetMap contributors", maxZoom: 14 }).addTo(map); const SAME_DAY = new Set((window.GS_ZIPS || []).filter(z => z.same).map(z => z.zip)); function addLegend() { const leg = L.control({ position: "bottomright" }); leg.onAdd = () => { const d = L.DomUtil.create("div"); d.style.cssText = "background:#fff;padding:8px 12px;border-radius:8px;border:1px solid #e5e8ec;font:13px/1.9 -apple-system,sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.08)"; d.innerHTML = '\u25cf Same-day   \u25cf Scheduled'; return d; }; leg.addTo(map); } function addCityFallback() { const COORDS = {"Palo Alto":[37.441,-122.143],"Menlo Park":[37.454,-122.182],"Atherton":[37.462,-122.197],"Los Altos":[37.385,-122.114],"Mountain View":[37.386,-122.083],"Sunnyvale":[37.369,-122.038],"Cupertino":[37.323,-122.032],"San Mateo":[37.563,-122.323],"Foster City":[37.555,-122.268],"Burlingame":[37.584,-122.366],"Millbrae":[37.600,-122.387],"Redwood City":[37.485,-122.236],"San Carlos":[37.507,-122.261],"Belmont":[37.521,-122.276],"Portola Valley":[37.375,-122.218],"Saratoga":[37.264,-122.023],"Los Gatos":[37.226,-121.982],"Campbell":[37.287,-121.950],"San Jose SW":[37.234,-121.912]}; const seen = new Set(); (window.GS_ZIPS || []).forEach(z => { if (seen.has(z.city) || !COORDS[z.city]) return; seen.add(z.city); const col = z.same ? "#2D9A6A" : "#94A0AD"; L.circleMarker(COORDS[z.city], { radius: 9, color: "#fff", weight: 2, fillColor: col, fillOpacity: 0.9 }) .addTo(map) .bindPopup('' + z.city + '
\u25cf ' + (z.same ? 'Same-day' : 'Scheduled') + ''); }); } const zips = (window.GS_ZIPS || []).map(z => z.zip); const where = "ZCTA5 IN (" + zips.map(z => "'" + z + "'").join(",") + ")"; const url = "https://tigerweb.geo.census.gov/arcgis/rest/services/TIGERweb/PUMA_TAD_TAZ_UGA_ZCTA/MapServer/1/query?" + "where=" + encodeURIComponent(where) + "&outFields=ZCTA5&f=geojson&returnGeometry=true&maxAllowableOffset=0.0001"; fetch(url) .then(r => { if (!r.ok) throw new Error("http " + r.status); return r.json(); }) .then(data => { if (!data.features || !data.features.length) throw new Error("no features"); L.geoJSON(data, { style: f => { const z = f.properties.ZCTA5; const sd = SAME_DAY.has(z); return { color: sd ? "#1A7A52" : "#7A8A96", fillColor: sd ? "#2D9A6A" : "#94A0AD", fillOpacity: 0.4, weight: 1.5 }; }, onEachFeature: (f, layer) => { const z = f.properties.ZCTA5; const sd = SAME_DAY.has(z); const entry = (window.GS_ZIPS || []).find(x => x.zip === z) || {}; layer.bindPopup('ZIP ' + z + '' + (entry.city ? '
' + entry.city : '') + '
\u25cf ' + (sd ? 'Same-day available' : 'Scheduled visits') + ''); } }).addTo(map); addLegend(); }) .catch(() => { addCityFallback(); addLegend(); }); }, []); return (
); } function ZonesSection() { return (
Service Area

SF Peninsula & South Bay

36 ZIP codes · Green = same-day available · Grey = scheduled visits

{(window.GS_ZIPS || []).map(z => (
{z.zip}
{z.city}
))}
); } // ================= CTA BANNER ================= function CTABanner() { return (

Ready to schedule your visit?

Same-day slots Mon, Tue, Wed, Fri, Sat. Call or book online.

Call Now
); } // ================= CONTACT ================= function ContactSection() { const [form, setForm] = useState({ name: "", phone: "", zip: "", service: "", message: "" }); const [sent, setSent] = useState(false); const [sending, setSending] = useState(false); const [err, setErr] = useState(""); const handle = e => setForm(prev => ({ ...prev, [e.target.name]: e.target.value })); const submit = async (ev) => { ev.preventDefault(); if (!form.phone) { setErr("Phone is required."); return; } setSending(true); setErr(""); try { const resp = await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...form, source: "website" }), }); if (resp.ok) { setSent(true); } else { setErr("Could not send. Please call us directly."); } } catch { setErr("Network error. Please call (669)\u00a0280-5858."); } finally { setSending(false); } }; const inp = { width: "100%", padding: "11px 14px", fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--fg-1)", background: "#fff", border: "1px solid var(--gs-hairline-strong)", borderRadius: 8, outline: "none", boxSizing: "border-box" }; return (
Contact

Book a visit

{sent ? (
✅ Request received! We’ll confirm your slot within 2 hours.
) : (