// ProMTK — Screens, Part 1: Home, Payments list, Payment detail, Guest, Parking

// ─────────────────────────────────────────────────────────────
// 1. HOME — hero status, quick actions, live stats, feed preview
// ─────────────────────────────────────────────────────────────
const ScreenHome = ({ go }) => {
  const quick = [
    { id: 'pay', icon: 'wallet', label: 'Ödənişlər', color: pmTokens.brand, bg: 'rgba(124,92,255,0.15)' },
    { id: 'guest', icon: 'qr', label: 'Qonaq', color: pmTokens.info, bg: 'rgba(91,192,255,0.15)' },
    { id: 'parking', icon: 'car', label: 'Parkinq', color: pmTokens.ok, bg: 'rgba(52,211,153,0.15)' },
    { id: 'repair', icon: 'tool', label: 'Təmir', color: pmTokens.warn, bg: 'rgba(251,191,36,0.15)' },
    { id: 'complaint', icon: 'signature', label: 'Şikayət', color: pmTokens.danger, bg: 'rgba(251,90,123,0.15)' },
    { id: 'smart', icon: 'bolt', label: 'Smart', color: pmTokens.brand2, bg: 'rgba(178,75,255,0.15)' },
    { id: 'docs', icon: 'doc', label: 'Sənədlər', color: '#7AD9FF', bg: 'rgba(122,217,255,0.15)' },
    { id: 'vote', icon: 'vote', label: 'Səsvermə', color: '#FF9FD1', bg: 'rgba(255,159,209,0.15)' },
  ];
  return (
    <div className="pm-fade">
      {/* Header — greeting + notif */}
      <div style={{ padding: '54px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ position: 'relative' }}>
            <Avatar name="Elvin Məmmədov" size={46} />
            <span style={{ position: 'absolute', right: -2, bottom: -2, width: 14, height: 14, borderRadius: 7, background: pmTokens.ok, border: `2.5px solid ${pmTokens.bg}` }}/>
          </div>
          <div>
            <div style={{ fontSize: 12, color: pmTokens.fg3, fontWeight: 500 }}>Xoş gəldiniz,</div>
            <div style={{ fontSize: 16, fontWeight: 700 }}>Elvin bəy 👋</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <IconBtn name="search" size={42} iconSize={18} bg="rgba(255,255,255,0.06)" />
          <IconBtn name="bell" size={42} iconSize={18} bg="rgba(255,255,255,0.06)" badge="3" onClick={() => go && go('notifications')}/>
        </div>
      </div>

      {/* Building hero card */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{
          position: 'relative', overflow: 'hidden',
          borderRadius: pmTokens.r5, padding: 20,
          background: pmTokens.gradient,
          boxShadow: '0 20px 40px -10px rgba(124,92,255,0.5)',
        }}>
          {/* deco */}
          <div style={{ position: 'absolute', right: -40, top: -40, width: 200, height: 200, borderRadius: 100, background: 'rgba(255,255,255,0.1)' }}/>
          <div style={{ position: 'absolute', right: 10, bottom: -60, width: 160, height: 160, borderRadius: 80, background: 'rgba(255,255,255,0.08)' }}/>
          {/* building silhouette */}
          <svg width="100" height="120" viewBox="0 0 100 120" style={{ position: 'absolute', right: 10, top: 10, opacity: 0.18 }}>
            <rect x="15" y="20" width="70" height="95" rx="3" fill="#fff"/>
            {Array.from({length: 7}).map((_,r)=>Array.from({length: 5}).map((_,c)=>(
              <rect key={`${r}-${c}`} x={22+c*11} y={28+r*12} width="7" height="7" rx="1" fill="#fff" opacity={(r+c)%3===0?0.7:0.3}/>
            )))}
          </svg>

          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 11, opacity: .8, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>Yaşayış Yeri</div>
            <div style={{ fontSize: 22, fontWeight: 800, marginTop: 4, letterSpacing: -0.5 }}>Park Residence</div>
            <div style={{ fontSize: 14, opacity: .85, marginTop: 2 }}>Blok B · Mənzil 47 · 8-ci mərtəbə</div>

            <div style={{ marginTop: 22, display: 'flex', gap: 18 }}>
              <div>
                <div style={{ fontSize: 10, opacity: .75, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.6 }}>Balans</div>
                <div style={{ fontSize: 24, fontWeight: 800, marginTop: 2 }}>127,40 <span style={{ fontSize: 14, opacity: .8 }}>AZN</span></div>
              </div>
              <div style={{ width: 1, background: 'rgba(255,255,255,0.2)' }}/>
              <div>
                <div style={{ fontSize: 10, opacity: .75, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.6 }}>Gecikmə</div>
                <div style={{ fontSize: 24, fontWeight: 800, marginTop: 2, color: '#FFE2B0' }}>0 <span style={{ fontSize: 14, opacity: .8 }}>gün</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Quick actions grid */}
      <div style={{ padding: '22px 20px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
          {quick.map(q => (
            <button key={q.id} onClick={() => go && go(q.id)} className="pm-tap" style={{
              background: pmTokens.bg3, border: `1px solid ${pmTokens.line}`, borderRadius: pmTokens.r3,
              padding: '14px 6px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
              cursor: 'pointer', color: pmTokens.fg, fontFamily: pmTokens.font,
            }}>
              <div style={{ width: 40, height: 40, borderRadius: 14, background: q.bg, display: 'grid', placeItems: 'center', color: q.color }}>
                <Icon name={q.icon} size={20}/>
              </div>
              <span style={{ fontSize: 11, fontWeight: 600, color: pmTokens.fg2 }}>{q.label}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Upcoming payment */}
      <div style={{ padding: '24px 20px 0' }}>
        <SectionHeader title="Növbəti ödəniş" action="Hamısı" onAction={() => go && go('pay')}/>
        <Card onClick={() => go && go('payDetail')} style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ display: 'flex', alignItems: 'center', padding: 16, gap: 14 }}>
            <div style={{ width: 48, height: 48, borderRadius: 14, background: 'rgba(124,92,255,0.18)', color: pmTokens.brand, display: 'grid', placeItems: 'center' }}>
              <Icon name="shield" size={22}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 700 }}>MTK xidmət haqqı</div>
              <div style={{ fontSize: 12, color: pmTokens.fg3, marginTop: 2, display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="calendar" size={12}/> 30 Apr 2026 · 8 gün qaldı
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 18, fontWeight: 800 }}>85,00 ₼</div>
              <Pill color={pmTokens.warn}>Pending</Pill>
            </div>
          </div>
          <div style={{ padding: '0 16px 14px' }}>
            <Progress value={0.7} color={pmTokens.gradient} height={5}/>
          </div>
        </Card>
      </div>

      {/* Utility meters */}
      <div style={{ padding: '24px 20px 0' }}>
        <SectionHeader title="Sayğaclar" action="Təfərrüat"/>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto', padding: '0 20px', margin: '0 -20px' }} className="pm-scroll">
          {[
            { icon: 'drop', color: pmTokens.water, name: 'Su', val: 12.4, unit: 'm³', delta: '+8%', prog: 0.62 },
            { icon: 'flame', color: pmTokens.gas, name: 'Qaz', val: 48, unit: 'm³', delta: '-3%', prog: 0.4 },
            { icon: 'bolt', color: pmTokens.power, name: 'İşıq', val: 186, unit: 'kW', delta: '+12%', prog: 0.78 },
            { icon: 'wifi', color: pmTokens.internet, name: 'İnternet', val: 1, unit: 'Gb', delta: 'aktiv', prog: 1 },
          ].map((m, i) => (
            <div key={i} style={{
              minWidth: 142, background: pmTokens.bg3, borderRadius: pmTokens.r3,
              padding: 14, border: `1px solid ${pmTokens.line}`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: `${m.color}22`, color: m.color, display: 'grid', placeItems: 'center' }}>
                  <Icon name={m.icon} size={16}/>
                </div>
                <span style={{ fontSize: 10, fontWeight: 600, color: m.delta.startsWith('+') ? pmTokens.warn : pmTokens.ok }}>{m.delta}</span>
              </div>
              <div style={{ fontSize: 11, color: pmTokens.fg3 }}>{m.name}</div>
              <div style={{ fontSize: 20, fontWeight: 800, marginTop: 2, letterSpacing: -0.5 }}>
                {m.val} <span style={{ fontSize: 11, color: pmTokens.fg3, fontWeight: 500 }}>{m.unit}</span>
              </div>
              <Progress value={m.prog} color={m.color} height={4} style={{ marginTop: 10 }}/>
            </div>
          ))}
        </div>
      </div>

      {/* Announcements */}
      <div style={{ padding: '24px 20px 20px' }}>
        <SectionHeader title="Bina elanları" action="Hamısı" onAction={() => go && go('announcements')}/>
        <Card style={{ padding: 0, overflow: 'hidden' }}>
          {[
            { tag: 'ACİL', color: pmTokens.danger, title: 'Sabah suyun verilməsi dayanacaq', time: '2 saat əvvəl', icon: 'drop' },
            { tag: 'ELAN', color: pmTokens.brand, title: 'Lift texniki xidmət — 25 Apr', time: 'Dünən', icon: 'elevator' },
            { tag: 'İCLAS', color: pmTokens.info, title: 'Sakinlər iclası — 28 Apr saat 19:00', time: '3 gün əvvəl', icon: 'users' },
          ].map((a, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: 14,
              borderBottom: i < 2 ? `1px solid ${pmTokens.line}` : 'none',
            }}>
              <div style={{ width: 38, height: 38, borderRadius: 12, background: `${a.color}22`, color: a.color, display: 'grid', placeItems: 'center' }}>
                <Icon name={a.icon} size={18}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
                  <Pill color={a.color}>{a.tag}</Pill>
                </div>
                <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.title}</div>
                <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 2 }}>{a.time}</div>
              </div>
              <Icon name="chevronRight" size={16} color={pmTokens.fg3}/>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 2. PAYMENTS
// ─────────────────────────────────────────────────────────────
const ScreenPayments = ({ go }) => {
  const [filter, setFilter] = React.useState('all');
  const items = [
    { id: 1, cat: 'MTK', icon: 'shield', color: pmTokens.brand, label: 'MTK xidmət haqqı', date: '30 Apr 2026', amt: 85, status: 'due' },
    { id: 2, cat: 'Su', icon: 'drop', color: pmTokens.water, label: 'Su (Azərsu)', date: '28 Apr 2026', amt: 14.60, status: 'due' },
    { id: 3, cat: 'İşıq', icon: 'bolt', color: pmTokens.power, label: 'Elektrik (Azərişıq)', date: '25 Apr 2026', amt: 38.20, status: 'due' },
    { id: 4, cat: 'Qaz', icon: 'flame', color: pmTokens.gas, label: 'Qaz (Azəriqaz)', date: '15 Apr 2026', amt: 22.40, status: 'paid' },
    { id: 5, cat: 'İnternet', icon: 'wifi', color: pmTokens.internet, label: 'Ultel Fiber', date: '10 Apr 2026', amt: 28.00, status: 'paid' },
    { id: 6, cat: 'Parkinq', icon: 'car', color: pmTokens.parking, label: 'Parkinq icarə', date: '05 Apr 2026', amt: 50, status: 'paid' },
  ];
  const visible = filter === 'all' ? items : items.filter(i => i.status === filter);
  const due = items.filter(i => i.status === 'due').reduce((a, b) => a + b.amt, 0);

  return (
    <div className="pm-fade">
      {/* header summary */}
      <div style={{ padding: '54px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 13, color: pmTokens.fg3 }}>Ümumi borc</div>
            <div style={{ fontSize: 32, fontWeight: 800, letterSpacing: -1 }}>{due.toFixed(2)} <span style={{ fontSize: 18, color: pmTokens.fg3 }}>₼</span></div>
          </div>
          <IconBtn name="calendar" size={42} iconSize={18} bg="rgba(255,255,255,0.06)"/>
        </div>

        {/* stats triple */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, marginBottom: 16 }}>
          {[
            { lbl: 'Ödənib', val: '112.40', color: pmTokens.ok, icon: 'check' },
            { lbl: 'Gözləyir', val: '137.80', color: pmTokens.warn, icon: 'clock' },
            { lbl: 'Gecikmə', val: '0.00', color: pmTokens.fg2, icon: 'close' },
          ].map((s, i) => (
            <div key={i} style={{ background: pmTokens.bg3, borderRadius: 14, padding: 12, border: `1px solid ${pmTokens.line}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, color: s.color, marginBottom: 4 }}>
                <Icon name={s.icon} size={12}/>
                <span style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5 }}>{s.lbl}</span>
              </div>
              <div style={{ fontSize: 15, fontWeight: 700 }}>{s.val} ₼</div>
            </div>
          ))}
        </div>

        {/* pay all */}
        <Btn full icon="bolt" onClick={() => go && go('payDetail')}>Hamısını ödə · {due.toFixed(2)} ₼</Btn>
      </div>

      {/* filter chips */}
      <div style={{ padding: '20px 20px 0', display: 'flex', gap: 8, overflowX: 'auto' }} className="pm-scroll">
        {[['all', 'Hamısı'], ['due', 'Gözləyir'], ['paid', 'Ödənilib']].map(([id, lbl]) => (
          <Chip key={id} active={filter === id} onClick={() => setFilter(id)}>{lbl}</Chip>
        ))}
      </div>

      {/* list */}
      <div style={{ padding: '12px 20px 20px' }}>
        {visible.map(it => (
          <div key={it.id} onClick={() => go && go('payDetail')} className="pm-tap-soft" style={{
            display: 'flex', alignItems: 'center', gap: 14, padding: '14px',
            background: pmTokens.bg3, borderRadius: pmTokens.r3,
            border: `1px solid ${pmTokens.line}`, marginBottom: 8, cursor: 'pointer',
          }}>
            <div style={{ width: 42, height: 42, borderRadius: 12, background: `${it.color}22`, color: it.color, display: 'grid', placeItems: 'center' }}>
              <Icon name={it.icon} size={18}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{it.label}</div>
              <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 2 }}>{it.date}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: it.status === 'paid' ? pmTokens.fg3 : pmTokens.fg, textDecoration: it.status === 'paid' ? 'line-through' : 'none' }}>{it.amt.toFixed(2)} ₼</div>
              <Pill color={it.status === 'paid' ? pmTokens.ok : pmTokens.warn}>
                {it.status === 'paid' ? '✓ Ödənilib' : 'Gözləyir'}
              </Pill>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 3. PAYMENT DETAIL (before pay confirm)
// ─────────────────────────────────────────────────────────────
const ScreenPayDetail = ({ go }) => {
  const [card, setCard] = React.useState(0);
  const cards = [
    { brand: 'Visa', last: '4821', bank: 'Kapital Bank', grad: 'linear-gradient(135deg, #7C5CFF, #B24BFF)' },
    { brand: 'Mastercard', last: '2194', bank: 'ABB', grad: 'linear-gradient(135deg, #FB5A7B, #FF9150)' },
  ];

  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('pay')}/>
        <h1 style={{ flex: 1, margin: 0, fontSize: 20, fontWeight: 700 }}>Ödəniş</h1>
        <IconBtn name="more" size={38} iconSize={18} bg="rgba(255,255,255,0.06)"/>
      </div>

      {/* amount hero */}
      <div style={{ padding: '24px 20px 0', textAlign: 'center' }}>
        <div style={{ fontSize: 12, color: pmTokens.fg3, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>Ödəniləcək məbləğ</div>
        <div style={{ fontSize: 52, fontWeight: 800, letterSpacing: -2, marginTop: 6, background: pmTokens.gradient, WebkitBackgroundClip: 'text', color: 'transparent' }}>85,00 ₼</div>
        <Pill color={pmTokens.warn} style={{ marginTop: 6 }}>MTK · Aprel 2026</Pill>
      </div>

      {/* breakdown */}
      <div style={{ padding: '28px 20px 0' }}>
        <Card>
          <div style={{ fontSize: 11, color: pmTokens.fg3, fontWeight: 600, textTransform: 'uppercase', marginBottom: 10, letterSpacing: 0.5 }}>Təfərrüat</div>
          {[
            ['Xidmət haqqı', '70,00 ₼'],
            ['Lift xidməti', '10,00 ₼'],
            ['Təmizlik', '5,00 ₼'],
          ].map(([k, v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: 13, color: pmTokens.fg2 }}>
              <span>{k}</span><span style={{ color: pmTokens.fg, fontWeight: 600 }}>{v}</span>
            </div>
          ))}
          <div style={{ height: 1, background: pmTokens.line, margin: '8px 0' }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 4 }}>
            <span style={{ fontSize: 14, fontWeight: 700 }}>Cəmi</span>
            <span style={{ fontSize: 16, fontWeight: 800 }}>85,00 ₼</span>
          </div>
        </Card>
      </div>

      {/* card selector */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ fontSize: 11, color: pmTokens.fg3, fontWeight: 600, textTransform: 'uppercase', marginBottom: 10, letterSpacing: 0.5 }}>Ödəniş kartı</div>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto' }} className="pm-scroll">
          {cards.map((c, i) => (
            <div key={i} onClick={() => setCard(i)} className="pm-tap-soft" style={{
              minWidth: 230, height: 130, borderRadius: pmTokens.r4, padding: 16,
              background: c.grad, color: '#fff', position: 'relative', cursor: 'pointer',
              border: card === i ? `2px solid #fff` : '2px solid transparent',
              boxShadow: card === i ? '0 14px 30px -8px rgba(124,92,255,0.5)' : pmTokens.shadow2,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                <div style={{ fontSize: 12, fontWeight: 600, opacity: .85 }}>{c.bank}</div>
                <div style={{ fontSize: 14, fontWeight: 700, fontStyle: 'italic' }}>{c.brand}</div>
              </div>
              <div style={{ position: 'absolute', bottom: 16, left: 16, right: 16 }}>
                <div style={{ fontSize: 16, letterSpacing: 2, fontFamily: pmTokens.mono }}>•••• {c.last}</div>
                <div style={{ fontSize: 10, opacity: .75, marginTop: 2 }}>09/28</div>
              </div>
            </div>
          ))}
          <div className="pm-tap-soft" style={{ minWidth: 120, height: 130, borderRadius: pmTokens.r4, border: `2px dashed ${pmTokens.lineStrong}`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, color: pmTokens.fg3, cursor: 'pointer' }}>
            <Icon name="plus" size={22}/>
            <span style={{ fontSize: 11, fontWeight: 600 }}>Kart əlavə et</span>
          </div>
        </div>
      </div>

      {/* confirm */}
      <div style={{ padding: '24px 20px 20px', display: 'flex', gap: 10 }}>
        <IconBtn name="shield" size={52} bg="rgba(52,211,153,0.12)" color={pmTokens.ok}/>
        <Btn full style={{ flex: 1 }} icon="check">Təsdiqlə və Ödə</Btn>
      </div>

      <div style={{ textAlign: 'center', fontSize: 11, color: pmTokens.fg3, padding: '0 20px' }}>
        <Icon name="lock" size={11} style={{ verticalAlign: -2, marginRight: 4 }}/>
        256-bit SSL ilə qorunur · 3D Secure təsdiqi
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 4. GUEST (QR access code)
// ─────────────────────────────────────────────────────────────
const ScreenGuest = ({ go }) => {
  const codeNum = '482917';
  const codeFmt = `${codeNum.slice(0,2)} ${codeNum.slice(2,4)} ${codeNum.slice(4,6)}`;
  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 }}>Qonaq kodu</h1>
        <IconBtn name="clock" size={38} iconSize={18} bg="rgba(255,255,255,0.06)" onClick={() => go && go('guestActivity')} aria-label="Ziyarət tarixçəsi"/>
      </div>

      {/* QR card */}
      <div style={{ padding: '24px 20px 0' }}>
        <div style={{
          borderRadius: pmTokens.r5, padding: 24,
          background: pmTokens.gradient, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 30% 20%, rgba(255,255,255,0.2), transparent 60%)' }}/>
          <div style={{ position: 'relative', textAlign: 'center', color: '#fff' }}>
            <div style={{ fontSize: 11, opacity: .85, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>Aktiv kod</div>
            <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4, opacity: .9 }}>Günay xanım üçün</div>
            <div style={{
              background: '#fff', borderRadius: pmTokens.r3, padding: 16,
              marginTop: 16, width: 200, height: 200, margin: '16px auto 0',
              display: 'grid', placeItems: 'center', position: 'relative',
            }}>
              <QRPattern value={`PROMTK:GUEST:${codeNum}:2h`} size={168}/>
            </div>

            {/* 6-digit code */}
            <div style={{ marginTop: 16, fontFamily: pmTokens.mono, fontSize: 30, fontWeight: 700, letterSpacing: 6, whiteSpace: 'nowrap' }}>{codeFmt}</div>
            <div style={{ marginTop: 8, fontSize: 12, opacity: .85, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
              <Icon name="clock" size={12}/> 02 saat 14 dəqiqə qaldı
            </div>
          </div>
        </div>
      </div>

      {/* actions */}
      <div style={{ padding: '20px 20px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <Btn variant="secondary" icon="send">Paylaş</Btn>
        <Btn variant="secondary" icon="refresh">Yenilə</Btn>
      </div>

      {/* recent visitors */}
      <div style={{ padding: '24px 20px 20px' }}>
        <SectionHeader title="Son ziyarətlər" action="Tarixçə" onAction={() => go && go('guestActivity')}/>
        <Card style={{ padding: 0 }}>
          {[
            { name: 'Tural Əliyev', time: 'Bu gün 14:20', status: 'Daxil oldu', color: pmTokens.ok, avatar: true },
            { name: 'Kuryer (Bolt)', time: 'Dünən 19:45', status: 'Daxil oldu', color: pmTokens.ok, icon: 'car' },
            { name: 'Günay Həsənova', time: '20 Apr 11:10', status: 'Gözləyir', color: pmTokens.warn, avatar: true },
            { name: 'Atamın dostu', time: '18 Apr 20:00', status: 'Vaxtı bitdi', color: pmTokens.fg3, avatar: true },
          ].map((v, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderBottom: i < 3 ? `1px solid ${pmTokens.line}` : 'none' }}>
              {v.avatar ? <Avatar name={v.name} size={38}/> :
                <div style={{ width: 38, height: 38, borderRadius: 19, background: pmTokens.bg4, display: 'grid', placeItems: 'center', color: pmTokens.fg2 }}>
                  <Icon name={v.icon} size={18}/>
                </div>}
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{v.name}</div>
                <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 2 }}>{v.time}</div>
              </div>
              <Pill color={v.color}>{v.status}</Pill>
            </div>
          ))}
        </Card>
      </div>

      <div style={{ padding: '0 20px 20px' }}>
        <Btn full icon="plus" onClick={() => go && go('newGuest')}>Yeni qonaq kodu</Btn>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 5. PARKING
// ─────────────────────────────────────────────────────────────
const ScreenParking = ({ 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 }}>Parkinq</h1>
        <IconBtn name="plus" size={38} iconSize={18} bg="rgba(255,255,255,0.06)" onClick={() => go && go('parkingAdd')} aria-label="Əlavə et"/>
      </div>

      {/* my spot */}
      <div style={{ padding: '20px 20px 0' }}>
        <Card style={{
          padding: 0, overflow: 'hidden',
          background: 'linear-gradient(135deg, rgba(52,211,153,0.15), rgba(124,92,255,0.18))',
          border: `1px solid rgba(52,211,153,0.3)`,
        }}>
          <div style={{ padding: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
              <div>
                <Pill color={pmTokens.ok}>Mənim yerim</Pill>
                <div style={{ fontSize: 42, fontWeight: 800, letterSpacing: -1.5, marginTop: 8, fontFamily: pmTokens.mono }}>B-47</div>
                <div style={{ fontSize: 12, color: pmTokens.fg3, marginTop: 2 }}>Yeraltı 2 · Sektor B</div>
              </div>
              {/* Car icon */}
              <div style={{ width: 72, height: 72, borderRadius: 20, background: 'rgba(52,211,153,0.2)', display: 'grid', placeItems: 'center', color: pmTokens.ok }}>
                <Icon name="car" size={36}/>
              </div>
            </div>

            {/* plate */}
            <div style={{
              marginTop: 16, padding: '10px 14px', borderRadius: 10,
              background: 'rgba(255,255,255,0.06)', border: `1px solid ${pmTokens.line}`,
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <div style={{
                background: '#fff', color: '#000', padding: '4px 8px', borderRadius: 4,
                fontFamily: pmTokens.mono, fontWeight: 800, fontSize: 13, letterSpacing: 1,
              }}>10-AA-247</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>Toyota Camry</div>
                <div style={{ fontSize: 11, color: pmTokens.fg3 }}>Ağ · 2022</div>
              </div>
              <Pill color={pmTokens.ok}>Park edilib</Pill>
            </div>
          </div>
        </Card>
      </div>

      {/* level map */}
      <div style={{ padding: '20px 20px 0' }}>
        <SectionHeader title="Yeraltı 2 — canlı"/>
        <Card style={{ padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 11, color: pmTokens.fg3, marginBottom: 14 }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: pmTokens.ok }}/> Boş</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: pmTokens.danger }}/> Tutulub</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: pmTokens.brand }}/> Sizin</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: pmTokens.fg4 }}/> Giriş</span>
          </div>
          {/* Grid diagram */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10,1fr)', gap: 4 }}>
            {Array.from({length: 50}).map((_, i) => {
              const mine = i === 26;
              const occupied = [0,1,3,5,7,8,10,13,15,18,20,22,25,28,30,33,35,37,40,42,45,47,49].includes(i);
              const entry = [4,5].includes(i);
              const color = mine ? pmTokens.brand : entry ? pmTokens.fg4 : occupied ? pmTokens.danger : pmTokens.ok;
              return (
                <div key={i} style={{
                  aspectRatio: '1/1.4', borderRadius: 3,
                  background: `${color}30`, border: `1.5px solid ${color}`,
                  display: 'grid', placeItems: 'center',
                  fontSize: 9, fontWeight: 700, color,
                }}>{mine ? 'ME' : ''}</div>
              );
            })}
          </div>
          <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', fontSize: 12, color: pmTokens.fg3 }}>
            <span>27 boş / 50</span>
            <span style={{ color: pmTokens.ok }}>54% dolu</span>
          </div>
        </Card>
      </div>

      {/* actions */}
      <div style={{ padding: '20px 20px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <Card padding={14} onClick={() => go && go('parkingAdd')} style={{ cursor: 'pointer' }}>
          <div style={{ width: 36, height: 36, borderRadius: 12, background: 'rgba(124,92,255,0.18)', color: pmTokens.brand, display: 'grid', placeItems: 'center', marginBottom: 8 }}>
            <Icon name="qr" size={18}/>
          </div>
          <div style={{ fontSize: 13, fontWeight: 700 }}>Qonaq yeri</div>
          <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 2 }}>Müvəqqəti rezerv</div>
        </Card>
        <Card padding={14} onClick={() => {}} style={{ cursor: 'pointer' }}>
          <div style={{ width: 36, height: 36, borderRadius: 12, background: 'rgba(52,211,153,0.15)', color: pmTokens.ok, display: 'grid', placeItems: 'center', marginBottom: 8 }}>
            <Icon name="doorOpen" size={18}/>
          </div>
          <div style={{ fontSize: 13, fontWeight: 700 }}>Bariyeri aç</div>
          <div style={{ fontSize: 11, color: pmTokens.fg3, marginTop: 2 }}>Uzaqdan idarə</div>
        </Card>
      </div>

      {/* rent history */}
      <div style={{ padding: '20px 20px 20px' }}>
        <SectionHeader title="Ödənişlər"/>
        <Card style={{ padding: 0 }}>
          {[
            { mo: 'Aprel 2026', amt: '50,00 ₼', paid: true },
            { mo: 'Mart 2026', amt: '50,00 ₼', paid: true },
            { mo: 'Fevral 2026', amt: '50,00 ₼', paid: true },
          ].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: 'rgba(52,211,153,0.15)', color: pmTokens.ok, display: 'grid', placeItems: 'center', marginRight: 12 }}>
                <Icon name="check" size={16}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{it.mo}</div>
                <div style={{ fontSize: 11, color: pmTokens.fg3 }}>Parkinq icarə haqqı</div>
              </div>
              <div style={{ fontSize: 14, fontWeight: 700 }}>{it.amt}</div>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenHome, ScreenPayments, ScreenPayDetail, ScreenGuest, ScreenParking });