// ===== PWD ASSISTANCE (Persons With Disabilities) =====

const pwd_services = [
  { id: 1, title: 'Request On-Road Assistance', desc: 'Alert nearby responders & LGU desks that a PWD needs help at your location.', icon: '🤝', color: '#2556a8', cta: 'Request help' },
  { id: 2, title: 'Accessible Route Finder', desc: 'Routes with curb ramps, footbrid-free crossings, and step-free transfers.', icon: '♿', color: '#00c48c', cta: 'Find route' },
  { id: 3, title: 'PWD Parking Locator', desc: 'Nearest reserved PWD parking bays with live availability.', icon: '🅿️', color: '#7b2d8b', cta: 'View map' },
  { id: 4, title: 'Priority Emergency Response', desc: 'Your PWD profile is shared with responders for faster, tailored help.', icon: '🚑', color: '#ff4757', cta: 'Set up' },
];

const pwd_hotlines = [
  { id: 1, name: 'NCDA (National Council on Disability Affairs)', num: '(02) 8932 6422', desc: 'PWD concerns & assistance', icon: '🏛️', color: '#2556a8' },
  { id: 2, name: 'DOH PWD Health Assistance', num: '1555', desc: 'Medical & accessibility support', icon: '🏥', color: '#00c48c' },
  { id: 3, name: 'Emergency Hotline', num: '911', desc: 'Police · Fire · Medical', icon: '🚨', color: '#ff4757' },
];

