// Sporda — Session 3: System states library.
// 7 reusable templates. Every later screen should compose one of these for
// its empty / loading / error / offline / toast / sheet / modal moments.

// Reusable skeleton block
const Skel = ({ w = '100%', h = 12, r = 6, style }) => (
  <div style={{
    width: w, height: h, borderRadius: r,
    background: 'linear-gradient(90deg, var(--bg-elevated) 0%, var(--bg-surface) 50%, var(--bg-elevated) 100%)',
    backgroundSize: '200% 100%',
    animation: 'shimmer 1.4s ease-in-out infinite',
    ...style,
  }}/>
);
// Inject shimmer keyframes once
if (typeof document !== 'undefined' && !document.getElementById('skel-keyframes')) {
  const s = document.createElement('style');
  s.id = 'skel-keyframes';
  s.textContent = '@keyframes shimmer { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }';
  document.head.appendChild(s);
}

// ===========================================================================
// 069 — EMPTY STATE
// Pattern: tall centered illustration glyph + heading + body + primary CTA.
// Used when followed-only filter has no matches; favorites empty; etc.
// ===========================================================================
const ScreenEmptyState = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body" style={{ display: 'flex', flexDirection: 'column' }}>
        <Header left={<RoundBtn><I.chevL size={18}/></RoundBtn>} title="Favorites" right={<RoundBtn><I.more/></RoundBtn>}/>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 32px', textAlign: 'center', gap: 16 }}>
          {/* Glyph */}
          <div style={{
            width: 96, height: 96, borderRadius: 28,
            background: 'linear-gradient(135deg, rgba(200,255,62,0.12) 0%, rgba(200,255,62,0.04) 100%)',
            border: '1px solid rgba(200,255,62,0.20)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--accent)',
          }}>
            <I.star size={42}/>
          </div>
          <div>
            <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.01em' }}>No favorites yet</div>
            <div style={{ fontSize: 14, color: 'var(--text-secondary)', marginTop: 6, textWrap: 'pretty' }}>
              Tap the star on any match, team, or article to keep it close.
            </div>
          </div>
          <button style={{
            marginTop: 6,
            height: 44, padding: '0 22px',
            background: 'var(--accent)', color: 'var(--accent-ink)',
            borderRadius: 'var(--r-pill)', fontWeight: 700, fontSize: 14,
          }}>Explore matches</button>
          <button style={{
            color: 'var(--text-secondary)', fontWeight: 600, fontSize: 13, marginTop: 2,
          }}>Browse teams</button>
        </div>
      </div>
      <BottomNav active="profile"/>
    </div>
  </div>
);

// ===========================================================================
// 070 — LOADING SKELETON
// Mirrors the Match Detail shell exactly — back chevron, breadcrumb, crest +
// score + crest hero, the 6-tab strip, then event-row placeholders. The
// shape of what's loading is recognizable before the data lands.
// ===========================================================================
const ScreenLoadingSkeleton = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        {/* Header — back chevron, comp/subline placeholder, share */}
        <div style={{ display: 'flex', alignItems: 'center', padding: '8px 16px 16px', gap: 12 }}>
          <Skel w={40} h={40} r={20}/>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <Skel w={120} h={10}/>
            <Skel w={90} h={12}/>
          </div>
          <Skel w={40} h={40} r={20}/>
        </div>

        {/* Score hero — crest, score, crest */}
        <div style={{ padding: '0 20px 20px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 10 }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
              <Skel w={72} h={72} r={36}/>
              <Skel w={70} h={14}/>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Skel w={36} h={44}/><Skel w={12} h={20}/><Skel w={36} h={44}/>
              </div>
              <Skel w={80} h={22} r={999}/>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
              <Skel w={72} h={72} r={36}/>
              <Skel w={70} h={14}/>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 14 }}>
            <Skel w={180} h={9}/>
          </div>
        </div>

        {/* Sub-tabs — 6 labels in a row */}
        <div style={{ borderBottom: '1px solid var(--border-hairline)', padding: '0 20px 14px', display: 'flex', gap: 24 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center' }}>
            <Skel w={56} h={12}/>
            <Skel w={32} h={2}/>
          </div>
          {[44, 52, 48, 36, 38].map((w, i) => (
            <Skel key={i} w={w} h={12}/>
          ))}
        </div>

        {/* Event rows — minute · side · player · sub */}
        <div style={{ padding: '8px 20px' }}>
          {[0, 1, 2, 3, 4].map(i => {
            const homeSide = i % 2 === 0;
            return (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 60px 1fr', alignItems: 'center', padding: '14px 0', borderBottom: '1px solid var(--border-hairline)' }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: homeSide ? 'flex-end' : 'flex-start' }}>
                  {homeSide && <><Skel w={100 + (i*8) % 30} h={12}/><Skel w={70} h={9}/></>}
                </div>
                <Skel w={32} h={12} style={{ margin: '0 auto' }}/>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: homeSide ? 'flex-end' : 'flex-start' }}>
                  {!homeSide && <><Skel w={100 + (i*7) % 30} h={12}/><Skel w={70} h={9}/></>}
                </div>
              </div>
            );
          })}
        </div>

        {/* Source line skel */}
        <div style={{ padding: '14px 0 20px', display: 'flex', justifyContent: 'center' }}>
          <Skel w={140} h={9}/>
        </div>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

