// ProMTK — Screens, Part 3: Announcements, Messages, Voting, SOS, Profile, Onboarding/Login

// ─────────────────────────────────────────────────────────────
// 11. ANNOUNCEMENTS / NOTIFICATIONS
// ─────────────────────────────────────────────────────────────
const ScreenAnnouncements = ({ go }) => {
  const [tab, setTab] = React.useState(0);
  return (
    <div className="pm-fade">
      <div style={{ padding: '54px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <IconBtn name="chevronLeft" size={38} iconSize={18} bg="rgba(255,255,255,0.06)" onClick={() => go && go('home')}/>
        <h1 style={{ flex: 1, margin: 0, fontSize: 20, fontWeight: 700 }}>Elanlar</h1>
        <IconBtn name="check2" size={38} iconSize={18} bg="rgba(255,255,255,0.06)"/>
      </div>

      <div style={{ display: 'flex', gap: 6, background: pmTokens.bg3, margin: '16px 16px 0', borderRadius: 14, padding: 4 }}>
        {['Hamısı', 'Elanlar', 'Bildirişlər'].map((t, i) => (
          <button key={t} onClick={() => setTab(i)} className="pm-tap-soft" style={{
            flex: 1, padding: '10px 8px', borderRadius: 11, border: 'none', cursor: 'pointer',
            background: tab === i ? pmTokens.bg4 : 'transparent',
            color: tab === i ? pmTokens.fg : pmTokens.fg3,
            fontSize: 13, fontWeight: 600, fontFamily: pmTokens.font,
          }}>{t}</button>
        ))}
      </div>

      <div style={{ padding: '16px 20px 20px' }}>
        {[
          { tag: 'ACİL', color: pmTokens.danger, icon: 'drop', t: 'Sabah suyun verilməsi dayanacaq', d: '09:00-dan 15:00-dək planlı təmir işləri aparılacaq. Zəhmət olmasa tədbir görün.', time: '2 saat əvvəl', pinned: true },
          { tag: 'BİLDİRİŞ', color: pmTokens.brand, icon: 'wallet', t: 'MTK haqqı ödənilməsini unutmayın', d: 'Aprel ayı üçün 85.00 ₼ ödəməyiniz qalır. Son tarix: 30 Aprel.', time: '5 saat əvvəl' },
          { tag: 'ELAN', color: pmTokens.info, icon: 'elevator', t: 'Lift B texniki xidmət', d: 'Sabah saat 10:00-12:00 arası Lift B planlı texniki xidmət səbəbindən işləməyəcək.', time: 'Dünən 18:20' },
          { tag: 'İCLAS', color: pmTokens.warn, icon: 'users', t: 'Sakinlər iclası — 28 Apr', d: 'Həyət landşaftı və yeni uşaq meydançası ilə bağlı iclas. İştirakınız önəmlidir.', time: '3 gün əvvəl' },
          { tag: 'UĞUR', color: pmTokens.ok, icon: 'check2', t: 'Təmir sorğunuz tamamlandı', d: 'Çilçıraq dəyişdirildi. Zəhmət olmasa qiymətləndirin.', time: '14 Apr' },
        ].map((a, i) => (
          <Card key={i} style={{
            marginBottom: 10, padding: 14,
            borderLeft: a.pinned ? `3px solid ${a.color}` : `1px solid ${pmTokens.line}`,
            background: a.pinned ? 'linear-gradient(90deg, rgba(251,90,123,0.08), transparent 40%)' : pmTokens.bg3,
          }}>
            <div style={{ display: 'flex', alignItems: 'start', gap: 12 }}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: `${a.color}22`, color: a.color, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                <Icon name={a.icon} size={18}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <Pill color={a.color}>{a.tag}</Pill>
                  {a.pinned && <Icon name="pin" size={12} color={a.color}/>}
                </div>
                <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 4 }}>{a.t}</div>
                <div style={{ fontSize: 12, color: pmTokens.fg2, lineHeight: 1.5 }}>{a.d}</div>
                <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 8 }}>{a.time}</div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 12. MESSAGES
// ─────────────────────────────────────────────────────────────
const ScreenMessages = ({ go }) => {
  return (
    <div className="pm-fade">
      <div style={{ padding: '54px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <IconBtn name="chevronLeft" size={38} iconSize={18} bg="rgba(255,255,255,0.06)" onClick={() => go && go('home')}/>
        <h1 style={{ flex: 1, margin: 0, fontSize: 20, fontWeight: 700 }}>Mesajlar</h1>
        <IconBtn name="plus" size={38} iconSize={18} bg={pmTokens.gradient} color="#fff"/>
      </div>

      {/* Active conversation (to komendant) */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: pmTokens.bg3, margin: '20px 16px 0', borderRadius: pmTokens.r3, padding: 12, border: `1px solid ${pmTokens.line}` }}>
        <Avatar name="Eldar Komendant" size={46}/>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 700 }}>
            Eldar bəy <Icon name="shield" size={12} color={pmTokens.ok}/>
          </div>
          <div style={{ fontSize: 11, color: pmTokens.ok, display: 'flex', alignItems: 'center', gap: 4 }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: pmTokens.ok }}/> Onlayn · Komendant
          </div>
        </div>
        <IconBtn name="phone" size={38} iconSize={16} bg={pmTokens.bg4}/>
      </div>

      {/* Chat preview */}
      <div style={{ padding: '20px 20px 0' }}>
        {/* them */}
        <div style={{ marginBottom: 10 }}>
          <div style={{
            background: pmTokens.bg3, padding: '10px 14px', borderRadius: '16px 16px 16px 4px',
            maxWidth: '75%', fontSize: 13, lineHeight: 1.5, color: pmTokens.fg2,
            border: `1px solid ${pmTokens.line}`,
          }}>Salam Elvin bəy, nə edə bilərik sizin üçün?</div>
          <div style={{ fontSize: 10, color: pmTokens.fg3, marginTop: 4 }}>11:40</div>
        </div>
        {/* me */}
        <div style={{ marginBottom: 10, display: 'flex', justifyContent: 'flex-end', flexDirection: 'column', alignItems: 'flex-end' }}>
          <div style={{
            background: pmTokens.gradient, padding: '10px 14px', borderRadius: '16px 16px 4px 16px',
            maxWidth: '75%', fontSize: 13, lineHeight: 1.5, color: '#fff',
          }}>Salam, 12-ci mərtəbədə gecə səs-küy problemi var. Bir şey etmək olarmı?</div>
          <div style={{ fontSize: 10, color: pmTokens.fg3, marginTop: 4, display: 'flex', alignItems: 'center', gap: 4 }}>
            11:42 <Icon name="check2" size={11} color={pmTokens.info}/>
          </div>
        </div>
        {/* them */}
        <div style={{ marginBottom: 10 }}>
          <div style={{
            background: pmTokens.bg3, padding: '10px 14px', borderRadius: '16px 16px 16px 4px',
            maxWidth: '80%', fontSize: 13, lineHeight: 1.5, color: pmTokens.fg2,
            border: `1px solid ${pmTokens.line}`,
          }}>Rəsmi müraciət edin, bu gün özüm 1204-cü mənzil ilə danışaram.</div>
          <div style={{ fontSize: 10, color: pmTokens.fg3, marginTop: 4 }}>11:45</div>
        </div>
        {/* typing */}
        <div style={{ display: 'flex', gap: 4, padding: '10px 14px', background: pmTokens.bg3, borderRadius: 16, maxWidth: 70, border: `1px solid ${pmTokens.line}` }}>
          {[0,1,2].map(i => (
            <span key={i} style={{
              width: 6, height: 6, borderRadius: 3, background: pmTokens.fg3,
              animation: 'pm-breathe 1.2s ease-in-out infinite', animationDelay: `${i * 0.15}s`,
            }}/>
          ))}
        </div>
      </div>

      {/* Input */}
      <div style={{
        position: 'absolute', bottom: 38, left: 16, right: 16, zIndex: 10,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <div style={{
          flex: 1, height: 52, borderRadius: 26,
          background: pmTokens.bg3, border: `1px solid ${pmTokens.line}`,
          display: 'flex', alignItems: 'center', padding: '0 6px 0 18px', gap: 8,
        }}>
          <div style={{ flex: 1, fontSize: 13, color: pmTokens.fg3 }}>Mesaj yaz...</div>
          <IconBtn name="camera" size={36} iconSize={16} bg="transparent" color={pmTokens.fg3}/>
          <IconBtn name="mic" size={36} iconSize={16} bg="transparent" color={pmTokens.fg3}/>
        </div>
        <IconBtn name="send" size={52} iconSize={20} bg={pmTokens.gradient} color="#fff"/>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 13. VOTING
// ─────────────────────────────────────────────────────────────
const ScreenVote = ({ go }) => {
  const [selected, setSelected] = React.useState(1);
  const options = [
    { t: 'Klassik dəmir konstruksiya', sub: 'Davamlı, az baxım', v: 0.62, n: 34, color: pmTokens.brand },
    { t: 'Ağacdan ekoloji', sub: 'Uşaqlar üçün rahat', v: 0.28, n: 16, color: pmTokens.ok },
    { t: 'Qarışıq variant', sub: 'Hər iki materialdan', v: 0.10, n: 6, color: pmTokens.warn },
  ];
  return (
    <div className="pm-fade">
      <div style={{ padding: '54px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <IconBtn name="chevronLeft" size={38} iconSize={18} bg="rgba(255,255,255,0.06)" onClick={() => go && go('home')}/>
        <h1 style={{ flex: 1, margin: 0, fontSize: 20, fontWeight: 700 }}>Səsvermə</h1>
        <IconBtn name="more" size={38} iconSize={18} bg="rgba(255,255,255,0.06)"/>
      </div>

      {/* Hero */}
      <div style={{ padding: '20px 20px 0' }}>
        <Card style={{
          padding: 20, overflow: 'hidden', position: 'relative',
          background: 'linear-gradient(135deg, rgba(124,92,255,0.15), rgba(178,75,255,0.08))',
          border: `1px solid rgba(124,92,255,0.3)`,
        }}>
          <Pill color={pmTokens.brand}>Aktiv səsvermə</Pill>
          <div style={{ fontSize: 18, fontWeight: 800, marginTop: 10, lineHeight: 1.3 }}>
            Həyətdə uşaq meydançası üçün hansı variant?
          </div>
          <div style={{ display: 'flex', gap: 14, marginTop: 14, color: pmTokens.fg3, fontSize: 12 }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><Icon name="users" size={13}/> 56 / 120 səs</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><Icon name="clock" size={13}/> 3 gün qaldı</span>
          </div>
          <Progress value={56/120} color={pmTokens.gradient} height={6} style={{ marginTop: 10 }}/>
        </Card>
      </div>

      {/* Options */}
      <div style={{ padding: '20px 20px 0' }}>
        {options.map((o, i) => {
          const isSel = selected === i;
          return (
            <div key={i} onClick={() => setSelected(i)} className="pm-tap-soft" style={{
              position: 'relative', marginBottom: 10, overflow: 'hidden', cursor: 'pointer',
              background: pmTokens.bg3, borderRadius: pmTokens.r3,
              border: `2px solid ${isSel ? o.color : pmTokens.line}`,
              boxShadow: isSel ? `0 8px 24px -8px ${o.color}80` : 'none',
            }}>
              {/* Result bar */}
              <div style={{
                position: 'absolute', inset: 0, width: `${o.v * 100}%`,
                background: `linear-gradient(90deg, ${o.color}20, transparent)`,
              }}/>
              <div style={{ position: 'relative', padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{
                  width: 26, height: 26, borderRadius: 13, flexShrink: 0,
                  border: `2px solid ${isSel ? o.color : pmTokens.lineStrong}`,
                  background: isSel ? o.color : 'transparent',
                  display: 'grid', placeItems: 'center',
                }}>
                  {isSel && <Icon name="check" size={14} color="#fff"/>}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{o.t}</div>
                  <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 2 }}>{o.sub}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 16, fontWeight: 800, color: o.color }}>{Math.round(o.v * 100)}%</div>
                  <div style={{ fontSize: 10, color: pmTokens.fg3 }}>{o.n} səs</div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ padding: '16px 20px 0', fontSize: 11, color: pmTokens.fg3, display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon name="shield" size={12} color={pmTokens.ok}/> Səsiniz anonimdir və şifrələnmişdir
      </div>

      <div style={{ padding: '20px 20px 20px' }}>
        <Btn full icon="check" onClick={() => go && go('home')}>Səsimi ver</Btn>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 14. SOS — täcili yardım. Böyük basıb-saxla düyməsi, təcili xidmət
// nömrələri (real Azərbaycan nömrələri), bina əlaqələri.
// ─────────────────────────────────────────────────────────────
const ScreenSOS = ({ go }) => {
  const [holding, setHolding] = React.useState(false);
  const [progress, setProgress] = React.useState(0);
  const [triggered, setTriggered] = React.useState(false);
  const timerRef = React.useRef(null);
  const rafRef = React.useRef(null);

  const startHold = () => {
    if (triggered) return;
    setHolding(true);
    const start = performance.now();
    const tick = (now) => {
      const p = Math.min(1, (now - start) / 3000);
      setProgress(p);
      if (p >= 1) {
        setTriggered(true);
        setHolding(false);
      } else {
        rafRef.current = requestAnimationFrame(tick);
      }
    };
    rafRef.current = requestAnimationFrame(tick);
  };
  const endHold = () => {
    setHolding(false);
    cancelAnimationFrame(rafRef.current);
    if (!triggered) setProgress(0);
  };

  React.useEffect(() => () => { cancelAnimationFrame(rafRef.current); clearTimeout(timerRef.current); }, []);

  if (triggered) {
    return (
      <div className="pm-fade" style={{ minHeight: '100%', background: 'radial-gradient(80% 60% at 50% 20%, rgba(239,68,68,0.4), transparent 70%), ' + pmTokens.bg, paddingBottom: 40 }}>
        <div style={{ padding: '54px 20px 0', textAlign: 'center' }}>
          <div style={{ position: 'relative', width: 120, height: 120, margin: '0 auto 24px' }}>
            {[0,1,2].map(i => <div key={i} style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: `2px solid ${pmTokens.danger}`, animation: 'pm-pulse-ring 2.4s ease-out infinite', animationDelay: `${i*0.6}s` }}/>)}
            <div style={{ position: 'absolute', inset: 16, borderRadius: '50%', background: `linear-gradient(135deg, ${pmTokens.danger}, #B91C1C)`, display: 'grid', placeItems: 'center', boxShadow: `0 20px 40px -12px ${pmTokens.danger}80` }}>
              <Icon name="sos" size={48} color="#fff"/>
            </div>
          </div>
          <div style={{ fontSize: 26, fontWeight: 800, color: pmTokens.fg, letterSpacing: -0.6 }}>SOS göndərildi</div>
          <div style={{ fontSize: 14, color: pmTokens.fg2, marginTop: 8, maxWidth: 280, margin: '8px auto 0', lineHeight: 1.5 }}>Komendant, bina rəhbəri və 3 qonşunuz xəbərdarlıq aldı. Sizinlə əlaqə saxlanılacaq.</div>
        </div>
        <div style={{ padding: '28px 20px 0' }}>
          <Card style={{ padding: 0 }}>
            {[
              { n: 'Eldar Həsənov', r: 'Komendant · Bildiriş çatdı', t: 'İndi', i: 'shieldCheck', c: pmTokens.ok },
              { n: 'Nəriman Əliyev', r: 'Bina rəhbəri · Bildiriş çatdı', t: 'İndi', i: 'shieldCheck', c: pmTokens.ok },
              { n: '3 qonşu', r: 'Yaxın mənzillər · Bildiriş çatdı', t: '2s', i: 'users', c: pmTokens.ok },
              { n: '112 — Operator', r: 'Avtomatik zəng aktivləşir...', t: 'Zəng', i: 'phone', c: pmTokens.warn },
            ].map((it, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderBottom: i < 3 ? `1px solid ${pmTokens.line}` : 'none' }}>
                <div style={{ width: 38, height: 38, borderRadius: 10, background: `${it.c}22`, color: it.c, display: 'grid', placeItems: 'center' }}><Icon name={it.i} size={18}/></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: pmTokens.fg }}>{it.n}</div>
                  <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 2 }}>{it.r}</div>
                </div>
                <div style={{ fontSize: 11, fontWeight: 700, color: it.c }}>{it.t}</div>
              </div>
            ))}
          </Card>
        </div>
        <div style={{ padding: '20px 20px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <Btn variant="secondary" full onClick={() => { setTriggered(false); setProgress(0); }}>Yalanmış xəbərdarlıq</Btn>
          <Btn variant="danger" full icon="phone">112-ə zəng</Btn>
        </div>
      </div>
    );
  }

  return (
    <div className="pm-fade" style={{
      minHeight: '100%', paddingBottom: 28,
      background: 'radial-gradient(80% 60% at 50% 20%, rgba(239,68,68,0.25), transparent 65%), ' + pmTokens.bg,
    }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <IconBtn name="chevronLeft" size={40} iconSize={18} bg="rgba(255,255,255,0.06)" onClick={() => go && go('home')}/>
        <div style={{ flex: 1 }}>
          <h1 style={{ margin: 0, fontSize: 20, fontWeight: 800, letterSpacing: -0.4 }}>Təcili yardım</h1>
          <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 2 }}>24/7 aktiv · Geo-lokasiya açıqdır</div>
        </div>
      </div>

      {/* Big SOS button */}
      <div style={{ padding: '20px 20px 0', textAlign: 'center' }}>
        <div
          onPointerDown={startHold} onPointerUp={endHold} onPointerLeave={endHold}
          style={{ position: 'relative', width: 240, height: 240, margin: '0 auto', cursor: 'pointer', userSelect: 'none', touchAction: 'none' }}
        >
          {/* outer pulse */}
          {[0,1,2].map(i => (
            <div key={i} style={{
              position: 'absolute', inset: 0, borderRadius: '50%',
              border: `2px solid ${pmTokens.danger}`,
              animation: holding ? 'none' : 'pm-pulse-ring 2.4s ease-out infinite',
              animationDelay: `${i * 0.8}s`,
              opacity: holding ? 0 : 1,
            }}/>
          ))}
          {/* progress ring */}
          <svg width="240" height="240" style={{ position: 'absolute', inset: 0, transform: 'rotate(-90deg)' }}>
            <circle cx="120" cy="120" r="112" stroke={pmTokens.danger + '33'} strokeWidth="6" fill="none"/>
            <circle cx="120" cy="120" r="112" stroke={pmTokens.danger} strokeWidth="6" fill="none"
              strokeDasharray={2 * Math.PI * 112}
              strokeDashoffset={(2 * Math.PI * 112) * (1 - progress)}
              strokeLinecap="round" style={{ transition: 'stroke-dashoffset .1s linear' }}/>
          </svg>
          <div style={{
            position: 'absolute', inset: 22, borderRadius: '50%',
            background: holding
              ? 'linear-gradient(135deg, #DC2626, #7F1D1D)'
              : 'linear-gradient(135deg, #EF4444, #B91C1C)',
            color: '#fff', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            boxShadow: holding
              ? '0 30px 60px -10px rgba(239,68,68,0.8), inset 0 -4px 0 rgba(0,0,0,0.3)'
              : '0 20px 50px -10px rgba(239,68,68,0.6), inset 0 2px 0 rgba(255,255,255,0.3)',
            transform: holding ? 'scale(0.96)' : 'scale(1)',
            transition: 'transform .15s, box-shadow .25s',
          }}>
            <div style={{ fontSize: 56, fontWeight: 900, letterSpacing: 4, lineHeight: 1 }}>SOS</div>
            <div style={{ fontSize: 12, fontWeight: 700, opacity: .92, marginTop: 8, whiteSpace: 'nowrap' }}>
              {holding ? `${Math.ceil(3 - progress * 3)} saniyə...` : 'Basıb saxla'}
            </div>
          </div>
        </div>
        <div style={{ marginTop: 18, fontSize: 13, color: pmTokens.fg2, maxWidth: 300, margin: '18px auto 0', lineHeight: 1.5 }}>
          3 saniyə basıb saxlayın. Komendant, bina rəhbəri və yaxın qonşular xəbərdarlıq alacaq.
        </div>
      </div>

      {/* Emergency hotlines */}
      <div style={{ padding: '28px 20px 0' }}>
        <div style={{ fontSize: 11, fontWeight: 800, color: pmTokens.fg3, marginBottom: 10, letterSpacing: 0.8, textTransform: 'uppercase' }}>Təcili xidmətlər — Azərbaycan</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 8 }}>
          {[
            { n: '112', t: 'Vahid çağrı', c: pmTokens.danger, i: 'sos' },
            { n: '102', t: 'Polis', c: pmTokens.info, i: 'shield' },
            { n: '103', t: 'Təcili tibbi', c: pmTokens.ok, i: 'heart' },
            { n: '101', t: 'Yanğın', c: pmTokens.warn, i: 'flame' },
          ].map((s, i) => (
            <button key={i} className="pm-tap" style={{
              background: pmTokens.bg3, border: `1px solid ${pmTokens.line}`, borderRadius: 14, padding: 12,
              display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', fontFamily: pmTokens.font, color: pmTokens.fg, textAlign: 'left',
            }}>
              <div style={{ width: 38, height: 38, borderRadius: 11, background: `${s.c}22`, color: s.c, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                <Icon name={s.i} size={18}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: -0.3, color: pmTokens.fg }}>{s.n}</div>
                <div style={{ fontSize: 10, color: pmTokens.fg3, fontWeight: 600 }}>{s.t}</div>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Building contacts */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ fontSize: 11, fontWeight: 800, color: pmTokens.fg3, marginBottom: 10, letterSpacing: 0.8, textTransform: 'uppercase' }}>Bina əlaqələri</div>
        <Card style={{ padding: 0 }}>
          {[
            { n: 'Eldar Həsənov', r: 'Komendant', p: '+994 55 123 42 17', online: true },
            { n: 'Nəriman Əliyev', r: 'Bina rəhbəri', p: '+994 50 555 11 08', online: false },
            { n: 'Rauf Quliyev', r: 'Texnik', p: '+994 12 888 00 00', online: true },
          ].map((c, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderBottom: i < 2 ? `1px solid ${pmTokens.line}` : 'none' }}>
              <div style={{ position: 'relative' }}>
                <Avatar name={c.n} size={40}/>
                {c.online && <span style={{ position: 'absolute', bottom: -1, right: -1, width: 11, height: 11, borderRadius: 6, background: pmTokens.ok, border: `2px solid ${pmTokens.bg3}` }}/>}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: pmTokens.fg }}>{c.n}</div>
                <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 2 }}>{c.r}</div>
                <div style={{ fontSize: 11, color: pmTokens.fg2, marginTop: 1, fontFamily: pmTokens.mono }}>{c.p}</div>
              </div>
              <IconBtn name="phone" size={40} iconSize={16} bg={pmTokens.ok} color="#fff"/>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 15. PROFILE
// ─────────────────────────────────────────────────────────────
const ScreenProfile = ({ go }) => {
  return (
    <div className="pm-fade">
      {/* hero */}
      <div style={{ padding: '60px 20px 0', position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ position: 'relative' }}>
            <Avatar name="Elvin Məmmədov" size={72}/>
            <div style={{ position: 'absolute', bottom: -2, right: -2, width: 24, height: 24, borderRadius: 12, background: pmTokens.brand, border: `3px solid ${pmTokens.bg}`, display: 'grid', placeItems: 'center', color: '#fff' }}>
              <Icon name="camera" size={11}/>
            </div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.4 }}>Elvin Məmmədov</div>
            <div style={{ fontSize: 12, color: pmTokens.fg3, marginTop: 2 }}>elvin.m@example.com</div>
            <div style={{ marginTop: 6, display: 'flex', gap: 6 }}>
              <Pill color={pmTokens.brand}>Mülkiyyətçi</Pill>
              <Pill color={pmTokens.ok}>Verified</Pill>
            </div>
          </div>
        </div>

        {/* apartment card */}
        <Card onClick={() => go && go('apartmentManage')} style={{ marginTop: 18, padding: 16, background: 'linear-gradient(135deg, rgba(124,92,255,0.1), rgba(178,75,255,0.05))' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(124,92,255,0.2)', color: pmTokens.brand, display: 'grid', placeItems: 'center' }}>
              <Icon name="home" size={20}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700 }}>Park Residence</div>
              <div style={{ fontSize: 11, color: pmTokens.fg3 }}>Blok B · Mənzil 47 · 94 m²</div>
            </div>
            <IconBtn name="chevronRight" size={34} iconSize={14} bg="transparent"/>
          </div>
        </Card>
      </div>

      {/* Stats */}
      <div style={{ padding: '20px 20px 0', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
        {[
          { v: '4.2y', l: 'Sakin', c: pmTokens.brand },
          { v: '98%', l: 'Vaxtında öd.', c: pmTokens.ok },
          { v: '24', l: 'Sənəd', c: pmTokens.info },
        ].map((s, i) => (
          <Card key={i} padding={12} style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 20, fontWeight: 800, color: s.c, letterSpacing: -0.5 }}>{s.v}</div>
            <div style={{ fontSize: 10, color: pmTokens.fg3, fontWeight: 500, marginTop: 2 }}>{s.l}</div>
          </Card>
        ))}
      </div>

      {/* Settings */}
      <div style={{ padding: '20px 20px 20px' }}>
        {[
          { t: 'Hesab', items: [
            { i: 'user', l: 'Şəxsi məlumatlar', c: pmTokens.brand },
            { i: 'lock', l: 'Təhlükəsizlik və 2FA', c: pmTokens.ok },
            { i: 'wallet', l: 'Ödəniş metodları', d: '2 kart', c: pmTokens.warn },
          ]},
          { t: 'Bildirişlər', items: [
            { i: 'bell', l: 'Push bildirişlər', c: pmTokens.info, toggle: true, on: true },
            { i: 'speaker', l: 'Elanlar', c: pmTokens.brand2, toggle: true, on: true },
            { i: 'megaphone', l: 'Marketinq', c: pmTokens.fg3, toggle: true, on: false },
          ]},
          { t: 'Tətbiq', items: [
            { i: 'settings', l: 'Görünüş', d: 'Dark', c: pmTokens.brand },
            { i: 'info', l: 'Dil', d: 'Azərbaycan', c: pmTokens.info },
            { i: 'shield', l: 'Məxfilik', c: pmTokens.ok },
            { i: 'info', l: 'Versiya', d: '2.4.0', c: pmTokens.fg3 },
          ]},
        ].map((g, gi) => (
          <div key={gi} style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 11, color: pmTokens.fg3, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.8, padding: '0 4px 10px' }}>{g.t}</div>
            <Card style={{ padding: 0 }}>
              {g.items.map((it, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderBottom: i < g.items.length - 1 ? `1px solid ${pmTokens.line}` : 'none' }}>
                  <div style={{ width: 34, height: 34, borderRadius: 10, background: `${it.c}22`, color: it.c, display: 'grid', placeItems: 'center' }}>
                    <Icon name={it.i} size={16}/>
                  </div>
                  <div style={{ flex: 1, fontSize: 14, fontWeight: 500 }}>{it.l}</div>
                  {it.d && <div style={{ fontSize: 12, color: pmTokens.fg3 }}>{it.d}</div>}
                  {it.toggle ? (
                    <div style={{ width: 40, height: 24, background: it.on ? pmTokens.brand : pmTokens.bg4, borderRadius: 12, position: 'relative', transition: 'all .2s' }}>
                      <div style={{ position: 'absolute', top: 2, [it.on ? 'right' : 'left']: 2, width: 20, height: 20, borderRadius: 10, background: '#fff', transition: 'all .2s' }}/>
                    </div>
                  ) : (
                    <Icon name="chevronRight" size={14} color={pmTokens.fg3}/>
                  )}
                </div>
              ))}
            </Card>
          </div>
        ))}

        <Btn full variant="secondary" style={{ color: pmTokens.danger }} onClick={() => go && go('onboarding')}>Hesabdan çıx</Btn>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 16. ONBOARDING / LOGIN
