// Shared atoms: phone frame, status bar, icons, niches data, lucide-style svg icons. // Globals exposed to window for cross-file use. const { useState, useEffect, useRef, useMemo } = React; /* ============== ICONS (inline SVG, lucide-style stroke 2) ============== */ const Icon = ({ d, size = 20, stroke = 'currentColor', fill = 'none', sw = 1.8, children, style }) => ( {d ? : children} ); const IconCamera = (p) => ; const IconBolt = (p) => ; const IconPin = (p) => ; const IconChat = (p) => ; const IconStar = (p) => ; const IconCheck = (p) => ; const IconArrow = (p) => ; const IconShield = (p) => ; const IconClock = (p) => ; const IconReceipt= (p) => ; const IconPlus = (p) => ; const IconQuestion = (p) => ; const IconHome = (p) => ; const IconUser = (p) => ; const IconHeart = (p) => ; /* Niche emoji-icons replaced with inline glyphs (no emoji per design system) */ const NicheGlyphs = { plumbing: (s=22, c='currentColor') => , hvac: (s=22, c='currentColor') => , electrical:(s=22, c='currentColor') => , roofing: (s=22, c='currentColor') => , painting: (s=22, c='currentColor') => , cleaning: (s=22, c='currentColor') => , lawn: (s=22, c='currentColor') => , pest: (s=22, c='currentColor') => , handyman: (s=22, c='currentColor') => , appliance: (s=22, c='currentColor') => , garage: (s=22, c='currentColor') => , locksmith: (s=22, c='currentColor') => , }; /* ============== NICHE DATA ============== */ const NICHES = [ { id: 'plumbing', name: 'Plumbing', ex: 'Leaky faucet', price: '$165 – $340', avg: '~$240' }, { id: 'hvac', name: 'HVAC', ex: 'AC not cooling', price: '$220 – $680', avg: '~$420' }, { id: 'electrical', name: 'Electrical', ex: 'Outlet not working', price: '$140 – $380', avg: '~$210' }, { id: 'roofing', name: 'Roofing', ex: 'Missing shingles', price: '$380 – $1.2k', avg: '~$640' }, { id: 'painting', name: 'Painting', ex: 'Repaint living room', price: '$420 – $1.8k', avg: '~$880' }, { id: 'cleaning', name: 'Cleaning', ex: 'Deep clean 3BR', price: '$180 – $360', avg: '~$245' }, { id: 'lawn', name: 'Lawn & Yard', ex: 'Mow + edge', price: '$60 – $180', avg: '~$95' }, { id: 'pest', name: 'Pest Control', ex: 'Ant treatment', price: '$120 – $280', avg: '~$170' }, { id: 'handyman', name: 'Handyman', ex: 'Mount 4 shelves', price: '$110 – $260', avg: '~$160' }, { id: 'appliance', name: 'Appliance', ex: 'Dishwasher repair', price: '$180 – $420', avg: '~$260' }, { id: 'garage', name: 'Garage Door', ex: 'Spring replacement', price: '$240 – $480', avg: '~$340' }, { id: 'locksmith', name: 'Locksmith', ex: 'Rekey 3 locks', price: '$90 – $210', avg: '~$135' }, ]; /* ============== PHONE FRAME ============== */ const Phone = ({ width = 320, height = 660, statusDark = false, time = '9:41', children, style, screenStyle, notch = true }) => (
{notch &&
}
{time}
{children}
); const SvgSignal = ({ dark }) => ( ); const SvgWifi = ({ dark }) => ( ); const SvgBattery = ({ dark }) => ( ); /* ============== APP STORE BADGES ============== */ const AppStoreBadge = ({ store = 'app' }) => ( {store === 'app' ? ( ) : ( )}
{store === 'app' ? 'Download on the' : 'Get it on'}
{store === 'app' ? 'App Store' : 'Google Play'}
 ); /* ============== AVATARS (placeholder colorful discs) ============== */ const Avatar = ({ name = 'JM', size = 32, hue = 220 }) => (
{name}
); /* ============== HOMEPRO LOGO ============== */ // The HP monogram in a chartreuse→lilac ring, with a smiling house in the negative space. // Renders the PNG with adjustable size + optional dark background tile. const Logo = ({ size = 32, tile = false, tileColor = 'var(--ink)' }) => { const inner = ( homepro ); if (tile) { return (
{inner}
); } return {inner}; }; const Wordmark = ({ size = 18, color = 'var(--ink)' }) => ( homepro ); /* Expose to window */ Object.assign(window, { // React hooks (needed by service-picker.jsx which uses bare names) useState, useEffect, useRef, useMemo, // Icons Icon, IconCamera, IconBolt, IconPin, IconChat, IconStar, IconCheck, IconArrow, IconShield, IconClock, IconReceipt, IconPlus, IconQuestion, IconHome, IconUser, IconHeart, // Components NicheGlyphs, NICHES, Phone, AppStoreBadge, Avatar, Logo, Wordmark, });