/* ============================================================================
   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 (
    <div style={{ position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden', background: 'var(--ink-900)' }}>
      {/* full-bleed lifestyle background — crossfading clean lawn ⇄ clean pool */}
      <div className="ob-scene ob-lawn"></div>
      <div className="ob-scene ob-pool"></div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(20,28,18,.34) 0%, rgba(20,28,18,.14) 26%, rgba(20,28,18,.30) 58%, rgba(20,28,18,.62) 100%)' }}></div>

      {/* content on top */}
      <div className="tn-scroll" style={{ position: 'relative', flex: 1, minHeight: 0, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '40px 24px 0', display: 'grid', placeItems: 'center', textAlign: 'center' }}>
          <div style={{ width: 86, height: 86, borderRadius: 24, background: '#fff', display: 'grid', placeItems: 'center', boxShadow: '0 14px 36px rgba(0,0,0,.28)' }}>
            <Logo size={60} />
          </div>
          <div style={{ marginTop: 12, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, letterSpacing: '.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,.85)', textShadow: '0 2px 14px rgba(0,0,0,.3)' }}>Mowdew</div>
          <h1 style={{ fontSize: 30, marginTop: 14, lineHeight: 1.12, letterSpacing: '-0.028em', color: '#fff', textShadow: '0 2px 18px rgba(0,0,0,.35)' }}>Every visit,<br />on the record.</h1>
          <p style={{ fontSize: 15, marginTop: 8, maxWidth: 300, color: 'rgba(255,255,255,.9)', textShadow: '0 1px 10px rgba(0,0,0,.3)' }}>Recurring garden &amp; pool care, with proof on every visit. Choose how you'll use Mowdew.</p>
        </div>

      <div style={{ padding: '22px 22px 0', display: 'grid', gap: 12 }}>
        <button onClick={() => pick('provider')} style={{ textAlign: 'left', cursor: 'pointer', border: '1.5px solid var(--green-100)', borderRadius: 'var(--radius-2xl)', background: '#fff', padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--shadow-sm)' }}>
          <span style={{ flexShrink: 0, lineHeight: 0 }} aria-hidden="true"><PaperPro size={56} /></span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17 }}>I'm a Pro</div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-500)', marginTop: 2 }}>Your route, auto check-in, photos &amp; chemistry.</div>
          </div>
          <span style={{ flexShrink: 0, lineHeight: 0 }} aria-hidden="true"><PaperTruck size={74} /></span>
          <Icon name="arrow-right" size={20} style={{ color: 'var(--green-700)', flexShrink: 0 }} />
        </button>

        <button onClick={() => pick('homeowner')} style={{ textAlign: 'left', cursor: 'pointer', border: '1.5px solid var(--aqua-100)', borderRadius: 'var(--radius-2xl)', background: '#fff', padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--shadow-sm)' }}>
          <span style={{ flexShrink: 0, lineHeight: 0 }} aria-hidden="true"><PaperHome size={56} /></span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17 }}>I'm a homeowner</div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-500)', marginTop: 2 }}>Every verified visit, pool chemistry, one-tap pay. <b style={{ color: 'var(--aqua-700)' }}>Free.</b></div>
          </div>
          <span style={{ flexShrink: 0, lineHeight: 0 }} aria-hidden="true"><PaperHouse size={88} /></span>
          <Icon name="arrow-right" size={20} style={{ color: 'var(--aqua-700)', flexShrink: 0 }} />
        </button>

        <button onClick={() => pick('owner')} style={{ textAlign: 'left', cursor: 'pointer', border: '1.5px solid var(--ink-100)', borderRadius: 'var(--radius-2xl)', background: '#fff', padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--shadow-sm)', width: '100%' }}>
          <span style={{ flexShrink: 0, lineHeight: 0 }} aria-hidden="true"><PaperOwner size={56} /></span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 700, letterSpacing: '.1em', color: 'var(--green-700)', background: 'var(--green-50)', border: '1px solid var(--green-100)', borderRadius: 6, padding: '2px 6px' }}>FOR BUSINESSES</span>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17 }}>I run a service business</div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-500)', marginTop: 2 }}>Customers, money &amp; routes — <b style={{ color: 'var(--green-700)' }}>the whole operation.</b></div>
          </div>
          <span style={{ flexShrink: 0, lineHeight: 0 }} aria-hidden="true"><PaperOffice size={88} /></span>
          <span style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--green-700)', display: 'grid', placeItems: 'center', flexShrink: 0, boxShadow: 'var(--shadow-green)' }}><Icon name="arrow-right" size={18} style={{ color: '#fff' }} /></span>
        </button>
      </div>

      <div style={{ padding: '18px 22px 26px', textAlign: 'center', fontSize: 12.5, fontWeight: 600, color: 'rgba(255,255,255,.85)', textShadow: '0 1px 8px rgba(0,0,0,.3)' }}>
        Trusted by gardeners &amp; pool pros everywhere.
      </div>
      </div>
    </div>
  );
}

