/* Mobile (iPhone) views of public site + alumno portal */

const { useState: useStateM } = React;

/* Mobile Public Site */
const MobilePublic = ({ theme }) => {
  const [view, setView] = useStateM('home');
  const [menu, setMenu] = useStateM(false);

  return (
    <IOSDevice width={390} height={844} dark={theme.name === 'Oscuro' || theme.name === 'Azul'} title="tecoselite.mx">
      <div style={{
        background: theme.bg, color: theme.text, minHeight: '100%',
        fontFamily: 'Inter, sans-serif', overflowY: 'auto', position: 'relative',
        height: '100%',
      }}>
        {/* TOP BAR */}
        <div style={{
          position: 'sticky', top: 0, zIndex: 50,
          background: `${theme.bg}e6`, backdropFilter: 'blur(20px)',
          borderBottom: `1px solid ${theme.border}`,
          padding: '10px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <Logo size={40} theme={theme} />
          <button onClick={() => setMenu(true)} style={{
            width: 38, height: 38, borderRadius: 10,
            background: theme.bgInput, border: `1px solid ${theme.border}`,
            color: theme.text, display: 'grid', placeItems: 'center', cursor: 'pointer',
          }}><Icon name="menu" size={18} /></button>
        </div>

        {/* HERO */}
        <section style={{
          position: 'relative', overflow: 'hidden', padding: '24px 20px 30px',
          background: `linear-gradient(135deg, ${theme.bg}, ${theme.bgElev})`,
        }}>
          <div style={{ position: 'absolute', top: 30, right: -40, opacity: 0.9 }}>
            <div style={{ animation: 'float 6s ease-in-out infinite' }}>
              <Volleyball size={180} color={theme.text} glow />
            </div>
          </div>
          <div style={{ position: 'absolute', bottom: 0, left: -30, opacity: 0.4 }}>
            <div style={{ animation: 'float 8s ease-in-out infinite reverse' }}>
              <Volleyball size={90} color={theme.primary} />
            </div>
          </div>
          <Reveal delay={100}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 11px', borderRadius: 999,
              background: `${theme.primary}22`, border: `1px solid ${theme.primary}55`,
              fontSize: 9, fontWeight: 700, letterSpacing: 2, color: theme.primary,
              textTransform: 'uppercase', marginBottom: 18,
            }}>
              <PulseDot color={theme.primary} size={5} />
              Temporada 2026 abierta
            </div>
          </Reveal>
          <Reveal delay={200}>
            <h1 style={{
              fontFamily: 'Bebas Neue, sans-serif', fontSize: 52, lineHeight: 0.9,
              letterSpacing: 1, color: theme.text, margin: '0 0 12px',
              fontWeight: 400, textWrap: 'balance',
            }}>
              DONDE NACEN<br />
              <span style={gradientTextStyle(theme)}>LOS CAMPEONES</span><br />
              DEL VOLLEYBALL
            </h1>
          </Reveal>
          <Reveal delay={350}>
            <p style={{ fontSize: 13, color: theme.textDim, lineHeight: 1.5, margin: '0 0 18px' }}>
              Academia profesional para todas las edades.
            </p>
          </Reveal>
          <Reveal delay={500}>
            <div style={{ display: 'grid', gap: 8 }}>
              <Btn theme={theme} icon="plus" size="md" style={{ width: '100%', justifyContent: 'center' }}>Inscribirme ahora</Btn>
              <Btn theme={theme} icon="cal" kind="ghost" size="md" style={{ width: '100%', justifyContent: 'center' }}>Ver horarios</Btn>
            </div>
          </Reveal>

          {/* Metrics */}
          <Reveal delay={650}>
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10,
              padding: '18px 0 0', marginTop: 22, borderTop: `1px solid ${theme.border}`,
            }}>
              {[
                { v: '320', s: '+', l: 'Atletas' },
                { v: '14', s: '', l: 'Coaches' },
                { v: '8', s: '', l: 'Cat.' },
                { v: '47', s: '', l: 'Trofeos' },
              ].map(m => (
                <div key={m.l}>
                  <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 26, color: theme.text, letterSpacing: 0.5, lineHeight: 1 }}>
                    <CountUp to={parseInt(m.v)} suffix={m.s} />
                  </div>
                  <div style={{ fontSize: 8, color: theme.textDim, marginTop: 3, letterSpacing: 1, textTransform: 'uppercase', fontWeight: 600 }}>{m.l}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </section>

        {/* AVISOS */}
        <section style={{ padding: '30px 20px', background: theme.bgElev }}>
          <Reveal>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 2.5, color: theme.primary, textTransform: 'uppercase', marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 20, height: 2, background: theme.primary }}></span>
              Avisos importantes
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h2 style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 30, letterSpacing: 1, color: theme.text, margin: '0 0 18px', lineHeight: 1, fontWeight: 400 }}>
              MANTENTE INFORMADO
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gap: 10 }}>
            <Stagger baseDelay={200}>
              {[
                { tag: 'urgente', icon: 'warning', title: 'Cambio de cancha — sábado 18', body: 'Sub-16 se traslada a cancha 2.', date: '15 May', color: theme.urgent },
                { tag: 'torneo', icon: 'trophy', title: 'Copa Estatal de VOLLEYBALL 2026', body: 'Convocatoria hasta 30 de mayo.', date: '12 May', color: theme.warning },
                { tag: 'pago', icon: 'money', title: 'Mensualidad de junio', body: 'Recuerda pagar antes del día 5.', date: '08 May', color: theme.success },
              ].map((a, i) => (
                <Tilt key={i} max={4} scale={1.01}>
                  <Card theme={theme} style={{ padding: 14, position: 'relative', overflow: 'hidden' }}>
                    <div style={{ position: 'absolute', top: 0, left: 0, width: 3, height: '100%', background: a.color }}></div>
                    <div style={{ display: 'flex', gap: 12 }}>
                      <div style={{
                        width: 36, height: 36, borderRadius: 9, background: `${a.color}22`, color: a.color,
                        display: 'grid', placeItems: 'center', flexShrink: 0,
                      }}><Icon name={a.icon} size={16} /></div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, fontWeight: 700, color: theme.text, lineHeight: 1.2 }}>{a.title}</div>
                        <div style={{ fontSize: 11, color: theme.textDim, marginTop: 4, lineHeight: 1.4 }}>{a.body}</div>
                        <div style={{ fontSize: 9, color: theme.textMute, marginTop: 6, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase' }}>{a.date}</div>
                      </div>
                    </div>
                  </Card>
                </Tilt>
              ))}
            </Stagger>
          </div>
        </section>

        {/* CALENDAR */}
        <section style={{ padding: '30px 20px' }}>
          <Reveal>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 2.5, color: theme.primary, textTransform: 'uppercase', marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 20, height: 2, background: theme.primary }}></span>
              Próximos eventos
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h2 style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 30, letterSpacing: 1, color: theme.text, margin: '0 0 18px', lineHeight: 1, fontWeight: 400 }}>MAYO 2026</h2>
          </Reveal>
          <div style={{ display: 'grid', gap: 10 }}>
            <Stagger baseDelay={200} step={70}>
              {[
                { day: 18, name: 'Torneo Sub-14 vs. Pumas', type: 'torneo', time: '10:00', color: theme.warning },
                { day: 22, name: 'Reunión de padres', type: 'reunión', time: '19:00', color: theme.primary },
                { day: 24, name: 'Entrenamiento especial', type: 'evento', time: '17:00', color: theme.info },
                { day: 28, name: 'Cierre pago Junio', type: 'pago', time: '23:59', color: theme.danger },
              ].map((ev, i) => (
                <Card key={i} theme={theme} style={{ padding: 12, display: 'flex', gap: 12, alignItems: 'center' }}>
                  <div style={{
                    width: 48, height: 48, borderRadius: 10,
                    background: `${ev.color}22`, border: `1px solid ${ev.color}55`,
                    display: 'grid', placeItems: 'center', flexShrink: 0, textAlign: 'center',
                  }}>
                    <div>
                      <div style={{ fontSize: 8, color: ev.color, fontWeight: 700, letterSpacing: 1 }}>MAY</div>
                      <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 22, color: ev.color, marginTop: 1, lineHeight: 1 }}>{ev.day}</div>
                    </div>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: theme.text }}>{ev.name}</div>
                    <div style={{ fontSize: 11, color: theme.textDim, marginTop: 4, display: 'flex', gap: 8 }}>
                      <span>{ev.time}</span><span>·</span>
                      <span style={{ color: ev.color, textTransform: 'capitalize' }}>{ev.type}</span>
                    </div>
                  </div>
                  <Icon name="chev" size={14} style={{ color: theme.textMute }} />
                </Card>
              ))}
            </Stagger>
          </div>
        </section>

        {/* COACHES */}
        <section style={{ padding: '30px 20px', background: theme.bgElev }}>
          <Reveal>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 2.5, color: theme.primary, textTransform: 'uppercase', marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 20, height: 2, background: theme.primary }}></span>
              Cuerpo técnico
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h2 style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 30, letterSpacing: 1, color: theme.text, margin: '0 0 18px', lineHeight: 1, fontWeight: 400 }}>
              ENTRENADORES DE ÉLITE
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <Stagger baseDelay={200} step={80}>
              {[
                { name: 'Carlos Méndez', role: 'Director', exp: '15 años' },
                { name: 'Mariana Lugo', role: 'Sub-14/16', exp: '9 años' },
                { name: 'Diego Ferrer', role: 'Físico', exp: '7 años' },
                { name: 'Ana Beltrán', role: 'Sub-12', exp: '5 años' },
              ].map((c, i) => (
                <Card key={i} theme={theme} style={{ padding: 0, overflow: 'hidden' }}>
                  <div style={{
                    aspectRatio: '1', background: `linear-gradient(180deg, ${theme.primary}33, ${theme.bgInput})`,
                    display: 'grid', placeItems: 'center', position: 'relative',
                  }}>
                    <Avatar name={c.name} size={70} color={theme.primary} />
                    <div style={{
                      position: 'absolute', top: 8, right: 8,
                      padding: '3px 7px', borderRadius: 999,
                      background: 'rgba(0,0,0,0.5)', color: '#fff',
                      fontSize: 8, fontWeight: 700, letterSpacing: 0.5,
                    }}>{c.exp}</div>
                  </div>
                  <div style={{ padding: 10 }}>
                    <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 16, letterSpacing: 0.5, color: theme.text, lineHeight: 1 }}>{c.name}</div>
                    <div style={{ fontSize: 9, color: theme.primary, marginTop: 4, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase' }}>{c.role}</div>
                  </div>
                </Card>
              ))}
            </Stagger>
          </div>
        </section>

        {/* TIENDA */}
        <section style={{ padding: '30px 20px' }}>
          <Reveal>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 2.5, color: theme.primary, textTransform: 'uppercase', marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 20, height: 2, background: theme.primary }}></span>
              Tienda online
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h2 style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 30, letterSpacing: 1, color: theme.text, margin: '0 0 18px', lineHeight: 1, fontWeight: 400 }}>EQUÍPATE COMO PRO</h2>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <Stagger baseDelay={200}>
              {[
                { name: 'Jersey oficial', price: 650, icon: 'medal' },
                { name: 'Balón Mikasa', price: 1450, icon: 'target' },
                { name: 'Rodilleras Pro', price: 320, icon: 'flame' },
                { name: 'Mochila', price: 780, icon: 'box' },
              ].map((p, i) => (
                <Card key={i} theme={theme} style={{ padding: 0, overflow: 'hidden' }}>
                  <PlaceholderImage icon={p.icon} theme={theme} ratio="1/1" accent={theme.primary} />
                  <div style={{ padding: 10 }}>
                    <div style={{ fontSize: 11, color: theme.text, fontWeight: 600, lineHeight: 1.2 }}>{p.name}</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6 }}>
                      <span style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 18, color: theme.primary, letterSpacing: 0.5 }}>${p.price}</span>
                      <button style={{
                        width: 26, height: 26, borderRadius: 7, border: 'none',
                        background: theme.primary, color: '#fff', cursor: 'pointer',
                        display: 'grid', placeItems: 'center',
                      }}><Icon name="cart" size={12} /></button>
                    </div>
                  </div>
                </Card>
              ))}
            </Stagger>
          </div>
        </section>

        {/* CTA */}
        <section style={{ padding: '30px 20px 80px' }}>
          <Reveal>
            <div style={{
              padding: 24, borderRadius: 16, overflow: 'hidden', position: 'relative',
              background: `linear-gradient(135deg, ${theme.primary}, ${theme.primaryDark})`,
              color: '#fff',
            }}>
              <div style={{ position: 'absolute', right: -30, top: -30, opacity: 0.25 }}>
                <Volleyball size={160} color="#fff" />
              </div>
              <div style={{ position: 'relative' }}>
                <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', opacity: 0.85 }}>¡Únete!</div>
                <h3 style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 30, margin: '8px 0 12px', letterSpacing: 1, lineHeight: 1, fontWeight: 400 }}>SOLICITA TU INFORMACIÓN HOY</h3>
                <p style={{ fontSize: 12, opacity: 0.9, margin: '0 0 16px' }}>Un asesor te contactará en menos de 24 horas.</p>
                <button style={{
                  padding: '12px 20px', borderRadius: 10, border: 'none',
                  background: '#fff', color: theme.primary, fontWeight: 700, fontSize: 13,
                  letterSpacing: 0.5, cursor: 'pointer', width: '100%',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                }}>Inscribirme <Icon name="arrowRight" size={14} /></button>
              </div>
            </div>
          </Reveal>
        </section>

        {/* Mobile menu overlay */}
        {menu && (
          <div onClick={() => setMenu(false)} style={{
            position: 'absolute', inset: 0, zIndex: 200,
            background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(10px)',
            animation: 'fadeIn .2s',
          }}>
            <div onClick={e => e.stopPropagation()} style={{
              position: 'absolute', top: 0, right: 0, bottom: 0, width: '85%',
              background: theme.bgElev, padding: 24,
              animation: 'slideInRight .3s cubic-bezier(.2,.9,.3,1.2)',
              display: 'grid', gap: 4, alignContent: 'start',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
                <Logo size={44} theme={theme} />
                <button onClick={() => setMenu(false)} style={{
                  width: 36, height: 36, borderRadius: 9, border: `1px solid ${theme.border}`,
                  background: theme.bgInput, color: theme.text, cursor: 'pointer',
                  display: 'grid', placeItems: 'center',
                }}><Icon name="x" size={16} /></button>
              </div>
              {['Inicio', 'Avisos', 'Calendario', 'Entrenadores', 'Galería', 'Tienda', 'Contacto'].map((l, i) => (
                <button key={l} style={{
                  padding: 14, borderRadius: 10, border: 'none', background: 'transparent',
                  color: theme.text, cursor: 'pointer', fontWeight: 600, fontSize: 15,
                  textAlign: 'left', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  animation: `slideInRight .25s ${i * 0.05 + 0.1}s backwards cubic-bezier(.2,.9,.3,1.2)`,
                }}>{l}<Icon name="chev" size={14} style={{ color: theme.textMute }} /></button>
              ))}
              <div style={{ height: 1, background: theme.border, margin: '12px 0' }}></div>
              <Btn theme={theme} kind="ghost" icon="user" style={{ justifyContent: 'flex-start' }}>Iniciar sesión</Btn>
              <Btn theme={theme} icon="plus" style={{ justifyContent: 'center' }}>Inscribirme ahora</Btn>
            </div>
          </div>
        )}
      </div>
    </IOSDevice>
  );
};

