// East Quabbin Health — screens
// Launch, coordinator, wizard steps, signature, confirmation

// ─────────────────────────────────────────────
// Launch screen (resident-first)
// ─────────────────────────────────────────────
const EqLaunchScreen = ({ t, onStart, onCoordinator, onResume }) => (
  <div className="eq-scroll" style={{
    flex: 1, display: 'flex', flexDirection: 'column',
    padding: '0 24px 24px', position: 'relative', overflow: 'hidden',
  }}>
    {/* ambient shapes */}
    <div style={{ position: 'absolute', top: -40, right: -40, pointerEvents: 'none' }}>
      <EqBlob color="var(--eq-sage)" size={220} seed={3} opacity={0.7} />
    </div>
    <div style={{ position: 'absolute', bottom: 80, left: -50, pointerEvents: 'none' }}>
      <EqBlob color="var(--eq-clay)" size={160} seed={9} opacity={0.55} />
    </div>
    <div style={{ position: 'absolute', top: 180, left: 40, pointerEvents: 'none' }}>
      <EqBlob color="var(--eq-butter)" size={80} seed={5} opacity={0.6} />
    </div>

    {/* Brand */}
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 24, position: 'relative' }}>
      <EqMark size={32} />
      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--eq-ink)' }}>
        {t.appName}
      </div>
    </div>

    {/* Big welcome */}
    <div style={{ marginTop: 90, position: 'relative' }}>
      <h1 className="eq-display" style={{ fontSize: 52, margin: 0, lineHeight: 0.98, color: 'var(--eq-ink)' }}>
        {t.launch.title}
      </h1>
      <p style={{
        marginTop: 16, fontSize: 17, lineHeight: 1.45,
        color: 'var(--eq-ink-2)', textWrap: 'pretty', maxWidth: 320,
      }}>
        {t.launch.sub}
      </p>

      <div style={{ display: 'flex', gap: 8, marginTop: 20, flexWrap: 'wrap' }}>
        <span className="eq-chip"><EqIcon name="clock" size={13} />{t.launch.time}</span>
        <span className="eq-chip"><EqIcon name="shield" size={13} />{t.launch.private}</span>
      </div>
    </div>

    <div style={{ flex: 1 }} />

    {/* CTAs */}
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, position: 'relative', marginTop: 24 }}>
      <button className="eq-btn eq-btn-primary" onClick={onStart} style={{ width: '100%' }}>
        {t.launch.start} <EqIcon name="arrowRight" size={16} />
      </button>
      <div style={{ display: 'flex', gap: 10 }}>
        <button className="eq-btn eq-btn-soft" onClick={onResume} style={{ flex: 1 }}>
          {t.launch.resume}
        </button>
        <button className="eq-btn eq-btn-soft" onClick={onCoordinator} style={{ flex: 1 }}>
          {t.launch.coordinator}
        </button>
      </div>
      <p style={{
        margin: '14px 0 0', textAlign: 'center',
        fontSize: 12, color: 'var(--eq-muted)',
      }}>
        {t.tagline}
      </p>
    </div>
  </div>
);

