// Profile page
const TIER_RATE_BONUS = { starter: '+2%', collector: '+2.5%', godpack: null };

function EditProfileModal({ onClose }) {
  const { USER } = window.KYOUDAI;
  const [name,    setName]    = React.useState(USER.name || '');
  const [method,  setMethod]  = React.useState(USER.payoutInfo.method || 'Bank transfer');
  const [details, setDetails] = React.useState(USER.payoutInfo.iban || USER.payoutInfo.paypal || USER.payoutInfo.phone || '');
  const [loading, setLoading] = React.useState(false);
  const [error,   setError]   = React.useState('');

  async function handleSave(e) {
    e.preventDefault();
    setLoading(true); setError('');
    const payoutInfo = {
      method,
      ...(method === 'Bank transfer' ? {iban: details} : method === 'PayPal' ? {paypal: details} : {phone: details}),
    };
    const { error: err } = await window.SUPABASE
      .from('affiliates')
      .update({ name, payout_info: payoutInfo })
      .eq('id', USER.id);
    setLoading(false);
    if (err) { setError(err.message); return; }
    Object.assign(window.KYOUDAI.USER, { name, payoutMethod: method, payoutInfo });
    onClose(true);
  }

  const detailLabel = method === 'Bank transfer' ? 'IBAN' : method === 'PayPal' ? 'Email de PayPal' : 'Teléfono Bizum';
  const detailPlaceholder = method === 'Bank transfer' ? 'ES76 0049 0001 …' : method === 'PayPal' ? 'tu@email.com' : '600 000 000';

  return (
    <div style={{
      position:'fixed', inset:0, zIndex:999,
      display:'flex', alignItems:'center', justifyContent:'center',
      background:'rgba(0,0,0,0.72)', backdropFilter:'blur(4px)',
    }} onClick={e => { if(e.target===e.currentTarget) onClose(false); }}>
      <div className="glass-strong" style={{width:440, padding:28, borderRadius:16}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:22}}>
          <div style={{fontSize:16, fontWeight:700}}>Editar perfil</div>
          <button onClick={() => onClose(false)} style={{
            background:'none', border:'none', color:'var(--sub)', cursor:'pointer',
            fontSize:22, lineHeight:1, padding:0,
          }}>&times;</button>
        </div>
        <form onSubmit={handleSave} style={{display:'flex', flexDirection:'column', gap:16}}>
          <div>
            <label style={{fontSize:12, color:'var(--sub)', display:'block', marginBottom:6}}>Nombre</label>
            <input className="field" value={name} onChange={e=>setName(e.target.value)} style={{width:'100%'}} required/>
          </div>
          <div>
            <label style={{fontSize:12, color:'var(--sub)', display:'block', marginBottom:6}}>Método de pago</label>
            <select className="field" value={method} onChange={e=>setMethod(e.target.value)} style={{width:'100%'}}>
              <option>Bank transfer</option>
              <option>PayPal</option>
              <option>Bizum</option>
            </select>
          </div>
          <div>
            <label style={{fontSize:12, color:'var(--sub)', display:'block', marginBottom:6}}>{detailLabel}</label>
            <input className="field" value={details} onChange={e=>setDetails(e.target.value)}
              placeholder={detailPlaceholder} style={{width:'100%'}}/>
          </div>
          {error && (
            <div style={{fontSize:12, color:'#FF8FA5', padding:'8px 12px', background:'rgba(255,107,138,0.08)', borderRadius:8}}>
              {error}
            </div>
          )}
          <div style={{display:'flex', gap:10, justifyContent:'flex-end', marginTop:4}}>
            <button type="button" className="btn" onClick={() => onClose(false)}>Cancelar</button>
            <button type="submit" className="btn btn-primary" disabled={loading}>
              {loading ? 'Guardando…' : 'Guardar cambios'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function RulesPage() {
  const sections = [
    {
      id: 'how',
      icon: '⚡',
      title: 'Cómo funciona',
      tone: '#5B8CFF',
      content: [
        { head: '1. Copia tu link de afiliado', body: 'Cada producto tiene un link único con tu código. Encuéntralos en la sección Products o My Links. Ese link es lo que rastrea tus ventas — sin él, no cobras.' },
        { head: '2. Comparte en redes sociales', body: 'Publica en Instagram, TikTok, YouTube o donde tengas audiencia. Usa el Content Hub para generar el texto listo: copia la caption, pega tu link y publica.' },
        { head: '3. Alguien compra a través de tu link', body: 'Cuando un cliente hace clic en tu link y completa una compra en maickjp.com, la venta queda registrada automáticamente en tu cuenta.' },
        { head: '4. La comisión entra en pendiente', body: 'La comisión aparece en tu dashboard en estado "Pending". Se acumula durante el mes.' },
        { head: '5. Cobras el día 1 de cada mes', body: 'Todas las comisiones del mes anterior se procesan el 1 de cada mes. El pago llega a tu IBAN, PayPal o Bizum configurado en tu perfil. Asegúrate de tenerlo actualizado.' },
      ]
    },
    {
      id: 'strategies',
      icon: '🎯',
      title: 'Estrategias que funcionan',
      tone: '#3EE8BE',
      content: [
        { head: 'Muestra el producto físicamente', body: 'Si tienes o consigues una carta o caja en mano, grábala. Un vídeo corto mostrando el producto real convierte mucho más que cualquier imagen estática. TikTok e Instagram Reels son ideales.' },
        { head: 'Foco en el valor, no solo el precio', body: 'No digas "cuesta 2.700€". Di "PSA 10, la nota máxima, un ejemplar que en 5 años puede valer el doble". El coleccionista no compra un precio, compra una historia y un activo.' },
        { head: 'Urgencia real', body: 'Los productos PSA graded son unidades únicas — cuando se vende, se vende. Comunicar stock limitado (que es verdad) es la táctica más honesta y efectiva que existe.' },
        { head: 'Publica con constancia', body: 'Un post no basta. Los algoritmos premian la constancia. Publica 3–5 veces por semana. Mezcla producto, educación (¿qué es PSA?, ¿cómo se gradan las cartas?) y lifestyle.' },
        { head: 'Link siempre accesible', body: 'En Instagram: link en bio. En TikTok: link en bio. En YouTube: primer comentario fijado. En cada post: recuerda a tu audiencia dónde está el link.' },
        { head: 'Responde comentarios', body: 'Si alguien pregunta el precio, el stock o la autenticidad — responde rápido. Una duda no resuelta es una venta perdida.' },
      ]
    },
    {
      id: 'rules',
      icon: '📋',
      title: 'Normas del programa',
      tone: '#B89BFF',
      content: [
        { head: 'Representación honesta', body: 'Debes representar los productos tal como son: cartas PSA graded certificadas, cajas selladas japonesas. No exageres condición, rareza ni valor futuro de forma engañosa. Las descripciones del Content Hub están revisadas y son seguras de usar.' },
        { head: 'No te atribuyas ser Kyoudai o MaickJP', body: 'Eres un afiliado autorizado, no el vendedor. No puedes presentarte como si fueras la tienda, ni dar soporte postventa, ni gestionar devoluciones. Cualquier cliente debe ser dirigido a maickjp.com.' },
        { head: 'Links personales, no compartidos', body: 'Tu link de afiliado es tuyo. No lo cedas a terceros para que generen ventas con él. Las comisiones son por tu actividad de marketing, no por activar redes de sub-afiliados no autorizados.' },
        { head: 'Prohibido el spam', body: 'Enviar links en masa por DM, grupos de Telegram no relacionados, o sitios de spam resulta en baja inmediata del programa sin pago de comisiones pendientes.' },
        { head: 'Autocompras prohibidas', body: 'Comprar a través de tu propio link para generar comisión está prohibido. Lo detectamos automáticamente y supone expulsión y anulación de todas las comisiones acumuladas.' },
        { head: 'Contenido que descargues, es tuyo', body: 'Las tarjetas PNG y los textos generados puedes usarlos libremente para tu marketing. No puedes redistribuirlos como si fueran tuyos sin crédito a Kyoudai, ni venderlos a terceros.' },
      ]
    },
    {
      id: 'legal',
      icon: '⚖️',
      title: 'Advertencia legal — Uso fraudulento',
      tone: '#FF6B8A',
      warning: true,
      content: [
        { head: 'Uso del contenido para estafas', body: 'El contenido generado en esta plataforma (textos, imágenes, tarjetas PNG, descripciones de producto) está autorizado exclusivamente para marketing legítimo de los productos de maickjp.com. Queda terminantemente prohibido su uso para:\n\n• Vender falsificaciones o productos que no sean los originales de maickjp.com\n• Simular ser la tienda para captar pagos directos fuera de la plataforma\n• Engañar a compradores sobre la autenticidad, condición o precio de las cartas\n• Cualquier actividad de phishing, fraude o estafa usando el nombre Kyoudai, MaickJP o los productos asociados' },
        { head: 'Consecuencias', body: 'Si detectamos o recibimos denuncia de que un afiliado está usando nuestra identidad, contenido o nombre de marca para cometer fraude o estafa — independientemente del importe o la escala:\n\n• La cuenta se cierra de inmediato y se retienen todas las comisiones pendientes\n• Se recopila y conserva toda la evidencia disponible: registros de acceso, actividad, IPs, comunicaciones\n• Se interpone denuncia penal ante las autoridades competentes por fraude, usurpación de identidad y/o estafa (art. 248–251 bis y 401 del Código Penal español)\n• Se colabora activamente con las plataformas sociales para eliminar el contenido fraudulento y con las autoridades para identificar al responsable' },
        { head: 'Esto no es una advertencia vacía', body: 'MaickJP opera en el mercado de coleccionismo de alto valor. Una estafa usando nuestro nombre daña directamente nuestra reputación y la de nuestros clientes. Actuaremos siempre, sin excepciones, sin advertencia previa y con la máxima contundencia legal disponible.' },
      ]
    }
  ];

  const [activeSection, setActiveSection] = React.useState('how');
  const current = sections.find(s => s.id === activeSection);

  return (
    <div style={{display:"grid", gridTemplateColumns:"200px 1fr", gap:20, padding:"26px 32px 48px"}} className="page-enter">
      {/* Section nav */}
      <div style={{display:"flex", flexDirection:"column", gap:4}}>
        {sections.map(s => (
          <div key={s.id} onClick={() => setActiveSection(s.id)}
            style={{
              padding:"10px 14px", borderRadius:10, cursor:"pointer",
              display:"flex", alignItems:"center", gap:10,
              background: activeSection===s.id ? `rgba(255,255,255,0.05)` : "transparent",
              border: activeSection===s.id ? `1px solid ${s.tone}44` : "1px solid transparent",
              transition:"all .15s",
            }}>
            <span style={{fontSize:16}}>{s.icon}</span>
            <span style={{fontSize:13, fontWeight:600, color: activeSection===s.id ? "var(--text)" : "var(--sub)"}}>{s.title}</span>
          </div>
        ))}
      </div>

      {/* Content */}
      <div style={{display:"flex", flexDirection:"column", gap:14}}>
        {current.warning && (
          <div style={{
            padding:"14px 18px", borderRadius:12,
            background:"rgba(255,107,138,0.1)", border:"2px solid rgba(255,107,138,0.4)",
            display:"flex", alignItems:"flex-start", gap:12,
          }}>
            <span style={{fontSize:22, flexShrink:0}}>🚨</span>
            <div>
              <div style={{fontSize:13, fontWeight:700, color:"#FF8FA5", marginBottom:4}}>ADVERTENCIA LEGAL — LEE ANTES DE CONTINUAR</div>
              <div style={{fontSize:12, color:"rgba(255,143,165,0.8)", lineHeight:1.6}}>
                Esta sección describe las consecuencias legales del uso fraudulento del contenido y la identidad de Kyoudai / MaickJP. El desconocimiento de estas normas no exime de responsabilidad.
              </div>
            </div>
          </div>
        )}

        {current.content.map((item, i) => (
          <div key={i} className="glass" style={{
            padding:22,
            borderLeft: `3px solid ${current.tone}`,
            borderRadius:"0 12px 12px 0",
          }}>
            <div style={{
              fontSize:13, fontWeight:700, marginBottom:8,
              color: current.warning ? "#FF8FA5" : "var(--text)"
            }}>{item.head}</div>
            <div style={{
              fontSize:12.5, color:"var(--sub)", lineHeight:1.75,
              whiteSpace:"pre-wrap",
            }}>{item.body}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ProfilePage(){
  const [editing, setEditing] = React.useState(false);
  const [tick,    setTick]    = React.useState(0);
  const [tab,     setTab]     = React.useState("profile");

  const { USER, LEADERBOARD } = window.KYOUDAI;
  const me   = LEADERBOARD.find(l => l.you);
  const tier = (USER.tier || 'Starter').toLowerCase();
  const bonus = TIER_RATE_BONUS[tier];
  const rateNow = { starter:3, collector:5, godpack:7 }[tier] || 3;

  const payoutLine = (() => {
    const m = USER.payoutMethod || 'No configurado';
    const i = USER.payoutInfo || {};
    if (i.iban)   return `IBAN terminado en **** ${i.iban.replace(/\s/g,'').slice(-4)}`;
    if (i.paypal) return i.paypal;
    if (i.phone)  return i.phone;
    return m;
  })();

  function handleEditClose(saved) {
    setEditing(false);
    if (saved) setTick(t => t+1);
  }

  if (tab === "rules") return (
    <div>
      <div style={{padding:"22px 32px 0", borderBottom:"1px solid var(--line)", display:"flex", gap:4}}>
        {[{k:"profile",l:"Perfil"},{k:"rules",l:"Normas & Info"}].map(t => (
          <button key={t.k} onClick={()=>setTab(t.k)} style={{
            padding:"9px 16px", borderRadius:"10px 10px 0 0", border:"none", cursor:"pointer",
            background: tab===t.k ? "rgba(255,255,255,0.05)" : "transparent",
            color: tab===t.k ? "var(--text)" : "var(--sub)",
            fontSize:13, fontWeight:600, borderBottom: tab===t.k ? "2px solid #5B8CFF" : "2px solid transparent",
          }}>{t.l}</button>
        ))}
      </div>
      <RulesPage/>
    </div>
  );

  return (
    <div className="page-enter" style={{padding:"0 0 48px", maxWidth:1100}} key={tick}>
      {editing && <EditProfileModal onClose={handleEditClose}/>}

      {/* Tab bar */}
      <div style={{padding:"22px 32px 0", borderBottom:"1px solid var(--line)", display:"flex", gap:4, marginBottom:26}}>
        {[{k:"profile",l:"Perfil"},{k:"rules",l:"Normas & Info"}].map(t => (
          <button key={t.k} onClick={()=>setTab(t.k)} style={{
            padding:"9px 16px", borderRadius:"10px 10px 0 0", border:"none", cursor:"pointer",
            background: tab===t.k ? "rgba(255,255,255,0.05)" : "transparent",
            color: tab===t.k ? "var(--text)" : "var(--sub)",
            fontSize:13, fontWeight:600, borderBottom: tab===t.k ? "2px solid #5B8CFF" : "2px solid transparent",
          }}>{t.l}</button>
        ))}
      </div>

      <div style={{padding:"0 32px"}}>

      {/* Hero */}
      <div className="glass" style={{
        padding:28, marginBottom:20, position:"relative", overflow:"hidden",
        background:"linear-gradient(135deg, rgba(138,91,255,0.12), rgba(91,140,255,0.06))",
        border:"1px solid rgba(138,91,255,0.25)"
      }}>
        <div style={{position:"absolute", right:-60, top:-60, width:280, height:280, borderRadius:"50%",
          background:"radial-gradient(circle, rgba(138,91,255,0.25), transparent 70%)"}}/>
        <div style={{display:"flex", alignItems:"center", gap:20, position:"relative"}}>
          <Avatar initials={USER.avatar} size={72} tone="#8A5BFF"/>
          <div style={{flex:1}}>
            <div style={{display:"flex", alignItems:"center", gap:10}}>
              <h2 style={{margin:0, fontSize:22, fontWeight:700, letterSpacing:"-0.025em"}}>{USER.name}</h2>
              <span className="badge" style={{background:"rgba(138,91,255,0.18)", color:"#B89BFF", border:"1px solid rgba(138,91,255,0.35)"}}>
                <I.sparkle style={{width:10,height:10}}/>{USER.tier}
              </span>
              <span className="badge badge-top"><I.trophy style={{width:10, height:10}}/>RANK #{me ? me.rank : USER.rank}</span>
            </div>
            <div className="mono" style={{fontSize:12, color:"var(--sub)", marginTop:6}}>
              @{USER.handle} · Miembro desde {USER.joined} · {rateNow}% comisión
            </div>
          </div>
          <button className="btn" onClick={() => setEditing(true)}>
            Editar perfil
          </button>
        </div>

        {/* Tier progress */}
        {(() => {
          const tp = USER.tierProgress || {};
          const pct = (tp.pct || 0).toFixed(1);
          return (
            <div style={{marginTop:24, paddingTop:20, borderTop:"1px solid var(--line)"}}>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:10}}>
                <span className="mono" style={{fontSize:10, color:"var(--sub)", letterSpacing:"0.12em"}}>
                  TIER PROGRESS{tp.nextLabel ? ` — PRÓXIMO: ${tp.nextLabel.toUpperCase()}` : ' — TIER MÁXIMO'}
                </span>
                <span className="mono" style={{fontSize:11, color:"#F6C56B"}}>
                  €{(tp.current||0).toLocaleString()} / €{(tp.goal||0).toLocaleString()}
                </span>
              </div>
              <div style={{height:6, background:"rgba(255,255,255,0.06)", borderRadius:99, overflow:"hidden"}}>
                <div style={{
                  width:`${pct}%`, height:"100%",
                  background:"linear-gradient(90deg, #F6C56B, #B89BFF, #5B8CFF)",
                  boxShadow:"0 0 14px rgba(246,197,107,0.5)"
                }}/>
              </div>
              <div style={{display:"flex", justifyContent:"space-between", marginTop:10, fontSize:11, color:"var(--sub)"}}>
                {tp.nextLabel
                  ? <span>Desbloquea <span style={{color:"#B89BFF"}}>{bonus} de comisión</span> al llegar a {tp.nextLabel}</span>
                  : <span style={{color:"#F6C56B"}}>Tier máximo alcanzado 🏆 — comisión {rateNow}%</span>
                }
                <span>{pct}% completado</span>
              </div>
            </div>
          );
        })()}
      </div>

      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16}}>
        {/* Referral */}
        <div className="glass" style={{padding:24}}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:4}}>Tu identidad de afiliado</div>
          <div style={{fontSize:12, color:"var(--sub)", marginBottom:18}}>Este código se añade a cada link que generas.</div>

          <div className="mono" style={{fontSize:10, color:"var(--sub)", letterSpacing:"0.1em", marginBottom:8}}>CÓDIGO DE REFERIDO</div>
          <div style={{
            display:"flex", alignItems:"center", gap:10, marginBottom:18,
            padding:"14px 16px", borderRadius:12,
            background:"linear-gradient(135deg, rgba(91,140,255,0.1), rgba(138,91,255,0.04))",
            border:"1px solid rgba(91,140,255,0.3)"
          }}>
            <span style={{flex:1, fontSize:20, fontWeight:700, letterSpacing:"0.04em", color:"#8AB0FF"}} className="mono">
              {USER.referral}
            </span>
            <CopyButton text={USER.referral} label="Copiar código" toastMsg="Código copiado"/>
          </div>

          <div className="mono" style={{fontSize:10, color:"var(--sub)", letterSpacing:"0.1em", marginBottom:8}}>URL DE AFILIADO</div>
          <div style={{
            display:"flex", alignItems:"center", gap:10,
            padding:"12px 14px", borderRadius:10,
            background:"rgba(255,255,255,0.02)", border:"1px solid var(--line)"
          }}>
            <span className="mono" style={{flex:1, fontSize:12, color:"var(--sub)", overflow:"hidden", textOverflow:"ellipsis"}}>
              https://maickjp.com/?ref={USER.referral}
            </span>
            <CopyButton text={`https://maickjp.com/?ref=${USER.referral}`} label="" icon={true} toastMsg="URL copiada"/>
          </div>
        </div>

        {/* Payout */}
        <div className="glass" style={{padding:24}}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:4}}>Método de pago</div>
          <div style={{fontSize:12, color:"var(--sub)", marginBottom:18}}>
            Las comisiones se liberan mensualmente, el día 1 de cada mes.
          </div>

          <div style={{
            padding:"16px 18px", borderRadius:12, marginBottom:14,
            border:"1px solid var(--line)",
            background:"linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))",
            display:"flex", alignItems:"center", gap:14
          }}>
            <div style={{
              width:44, height:34, borderRadius:6,
              background:"linear-gradient(135deg, #2a3248, #171b2a)",
              border:"1px solid var(--line-2)",
              display:"grid", placeItems:"center", fontSize:10, color:"var(--sub)",
            }} className="mono">{USER.payoutMethod === 'PayPal' ? 'PP' : USER.payoutMethod === 'Bizum' ? 'BIZ' : 'SEPA'}</div>
            <div style={{flex:1}}>
              <div style={{fontSize:13, fontWeight:600}}>{USER.payoutMethod || 'No configurado'}</div>
              <div className="mono" style={{fontSize:11, color:"var(--sub)", marginTop:2}}>{payoutLine}</div>
            </div>
            {(USER.payoutInfo.iban || USER.payoutInfo.paypal || USER.payoutInfo.phone) && (
              <span className="badge" style={{background:"rgba(0,224,164,0.1)", color:"#3EE8BE", border:"1px solid rgba(0,224,164,0.25)"}}>
                <I.check style={{width:10,height:10}}/>VERIFICADO
              </span>
            )}
          </div>

          <button className="btn" style={{width:"100%", justifyContent:"center"}} onClick={() => setEditing(true)}>
            <I.plus style={{width:13, height:13}}/>Actualizar método de pago
          </button>

          <div style={{marginTop:20, paddingTop:20, borderTop:"1px solid var(--line)", display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:12}}>
            <div>
              <div className="mono" style={{fontSize:10, color:"var(--sub)", letterSpacing:"0.1em"}}>LIFETIME</div>
              <div style={{fontSize:18, fontWeight:700, marginTop:4}}>€{(USER.totalEarnings||0).toLocaleString()}</div>
            </div>
            <div>
              <div className="mono" style={{fontSize:10, color:"var(--sub)", letterSpacing:"0.1em"}}>PEDIDOS</div>
              <div style={{fontSize:18, fontWeight:700, marginTop:4}}>{USER.salesCount||0}</div>
            </div>
            <div>
              <div className="mono" style={{fontSize:10, color:"var(--sub)", letterSpacing:"0.1em"}}>RACHA</div>
              <div style={{fontSize:18, fontWeight:700, marginTop:4, color:"#F6C56B"}}>{USER.streakDays||0}d 🔥</div>
            </div>
          </div>
        </div>
      </div>

      {/* Tiers info */}
      <div className="glass" style={{padding:24, marginTop:16}}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:4}}>Niveles de comisión</div>
        <div style={{fontSize:12, color:"var(--sub)", marginBottom:18}}>Cuantas más ventas, mayor tu porcentaje de comisión.</div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:12}}>
          {[
            {name:"Starter", rate:"3%", goal:"0€ – 499€", tone:"#5B8CFF", active: tier==='starter'},
            {name:"Collector", rate:"5%", goal:"500€ – 1.999€", tone:"#B89BFF", active: tier==='collector'},
            {name:"Godpack", rate:"7%", goal:"2.000€+", tone:"#F6C56B", active: tier==='godpack'},
          ].map((t,i) => (
            <div key={i} style={{
              padding:18, borderRadius:12, border:`1px solid ${t.active ? t.tone+'66' : 'var(--line)'}`,
              background: t.active ? `linear-gradient(135deg, ${t.tone}18, ${t.tone}04)` : "rgba(255,255,255,0.01)",
              position:"relative", overflow:"hidden",
            }}>
              {t.active && (
                <div style={{position:"absolute", top:10, right:10}}>
                  <span className="badge" style={{background:`${t.tone}22`, color:t.tone, border:`1px solid ${t.tone}44`, fontSize:10}}>ACTUAL</span>
                </div>
              )}
              <div style={{fontSize:22, fontWeight:800, color:t.tone, letterSpacing:"-0.03em"}}>{t.rate}</div>
              <div style={{fontSize:14, fontWeight:700, marginTop:4}}>{t.name}</div>
              <div className="mono" style={{fontSize:10, color:"var(--sub)", marginTop:4}}>{t.goal} ganados</div>
            </div>
          ))}
        </div>
      </div>
      </div>{/* end padding wrapper */}
    </div>
  );
}

window.ProfilePage = ProfilePage;