/* MOBILE ALUMNO PORTAL */
const MobileAlumno = ({ theme }) => {
  const [tab, setTab] = useStateM('home');
  const [paymentDetail, setPaymentDetail] = useStateM(null);

  return (
    <IOSDevice width={390} height={844} dark={theme.name === 'Oscuro' || theme.name === 'Azul'} title="Portal Alumno">
      <div style={{
        background: theme.bg, color: theme.text, height: '100%',
        fontFamily: 'Inter, sans-serif', overflowY: 'auto', position: 'relative',
        paddingBottom: 80,
      }}>
        {/* HEADER */}
        <div style={{ padding: '14px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 10, color: theme.textMute, letterSpacing: 1.5, fontWeight: 700, textTransform: 'uppercase' }}>Bienvenida,</div>
            <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 22, color: theme.text, letterSpacing: 0.5, lineHeight: 1, marginTop: 2 }}>ANDREA TORRES</div>
          </div>
          <button style={{
            width: 38, height: 38, borderRadius: 999, border: `1px solid ${theme.border}`,
            background: theme.bgInput, color: theme.text, cursor: 'pointer',
            display: 'grid', placeItems: 'center', position: 'relative',
          }}>
            <Icon name="bell" size={16} />
            <span style={{
              position: 'absolute', top: 6, right: 6, width: 8, height: 8, borderRadius: '50%',
              background: theme.danger, border: `2px solid ${theme.bgInput}`,
            }}></span>
          </button>
        </div>

        {tab === 'home' && <MobileAlumnoHome theme={theme} onPayClick={setPaymentDetail} />}
        {tab === 'pagos' && <MobileAlumnoPagos theme={theme} onPayClick={setPaymentDetail} />}
        {tab === 'tienda' && <MobileAlumnoTienda theme={theme} />}
        {tab === 'perfil' && <MobileAlumnoPerfil theme={theme} />}

        {/* Bottom tab bar */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 50,
          background: `${theme.bgElev}f0`, backdropFilter: 'blur(20px)',
          borderTop: `1px solid ${theme.border}`,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          padding: '8px 0 24px',
        }}>
          {[
            { id: 'home', l: 'Inicio', i: 'home' },
            { id: 'pagos', l: 'Pagos', i: 'money' },
            { id: 'tienda', l: 'Compras', i: 'cart' },
            { id: 'perfil', l: 'Perfil', i: 'user' },
          ].map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              border: 'none', background: 'transparent', cursor: 'pointer',
              display: 'grid', placeItems: 'center', gap: 4, padding: '6px 0',
              color: tab === t.id ? theme.primary : theme.textMute,
              transition: 'color .2s',
              position: 'relative',
            }}>
              {tab === t.id && (
                <span style={{
                  position: 'absolute', top: -8, left: '50%', transform: 'translateX(-50%)',
                  width: 30, height: 3, borderRadius: 2, background: theme.primary,
                  boxShadow: `0 0 8px ${theme.primary}`,
                }}></span>
              )}
              <Icon name={t.i} size={20} />
              <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: 0.5 }}>{t.l}</span>
            </button>
          ))}
        </div>

        <PaymentModal open={!!paymentDetail} onClose={() => setPaymentDetail(null)} payment={paymentDetail} theme={theme} />
      </div>
    </IOSDevice>
  );
};

