// Member-facing screens for Gym 24/7
// All Slovak UI. Dark theme, red accents, no emoji.

const { useState: mUseState, useEffect: mUseEffect, useRef: mUseRef, useMemo: mUseMemo } = React;

// ─────────────────────────────────────────────────────────────
// LANDING
// ─────────────────────────────────────────────────────────────
function ScreenLanding() {
  const { go } = useRouter();
  return (
    <div className="phone-screen no-pad noscroll" style={{ overflowY: 'auto', paddingBottom: 0 }}>
      {/* HERO */}
      <div style={{ padding: '76px 22px 30px', position: 'relative' }}>
        {/* tiny top brand */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 50 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 700, letterSpacing: '-0.01em' }}>
            <div style={{ width: 14, height: 14, background: 'var(--red-primary)', borderRadius: 3 }} />
            <span style={{ fontSize: 15 }}>Gym 24/7</span>
          </div>
          <button onClick={() => go('login')} style={{ background: 'transparent', border: 'none', color: '#A1A1A1', fontSize: 14, fontWeight: 500 }}>
            Prihlásiť
          </button>
        </div>

        <div className="pill-red" style={{ marginBottom: 18 }}>POPRAD · MNOHEĽOVA 3 · 24/7</div>
        <h1 style={{
          fontSize: 40, lineHeight: 1.04, fontWeight: 600, margin: '0 0 16px',
          letterSpacing: '-0.025em', textWrap: 'balance',
        }}>
          Tréning kedy chceš.<br/>
          <span style={{ color: 'var(--red-soft)' }}>Bez kompromisov.</span>
        </h1>
        <p style={{ fontSize: 16, lineHeight: 1.5, color: 'var(--text-secondary)', margin: '0 0 28px', maxWidth: 320 }}>
          Zaregistruj sa za 2 minúty. Vstup cez mobil. Bez čipov, bez stretnutí.
        </p>

        <div style={{ display: 'flex', gap: 10, marginBottom: 12 }}>
          <button className="btn-red" style={{ flex: 1 }} onClick={() => go('register')}>Začať</button>
          <button className="btn-outline" style={{ flex: 1 }} onClick={() => go('login')}>Prihlásiť</button>
        </div>
      </div>

      {/* BENEFITS */}
      <div style={{ padding: '24px 22px 30px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {[
          { icon: 'smartphone', title: 'Mobil namiesto čipu', desc: 'NFC, QR alebo (čoskoro) Bluetooth — vstup máš vždy pri sebe.' },
          { icon: 'clock',      title: '24/7 prístup',        desc: 'Otvorené nonstop. Tréning pred prácou, po polnoci, kedy chceš.' },
          { icon: 'trending',   title: 'Sleduj progres',      desc: 'Štatistiky, série, odznaky. Mesačný Wrapped report do mailu.' },
        ].map((b, i) => (
          <div key={i} className="card" style={{ padding: 18, display: 'flex', gap: 14 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 10, background: 'var(--red-faded)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <Icon name={b.icon} size={22} color="var(--red-soft)" />
            </div>
            <div>
              <div style={{ fontWeight: 600, marginBottom: 4 }}>{b.title}</div>
              <div style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.45 }}>{b.desc}</div>
            </div>
          </div>
        ))}
      </div>

      {/* WHITE pricing block */}
      <div style={{ background: '#fff', color: '#0A0A0A', padding: '40px 22px 44px', marginTop: 10 }}>
        <h2 style={{ fontSize: 28, fontWeight: 600, margin: '0 0 6px', letterSpacing: '-0.02em' }}>Členstvo. Bez záväzkov.</h2>
        <p style={{ fontSize: 14, color: '#6B6B6B', margin: '0 0 22px' }}>Plať mesiac po mesiaci. Alebo ušetri ročným.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {MOCK_PRICING.slice(0, 4).map(p => (
            <div key={p.id} style={{
              border: '1px solid #E5E5E5', borderRadius: 12, padding: 16,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              background: p.id === 'monthly' ? '#0A0A0A' : '#fff',
              color: p.id === 'monthly' ? '#fff' : '#0A0A0A',
            }}>
              <div>
                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', color: p.id === 'monthly' ? '#FF1A0F' : '#E10600', textTransform: 'uppercase' }} className="mono">
                  {p.type}
                </div>
                <div style={{ fontSize: 12, color: p.id === 'monthly' ? '#A1A1A1' : '#6B6B6B', marginTop: 2 }}>{p.desc}</div>
              </div>
              <div className="mono" style={{ fontSize: 24, fontWeight: 600 }}>{p.price} €</div>
            </div>
          ))}
        </div>
        <button className="btn-red" style={{ width: '100%', marginTop: 20 }} onClick={() => go('register')}>
          Zaregistrovať sa
        </button>
      </div>

      {/* HOW it works */}
      <div style={{ padding: '40px 22px 50px' }}>
        <div style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 14, textTransform: 'uppercase' }}>Ako to funguje</div>
        {[
          { n: '01', title: 'Zaregistruj sa online', desc: 'Žiadne stretnutia. Účet máš za 2 minúty cez mobil.' },
          { n: '02', title: 'Vyber permanentku',     desc: 'Platba kartou, Apple Pay alebo Google Pay. Hotovo.' },
          { n: '03', title: 'Vstúp kedykoľvek',      desc: 'Prilož mobil k čítačke. Dvere sa otvoria. Trénuj.' },
        ].map((s, i) => (
          <div key={i} style={{ display: 'flex', gap: 18, padding: '18px 0', borderBottom: i < 2 ? '1px solid var(--border)' : 'none' }}>
            <div className="mono" style={{ fontSize: 38, fontWeight: 600, color: 'var(--red-primary)', lineHeight: 1, letterSpacing: '-0.04em', minWidth: 60 }}>{s.n}</div>
            <div>
              <div style={{ fontWeight: 600, marginBottom: 4 }}>{s.title}</div>
              <div style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.45 }}>{s.desc}</div>
            </div>
          </div>
        ))}
      </div>

      {/* footer */}
      <div style={{ padding: '24px 22px 100px', borderTop: '1px solid var(--border)', color: 'var(--text-tertiary)', fontSize: 12, lineHeight: 1.6 }}>
        <div style={{ fontWeight: 700, color: '#fff', marginBottom: 8 }}>Gym 24/7</div>
        Mnoheľova 3, 058 01 Poprad<br/>
        +421 905 000 000 · info@gym247.sk
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// LOGIN
// ─────────────────────────────────────────────────────────────
function ScreenLogin() {
  const { go } = useRouter();
  const [email, setEmail] = mUseState('martin.k@example.com');
  const [pw, setPw] = mUseState('••••••••');
  return (
    <div className="phone-screen no-pad" style={{ padding: '90px 24px 40px', minHeight: '100%' }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 36 }}>
        <div style={{ width: 56, height: 56, background: 'var(--red-primary)', borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
          <div style={{ width: 22, height: 22, background: '#fff', borderRadius: 4 }} />
        </div>
        <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>Prihlás sa do Gym 24/7</div>
        <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginTop: 4 }}>Vitaj späť.</div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <Field label="Email" value={email} onChange={setEmail} type="email" />
        <Field label="Heslo" value={pw} onChange={setPw} type="password" trailing={<button className="btn-ghost" style={{ padding: '4px 0', fontSize: 12 }}>Zabudol si?</button>} />
      </div>

      <button className="btn-red" style={{ width: '100%', marginTop: 22 }} onClick={() => go('dashboard')}>
        Prihlásiť sa
      </button>

      <div style={{ textAlign: 'center', marginTop: 24, fontSize: 13, color: 'var(--text-secondary)' }}>
        Ešte nemáš účet? <a onClick={() => go('register')} style={{ color: 'var(--red-soft)', fontWeight: 600 }}>Zaregistruj sa</a>
      </div>
    </div>
  );
}

