// ProMTK — Screens, Part 2: Complaint, Repair, Smart Home, Community Feed, Documents

// ─────────────────────────────────────────────────────────────
// 6. COMPLAINT / REQUEST
// ─────────────────────────────────────────────────────────────
const ScreenComplaint = ({ go }) => {
  const [cat, setCat] = React.useState('noise');
  const [title, setTitle] = React.useState('');
  const [desc, setDesc] = React.useState('');
  const [anon, setAnon] = React.useState(false);
  const cats = [
    { id: 'noise', icon: 'speaker', label: 'Səs-küy' },
    { id: 'clean', icon: 'sparkle', label: 'Təmizlik' },
    { id: 'security', icon: 'shield', label: 'Təhlükəsizlik' },
    { id: 'other', icon: 'more', label: 'Digər' },
  ];
  const valid = title.length >= 4 && desc.length >= 10;
  return (
    <div className="pm-fade" style={{ paddingBottom: 24 }}>
      <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 }}>Yeni müraciət</h1>
      </div>

      <div style={{ padding: '24px 20px 0' }}>
        <div style={{ fontSize: 13, color: pmTokens.fg3, marginBottom: 12, fontWeight: 600 }}>Kateqoriya seçin</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 8 }}>
          {cats.map(c => {
            const a = cat === c.id;
            return (
              <button key={c.id} onClick={() => setCat(c.id)} className="pm-tap" style={{
                background: a ? pmTokens.gradient : pmTokens.bg3,
                border: a ? 'none' : `1px solid ${pmTokens.line}`,
                borderRadius: pmTokens.r3, padding: '14px 4px', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                color: a ? '#fff' : pmTokens.fg2, fontFamily: pmTokens.font,
                boxShadow: a ? '0 8px 18px -6px rgba(124,92,255,0.5)' : 'none',
              }}>
                <Icon name={c.icon} size={20}/>
                <span style={{ fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap' }}>{c.label}</span>
              </button>
            );
          })}
        </div>
      </div>

      {/* form */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ fontSize: 13, color: pmTokens.fg3, marginBottom: 8, fontWeight: 600 }}>Başlıq</div>
        <input
          value={title}
          onChange={e => setTitle(e.target.value)}
          placeholder="Məs. 12-ci mərtəbədə gecə vaxtı səs-küy"
          maxLength={80}
          style={{ width: '100%', background: pmTokens.bg3, border: `1px solid ${pmTokens.line}`, borderRadius: pmTokens.r3, padding: '14px 16px', fontSize: 14, color: pmTokens.fg, WebkitTextFillColor: pmTokens.fg, caretColor: pmTokens.brand, outline: 'none', fontFamily: pmTokens.font, fontWeight: 600 }}
        />

        <div style={{ fontSize: 13, color: pmTokens.fg3, margin: '16px 0 8px', fontWeight: 600 }}>Təsvir</div>
        <div style={{ background: pmTokens.bg3, border: `1px solid ${pmTokens.line}`, borderRadius: pmTokens.r3, padding: 14, position: 'relative' }}>
          <textarea
            value={desc}
            onChange={e => setDesc(e.target.value.slice(0, 500))}
            placeholder="Probleminizi mümkün qədər ətraflı izah edin..."
            rows={5}
            style={{ width: '100%', background: 'transparent', border: 'none', outline: 'none', color: pmTokens.fg, WebkitTextFillColor: pmTokens.fg, caretColor: pmTokens.brand, fontSize: 13, lineHeight: 1.5, fontFamily: pmTokens.font, fontWeight: 500, resize: 'none' }}
          />
          <div style={{ fontSize: 11, color: desc.length > 450 ? pmTokens.warn : pmTokens.fg4, textAlign: 'right' }}>{desc.length} / 500</div>
        </div>

        <div style={{ fontSize: 13, color: pmTokens.fg3, margin: '16px 0 8px', fontWeight: 600 }}>Şəkil / video əlavə et</div>
        <div style={{ display: 'flex', gap: 8 }}>
          <div style={{ width: 76, height: 76, borderRadius: 14, background: 'linear-gradient(135deg,#3a2d5c,#1a1730)', border: `1px solid ${pmTokens.line}`, position: 'relative' }}>
            <div style={{ position: 'absolute', top: 4, right: 4, width: 18, height: 18, borderRadius: 9, background: pmTokens.danger, display: 'grid', placeItems: 'center', color: '#fff', cursor: 'pointer' }}>
              <Icon name="close" size={10}/>
            </div>
          </div>
          <button className="pm-tap" style={{ width: 76, height: 76, borderRadius: 14, border: `1.5px dashed ${pmTokens.lineStrong}`, background: 'transparent', display: 'grid', placeItems: 'center', color: pmTokens.fg3, cursor: 'pointer' }}>
            <Icon name="camera" size={22}/>
          </button>
          <button className="pm-tap" style={{ width: 76, height: 76, borderRadius: 14, border: `1.5px dashed ${pmTokens.lineStrong}`, background: 'transparent', display: 'grid', placeItems: 'center', color: pmTokens.fg3, cursor: 'pointer' }}>
            <Icon name="mic" size={22}/>
          </button>
        </div>

        {/* privacy toggle */}
        <div onClick={() => setAnon(!anon)} className="pm-tap-soft" style={{ marginTop: 20, padding: 14, background: pmTokens.bg3, borderRadius: pmTokens.r3, border: `1px solid ${pmTokens.line}`, display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
          <div style={{ width: 34, height: 34, borderRadius: 10, background: 'rgba(124,92,255,0.18)', color: pmTokens.brand, display: 'grid', placeItems: 'center' }}>
            <Icon name="eye" size={16}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700 }}>Anonim göndər</div>
            <div style={{ fontSize: 11, color: pmTokens.fg3 }}>Adınız komendant və qonşularda görünməyəcək</div>
          </div>
          <div style={{ width: 42, height: 24, background: anon ? pmTokens.brand : pmTokens.bg4, borderRadius: 12, position: 'relative', transition: 'background .2s' }}>
            <div style={{ position: 'absolute', top: 2, left: anon ? 20 : 2, width: 20, height: 20, borderRadius: 10, background: '#fff', transition: 'left .2s', boxShadow: '0 2px 4px rgba(0,0,0,0.2)' }}/>
          </div>
        </div>
      </div>

      <div style={{ padding: '24px 20px 20px' }}>
        <Btn full icon="send" disabled={!valid} onClick={() => valid && go && go('home')}>Müraciəti göndər</Btn>
        {!valid && <div style={{ marginTop: 8, fontSize: 11, color: pmTokens.fg3, textAlign: 'center' }}>Başlıq (min 4) və təsvir (min 10) tələb olunur</div>}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 7. REPAIR REQUEST with live tracking
// ─────────────────────────────────────────────────────────────
const ScreenRepair = ({ 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 }}>Təmir</h1>
        <IconBtn name="plus" size={38} iconSize={18} bg={pmTokens.brand} color="#fff"/>
      </div>

      {/* Active request */}
      <div style={{ padding: '20px 20px 0' }}>
        <Pill color={pmTokens.warn}>Aktiv sorğu</Pill>
        <Card style={{ marginTop: 10, padding: 0, overflow: 'hidden' }}>
          <div style={{ padding: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 16, fontWeight: 700 }}>Mətbəx kranı sızır</div>
                <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 3 }}>#RQ-2604 · 22 Apr 11:40</div>
              </div>
              <div style={{ fontSize: 11, color: pmTokens.warn, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, padding: '5px 10px', borderRadius: 999, background: pmTokens.warnSoft, border: `1px solid ${pmTokens.warn}40` }}>İcrada</div>
            </div>

            {/* Tracker */}
            <div style={{ marginTop: 20, position: 'relative' }}>
              {[
                { t: 'Qəbul edildi', d: '11:40', done: true },
                { t: 'Usta təyin edildi', d: '12:15', done: true },
                { t: 'Yolda', d: '14:00', active: true },
                { t: 'İşin tamamlanması', d: '—', done: false },
              ].map((s, i) => (
                <div key={i} style={{ display: 'flex', gap: 14, paddingBottom: i < 3 ? 18 : 0, position: 'relative' }}>
                  {i < 3 && <div style={{ position: 'absolute', left: 11, top: 24, bottom: -4, width: 2, background: s.done ? pmTokens.brand : pmTokens.bg4 }}/>}
                  <div style={{
                    width: 24, height: 24, borderRadius: 12, flexShrink: 0,
                    background: s.done ? pmTokens.brand : s.active ? pmTokens.warn : pmTokens.bg4,
                    display: 'grid', placeItems: 'center', color: '#fff',
                    boxShadow: s.active ? '0 0 0 6px rgba(251,191,36,0.2)' : 'none',
                    zIndex: 1,
                  }}>
                    {s.done ? <Icon name="check" size={13}/> : s.active ? <span style={{ width: 8, height: 8, borderRadius: 4, background: '#fff', animation: 'pm-breathe 1.4s ease infinite' }}/> : null}
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: (s.done || s.active) ? pmTokens.fg : pmTokens.fg3 }}>{s.t}</div>
                    <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 2 }}>{s.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Technician card */}
          <div style={{ borderTop: `1px solid ${pmTokens.line}`, padding: 16, display: 'flex', alignItems: 'center', gap: 12 }}>
            <Avatar name="Rauf Quliyev" size={44}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>Rauf Quliyev</div>
              <div style={{ fontSize: 11, color: pmTokens.fg3, display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="tool" size={11}/> Santexnik · 4.8
                <Icon name="star" size={11} color={pmTokens.warn} style={{ verticalAlign: -2 }}/>
              </div>
            </div>
            <IconBtn name="message" size={38} iconSize={16} bg={pmTokens.bg4}/>
            <IconBtn name="phone" size={38} iconSize={16} bg={pmTokens.ok} color="#022"/>
          </div>
        </Card>
      </div>

      {/* Request categories (for new) */}
      <div style={{ padding: '24px 20px 0' }}>
        <SectionHeader title="Yeni sorğu"/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
          {[
            { icon: 'drop', label: 'Santexnika', color: pmTokens.water },
            { icon: 'bolt', label: 'Elektrik', color: pmTokens.power },
            { icon: 'ac', label: 'Kondisioner', color: pmTokens.ok },
            { icon: 'doorOpen', label: 'Qapı / kilid', color: pmTokens.brand },
            { icon: 'elevator', label: 'Lift', color: pmTokens.brand2 },
            { icon: 'tool', label: 'Digər', color: pmTokens.fg2 },
          ].map((c, i) => (
            <Card key={i} padding={12} onClick={() => {}} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, textAlign: 'center' }}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: `${c.color}22`, color: c.color, display: 'grid', placeItems: 'center' }}>
                <Icon name={c.icon} size={20}/>
              </div>
              <div style={{ fontSize: 11, fontWeight: 600 }}>{c.label}</div>
            </Card>
          ))}
        </div>
      </div>

      {/* History */}
      <div style={{ padding: '20px 20px 20px' }}>
        <SectionHeader title="Tarixçə"/>
        <Card style={{ padding: 0 }}>
          {[
            { t: 'Çilçıraq dəyişildirildi', d: '14 Apr 2026', st: 'Tamam', col: pmTokens.ok, ic: 'lightbulb' },
            { t: 'Balkon qapısı təmiri', d: '02 Apr 2026', st: 'Tamam', col: pmTokens.ok, ic: 'doorOpen' },
            { t: 'Kondisioner təmizliyi', d: '12 Mart 2026', st: 'Ləğv', col: pmTokens.fg3, ic: 'ac' },
          ].map((it, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', padding: 14, borderBottom: i < 2 ? `1px solid ${pmTokens.line}` : 'none' }}>
              <div style={{ width: 34, height: 34, borderRadius: 10, background: `${it.col}22`, color: it.col, display: 'grid', placeItems: 'center', marginRight: 12 }}>
                <Icon name={it.ic} size={16}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{it.t}</div>
                <div style={{ fontSize: 11, color: pmTokens.fg3 }}>{it.d}</div>
              </div>
              <Pill color={it.col}>{it.st}</Pill>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 8. SMART HOME (building)
// ─────────────────────────────────────────────────────────────
const ScreenSmart = ({ go }) => {
  const [elevator, setElevator] = React.useState(7);
  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 }}>Smart Bina</h1>
        <IconBtn name="settings" size={38} iconSize={18} bg="rgba(255,255,255,0.06)"/>
      </div>

      {/* Quick controls */}
      <div style={{ padding: '20px 20px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {/* Door */}
        <Card style={{
          background: 'linear-gradient(135deg, rgba(52,211,153,0.2), rgba(52,211,153,0.05))',
          border: `1px solid rgba(52,211,153,0.3)`, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(52,211,153,0.25)', color: pmTokens.ok, display: 'grid', placeItems: 'center' }}>
              <Icon name="doorOpen" size={20}/>
            </div>
            <span style={{ fontSize: 10, fontWeight: 700, color: pmTokens.ok, letterSpacing: 0.5 }}>● AÇIQ</span>
          </div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 18 }}>Giriş qapısı</div>
          <div style={{ fontSize: 11, color: pmTokens.fg3 }}>Blok B — əsas</div>
          <div style={{ marginTop: 12, display: 'flex', gap: 6 }}>
            <Btn variant="secondary" style={{ padding: '8px 12px', fontSize: 12, flex: 1, background: 'rgba(0,0,0,0.3)' }}>Aç</Btn>
          </div>
        </Card>

        {/* Elevator */}
        <Card style={{ position: 'relative', overflow: 'hidden' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(124,92,255,0.2)', color: pmTokens.brand, display: 'grid', placeItems: 'center' }}>
              <Icon name="elevator" size={20}/>
            </div>
            <span style={{ fontSize: 10, fontWeight: 700, color: pmTokens.brand, letterSpacing: 0.5 }}>MƏRT. {elevator}</span>
          </div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 18 }}>Lift A</div>
          <div style={{ fontSize: 11, color: pmTokens.fg3 }}>Aşağı hərəkətdə</div>
          <div style={{ marginTop: 12, display: 'flex', gap: 6 }}>
            <Btn variant="secondary" style={{ padding: '8px 12px', fontSize: 12, flex: 1, background: pmTokens.gradient, color: '#fff' }}>Çağır</Btn>
          </div>
        </Card>

        {/* Intercom */}
        <Card style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ position: 'relative' }}>
            <div style={{ width: 54, height: 54, borderRadius: 16, background: 'rgba(251,90,123,0.2)', color: pmTokens.danger, display: 'grid', placeItems: 'center' }}>
              <Icon name="phone" size={24}/>
            </div>
            <span style={{ position: 'absolute', inset: 0, borderRadius: 16, animation: 'pm-pulse-ring 1.6s ease-out infinite', background: pmTokens.danger }}/>
          </div>
          <div style={{ flex: 1 }}>
            <Pill color={pmTokens.danger}>● Zəng</Pill>
            <div style={{ fontSize: 14, fontWeight: 700, marginTop: 4 }}>Domofon — Giriş qapısı</div>
            <div style={{ fontSize: 11, color: pmTokens.fg3 }}>Naməlum ziyarətçi</div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <IconBtn name="close" size={38} bg={pmTokens.dangerSoft} color={pmTokens.danger}/>
            <IconBtn name="check" size={38} bg={pmTokens.ok} color="#022"/>
          </div>
        </Card>
      </div>

      {/* Climate (shared spaces) */}
      <div style={{ padding: '24px 20px 0' }}>
        <SectionHeader title="Mikroklimat — podyezd"/>
        <Card style={{ padding: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
            <Ring value={0.62} size={100} stroke={8} color={pmTokens.warn}>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 22, fontWeight: 800 }}>22°</div>
                <div style={{ fontSize: 10, color: pmTokens.fg3 }}>Temp</div>
              </div>
            </Ring>
            <Ring value={0.45} size={100} stroke={8} color={pmTokens.water}>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 22, fontWeight: 800 }}>45%</div>
                <div style={{ fontSize: 10, color: pmTokens.fg3 }}>Rütubət</div>
              </div>
            </Ring>
            <Ring value={0.28} size={100} stroke={8} color={pmTokens.ok}>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 22, fontWeight: 800 }}>A+</div>
                <div style={{ fontSize: 10, color: pmTokens.fg3 }}>Hava</div>
              </div>
            </Ring>
          </div>
        </Card>
      </div>

      {/* Energy bar */}
      <div style={{ padding: '24px 20px 0' }}>
        <SectionHeader title="Enerji istehlakı" action="Detallı"/>
        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
            <div>
              <div style={{ fontSize: 11, color: pmTokens.fg3, textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>Bu ay</div>
              <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: -0.5 }}>186 <span style={{ fontSize: 14, color: pmTokens.fg3 }}>kWh</span></div>
            </div>
            <Pill color={pmTokens.warn}>+12%</Pill>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 80 }}>
            {[0.4, 0.6, 0.5, 0.8, 0.7, 0.9, 0.6, 0.75, 0.55, 0.88, 1.0, 0.92].map((v, i) => (
              <div key={i} style={{
                flex: 1, height: `${v * 100}%`,
                background: i === 11 ? pmTokens.gradient : `rgba(124,92,255,${0.3 + v * 0.3})`,
                borderRadius: 4,
                animation: `pm-slide-up .5s ease both`, animationDelay: `${i * 40}ms`,
              }}/>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 10, color: pmTokens.fg3 }}>
            <span>Yan</span><span>Fev</span><span>Mar</span><span>Apr</span>
          </div>
        </Card>
      </div>

      {/* Cameras */}
      <div style={{ padding: '24px 20px 20px' }}>
        <SectionHeader title="Canlı kameralar" action="Hamısı"/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            { t: 'Giriş', hue: 260 },
            { t: 'Lobby', hue: 200 },
            { t: 'Parkinq', hue: 160 },
            { t: 'Lift A', hue: 320 },
          ].map((c, i) => (
            <div key={i} style={{
              aspectRatio: '16/10', borderRadius: pmTokens.r3, position: 'relative', overflow: 'hidden',
              background: `linear-gradient(135deg, hsl(${c.hue},30%,12%), hsl(${c.hue},40%,6%))`,
              border: `1px solid ${pmTokens.line}`,
            }}>
              {/* scanlines */}
              <div style={{ position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px)', pointerEvents: 'none' }}/>
              {/* silhouettes */}
              <div style={{ position: 'absolute', bottom: 10, left: '30%', width: 8, height: 24, borderRadius: 2, background: `hsl(${c.hue},60%,40%)` }}/>
              <div style={{ position: 'absolute', bottom: 10, left: '45%', width: 10, height: 30, borderRadius: 2, background: `hsl(${c.hue},60%,50%)` }}/>
              {/* live dot */}
              <div style={{ position: 'absolute', top: 8, left: 8, padding: '2px 7px', borderRadius: 10, background: 'rgba(0,0,0,0.5)', fontSize: 9, fontWeight: 700, color: pmTokens.danger, display: 'flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: pmTokens.danger, animation: 'pm-breathe 1.4s infinite' }}/>LIVE
              </div>
              <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '18px 10px 8px', background: 'linear-gradient(0deg, rgba(0,0,0,0.7), transparent)', fontSize: 11, fontWeight: 600 }}>{c.t}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 9. COMMUNITY FEED
// ─────────────────────────────────────────────────────────────
const ScreenFeed = ({ go }) => {
  return (
    <div className="pm-fade">
      {/* header */}
      <div style={{ padding: '54px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 13, color: pmTokens.fg3, fontWeight: 500 }}>Qonşular</div>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.5 }}>Park Residence</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <IconBtn name="search" size={42} iconSize={18} bg="rgba(255,255,255,0.06)"/>
          <IconBtn name="plus" size={42} iconSize={18} bg={pmTokens.gradient} color="#fff"/>
        </div>
      </div>

      {/* Story row */}
      <div style={{ padding: '18px 20px 0', display: 'flex', gap: 14, overflowX: 'auto' }} className="pm-scroll">
        {['Sizin', 'Leyla x.', 'Rəşad', 'Gülçin', 'Tural', 'Aygün'].map((n, i) => (
          <div key={i} style={{ textAlign: 'center', flexShrink: 0 }}>
            <div style={{
              width: 62, height: 62, borderRadius: 31,
              background: i === 0 ? pmTokens.bg3 : pmTokens.gradient,
              padding: 2.5, display: 'grid', placeItems: 'center', position: 'relative',
            }}>
              <div style={{ width: '100%', height: '100%', borderRadius: '50%', background: pmTokens.bg2, padding: 2 }}>
                {i === 0 ? (
                  <div style={{ width: '100%', height: '100%', borderRadius: '50%', background: pmTokens.bg4, display: 'grid', placeItems: 'center', color: pmTokens.fg2 }}>
                    <Icon name="plus" size={22}/>
                  </div>
                ) : (
                  <Avatar name={n} size={52}/>
                )}
              </div>
            </div>
            <div style={{ fontSize: 10, color: pmTokens.fg2, marginTop: 4, fontWeight: 500 }}>{n}</div>
          </div>
        ))}
      </div>

      {/* Tabs */}
      <div style={{ padding: '16px 20px 0', display: 'flex', gap: 8, overflowX: 'auto' }} className="pm-scroll">
        {['Hamısı', 'Elanlar', 'Bazar', 'Sual-cavab', 'Tapıldı/İtdi'].map((t, i) => (
          <Chip key={t} active={i === 0}>{t}</Chip>
        ))}
      </div>

      {/* Posts */}
      <div style={{ padding: '16px 20px 20px' }}>
        {/* Post 1 — event */}
        <Card style={{ marginBottom: 12, padding: 0, overflow: 'hidden' }}>
          <div style={{ padding: '14px 14px 10px', display: 'flex', alignItems: 'center', gap: 10 }}>
            <Avatar name="Leyla Quliyeva" size={38}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>Leyla x. <span style={{ fontSize: 10, color: pmTokens.fg3, fontWeight: 500 }}> · B-34</span></div>
              <div style={{ fontSize: 11, color: pmTokens.fg3 }}>2 saat əvvəl</div>
            </div>
            <Pill color={pmTokens.info}>Elan</Pill>
          </div>
          <div style={{ padding: '0 14px 12px', fontSize: 13, lineHeight: 1.5, color: pmTokens.fg }}>
            Bu şənbə həyətdə uşaqlar üçün kiçik bayram təşkil edirik. Kim qoşulmaq istəyir? 🎈
          </div>
          {/* hero visual */}
          <div style={{
            height: 180, background: 'linear-gradient(135deg, #FF9150, #FB5A7B, #7C5CFF)',
            position: 'relative', overflow: 'hidden',
          }}>
            {Array.from({length: 12}).map((_, i) => (
              <div key={i} style={{
                position: 'absolute', width: 20, height: 28,
                left: `${(i * 13) % 95}%`, bottom: `${10 + (i % 3) * 15}%`,
                background: ['#fff','#FFE2B0','#B24BFF','#5BC0FF'][i%4],
                borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
                animation: `pm-float ${2 + i * 0.2}s ease-in-out infinite`,
                animationDelay: `${i * 0.15}s`,
              }}/>
            ))}
          </div>
          <div style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 16 }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: pmTokens.danger, fontWeight: 600 }}>
              <Icon name="heart" size={16}/> 24
            </span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: pmTokens.fg2, fontWeight: 600 }}>
              <Icon name="message" size={16}/> 8
            </span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: pmTokens.fg2, fontWeight: 600 }}>
              <Icon name="send" size={16}/>
            </span>
          </div>
        </Card>

        {/* Post 2 — marketplace */}
        <Card style={{ marginBottom: 12, padding: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <Avatar name="Rəşad Həsənov" size={38}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>Rəşad <span style={{ fontSize: 10, color: pmTokens.fg3, fontWeight: 500 }}> · A-12</span></div>
              <div style={{ fontSize: 11, color: pmTokens.fg3 }}>5 saat əvvəl</div>
            </div>
            <Pill color={pmTokens.ok}>Satılır</Pill>
          </div>
          <div style={{ fontSize: 13, color: pmTokens.fg, marginBottom: 10 }}>
            IKEA yazı masası əla vəziyyətdə. Təhvil binadan mümkündür.
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', padding: 10, background: pmTokens.bg2, borderRadius: pmTokens.r2 }}>
            <div style={{ width: 56, height: 56, borderRadius: 10, background: 'linear-gradient(135deg, #8b6b43, #5c4426)' }}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Yazı masası</div>
              <div style={{ fontSize: 11, color: pmTokens.fg3 }}>Ağacdan · IKEA</div>
            </div>
            <div style={{ fontSize: 18, fontWeight: 800, color: pmTokens.brand }}>120 ₼</div>
          </div>
        </Card>

        {/* Post 3 — poll */}
        <Card style={{ padding: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <Avatar name="MTK" size={38} style={{ background: pmTokens.gradient }}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 4 }}>MTK <Icon name="check2" size={14} color={pmTokens.brand}/></div>
              <div style={{ fontSize: 11, color: pmTokens.fg3 }}>Dünən</div>
            </div>
            <Pill color={pmTokens.brand}>Sorğu</Pill>
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>Həyətdə uşaq meydançası üçün hansı variant?</div>
          {[
            { t: 'Klassik dəmir', v: 0.62, n: 34 },
            { t: 'Ağacdan ekoloji', v: 0.28, n: 16 },
            { t: 'Qarışıq', v: 0.10, n: 6 },
          ].map((o, i) => (
            <div key={i} style={{
              position: 'relative', padding: '10px 14px', borderRadius: 10,
              background: pmTokens.bg2, marginBottom: 8, overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', inset: 0, width: `${o.v * 100}%`, background: i === 0 ? 'rgba(124,92,255,0.2)' : 'rgba(255,255,255,0.04)' }}/>
              <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                <span style={{ fontWeight: i === 0 ? 700 : 500 }}>{o.t}</span>
                <span style={{ color: pmTokens.fg3 }}>{o.n} · {Math.round(o.v * 100)}%</span>
              </div>
            </div>
          ))}
          <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 6 }}>56 səs · 3 gün qaldı</div>
        </Card>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 10. DOCUMENTS
// ─────────────────────────────────────────────────────────────
const ScreenDocs = ({ 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 }}>Sənədlər</h1>
        <IconBtn name="search" size={38} iconSize={18} bg="rgba(255,255,255,0.06)"/>
      </div>

      <div style={{ padding: '20px 20px 0' }}>
        <Card style={{
          background: pmTokens.gradient, padding: 16, border: 'none',
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{ width: 52, height: 52, borderRadius: 14, background: 'rgba(255,255,255,0.2)', display: 'grid', placeItems: 'center' }}>
            <Icon name="doc" size={26}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 700 }}>24 sənəd</div>
            <div style={{ fontSize: 12, opacity: .85 }}>184 MB · Şifrlənmişdir</div>
          </div>
          <Icon name="shield" size={22} style={{ opacity: .6 }}/>
        </Card>
      </div>

      {/* filter */}
      <div style={{ padding: '16px 20px 0', display: 'flex', gap: 8, overflowX: 'auto' }} className="pm-scroll">
        {['Hamısı', 'Müqavilələr', 'Qəbzlər', 'Texniki', 'Hüquqi'].map((t, i) => (
          <Chip key={t} active={i === 0}>{t}</Chip>
        ))}
      </div>

      {/* list */}
      <div style={{ padding: '16px 20px 20px' }}>
        {[
          { t: 'Alqı-satqı müqaviləsi', d: '15 Mart 2022', sz: '2.4 MB', icon: 'signature', col: pmTokens.brand, tag: 'Müqavilə' },
          { t: 'MTK üzvlük vəsiqəsi', d: '10 Aprel 2026', sz: '640 KB', icon: 'shield', col: pmTokens.ok, tag: 'Vəsiqə' },
          { t: 'Aprel 2026 qəbzi', d: '01 Apr 2026', sz: '180 KB', icon: 'wallet', col: pmTokens.warn, tag: 'Qəbz' },
          { t: 'Kommunal qəbzlər (2025)', d: 'Arxivləndi', sz: '8.2 MB', icon: 'doc', col: pmTokens.info, tag: 'Arxiv' },
          { t: 'Texniki pasport', d: '18 Fev 2022', sz: '4.1 MB', icon: 'home', col: pmTokens.brand2, tag: 'Texniki' },
          { t: 'Sığorta müqaviləsi', d: '05 Yan 2026', sz: '1.2 MB', icon: 'shield', col: pmTokens.danger, tag: 'Sığorta' },
        ].map((it, i) => (
          <div key={i} className="pm-tap-soft" style={{
            display: 'flex', alignItems: 'center', gap: 14, padding: 14,
            background: pmTokens.bg3, borderRadius: pmTokens.r3,
            border: `1px solid ${pmTokens.line}`, marginBottom: 8, cursor: 'pointer',
          }}>
            <div style={{ width: 46, height: 56, borderRadius: 8, background: `${it.col}22`, color: it.col, display: 'grid', placeItems: 'center', position: 'relative' }}>
              <Icon name={it.icon} size={22}/>
              <div style={{ position: 'absolute', top: -5, right: -5, fontSize: 8, fontWeight: 800, padding: '2px 5px', borderRadius: 4, background: it.col, color: '#022' }}>PDF</div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{it.t}</div>
              <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 2, display: 'flex', gap: 8, whiteSpace: 'nowrap' }}>
                <span>{it.d}</span><span>·</span><span>{it.sz}</span>
              </div>
            </div>
            <IconBtn name="download" size={34} iconSize={14} bg={pmTokens.bg4}/>
          </div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { ScreenComplaint, ScreenRepair, ScreenSmart, ScreenFeed, ScreenDocs });