// ===========================================================================
// 071 — ERROR STATE
// Recoverable. Heading + body + retry CTA + tertiary "report problem" link.
// ===========================================================================
const ScreenErrorState = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body" style={{ display: 'flex', flexDirection: 'column' }}>
        <Header left={<RoundBtn><I.chevL size={18}/></RoundBtn>} title="Match"/>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 32px', textAlign: 'center', gap: 16 }}>
          <div style={{
            width: 96, height: 96, borderRadius: 28,
            background: 'rgba(255,59,92,0.10)',
            border: '1px solid rgba(255,59,92,0.30)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--live)',
          }}>
            <svg viewBox="0 0 24 24" width={42} height={42} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/>
            </svg>
          </div>
          <div>
            <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.01em' }}>Couldn't load the match</div>
            <div style={{ fontSize: 14, color: 'var(--text-secondary)', marginTop: 6, textWrap: 'pretty' }}>
              The data provider is having a rough patch. Pull to refresh, or try again in a moment.
            </div>
          </div>
          <button style={{
            marginTop: 6,
            height: 44, padding: '0 22px',
            background: 'var(--accent)', color: 'var(--accent-ink)',
            borderRadius: 'var(--r-pill)', fontWeight: 700, fontSize: 14,
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 4v6h-6"/></svg>
            Try again
          </button>
          <button style={{ color: 'var(--text-muted)', fontWeight: 600, fontSize: 12, textDecoration: 'underline' }}>Report a problem</button>
        </div>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

// ===========================================================================
// 072 — OFFLINE STATE
// Banner pinned to top of viewport + the rest of the screen rendered with
// cached content; no destructive empty.
// ===========================================================================
const ScreenOffline = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        {/* Offline banner */}
        <div style={{
          margin: '8px 20px 16px',
          background: 'rgba(255,181,71,0.10)',
          border: '1px solid rgba(255,181,71,0.30)',
          borderRadius: 14,
          padding: '12px 14px',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'rgba(255,181,71,0.20)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--warning)' }}>
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 8.82a15 15 0 0 1 20 0M5 12.86a10 10 0 0 1 14 0M8.5 16.43a5 5 0 0 1 7 0M12 20l.01 0M1 1l22 22"/></svg>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 700 }}>You're offline</div>
            <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>Showing scores cached <span className="mono">4 min</span> ago</div>
          </div>
          <button style={{ fontSize: 12, fontWeight: 700, color: 'var(--warning)' }}>Retry</button>
        </div>
        {/* Faded cached content */}
        <div style={{ opacity: 0.55, padding: '0 20px' }}>
          <div className="card" style={{ marginBottom: 12 }}>
            <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600, marginBottom: 10 }}>Premier League · Old Trafford</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'flex-end' }}>
                <span style={{ fontWeight: 600, fontSize: 14 }}>Atlas FC</span>
                <Crest name="Atlas FC" code="ATL"/>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <span className="score sm">2</span>
                <span style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700 }}>FT</span>
                <span className="score sm">1</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Crest name="Norse Utd" code="NOR"/>
                <span style={{ fontWeight: 600, fontSize: 14 }}>Norse Utd</span>
              </div>
            </div>
          </div>
          <div className="card" style={{ marginBottom: 12 }}>
            <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600, marginBottom: 10 }}>La Liga · Marina Park</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'flex-end' }}>
                <span style={{ fontWeight: 600, fontSize: 14 }}>Marina Bay</span>
                <Crest name="Marina Bay" code="MAR"/>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <span className="score sm">0</span>
                <span style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700 }}>FT</span>
                <span className="score sm">3</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Crest name="Eastside" code="EST"/>
                <span style={{ fontWeight: 600, fontSize: 14 }}>Eastside</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <BottomNav active="home"/>
    </div>
  </div>
);