// ─────────────────────────────────────────────
// Coordinator mode (staff preflight)
// ─────────────────────────────────────────────
const EqCoordScreen = ({ t, coord, setCoord, onBegin, onBack }) => (
  <div className="eq-scroll" style={{ flex: 1, padding: '16px 24px 24px', display: 'flex', flexDirection: 'column' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
      <button onClick={onBack} style={{
        width: 36, height: 36, borderRadius: 999,
        background: 'var(--eq-surface)', display: 'grid', placeItems: 'center',
        boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
      }}>
        <EqIcon name="arrowLeft" size={16} />
      </button>
      <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--eq-sage-deep)' }}>
        STAFF
      </span>
    </div>

    <EqTitle title={t.coord.title} sub={t.coord.sub} icon="users" accent="var(--eq-butter)" />

    <EqRow label={t.coord.name}>
      <input className="eq-field" value={coord.name} onChange={(e) => setCoord({ ...coord, name: e.target.value })}
             placeholder="Maria González" />
    </EqRow>
    <EqRow label={t.coord.location}>
      <input className="eq-field" value={coord.location} onChange={(e) => setCoord({ ...coord, location: e.target.value })}
             placeholder={t.coord.locationPh} />
    </EqRow>

    <div style={{
      marginTop: 16,
      padding: 18,
      background: 'var(--eq-surface-2)',
      borderRadius: 'var(--eq-r-lg)',
      border: '1.5px solid var(--eq-line)',
    }}>
      <div style={{ fontWeight: 600, marginBottom: 6, fontSize: 15 }}>{t.coord.handoff}</div>
      <div style={{ fontSize: 13, color: 'var(--eq-ink-2)', lineHeight: 1.4 }}>
        {t.coord.handoffHint}
      </div>
    </div>

    <div style={{ flex: 1 }} />

    <button className="eq-btn eq-btn-primary" onClick={onBegin} style={{ width: '100%', marginTop: 20 }}>
      {t.coord.begin} <EqIcon name="arrowRight" size={16} />
    </button>
  </div>
);

// ─────────────────────────────────────────────
// Step 1 — About you
// ─────────────────────────────────────────────
const EqAbout = ({ t, data, set }) => (
  <div style={{ padding: '0 24px 40px' }}>
    <EqTitle title={t.about.title} sub={t.about.sub} icon="user" accent="var(--eq-sage)" />

    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
      <EqRow label={t.about.firstName}>
        <input className="eq-field" value={data.firstName || ''} onChange={(e) => set('firstName', e.target.value)} placeholder="Margaret" />
      </EqRow>
      <EqRow label={t.about.lastName}>
        <input className="eq-field" value={data.lastName || ''} onChange={(e) => set('lastName', e.target.value)} placeholder="Chen" />
      </EqRow>
    </div>

    <EqRow label={t.about.preferred} optional>
      <input className="eq-field" value={data.preferred || ''} onChange={(e) => set('preferred', e.target.value)} placeholder={t.about.preferredPh} />
    </EqRow>

    <EqRow label={t.about.dob}>
      <input className="eq-field" type="text" inputMode="numeric" value={data.dob || ''}
             onChange={(e) => set('dob', e.target.value)}
             placeholder="MM / DD / YYYY" />
    </EqRow>

    <EqRow label={t.about.pronouns} optional>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {t.about.pronounOpts.map((p) => (
          <button key={p} className="eq-chip" data-on={data.pronouns === p} onClick={() => set('pronouns', p)}>
            {p}
          </button>
        ))}
      </div>
    </EqRow>
  </div>
);

// ─────────────────────────────────────────────
// Step 2 — Contact
// ─────────────────────────────────────────────
const EqContact = ({ t, data, set }) => (
  <div style={{ padding: '0 24px 40px' }}>
    <EqTitle title={t.contact.title} sub={t.contact.sub} icon="mail" accent="var(--eq-sky)" />

    <EqRow label={t.contact.address}>
      <textarea className="eq-field" rows={2} value={data.address || ''} onChange={(e) => set('address', e.target.value)}
                placeholder={t.contact.addressPh} />
    </EqRow>

    <EqRow label={t.contact.phone}>
      <input className="eq-field" inputMode="tel" value={data.phone || ''} onChange={(e) => set('phone', e.target.value)}
             placeholder={t.contact.phonePh} />
    </EqRow>

    <EqRow label={t.contact.email} optional>
      <input className="eq-field" inputMode="email" value={data.email || ''} onChange={(e) => set('email', e.target.value)}
             placeholder={t.contact.emailPh} />
    </EqRow>

    <EqRow label={t.contact.preferredContact}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {t.contact.contactOpts.map((o) => (
          <EqOption key={o} on={data.preferredContact === o}
                    onClick={() => set('preferredContact', o)}
                    icon={o.startsWith('Phone') || o.startsWith('Lla') ? 'phone' :
                          o.startsWith('Text') || o.startsWith('Mensaje') ? 'bell' :
                          o.startsWith('Mail') || o.startsWith('Correo postal') ? 'mail' :
                          o.startsWith('Email') || o.startsWith('Correo e') ? 'mail' : 'home'}>
            {o}
          </EqOption>
        ))}
      </div>
    </EqRow>

    <EqRow label={t.contact.bestTime} optional>
      <div style={{ display: 'flex', gap: 8 }}>
        {t.contact.timeOpts.map((o) => (
          <button key={o} className="eq-chip" data-on={data.bestTime === o} onClick={() => set('bestTime', o)}>
            {o}
          </button>
        ))}
      </div>
    </EqRow>
  </div>
);

// ─────────────────────────────────────────────
// Step 3 — Household
// ─────────────────────────────────────────────
const EqHouse = ({ t, data, set }) => (
  <div style={{ padding: '0 24px 40px' }}>
    <EqTitle title={t.house.title} sub={t.house.sub} icon="home" accent="var(--eq-clay)" />

    {[
      { k: 'adults', label: t.house.adults },
      { k: 'kids', label: t.house.kids },
      { k: 'elders', label: t.house.elders },
    ].map(({ k, label }) => (
      <EqRow key={k} label={label}>
        <EqStepper value={data[k] || 0} onChange={(v) => set(k, v)} />
      </EqRow>
    ))}

    <EqRow>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <EqOption multi on={!!data.livesAlone} onClick={() => set('livesAlone', !data.livesAlone)}>
          {t.house.livesAlone}
        </EqOption>
        <EqOption multi on={!!data.caregiver} onClick={() => set('caregiver', !data.caregiver)}>
          {t.house.caregiver}
        </EqOption>
      </div>
    </EqRow>

    <EqRow label={t.house.language}>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {t.house.langOpts.map((o) => (
          <button key={o} className="eq-chip" data-on={data.language === o} onClick={() => set('language', o)}>
            {o}
          </button>
        ))}
      </div>
    </EqRow>
  </div>
);

// ─────────────────────────────────────────────
// Step — Daily activities (Katz ADL + Lawton IADL)
// ─────────────────────────────────────────────
const EqDaily = ({ t, data, set }) => {
  const adl = data.adl || {};
  const iadl = data.iadl || {};
  const setAdl = (k, v) => set('adl', { ...adl, [k]: v });
  const setIadl = (k, v) => set('iadl', { ...iadl, [k]: v });

  const Grid = ({ items, values, onSet }) => (
    <div style={{
      background: 'var(--eq-surface)',
      border: '1.5px solid var(--eq-line)',
      borderRadius: 'var(--eq-r-md)',
      overflow: 'hidden',
    }}>
      {items.map((row, i) => (
        <div key={row.k} style={{
          display: 'grid',
          gridTemplateColumns: '1fr',
          padding: '12px 14px',
          borderTop: i === 0 ? 0 : '1px solid var(--eq-line)',
        }}>
          <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--eq-ink)', marginBottom: 8 }}>
            {row.l}
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            {t.daily.levels.map(lvl => {
              const on = values[row.k] === lvl.v;
              return (
                <button key={lvl.v}
                  onClick={() => onSet(row.k, lvl.v)}
                  style={{
                    flex: 1, height: 36, borderRadius: 8,
                    background: on ? 'var(--eq-ink)' : 'var(--eq-surface-2)',
                    color: on ? 'var(--eq-surface)' : 'var(--eq-ink-2)',
                    fontSize: 12, fontWeight: 500, border: 0,
                    fontFamily: 'inherit', cursor: 'pointer',
                    transition: 'background 140ms',
                  }}>
                  {lvl.l}
                </button>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );

  return (
    <div style={{ padding: '0 24px 40px' }}>
      <EqTitle title={t.daily.title} sub={t.daily.sub} icon="sparkle" accent="var(--eq-sky)" />

      <div style={{ marginTop: 4 }}>
        <div style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: 'var(--eq-sage-deep)',
          marginBottom: 4, display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <EqIcon name="heart" size={12} /> {t.daily.adlHead}
        </div>
        <div style={{ fontSize: 12, color: 'var(--eq-muted)', marginBottom: 10 }}>{t.daily.adlHint}</div>
        <Grid items={t.daily.adls} values={adl} onSet={setAdl} />
      </div>

      <div style={{ marginTop: 22 }}>
        <div style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: 'var(--eq-sage-deep)',
          marginBottom: 4, display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <EqIcon name="home" size={12} /> {t.daily.iadlHead}
        </div>
        <div style={{ fontSize: 12, color: 'var(--eq-muted)', marginBottom: 10 }}>{t.daily.iadlHint}</div>
        <Grid items={t.daily.iadls} values={iadl} onSet={setIadl} />
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────
// Step — SDoH (Life & community)
// ─────────────────────────────────────────────
const EqSdoh = ({ t, data, set }) => {
  const [openK, setOpenK] = React.useState(t.sdoh.domains[0]?.k);
  const sdoh = data.sdoh || {};
  const setSd = (k, v) => set('sdoh', { ...sdoh, [k]: v });

  const answered = (domain) => domain.qs.filter(q => {
    const a = sdoh[q.k];
    return q.multi ? (Array.isArray(a) && a.length > 0) : !!a;
  }).length;

  return (
    <div style={{ padding: '0 24px 40px' }}>
      <EqTitle title={t.sdoh.title} sub={t.sdoh.sub} icon="heart" accent="var(--eq-berry)" />

      <div style={{
        padding: '10px 14px', marginBottom: 14,
        background: 'var(--eq-surface-2)', border: '1.5px solid var(--eq-line)',
        borderRadius: 'var(--eq-r-md)',
        fontSize: 12, color: 'var(--eq-ink-2)',
        display: 'flex', alignItems: 'flex-start', gap: 8,
      }}>
        <EqIcon name="shield" size={14} />
        <span style={{ flex: 1 }}>{t.sdoh.privacy}</span>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {t.sdoh.domains.map(domain => {
          const open = openK === domain.k;
          const done = answered(domain);
          const total = domain.qs.length;
          return (
            <div key={domain.k} style={{
              background: 'var(--eq-surface)',
              border: '1.5px solid ' + (open ? 'var(--eq-ink)' : 'var(--eq-line)'),
              borderRadius: 'var(--eq-r-md)',
              overflow: 'hidden',
              transition: 'border-color 140ms',
            }}>
              <button onClick={() => setOpenK(open ? null : domain.k)} style={{
                width: '100%', display: 'flex', alignItems: 'center', gap: 12,
                padding: '14px 14px', background: 'transparent', border: 0, cursor: 'pointer',
                fontFamily: 'inherit', textAlign: 'left',
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10,
                  background: domain.accent, display: 'grid', placeItems: 'center', flexShrink: 0,
                }}>
                  <EqIcon name={domain.icon} size={17} stroke={1.6} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 15 }}>{domain.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--eq-muted)' }}>
                    {done} / {total} answered{domain.optionalNote ? ' · optional' : ''}
                  </div>
                </div>
                <div style={{
                  width: 28, height: 28, borderRadius: 999,
                  background: 'var(--eq-surface-2)', display: 'grid', placeItems: 'center',
                  transform: open ? 'rotate(180deg)' : 'rotate(0)',
                  transition: 'transform 180ms',
                }}>
                  <EqIcon name="arrowRight" size={12} stroke={2} />
                </div>
              </button>

              {open && (
                <div style={{ padding: '4px 14px 16px', borderTop: '1px solid var(--eq-line)' }}>
                  {domain.optionalNote && (
                    <div style={{
                      marginTop: 10, padding: '8px 10px',
                      background: 'color-mix(in srgb, var(--eq-warn) 12%, var(--eq-surface-2))',
                      borderRadius: 8, fontSize: 11, color: 'var(--eq-ink-2)',
                    }}>
                      {domain.optionalNote}
                    </div>
                  )}
                  {domain.qs.map(q => {
                    const a = sdoh[q.k];
                    return (
                      <div key={q.k} style={{ marginTop: 14 }}>
                        <div style={{
                          fontSize: 13, fontWeight: 500, color: 'var(--eq-ink)',
                          lineHeight: 1.4, marginBottom: 8, textWrap: 'pretty',
                        }}>
                          {q.q}
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                          {q.opts.map(opt => {
                            const on = q.multi
                              ? (Array.isArray(a) && a.includes(opt.v))
                              : a === opt.v;
                            return (
                              <button key={opt.v}
                                onClick={() => {
                                  if (q.multi) {
                                    const list = Array.isArray(a) ? a : [];
                                    const next = list.includes(opt.v)
                                      ? list.filter(x => x !== opt.v)
                                      : [...list, opt.v];
                                    setSd(q.k, next);
                                  } else {
                                    setSd(q.k, opt.v);
                                  }
                                }}
                                style={{
                                  display: 'flex', alignItems: 'center', gap: 10,
                                  padding: '10px 12px',
                                  background: on ? 'var(--eq-ink)' : 'var(--eq-surface-2)',
                                  color: on ? 'var(--eq-surface)' : 'var(--eq-ink)',
                                  border: '1.5px solid ' + (on ? 'var(--eq-ink)' : 'transparent'),
                                  borderRadius: 10,
                                  fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
                                  cursor: 'pointer', textAlign: 'left',
                                  transition: 'all 140ms',
                                }}>
                                <span style={{
                                  width: 18, height: 18, borderRadius: q.multi ? 5 : 999,
                                  border: '1.5px solid ' + (on ? 'var(--eq-surface)' : 'var(--eq-line)'),
                                  background: on ? 'var(--eq-surface)' : 'transparent',
                                  display: 'grid', placeItems: 'center', flexShrink: 0,
                                }}>
                                  {on && <EqIcon name="check" size={10} stroke={3} color="var(--eq-ink)" />}
                                </span>
                                <span style={{ flex: 1 }}>{opt.l}</span>
                              </button>
                            );
                          })}
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────
// Step — Health (gated if "share" consent was not given)
// ─────────────────────────────────────────────
const EqHealth = ({ t, data, set }) => {
  const toggleCond = (c) => {
    const list = data.conditions || [];
    const next = list.includes(c) ? list.filter(x => x !== c) : [...list, c];
    set('conditions', next);
  };
  const choice = data.healthChoice; // 'now' | 'later' | undefined

  if (!choice) {
    return (
      <div style={{ padding: '0 24px 40px' }}>
        <EqTitle title={t.health.title} sub={t.health.sub} icon="heart" accent="var(--eq-berry)" />
        <div style={{
          marginTop: 4, padding: 20,
          background: 'var(--eq-surface)',
          border: '1.5px solid var(--eq-line)',
          borderRadius: 'var(--eq-r-lg)',
          display: 'flex', flexDirection: 'column', gap: 14,
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: 'color-mix(in srgb, var(--eq-sage) 22%, var(--eq-surface-2))',
            display: 'grid', placeItems: 'center',
          }}>
            <EqIcon name="heart" size={20} />
          </div>
          <div style={{ fontWeight: 600, fontSize: 17, fontFamily: 'var(--eq-serif)', lineHeight: 1.3 }}>
            {t.health.chooseHead}
          </div>
          <div style={{ fontSize: 13.5, color: 'var(--eq-ink-2)', lineHeight: 1.5, textWrap: 'pretty' }}>
            {t.health.chooseBody}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 6 }}>
            <button onClick={() => set('healthChoice', 'now')}
                    style={{
                      textAlign: 'left', padding: 14,
                      background: 'var(--eq-surface-2)',
                      border: '1.5px solid var(--eq-line)',
                      borderRadius: 'var(--eq-r-md)',
                      display: 'flex', gap: 12, alignItems: 'flex-start',
                    }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'color-mix(in srgb, var(--eq-sage) 25%, white)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                <EqIcon name="edit" size={14} stroke={2.2} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14.5, marginBottom: 2 }}>{t.health.chooseNowTitle}</div>
                <div style={{ fontSize: 12.5, color: 'var(--eq-ink-2)', lineHeight: 1.4 }}>{t.health.chooseNowBody}</div>
              </div>
            </button>

            <button onClick={() => { set('healthChoice', 'later'); set('healthSkipped', true); }}
                    style={{
                      textAlign: 'left', padding: 14,
                      background: 'var(--eq-surface-2)',
                      border: '1.5px solid var(--eq-line)',
                      borderRadius: 'var(--eq-r-md)',
                      display: 'flex', gap: 12, alignItems: 'flex-start',
                    }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'color-mix(in srgb, var(--eq-warn) 22%, white)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                <EqIcon name="mail" size={14} stroke={2.2} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14.5, marginBottom: 2 }}>{t.health.chooseLaterTitle}</div>
                <div style={{ fontSize: 12.5, color: 'var(--eq-ink-2)', lineHeight: 1.4 }}>{t.health.chooseLaterBody}</div>
              </div>
            </button>
          </div>

          <div style={{
            marginTop: 4, padding: '10px 12px',
            background: 'color-mix(in srgb, var(--eq-sage) 12%, transparent)',
            border: '1px dashed color-mix(in srgb, var(--eq-sage-deep) 45%, transparent)',
            borderRadius: 'var(--eq-r-sm)',
            fontSize: 12, color: 'var(--eq-ink-2)', lineHeight: 1.45,
            display: 'flex', gap: 8, alignItems: 'flex-start',
          }}>
            <EqIcon name="shield" size={13} />
            <span style={{ flex: 1 }}>{t.health.chooseNote}</span>
          </div>
        </div>
      </div>
    );
  }

  if (choice === 'later') {
    return (
      <div style={{ padding: '0 24px 40px' }}>
        <EqTitle title={t.health.title} sub={t.health.sub} icon="heart" accent="var(--eq-berry)" />
        <div style={{
          marginTop: 4, padding: 20,
          background: 'color-mix(in srgb, var(--eq-warn) 10%, var(--eq-surface))',
          border: '1.5px solid color-mix(in srgb, var(--eq-warn) 35%, var(--eq-line))',
          borderRadius: 'var(--eq-r-lg)',
          display: 'flex', flexDirection: 'column', gap: 12,
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: 'color-mix(in srgb, var(--eq-warn) 22%, white)',
            display: 'grid', placeItems: 'center',
          }}>
            <EqIcon name="mail" size={18} />
          </div>
          <div style={{ fontWeight: 600, fontSize: 16, fontFamily: 'var(--eq-serif)' }}>
            {t.health.laterHead}
          </div>
          <div style={{ fontSize: 13, color: 'var(--eq-ink-2)', lineHeight: 1.5, textWrap: 'pretty' }}>
            {t.health.laterBody}
          </div>
          <button className="eq-btn-ghost" onClick={() => { set('healthChoice', null); set('healthSkipped', false); }}
                  style={{ alignSelf: 'flex-start', fontSize: 12, color: 'var(--eq-muted)', textDecoration: 'underline', textUnderlineOffset: 3, padding: '6px 0' }}>
            {t.health.laterChange}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div style={{ padding: '0 24px 40px' }}>
      <EqTitle title={t.health.title} sub={t.health.sub} icon="heart" accent="var(--eq-berry)" />

      <EqRow label={t.health.conditions} optional>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {t.health.condOpts.map((o) => (
            <button key={o} className="eq-chip"
                    data-on={(data.conditions || []).includes(o)}
                    onClick={() => toggleCond(o)}>
              {(data.conditions || []).includes(o) && <EqIcon name="check" size={12} stroke={2.5} />}
              {o}
            </button>
          ))}
        </div>
      </EqRow>

      <EqRow label={t.health.meds} optional>
        <textarea className="eq-field" rows={3} value={data.meds || ''} onChange={(e) => set('meds', e.target.value)}
                  placeholder={t.health.medsPh} />
      </EqRow>

      <EqRow label={t.health.provider}>
        <div style={{ display: 'flex', gap: 8 }}>
          {t.health.providerOpts.map((o) => (
            <button key={o} className="eq-chip" data-on={data.provider === o} onClick={() => set('provider', o)}>
              {o}
            </button>
          ))}
        </div>
      </EqRow>

      <EqRow label={t.health.insurance}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {t.health.insuranceOpts.map((o) => (
            <EqOption key={o} on={data.insurance === o} onClick={() => set('insurance', o)}>
              {o}
            </EqOption>
          ))}
        </div>
      </EqRow>
    </div>
  );
};

// ─────────────────────────────────────────────
// Step 5 — Access
// ─────────────────────────────────────────────
const EqAccess = ({ t, data, set }) => {
  const toggleMob = (c) => {
    const list = data.mobility || [];
    const next = list.includes(c) ? list.filter(x => x !== c) : [...list, c];
    set('mobility', next);
  };
  return (
    <div style={{ padding: '0 24px 40px' }}>
      <EqTitle title={t.access.title} sub={t.access.sub} icon="car" accent="var(--eq-sage)" />

      <EqRow label={t.access.transport}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {t.access.transportOpts.map((o) => (
            <EqOption key={o} on={data.transport === o} onClick={() => set('transport', o)}>
              {o}
            </EqOption>
          ))}
        </div>
      </EqRow>

      <EqRow label={t.access.mobility} optional>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {t.access.mobOpts.map((o) => (
            <button key={o} className="eq-chip"
                    data-on={(data.mobility || []).includes(o)}
                    onClick={() => toggleMob(o)}>
              {o}
            </button>
          ))}
        </div>
      </EqRow>

      <EqRow label={t.access.distance} hint={t.access.hint}>
        <input className="eq-field" inputMode="numeric" value={data.distance || ''}
               onChange={(e) => set('distance', e.target.value)} placeholder="12" />
      </EqRow>
    </div>
  );
};

// ─────────────────────────────────────────────
// Step 6 — Services (card grid)
// ─────────────────────────────────────────────
const EqServices = ({ t, data, set }) => {
  const toggle = (k) => {
    const list = data.services || [];
    const next = list.includes(k) ? list.filter(x => x !== k) : [...list, k];
    set('services', next);
  };
  const iconFor = { visits: 'heart', rides: 'car', meds: 'pill', wellness: 'phone', meals: 'home', mental: 'users', equip: 'hand' };
  const accent = { visits: 'var(--eq-berry)', rides: 'var(--eq-sage)', meds: 'var(--eq-clay)', wellness: 'var(--eq-sky)', meals: 'var(--eq-butter)', mental: 'var(--eq-sage)', equip: 'var(--eq-clay)' };
  return (
    <div style={{ padding: '0 24px 40px' }}>
      <EqTitle title={t.services.title} sub={t.services.sub} icon="sparkle" accent="var(--eq-butter)" />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {t.services.serviceOpts.map((s) => {
          const on = (data.services || []).includes(s.key);
          return (
            <button key={s.key}
                    onClick={() => toggle(s.key)}
                    style={{
                      background: 'var(--eq-surface)',
                      border: '1.5px solid var(--eq-line)',
                      borderColor: on ? 'var(--eq-ink)' : 'var(--eq-line)',
                      borderRadius: 'var(--eq-r-md)',
                      padding: 14,
                      textAlign: 'left',
                      display: 'flex',
                      flexDirection: 'column',
                      gap: 8,
                      minHeight: 130,
                      position: 'relative',
                      transition: 'border-color 140ms, transform 120ms',
                    }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10,
                background: accent[s.key], display: 'grid', placeItems: 'center',
              }}>
                <EqIcon name={iconFor[s.key]} size={18} stroke={1.6} />
              </div>
              <div style={{ fontWeight: 600, fontSize: 14, lineHeight: 1.2 }}>{s.title}</div>
              <div style={{ fontSize: 12, color: 'var(--eq-muted)', lineHeight: 1.3 }}>{s.sub}</div>
              <div style={{
                position: 'absolute', top: 10, right: 10,
                width: 22, height: 22, borderRadius: 7,
                border: '1.5px solid ' + (on ? 'var(--eq-ink)' : 'var(--eq-line)'),
                background: on ? 'var(--eq-ink)' : 'transparent',
                color: 'white',
                display: 'grid', placeItems: 'center',
              }}>
                {on && <EqIcon name="check" size={13} stroke={2.5} />}
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────
// Step 7 — Consent
// ─────────────────────────────────────────────
const EqConsent = ({ t, data, set }) => {
  const toggle = (k) => set('consents', { ...(data.consents || {}), [k]: !(data.consents || {})[k] });
  const togglePhysical = (k) => {
    const cur = (data.consents || {})[k + '_physical'];
    set('consents', { ...(data.consents || {}), [k + '_physical']: !cur });
  };
  return (
    <div style={{ padding: '0 24px 40px' }}>
      <EqTitle title={t.consent.title} sub={t.consent.sub} icon="shield" accent="var(--eq-sage)" />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {t.consent.items.map((c) => {
          if (c.physical) {
            const requested = !!(data.consents || {})[c.key + '_physical'];
            return (
              <div key={c.key} style={{
                background: 'var(--eq-surface)',
                border: '1.5px dashed var(--eq-line)',
                borderRadius: 'var(--eq-r-md)',
                padding: 16,
                display: 'flex', gap: 14, textAlign: 'left',
                position: 'relative',
              }}>
                <div style={{
                  width: 24, height: 24, borderRadius: 7, flexShrink: 0,
                  background: 'color-mix(in srgb, var(--eq-warn) 18%, var(--eq-surface-2))',
                  color: 'var(--eq-warn)',
                  display: 'grid', placeItems: 'center',
                  marginTop: 2,
                }}>
                  <EqIcon name="edit" size={12} stroke={2.2} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 15, display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4, flexWrap: 'wrap' }}>
                    {c.title}
                    <span style={{
                      fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
                      textTransform: 'uppercase', color: 'var(--eq-warn)',
                      background: 'color-mix(in srgb, var(--eq-warn) 15%, transparent)',
                      padding: '2px 8px', borderRadius: 999,
                    }}>Paper form</span>
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--eq-ink-2)', lineHeight: 1.45, textWrap: 'pretty', marginBottom: 10 }}>
                    {c.body}
                  </div>
                  <button onClick={() => togglePhysical(c.key)}
                          style={{
                            display: 'inline-flex', alignItems: 'center', gap: 8,
                            padding: '8px 12px',
                            fontSize: 13, fontWeight: 500,
                            background: requested ? 'color-mix(in srgb, var(--eq-sage) 22%, var(--eq-surface))' : 'var(--eq-surface-2)',
                            border: '1.5px solid ' + (requested ? 'var(--eq-sage-deep)' : 'var(--eq-line)'),
                            color: requested ? 'var(--eq-sage-deep)' : 'var(--eq-ink)',
                            borderRadius: 'var(--eq-r-sm)',
                            transition: 'all 140ms',
                          }}>
                    <EqIcon name={requested ? 'check' : 'mail'} size={14} stroke={2.2} />
                    {requested ? c.physicalChosen : c.physicalCta}
                  </button>
                </div>
              </div>
            );
          }
          const on = !!(data.consents || {})[c.key];
          return (
            <button key={c.key} onClick={() => toggle(c.key)}
                    style={{
                      background: 'var(--eq-surface)',
                      border: '1.5px solid ' + (on ? 'var(--eq-ink)' : 'var(--eq-line)'),
                      borderRadius: 'var(--eq-r-md)',
                      padding: 16,
                      textAlign: 'left',
                      display: 'flex',
                      gap: 14,
                      transition: 'border-color 140ms',
                    }}>
              <div style={{
                width: 24, height: 24, borderRadius: 7, flexShrink: 0,
                border: '1.5px solid ' + (on ? 'var(--eq-ink)' : 'var(--eq-line)'),
                background: on ? 'var(--eq-ink)' : 'transparent',
                color: 'white',
                display: 'grid', placeItems: 'center',
                marginTop: 2,
              }}>
                {on && <EqIcon name="check" size={14} stroke={2.5} />}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 15, display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  {c.title}
                  {c.required && <span style={{
                    fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
                    textTransform: 'uppercase', color: 'var(--eq-warn)',
                    background: 'color-mix(in srgb, var(--eq-warn) 15%, transparent)',
                    padding: '2px 8px', borderRadius: 999,
                  }}>{t.common.required}</span>}
                </div>
                <div style={{ fontSize: 13, color: 'var(--eq-ink-2)', lineHeight: 1.45, textWrap: 'pretty' }}>
                  {c.body}
                </div>
              </div>
            </button>
          );
        })}
      </div>

      <button className="eq-btn-ghost" style={{
        marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 6,
        fontSize: 13, fontWeight: 500, color: 'var(--eq-sage-deep)',
        textDecoration: 'underline', textUnderlineOffset: 3,
      }}>
        <EqIcon name="info" size={14} />{t.consent.readNotice}
      </button>
    </div>
  );
};

// ─────────────────────────────────────────────
// Step 8 — Signature
// ─────────────────────────────────────────────
const EqSign = ({ t, data, set }) => {
  const [mode, setMode] = React.useState(data.sigMode || 'draw');
  const canvasRef = React.useRef(null);
  const drawing = React.useRef(false);
  const last = React.useRef(null);

  const resize = () => {
    const c = canvasRef.current; if (!c) return;
    const rect = c.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    c.width = rect.width * dpr;
    c.height = rect.height * dpr;
    const ctx = c.getContext('2d');
    ctx.scale(dpr, dpr);
    ctx.lineWidth = 2.2;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.strokeStyle = '#1C2620';
  };

  React.useEffect(() => { resize(); }, [mode]);

  const xy = (e) => {
    const c = canvasRef.current; const rect = c.getBoundingClientRect();
    const point = e.touches ? e.touches[0] : e;
    return [point.clientX - rect.left, point.clientY - rect.top];
  };
  const start = (e) => {
    e.preventDefault(); drawing.current = true; last.current = xy(e);
    set('hasSig', true);
  };
  const move = (e) => {
    if (!drawing.current) return;
    e.preventDefault();
    const [x, y] = xy(e);
    const ctx = canvasRef.current.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(last.current[0], last.current[1]);
    ctx.lineTo(x, y);
    ctx.stroke();
    last.current = [x, y];
  };
  const end = () => { drawing.current = false; };
  const clear = () => {
    const c = canvasRef.current;
    const ctx = c.getContext('2d');
    ctx.clearRect(0, 0, c.width, c.height);
    set('hasSig', false);
  };

  return (
    <div style={{ padding: '0 24px 40px' }}>
      <EqTitle title={t.sign.title} sub={t.sign.sub} icon="pen" accent="var(--eq-clay)" />

      <div className="seg" style={{
        display: 'flex', gap: 4, background: 'var(--eq-surface-2)',
        borderRadius: 999, padding: 4, marginBottom: 14,
      }}>
        {[{ k: 'draw', l: t.sign.draw }, { k: 'type', l: t.sign.typed }].map((m) => (
          <button key={m.k}
                  onClick={() => { setMode(m.k); set('sigMode', m.k); }}
                  style={{
                    flex: 1, height: 40, borderRadius: 999,
                    background: mode === m.k ? 'var(--eq-ink)' : 'transparent',
                    color: mode === m.k ? 'var(--eq-surface)' : 'var(--eq-ink-2)',
                    fontWeight: 500, fontSize: 14,
                  }}>
            {m.l}
          </button>
        ))}
      </div>

      {mode === 'draw' ? (
        <div style={{ position: 'relative' }}>
          <canvas ref={canvasRef} className="eq-sig"
                  style={{ height: 180 }}
                  onMouseDown={start} onMouseMove={move} onMouseUp={end} onMouseLeave={end}
                  onTouchStart={start} onTouchMove={move} onTouchEnd={end} />
          <button onClick={clear} className="eq-chip" style={{ position: 'absolute', top: 10, right: 10, background: 'var(--eq-surface)' }}>
            <EqIcon name="x" size={12} />{t.sign.clear}
          </button>
          <div style={{ position: 'absolute', bottom: 14, left: 20, right: 20, height: 1, background: 'var(--eq-line)', pointerEvents: 'none' }} />
          <div style={{ position: 'absolute', bottom: 18, left: 20, fontSize: 10, color: 'var(--eq-muted)', pointerEvents: 'none', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            × Sign above
          </div>
        </div>
      ) : (
        <div>
          <input className="eq-field" value={data.typedSig || ''} onChange={(e) => { set('typedSig', e.target.value); set('hasSig', !!e.target.value); }}
                 placeholder={t.sign.typeHere}
                 style={{ fontFamily: 'var(--eq-serif)', fontSize: 22, height: 72 }} />
        </div>
      )}

      <div style={{
        marginTop: 16, padding: 14,
        background: 'var(--eq-surface-2)', borderRadius: 'var(--eq-r-md)',
        border: '1.5px solid var(--eq-line)',
        fontSize: 13, color: 'var(--eq-ink-2)', lineHeight: 1.45,
      }}>
        {t.sign.agree}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────
// Confirmation
// ─────────────────────────────────────────────
const EqDone = ({ t, code, onRestart, onPrint }) => (
  <div className="eq-scroll" style={{
    flex: 1, display: 'flex', flexDirection: 'column',
    padding: '0 24px 24px', position: 'relative', overflow: 'hidden',
  }}>
    <div style={{ position: 'absolute', top: -40, right: -40, pointerEvents: 'none' }}>
      <EqBlob color="var(--eq-sage)" size={220} seed={7} opacity={0.7} />
    </div>
    <div style={{ position: 'absolute', top: 110, left: -30, pointerEvents: 'none' }}>
      <EqBlob color="var(--eq-butter)" size={130} seed={4} opacity={0.7} />
    </div>

    <div style={{ marginTop: 60, position: 'relative' }}>
      <div style={{
        width: 72, height: 72, borderRadius: 24,
        background: 'var(--eq-ink)', color: 'var(--eq-sage)',
        display: 'grid', placeItems: 'center',
        marginBottom: 22,
      }}>
        <EqIcon name="check" size={36} stroke={2.2} color="var(--eq-sage)" />
      </div>
      <h1 className="eq-display" style={{ fontSize: 44, margin: 0, lineHeight: 1, color: 'var(--eq-ink)' }}>
        {t.done.title}
      </h1>
      <p style={{ marginTop: 12, fontSize: 16, color: 'var(--eq-ink-2)', lineHeight: 1.4 }}>
        {t.done.sub}
      </p>
    </div>

    <div className="eq-card" style={{ marginTop: 24, padding: 20, position: 'relative' }}>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--eq-muted)', marginBottom: 6 }}>
        {t.done.codeLabel}
      </div>
      <div style={{
        fontFamily: 'var(--eq-mono)', fontSize: 30, letterSpacing: '0.1em',
        color: 'var(--eq-ink)', fontWeight: 600,
      }}>
        {code}
      </div>
    </div>

    <div style={{ marginTop: 24, position: 'relative' }}>
      <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--eq-ink-2)', marginBottom: 12 }}>
        {t.done.next}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {t.done.steps.map((s, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <div style={{
              width: 28, height: 28, borderRadius: 999,
              background: 'var(--eq-sage)', color: 'var(--eq-ink)',
              display: 'grid', placeItems: 'center',
              fontWeight: 600, fontSize: 13,
              fontFamily: 'var(--eq-serif)',
              flexShrink: 0,
            }}>
              {i + 1}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 15 }}>{s.t}</div>
              <div style={{ fontSize: 13, color: 'var(--eq-muted)' }}>{s.s}</div>
            </div>
          </div>
        ))}
      </div>
    </div>

    <div style={{
      marginTop: 20, padding: 14, position: 'relative',
      background: 'var(--eq-surface-2)', borderRadius: 'var(--eq-r-md)',
      border: '1.5px solid var(--eq-line)',
      fontSize: 13, color: 'var(--eq-ink-2)', lineHeight: 1.45,
      display: 'flex', gap: 10, alignItems: 'flex-start',
    }}>
      <EqIcon name="phone" size={16} />
      <span>{t.done.callout}</span>
    </div>

    <div style={{ flex: 1 }} />

    <div style={{ display: 'flex', gap: 10, marginTop: 24, position: 'relative' }}>
      <button className="eq-btn eq-btn-soft" onClick={onPrint} style={{ flex: 1 }}>
        <EqIcon name="printer" size={16} />{t.done.print}
      </button>
      <button className="eq-btn eq-btn-primary" onClick={onRestart} style={{ flex: 1 }}>
        {t.done.restart}
      </button>
    </div>
  </div>
);

Object.assign(window, {
  EqLaunchScreen, EqCoordScreen,
  EqAbout, EqContact, EqHouse, EqDaily, EqSdoh, EqHealth, EqAccess, EqServices, EqConsent, EqSign,
  EqDone,
});