/* global React, GS_SERVICES, GS_REVIEWS, GS_ZIPS, GS_FAQ, Icon, Button, Eyebrow, Chip, TierPill, Price, SteelPhoto, Logo, Stars, Section, ServiceCard */ const { useState, useEffect, useMemo } = React; // ================= HOME ================= function HomePage({ nav }) { return ( <> {/* HERO */}
{window.HP_REGION || window.HP_CITY || "Metro Area"}

Insured handyman.
Same‑day.

{window.HP_ABOUT_BIO || `Professional handyman serving ${window.HP_REGION || window.HP_CITY}. Book a 90-minute visit. We arrive with the tools and a plan.`}

4.97 · 284 jobs
Open · 2:30 PM today
Today
10:00 · 94301 · TV
12:30 · 94025 · Drywall
14:30 · open slot
{/* TRUST STRIP */}
{[ ["shield-check", window.HP_LICENSE_LINE || "Fully Insured & Bonded"], ["clock", "Same-day response"], ["badge-check", window.HP_EXEMPTION_LINE ? window.HP_EXEMPTION_LINE.split("(")[0].trim() : "AB 2622 exempt"], ["languages", window.HP_LANGUAGES || "EN"], ["map-pin", `${(window.GS_ZIPS||[]).length} ZIP codes`], ].map(([ic, t]) => (
{t}
))}
{/* SERVICES PREVIEW */}
What I do

Eighteen services. One standard of finish.

{GS_SERVICES.slice(0, 6).map(s => nav("services")} />)}
{/* PROMISE */}
The promise

White glove is a posture, not a slogan.

I arrive on time. I wear covers over my shoes. I clean up after the work. I quote the price before I start. If something is outside my scope, I tell you — and I refer you to someone I would hire for my own family.

{[ ["watch", "On-time window", "20-minute heads-up by text."], ["sparkles", "Cleanup included", "No dust, no debris, nothing left behind."], ["receipt", "Priced up front", "Quote confirmed before work begins."], ["phone-call", "Real phone, real human", "No call trees, no bots."], ].map(([ic, t, d]) => (
{t}
{d}
))}
{/* AREAS TEASER */}
Coverage

{(window.GS_ZIPS||[]).length} ZIP codes across {window.HP_REGION || window.HP_CITY || "the metro area"}.

{GS_ZIPS.map(z => ( {z.zip} ))}
Same-day available · Scheduled visits only
{/* REVIEWS TEASER */}
Verified reviews

From your neighbors.

{GS_REVIEWS.slice(0, 3).map((r, i) => (

“{r.text}”

{r.name}
{r.zip} · {r.city}
))}
); } // ================= SERVICES ================= function ServicesPage() { const [tier, setTier] = useState("All"); const tiers = ["All", "Essential", "Standard", "Premium"]; const list = useMemo(() => tier === "All" ? GS_SERVICES : GS_SERVICES.filter(s => s.tier === tier), [tier]); return ( <>
Services

Eighteen services. One standard of finish.

Every job capped at $1,000 so I can serve you under CA AB 2622. Anything larger, I refer out to someone I would hire for my own family.

{tiers.map(t => ( ))}
{list.map(s => )}
); } // ================= ABOUT ================= function AboutPage() { return ( <>
About

One van.
One standard.

{window.HP_ABOUT_BIO || "Professional handyman service. Quality work, on time, every time."}

{window.HP_BUSINESS_NAME || "Grace Services"} — trusted by homeowners.

Fifteen years in residential finish work, from Burlingame to Cupertino. Licensed in California. Insured to $1M. I speak English, Russian, and Spanish — useful when a job has three generations of family on the scene.

I cap every project at $1,000 so I can legally operate as an AB 2622-exempt handyman. It keeps the work small, specific, and finished the same day. That’s a feature, not a constraint.

{[ ["2019", "Founded"], ["284", "Verified jobs"], ["36", "ZIP codes served"], ["EN · RU · ES", "Languages"], ].map(([k, v]) => (
{k}
{v}
))}
); } // ================= GALLERY ================= function GalleryPage() { return ( <>
Gallery

Before. After.

Same framing, same light. The work speaks for itself.

{GS_SERVICES.slice(0, 6).map((s, i) => (
{s.cat}
{s.title}
{(window.GS_ZIPS||[])[i]?.zip || ""} · {(window.GS_ZIPS||[])[i]?.city || ""}
))}
); } // ================= REVIEWS ================= function ReviewsPage() { return ( <>
Reviews

Word from the block.

