// Motion demo — a single interactive phone (iOS + Android variants) where
// tapping the bottom tabs swaps screens with a crossfade-slide, availability
// buttons spring in, and on-mount entries stagger. Lives in its own component
// so it can share state across the iOS-shaped + Android-shaped artboards.

const { useState: useMSt, useEffect: useMEff, useRef: useMRef } = React;

// ─────────────────────────────────────────────────────────────
// Global motion CSS (one-shot inject; the canvas itself owns layout)
// ─────────────────────────────────────────────────────────────
if (typeof document !== 'undefined' && !document.getElementById('crease-motion')) {
  const s = document.createElement('style');
  s.id = 'crease-motion';
  s.textContent = `
@keyframes crease-fadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
@keyframes crease-fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes crease-pop { 0% { transform: scale(0.6); opacity:0; } 70% { transform: scale(1.08); opacity:1; } 100% { transform: scale(1); } }
@keyframes crease-barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes crease-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes crease-trophy { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes crease-slideUp { from { transform: translateY(16px); opacity:0; } to { transform: translateY(0); opacity:1; } }
@keyframes crease-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } }
.crease-stagger > * { animation: crease-fadeUp .42s cubic-bezier(.2,.7,.3,1) both; }
.crease-stagger > *:nth-child(1){animation-delay:.05s}
.crease-stagger > *:nth-child(2){animation-delay:.13s}
.crease-stagger > *:nth-child(3){animation-delay:.21s}
.crease-stagger > *:nth-child(4){animation-delay:.29s}
.crease-stagger > *:nth-child(5){animation-delay:.37s}
.crease-stagger > *:nth-child(6){animation-delay:.45s}
.crease-stagger > *:nth-child(7){animation-delay:.53s}
.crease-press { transition: transform .12s cubic-bezier(.2,.7,.3,1); }
.crease-press:active { transform: scale(0.96); }
.crease-bar-fill { transform-origin: left center; animation: crease-barGrow 1.1s cubic-bezier(.2,.7,.3,1) both; }
.crease-trophy { animation: crease-trophy 2.6s ease-in-out infinite; transform-origin: center; display: inline-block; }
.crease-pulse { animation: crease-pulse 2.4s ease-out infinite; }
.crease-shimmer { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04) 50%, transparent); background-size: 200% 100%; animation: crease-shimmer 2.5s linear infinite; }
`;
  document.head.appendChild(s);
}

// ─────────────────────────────────────────────────────────────
// Demo-screen wrappers — re-skin the existing four screens with
// stagger-in entry, tap-to-set availability, and tab-controlled chrome.
// ─────────────────────────────────────────────────────────────