const MobileAlumnoHome = ({ theme, onPayClick }) => (
  <div style={{ padding: '4px 20px 20px', display: 'grid', gap: 14 }}>
    {/* Hero card */}
    <Reveal>
      <div style={{
        padding: 18, borderRadius: 16, color: '#fff', position: 'relative', overflow: 'hidden',
        background: `linear-gradient(135deg, ${theme.primary}, ${theme.primaryDark})`,
      }}>
        <div style={{ position: 'absolute', right: -30, top: -30, opacity: 0.2 }}>
          <Volleyball size={140} color="#fff" />
        </div>
        <div style={{ position: 'relative' }}>
          <Badge theme={theme} color="success" soft={false} style={{ background: 'rgba(255,255,255,0.2)', color: '#fff', border: 'none' }}>Al corriente</Badge>
          <div style={{ fontSize: 10, fontWeight: 700, opacity: 0.85, letterSpacing: 1.5, textTransform: 'uppercase', marginTop: 10 }}>Próximo pago</div>
          <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 44, marginTop: 4, letterSpacing: 1, lineHeight: 1 }}>
            $<CountUp to={1200} sep="," />
          </div>
          <div style={{ fontSize: 12, opacity: 0.9, marginTop: 4 }}>05 Junio 2026 · Mensualidad</div>
          <button style={{
            marginTop: 14, width: '100%', padding: '11px 16px', borderRadius: 10,
            background: '#fff', color: theme.primary, border: 'none', fontWeight: 700, fontSize: 13,
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>Pagar ahora <Icon name="arrowRight" size={14} /></button>
        </div>
      </div>
    </Reveal>

    {/* Stats */}
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
      <Stagger baseDelay={150}>
        <Card theme={theme} style={{ padding: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: `${theme.success}22`, color: theme.success, display: 'grid', placeItems: 'center' }}>
              <Icon name="flame" size={14} />
            </div>
            <div style={{ fontSize: 9, color: theme.textMute, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase' }}>Asistencia</div>
          </div>
          <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 26, color: theme.text, letterSpacing: 0.5, lineHeight: 1 }}>
            <CountUp to={94} suffix="%" />
          </div>
          <div style={{ marginTop: 8 }}>
            <ProgressBar value={94} color={`linear-gradient(90deg, ${theme.success}, ${theme.primary})`} height={4} />
          </div>
        </Card>
        <Card theme={theme} style={{ padding: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: `${theme.warning}22`, color: theme.warning, display: 'grid', placeItems: 'center' }}>
              <Icon name="trophy" size={14} />
            </div>
            <div style={{ fontSize: 9, color: theme.textMute, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase' }}>Próximo</div>
          </div>
          <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 26, color: theme.text, letterSpacing: 0.5, lineHeight: 1 }}>18 MAY</div>
          <div style={{ fontSize: 10, color: theme.textDim, marginTop: 6 }}>Torneo Sub-14</div>
        </Card>
      </Stagger>
    </div>

    {/* Calendar mini */}
    <Reveal delay={250}>
      <Card theme={theme}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 18, color: theme.text, letterSpacing: 0.5 }}>CALENDARIO 2026</div>
          <span style={{ fontSize: 10, color: theme.textMute, fontWeight: 600, letterSpacing: 0.5 }}>5/12 pagados</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
          {['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'].map((m, i) => {
            const paid = i < 5;
            const c = paid ? theme.success : theme.warning;
            return (
              <button key={m} onClick={() => onPayClick({ name: m, status: paid ? 'pagado' : 'pendiente', amt: 1200 })}
                style={{
                  padding: 8, borderRadius: 8, cursor: 'pointer', border: `1px solid ${c}44`,
                  background: `${c}11`, display: 'grid', gap: 4,
                }}>
                <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 14, color: theme.text, letterSpacing: 0.5 }}>{m}</div>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: c, boxShadow: `0 0 4px ${c}` }}></span>
              </button>
            );
          })}
        </div>
      </Card>
    </Reveal>

    {/* Notifications */}
    <Reveal delay={350}>
      <Card theme={theme}>
        <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 18, color: theme.text, letterSpacing: 0.5, marginBottom: 12 }}>NOTIFICACIONES</div>
        <div style={{ display: 'grid', gap: 8 }}>
          {[
            { t: 'Recordatorio: pago de Junio', d: 'Hace 1 día', i: 'money', c: theme.warning, new: true },
            { t: 'Convocatoria Copa Estatal', d: 'Hace 2 días', i: 'trophy', c: theme.primary, new: true },
            { t: 'Tu orden #001247 confirmada', d: 'Hace 3 días', i: 'cart', c: theme.success, new: false },
          ].map((n, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: 10,
              borderRadius: 10, background: theme.bgInput, border: `1px solid ${theme.border}`,
              position: 'relative',
            }}>
              {n.new && <PulseDot color={theme.danger} size={6} style={{ position: 'absolute', top: 8, right: 10 }} />}
              <div style={{ width: 30, height: 30, borderRadius: 8, background: `${n.c}22`, color: n.c, display: 'grid', placeItems: 'center' }}>
                <Icon name={n.i} size={13} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, color: theme.text, fontWeight: 600 }}>{n.t}</div>
                <div style={{ fontSize: 9, color: theme.textMute, marginTop: 2 }}>{n.d}</div>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </Reveal>
  </div>
);