4.97
284 verified jobs
{GS_REVIEWS.map((r, i) => (

“{r.text}”

{r.name}
{r.zip} · {r.city}
{r.date}
))}
); } // ================= ZONE MAP ================= function ZoneMap() { useEffect(() => { if (!window.L) return; const container = document.getElementById("hp-zone-map"); if (!container || container._leaflet_id) return; // COORDS for both SAC metro and SF Peninsula const COORDS = { // Sacramento metro "Sacramento":[38.5816,-121.4944],"Carmichael":[38.6279,-121.3293], "Citrus Heights":[38.7071,-121.2810],"Rancho Cordova":[38.5890,-121.3024], "Roseville":[38.7521,-121.2879],"Folsom":[38.6780,-121.1761], "Davis":[38.5449,-121.7405],"North Highlands":[38.6657,-121.3729], "Woodland":[38.6785,-121.7733],"Rocklin":[38.7907,-121.2357], "Fair Oaks":[38.6493,-121.2726],"Antelope":[38.7149,-121.3588], "Orangevale":[38.6832,-121.2260],"Granite Bay":[38.7671,-121.1786], "El Dorado Hills":[38.6768,-121.0633],"Loomis":[38.8196,-121.1933], "Elverta":[38.7282,-121.4697], // SF Peninsula + South Bay "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] }; // Auto-center: compute from known COORDS in GS_ZIPS const cities = [...new Set((window.GS_ZIPS || []).map(z => z.city))].filter(c => COORDS[c]); const defaultCenter = cities.length ? [cities.reduce((s,c)=>s+COORDS[c][0],0)/cities.length, cities.reduce((s,c)=>s+COORDS[c][1],0)/cities.length] : [37.43, -122.14]; const map = L.map("hp-zone-map", { zoomControl: true, scrollWheelZoom: false }) .setView(defaultCenter, 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 var(--border-subtle);font:13px/1.9 system-ui,sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.08)"; d.innerHTML = '● Same-day   ● Scheduled'; return d; }; leg.addTo(map); } function addFallback() { 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 + '
● ' + (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"); const layer = L.geoJSON(data, { style: f => { const sd = SAME_DAY.has(f.properties.ZCTA5); return { color: sd ? "#1A7A52" : "#7A8A96", fillColor: sd ? "#2D9A6A" : "#94A0AD", fillOpacity: 0.4, weight: 1.5 }; }, onEachFeature: (f, lyr) => { const z = f.properties.ZCTA5; const sd = SAME_DAY.has(z); const entry = (window.GS_ZIPS || []).find(x => x.zip === z) || {}; lyr.bindPopup('ZIP ' + z + '' + (entry.city ? '
' + entry.city : '') + '
● ' + (sd ? 'Same-day available' : 'Scheduled visits') + ''); } }).addTo(map); map.fitBounds(layer.getBounds(), { padding: [20, 20] }); addLegend(); }) .catch(() => { addFallback(); addLegend(); }); }, []); return
; }
Coverage Map

{window.HP_REGION || "Metro Area"}

{(window.GS_ZIPS || []).length} ZIP codes · ● Same-day available · ● Scheduled visits

// ================= AREAS ================= function AreasPage() { const grouped = useMemo(() => { const m = {}; GS_ZIPS.forEach(z => { (m[z.city] ||= []).push(z); }); return m; }, []); return ( <>
Coverage

{(window.GS_ZIPS||[]).length} ZIP codes. One van. Routed daily.

Green dots are reachable same-day when booked before noon. Grey dots are scheduled visits — usually within two business days.

{Object.entries(grouped).map(([city, zips]) => (
{city}
{zips.length} ZIP
{zips.map(z => (
{z.zip} {z.same ? "Same-day" : "Scheduled"}
))}
))}
); } // ================= FAQ ================= function FAQPage() { const [open, setOpen] = useState(0); return ( <>
Frequently asked

The short, honest answers.

{GS_FAQ.map((f, i) => { const isOpen = open === i; return (
); })}
); } // ================= CONTACT ================= function ContactPage() { const [sent, setSent] = useState(false); return ( <>
Contact & book

Call, or tell me what you need.

Fastest route is the phone. Form works too — I reply within an hour during business hours.

{window.HP_PHONE || ""}
Mon–Sat · 7am–7pm · EN · RU · ES
{window.HP_LICENSE_LINE && <>{window.HP_LICENSE_LINE}·}{window.HP_INSURANCE_LINE && <>{window.HP_INSURANCE_LINE}}
{ e.preventDefault(); setSent(true); }} style={{ background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: 14, padding: 32, boxShadow: "var(--shadow-sm)" }}> {sent ? (

Got it.

I’ll text you within an hour.

) : (

No spam. No follow-ups after the job unless you want a receipt.

)}
); } const FieldRow = ({ children }) =>
{children}
; const Field = ({ label, placeholder, mono, textarea, select, options = [], name, autoComplete, required, type, ...rest }) => { const baseStyle = { width: "100%", boxSizing: "border-box", fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)", fontSize: 15, padding: "11px 14px", border: "1px solid var(--border-default)", borderRadius: 8, background: "#fff", color: "var(--fg-1)", outline: "none", }; const commonProps = { name, autoComplete, required, ...(rest["aria-required"] ? { "aria-required": rest["aria-required"] } : {}) }; return (