const DemoHome = ({ platform, setTab }) => {
  const next = FIXTURES[0];
  const [myAvail, setMyAvail] = useMSt('avail');
  const sb = platform === 'ios';
  return (
    <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, color: 'white', fontFamily: MFONT, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {sb && <FakeIosStatus />}
      <div style={{ padding: sb ? '6px 20px 14px' : '18px 20px 14px', display: 'flex', justifyContent: 'space-between' }}>
        <div>
          <div style={{ color: 'white', fontSize: 28, fontWeight: 800, letterSpacing: -0.4 }}>Hi, Asha</div>
          <div style={{ color: COLORS.textSecondary, fontSize: 13, marginTop: 4 }}>3 days until Northbank away</div>
        </div>
        <div onClick={() => setTab('notifs')} className="crease-press" style={{
          width: 38, height: 38, borderRadius: 999, background: COLORS.surface,
          border: `1px solid ${COLORS.border}`, display: 'flex', alignItems: 'center',
          justifyContent: 'center', position: 'relative', cursor: 'pointer',
        }}>
          <Icon name="bell" size={18} stroke={2} style={{ color: 'white' }} />
          <div className="crease-pulse" style={{
            position: 'absolute', top: 6, right: 7, width: 8, height: 8,
            background: COLORS.danger, borderRadius: 999, border: `2px solid ${COLORS.surface}`,
          }} />
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '0 20px', paddingBottom: platform === 'android' ? 80 : 100 }} className="crease-stagger">
        {/* Hero */}
        <div style={{
          background: 'linear-gradient(160deg, rgba(34,197,94,0.16) 0%, rgba(34,197,94,0.04) 60%)',
          borderRadius: 18, padding: 18, border: '1px solid rgba(34,197,94,0.25)', marginBottom: 16,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
            <div>
              <div style={{ color: COLORS.accent, fontSize: 11, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase' }}>Next match</div>
              <div style={{ color: 'white', fontSize: 22, fontWeight: 800, marginTop: 4, letterSpacing: -0.3 }}>vs {next.opponent}</div>
              <div style={{ color: COLORS.textSecondary, fontSize: 13, marginTop: 4 }}>{next.date} · {next.time} · {next.homeAway}</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: COLORS.amber }}>
              <Icon name="sun" size={18} />
              <span style={{ fontSize: 15, fontWeight: 700 }}>{next.weather.temp}</span>
            </div>
          </div>
          {/* live availability */}
          <div style={{ background: 'rgba(11,18,32,0.5)', borderRadius: 12, padding: 12, border: `1px solid ${COLORS.border}` }}>
            <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 10 }}>Your availability</div>
            <div style={{ display: 'flex', gap: 6 }}>
              {[
                { id: 'avail',   label: 'Available', tone: 'accent', icon: 'check' },
                { id: 'maybe',   label: 'Maybe',     tone: 'amber',  icon: 'qmark' },
                { id: 'unavail', label: 'Can\u2019t',tone: 'danger', icon: 'x' },
              ].map(b => {
                const active = myAvail === b.id;
                return (
                  <div key={b.id} onClick={() => setMyAvail(b.id)} className="crease-press" style={{
                    flex: 1, padding: '10px 6px', borderRadius: 10,
                    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                    background: active ? COLORS[b.tone] : 'transparent',
                    border: `1px solid ${active ? COLORS[b.tone] : COLORS.border}`,
                    color: active ? (b.tone === 'accent' ? COLORS.accentInk : '#0B1220') : COLORS.textSecondary,
                    cursor: 'pointer', transition: 'background .22s, color .22s, border-color .22s',
                  }}>
                    <span style={{ display: 'inline-flex', animation: active ? 'crease-pop .42s cubic-bezier(.2,.7,.3,1)' : 'none' }} key={active ? 'on' : 'off'}>
                      <Icon name={b.icon} size={16} stroke={2.5} />
                    </span>
                    <span style={{ fontSize: 11, fontWeight: 700 }}>{b.label}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 6, marginBottom: 12 }}>
          <div style={{ color: 'white', fontSize: 17, fontWeight: 800 }}>Noticeboard</div>
          <div onClick={() => setTab('fixtures')} style={{ color: COLORS.sky, fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>See all</div>
        </div>

        {POSTS.slice(0, 3).map(p => (
          <div key={p.id} className="crease-press" style={{
            background: COLORS.surface, borderRadius: 16, padding: 16, marginBottom: 10,
            border: `1px solid ${COLORS.border}`, cursor: 'pointer',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <MAvatar initials={p.author.split(' ').map(n => n[0]).join('')} size={26} tone={p.authorRole === 'Coach' ? 'amber' : p.authorRole === 'Captain' ? 'accent' : 'sky'} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ color: 'white', fontSize: 12, fontWeight: 600 }}>{p.author}</div>
                <div style={{ color: COLORS.textMuted, fontSize: 10 }}>{p.authorRole} · {p.date}</div>
              </div>
              <MBadge tone={p.tag === 'Training' ? 'sky' : p.tag === 'Kit' ? 'purple' : p.tag === 'Match report' ? 'accent' : 'slate'}>{p.tag}</MBadge>
            </div>
            <div style={{ color: 'white', fontSize: 15, fontWeight: 700, lineHeight: 1.3 }}>{p.title}</div>
            <div style={{ color: COLORS.textSecondary, fontSize: 13, lineHeight: 1.45, marginTop: 6, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{p.excerpt}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

const DemoFixtures = ({ platform }) => {
  const [avail, setAvail] = useMSt({ f1: 'avail', f2: null, f3: null, f4: null });
  const sb = platform === 'ios';
  return (
    <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, color: 'white', fontFamily: MFONT, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {sb && <FakeIosStatus />}
      <div style={{ padding: sb ? '6px 20px 14px' : '18px 20px 14px' }}>
        <div style={{ color: 'white', fontSize: 28, fontWeight: 800, letterSpacing: -0.4 }}>Fixtures</div>
        <div style={{ color: COLORS.textSecondary, fontSize: 13, marginTop: 4 }}>4 upcoming · tap to vote</div>
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '0 20px', paddingBottom: platform === 'android' ? 80 : 100 }} className="crease-stagger">
        {FIXTURES.filter(f => f.status === 'upcoming').map(f => {
          const my = avail[f.id];
          const totalC = f.counts.avail + f.counts.maybe + f.counts.unavail + f.counts.pending;
          return (
            <div key={f.id} style={{ background: COLORS.surface, borderRadius: 16, padding: 16, marginBottom: 12, border: `1px solid ${COLORS.border}` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
                <div>
                  <div style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
                    <MBadge tone={f.type === 'Cup' ? 'purple' : f.type === 'Friendly' ? 'sky' : 'slate'}>{f.type}</MBadge>
                    <MBadge tone={f.homeAway === 'Home' ? 'accent' : 'slate'}>{f.homeAway}</MBadge>
                  </div>
                  <div style={{ color: 'white', fontSize: 17, fontWeight: 800 }}>vs {f.opponent}</div>
                  <div style={{ color: COLORS.textSecondary, fontSize: 12, marginTop: 4 }}>{f.date} · {f.time}</div>
                </div>
                {f.weather && (
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: f.weather.icon === 'sun' ? COLORS.amber : COLORS.textSecondary }}>
                      <Icon name={f.weather.icon} size={16} />
                      <span style={{ fontSize: 13, fontWeight: 700 }}>{f.weather.temp}</span>
                    </div>
                  </div>
                )}
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                {[
                  { id: 'avail',   label: 'Available', tone: 'accent', icon: 'check' },
                  { id: 'maybe',   label: 'Maybe',     tone: 'amber',  icon: 'qmark' },
                  { id: 'unavail', label: 'Can\u2019t',tone: 'danger', icon: 'x' },
                ].map(b => {
                  const active = my === b.id;
                  return (
                    <div key={b.id} onClick={() => setAvail(s => ({ ...s, [f.id]: b.id }))} className="crease-press" style={{
                      flex: 1, padding: '10px 4px', borderRadius: 10,
                      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                      background: active ? COLORS[b.tone] : 'transparent',
                      border: `1px solid ${active ? COLORS[b.tone] : COLORS.border}`,
                      color: active ? (b.tone === 'accent' ? COLORS.accentInk : '#0B1220') : COLORS.textSecondary,
                      cursor: 'pointer', transition: 'background .22s, color .22s, border-color .22s',
                    }}>
                      <span style={{ display: 'inline-flex' }} key={active ? 'on' : 'off'}>
                        <span style={{ display: 'inline-flex', animation: active ? 'crease-pop .42s cubic-bezier(.2,.7,.3,1)' : 'none' }}>
                          <Icon name={b.icon} size={14} stroke={2.5} />
                        </span>
                      </span>
                      <span style={{ fontSize: 11, fontWeight: 700 }}>{b.label}</span>
                    </div>
                  );
                })}
              </div>
              {/* animated breakdown bar */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${COLORS.border}` }}>
                <div style={{ flex: 1, height: 4, borderRadius: 2, display: 'flex', overflow: 'hidden', background: COLORS.border }} className="crease-bar-fill">
                  <div style={{ flex: f.counts.avail, background: COLORS.accent }} />
                  <div style={{ flex: f.counts.maybe, background: COLORS.amber }} />
                  <div style={{ flex: f.counts.unavail, background: COLORS.danger }} />
                  <div style={{ flex: f.counts.pending, background: COLORS.borderStrong }} />
                </div>
                <div style={{ color: COLORS.textMuted, fontSize: 11 }}>
                  <span style={{ color: COLORS.accent, fontWeight: 700 }}>{f.counts.avail}</span> / {totalC}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const DemoNotifs = ({ platform }) => {
  const tones = { fixture: 'sky', post: 'purple', avail: 'amber', vote: 'accent' };
  const icons = { fixture: 'cal', post: 'post', avail: 'check', vote: 'trophy' };
  const sb = platform === 'ios';
  return (
    <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, color: 'white', fontFamily: MFONT, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {sb && <FakeIosStatus />}
      <div style={{ padding: sb ? '6px 20px 14px' : '18px 20px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ color: 'white', fontSize: 28, fontWeight: 800, letterSpacing: -0.4 }}>Inbox</div>
          <div style={{ color: COLORS.textSecondary, fontSize: 13, marginTop: 4 }}>3 unread</div>
        </div>
        <div style={{ color: COLORS.sky, fontSize: 13, fontWeight: 600, padding: 10, cursor: 'pointer' }}>Mark all read</div>
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '0 20px', paddingBottom: platform === 'android' ? 80 : 100 }}>
        <div style={{ color: COLORS.textMuted, fontSize: 11, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', margin: '4px 4px 10px' }}>Today</div>
        <div style={{ background: COLORS.surface, borderRadius: 16, border: `1px solid ${COLORS.border}`, overflow: 'hidden', marginBottom: 16 }} className="crease-stagger">
          {NOTIFS.slice(0, 3).map((n, i, arr) => (
            <div key={n.id} style={{
              display: 'flex', alignItems: 'flex-start', gap: 12, padding: 14,
              borderBottom: i < arr.length - 1 ? `1px solid ${COLORS.border}` : 'none',
              background: n.unread ? 'rgba(56,189,248,0.04)' : 'transparent',
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10, flexShrink: 0,
                background: `rgba(${n.type === 'fixture' ? '56,189,248' : n.type === 'post' ? '139,92,246' : n.type === 'avail' ? '245,158,11' : '34,197,94'}, 0.18)`,
                color: COLORS[tones[n.type]], display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={icons[n.type]} size={18} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <div style={{ color: 'white', fontSize: 14, fontWeight: 700, flex: 1 }}>{n.title}</div>
                  <div style={{ color: COLORS.textMuted, fontSize: 11 }}>{n.time}</div>
                </div>
                <div style={{ color: COLORS.textSecondary, fontSize: 13, lineHeight: 1.4, marginTop: 2 }}>{n.body}</div>
              </div>
              {n.unread && <div style={{ width: 8, height: 8, borderRadius: 999, background: COLORS.sky, marginTop: 6 }} className="crease-pulse" />}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const DemoProfile = ({ platform }) => {
  const me = SQUAD[0];
  const sb = platform === 'ios';
  return (
    <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, color: 'white', fontFamily: MFONT, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {sb && <FakeIosStatus />}
      <div style={{ padding: sb ? '6px 20px 14px' : '18px 20px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ color: 'white', fontSize: 28, fontWeight: 800, letterSpacing: -0.4 }}>Profile</div>
        <div style={{ color: COLORS.sky, fontSize: 13, fontWeight: 600, padding: 10, cursor: 'pointer' }}>Edit</div>
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '0 20px', paddingBottom: platform === 'android' ? 80 : 100 }} className="crease-stagger">
        <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 18, padding: 20, marginBottom: 16, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
          <MAvatar initials={me.initials} size={74} tone="accent" />
          <div style={{ color: 'white', fontSize: 20, fontWeight: 800 }}>{me.name}</div>
          <div style={{ display: 'flex', gap: 6 }}>
            <MBadge tone="accent">Captain</MBadge>
            {me.pos.map(p => <MBadge key={p} tone="slate">{p}</MBadge>)}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 16 }}>
          {[
            { l: 'Matches', v: me.matches, c: 'textPrimary' },
            { l: 'Runs',    v: me.bat,     c: 'accent' },
            { l: 'Average', v: me.avg.toFixed(1), c: 'sky' },
          ].map(s => (
            <div key={s.l} style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 14, padding: 14, textAlign: 'center' }}>
              <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>{s.l}</div>
              <div style={{ color: COLORS[s.c], fontSize: 22, fontWeight: 800, marginTop: 6 }}>{s.v}</div>
            </div>
          ))}
        </div>
        <div style={{ background: COLORS.surface, borderRadius: 16, padding: 16, marginBottom: 16, border: `1px solid ${COLORS.border}` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>Last knock</div>
            <MBadge tone="accent">Won</MBadge>
          </div>
          <div style={{ color: 'white', fontSize: 24, fontWeight: 800 }}>81 <span style={{ color: COLORS.textSecondary, fontSize: 14, fontWeight: 600 }}>(62)</span></div>
          <div style={{ color: COLORS.textSecondary, fontSize: 12, marginTop: 4 }}>vs St Mary's · Sun 10 May</div>
          <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${COLORS.border}`, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="crease-trophy" style={{ color: COLORS.amber }}><Icon name="trophy" size={16} /></span>
            <div style={{ color: COLORS.amber, fontSize: 12, fontWeight: 700 }}>Player of the match</div>
          </div>
        </div>
      </div>
    </div>
  );
};

const FakeIosStatus = () => (
  <div style={{
    paddingTop: 14, paddingLeft: 28, paddingRight: 28, paddingBottom: 6,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontSize: 15, fontWeight: 700, color: 'white',
  }}>
    <span>9:41</span>
    <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
      <svg width="17" height="11" viewBox="0 0 17 11"><rect x="0" y="7" width="3" height="4" rx="0.5" fill="white"/><rect x="4.5" y="5" width="3" height="6" rx="0.5" fill="white"/><rect x="9" y="2.5" width="3" height="8.5" rx="0.5" fill="white"/><rect x="13.5" y="0" width="3" height="11" rx="0.5" fill="white"/></svg>
      <svg width="14" height="11" viewBox="0 0 14 11"><path d="M7 2.5c1.8 0 3.5.7 4.7 1.9l1-1A8 8 0 007 1a8 8 0 00-5.7 2.4l1 1A6.5 6.5 0 017 2.5z" fill="white"/><circle cx="7" cy="9" r="1.5" fill="white"/></svg>
      <div style={{ width: 24, height: 11, border: '1px solid rgba(255,255,255,0.4)', borderRadius: 3, padding: 1 }}><div style={{ width: '80%', height: '100%', background: 'white', borderRadius: 1.5 }} /></div>
    </span>
  </div>
);

// ─────────────────────────────────────────────────────────────
// Animated tab bar — pill slides between tabs
// ─────────────────────────────────────────────────────────────
const AnimatedTabBar = ({ active, setTab, platform = 'ios' }) => {
  const tabs = [
    { id: 'home',    label: 'Home',    icon: 'home' },
    { id: 'fixtures',label: 'Fixtures',icon: 'cal' },
    { id: 'notifs',  label: 'Inbox',   icon: 'bell', badge: 3 },
    { id: 'profile', label: 'Profile', icon: 'users' },
  ];
  const idx = tabs.findIndex(t => t.id === active);
  const android = platform === 'android';
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      height: android ? 64 : 84,
      background: android ? COLORS.surface : 'rgba(11,18,32,0.92)',
      backdropFilter: android ? 'none' : 'blur(20px)',
      WebkitBackdropFilter: android ? 'none' : 'blur(20px)',
      borderTop: `1px solid ${COLORS.border}`,
      paddingTop: 10, paddingBottom: android ? 10 : 30, zIndex: 100,
      display: 'flex', justifyContent: 'space-around', position: 'absolute',
    }}>
      {/* Sliding indicator */}
      <div style={{
        position: 'absolute', top: 6, left: 0,
        width: `${100 / tabs.length}%`,
        height: android ? 36 : 50,
        transform: `translateX(${idx * 100}%)`,
        transition: 'transform .42s cubic-bezier(.34,1.3,.64,1)',
        pointerEvents: 'none',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{
          width: android ? 64 : 56,
          height: android ? 32 : 50,
          borderRadius: android ? 16 : 14,
          background: android ? 'rgba(56,189,248,0.18)' : 'rgba(56,189,248,0.10)',
        }} />
      </div>
      {tabs.map(t => {
        const isActive = t.id === active;
        return (
          <div key={t.id} onClick={() => setTab(t.id)} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            color: isActive ? COLORS.sky : COLORS.textMuted,
            position: 'relative', flex: 1, cursor: 'pointer',
            zIndex: 2, transition: 'color .25s',
          }}>
            <div style={{ position: 'relative' }}>
              <Icon name={t.icon} size={22} stroke={isActive ? 2.5 : 2} />
              {t.badge && (
                <div style={{
                  position: 'absolute', top: -4, right: -8,
                  background: COLORS.danger, color: 'white',
                  fontSize: 9, fontWeight: 800, borderRadius: 999,
                  padding: '1px 5px', minWidth: 14, textAlign: 'center',
                }}>{t.badge}</div>
              )}
            </div>
            <div style={{ fontSize: 10, fontWeight: 600 }}>{t.label}</div>
          </div>
        );
      })}
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Crossfade-slide between screens, keyed by tab so each mount
// re-runs its entry animations.
// ─────────────────────────────────────────────────────────────
const LiveMobileDemo = ({ platform = 'ios' }) => {
  const [tab, setTab] = useMSt('home');
  const [prevTab, setPrev] = useMSt('home');
  const dir = useMRef(0);

  const setNext = (next) => {
    if (next === tab) return;
    const order = ['home', 'fixtures', 'notifs', 'profile'];
    dir.current = order.indexOf(next) > order.indexOf(tab) ? 1 : -1;
    setPrev(tab);
    setTab(next);
  };

  const screenFor = (t) => {
    if (t === 'home') return <DemoHome platform={platform} setTab={setNext} />;
    if (t === 'fixtures') return <DemoFixtures platform={platform} />;
    if (t === 'notifs') return <DemoNotifs platform={platform} />;
    return <DemoProfile platform={platform} />;
  };

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      <div
        key={tab}
        style={{
          position: 'absolute', inset: 0,
          animation: `crease-slideUp .38s cubic-bezier(.2,.7,.3,1) both`,
        }}
      >
        {screenFor(tab)}
      </div>
      <AnimatedTabBar active={tab} setTab={setNext} platform={platform} />
    </div>
  );
};

Object.assign(window, { LiveMobileDemo });