// Admin screens for Gym 24/7. Desktop-first layouts inside a browser frame. const { useState: aUseState, useEffect: aUseEffect, useMemo: aUseMemo } = React; // ───────────────────────────────────────────────────────────── // ADMIN SHELL — sidebar + main // ───────────────────────────────────────────────────────────── function AdminShell({ children }) { const { route, go } = useRouter(); const items = [ { id: 'admin', label: 'Dashboard', icon: 'dashboard' }, { id: 'admin-members', label: 'Členovia', icon: 'users' }, { id: 'admin-passes', label: 'Permanentky',icon: 'card', stub: true }, { id: 'admin-logs', label: 'Vstupy', icon: 'log' }, { id: 'admin-door-qr', label: 'QR poster', icon: 'door' }, { id: 'admin-settings', label: 'Nastavenia', icon: 'settings' }, ]; return (

{children}

); } // ───────────────────────────────────────────────────────────── // ADMIN DASHBOARD // ───────────────────────────────────────────────────────────── function ScreenAdminDashboard() { return ( ); } function AdminDashContent() { const [range, setRange] = aUseState('30'); const [stream, setStream] = aUseState(MOCK_ADMIN_RECENT_VISITS); const toast = useToast(); // Fake live feed: prepend a new row every 12s (slightly faster than spec for demo) aUseEffect(() => { const t = setInterval(() => { const fresh = { ...MOCK_LIVE_STREAM_POOL[Math.floor(Math.random() * MOCK_LIVE_STREAM_POOL.length)], timeAgo: 'práve teraz', fresh: true }; setStream(s => [fresh, ...s.slice(0, 11)].map((x, i) => i === 0 ? x : { ...x, fresh: false })); }, 12000); return () => clearInterval(t); }, []); const chartData = range === '7' ? MOCK_ADMIN_CHART_7 : range === '90' ? MOCK_ADMIN_CHART_90 : MOCK_ADMIN_CHART_30; return ( <>

Prehľad · streda 20. máj

Obsadenosť · posledné 4 týždne

priemer ľudí v každú hodinu

Vstupy za posledných {range} dní

Aktuálne vstupy

live

Nový vstup sa pridá automaticky.

{stream.slice(0, 8).map((v, i) => (

{v.name}

pred {v.timeAgo}

povolený

))}

Permanentky končia

Pošli upomienku jedným klikom.