/* ============================== 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 }) => (
    <label style={{ display: 'block' }}>
      <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink-700)', display: 'block', marginBottom: 6 }}>{label}</span>
      <input type={type} value={val} onChange={e => set(e.target.value)} placeholder={ph} className="input" />
    </label>
  );
  return (
    <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflowY: 'auto', background: 'var(--paper)' }}>
      <div style={{ padding: '8px 18px 0' }}>
        <button onClick={() => go('onboarding')} aria-label="Back" style={{ width: 40, height: 40, borderRadius: 12, border: 'none', background: 'transparent', display: 'grid', placeItems: 'center', cursor: 'pointer', color: 'var(--ink-900)' }}><Icon name="arrow-left" size={22} /></button>
      </div>

      <div style={{ padding: '8px 28px 0', display: 'grid', placeItems: 'center', textAlign: 'center' }}>
        <Logo size={46} />
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 16, color: m.accent, fontSize: 13.5, fontWeight: 800, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}><Icon name={m.icon} size={16} strokeWidth={2.3} /><span>{mode === 'login' ? 'Log in' : 'Sign up'} as a {m.label}</span></span>
        <h1 style={{ fontSize: 27, marginTop: 14, letterSpacing: '-0.025em' }}>{mode === 'login' ? 'Welcome back' : 'Create your account'}</h1>
        <p style={{ fontSize: 14.5, marginTop: 7, maxWidth: 300, color: 'var(--ink-600,#6E6B60)' }}>{mode === 'login' ? 'Pick up right where you left off.' : 'A minute to set up — then your visits run themselves.'}</p>
      </div>

      <div style={{ padding: '22px 24px 0', display: 'grid', gap: 13 }}>
        {/* Google */}
        <button onClick={enter} className="btn btn-secondary btn-lg" style={{ background: '#fff', border: '1.5px solid var(--ink-200)' }}>
          <svg width="19" height="19" viewBox="0 0 48 48" aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.9 2.4 30.3 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.9 6.1C12.4 13.2 17.7 9.5 24 9.5z"/><path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.5 3-2.2 5.5-4.7 7.2l7.3 5.7C43.9 38 46.5 31.8 46.5 24.5z"/><path fill="#FBBC05" d="M10.5 28.3c-.5-1.5-.8-3.1-.8-4.8s.3-3.3.8-4.8l-7.9-6.1C.9 16.1 0 19.9 0 24s.9 7.9 2.6 11.4l7.9-6.1z"/><path fill="#34A853" d="M24 48c6.3 0 11.6-2.1 15.5-5.7l-7.3-5.7c-2 1.4-4.7 2.3-8.2 2.3-6.3 0-11.6-3.7-13.5-9.1l-7.9 6.1C6.5 42.6 14.6 48 24 48z"/></svg>
          Continue with Google
        </button>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--ink-400,#A8A498)', fontSize: 12, fontWeight: 600 }}>
          <span style={{ flex: 1, height: 1, background: 'var(--ink-100)' }} />or<span style={{ flex: 1, height: 1, background: 'var(--ink-100)' }} />
        </div>

        {mode === 'signup' && <Field label="Full name" type="text" val={''} set={() => {}} ph="Your name" />}
        <Field label="Email" type="email" val={email} set={setEmail} ph="you@email.com" />
        <Field label="Password" type="password" val={pw} set={setPw} ph={mode === 'login' ? 'Your password' : 'Create a password'} />
        {mode === 'login' && <button onClick={() => {}} style={{ justifySelf: 'end', background: 'none', border: 'none', color: m.accent, fontWeight: 700, fontSize: 13, cursor: 'pointer', marginTop: -4 }}>Forgot password?</button>}

        <button onClick={enter} className="btn btn-primary btn-lg btn-block" style={{ marginTop: 4 }}>{mode === 'login' ? 'Log in' : 'Create account'}<Icon name="arrow-right" size={19} /></button>
      </div>

      <div style={{ padding: '18px 24px 8px', textAlign: 'center', fontSize: 14, color: 'var(--ink-600,#6E6B60)' }}>
        {mode === 'login' ? "New to Mowdew? " : 'Already have an account? '}
        <button onClick={() => setMode(mode === 'login' ? 'signup' : 'login')} style={{ background: 'none', border: 'none', color: m.accent, fontWeight: 800, fontSize: 14, cursor: 'pointer', padding: 0 }}>{mode === 'login' ? 'Sign up' : 'Log in'}</button>
      </div>
      <div style={{ padding: '0 32px 24px', textAlign: 'center', fontSize: 11.5, color: 'var(--ink-400,#A8A498)', lineHeight: 1.5 }}>
        By continuing you agree to Mowdew's Terms &amp; Privacy Policy.
      </div>
    </div>
  );
}