function Field({ label, value, onChange, type = 'text', placeholder, trailing }) {
  return (
    <label style={{ display: 'block' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
        <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500, letterSpacing: '0.02em' }}>{label}</span>
        {trailing}
      </div>
      <input
        type={type}
        value={value}
        placeholder={placeholder}
        onChange={e => onChange(e.target.value)}
        style={{
          width: '100%', background: 'var(--bg-secondary)', border: '1px solid var(--border)',
          borderRadius: 10, padding: '13px 14px', color: '#fff',
          fontSize: 15, fontFamily: 'inherit', outline: 'none',
        }}
        onFocus={e => e.target.style.borderColor = '#fff'}
        onBlur={e => e.target.style.borderColor = 'var(--border)'}
      />
    </label>
  );
}

// ─────────────────────────────────────────────────────────────
// REGISTER (3 steps)
// ─────────────────────────────────────────────────────────────
function ScreenRegister() {
  const { go } = useRouter();
  const [step, setStep] = mUseState(1);
  const [data, setData] = mUseState({
    name: '', email: '', phone: '+421 ', pw: '', pw2: '', terms: false,
    dob: '', emName: '', emPhone: '',
  });
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  if (step === 3) {
    return (
      <div className="phone-screen" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100%', padding: 30, position: 'relative' }}>
        <Confetti pieces={36} run />
        <div style={{ textAlign: 'center' }}>
          <BigCheck size={108} color="#E10600" />
          <div style={{ fontSize: 28, fontWeight: 600, margin: '24px 0 8px', letterSpacing: '-0.02em' }}>Hotovo!</div>
          <div style={{ fontSize: 15, color: 'var(--text-secondary)', marginBottom: 36, lineHeight: 1.5 }}>
            Vitaj v Gym 24/7.<br/>Tvoj účet je pripravený.
          </div>
          <button className="btn-red" style={{ width: '100%' }} onClick={() => go('dashboard')}>
            Pokračovať na dashboard
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="phone-screen no-pad" style={{ padding: '70px 22px 40px', minHeight: '100%' }}>
      <button onClick={() => step === 1 ? go('landing') : setStep(step - 1)} style={{
        background: 'rgba(255,255,255,0.06)', border: 'none', color: '#fff',
        width: 36, height: 36, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 18,
      }}>
        <Icon name="back" size={18} color="#fff" />
      </button>

      {/* progress */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 22 }}>
        {[1,2].map(i => (
          <div key={i} style={{ flex: 1, height: 3, borderRadius: 2, background: i <= step ? 'var(--red-primary)' : 'rgba(255,255,255,0.1)', transition: 'background .25s' }} />
        ))}
      </div>

      <div style={{ fontSize: 12, color: 'var(--text-tertiary)', letterSpacing: '0.08em', fontWeight: 600, textTransform: 'uppercase', marginBottom: 6 }}>Krok {step} z 2</div>
      <h2 style={{ fontSize: 24, fontWeight: 600, margin: '0 0 24px', letterSpacing: '-0.02em' }}>
        {step === 1 ? 'Vytvor si účet' : 'Trochu o tebe'}
      </h2>

      {step === 1 ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Field label="Meno a priezvisko" value={data.name} onChange={v => set('name', v)} placeholder="Martin Kováč" />
          <Field label="Email" value={data.email} onChange={v => set('email', v)} type="email" placeholder="martin@example.com" />
          <Field label="Telefón" value={data.phone} onChange={v => set('phone', v)} placeholder="+421 905 ..." />
          <Field label="Heslo" value={data.pw} onChange={v => set('pw', v)} type="password" />
          <Field label="Potvrď heslo" value={data.pw2} onChange={v => set('pw2', v)} type="password" />
          <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginTop: 4, cursor: 'pointer' }}>
            <input type="checkbox" checked={data.terms} onChange={e => set('terms', e.target.checked)} style={{ marginTop: 2, accentColor: '#E10600' }} />
            <span style={{ fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
              Súhlasím so <span style={{ color: '#fff', textDecoration: 'underline' }}>VOP</span> a spracovaním osobných údajov.
            </span>
          </label>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Field label="Dátum narodenia" value={data.dob} onChange={v => set('dob', v)} placeholder="DD. MM. RRRR" />
          <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 10, marginBottom: -4, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600 }}>Núdzový kontakt (voliteľné)</div>
          <Field label="Meno" value={data.emName} onChange={v => set('emName', v)} placeholder="Kontaktná osoba" />
          <Field label="Telefón" value={data.emPhone} onChange={v => set('emPhone', v)} placeholder="+421 ..." />
        </div>
      )}

      <button className="btn-red" style={{ width: '100%', marginTop: 26 }} onClick={() => setStep(step + 1)}>
        {step === 1 ? 'Pokračovať' : 'Dokončiť registráciu'}
      </button>
      {step === 2 && (
        <button className="btn-ghost" style={{ width: '100%', marginTop: 10 }} onClick={() => setStep(3)}>
          Preskočiť
        </button>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// DASHBOARD
// ─────────────────────────────────────────────────────────────
function ScreenDashboard() {
  const { go } = useRouter();
  return (
    <div className="phone-screen noscroll" style={{ overflowY: 'auto' }}>
      {/* greeting */}
      <div style={{ padding: '0 22px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>Ahoj,</div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>Martin</div>
        </div>
        <button onClick={() => go('profile')} style={{ background: 'transparent', border: 'none', padding: 0 }}>
          <Avatar initials="MK" size={40} />
        </button>
      </div>

      {/* status card */}
      <div style={{ padding: '0 22px' }}>
        <div style={{
          background: 'var(--bg-secondary)', borderRadius: 14, padding: 20,
          borderTop: '2px solid var(--red-primary)', border: '1px solid var(--border)',
          borderTopColor: 'var(--red-primary)', borderTopWidth: 2,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
            <div>
              <div className="pill-red" style={{ marginBottom: 10 }}>Mesačná · aktívna</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <CountUp to={23} duration={700} className="mono" style={{ fontSize: 56 }} />
                <span style={{ fontSize: 56, fontWeight: 600, fontFamily: 'Geist Mono, ui-monospace, monospace', letterSpacing: '-0.04em' }}></span>
              </div>
              <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginTop: -4 }}>dní zostáva · platná do 14. júna</div>
            </div>
            <button onClick={() => go('membership')} style={{ background: 'transparent', border: 'none', color: 'var(--red-soft)', fontSize: 13, fontWeight: 600 }}>
              Predĺžiť →
            </button>
          </div>
          {/* progress bar */}
          <div style={{ marginTop: 16, height: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 2 }}>
            <div style={{ width: `${(23/30)*100}%`, height: '100%', background: 'var(--red-primary)', borderRadius: 2 }} />
          </div>
        </div>
      </div>

      {/* live occupancy — kompaktne */}
      <div style={{ padding: '12px 22px 0' }}>
        <LiveOccupancyCard compact onClick={() => go('occupancy')} />
      </div>

      {/* quick action grid */}
      <div style={{ padding: '18px 22px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <ActionTile big icon="ticket" label="Vstup" sub="NFC · QR · BT" onClick={() => go('enter')} />
        <ActionTile icon="wallet" label="Permanentky" onClick={() => go('membership')} />
        <ActionTile icon="barchart" label="Štatistiky" onClick={() => go('stats')} />
        <ActionTile icon="award" label="Odznaky" onClick={() => go('achievements')} />
      </div>

      {/* recent visits */}
      <div style={{ padding: '24px 22px 0' }}>
        <SectionHeader title="Posledné vstupy" actionLabel="Pozrieť všetky" onAction={() => go('stats')} />
        <div className="card" style={{ overflow: 'hidden' }}>
          {MOCK_RECENT_VISITS.slice(0, 5).map((v, i) => (
            <VisitRow key={v.id} visit={v} isLast={i === 4} idx={MOCK_STATS.visitsThisMonth - i} />
          ))}
        </div>
      </div>

      {/* achievements row */}
      <div style={{ padding: '24px 0 30px' }}>
        <div style={{ padding: '0 22px' }}>
          <SectionHeader title="Tvoje odznaky" actionLabel="Všetky" onAction={() => go('achievements')} />
        </div>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto', padding: '0 22px', scrollbarWidth: 'none' }} className="noscroll">
          {MOCK_ACHIEVEMENTS.filter(a => !a.locked).map(a => (
            <div key={a.key} style={{
              flexShrink: 0, width: 100, padding: 14,
              background: 'var(--bg-secondary)', border: '1px solid var(--red-stronger)', borderRadius: 12,
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
              textAlign: 'center',
            }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--red-faded)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={a.icon} size={20} color="var(--red-soft)" />
              </div>
              <div style={{ fontSize: 11.5, fontWeight: 600, lineHeight: 1.2 }}>{a.title}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ActionTile({ big, icon, label, sub, onClick }) {
  return (
    <button onClick={onClick} style={{
      background: big ? 'var(--red-primary)' : 'var(--bg-secondary)',
      border: big ? 'none' : '1px solid var(--border)',
      borderRadius: 14, padding: '18px 16px',
      display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 8,
      color: '#fff', textAlign: 'left',
      gridColumn: big ? 'span 2' : 'auto',
      minHeight: big ? 96 : 90,
      transition: 'transform .1s, background .15s',
    }}
    onMouseDown={e => e.currentTarget.style.transform = 'scale(0.97)'}
    onMouseUp={e => e.currentTarget.style.transform = ''}
    onMouseLeave={e => e.currentTarget.style.transform = ''}
    >
      <Icon name={icon} size={big ? 28 : 22} color="#fff" strokeWidth={big ? 2.2 : 2} />
      <div style={{ marginTop: big ? 'auto' : 0 }}>
        <div style={{ fontSize: big ? 18 : 14, fontWeight: 600, letterSpacing: '-0.01em' }}>{label}</div>
        {sub && <div style={{ fontSize: 12, color: big ? 'rgba(255,255,255,0.75)' : 'var(--text-secondary)', marginTop: 2 }}>{sub}</div>}
      </div>
    </button>
  );
}

function SectionHeader({ title, actionLabel, onAction }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
      <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.005em' }}>{title}</div>
      {actionLabel && (
        <button onClick={onAction} style={{ background: 'transparent', border: 'none', color: 'var(--text-secondary)', fontSize: 12, fontWeight: 500 }}>
          {actionLabel} →
        </button>
      )}
    </div>
  );
}

function VisitRow({ visit, idx, isLast }) {
  const t = new Date(visit.date);
  const time = t.toLocaleTimeString('sk-SK', { hour: '2-digit', minute: '2-digit' });
  const date = t.toLocaleDateString('sk-SK', { day: 'numeric', month: 'short' });
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '12px 16px', borderBottom: isLast ? 'none' : '1px solid var(--border)',
    }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--red-faded)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name={visit.method === 'nfc' ? 'nfc' : 'qr'} size={18} color="var(--red-soft)" />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14, fontWeight: 500 }}>{visit.label}</div>
        <div style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>{date} · {time}</div>
      </div>
      <div style={{ fontSize: 11, color: 'var(--text-tertiary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{visit.method}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ENTER (NFC / QR / BT) — SHOWPIECE
// ─────────────────────────────────────────────────────────────
function ScreenEnter() {
  const { go } = useRouter();
  const [tab, setTab] = mUseState('nfc');
  const [state, setState] = mUseState('idle'); // 'idle' | 'success'

  // Auto-trigger NFC after 4s
  mUseEffect(() => {
    if (tab !== 'nfc' || state !== 'idle') return;
    const t = setTimeout(() => setState('success'), 4000);
    return () => clearTimeout(t);
  }, [tab, state]);

  // After success, auto-redirect
  mUseEffect(() => {
    if (state !== 'success') return;
    const t = setTimeout(() => { setState('idle'); go('dashboard'); }, 2800);
    return () => clearTimeout(t);
  }, [state]);

  if (state === 'success') {
    return (
      <div className="phone-screen" style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        background: 'radial-gradient(circle at 50% 40%, rgba(34,197,94,0.18), transparent 60%), var(--bg-primary)',
        minHeight: '100%', padding: 30,
      }}>
        <BigCheck size={130} color="#22C55E" />
        <div style={{ fontSize: 30, fontWeight: 600, margin: '24px 0 8px', letterSpacing: '-0.02em' }}>Vstup povolený</div>
        <div style={{ fontSize: 15, color: 'var(--text-secondary)', marginBottom: 30, textAlign: 'center', lineHeight: 1.5 }}>
          Mesačná permanentka<br/>platná do 14. júna 2026
        </div>
        <div className="pill-green" style={{ fontSize: 13, padding: '8px 14px' }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#22C55E' }} />
          Brána otvorená
        </div>
      </div>
    );
  }

  return (
    <div className="phone-screen" style={{ paddingBottom: 110 }}>
      <PhoneTopBar title="Vstup do gymu" onBack={() => go('dashboard')} />
      <div style={{ padding: '8px 22px 0' }}>
        <SegTabs value={tab} onChange={setTab} options={[
          { id: 'nfc', label: 'NFC', icon: 'nfc' },
          { id: 'qr',  label: 'QR kód', icon: 'qr' },
          { id: 'bt',  label: 'Bluetooth', icon: 'bluetooth' },
        ]} />
      </div>

      {tab === 'nfc' && (
        <div style={{ padding: '40px 22px 30px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{ textAlign: 'center', marginBottom: 36 }}>
            <h2 style={{ fontSize: 24, fontWeight: 600, margin: '0 0 8px', letterSpacing: '-0.02em' }}>Prilož mobil k čítačke</h2>
            <p style={{ fontSize: 14, color: 'var(--text-secondary)', margin: 0, lineHeight: 1.5 }}>
              Pri dverách svieti zelený indikátor.
            </p>
          </div>

          {/* pulse */}
          <div style={{ position: 'relative', width: 220, height: 220, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 32 }}>
            {[0, 0.6, 1.2].map(d => (
              <div key={d} style={{
                position: 'absolute', inset: 0, borderRadius: '50%',
                background: 'var(--red-primary)',
                animation: `pulse 2.4s ease-out ${d}s infinite`,
              }} />
            ))}
            <div style={{
              width: 130, height: 130, borderRadius: '50%',
              background: 'var(--red-primary)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 0 30px rgba(225,6,0,0.5)',
              position: 'relative', zIndex: 2,
            }}>
              <Icon name="nfc" size={66} color="#fff" strokeWidth={2.2} />
            </div>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--text-secondary)', fontSize: 14, marginBottom: 28 }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--text-secondary)', animation: 'pulse 1.2s ease-out infinite' }} />
            Čaká sa na priloženie...
          </div>

          <button className="btn-outline" onClick={() => setState('success')}>
            Simulovať priloženie
          </button>
        </div>
      )}

      {tab === 'qr' && (
        <div style={{ padding: '40px 22px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{ textAlign: 'center', marginBottom: 28 }}>
            <h2 style={{ fontSize: 24, fontWeight: 600, margin: '0 0 8px', letterSpacing: '-0.02em' }}>Naskenuj QR pri dverách</h2>
            <p style={{ fontSize: 14, color: 'var(--text-secondary)', margin: 0 }}>Polož kód do rámčeka.</p>
          </div>

          {/* fake viewfinder */}
          <div style={{
            width: 260, height: 260, position: 'relative',
            background: '#0E0E10', border: '1px solid var(--border)', borderRadius: 18, overflow: 'hidden',
            marginBottom: 28,
          }}>
            {/* fake gym door image — simulated with stripes */}
            <div style={{
              position: 'absolute', inset: 0,
              background:
                'repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 10px, rgba(255,255,255,0.04) 10px 20px), #1A1A1A',
            }} />
            {/* corners */}
            {[
              { top: 18, left: 18, br: '0 0 0 0', borders: { borderTop: '3px solid #E10600', borderLeft: '3px solid #E10600' } },
              { top: 18, right: 18, borders: { borderTop: '3px solid #E10600', borderRight: '3px solid #E10600' } },
              { bottom: 18, left: 18, borders: { borderBottom: '3px solid #E10600', borderLeft: '3px solid #E10600' } },
              { bottom: 18, right: 18, borders: { borderBottom: '3px solid #E10600', borderRight: '3px solid #E10600' } },
            ].map((c, i) => (
              <div key={i} style={{ position: 'absolute', width: 32, height: 32, ...c, ...c.borders, borderRadius: 4 }} />
            ))}
            {/* scan line */}
            <div style={{
              position: 'absolute', left: 30, right: 30, height: 2,
              background: 'linear-gradient(90deg, transparent, var(--red-soft), transparent)',
              animation: 'scanline 1.8s ease-in-out infinite',
              boxShadow: '0 0 12px var(--red-soft)',
            }} />
            <style>{`@keyframes scanline { 0% { top: 30px; } 50% { top: 220px; } 100% { top: 30px; } }`}</style>
          </div>

          <button className="btn-outline" onClick={() => setState('success')}>
            Simulovať sken
          </button>
        </div>
      )}

      {tab === 'bt' && (
        <div style={{ padding: '24px 22px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div className="card" style={{
            width: '100%', padding: 14, marginBottom: 24,
            background: 'rgba(245,158,11,0.08)', border: '1px solid rgba(245,158,11,0.3)',
            display: 'flex', gap: 12, alignItems: 'flex-start',
          }}>
            <Icon name="zap" size={18} color="#F59E0B" />
            <div style={{ fontSize: 13, color: '#FCD34D', lineHeight: 1.45 }}>
              <b style={{ color: '#F59E0B' }}>Premium funkcia.</b> Bude dostupná v ďalšej verzii.
            </div>
          </div>

          <div style={{
            width: 200, height: 200, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(225,6,0,0.15), transparent 70%)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: 24, position: 'relative',
          }}>
            <Icon name="bluetooth" size={84} color="var(--red-soft)" />
            {[0, 0.4, 0.8].map((d, i) => (
              <div key={i} style={{
                position: 'absolute', inset: 0, borderRadius: '50%',
                border: '1.5px solid rgba(225,6,0,0.3)',
                animation: `wave 2.4s ease-out ${d}s infinite`,
              }} />
            ))}
          </div>

          <h2 style={{ fontSize: 22, fontWeight: 600, margin: '0 0 8px', letterSpacing: '-0.02em', textAlign: 'center' }}>Dvere sa otvoria samé</h2>
          <p style={{ fontSize: 14, color: 'var(--text-secondary)', textAlign: 'center', lineHeight: 1.5, margin: '0 0 24px', maxWidth: 300 }}>
            Pri priblížení k bráne. Žiadny scan, žiadne klikanie.
          </p>
          <button className="btn-outline" style={{ width: '100%' }} onClick={() => alert('Pridané do zoznamu.')}>
            Notifikuj ma keď bude dostupné
          </button>
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// MEMBERSHIP / pricing
// ─────────────────────────────────────────────────────────────
function ScreenMembership() {
  const { go } = useRouter();
  const [picked, setPicked] = mUseState(null);
  const [paying, setPaying] = mUseState(false);

  if (paying) {
    return (
      <div className="phone-screen" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100%' }}>
        <PayingAnim onDone={() => { setPaying(false); setPicked(null); go('membership-success'); }} />
      </div>
    );
  }

  return (
    <div className="phone-screen" style={{ paddingBottom: 110 }}>
      <PhoneTopBar title="Permanentky" onBack={() => go('dashboard')} />
      <div style={{ padding: '4px 22px 0' }}>
        <h1 style={{ fontSize: 28, fontWeight: 600, margin: '8px 0 6px', letterSpacing: '-0.025em' }}>Vyber si permanentku</h1>
        <p style={{ fontSize: 14, color: 'var(--text-secondary)', margin: '0 0 22px' }}>Žiadne dlhé záväzky. Zruš kedykoľvek.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {MOCK_PRICING.map(p => (
            <PricingCard key={p.id} p={p} onPick={() => setPicked(p)} />
          ))}
        </div>

        <div style={{ marginTop: 22, padding: 14, background: 'var(--bg-secondary)', border: '1px solid var(--border)', borderRadius: 12, fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
          Platba je <b style={{ color: '#fff' }}>jednorázová</b>. Nič sa neobnovuje automaticky.<br/>
          Akceptujeme kartu, Apple Pay a Google Pay.
        </div>
      </div>

      <Modal open={!!picked} onClose={() => setPicked(null)}>
        {picked && (
          <>
            <div style={{ fontSize: 11, color: 'var(--red-soft)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }} className="mono">{picked.type}</div>
            <div style={{ fontSize: 20, fontWeight: 600, margin: '0 0 4px' }}>Pokračovať na platbu</div>
            <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 18, lineHeight: 1.5 }}>
              Platba prebieha cez Stripe. Akceptujeme kartu, Apple Pay a Google Pay.
            </div>

            <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
              {[
                { name: 'Karta',     iconKind: 'card' },
                { name: 'Apple Pay', iconKind: 'apple' },
                { name: 'Google Pay',iconKind: 'google' },
              ].map(pm => (
                <div key={pm.name} style={{
                  flex: 1, padding: '14px 8px', border: '1px solid var(--border)', borderRadius: 10,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                }}>
                  <Icon name={pm.iconKind} size={20} color="#fff" />
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{pm.name}</div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', marginBottom: 20 }}>
              <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>Suma</div>
              <div className="mono" style={{ fontSize: 22, fontWeight: 600 }}>{picked.price.toFixed(2)} €</div>
            </div>

            <button className="btn-red" style={{ width: '100%' }} onClick={() => setPaying(true)}>
              Zaplatiť {picked.price} €
            </button>
            <button className="btn-ghost" style={{ width: '100%', marginTop: 6 }} onClick={() => setPicked(null)}>Zrušiť</button>
          </>
        )}
      </Modal>
    </div>
  );
}

function PricingCard({ p, onPick }) {
  const isFeatured = p.badge === 'Najpopulárnejšie';
  return (
    <div style={{
      background: isFeatured ? '#0F0F0F' : 'var(--bg-secondary)',
      border: isFeatured ? '1px solid var(--red-stronger)' : '1px solid var(--border)',
      borderRadius: 12, padding: 18,
      position: 'relative',
    }}>
      {p.badge && (
        <div style={{
          position: 'absolute', top: -10, right: 16,
          padding: '4px 10px', background: isFeatured ? 'var(--red-primary)' : '#fff',
          color: isFeatured ? '#fff' : '#000', borderRadius: 999,
          fontSize: 10, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase',
        }}>{p.badge}</div>
      )}
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--red-soft)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{p.type}</div>
        <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{p.suffix.replace('/', '')}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 12 }}>
        <span className="mono" style={{ fontSize: 38, fontWeight: 600, letterSpacing: '-0.03em' }}>{p.price}</span>
        <span className="mono" style={{ fontSize: 18, color: 'var(--text-secondary)' }}>€</span>
      </div>
      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 16px', display: 'flex', flexDirection: 'column', gap: 6 }}>
        {p.features.map((f, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--text-secondary)' }}>
            <Icon name="check" size={14} color="var(--red-soft)" strokeWidth={3} />
            {f}
          </li>
        ))}
      </ul>
      <button className="btn-red" style={{ width: '100%', padding: '12px 16px' }} onClick={onPick}>Kúpiť</button>
    </div>
  );
}

function PayingAnim({ onDone }) {
  const [phase, setPhase] = mUseState('paying');
  mUseEffect(() => {
    const t1 = setTimeout(() => setPhase('verifying'), 1100);
    const t2 = setTimeout(() => setPhase('done'), 2100);
    const t3 = setTimeout(onDone, 2700);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, []);
  return (
    <div style={{ textAlign: 'center', padding: 30 }}>
      {phase !== 'done' ? (
        <div style={{
          width: 64, height: 64, border: '4px solid rgba(255,255,255,0.1)',
          borderTopColor: 'var(--red-primary)', borderRadius: '50%',
          animation: 'spin 0.8s linear infinite', margin: '0 auto 24px',
        }} />
      ) : (
        <BigCheck size={80} color="#22C55E" />
      )}
      <div style={{ fontSize: 20, fontWeight: 600, marginTop: 18 }}>
        {phase === 'paying' && 'Spracovávam platbu...'}
        {phase === 'verifying' && 'Overujem...'}
        {phase === 'done' && 'Platba úspešná'}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// MEMBERSHIP SUCCESS
// ─────────────────────────────────────────────────────────────
function ScreenMembershipSuccess() {
  const { go } = useRouter();
  const toast = useToast();
  const [walletOpen, setWalletOpen] = mUseState(false);
  return (
    <div className="phone-screen" style={{ padding: '70px 22px 110px', minHeight: '100%' }}>
      <div style={{ textAlign: 'center' }}>
        <BigCheck size={108} color="#22C55E" />
        <h1 style={{ fontSize: 26, fontWeight: 600, margin: '24px 0 8px', letterSpacing: '-0.02em' }}>Hotovo!</h1>
        <p style={{ fontSize: 15, color: 'var(--text-secondary)', margin: '0 0 28px' }}>Tvoja permanentka je aktívna.</p>
      </div>

      {/* wallet card preview */}
      <div style={{
        background: 'linear-gradient(135deg, #1A0001, #0A0A0A)',
        border: '1px solid var(--border)', borderRadius: 16, padding: 22,
        position: 'relative', overflow: 'hidden', marginBottom: 18,
      }}>
        <div style={{
          position: 'absolute', top: -40, right: -40, width: 160, height: 160,
          background: 'radial-gradient(circle, rgba(225,6,0,0.5), transparent 70%)',
        }} />
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 700 }}>
            <div style={{ width: 10, height: 10, background: 'var(--red-primary)', borderRadius: 2 }} />
            Gym 24/7
          </div>
          <div className="pill-red">aktívna</div>
        </div>
        <div className="mono" style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 4 }}>MARTIN KOVÁČ</div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>·······   ·······   1402</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 16 }}>
          <div>
            <div style={{ fontSize: 10, color: 'var(--text-tertiary)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Platná do</div>
            <div className="mono" style={{ fontSize: 14, fontWeight: 600 }}>14. 06. 2026</div>
          </div>
          <div>
            <div style={{ fontSize: 10, color: 'var(--text-tertiary)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Typ</div>
            <div className="mono" style={{ fontSize: 14, fontWeight: 600 }}>MESAČNÁ</div>
          </div>
        </div>
      </div>

      <button className="btn-red" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginBottom: 10 }} onClick={() => setWalletOpen(true)}>
        <Icon name="apple" size={18} color="#fff" /> Pridať do Apple Wallet
      </button>
      <button className="btn-outline" style={{ width: '100%' }} onClick={() => go('dashboard')}>
        Späť na dashboard
      </button>

      <Modal open={walletOpen} onClose={() => setWalletOpen(false)}>
        <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 6 }}>Pridať kartu do peňaženky</div>
        <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 18, lineHeight: 1.5 }}>
          Karta sa pridá do tvojej Apple peňaženky. Otvoríš ju jedným klikom a priložíš mobil k čítačke.
        </div>
        <button className="btn-red" style={{ width: '100%' }} onClick={() => { setWalletOpen(false); toast('Pridané do peňaženky'); }}>
          Pridať
        </button>
        <button className="btn-ghost" style={{ width: '100%', marginTop: 6 }} onClick={() => setWalletOpen(false)}>Zrušiť</button>
      </Modal>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// STATS
// ─────────────────────────────────────────────────────────────
function ScreenStats() {
  const { go } = useRouter();
  const [hover, setHover] = mUseState(null);

  return (
    <div className="phone-screen noscroll" style={{ overflowY: 'auto' }}>
      <PhoneTopBar title="Štatistiky" onBack={() => go('dashboard')} />
      <div style={{ padding: '4px 22px 30px' }}>
        {/* 4 stat cards */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 20 }}>
          <StatCard label="Tento mesiac" value={MOCK_STATS.visitsThisMonth} suffix=" vstupov" />
          <StatCard label="Celkovo" value={MOCK_STATS.visitsTotal} suffix=" vstupov" />
          <StatCard label="Najdlhšia séria" value={MOCK_STATS.longestStreak} suffix=" dní" red />
          <StatCard label="Priemer medzi" valueRaw="2 dni" />
        </div>

        {/* Heatmap */}
        <div style={{ marginBottom: 24 }}>
          <SectionHeader title="Posledných 12 týždňov" />
          <div className="card" style={{ padding: 16 }}>
            <Heatmap data={MOCK_HEATMAP} onHover={setHover} />
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14, fontSize: 11, color: 'var(--text-tertiary)' }}>
              <span>menej</span>
              <div style={{ display: 'flex', gap: 4 }}>
                {[0, 1, 2].map(i => (
                  <div key={i} style={{
                    width: 12, height: 12, borderRadius: 3,
                    background: i === 0 ? 'var(--bg-tertiary)' : i === 1 ? 'rgba(225,6,0,0.4)' : 'var(--red-primary)',
                  }} />
                ))}
              </div>
              <span>viac</span>
            </div>
            <div style={{ marginTop: 10, fontSize: 12, color: 'var(--text-secondary)', minHeight: 16 }}>
              {hover ? hover : 'Klikni / podrž na bunke pre detaily.'}
            </div>
          </div>
        </div>

        {/* Hour chart */}
        <div style={{ marginBottom: 24 }}>
          <SectionHeader title="Kedy chodíš trénovať" />
          <div className="card" style={{ padding: 16 }}>
            <HourChart data={MOCK_HOUR_HIST} />
            <div style={{ marginTop: 12, padding: '10px 12px', background: 'var(--red-faded)', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 10 }}>
              <Icon name="moon" size={18} color="var(--red-soft)" />
              <div style={{ fontSize: 13 }}>
                Najradšej trénuješ o <b style={{ color: 'var(--red-soft)' }} className="mono">23:00</b>. Patríš medzi <b>Top 10%</b> nočných sov.
              </div>
            </div>
          </div>
        </div>

        {/* Achievements teaser */}
        <button onClick={() => go('achievements')} className="card" style={{ width: '100%', padding: 16, display: 'flex', alignItems: 'center', gap: 14, background: 'var(--bg-secondary)', border: '1px solid var(--border)' }}>
          <div style={{ width: 42, height: 42, borderRadius: 10, background: 'var(--red-faded)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="trophy" size={22} color="var(--red-soft)" />
          </div>
          <div style={{ flex: 1, textAlign: 'left' }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>4 odznaky · 8 zamknutých</div>
            <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Pozri si svoje úspechy</div>
          </div>
          <Icon name="chevright" size={18} color="var(--text-tertiary)" />
        </button>
      </div>
    </div>
  );
}

function StatCard({ label, value, valueRaw, suffix = '', red = false }) {
  return (
    <div className="card" style={{ padding: 14, minHeight: 92 }}>
      <div style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '0.05em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 8 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
        {valueRaw ? (
          <span className="mono" style={{ fontSize: 22, fontWeight: 600, color: red ? 'var(--red-soft)' : '#fff', letterSpacing: '-0.02em' }}>{valueRaw}</span>
        ) : (
          <CountUp to={value} className="mono" style={{ fontSize: 28, fontWeight: 600, color: red ? 'var(--red-soft)' : '#fff', letterSpacing: '-0.02em' }} />
        )}
        {suffix && <span style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{suffix.trim()}</span>}
      </div>
    </div>
  );
}

function Heatmap({ data, onHover }) {
  // data: 12 weeks of 7 days
  const today = new Date('2026-05-20');
  return (
    <div style={{ display: 'flex', gap: 4, overflowX: 'auto' }} className="noscroll">
      {data.map((week, wi) => (
        <div key={wi} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {week.map((v, di) => {
            const bg = v === 0 ? 'var(--bg-tertiary)' : v === 1 ? 'rgba(225,6,0,0.4)' : 'var(--red-primary)';
            return (
              <div key={di}
                onMouseEnter={() => onHover && onHover(`${v} vstup${v === 1 ? '' : v >= 2 ? 'y' : ''} · pred ${(12 - wi) * 7 - (6 - di)} dňami`)}
                onMouseLeave={() => onHover && onHover(null)}
                style={{
                  width: 18, height: 18, borderRadius: 4, background: bg,
                  transition: 'transform .12s',
                  cursor: 'pointer',
                }}
              />
            );
          })}
        </div>
      ))}
    </div>
  );
}

function HourChart({ data }) {
  const max = Math.max(...data);
  return (
    <div>
      {/* bars */}
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: 110 }}>
        {data.map((v, h) => {
          const isPeak = h === 23 || h === 5;
          return (
            <div key={h} style={{
              flex: 1, height: `${(v / max) * 100}%`, minHeight: 2,
              background: isPeak ? 'var(--red-primary)' : 'rgba(225,6,0,0.25)',
              borderRadius: '2px 2px 0 0',
              animation: `slideUp .6s ease-out ${h * 12}ms both`,
            }} />
          );
        })}
      </div>
      {/* axis labels — separate row below the chart, aligned to bar columns */}
      <div style={{ display: 'flex', gap: 2, marginTop: 8, borderTop: '1px solid var(--border)', paddingTop: 8 }}>
        {data.map((_, h) => (
          <div key={h} style={{ flex: 1, textAlign: 'center', fontSize: 9, color: 'var(--text-tertiary)', visibility: (h % 6 === 0 || h === 23) ? 'visible' : 'hidden' }} className="mono">
            {h.toString().padStart(2, '0')}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ACHIEVEMENTS
// ─────────────────────────────────────────────────────────────
function ScreenAchievements() {
  const { go } = useRouter();
  const unlocked = MOCK_ACHIEVEMENTS.filter(a => !a.locked);
  const locked = MOCK_ACHIEVEMENTS.filter(a => a.locked);
  return (
    <div className="phone-screen" style={{ paddingBottom: 110 }}>
      <PhoneTopBar title="Odznaky" onBack={() => go('stats')} />
      <div style={{ padding: '8px 22px 0' }}>
        <div style={{ padding: '6px 0 18px' }}>
          <h1 style={{ fontSize: 26, fontWeight: 600, margin: '0 0 6px', letterSpacing: '-0.02em' }}>
            <span className="mono">{unlocked.length}</span> z <span className="mono">{MOCK_ACHIEVEMENTS.length}</span>
          </h1>
          <p style={{ fontSize: 14, color: 'var(--text-secondary)', margin: 0 }}>Pokračuj. Odomyká sa to samo.</p>
        </div>

        <div style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '0.06em', fontWeight: 600, textTransform: 'uppercase', margin: '14px 0 10px' }}>Odomknuté</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 22 }}>
          {unlocked.map(a => <AchCard key={a.key} a={a} />)}
        </div>

        <div style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '0.06em', fontWeight: 600, textTransform: 'uppercase', margin: '10px 0 10px' }}>Zamknuté</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {locked.map(a => <AchCard key={a.key} a={a} />)}
        </div>
      </div>
    </div>
  );
}

function AchCard({ a }) {
  return (
    <div style={{
      background: 'var(--bg-secondary)',
      border: a.locked ? '1px solid var(--border)' : '1px solid var(--red-stronger)',
      borderRadius: 12, padding: 14, minHeight: 130,
      opacity: a.locked ? 0.55 : 1, position: 'relative',
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 10,
        background: a.locked ? 'rgba(255,255,255,0.05)' : 'var(--red-faded)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 10,
      }}>
        <Icon name={a.icon} size={20} color={a.locked ? 'var(--text-tertiary)' : 'var(--red-soft)'} />
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>{a.title}</div>
      <div style={{ fontSize: 11, color: 'var(--text-secondary)', lineHeight: 1.4 }}>{a.desc}</div>
      {a.unlockedAt && (
        <div style={{ fontSize: 10, color: 'var(--text-tertiary)', marginTop: 6 }} className="mono">odomknutý · {a.unlockedAt}</div>
      )}
      {a.progress && (
        <div className="mono" style={{ fontSize: 10, color: 'var(--text-tertiary)', marginTop: 6 }}>{a.progress}</div>
      )}
      {a.locked && (
        <div style={{ position: 'absolute', top: 12, right: 12 }}>
          <Icon name="lock" size={14} color="var(--text-tertiary)" />
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PROFILE
// ─────────────────────────────────────────────────────────────
function ScreenProfile() {
  const { go } = useRouter();
  const toast = useToast();
  return (
    <div className="phone-screen noscroll" style={{ overflowY: 'auto' }}>
      <PhoneTopBar title="Profil" onBack={() => go('dashboard')} />
      <div style={{ padding: '6px 22px 30px' }}>
        {/* user header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '8px 0 22px' }}>
          <Avatar initials="MK" size={60} red />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>Martin Kováč</div>
            <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{MOCK_USER.email}</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 4 }}>člen od 15. sept. 2025</div>
          </div>
        </div>

        <ProfileSection title="Osobné údaje" trailing={<button className="btn-ghost" style={{ fontSize: 12 }} onClick={() => toast('Otvoríme úpravu...', { icon: 'edit' })}>Upraviť</button>}>
          <ProfileRow label="Meno" value="Martin Kováč" />
          <ProfileRow label="Email" value={MOCK_USER.email} />
          <ProfileRow label="Telefón" value={MOCK_USER.phone} last />
        </ProfileSection>

        <ProfileSection title="Núdzový kontakt">
          <ProfileRow label="Meno" value={MOCK_USER.emergencyName} />
          <ProfileRow label="Telefón" value={MOCK_USER.emergencyPhone} last />
        </ProfileSection>

        <ProfileSection title="Predplatné">
          <ProfileRow label="Aktívna permanentka" value="Mesačná · 23 dní" />
          <ProfileLink label="História platieb" onClick={() => toast('Otvoríme históriu...')} />
          <ProfileLink label="Zrušiť predplatné" red onClick={() => toast('Zrušenie sa vyžiada manuálne.', { icon: 'check' })} last />
        </ProfileSection>

        <ProfileSection title="Notifikácie">
          <ToggleRow label="Pripomenutie expirácie" defaultOn />
          <ToggleRow label="Nový odznak" defaultOn />
          <ToggleRow label="Mesačný Wrapped report" defaultOn />
          <ToggleRow label="Akcie a novinky" defaultOn={false} last />
        </ProfileSection>

        <ProfileSection title="Wallet karta">
          <button className="btn-outline" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginBottom: 8 }} onClick={() => toast('Pridané do Apple Wallet')}>
            <Icon name="apple" size={16} color="#fff" /> Apple Wallet
          </button>
          <button className="btn-outline" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }} onClick={() => toast('Pridané do Google Wallet')}>
            <Icon name="google" size={16} color="#fff" /> Google Wallet
          </button>
        </ProfileSection>

        <ProfileSection title="Účet">
          <ProfileLink label="Odhlásiť sa" red onClick={() => go('login')} />
          <ProfileLink label="Zmazať účet" sub onClick={() => toast('Kontaktuj nás na info@gym247.sk')} last />
        </ProfileSection>
      </div>
    </div>
  );
}

function ProfileSection({ title, trailing, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px 8px' }}>
        <div style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '0.06em', fontWeight: 600, textTransform: 'uppercase' }}>{title}</div>
        {trailing}
      </div>
      <div className="card">{children}</div>
    </div>
  );
}
function ProfileRow({ label, value, last }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '13px 16px', borderBottom: last ? 'none' : '1px solid var(--border)' }}>
      <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{label}</span>
      <span style={{ fontSize: 13, fontWeight: 500 }}>{value}</span>
    </div>
  );
}
function ProfileLink({ label, onClick, red, sub, last }) {
  return (
    <button onClick={onClick} style={{
      width: '100%', textAlign: 'left', background: 'transparent', border: 'none',
      padding: '13px 16px', borderBottom: last ? 'none' : '1px solid var(--border)',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      color: red ? 'var(--red-soft)' : sub ? 'var(--text-tertiary)' : '#fff',
      fontSize: sub ? 12 : 13, fontWeight: red ? 600 : 500,
    }}>
      <span>{label}</span>
      <Icon name="chevright" size={14} color={red ? 'var(--red-soft)' : sub ? 'var(--text-tertiary)' : 'var(--text-secondary)'} />
    </button>
  );
}
function ToggleRow({ label, defaultOn = true, last }) {
  const [on, setOn] = mUseState(defaultOn);
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '13px 16px', borderBottom: last ? 'none' : '1px solid var(--border)' }}>
      <span style={{ fontSize: 13 }}>{label}</span>
      <button onClick={() => setOn(o => !o)} style={{
        width: 42, height: 24, borderRadius: 999,
        background: on ? 'var(--red-primary)' : 'rgba(255,255,255,0.1)',
        border: 'none', position: 'relative', transition: 'background .15s', flexShrink: 0,
      }}>
        <div style={{
          position: 'absolute', top: 2, left: on ? 20 : 2,
          width: 20, height: 20, borderRadius: '50%', background: '#fff',
          transition: 'left .15s', boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
        }} />
      </button>
    </div>
  );
}

Object.assign(window, {
  ScreenLanding, ScreenLogin, ScreenRegister, ScreenDashboard,
  ScreenEnter, ScreenMembership, ScreenMembershipSuccess,
  ScreenStats, ScreenAchievements, ScreenProfile,
  ScreenOccupancy,
});

// ─────────────────────────────────────────────────────────────
// OCCUPANCY — live + weekly heatmap (info o gyme, nie o členovi)
// ─────────────────────────────────────────────────────────────
function ScreenOccupancy() {
  const { go } = useRouter();
  return (
    <div className="phone-screen noscroll" style={{ overflowY: 'auto' }}>
      <PhoneTopBar title="Obsadenosť" onBack={() => go('dashboard')} />
      <div style={{ padding: '4px 22px 30px' }}>
        <div style={{ padding: '6px 0 18px' }}>
          <h1 style={{ fontSize: 26, fontWeight: 600, margin: '0 0 6px', letterSpacing: '-0.02em' }}>Kto je práve vo fitku</h1>
          <p style={{ fontSize: 14, color: 'var(--text-secondary)', margin: 0 }}>Naživo zo vstupov. A kedy je zvyčajne najviac ľudí.</p>
        </div>

        <div style={{ marginBottom: 22 }}>
          <LiveOccupancyCard />
        </div>

        <SectionHeader title="Bežná obsadenosť" />
        <div className="card" style={{ padding: 16, marginBottom: 22 }}>
          <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginBottom: 14 }}>Priemer ľudí v každú hodinu, posledné 4 týždne.</div>
          <WeekHeatmap cellSize={11} gap={2} />
        </div>

        <button onClick={() => go('enter')} className="btn-red" style={{ width: '100%' }}>
          Idem trénovať — Vstup
        </button>
      </div>
    </div>
  );
}