const MobileAlumnoPagos = ({ theme, onPayClick }) => (
  <div style={{ padding: '4px 20px 20px', display: 'grid', gap: 12 }}>
    <Reveal>
      <h2 style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 28, color: theme.text, letterSpacing: 0.8, lineHeight: 1, margin: 0 }}>MIS PAGOS</h2>
    </Reveal>
    <Reveal delay={100}>
      <div style={{
        padding: 16, borderRadius: 14, background: `linear-gradient(135deg, ${theme.primary}22, ${theme.bgInput})`,
        border: `1px solid ${theme.primary}33`,
      }}>
        <div style={{ fontSize: 10, color: theme.textMute, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase' }}>Progreso del año</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
          <span style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 32, color: theme.text, letterSpacing: 0.5, lineHeight: 1 }}>5</span>
          <span style={{ color: theme.textDim, fontSize: 14 }}>/ 12 meses</span>
        </div>
        <div style={{ marginTop: 12 }}>
          <ProgressBar value={5} max={12} color={`linear-gradient(90deg, ${theme.success}, ${theme.primary})`} height={8} />
        </div>
      </div>
    </Reveal>

    <Reveal delay={200}>
      <div style={{ fontSize: 11, fontWeight: 700, color: theme.textMute, letterSpacing: 1, textTransform: 'uppercase', marginTop: 8 }}>HISTORIAL</div>
    </Reveal>
    <Stagger baseDelay={250} step={60}>
      {[
        { m: 'Mayo 2026', s: 'pagado', a: 1200, d: '03 May' },
        { m: 'Abril 2026', s: 'pagado', a: 1200, d: '02 Abr' },
        { m: 'Marzo 2026', s: 'pagado', a: 1200, d: '05 Mar' },
        { m: 'Junio 2026', s: 'pendiente', a: 1200, d: '05 Jun' },
        { m: 'Julio 2026', s: 'pendiente', a: 1200, d: '05 Jul' },
      ].map((p, i) => (
        <Card key={i} theme={theme} style={{ padding: 12, display: 'flex', alignItems: 'center', gap: 12 }}
          onClick={() => onPayClick({ name: p.m.split(' ')[0], status: p.s, amt: p.a })}>
          <div style={{
            width: 44, height: 44, borderRadius: 10,
            background: p.s === 'pagado' ? `${theme.success}22` : `${theme.warning}22`,
            color: p.s === 'pagado' ? theme.success : theme.warning,
            display: 'grid', placeItems: 'center', flexShrink: 0,
          }}><Icon name={p.s === 'pagado' ? 'check' : 'clock'} size={18} /></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: theme.text }}>{p.m}</div>
            <div style={{ fontSize: 10, color: theme.textMute, marginTop: 2 }}>Mensualidad · {p.d}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 18, color: theme.text, letterSpacing: 0.5, lineHeight: 1 }}>${p.a}</div>
            <div style={{ fontSize: 9, color: p.s === 'pagado' ? theme.success : theme.warning, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', marginTop: 4 }}>{p.s}</div>
          </div>
        </Card>
      ))}
    </Stagger>
  </div>
);

