// Service picker — full-screen overlay where business owner picks their trade.
// 170+ services across 21 categories, with search, featured trades, and live preview.
function ServicePicker({ open, onPick, onClose, current }) {
const [query, setQuery] = useState('');
const [cat, setCat] = useState('all');
const [hover, setHover] = useState(null);
const inputRef = useRef(null);
useEffect(() => {
if (open && inputRef.current) {
setTimeout(() => inputRef.current?.focus(), 200);
}
}, [open]);
useEffect(() => {
if (!open) return;
const onKey = (e) => {
if (e.key === 'Escape' && current) onClose && onClose();
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [open, current, onClose]);
const filtered = useMemo(() => {
const q = query.trim().toLowerCase();
return SERVICE_LIST.filter(s => {
if (cat !== 'all' && s.cat !== cat) return false;
if (!q) return true;
return s.name.toLowerCase().includes(q);
});
}, [query, cat]);
const grouped = useMemo(() => {
const g = {};
filtered.forEach(s => { (g[s.cat] ||= []).push(s); });
return g;
}, [filtered]);
// Featured trades — shown at top when no search/category active
const FEATURED = ['Roofing','HVAC','Solar Installation','Plumbing','Electrical','Pool Service','Kitchen Remodeling','Painting','Pest Control','Landscaping','Cleaning Services','Tree Service'];
if (!open) return null;
const showFeatured = !query && cat === 'all';
const hoverCfg = hover ? getServiceConfig(hover) : null;
return (
{/* HEADER */}
{/* faint dot grid */}
Operator install · step 1 of 1
What does your business sell?
Pick your trade — the estimate engine, AR walkthrough, custom fields, qualifier chat, and price model will reshape around it before you finish reading this sentence.