// ─────────────────────────────────────────────────────────────
const ScreenOnboarding = ({ go }) => {
  return (
    <div className="pm-fade" style={{ position: 'relative', height: '100%', minHeight: 820 }}>
      {/* Animated bg */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 20% 10%, rgba(124,92,255,0.3), transparent 50%), radial-gradient(circle at 80% 80%, rgba(178,75,255,0.25), transparent 50%), ' + pmTokens.bg,
      }}/>
      {/* Floating orbs */}
      {[0,1,2,3].map(i => (
        <div key={i} style={{
          position: 'absolute', width: 8, height: 8, borderRadius: 4,
          background: [pmTokens.brand, pmTokens.brand2, pmTokens.info, pmTokens.ok][i],
          top: [120, 200, 300, 420][i] + 60, left: [60, 280, 80, 290][i],
          boxShadow: `0 0 20px currentColor`,
          animation: `pm-float ${3 + i * 0.5}s ease-in-out infinite`,
          animationDelay: `${i * 0.3}s`,
          opacity: .7,
        }}/>
      ))}

      <div style={{ position: 'relative', padding: '80px 24px 0', zIndex: 2 }}>
        {/* Logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 46, height: 46, borderRadius: 14,
            background: pmTokens.gradient,
            display: 'grid', placeItems: 'center', color: '#fff', fontSize: 18, fontWeight: 800,
            boxShadow: '0 10px 30px -8px rgba(124,92,255,0.6)',
          }}>
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
              <path d="M4 20V10l8-6 8 6v10h-5v-6H9v6H4Z" fill="#fff"/>
              <circle cx="12" cy="11" r="1.8" fill="#7C5CFF"/>
            </svg>
          </div>
          <div>
            <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: -0.3 }}>ProMTK</div>
            <div style={{ fontSize: 10, color: pmTokens.fg3, fontWeight: 600 }}>Smart yaşayış</div>
          </div>
        </div>

        {/* Hero */}
        <div style={{ marginTop: 80 }}>
          <div style={{ fontSize: 38, fontWeight: 800, lineHeight: 1.1, letterSpacing: -1.2 }}>
            Bütün bina,<br/>
            <span style={{ background: pmTokens.gradient, WebkitBackgroundClip: 'text', color: 'transparent' }}>bir cibinizdə.</span>
          </div>
          <div style={{ fontSize: 15, color: pmTokens.fg2, marginTop: 18, lineHeight: 1.5, maxWidth: 300 }}>
            Ödəniş, qonaq, parkinq, təmir — hamısı bir tətbiqdə. Sakin, komendant və MTK bir şəbəkədə.
          </div>
        </div>

        {/* Feature pills */}
        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            { i: 'wallet', t: 'Onlayn ödəniş', c: pmTokens.brand },
            { i: 'qr', t: 'Qonaq kodu', c: pmTokens.info },
            { i: 'shield', t: 'Smart bina', c: pmTokens.ok },
            { i: 'users', t: 'Qonşu feed', c: pmTokens.brand2 },
          ].map((f, i) => (
            <div key={i} style={{
              background: 'rgba(255,255,255,0.04)', backdropFilter: 'blur(20px)',
              border: `1px solid ${pmTokens.line}`, borderRadius: pmTokens.r3, padding: 14,
              display: 'flex', alignItems: 'center', gap: 10,
              animation: 'pm-slide-up .5s ease both', animationDelay: `${i * 0.08}s`,
            }}>
              <div style={{ width: 32, height: 32, borderRadius: 10, background: `${f.c}22`, color: f.c, display: 'grid', placeItems: 'center' }}>
                <Icon name={f.i} size={16}/>
              </div>
              <div style={{ fontSize: 12, fontWeight: 600 }}>{f.t}</div>
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div style={{ position: 'absolute', bottom: 40, left: 24, right: 24, zIndex: 2 }}>
        <Btn full icon="chevronRight" onClick={() => go && go('home')} style={{ fontSize: 16, padding: '16px 18px' }}>Başlayaq</Btn>
        <div style={{ marginTop: 14, textAlign: 'center', fontSize: 12, color: pmTokens.fg3 }}>
          Hesabınız var? <span style={{ color: pmTokens.brandSoft, fontWeight: 700 }}>Daxil olun</span>
        </div>

        {/* dots */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 18 }}>
          {[0,1,2].map(i => (
            <span key={i} style={{
              width: i === 0 ? 20 : 6, height: 6, borderRadius: 3,
              background: i === 0 ? pmTokens.brand : pmTokens.fg4, transition: 'width .3s',
            }}/>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenAnnouncements, ScreenMessages, ScreenVote, ScreenSOS, ScreenProfile, ScreenOnboarding });