const MobileAlumnoTienda = ({ theme }) => (
  <div style={{ padding: '4px 20px 20px', display: 'grid', gap: 12 }}>
    <Reveal>
      <h2 style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 28, color: theme.text, letterSpacing: 0.8, lineHeight: 1, margin: 0 }}>MIS COMPRAS</h2>
    </Reveal>
    <Stagger baseDelay={150}>
      {[
        { p: 'Jersey + Short', d: '12 Abr', n: '#001247', a: 1030, s: 'entregado', i: 'medal' },
        { p: 'Balón Mikasa V200W', d: '03 Mar', n: '#001198', a: 1450, s: 'entregado', i: 'target' },
        { p: 'Rodilleras Pro', d: '15 Ene', n: '#001134', a: 320, s: 'entregado', i: 'flame' },
        { p: 'Mochila deportiva', d: '08 Dic', n: '#001078', a: 780, s: 'entregado', i: 'box' },
      ].map((c, i) => (
        <Card key={i} theme={theme} style={{ padding: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 50, height: 50, borderRadius: 10, background: `${theme.primary}22`, color: theme.primary, display: 'grid', placeItems: 'center' }}>
              <Icon name={c.i} size={20} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: theme.text }}>{c.p}</div>
              <div style={{ fontSize: 10, color: theme.textMute, marginTop: 2 }}>{c.n} · {c.d}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 18, color: theme.text, letterSpacing: 0.5, lineHeight: 1 }}>${c.a}</div>
              <div style={{ marginTop: 4 }}><StatusPill status={c.s} theme={theme} /></div>
            </div>
          </div>
        </Card>
      ))}
    </Stagger>
  </div>
);