// ===========================================================================
// 073 — TOAST / BANNER STACK
// Three severity examples + a goal-alert demo toast.
// ===========================================================================
const Toast = ({ kind, title, body, action }) => {
  const colors = {
    success: { bg: 'rgba(74,222,128,0.10)', border: 'rgba(74,222,128,0.30)', fg: 'var(--positive)' },
    warning: { bg: 'rgba(255,181,71,0.10)', border: 'rgba(255,181,71,0.30)', fg: 'var(--warning)' },
    error:   { bg: 'rgba(255,59,92,0.10)',  border: 'rgba(255,59,92,0.30)',  fg: 'var(--live)' },
    info:    { bg: 'rgba(61,90,254,0.10)',  border: 'rgba(61,90,254,0.30)',  fg: '#7B8DFE' },
    goal:    { bg: 'rgba(200,255,62,0.12)', border: 'rgba(200,255,62,0.30)', fg: 'var(--accent)' },
  };
  const c = colors[kind];
  return (
    <div style={{
      background: c.bg, border: '1px solid ' + c.border, borderRadius: 14,
      padding: '12px 14px', display: 'flex', alignItems: 'flex-start', gap: 12,
      marginBottom: 10,
    }}>
      <div style={{ width: 8, height: 8, borderRadius: '50%', background: c.fg, marginTop: 6, flex: 'none' }}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 700 }}>{title}</div>
        <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 2 }}>{body}</div>
      </div>
      {action && <button style={{ fontSize: 12, fontWeight: 700, color: c.fg, flex: 'none', paddingTop: 2 }}>{action}</button>}
    </div>
  );
};

const ScreenToasts = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <Header title="Toasts & banners"/>
        <div style={{ padding: '0 20px 16px' }}>
          <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>Inline banners</div>
          <Toast kind="success" title="Atlas FC added to your favorites" body="You'll get goal alerts when they play." action="Undo"/>
          <Toast kind="warning" title="Quiet hours active" body="Alerts paused until 7:00 AM." action="Manage"/>
          <Toast kind="error"   title="Couldn't sync" body="We'll retry when you're back online." action="Retry"/>
          <Toast kind="info"    title="New feature — Score reveal" body="Hide scores until you're ready to watch back." action="Try it"/>
        </div>
        <div style={{ padding: '0 20px 20px' }}>
          <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>Live goal toast (top, transient)</div>
          <div style={{
            background: 'var(--bg-elevated)',
            borderRadius: 16, padding: '14px 16px',
            display: 'flex', alignItems: 'center', gap: 12,
            border: '1px solid rgba(200,255,62,0.30)',
            boxShadow: '0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,255,62,0.06)',
          }}>
            <Crest name="Atlas FC" code="ATL"/>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ color: 'var(--accent)', display: 'flex' }}><I.goal/></span>
                <span style={{ fontSize: 13, fontWeight: 800 }}>GOAL · J. Okonkwo 67'</span>
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 2 }}>Atlas FC <span className="mono" style={{ color: 'var(--text-primary)', fontWeight: 700 }}>3</span> – <span className="mono">1</span> Norse Utd</div>
            </div>
            <button style={{ fontSize: 12, fontWeight: 700, color: 'var(--accent)' }}>Watch</button>
          </div>
        </div>
        <div style={{ padding: '0 20px 24px' }}>
          <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>System banner (sticky)</div>
          <div style={{
            background: 'var(--hero-grad)',
            border: '1px solid var(--border-strong)',
            borderRadius: 14,
            padding: '14px 16px',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ width: 8, height: 8, borderRadius: 4, background: 'var(--accent)', animation: 'pulse 1.2s ease-in-out infinite' }}/>
            <div style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>3 followed matches live now</div>
            <button style={{ fontSize: 12, fontWeight: 700, color: 'var(--accent)' }}>Jump in</button>
          </div>
        </div>
      </div>
      <BottomNav active="home"/>
    </div>
  </div>
);

