/* Layvtime — Sorteos, Tienda, Calendario/Resultados, Programación */

// ── SORTEOS / RIFAS ───────────────────────────────────────────
function RaffleScreen({ onBack }) {
  const CF = window.CF;
  return (
    <div className="animate-slide-up">
      <StackHeader title="Sorteos" onBack={onBack} right={
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, background: C.secondary, border: `1px solid ${C.border}`, borderRadius: 999, padding: '6px 11px 6px 8px' }}>
          <Icon name="coins" size={15} color={C.gold} /><span className="num" style={{ fontWeight: 800, fontSize: 13 }}>3,240</span>
        </div>
      } />
      <div style={{ padding: '0 18px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ fontSize: 13, color: C.mut, lineHeight: 1.5, marginBottom: -2 }}>Usa tus <b style={{ color: C.gold }}>Layv Points</b> para participar. Más boletos, más oportunidades de ganar.</div>
        {CF.raffles.map((r) => {
          const pct = Math.round((r.entries / r.max) * 100);
          return (
            <Card key={r.id} pad={0} style={{ overflow: 'hidden' }}>
              <div style={{ position: 'relative' }}>
                <Poster h={130} r={0} kind={r.img} />
                {r.tag && <span style={{ position: 'absolute', top: 10, left: 10, fontSize: 10, fontWeight: 800, letterSpacing: 0.3, padding: '4px 9px', borderRadius: 999, background: C.gold, color: '#1a1505' }}>{r.tag.toUpperCase()}</span>}
                <span style={{ position: 'absolute', top: 10, right: 10, fontSize: 11, fontWeight: 700, color: '#fff', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(6px)', padding: '4px 9px', borderRadius: 7, display: 'flex', alignItems: 'center', gap: 5 }}><Icon name="clock" size={12} />{r.ends}</span>
              </div>
              <div style={{ padding: 15 }}>
                <div style={{ fontWeight: 800, fontSize: 16 }}>{r.title}</div>
                <div style={{ fontSize: 12.5, color: C.mut, marginTop: 2 }}>{r.sub}</div>
                <div style={{ margin: '12px 0 6px', height: 6, borderRadius: 999, background: C.secondary, overflow: 'hidden' }}>
                  <div style={{ width: pct + '%', height: '100%', background: 'linear-gradient(90deg, hsl(var(--gold)), hsl(var(--gold-dark)))' }} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: C.mut, marginBottom: 13, whiteSpace: 'nowrap' }}>
                  <span className="num">{r.entries.toLocaleString('es-MX')} boletos</span><span className="num">{pct}%</span>
                </div>
                <button style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, background: C.primary, color: '#fff', border: 'none', borderRadius: 11, padding: '12px', fontFamily: 'inherit', fontWeight: 800, fontSize: 14, cursor: 'pointer' }}>
                  <Icon name="ticket" size={16} /> Participar · {r.cost} pts
                </button>
              </div>
            </Card>
          );
        })}
      </div>
    </div>
  );
}