/* ============================== INVITE LANDING ======================== */
function Invite({ go, setRole }) {
  const join = () => { setRole('homeowner'); go('h_feed'); };
  return (
    <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
        {/* top brand band */}
        <div style={{ background: 'var(--green-700)', padding: '14px 22px 22px', color: '#fff', textAlign: 'center' }}>
          <Logo size={32} withWord color="#fff" />
          <div style={{ marginTop: 18, display: 'inline-flex', alignItems: 'center', gap: 10, background: 'rgba(255,255,255,.12)', border: '1px solid rgba(255,255,255,.2)', borderRadius: 99, padding: '6px 6px 6px 14px' }}>
            <span style={{ fontSize: 12.5, fontWeight: 600 }}>You've been invited</span>
            <span style={{ background: 'rgba(255,255,255,.2)', borderRadius: 99, padding: '4px 10px', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.06em' }}>mowdew.co/d/diego</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginTop: 20 }}>
            <Avatar name="Diego Marta" size={54} ring />
          </div>
          <h1 style={{ color: '#fff', fontSize: 24, marginTop: 14, letterSpacing: '-0.025em' }}>Diego invited you to<br />follow your home's care</h1>
          <p style={{ color: 'rgba(255,255,255,.85)', fontSize: 14.5, marginTop: 8, maxWidth: 300, margin: '8px auto 0' }}>Marta Lawn & Pool services <b style={{ color: '#fff' }}>88 Crestline Ave</b> weekly. Join free to watch every visit land.</p>
        </div>

        {/* what you get */}
        <div style={{ padding: '20px 22px 0', display: 'grid', gap: 12 }}>
          {[
            ['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) => (
            <div key={i} style={{ display: 'flex', gap: 13, alignItems: 'flex-start' }}>
              <IconBadge icon={ic} tone={tn} size={42} />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15.5 }}>{h}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 1 }}>{b}</div>
              </div>
            </div>
          ))}
        </div>

        {/* preview peek */}
        <div style={{ padding: '18px 22px 0' }}>
          <div className="card" style={{ padding: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 9 }}>
              <Avatar name="Diego Marta" size={26} />
              <span style={{ fontSize: 12.5, fontWeight: 700 }}>Latest · Pool service</span>
              <span style={{ marginLeft: 'auto' }}><Mono tone="blue" icon="shield">VERIFIED</Mono></span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 7 }}>
              <PhotoTile scene="pool-before" label="BEFORE" height={74} />
              <PhotoTile scene="pool-after" label="AFTER" height={74} />
            </div>
          </div>
        </div>
      </div>

      <ActionBar>
        <button onClick={join} className="btn btn-primary btn-lg btn-block"><Icon name="home" size={20} />Join free as a homeowner</button>
      </ActionBar>
    </div>
  );
}

