// Cleaner portal — host-side page that previews the mobile form in an iOS frame
// and surfaces "how it works" plus the cleaning team list.
function CleanerPortalPage({ store, onNav }) {
  return (
    <>
      <Topbar title="Cleaner portal" subtitle="Mobile link for your cleaning team — auto-bills cleaning + laundry per submission">
        <button className="btn" onClick={() => navigator.clipboard?.writeText('slate.app/c/cleaner-maria')}>
          {Icon.link} Copy cleaner link
        </button>
        <button className="btn accent" onClick={() => onNav({ name: 'portal-settings' })}>
          {Icon.edit || Icon.plus} Edit form
        </button>
      </Topbar>

      <div className="content" style={{ display: 'grid', gridTemplateColumns: '1fr 420px', gap: 24 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div className="card card-pad-lg">
            <h3 style={{ margin: '0 0 8px', fontSize: 14, fontWeight: 600 }}>How it works</h3>
            <div className="small muted" style={{ lineHeight: 1.55 }}>
              Send this link to your cleaning team. They submit a log for each turnover
              from their phone. The system automatically creates a <b style={{ color: 'var(--text)' }}>Cleaning</b> expense
              at the house's flat rate and a <b style={{ color: 'var(--text)' }}>Laundry</b> expense for the receipt amount.
              No double-entry.
            </div>
            <div className="row" style={{ gap: 10, marginTop: 16, padding: 12, background: 'var(--bg-sunken)', borderRadius: 8 }}>
              <span className="chip">1</span><span className="small">Maria cleans Blue Cottage</span>
              <span className="muted" style={{ fontSize: 11 }}>→</span>
              <span className="chip">2</span><span className="small">Submits form on phone</span>
              <span className="muted" style={{ fontSize: 11 }}>→</span>
              <span className="chip">3</span><span className="small" style={{ color: 'var(--accent)', fontWeight: 500 }}>$175 + laundry billed</span>
            </div>
          </div>

          <div className="card">
            <div className="card-header"><h3>Cleaning team</h3></div>
            <div style={{ padding: '8px 0' }}>
              {[
                { name: 'Maria Delgado', cleanings: 47, last: '2 days ago' },
                { name: 'Sofia Reyes', cleanings: 31, last: '5 days ago' },
                { name: 'Anna Kowalski', cleanings: 22, last: '2 weeks ago' },
              ].map((c, i) => (
                <div key={i} className="row" style={{ padding: '10px 20px', gap: 12 }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: '50%', background: 'var(--bg-sunken)',
                    display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 500,
                  }}>{c.name.split(' ').map(w => w[0]).join('')}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 500, fontSize: 13 }}>{c.name}</div>
                    <div className="xs muted">{c.cleanings} cleanings · last {c.last}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 8 }}>
          <IOSFrame scale={0.85}>
            <CleanerMobileForm store={store} embedded/>
          </IOSFrame>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { CleanerPortalPage });