// ── TIENDA ────────────────────────────────────────────────────
function StoreScreen({ onBack }) {
  const CF = window.CF;
  const [cart, setCart] = React.useState(0);
  return (
    <div className="animate-slide-up">
      <StackHeader title="Tienda Layvtime" onBack={onBack} right={
        <button style={{ width: 38, height: 38, borderRadius: 999, background: C.secondary, border: `1px solid ${C.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', position: 'relative' }}>
          <Icon name="bag" size={18} color={C.mut} />
          {cart > 0 && <span className="num" style={{ position: 'absolute', top: -4, right: -4, minWidth: 18, height: 18, padding: '0 4px', borderRadius: 999, background: C.primary, color: '#fff', fontSize: 10, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1.5px solid hsl(var(--surface))' }}>{cart}</span>}
        </button>
      } />
      <div style={{ padding: '0 18px 24px' }}>
        <Poster h={120} r={14} kind="hero" style={{ marginBottom: 16 }} label="Colección oficial 25/26" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {CF.products.map((p) => (
            <Card key={p.id} pad={0} style={{ overflow: 'hidden' }}>
              <div style={{ position: 'relative' }}>
                <Poster h={120} r={0} kind={p.img} />
                {p.tag && <span style={{ position: 'absolute', top: 8, left: 8, fontSize: 9.5, fontWeight: 800, padding: '3px 7px', borderRadius: 999, background: p.tag === 'Nuevo' ? C.primary : C.gold, color: p.tag === 'Nuevo' ? '#fff' : '#1a1505' }}>{p.tag.toUpperCase()}</span>}
              </div>
              <div style={{ padding: 12 }}>
                <div style={{ fontWeight: 600, fontSize: 13.5, lineHeight: 1.25, minHeight: 34 }}>{p.name}</div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
                  <span className="num" style={{ fontWeight: 900, fontSize: 16 }}>${p.price}</span>
                  <button onClick={() => setCart((c) => c + 1)} style={{ width: 32, height: 32, borderRadius: 9, background: C.primary, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}><Icon name="plus" size={17} color="#fff" /></button>
                </div>
              </div>
            </Card>
          ))}
        </div>
        {cart > 0 && (
          <button style={{ width: '100%', marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, background: C.primary, color: '#fff', border: 'none', borderRadius: 12, padding: '14px', fontFamily: 'inherit', fontWeight: 800, fontSize: 15, cursor: 'pointer' }}>
            <Icon name="bag" size={17} /> Ver carrito ({cart})
          </button>
        )}
      </div>
    </div>
  );
}

// ── CALENDARIO / RESULTADOS ───────────────────────────────────
function CalendarScreen({ onBack, go }) {
  const CF = window.CF, T = CF.teams;
  const [idx, setIdx] = React.useState(1); // jornada 14 (current)
  const j = CF.calendar[idx];
  return (
    <div className="animate-slide-up">
      <StackHeader title="Calendario" onBack={onBack} />
      <div style={{ padding: '0 18px 24px' }}>
        {/* jornada switcher */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, background: C.card, border: `1px solid ${C.cardBorder}`, borderRadius: 12, padding: '8px 10px' }}>
          <button onClick={() => setIdx((i) => Math.max(0, i - 1))} disabled={idx === 0} style={{ width: 34, height: 34, borderRadius: 9, background: C.secondary, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: idx === 0 ? 'default' : 'pointer', opacity: idx === 0 ? 0.4 : 1 }}><Icon name="chevL" size={18} color={C.fg} /></button>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontWeight: 800, fontSize: 15 }}>Jornada {j.jornada}</div>
            <div style={{ fontSize: 11, color: j.status === 'current' ? C.destructive : C.mut, fontWeight: 600 }}>{j.status === 'finished' ? 'Finalizada' : j.status === 'current' ? 'En curso' : 'Próxima'}</div>
          </div>
          <button onClick={() => setIdx((i) => Math.min(CF.calendar.length - 1, i + 1))} disabled={idx === CF.calendar.length - 1} style={{ width: 34, height: 34, borderRadius: 9, background: C.secondary, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: idx === CF.calendar.length - 1 ? 'default' : 'pointer', opacity: idx === CF.calendar.length - 1 ? 0.4 : 1 }}><Icon name="chevR" size={18} color={C.fg} /></button>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
          {j.matches.map((m, i) => (
            <Card key={i} pad={13} onClick={m.live ? () => go('match', 'm1') : undefined} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 52, flexShrink: 0, textAlign: 'center' }}>
                {m.live ? <span className="num" style={{ color: C.destructive, fontWeight: 800, fontSize: 13 }}>{m.min}'</span>
                  : m.kickoff ? <span style={{ color: C.mut, fontWeight: 600, fontSize: 11 }}>{m.kickoff}</span>
                  : <span style={{ color: C.mut, fontWeight: 700, fontSize: 10.5 }}>FINAL</span>}
              </div>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 7 }}>
                {[['home', 'hs'], ['away', 'as']].map(([s, sc]) => (
                  <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                    <Crest team={m[s]} size={22} />
                    <span style={{ flex: 1, fontWeight: 600, fontSize: 13.5 }}>{T[m[s]].name}</span>
                    {m[sc] != null && <span className="num" style={{ fontWeight: 800, fontSize: 15 }}>{m[sc]}</span>}
                  </div>
                ))}
              </div>
              {m.live && <LiveDot size={7} />}
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RaffleScreen, StoreScreen, CalendarScreen });