/* ============================== SETTINGS ============================== */
function SettingRow({ icon, tone, title, sub, right, onClick, last }) {
  return (
    <div onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '13px 14px', borderTop: last ? 'none' : 'none', cursor: onClick ? 'pointer' : 'default' }}>
      <IconBadge icon={icon} tone={tone} size={38} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 700, fontSize: 14.5 }}>{title}</div>
        {sub && <div style={{ fontSize: 12.5, color: 'var(--ink-500)' }}>{sub}</div>}
      </div>
      {right || (onClick && <Icon name="chevron-right" size={18} style={{ color: 'var(--ink-300)' }} />)}
    </div>
  );
}
function Group({ label, children }) {
  return (
    <div style={{ padding: '0 18px', marginTop: 18 }}>
      <SectionHead tone="green" style={{ marginBottom: 11 }}>{label}</SectionHead>
      <div className="card" style={{ overflow: 'hidden', display: 'grid' }}>
        {React.Children.map(children, (c, i) => (
          <div style={{ borderTop: i ? '1px solid var(--ink-100)' : 'none' }}>{c}</div>
        ))}
      </div>
    </div>
  );
}

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 (
    <Screen padBottom={26} footer={<TabBar role={role} active="settings" go={go} onFab={() => go(owner ? 'o_home' : provider ? 'pro_visit' : 'h_request')} />}>
      <TopBar title="Settings" big onBack={() => go(owner ? 'o_home' : provider ? 'pro_today' : 'h_feed')} />

      {/* profile */}
      <div style={{ padding: '0 18px' }}>
        <div className="card" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 13 }}>
          <button onClick={() => setPhotoSheet(true)} aria-label="Edit profile photo" style={{ position: 'relative', width: 56, height: 56, padding: 0, border: 'none', background: 'none', cursor: 'pointer', flexShrink: 0 }}>
            {curPhoto
              ? <span style={{ width: 56, height: 56, borderRadius: '50%', background: curPhoto.bg, display: 'grid', placeItems: 'center', color: 'rgba(255,255,255,.9)' }}><Icon name="user" size={26} /></span>
              : <PaperAvatar who={owner ? 'owner' : provider ? 'pro' : 'home'} size={56} />}
            <span style={{ position: 'absolute', right: -2, bottom: -2, width: 23, height: 23, borderRadius: '50%', background: 'var(--green-700)', border: '2.5px solid var(--surface)', display: 'grid', placeItems: 'center', color: '#fff' }}><Icon name="camera" size={12} strokeWidth={2.4} /></span>
          </button>
          <div style={{ flex: 1, minWidth: 0 }}>
            <h3 style={{ fontSize: 18 }}>{who.name}</h3>
            <div style={{ fontSize: 13, color: 'var(--ink-500)' }}>{provider ? 'Pool & garden Pro · Marta Lawn & Pool' : who.biz}</div>
          </div>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12, fontWeight: 800, letterSpacing: '-0.005em', whiteSpace: 'nowrap', flexShrink: 0, color: owner ? 'var(--ink-900)' : provider ? 'var(--green-700)' : 'var(--aqua-700)' }}><span style={{ width: 8, height: 8, borderRadius: '2px 3px 2px 3px', transform: 'rotate(45deg)', flexShrink: 0, background: owner ? 'var(--ink-900)' : provider ? 'var(--green-500)' : 'var(--aqua-500)' }} />{owner ? 'Owner · Pro plan' : provider ? 'Pro · field app' : 'Homeowner · Free'}</span>
        </div>
        {provider && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, background: 'var(--blue-50)', border: '1px solid var(--blue-100)', borderRadius: 'var(--radius-lg)', padding: '10px 13px', marginTop: 10 }}>
            <Icon name="camera" size={16} style={{ color: 'var(--blue-700)', flexShrink: 0 }} />
            <span style={{ fontSize: 12, color: 'var(--ink-700)', lineHeight: 1.45 }}><b>Your photo &amp; first name show on every visit</b> — homeowners know exactly who's at the gate.</span>
          </div>
        )}
      </div>

      {/* profile photo picker */}
      <Sheet open={photoSheet} onClose={() => setPhotoSheet(false)} title="Profile photo">
        <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: -6, marginBottom: 16 }}>Add a photo so {provider ? 'your customers and office' : owner ? 'your team and customers' : 'your provider'} recognize you.</div>
        <label className="btn btn-primary btn-block" style={{ marginBottom: 10, cursor: 'pointer' }}>
          <Icon name="camera" size={18} />Take a photo
          <input type="file" accept="image/*" capture="user" onChange={() => { setPhoto('me'); setPhotoSheet(false); }} style={{ display: 'none' }} />
        </label>
        <label className="btn btn-secondary btn-block" style={{ marginBottom: 10, cursor: 'pointer' }}>
          <Icon name="grid" size={18} />Choose from camera roll
          <input type="file" accept="image/*" onChange={() => { setPhoto('me'); setPhotoSheet(false); }} style={{ display: 'none' }} />
        </label>
        {photo && <button onClick={() => { setPhoto(null); setPhotoSheet(false); }} className="btn btn-ghost btn-block" style={{ color: 'var(--alert-700)' }}>Remove photo</button>}
      </Sheet>

      {owner && (
        <div style={{ padding: '18px 18px 0' }}>
          <SectionHead tone="green" icon="grid" style={{ marginBottom: 11 }}>Workspace</SectionHead>
          <div className="card" style={{ overflow: 'hidden' }}>
            <button onClick={() => go('o_plan')} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 13, padding: '13px 14px', border: 'none', borderBottom: '1px solid var(--ink-100)', background: '#fff', cursor: 'pointer', textAlign: 'left' }}>
              <IconBadge icon="wallet" tone="green" size={38} />
              <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontWeight: 700, fontSize: 14.5 }}>Plan &amp; billing</div><div style={{ fontSize: 12.5, color: 'var(--ink-500)' }}>Growth · {BIZ.homes}/50 homes · renews Jun 1</div></div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700, letterSpacing: '.06em', color: 'var(--green-700)', background: 'var(--green-50)', border: '1px solid var(--green-100)', borderRadius: 7, padding: '3px 8px', flexShrink: 0 }}>ACTIVE</span>
            </button>
            <a href="Mowdew Owner.html" style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '13px 14px', textDecoration: 'none', color: 'inherit' }}>
              <IconBadge icon="grid" tone="ink" size={38} />
              <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14.5 }}>Open full dashboard on web</div><div style={{ fontSize: 12.5, color: 'var(--ink-500)' }}>Bigger book, reports & route maps</div></div>
              <Icon name="arrow-right" size={18} style={{ color: 'var(--ink-300)' }} />
            </a>
            <div style={{ borderTop: '1px solid var(--ink-100)' }}>
              <a href="Mowdew Marketing.html" style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '13px 14px', textDecoration: 'none', color: 'inherit' }}>
                <IconBadge icon="wallet" tone="green" size={38} />
                <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14.5 }}>Learn more on the web</div><div style={{ fontSize: 12.5, color: 'var(--ink-500)' }}>Pricing, features &amp; FAQ</div></div>
                <Icon name="arrow-right" size={18} style={{ color: 'var(--ink-300)' }} />
              </a>
            </div>
          </div>
        </div>
      )}

      {provider && (
        <>
          {/* LOCATION — required for the field app, not a toggle */}
          <div style={{ padding: '18px 18px 0' }}>
            <SectionHead tone="blue" icon="target" style={{ marginBottom: 11 }}>Location</SectionHead>
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ padding: 16, display: 'flex', alignItems: 'flex-start', gap: 13, background: 'var(--blue-50)' }}>
                <span style={{ width: 42, height: 42, borderRadius: 12, background: 'var(--blue-500)', display: 'grid', placeItems: 'center', color: '#fff', flexShrink: 0 }}><Icon name="target" size={22} strokeWidth={2.3} /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ flex: 1, minWidth: 0, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Location services</span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontFamily: 'var(--font-mono)', fontSize: 9.5, fontWeight: 700, letterSpacing: '.06em', color: 'var(--blue-700)', background: '#fff', border: '1px solid var(--blue-100)', borderRadius: 7, padding: '3px 7px', flexShrink: 0, whiteSpace: 'nowrap' }}><Icon name="check" size={10} strokeWidth={3} />REQUIRED</span>
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--ink-600,#6E6B60)', marginTop: 3 }}>Always on. Mowdew clocks you in &amp; out the moment you reach each home — timestamped and location-verified. The field app needs location to work.</div>
                </div>
              </div>
              <div style={{ padding: '12px 16px', borderTop: '1px solid var(--ink-100)', display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, color: 'var(--ink-500)' }}>
                <Icon name="shield" size={16} style={{ color: 'var(--blue-700)', flexShrink: 0 }} />
                Managed on your phone — Settings → Mowdew → Location, set to “Always”.
              </div>
            </div>
          </div>
        </>
      )}

      {owner && (
        <Group label="Business">
          <SettingRow icon="users" tone="green" title="Team & workers" sub="2 Pros · manage seats & access" onClick={() => {}} />
          <SettingRow icon="flask" tone="aqua" title="Configure readings" sub="Pool chemistry · 7 readings tracked" onClick={() => go('o_chem_config')} />
          <SettingRow icon="star" tone="green" title="Review requests" sub="On · 5 asks this month · 7 left" onClick={() => go('o_reviews')} />
          <SettingRow icon="wallet" tone="green" title="Payout rails" sub="Zelle · Venmo · PayPal connected" onClick={() => {}} />
          <SettingRow icon="invoice" tone="green" title="Invoice defaults" sub="Net 14 · auto-build from verified visits" onClick={() => {}} />
        </Group>
      )}

      {homeowner && (
        <Group label="Your provider">
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 14px' }}>
            <Avatar name="Diego Marta" size={42} ring />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 14.5 }}>Diego Marta</div>
              <div style={{ fontSize: 12.5, color: 'var(--ink-500)' }}>Marta Lawn & Pool · weekly pool</div>
            </div>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, color: 'var(--green-700)', fontSize: 12.5, fontWeight: 700 }}><Icon name="star" size={14} />4.9</span>
          </div>
          <SettingRow icon="message" tone="blue" title="Message Diego" sub="Reschedule or ask a question" onClick={() => go('h_request')} />
        </Group>
      )}

      {homeowner && (
        <Group label="Payments">
          <SettingRow icon="wallet" tone="green" title="Default pay method" sub="Zelle · emma@…" onClick={() => {}} />
          <SettingRow icon="ledger" tone="blue" title="Never-pay-twice alerts" right={<Toggle on={true} onChange={() => {}} />} />
        </Group>
      )}

      {owner && (
        <Group label="Notifications">
          <SettingRow icon="nudge" tone="green" title="Payments received" right={<Toggle on={true} onChange={() => {}} />} />
          <SettingRow icon="calendar-check" tone="yellow" title="Reschedule requests" right={<Toggle on={true} onChange={() => {}} />} />
          <SettingRow icon="message" tone="blue" title="Customer messages" right={<Toggle on={true} onChange={() => {}} />} />
        </Group>
      )}
      {provider && (
        <Group label="Notifications">
          <SettingRow icon="bell" tone="yellow" title="Arrival reminders" right={<Toggle on={true} onChange={() => {}} />} />
          <SettingRow icon="route" tone="green" title="Route changes" right={<Toggle on={true} onChange={() => {}} />} />
        </Group>
      )}
      {homeowner && (
        <Group label="Notifications">
          <SettingRow icon="bell" tone="yellow" title="New visit alerts" right={<Toggle on={true} onChange={() => {}} />} />
          <SettingRow icon="file" tone="green" title="Invoice received" right={<Toggle on={true} onChange={() => {}} />} />
        </Group>
      )}

      <div style={{ padding: '24px 18px 0' }}>
        <button onClick={() => go('onboarding')} className="btn btn-secondary btn-block">Sign out</button>
      </div>
    </Screen>
  );
}

Object.assign(window, { Onboarding, Auth, Invite, Settings });