const MobileAlumnoPerfil = ({ theme }) => (
  <div style={{ padding: '4px 20px 20px', display: 'grid', gap: 14 }}>
    <Reveal>
      <Card theme={theme} style={{ padding: 22, textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.05 }}>
          <CourtLines color={theme.primary} opacity={1} />
        </div>
        <div style={{ position: 'relative' }}>
          <Avatar name="Andrea Torres" size={100} color={theme.primary} />
          <h3 style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 26, color: theme.text, letterSpacing: 0.8, margin: '12px 0 4px', fontWeight: 400, lineHeight: 1 }}>ANDREA TORRES</h3>
          <Badge theme={theme} color="info">Categoría Mayor · TEC-0067</Badge>
          <div style={{ fontSize: 11, color: theme.textDim, marginTop: 8 }}>Ingreso: 01 Jul 2023</div>
        </div>
      </Card>
    </Reveal>
    <Stagger baseDelay={150}>
      {[
        { l: 'Datos personales', i: 'user' },
        { l: 'Tutor y emergencia', i: 'users' },
        { l: 'Documentos', i: 'doc' },
        { l: 'Notificaciones', i: 'bell' },
        { l: 'Cambiar contraseña', i: 'settings' },
        { l: 'Ayuda y soporte', i: 'info' },
      ].map((it, i) => (
        <Card key={i} theme={theme} hover style={{
          padding: 14, display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
        }}>
          <div style={{ width: 36, height: 36, borderRadius: 9, background: `${theme.primary}22`, color: theme.primary, display: 'grid', placeItems: 'center' }}>
            <Icon name={it.i} size={16} />
          </div>
          <div style={{ flex: 1, fontSize: 13, fontWeight: 600, color: theme.text }}>{it.l}</div>
          <Icon name="chev" size={14} style={{ color: theme.textMute }} />
        </Card>
      ))}
      <Card theme={theme} style={{
        padding: 14, display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
        background: `${theme.danger}11`, border: `1px solid ${theme.danger}33`,
      }}>
        <div style={{ width: 36, height: 36, borderRadius: 9, background: `${theme.danger}22`, color: theme.danger, display: 'grid', placeItems: 'center' }}>
          <Icon name="arrowLeft" size={16} />
        </div>
        <div style={{ flex: 1, fontSize: 13, fontWeight: 700, color: theme.danger }}>Cerrar sesión</div>
      </Card>
    </Stagger>
  </div>
);