function PWDScreen({ t, go, user, updateUser }) {
  const u = user || {};
  const a11y = u.a11y || {};
  const [toast, setToast] = useState('');
  const note = (m) => { setToast(m); setTimeout(() => setToast(''), 2000); };

  const toggle = (key, label) => {
    const next = { ...a11y, [key]: !a11y[key] };
    updateUser({ a11y: next });
    note(`${label} ${next[key] ? 'on' : 'off'}`);
  };
  const registered = !!u.pwdId;

  // ----- Accessible ride booking -----
  const [booking, setBooking] = useState(false);
  const [bk, setBk] = useState({ from: '', to: '', date: '', time: '', vehicle: 'wheelchair', companion: false, notes: '' });
  const setF = (k, v) => setBk(s => ({ ...s, [k]: v }));
  const [confirmed, setConfirmed] = useState(null);
  const bkReady = bk.from.trim() && bk.to.trim() && bk.date && bk.time;
  const vehicles = [
    { id: 'wheelchair', label: 'Wheelchair van', icon: '♿', desc: 'Hydraulic lift · secures 1 chair' },
    { id: 'stretcher', label: 'Stretcher unit', icon: '🚑', desc: 'Reclining transport' },
    { id: 'standard', label: 'Assisted sedan', icon: '🚗', desc: 'Trained driver-assist' },
  ];
  const confirmBooking = () => {
    const ref = 'RIDE-' + Math.floor(100000 + Math.random() * 900000);
    setConfirmed({ ...bk, ref });
    setBooking(false);
  };
  const closeConfirm = () => { setConfirmed(null); setBk({ from: '', to: '', date: '', time: '', vehicle: 'wheelchair', companion: false, notes: '' }); };

  const fieldStyle = { width: '100%', border: `1.5px solid ${t.border}`, background: t.inputBg, color: t.text, borderRadius: 12, padding: '12px 13px', outline: 'none', fontWeight: 500, fontSize: 14 };
  const labelStyle = { fontSize: 12, fontWeight: 700, color: t.text, display: 'block', marginBottom: 6 };

  const options = [
    { key: 'bigText', icon: '🔤', label: 'Larger text', desc: 'Increase font size across the app' },
    { key: 'highContrast', icon: '🌗', label: 'High contrast', desc: 'Boost color contrast for readability' },
    { key: 'voice', icon: '🔊', label: 'Voice guidance', desc: 'Spoken prompts & screen reading' },
    { key: 'reduceMotion', icon: '🐢', label: 'Reduce motion', desc: 'Minimize animations & transitions' },
    { key: 'haptics', icon: '📳', label: 'Strong haptics', desc: 'Stronger vibration feedback' },
  ];

  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {toast && <div style={{ position: 'fixed', left: '50%', bottom: 92, transform: 'translateX(-50%)', background: t.navy, color: '#fff', padding: '11px 18px', borderRadius: 999, fontSize: 13, fontWeight: 600, zIndex: 60, boxShadow: '0 8px 24px rgba(0,0,0,0.25)' }}>{toast}</div>}

      {/* Hero */}
      <div style={{ borderRadius: 24, padding: 20, color: '#fff', position: 'relative', overflow: 'hidden', background: `linear-gradient(135deg, ${t.mid}, ${t.navy})`, boxShadow: '0 12px 30px rgba(37,86,168,0.28)' }}>
        <div style={{ position: 'absolute', right: -24, top: -24, width: 120, height: 120, borderRadius: '50%', background: 'rgba(255,255,255,0.07)' }} />
        <div style={{ position: 'relative' }}>
          <div style={{ fontSize: 34 }}>♿</div>
          <div style={{ fontSize: 19, fontWeight: 800, marginTop: 6 }}>PWD Assistance</div>
          <div style={{ fontSize: 12.5, opacity: 0.9, marginTop: 4, lineHeight: 1.45 }}>Accessibility tools and priority support for Persons With Disabilities, in line with RA 7277 (Magna Carta for PWDs).</div>
        </div>
      </div>

      {/* PWD ID card / registration */}
      <Card t={t} pad={0} style={{ overflow: 'hidden' }}>
        {registered ? (
          <div style={{ padding: 16, background: `linear-gradient(135deg, ${t.success}, #067a55)`, color: '#fff' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.06em', opacity: 0.85 }}>REPUBLIC OF THE PHILIPPINES · PWD ID</div>
                <div style={{ fontSize: 18, fontWeight: 800, marginTop: 6 }}>{u.name || 'PWD Member'}</div>
                <div style={{ fontSize: 12, opacity: 0.9, fontFamily: 'monospace', marginTop: 2 }}>{u.pwdId}</div>
              </div>
              <span style={{ fontSize: 30 }}>♿</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 14, fontSize: 11.5, fontWeight: 700 }}>
              <Icon name="check" size={14} /> Verified · priority assistance enabled
            </div>
          </div>
        ) : (
          <div style={{ padding: 16 }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <IconTile icon="🪪" color={t.mid} t={t} size={46} fontSize={22} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: t.text }}>Register your PWD ID</div>
                <div style={{ fontSize: 12.5, color: t.subtext, marginTop: 3, lineHeight: 1.45 }}>Link your DOH/LGU-issued PWD ID to unlock priority emergency response and tailored assistance.</div>
              </div>
            </div>
            <Btn t={t} full color={t.mid} icon="plus" style={{ marginTop: 13 }}
              onClick={() => { updateUser({ pwdId: 'PWD-NCR-' + Math.floor(100000 + Math.random() * 900000) }); note('PWD ID registered'); }}>
              Register PWD ID
            </Btn>
          </div>
        )}
      </Card>

      {/* Featured: Book accessible ride */}
      <button onClick={() => setBooking(true)} className="no-select" style={{
        textAlign: 'left', border: 'none', borderRadius: 20, padding: 18, color: '#fff', position: 'relative', overflow: 'hidden',
        background: `linear-gradient(135deg, ${t.accent}, #d8531a)`, boxShadow: '0 10px 26px rgba(255,107,43,0.32)',
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <div style={{ position: 'absolute', right: -20, top: -20, width: 90, height: 90, borderRadius: '50%', background: 'rgba(255,255,255,0.1)' }} />
        <div style={{ width: 52, height: 52, minWidth: 52, borderRadius: 15, background: 'rgba(255,255,255,0.2)', display: 'grid', placeItems: 'center', fontSize: 27 }}>🚐</div>
        <div style={{ flex: 1, position: 'relative' }}>
          <div style={{ fontSize: 16, fontWeight: 800 }}>Book an Accessible Ride</div>
          <div style={{ fontSize: 12.5, opacity: 0.92, marginTop: 3, lineHeight: 1.4 }}>Specialized PWD vehicle, door-to-door. Pick your route, date &amp; time.</div>
        </div>
        <Icon name="chevron-right" size={22} />
      </button>

      {/* Services */}
      <div>
        <SectionTitle t={t}>Assistance Services</SectionTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {pwd_services.map(s => (
            <Card key={s.id} t={t} pad={14}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <IconTile icon={s.icon} color={s.color} t={t} size={46} fontSize={22} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 700, color: t.text }}>{s.title}</div>
                  <div style={{ fontSize: 12.5, color: t.subtext, marginTop: 3, lineHeight: 1.45 }}>{s.desc}</div>
                </div>
              </div>
              <Btn t={t} full color={s.color} variant="soft" style={{ marginTop: 12, minHeight: 42, fontSize: 13 }}
                onClick={() => note(`${s.title} — request sent`)}>{s.cta}</Btn>
            </Card>
          ))}
        </div>
      </div>

      {/* Accessibility settings */}
      <div>
        <SectionTitle t={t}>Accessibility Settings</SectionTitle>
        <Card t={t} pad={6}>
          {options.map((o, i) => {
            const on = !!a11y[o.key];
            return (
              <div key={o.key} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 10px', borderTop: i > 0 ? `1px solid ${t.border}` : 'none' }}>
                <IconTile icon={o.icon} color={t.mid} t={t} size={40} radius={12} fontSize={19} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: t.text }}>{o.label}</div>
                  <div style={{ fontSize: 11.5, color: t.subtext, marginTop: 1 }}>{o.desc}</div>
                </div>
                <button onClick={() => toggle(o.key, o.label)} className="no-select" style={{
                  width: 50, height: 30, borderRadius: 999, border: 'none', background: on ? t.mid : t.border, position: 'relative', transition: 'background 0.25s', flexShrink: 0,
                }}>
                  <span style={{ position: 'absolute', top: 3, left: on ? 23 : 3, width: 24, height: 24, borderRadius: 999, background: '#fff', transition: 'left 0.25s', boxShadow: '0 1px 4px rgba(0,0,0,0.3)' }} />
                </button>
              </div>
            );
          })}
        </Card>
      </div>

      {/* Hotlines */}
      <div>
        <SectionTitle t={t}>PWD Support Hotlines</SectionTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {pwd_hotlines.map(h => (
            <a key={h.id} href={`tel:${h.num.replace(/[^\d]/g, '')}`} style={{ textDecoration: 'none' }}>
              <Card t={t} pad={13}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <IconTile icon={h.icon} color={h.color} t={t} size={44} fontSize={21} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 700, color: t.text, lineHeight: 1.25 }}>{h.name}</div>
                    <div style={{ fontSize: 12, color: t.subtext, marginTop: 1 }}>{h.desc}</div>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}>
                    <span style={{ fontSize: 14, fontWeight: 800, color: h.color }}>{h.num}</span>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 10.5, color: t.subtext, fontWeight: 700 }}><Icon name="phone" size={11} />Call</span>
                  </div>
                </div>
              </Card>
            </a>
          ))}
        </div>
      </div>

      {/* ===== Booking sheet ===== */}
      {booking && (
        <div onClick={() => setBooking(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 70, display: 'flex', alignItems: 'flex-end', animation: 'screenIn 0.2s ease' }}>
          <div onClick={e => e.stopPropagation()} style={{ width: '100%', maxWidth: 430, margin: '0 auto', background: t.bg, borderTopLeftRadius: 26, borderTopRightRadius: 26, padding: '10px 18px max(20px, env(safe-area-inset-bottom))', maxHeight: '92%', overflowY: 'auto' }}>
            <div style={{ width: 40, height: 4, borderRadius: 999, background: t.border, margin: '4px auto 14px' }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <span style={{ fontSize: 24 }}>🚐</span>
              <div style={{ flex: 1 }}>
                <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: t.text }}>Book Accessible Ride</h2>
                <div style={{ fontSize: 12, color: t.subtext }}>Specialized PWD vehicle · door-to-door</div>
              </div>
              <button onClick={() => setBooking(false)} className="no-select" style={{ width: 34, height: 34, borderRadius: 999, border: 'none', background: t.card, color: t.text, display: 'grid', placeItems: 'center' }}><Icon name="x" size={18} /></button>
            </div>

            {/* Route A → B */}
            <div style={{ display: 'flex', gap: 11, marginBottom: 14 }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 14 }}>
                <span style={{ width: 12, height: 12, borderRadius: 999, border: `3px solid ${t.success}` }} />
                <span style={{ width: 2, flex: 1, background: t.border, margin: '4px 0', minHeight: 26 }} />
                <span style={{ width: 12, height: 12, borderRadius: 3, background: t.danger }} />
              </div>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div>
                  <label style={labelStyle}>Pickup location (A)</label>
                  <input value={bk.from} onChange={e => setF('from', e.target.value)} placeholder="e.g. 12 Mabini St., Pasig City" style={fieldStyle} />
                </div>
                <div>
                  <label style={labelStyle}>Drop-off location (B)</label>
                  <input value={bk.to} onChange={e => setF('to', e.target.value)} placeholder="e.g. The Medical City, Ortigas" style={fieldStyle} />
                </div>
              </div>
            </div>

            {/* Date + time */}
            <div style={{ display: 'flex', gap: 11, marginBottom: 14 }}>
              <div style={{ flex: 1 }}>
                <label style={labelStyle}>Pickup date</label>
                <input type="date" value={bk.date} onChange={e => setF('date', e.target.value)} style={fieldStyle} />
              </div>
              <div style={{ flex: 1 }}>
                <label style={labelStyle}>Pickup time</label>
                <input type="time" value={bk.time} onChange={e => setF('time', e.target.value)} style={fieldStyle} />
              </div>
            </div>

            {/* Vehicle type */}
            <label style={labelStyle}>Vehicle type</label>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 14 }}>
              {vehicles.map(v => {
                const sel = bk.vehicle === v.id;
                return (
                  <button key={v.id} onClick={() => setF('vehicle', v.id)} className="no-select" style={{
                    display: 'flex', alignItems: 'center', gap: 12, border: `1.5px solid ${sel ? t.mid : t.border}`,
                    background: sel ? t.mid + (t.dark ? '24' : '12') : t.card, borderRadius: 14, padding: '11px 13px', minHeight: 54, textAlign: 'left',
                  }}>
                    <span style={{ fontSize: 22 }}>{v.icon}</span>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 700, color: t.text }}>{v.label}</div>
                      <div style={{ fontSize: 11.5, color: t.subtext }}>{v.desc}</div>
                    </div>
                    <span style={{ width: 20, height: 20, borderRadius: 999, border: `2px solid ${sel ? t.mid : t.border}`, background: sel ? t.mid : 'transparent', display: 'grid', placeItems: 'center' }}>{sel && <Icon name="check" size={12} color="#fff" />}</span>
                  </button>
                );
              })}
            </div>

            {/* Companion + notes */}
            <button onClick={() => setF('companion', !bk.companion)} className="no-select" style={{ display: 'flex', alignItems: 'center', gap: 11, background: 'transparent', border: 'none', padding: '2px 2px 12px', width: '100%' }}>
              <span style={{ width: 44, height: 26, borderRadius: 999, background: bk.companion ? t.mid : t.border, position: 'relative', transition: 'background 0.25s', flexShrink: 0 }}>
                <span style={{ position: 'absolute', top: 3, left: bk.companion ? 21 : 3, width: 20, height: 20, borderRadius: 999, background: '#fff', transition: 'left 0.25s' }} />
              </span>
              <span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>I'll bring a companion / carer</span>
            </button>
            <div style={{ marginBottom: 16 }}>
              <label style={labelStyle}>Special instructions (optional)</label>
              <textarea value={bk.notes} onChange={e => setF('notes', e.target.value)} rows={2} placeholder="e.g. ground-floor entrance, oxygen tank, ramp needed" style={{ ...fieldStyle, resize: 'none', lineHeight: 1.5 }} />
            </div>

            <Btn t={t} full color={bkReady ? t.accent : t.muted} onClick={() => bkReady && confirmBooking()} style={{ opacity: bkReady ? 1 : 0.5, minHeight: 52, fontSize: 15 }} icon="check">
              {bkReady ? 'Confirm booking' : 'Fill in route, date & time'}
            </Btn>
            <div style={{ fontSize: 11, color: t.subtext, textAlign: 'center', marginTop: 10, lineHeight: 1.4 }}>Free for registered PWDs within Metro Manila · subject to vehicle availability</div>
          </div>
        </div>
      )}

      {/* ===== Confirmation ===== */}
      {confirmed && (
        <div onClick={closeConfirm} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 75, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, animation: 'screenIn 0.2s ease' }}>
          <div onClick={e => e.stopPropagation()} style={{ width: '100%', maxWidth: 360, background: t.bg, borderRadius: 22, padding: 22, textAlign: 'center' }}>
            <div style={{ width: 72, height: 72, borderRadius: 999, background: t.success + (t.dark ? '2e' : '1c'), display: 'grid', placeItems: 'center', margin: '0 auto 14px', position: 'relative' }}>
              <div style={{ position: 'absolute', inset: 0, borderRadius: 999, border: `2px solid ${t.success}66`, animation: 'pulse-ring 2s infinite' }} />
              <span style={{ fontSize: 34 }}>🚐</span>
            </div>
            <h2 style={{ margin: 0, fontSize: 20, fontWeight: 800, color: t.text }}>Ride booked!</h2>
            <p style={{ margin: '6px 0 0', fontSize: 13, color: t.subtext, lineHeight: 1.5 }}>Your accessible ride is confirmed. A trained driver will contact you before pickup.</p>

            <div style={{ background: t.card, border: `1px solid ${t.border}`, borderRadius: 14, padding: 14, marginTop: 16, textAlign: 'left' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                <span style={{ fontSize: 11, color: t.subtext, fontWeight: 700 }}>BOOKING REF</span>
                <span style={{ fontSize: 13, fontWeight: 800, color: t.text, fontFamily: 'monospace' }}>{confirmed.ref}</span>
              </div>
              {[['From', confirmed.from], ['To', confirmed.to], ['Date', confirmed.date], ['Time', confirmed.time], ['Vehicle', vehicles.find(v => v.id === confirmed.vehicle)?.label]].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '6px 0', fontSize: 12.5 }}>
                  <span style={{ color: t.subtext, fontWeight: 600, flexShrink: 0 }}>{k}</span>
                  <span style={{ color: t.text, fontWeight: 600, textAlign: 'right' }}>{v}</span>
                </div>
              ))}
            </div>
            <Btn t={t} full color={t.mid} onClick={closeConfirm} style={{ marginTop: 16 }}>Done</Btn>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { PWDScreen });