// ===========================================================================
// 074 — BOTTOM SHEET (share-as-image preview)
// Used by the "share scoreline" CTA. Preview card on top, action grid below.
// ===========================================================================
const ScreenBottomSheet = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      {/* Dimmed underlay */}
      <div style={{ flex: 1, background: 'rgba(0,0,0,0.65)', position: 'relative' }}>
        {/* faint match header bleeding through */}
        <div style={{ opacity: 0.18, padding: '20px 20px 0' }}>
          <MatchCardHero
            league="Premier League · Old Trafford"
            home={{ name: 'Atlas FC', code: 'ATL' }} away={{ name: 'Norse Utd', code: 'NOR' }}
            hs={2} as={1} minute={67} half="2nd Half"/>
        </div>
      </div>
      {/* Sheet */}
      <div style={{
        background: 'var(--bg-surface)',
        borderTopLeftRadius: 'var(--r-sheet)', borderTopRightRadius: 'var(--r-sheet)',
        padding: '12px 20px 32px',
        position: 'relative',
        boxShadow: 'var(--shadow-sheet)',
      }}>
        {/* Drag handle */}
        <div style={{ width: 40, height: 4, borderRadius: 2, background: 'var(--text-muted)', margin: '0 auto 16px' }}/>
        {/* Preview branded card */}
        <div style={{
          borderRadius: 18, padding: 18, marginBottom: 18,
          background: 'var(--hero-grad)',
          border: '1px solid var(--border-strong)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 700, color: 'var(--text-secondary)' }}>
              <div style={{ width: 16, height: 16, borderRadius: 4, background: 'var(--accent)' }}/>
              Sporda
            </div>
            <span className="pill live"><span className="dot"/>LIVE</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', textAlign: 'center', gap: 10 }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}><Crest name="Atlas FC" code="ATL" size="lg"/><div style={{ fontSize: 11, fontWeight: 700 }}>ATL</div></div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}><span className="score">2</span><span style={{ color: 'var(--text-muted)' }}>:</span><span className="score">1</span></div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}><Crest name="Norse Utd" code="NOR" size="lg"/><div style={{ fontSize: 11, fontWeight: 700 }}>NOR</div></div>
          </div>
          <div style={{ marginTop: 12, fontSize: 11, color: 'var(--text-muted)', textAlign: 'center' }}>67' · Old Trafford · PL</div>
        </div>
        <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Share to</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {[
            { lbl: 'Link', bg: 'var(--bg-inset)', glyph: '🔗' },
            { lbl: 'Messages', bg: '#22C55E', glyph: '💬' },
            { lbl: 'X', bg: '#0E1410', glyph: '𝕏' },
            { lbl: 'Instagram', bg: 'linear-gradient(135deg, #EC4899, #FFE66D)', glyph: '📷' },
            { lbl: 'WhatsApp', bg: '#22C55E', glyph: '✉' },
            { lbl: 'Save', bg: 'var(--bg-inset)', glyph: '⤓' },
            { lbl: 'Reddit', bg: '#FF4500', glyph: '🅡' },
            { lbl: 'More', bg: 'var(--bg-inset)', glyph: '⋯' },
          ].map((a, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{ width: 56, height: 56, borderRadius: 16, background: a.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, color: 'white', fontWeight: 700 }}>{a.glyph}</div>
              <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600 }}>{a.lbl}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

// ===========================================================================
// 075 — MODAL / CONFIRM DIALOG
// Destructive confirm (sign out). Sibling pattern: account deletion.
// ===========================================================================
const ScreenModal = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div style={{ flex: 1, background: 'rgba(0,0,0,0.7)', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 24px' }}>
        <div style={{
          background: 'var(--bg-elevated)',
          borderRadius: 'var(--r-card-lg)',
          padding: 24,
          width: '100%',
          maxWidth: 340,
          border: '1px solid var(--border-hairline)',
          boxShadow: '0 24px 64px rgba(0,0,0,0.65)',
          textAlign: 'center',
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: '50%',
            background: 'rgba(255,113,133,0.10)', border: '1px solid rgba(255,113,133,0.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            margin: '0 auto 16px', color: 'var(--negative)',
          }}>
            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>
          </div>
          <div style={{ fontSize: 18, fontWeight: 800 }}>Sign out of Sporda?</div>
          <div style={{ marginTop: 8, fontSize: 13, color: 'var(--text-secondary)', textWrap: 'pretty' }}>
            Your followed teams and watch history stay safe in the cloud. We'll restore them next time you sign in.
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 20 }}>
            <button style={{
              height: 48, borderRadius: 'var(--r-pill)',
              background: 'var(--negative)', color: '#0A1400',
              fontWeight: 700, fontSize: 14,
            }}>Sign out</button>
            <button style={{
              height: 48, borderRadius: 'var(--r-pill)',
              background: 'var(--bg-surface)', color: 'var(--text-primary)',
              border: '1px solid var(--border-strong)',
              fontWeight: 600, fontSize: 14,
            }}>Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, {
  Skel, Toast,
  ScreenEmptyState, ScreenLoadingSkeleton, ScreenErrorState, ScreenOffline,
  ScreenToasts, ScreenBottomSheet, ScreenModal,
});