// Shared React components for Saela landing pages const { useState, useEffect, useRef } = React; // ============== Saela Logo (inline SVG) ============== function SaelaLogo({ height = 28, color }) { return ( ); } // ============== Stars ============== function Stars({ n = 5, color = "#EA9230" }) { return ( {Array.from({ length: n }).map((_, i) => )} ); } // ============== Top Nav ============== function TopNav() { const navItems = [ { label: "Residential", href: "#" }, { label: "Commercial", href: "#" }, { label: "Services", href: "#pests" }, { label: "Pricing", href: "#" }, { label: "About", href: "#why" }, { label: "Reviews", href: "#reviews" }, { label: "Contact", href: "#quote" }, ]; const [mobileOpen, setMobileOpen] = useState(false); return (
Get a Free Inspection
); } // ============== Breadcrumb ============== function Breadcrumb({ trail }) { return (
{trail.map((t, i) => ( {i > 0 && /} {t.href ? {t.label} : {t.label}} ))}
); } // ============== Multi-step Lead Form ============== function LeadForm({ cityName, phone, phoneRaw, variant = "light" }) { const [step, setStep] = useState(0); const [data, setData] = useState({ pest: null, urgency: null, name: "", phone: "", zip: "" }); const [submitted, setSubmitted] = useState(false); const totalSteps = 3; const progress = (step + (submitted ? 1 : 0)) / totalSteps * 100; const isDark = variant === "dark"; const bg = isDark ? "#26453D" : "#FFFFFF"; const fg = isDark ? "#F5F5EB" : "#26453D"; const muted = isDark ? "rgba(245,245,235,0.7)" : "rgba(38,69,61,0.6)"; const border = isDark ? "rgba(245,245,235,0.18)" : "rgba(38,69,61,0.14)"; const inputBg = isDark ? "rgba(245,245,235,0.06)" : "#F5F5EB"; const next = () => setStep((s) => Math.min(s + 1, totalSteps - 1)); const back = () => setStep((s) => Math.max(s - 1, 0)); const submit = (e) => { e.preventDefault(); setSubmitted(true); }; const pests = [ { id: "ants", label: "Ants" }, { id: "wasps", label: "Wasps" }, { id: "spiders", label: "Spiders" }, { id: "rodents", label: "Rodents" }, { id: "roaches", label: "Roaches" }, { id: "bedbugs", label: "Bed bugs" }, { id: "other", label: "Other" }, { id: "unsure", label: "Not sure" }, ]; const urgency = [ { id: "today", label: "Today / ASAP" }, { id: "week", label: "This week" }, { id: "month", label: "Within a month" }, { id: "planning", label: "Planning ahead" }, ]; const inpStyle = { padding: "12px 14px", borderRadius: 8, border: "1px solid " + border, background: inputBg, color: fg, fontSize: 14, fontFamily: "Inter, sans-serif", outline: "none", width: "100%", boxSizing: "border-box" }; if (submitted) { return (
Thanks — we'll call within 15 minutes.

A {cityName} inspector will reach out at {data.phone || "your number"} to confirm the inspection window.

); } return (
Get pricing · Step {step + 1} of {totalSteps}
~30 sec
{step === 0 && (
What's the pest?
{pests.map((p) => { var sel = data.pest === p.id; return ( ); })}
)} {step === 1 && (
How soon?
{urgency.map((u) => { var sel = data.urgency === u.id; return ( ); })}
)} {step === 2 && (
Where do we send the quote?
setData({ ...data, name: e.target.value })} style={inpStyle} /> setData({ ...data, phone: e.target.value })} style={inpStyle} /> setData({ ...data, zip: e.target.value })} style={inpStyle} />
By submitting you agree to receive a call from a Saela {cityName} inspector.
)}
); } // ============== Accordion ============== function Accordion({ items, variant = "light" }) { const [open, setOpen] = useState(0); const isDark = variant === "dark"; const fg = isDark ? "#F5F5EB" : "#26453D"; const border = isDark ? "rgba(245,245,235,0.16)" : "rgba(38,69,61,0.14)"; const muted = isDark ? "rgba(245,245,235,0.72)" : "rgba(38,69,61,0.72)"; return (
{items.map((item, i) => { var isOpen = open === i; return (
{isOpen &&
{item.a || item.body}
}
); })}
); } // ============== Placeholder Image ============== function UPlaceholder({ label, ratio = "16/9", tone = "sand" }) { var p = { sand: { bg: "#F5F5EB", stripe: "rgba(38,69,61,0.06)", text: "rgba(38,69,61,0.55)" }, dark: { bg: "rgba(245,245,235,0.06)", stripe: "rgba(245,245,235,0.04)", text: "rgba(245,245,235,0.65)" }, }[tone] || { bg: "#F5F5EB", stripe: "rgba(38,69,61,0.06)", text: "rgba(38,69,61,0.55)" }; return (
{label}
); } // ============== Check mark (for comparison table) ============== function Check({ on }) { if (on) return ✓; return ; } // ============== Footer ============== function Footer() { return ( ); }