/* Mobile preview wrapper: shows both phones side by side */
const MobilePreview = ({ theme }) => (
  <div style={{
    minHeight: '100vh', background: `linear-gradient(135deg, ${theme.bg}, ${theme.bgElev})`,
    padding: 40, fontFamily: 'Inter, sans-serif', color: theme.text,
    position: 'relative', overflow: 'hidden',
  }}>
    <div style={{ position: 'absolute', top: -100, right: -100, opacity: 0.08 }}>
      <Volleyball size={400} color={theme.primary} />
    </div>
    <div style={{ position: 'absolute', bottom: -100, left: -100, opacity: 0.06 }}>
      <Volleyball size={300} color={theme.accent} />
    </div>

    <div style={{ maxWidth: 1300, margin: '0 auto', position: 'relative' }}>
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 3, color: theme.primary, textTransform: 'uppercase', marginBottom: 12 }}>
          Vista responsive
        </div>
        <h1 style={{ fontFamily: 'Bebas Neue, sans-serif', fontSize: 64, letterSpacing: 1.5, color: theme.text, margin: 0, lineHeight: 1, fontWeight: 400 }}>
          MOBILE FIRST
        </h1>
        <p style={{ color: theme.textDim, fontSize: 15, marginTop: 12, maxWidth: 560, margin: '12px auto 0' }}>
          Mismo sistema visual, optimizado para iPhone. Bottom tab bar, hamburger menu, gestos táctiles, animaciones fluidas.
        </p>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60,
        justifyItems: 'center', alignItems: 'start',
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 999,
            background: `${theme.primary}22`, color: theme.primary, fontSize: 11, fontWeight: 700, letterSpacing: 1.5,
            textTransform: 'uppercase', marginBottom: 24,
          }}>
            <Icon name="home" size={12} />Sitio público
          </div>
          <MobilePublic theme={theme} />
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 999,
            background: `${theme.accent}22`, color: theme.accent, fontSize: 11, fontWeight: 700, letterSpacing: 1.5,
            textTransform: 'uppercase', marginBottom: 24,
          }}>
            <Icon name="user" size={12} />Portal alumno
          </div>
          <MobileAlumno theme={theme} />
        </div>
      </div>

      <div style={{
        marginTop: 60, padding: 24, borderRadius: 16,
        background: theme.bgCard, border: `1px solid ${theme.border}`,
      }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 2, color: theme.primary, textTransform: 'uppercase', marginBottom: 8 }}>
          ⚡ Microinteracciones incluidas
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginTop: 14 }}>
          {[
            { i: 'arrowRight', l: 'Scroll reveals' },
            { i: 'chart', l: 'Count-up de números' },
            { i: 'star', l: 'Tilt en tarjetas' },
            { i: 'send', l: 'Confetti al pagar' },
            { i: 'flame', l: 'Hover lift / scale' },
            { i: 'bell', l: 'Pulse dots (live)' },
            { i: 'check', l: 'Stagger en listas' },
            { i: 'wa', l: 'Send animation' },
          ].map(f => (
            <div key={f.l} style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: 10,
              borderRadius: 10, background: theme.bgInput,
            }}>
              <div style={{ width: 28, height: 28, borderRadius: 7, background: `${theme.primary}22`, color: theme.primary, display: 'grid', placeItems: 'center' }}>
                <Icon name={f.i} size={14} />
              </div>
              <span style={{ fontSize: 12, color: theme.text, fontWeight: 600 }}>{f.l}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { MobilePublic, MobileAlumno, MobilePreview });