/* ============================================================================ MOWDEW — Shared screens onboarding (role pick) · invite (invite-link landing) · settings (one component, fully tailored per role: owner / Pro / homeowner) ========================================================================= */ /* ============================== ONBOARDING ROLE PICK =================== */ function Onboarding({ go, setRole }) { const pick = (role) => { go('auth', { role }); }; return (
{/* full-bleed lifestyle background — crossfading clean lawn ⇄ clean pool */}
{/* content on top */}
Mowdew

Every visit,
on the record.

Recurring garden & pool care, with proof on every visit. Choose how you'll use Mowdew.

Trusted by gardeners & pool pros everywhere.
); } /* ============================== AUTH · LOGIN / SIGN UP ================= */ function Auth({ go, params, setRole }) { const role = (params && params.role) || 'homeowner'; const META = { provider: { label: 'Pro', accent: 'var(--green-700)', bg: 'var(--green-50)', bd: 'var(--green-100)', target: 'pro_today', icon: 'route' }, owner: { label: 'business owner', accent: 'var(--ink-900)', bg: 'var(--ink-50)', bd: 'var(--ink-100)', target: 'o_home', icon: 'grid' }, homeowner: { label: 'homeowner', accent: 'var(--aqua-700)', bg: 'var(--aqua-50)', bd: 'var(--aqua-100)', target: 'h_feed', icon: 'home' }, }; const m = META[role]; const [mode, setMode] = React.useState('login'); const [email, setEmail] = React.useState(''); const [pw, setPw] = React.useState(''); const enter = () => { setRole(role); go(m.target); }; const Field = ({ label, type, val, set, ph }) => ( ); return (
{mode === 'login' ? 'Log in' : 'Sign up'} as a {m.label}

{mode === 'login' ? 'Welcome back' : 'Create your account'}

{mode === 'login' ? 'Pick up right where you left off.' : 'A minute to set up — then your visits run themselves.'}

{/* Google */}
or
{mode === 'signup' && {}} ph="Your name" />} {mode === 'login' && }
{mode === 'login' ? "New to Mowdew? " : 'Already have an account? '}
By continuing you agree to Mowdew's Terms & Privacy Policy.
); } /* ============================== INVITE LANDING ======================== */ function Invite({ go, setRole }) { const join = () => { setRole('homeowner'); go('h_feed'); }; return (
{/* top brand band */}
You've been invited mowdew.co/d/diego

Diego invited you to
follow your home's care

Marta Lawn & Pool services 88 Crestline Ave weekly. Join free to watch every visit land.

{/* what you get */}
{[ ['feed', 'green', 'A live feed of every visit', 'Time in, time out, before & after photos — verified on-site.'], ['shield', 'blue', 'Proof, not promises', 'Geofence check-in stamps each visit with time and location.'], ['wallet', 'green', 'One-tap invoice pay', 'Pay with Zelle, Venmo or PayPal. A ledger so you never pay twice.'], ].map(([ic, tn, h, b], i) => (
{h}
{b}
))}
{/* preview peek */}
Latest · Pool service VERIFIED
); } /* ============================== SETTINGS ============================== */ function SettingRow({ icon, tone, title, sub, right, onClick, last }) { return (
{title}
{sub &&
{sub}
}
{right || (onClick && )}
); } function Group({ label, children }) { return (
{label}
{React.Children.map(children, (c, i) => (
{c}
))}
); } function Settings({ go, role, setRole, autoCheckin, setAutoCheckin }) { const provider = role === 'provider'; const owner = role === 'owner'; const homeowner = !provider && !owner; const who = owner ? { name: 'Diego Marta', biz: 'Marta Lawn & Pool · owner' } : provider ? { name: 'Marco Ruiz', biz: 'Marta Lawn & Pool · Pro' } : { name: 'Emma Walsh', biz: '88 Crestline Ave' }; const [photo, setPhoto] = React.useState(null); const [photoSheet, setPhotoSheet] = React.useState(false); // demo "library" — selectable photo looks (gradient portraits) standing in for real uploads const PHOTOS = [ { id: 'p1', bg: 'linear-gradient(150deg,#7FB85A,#2E8C49)' }, { id: 'p2', bg: 'linear-gradient(150deg,#56C2EE,#0A767F)' }, { id: 'p3', bg: 'linear-gradient(150deg,#FFCB3D,#E08A3C)' }, { id: 'p4', bg: 'linear-gradient(150deg,#9C8BF0,#5847d6)' }, { id: 'p5', bg: 'linear-gradient(150deg,#F2A03D,#C24420)' }, { id: 'p6', bg: 'linear-gradient(150deg,#46B6F0,#1379B5)' }, ]; const curPhoto = PHOTOS.find(p => p.id === photo); return ( go(owner ? 'o_home' : provider ? 'pro_visit' : 'h_request')} />}> go(owner ? 'o_home' : provider ? 'pro_today' : 'h_feed')} /> {/* profile */}

{who.name}

{provider ? 'Pool & garden Pro · Marta Lawn & Pool' : who.biz}
{owner ? 'Owner · Pro plan' : provider ? 'Pro · field app' : 'Homeowner · Free'}
{provider && (
Your photo & first name show on every visit — homeowners know exactly who's at the gate.
)}
{/* profile photo picker */} setPhotoSheet(false)} title="Profile photo">
Add a photo so {provider ? 'your customers and office' : owner ? 'your team and customers' : 'your provider'} recognize you.
{photo && } {owner && (
Workspace
Open full dashboard on web
Bigger book, reports & route maps
Learn more on the web
Pricing, features & FAQ
)} {provider && ( <> {/* LOCATION — required for the field app, not a toggle */}
Location
Location services REQUIRED
Always on. Mowdew clocks you in & out the moment you reach each home — timestamped and location-verified. The field app needs location to work.
Managed on your phone — Settings → Mowdew → Location, set to “Always”.
)} {owner && ( {}} /> go('o_chem_config')} /> go('o_reviews')} /> {}} /> {}} /> )} {homeowner && (
Diego Marta
Marta Lawn & Pool · weekly pool
4.9
go('h_request')} /> )} {homeowner && ( {}} /> {}} />} /> )} {owner && ( {}} />} /> {}} />} /> {}} />} /> )} {provider && ( {}} />} /> {}} />} /> )} {homeowner && ( {}} />} /> {}} />} /> )}
); } Object.assign(window, { Onboarding, Auth, Invite, Settings });