{MOCK_ADMIN_EXPIRING.map((m, i) => { const isRed = m.days <= 2; return (

{m.name}

{m.days === 1 ? 'končí zajtra' : `končí o ${m.days} dní`}

); })}

); } function MetricBox({ label, value, suffix = '', delta, red, icon }) { return (

{label}

{suffix && {suffix}}

{delta && (

{delta}

)}

); } function LineChart({ data, height = 180 }) { const w = 1000; const max = Math.max(...data); const min = Math.min(...data); const range = max - min || 1; const step = w / (data.length - 1); const yOf = v => height - 20 - ((v - min) / range) * (height - 40); const xOf = i => i * step; const path = data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${xOf(i)} ${yOf(v)}`).join(' '); const area = `${path} L ${xOf(data.length - 1)} ${height} L 0 ${height} Z`; return ( ); } // ───────────────────────────────────────────────────────────── // ADMIN MEMBERS list // ───────────────────────────────────────────────────────────── function ScreenAdminMembers() { const [q, setQ] = aUseState(''); const [filter, setFilter] = aUseState('all'); const { go } = useRouter(); const filtered = aUseMemo(() => { return MOCK_ADMIN_MEMBERS.filter(m => { if (q && !m.name.toLowerCase().includes(q.toLowerCase())) return false; if (filter !== 'all' && m.status !== filter) return false; return true; }); }, [q, filter]); const statusPill = (s) => s === 'active' ? aktívna : s === 'expired' ? expirovaná : blokovaná; return (

Členovia

setQ(e.target.value)} placeholder="Hľadať podľa mena..." style={{ width: '100%', background: 'var(--bg-secondary)', border: '1px solid var(--border)', borderRadius: 8, padding: '10px 14px 10px 36px', color: '#fff', fontSize: 13, outline: 'none', }} />

{filtered.map(m => ( go('admin-member-detail', { id: m.id })} style={{ cursor: 'pointer' }}> ))}

	Meno	Telefón	Permanentka	Stav	Posledný vstup	Spolu
	{m.name}	{m.phone}	{m.membership}	{statusPill(m.status)}	{m.lastVisit}	{m.total}

{filtered.length === 0 && (

Žiadny člen nenájdený.

)}

{filtered.length} z {MOCK_ADMIN_MEMBERS.length}

); } // ───────────────────────────────────────────────────────────── // ADMIN MEMBER DETAIL // ───────────────────────────────────────────────────────────── function ScreenAdminMemberDetail() { const { params, go } = useRouter(); const toast = useToast(); const member = MOCK_ADMIN_MEMBERS.find(m => m.id === params.id) || MOCK_ADMIN_MEMBERS[14]; const [tab, setTab] = aUseState('passes'); const [doorOpen, setDoorOpen] = aUseState(false); const [note, setNote] = aUseState(() => { try { return localStorage.getItem('note-' + member.id) || ''; } catch (e) { return ''; } }); aUseEffect(() => { try { localStorage.setItem('note-' + member.id, note); } catch (e) {} }, [note, member.id]); return (

{member.name}

{member.phone} · člen od {member.joinedAt} {member.status === 'active' ? aktívna : member.status === 'expired' ? expirovaná : blokovaná}

{[ { id: 'passes', label: 'Permanentky' }, { id: 'visits', label: 'Vstupy' }, { id: 'notes', label: 'Poznámky' }, ].map(t => ( ))}

{tab === 'passes' && (

Typ	Zakúpené	Platné do	Cena	Stav
Mesačná	15. máj 2026	14. jún 2026	35 €	aktívna
Mesačná	10. apr. 2026	10. máj 2026	35 €	ukončená
Mesačná	10. mar. 2026	10. apr. 2026	35 €	ukončená
10× vstup	15. sept. 2025	15. mar. 2026	42 €	vyčerpaná

)} {tab === 'visits' && ( {MOCK_RECENT_VISITS.map(v => { const d = new Date(v.date); return ( ); })}

Dátum	Čas	Metóda	Stav
{d.toLocaleDateString('sk-SK', { day: 'numeric', month: 'long', year: 'numeric' })}	{d.toLocaleTimeString('sk-SK', { hour: '2-digit', minute: '2-digit' })}	{v.method}	povolený

)} {tab === 'notes' && (

setNote(e.target.value)}
              placeholder="Pridaj poznámku o členovi. Ulozí sa automaticky."
              style={{
                width: '100%', minHeight: 160, padding: 14,
                background: 'var(--bg-primary)', border: '1px solid var(--border)',
                borderRadius: 10, color: '#fff', fontSize: 13, fontFamily: 'inherit',
                resize: 'vertical', outline: 'none',
              }}
            />
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 8 }}>
              {note.length} znakov · uložené lokálne
            </div>
          </div>
        )}
      </div>

<Modal open={doorOpen} onClose={() => setDoorOpen(false)}>
        <div style={{ textAlign: 'center', padding: '10px 0' }}>
          <BigCheck size={72} color="#22C55E" />
          <div style={{ fontSize: 18, fontWeight: 600, margin: '20px 0 6px' }}>Brána otvorená</div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 18 }}>Zostáva 4 s</div>
          <button className="btn-outline" style={{ width: '100%' }} onClick={() => setDoorOpen(false)}>Zatvoriť</button>
        </div>
      </Modal>
    </AdminShell>
  );
}

// ─────────────────────────────────────────────────────────────
// ADMIN ACCESS LOGS — live feed
// ─────────────────────────────────────────────────────────────
function ScreenAdminLogs() {
  const [stream, setStream] = aUseState(() => {
    return MOCK_ADMIN_RECENT_VISITS.map((v, i) => ({
      ...v,
      ts: new Date(Date.now() - i * 7 * 60 * 1000),
    }));
  });
  aUseEffect(() => {
    const t = setInterval(() => {
      const pool = MOCK_LIVE_STREAM_POOL[Math.floor(Math.random() * MOCK_LIVE_STREAM_POOL.length)];
      setStream(s => [{ ...pool, ts: new Date(), fresh: true }, ...s.slice(0, 24)].map((x, i) => i === 0 ? x : { ...x, fresh: false }));
    }, 8000);
    return () => clearInterval(t);
  }, []);
  return (
    <AdminShell>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
        <h1 className="admin-h1">Vstupy · live</h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#22C55E', animation: 'pulse 2s ease-out infinite' }} />
          aktualizuje sa automaticky
        </div>
      </div>

<div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 50 }}></th>
              <th>Člen</th>
              <th>Čas</th>
              <th>Metóda</th>
              <th>Výsledok</th>
            </tr>
          </thead>
          <tbody>
            {stream.map((v, i) => (
              <tr key={i + '_' + v.ts.getTime()} style={{
                animation: v.fresh ? 'slideDown .35s ease-out' : 'none',
                background: v.fresh ? 'rgba(34,197,94,0.04)' : 'transparent',
              }}>
                <td><Avatar initials={v.initials} size={28} /></td>
                <td style={{ fontWeight: 500 }}>{v.name}</td>
                <td className="mono" style={{ color: 'var(--text-secondary)' }}>{v.ts.toLocaleTimeString('sk-SK', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}</td>
                <td><span style={{ textTransform: 'uppercase', fontSize: 11, letterSpacing: '0.05em', color: 'var(--text-secondary)' }}>{v.method}</span></td>
                <td><span className="pill-green">povolený</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </AdminShell>
  );
}

// ─────────────────────────────────────────────────────────────
// ADMIN DOOR QR poster
// ─────────────────────────────────────────────────────────────
function ScreenAdminDoorQR() {
  const toast = useToast();
  const [seed, setSeed] = aUseState(() => Math.random().toString(36).slice(2, 14));
  return (
    <AdminShell>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
        <h1 className="admin-h1">QR poster pre dvere</h1>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn-outline" style={{ padding: '8px 14px', fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 6 }} onClick={() => { setSeed(Math.random().toString(36).slice(2, 14)); toast('QR rotovaný'); }}>
            <Icon name="rotate" size={14} color="currentColor" /> Rotovať
          </button>
          <button className="btn-red" style={{ padding: '8px 14px', fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 6 }} onClick={() => toast('Otvára sa náhľad tlače...', { icon: 'printer' })}>
            <Icon name="printer" size={14} color="#fff" /> Vytlačiť
          </button>
        </div>
      </div>

<div style={{
        background: '#fff', color: '#0A0A0A', padding: 40, borderRadius: 12,
        maxWidth: 560, margin: '0 auto', textAlign: 'center',
        border: '1px solid var(--border)',
        boxShadow: '0 30px 80px rgba(0,0,0,0.45)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, marginBottom: 4 }}>
          <div style={{ width: 18, height: 18, background: '#E10600', borderRadius: 4 }} />
          <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.01em' }}>Gym 24/7</div>
        </div>
        <div style={{ fontSize: 12, color: '#6B6B6B', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 28 }}>Poprad · Mnoheľova 3</div>

<div style={{ fontSize: 24, fontWeight: 600, marginBottom: 18, letterSpacing: '-0.015em' }}>Otvor dvere mobilom</div>

<div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start', maxWidth: 380, margin: '0 auto', textAlign: 'left' }}>
          {[
            'Otvor appku Gym 24/7',
            'Klikni „Vstup" → „QR kód"',
            'Naskenuj tento kód',
          ].map((line, i) => (
            <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <div className="mono" style={{ width: 34, height: 34, borderRadius: '50%', background: '#0A0A0A', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 14 }}>{i + 1}</div>
              <div style={{ fontSize: 15 }}>{line}</div>
            </div>
          ))}
        </div>

<div style={{ marginTop: 32, paddingTop: 18, borderTop: '1px solid #E5E5E5', fontSize: 11, color: '#9CA3AF', letterSpacing: '0.04em' }} className="mono">
          KÓD: {seed.toUpperCase()} · ROTUJE KAŽDÝCH 24 H
        </div>
      </div>
    </AdminShell>
  );
}

// SVG fake QR — deterministic dot grid from seed
function FakeQR({ seed, size = 240 }) {
  const N = 25;
  const cells = aUseMemo(() => {
    // hash seed to bits
    let h = 0;
    for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) | 0;
    const bits = [];
    for (let i = 0; i < N * N; i++) {
      h = (h * 1103515245 + 12345) | 0;
      bits.push((h >>> 16) & 1);
    }
    return bits;
  }, [seed]);
  const c = size / N;
  // finder squares
  const isFinder = (x, y) =>
    (x < 7 && y < 7) || (x >= N - 7 && y < 7) || (x < 7 && y >= N - 7);
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>
      <rect width={size} height={size} fill="#fff" />
      {/* finder pattern outer */}
      {[[0,0],[N-7,0],[0,N-7]].map(([fx, fy], i) => (
        <g key={i}>
          <rect x={fx*c} y={fy*c} width={7*c} height={7*c} fill="#0A0A0A" />
          <rect x={(fx+1)*c} y={(fy+1)*c} width={5*c} height={5*c} fill="#fff" />
          <rect x={(fx+2)*c} y={(fy+2)*c} width={3*c} height={3*c} fill="#0A0A0A" />
        </g>
      ))}
      {/* random data cells */}
      {cells.map((b, i) => {
        if (!b) return null;
        const x = i % N, y = Math.floor(i / N);
        if (isFinder(x, y)) return null;
        return <rect key={i} x={x*c+0.5} y={y*c+0.5} width={c-1} height={c-1} fill="#0A0A0A" />;
      })}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// ADMIN SETTINGS — incl. Wrapped email preview
// ─────────────────────────────────────────────────────────────
function ScreenAdminSettings() {
  const [tab, setTab] = aUseState('basic');
  const toast = useToast();
  return (
    <AdminShell>
      <h1 className="admin-h1" style={{ marginBottom: 18 }}>Nastavenia</h1>

<div style={{ display: 'flex', gap: 4, marginBottom: 22, borderBottom: '1px solid var(--border)' }}>
        {[
          { id: 'basic',     label: 'Základné' },
          { id: 'pricing',   label: 'Cenník' },
          { id: 'onboard',   label: 'Onboarding' },
          { id: 'emails',    label: 'Email šablóny' },
        ].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            background: 'transparent', border: 'none',
            color: tab === t.id ? '#fff' : 'var(--text-tertiary)',
            fontSize: 14, fontWeight: 500,
            padding: '12px 16px', borderBottom: tab === t.id ? '2px solid var(--red-primary)' : '2px solid transparent',
            marginBottom: -1,
          }}>{t.label}</button>
        ))}
      </div>

{tab === 'basic' && (
        <div className="card" style={{ padding: 24, maxWidth: 640 }}>
          <h2 className="admin-h2" style={{ marginBottom: 18 }}>Informácie o gyme</h2>
          {[
            { label: 'Názov', value: 'Gym 24/7 Poprad' },
            { label: 'Adresa', value: 'Mnoheľova 3, 058 01 Poprad' },
            { label: 'Telefón', value: '+421 905 000 000' },
            { label: 'Kontaktný email', value: 'info@gym247.sk' },
          ].map(f => (
            <div key={f.label} style={{ marginBottom: 14 }}>
              <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 6 }}>{f.label}</div>
              <input defaultValue={f.value} style={{
                width: '100%', background: 'var(--bg-primary)', border: '1px solid var(--border)',
                borderRadius: 8, padding: '10px 12px', color: '#fff', fontSize: 14, fontFamily: 'inherit', outline: 'none',
              }} />
            </div>
          ))}
          <button className="btn-red" style={{ marginTop: 10 }} onClick={() => toast('Nastavenia uložené')}>Uložiť</button>
        </div>
      )}

{tab === 'pricing' && (
        <div className="card" style={{ padding: 24, maxWidth: 640 }}>
          <h2 className="admin-h2" style={{ marginBottom: 18 }}>Cenník</h2>
          {MOCK_PRICING.map(p => (
            <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 12 }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--red-soft)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', width: 180 }}>{p.type}</div>
              <input defaultValue={p.price} style={{
                flex: 1, background: 'var(--bg-primary)', border: '1px solid var(--border)',
                borderRadius: 8, padding: '10px 12px', color: '#fff', fontSize: 14, fontFamily: 'Geist Mono, monospace', outline: 'none',
                fontVariantNumeric: 'tabular-nums',
              }} />
              <span style={{ color: 'var(--text-secondary)' }}>€</span>
            </div>
          ))}
          <button className="btn-red" style={{ marginTop: 10 }} onClick={() => toast('Cenník uložený')}>Uložiť</button>
        </div>
      )}

{tab === 'onboard' && (
        <div className="card" style={{ padding: 24, maxWidth: 640 }}>
          <h2 className="admin-h2" style={{ marginBottom: 18 }}>Onboarding nových členov</h2>
          <SettingsToggleRow label="Vyžadovať schválenie nových členov" desc="Nový člen čaká na manuálne schválenie predtým, než môže prísť." />
          <SettingsToggleRow label="Verifikácia telefónu" desc="Pošli SMS kód pri registrácii." defaultOn />
          <SettingsToggleRow label="Onboarding video" desc="Nový člen musí pozrieť 60-sekundové video o bezpečnosti." last />
        </div>
      )}

{tab === 'emails' && <EmailTemplates />}
    </AdminShell>
  );
}

function SettingsToggleRow({ label, desc, defaultOn = false, last }) {
  const [on, setOn] = aUseState(defaultOn);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '14px 0', borderBottom: last ? 'none' : '1px solid var(--border)' }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14, fontWeight: 500 }}>{label}</div>
        <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>{desc}</div>
      </div>
      <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', 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>
  );
}

function EmailTemplates() {
  const [pick, setPick] = aUseState('wrapped');
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 24 }}>
      <div>
        {[
          { id: 'welcome',   label: 'Privítanie', desc: 'Po registrácii' },
          { id: 'reminder',  label: 'Pripomenutie', desc: '3 dni pred koncom' },
          { id: 'wrapped',   label: 'Mesačný Wrapped', desc: '1. v mesiaci' },
        ].map(t => (
          <button key={t.id} onClick={() => setPick(t.id)} style={{
            width: '100%', textAlign: 'left', padding: 14,
            background: pick === t.id ? 'var(--red-faded)' : 'var(--bg-secondary)',
            border: '1px solid ' + (pick === t.id ? 'var(--red-stronger)' : 'var(--border)'),
            borderRadius: 10, color: '#fff', marginBottom: 8, cursor: 'pointer',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
              <Icon name="mail" size={14} color={pick === t.id ? 'var(--red-soft)' : 'var(--text-secondary)'} />
              <span style={{ fontSize: 13, fontWeight: 600 }}>{t.label}</span>
            </div>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{t.desc}</div>
          </button>
        ))}
      </div>
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ padding: '10px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-tertiary)' }}>
          <span>náhľad emailu</span>
          <span className="mono">no-reply@gym247.sk</span>
        </div>
        <div style={{ padding: 0, background: '#0A0A0A' }}>
          {pick === 'welcome' && <EmailWelcome />}
          {pick === 'reminder' && <EmailReminder />}
          {pick === 'wrapped' && <EmailWrapped />}
        </div>
      </div>
    </div>
  );
}

function EmailWelcome() {
  return (
    <div style={{ padding: 40, color: '#fff', textAlign: 'center', maxWidth: 560, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, marginBottom: 24 }}>
        <div style={{ width: 14, height: 14, background: '#E10600', borderRadius: 3 }} />
        <div style={{ fontSize: 16, fontWeight: 700 }}>Gym 24/7</div>
      </div>
      <h2 style={{ fontSize: 28, fontWeight: 600, margin: '0 0 14px', letterSpacing: '-0.02em' }}>Vitaj, Martin!</h2>
      <p style={{ fontSize: 15, lineHeight: 1.6, color: '#A1A1A1', maxWidth: 420, margin: '0 auto 28px' }}>
        Tvoj účet je pripravený. Stiahni si appku, vyber permanentku a poď trénovať. Prvý vstup ti dáme zadarmo.
      </p>
      <button className="btn-red">Otvoriť appku</button>
    </div>
  );
}

function EmailReminder() {
  return (
    <div style={{ padding: 40, color: '#fff', textAlign: 'center', maxWidth: 560, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, marginBottom: 24 }}>
        <div style={{ width: 14, height: 14, background: '#E10600', borderRadius: 3 }} />
        <div style={{ fontSize: 16, fontWeight: 700 }}>Gym 24/7</div>
      </div>
      <div className="pill-amber" style={{ marginBottom: 14 }}>končí o 3 dni</div>
      <h2 style={{ fontSize: 26, fontWeight: 600, margin: '0 0 12px', letterSpacing: '-0.02em' }}>Tvoja permanentka končí v sobotu</h2>
      <p style={{ fontSize: 14, color: '#A1A1A1', lineHeight: 1.6, maxWidth: 380, margin: '0 auto 24px' }}>
        Predĺž ju jedným klikom a pokračuj v tvojej 12-dňovej sérii.
      </p>
      <button className="btn-red">Predĺžiť za 35 €</button>
    </div>
  );
}

// ⭐ The showpiece email — make it gorgeous.
function EmailWrapped() {
  return (
    <div style={{
      padding: 0, color: '#fff',
      background: 'radial-gradient(circle at 30% 0%, rgba(225,6,0,0.35), transparent 50%), radial-gradient(circle at 80% 90%, rgba(225,6,0,0.18), transparent 55%), #0A0A0A',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ padding: '44px 40px', maxWidth: 560, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 36 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 700 }}>
            <div style={{ width: 12, height: 12, background: '#E10600', borderRadius: 3 }} />
            Gym 24/7
          </div>
          <div className="mono" style={{ fontSize: 11, color: '#A1A1A1', letterSpacing: '0.1em' }}>MÁJ 2026</div>
        </div>

<h1 style={{ fontSize: 44, fontWeight: 600, margin: '0 0 12px', letterSpacing: '-0.03em', lineHeight: 1.02 }}>
          Tvoj mesiac<br/>v <span style={{ color: '#FF1A0F' }}>Gym 24/7</span>.
        </h1>
        <p style={{ fontSize: 14, color: '#A1A1A1', margin: '0 0 32px' }}>Tu je, čo si zvládol, Martin.</p>

<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 24 }}>
          <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid #2A2A2A', borderRadius: 16, padding: 22 }}>
            <div className="mono" style={{ fontSize: 56, fontWeight: 600, color: '#FF1A0F', letterSpacing: '-0.04em', lineHeight: 1 }}>14×</div>
            <div style={{ fontSize: 13, color: '#A1A1A1', marginTop: 8 }}>prešiel si dverami</div>
          </div>
          <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid #2A2A2A', borderRadius: 16, padding: 22 }}>
            <div className="mono" style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1.1 }}>23:15</div>
            <div style={{ fontSize: 13, color: '#A1A1A1', marginTop: 8 }}>najobľúbenejší čas</div>
          </div>
        </div>

<div style={{
          background: 'linear-gradient(135deg, rgba(225,6,0,0.18), rgba(225,6,0,0.04))',
          border: '1px solid #4A0001', borderRadius: 16, padding: 24,
          display: 'flex', gap: 16, alignItems: 'center', marginBottom: 24,
        }}>
          <div style={{ width: 56, height: 56, borderRadius: 14, background: 'var(--red-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Icon name="moon" size={28} color="#fff" />
          </div>
          <div>
            <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 4 }}>Patríš medzi Top 10% nočných sov.</div>
            <div style={{ fontSize: 13, color: '#A1A1A1' }}>Získavaš odznak <b style={{ color: '#FF1A0F' }}>Nočná sova</b> + 10 % zľavu na ďalší mesiac.</div>
          </div>
        </div>

<button className="btn-red" style={{ width: '100%' }}>Predĺžiť so zľavou 10 %</button>
        <div style={{ marginTop: 18, fontSize: 11, color: '#6B6B6B', textAlign: 'center' }}>
          Tento report dostávaš každý 1. v mesiaci. Môžeš ho vypnúť v profile.
        </div>
      </div>
    </div>
  );
}
function Stat({ n, sub, red }) {
  return (
    <div style={{ flex: 1 }}>
      <div className="mono" style={{ fontSize: 22, fontWeight: 600, color: red ? '#22C55E' : '#fff', letterSpacing: '-0.02em' }}>{n}</div>
      <div style={{ fontSize: 11, marginTop: 2 }}>{sub}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ADMIN stub for not-built pages
// ─────────────────────────────────────────────────────────────
function ScreenAdminStub() {
  const { params, go } = useRouter();
  return (
    <AdminShell>
      <h1 className="admin-h1" style={{ marginBottom: 8 }}>{params.stubName || 'Stránka'}</h1>
      <p style={{ color: 'var(--text-secondary)', marginBottom: 24 }}>Táto sekcia ešte nie je súčasťou demo prototypu.</p>
      <button className="btn-outline" onClick={() => go('admin')}>Späť na dashboard</button>
    </AdminShell>
  );
}

Object.assign(window, {
  ScreenAdminDashboard, ScreenAdminMembers, ScreenAdminMemberDetail,
  ScreenAdminLogs, ScreenAdminDoorQR, ScreenAdminSettings, ScreenAdminStub,
});