/* ORGULLO MILLONARIO · Página principal — React + Tailwind · Liquid Glass iOS 26
   Lee TODO en vivo desde OM-DB (el Panel SaaS lo escribe). */
const {useState,useEffect,useRef,useMemo,useSyncExternalStore,createContext,useContext}=React;

/* ---- suscripción viva a OM-DB ---- */
function useDB(){
  return useSyncExternalStore(OMDB.subscribe, OMDB.get);
}

/* ---- icons ---- */
const I={
  home:<path d="M4 11 12 4l8 7M6 10v10h12V10"/>,
  ticket:<><path d="M5 9V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4Z"/><path d="M13 4v16" strokeDasharray="2 2"/></>,
  cards:<><rect x="4" y="3" width="12" height="16" rx="2"/><path d="M8 21h12V8"/></>,
  gift:<><path d="M4 9h16v11H4z"/><path d="M4 9l2-5 6 3 6-3 2 5M12 9v11"/></>,
  squad:<><circle cx="9" cy="8" r="3"/><circle cx="17" cy="10" r="2.5"/><path d="M3 20a6 6 0 0 1 12 0M13 20a5 5 0 0 1 8-4"/></>,
  wa:<path d="M12 3a9 9 0 0 0-7.7 13.6L3 21l4.6-1.2A9 9 0 1 0 12 3Zm4.8 12.3c-.2.6-1.2 1.1-1.7 1.1-.4 0-1 .1-3.2-.9-2.7-1.2-4.3-4-4.5-4.2-.1-.2-1-1.3-1-2.5s.6-1.8.9-2c.2-.3.5-.3.6-.3h.5c.2 0 .4 0 .6.5l.7 1.8c.1.2.1.4 0 .5l-.4.5c-.1.2-.3.3-.1.6.1.3.7 1.1 1.4 1.7.9.8 1.6 1 1.9 1.2.2 0 .4 0 .5-.2l.6-.7c.2-.2.4-.2.6-.1l1.7.8c.2.1.4.2.4.3.1.2.1.6 0 .9Z"/>,
};
const Ic=({n,s=18,c=""})=><svg viewBox="0 0 24 24" width={s} height={s} className={c} fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{I[n]}</svg>;

const RARE={'COMÚN':'#9a9aa6','PLATA':'#c0c0cb','ORO':'#ffcf3e','LEYENDA':'#ff2e3e','HOLOGRÁFICA':'#8b5cf6','ULTRA PREMIUM':'#22d3ee'};

/* ---- toast ---- */
const ToastCtx=createContext(()=>{});
function ToastHost({children}){
  const [msg,setMsg]=useState(null);const t=useRef();
  const toast=m=>{setMsg(m);clearTimeout(t.current);t.current=setTimeout(()=>setMsg(null),2400);};
  return <ToastCtx.Provider value={toast}>{children}
    <div className={`fixed left-1/2 -translate-x-1/2 bottom-24 md:bottom-8 z-[90] transition-all duration-300 ${msg?'opacity-100 translate-y-0':'opacity-0 translate-y-4 pointer-events-none'}`}>
      <div className="glass rounded-2xl px-5 py-3 text-[13px] font-semibold" style={{borderColor:'rgba(224,30,47,.45)'}}>{msg}</div>
    </div>
  </ToastCtx.Provider>;
}

/* ---- countdown ---- */
function useCountdown(iso){
  const [d,setD]=useState(()=>calc(iso));
  useEffect(()=>{const t=setInterval(()=>setD(calc(iso)),1000);return()=>clearInterval(t);},[iso]);
  return d;
}
function calc(iso){
  let ms=Math.max(0,new Date(iso).getTime()-Date.now());
  const p=n=>String(n).padStart(2,'0');
  const dd=Math.floor(ms/864e5);ms-=dd*864e5;const hh=Math.floor(ms/36e5);ms-=hh*36e5;const mm=Math.floor(ms/6e4);const ss=Math.floor((ms-mm*6e4)/1000);
  return {dd:p(dd),hh:p(hh),mm:p(mm),ss:p(ss)};
}

const Chip=({children,c='#ff2e3e'})=><span className="font-mono text-[8.5px] tracking-[1.5px] px-2.5 py-1 rounded-full" style={{color:c,background:c+'1e',border:`1px solid ${c}55`}}>{children}</span>;
const SectionTitle=({k,t,right})=>(
  <div className="flex items-end justify-between mb-4 px-1">
    <div><div className="font-mono text-[9px] tracking-[3px] text-river2 mb-1">{k}</div><h2 className="font-disp text-[24px] md:text-[30px] tracking-[1px] leading-none">{t}</h2></div>
    {right}
  </div>
);

/* ============ HERO ============ */
function Hero(){
  const db=useDB();const toast=useContext(ToastCtx);
  const p=db.partido;const c=useCountdown(p.fecha);
  return <section className="relative rounded-glass overflow-hidden glass-deep p-1 rise">
    <div className="relative rounded-[24px] overflow-hidden" style={{minHeight:'clamp(360px,52vh,540px)'}}>
      <img src={db.config.hero_img} alt="" className="absolute inset-0 w-full h-full object-cover object-top opacity-90"/>
      <div className="absolute inset-0" style={{background:'linear-gradient(180deg,rgba(8,8,11,.15) 0%,rgba(8,8,11,.55) 55%,rgba(8,8,11,.96) 100%)'}}/>
      <div className="absolute inset-0" style={{background:'radial-gradient(90% 70% at 80% 0%,rgba(224,30,47,.28),transparent 60%)'}}/>
      <div className="relative h-full flex flex-col justify-end p-5 md:p-8" style={{minHeight:'inherit'}}>
        <div className="flex gap-2 mb-3"><Chip c="#ffcf3e">TEMPORADA 2026</Chip><Chip>SOMOS RIVER</Chip></div>
        <h1 className="font-disp font-700 text-[40px] md:text-[64px] leading-[.92] tracking-[.5px] drop-shadow-[0_4px_24px_rgba(0,0,0,.6)]">{db.config.hero_titulo}</h1>
        <p className="text-mut text-[13px] md:text-[16px] mt-2 max-w-lg">{db.config.hero_subtitulo}</p>
        {/* next match card */}
        <div className="glass rounded-[22px] mt-5 p-4 md:p-5 max-w-xl">
          <div className="flex items-center justify-between mb-3"><span className="font-mono text-[8.5px] tracking-[2px] text-mut">{p.competencia}</span><Chip c="#22c55e">PRÓXIMO PARTIDO</Chip></div>
          <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3">
            <div className="flex flex-col items-center gap-2"><img src={p.escudo_local} className="w-12 h-12 md:w-14 md:h-14 object-contain"/><b className="font-disp text-[12px] md:text-[14px] text-center leading-none">{p.local}</b></div>
            <div className="flex flex-col items-center"><span className="font-disp text-[22px] text-river2">VS</span><span className="font-mono text-[8px] text-dim mt-1">{p.estadio}</span></div>
            <div className="flex flex-col items-center gap-2"><img src={p.escudo_visita} className="w-12 h-12 md:w-14 md:h-14 object-contain"/><b className="font-disp text-[12px] md:text-[14px] text-center leading-none">{p.visitante}</b></div>
          </div>
          <div className="grid grid-cols-4 gap-2 mt-4">
            {[['DÍAS',c.dd],['HS',c.hh],['MIN',c.mm],['SEG',c.ss]].map(([l,v])=>(
              <div key={l} className="bg-black/30 rounded-xl py-2 text-center"><b className="font-disp text-[22px] md:text-[26px] text-gold2 tabular-nums leading-none">{v}</b><small className="font-mono text-[7px] tracking-[1.5px] text-mut block mt-1">{l}</small></div>))}
          </div>
        </div>
      </div>
    </div>
  </section>;
}

/* ============ VIAJE / BOARDING ============ */
function ViajeModule(){
  const db=useDB();const toast=useContext(ToastCtx);
  const cats=[['VIP','#8b5cf6',120000],['ORO','#ffcf3e',90000],['PLATA','#c0c0cb',60000],['BRONCE','#b0763a',40000]];
  const taken=useMemo(()=>new Set(['A1','B2','D1','C3','A5','D6','B7']),[]);
  const [sel,setSel]=useState('B4');
  const catOf=r=>r<=2?cats[0]:r<=4?cats[1]:r<=6?cats[2]:cats[3];
  return <div className="grid md:grid-cols-2 gap-4">
    <section className="glass rounded-glass p-5 rise">
      <div className="flex items-center justify-between mb-4"><b className="font-disp text-[16px] tracking-[1.5px]">MI VIAJE · ELEGÍ ASIENTO</b></div>
      <div className="flex flex-wrap gap-2 mb-4">{cats.map(([n,c])=><Chip key={n} c={c}>{n}</Chip>)}</div>
      <div className="grid gap-1.5" style={{gridTemplateColumns:'20px repeat(2,1fr) 14px repeat(2,1fr)',maxWidth:280,margin:'0 auto'}}>
        {Array.from({length:10},(_,ri)=>{const r=ri+1;const[cn,cc]=catOf(r);
          return <React.Fragment key={r}>
            <span className="grid place-items-center font-mono text-[9px] text-dim">{r}</span>
            {['A','B','','C','D'].map((col,ci)=>{if(!col)return <span key={ci}/>;const id=col+r;const isT=taken.has(id);const isS=sel===id;
              return <button key={id} disabled={isT} onClick={()=>{setSel(id);toast('Asiento '+id+' · '+cn);}}
                className="press rounded-t-lg rounded-b h-7 grid place-items-center font-mono text-[9px] font-bold text-white/90"
                style={isS?{background:'linear-gradient(180deg,#ff4353,#e01e2f)',boxShadow:'0 0 0 2px #fff,0 0 14px rgba(224,30,47,.8)'}:isT?{background:'#222229',opacity:.5}:{background:`linear-gradient(180deg,${cc},${cc}99)`,boxShadow:'inset 0 -3px 0 rgba(0,0,0,.35)'}}>{isS?r:''}</button>;})}
          </React.Fragment>;})}
      </div>
      <div className="glass rounded-2xl p-3 mt-4">
        <div className="flex justify-between items-baseline"><b className="font-disp text-[19px] text-gold2">$ 30.000</b><span className="font-mono text-[9px] text-mut">DEPÓSITO · de $ 420.000</span></div>
        <div className="h-[7px] rounded-full bg-white/10 overflow-hidden mt-2"><i className="block h-full rounded-full" style={{width:'7.1%',background:'linear-gradient(90deg,#8d0917,#ff2e3e)'}}/></div>
      </div>
    </section>
    <section className="glass rounded-glass p-5 rise flex flex-col">
      <div className="flex items-center gap-2 mb-4"><span className="w-6 h-6 rounded-lg grid place-items-center text-green-400" style={{background:'rgba(34,197,94,.15)'}}>✓</span><b className="font-disp text-[15px] tracking-[1px]">PASE CONFIRMADO</b></div>
      <div className="rounded-[20px] p-4 text-[#1a1a1e] relative overflow-hidden" style={{background:'linear-gradient(165deg,#f4f2ec,#dcd9d0)'}}>
        <div className="flex justify-between font-mono text-[8px] tracking-[2px] text-crimson"><span>PASE DE ABORDAJE</span><span>OM-{sel}-0024</span></div>
        <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2 my-3 text-center">
          <div className="flex flex-col items-center gap-1"><img src={db.partido.escudo_local} className="w-9 h-9 object-contain"/><b className="font-disp text-[10px] leading-none">RIVER</b></div>
          <span className="font-disp text-[14px] text-crimson">VS</span>
          <div className="flex flex-col items-center gap-1"><img src={db.partido.escudo_visita} className="w-9 h-9 object-contain"/><b className="font-disp text-[10px] leading-none">BARRACAS</b></div>
        </div>
        <div className="grid grid-cols-3 gap-2 border-y border-dashed border-[#a8a49a] py-2 text-center">
          {[['FECHA','25 JUL'],['ASIENTO',sel],['SERV.','MIX']].map(([l,v])=><div key={l}><small className="font-mono text-[7px] tracking-[1px] text-[#77736a] block">{l}</small><b className="font-disp text-[13px]">{v}</b></div>)}
        </div>
        <div className="flex gap-3 items-center mt-3">
          <svg viewBox="0 0 29 29" className="w-16 h-16 bg-white rounded-lg p-1" shapeRendering="crispEdges" dangerouslySetInnerHTML={{__html:qrPath()}}/>
          <p className="font-mono text-[8px] leading-[1.6] text-[#55524b]">SALIDA 12:00 HS<br/>LA COSTANERA<br/>{db.config.punto_salida}<br/>BUS 02 · SEMICAMA</p>
        </div>
      </div>
      <button onClick={()=>{const l=db.config.mp_link; l?location.href=l:toast('Redirigiendo a Mercado Pago · $ 30.000');}}
        className="press rounded-2xl py-3.5 mt-4 text-[14px] font-bold text-white flex items-center justify-center gap-2" style={{background:'linear-gradient(160deg,#26d07c,#189e5b)',boxShadow:'0 12px 30px -8px rgba(34,197,94,.5)'}}>PAGAR CON MERCADO PAGO</button>
    </section>
  </div>;
}
function qrPath(){let seed=20260725;const rnd=()=>((seed=(seed*1103515245+12345)&0x7fffffff)/0x7fffffff);let h='<rect width="29" height="29" fill="#fff"/>';const F=(x,y)=>h+=`<rect x="${x}" y="${y}" width="7" height="7" fill="#111"/><rect x="${x+1}" y="${y+1}" width="5" height="5" fill="#fff"/><rect x="${x+2}" y="${y+2}" width="3" height="3" fill="#111"/>`;for(let y=0;y<29;y++)for(let x=0;x<29;x++){const f=(x<8&&y<8)||(x>20&&y<8)||(x<8&&y>20);if(!f&&rnd()>.52)h+=`<rect x="${x}" y="${y}" width="1" height="1" fill="#111"/>`;}F(0,0);F(22,0);F(0,22);return h;}

/* ============ FIGURITAS ============ */
function FiguritasModule(){
  const db=useDB();const toast=useContext(ToastCtx);
  const [filter,setFilter]=useState('TODAS');
  const tiers=['TODAS','COMÚN','PLATA','ORO','LEYENDA','HOLOGRÁFICA'];
  const total=250, done=106;
  return <section className="glass rounded-glass p-5 rise">
    <SectionTitle k="COLECCIÓN" t="Figuritas" right={
      <div className="hidden md:flex gap-1.5 flex-wrap justify-end max-w-md">{tiers.map(t=><button key={t} onClick={()=>setFilter(t)} className={`press font-mono text-[9px] tracking-[1px] px-3 py-1.5 rounded-full border transition-colors ${filter===t?'bg-river border-river text-white':'border-white/12 text-mut hover:text-ink'}`}>{t}</button>)}</div>}/>
    <div className="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 gap-3">
      {db.figuritas.filter(f=>filter==='TODAS'||f.tier===filter).map(f=>{const c=RARE[f.tier]||'#9a9aa6';
        return <div key={f.clave} className="press relative rounded-2xl overflow-hidden flex flex-col justify-end aspect-[3/4.2]" style={f.tenida?{border:`1.5px solid ${c}`,background:`linear-gradient(165deg,${c}33,#141418)`,boxShadow:`0 10px 30px -12px ${c}77`}:{border:'1.5px dashed #33333d',background:'#111116'}}>
          {f.tenida
            ?<><img src={f.img} alt={f.nombre} className="absolute inset-x-0 bottom-0 w-full h-full object-cover object-top" style={f.num?{objectFit:'contain',objectPosition:'bottom'}:{}}/>
               {f.flag&&<span className="absolute top-1.5 left-1.5 text-[11px]">{f.flag}</span>}
               {f.num&&<span className="absolute top-0.5 right-1.5 font-disp text-[16px] font-bold text-white/20">{f.num}</span>}
               {(f.tier==='HOLOGRÁFICA'||f.tier==='ULTRA PREMIUM')&&<span className="absolute inset-0 pointer-events-none" style={{background:`linear-gradient(115deg,transparent 30%,rgba(255,255,255,.25) 45%,${c}55 52%,transparent 68%)`,animation:'holoShine 2.8s linear infinite'}}/>}
               <div className="absolute inset-x-0 bottom-0 pt-6 pb-2 px-2 text-center" style={{background:'linear-gradient(transparent,rgba(0,0,0,.92) 45%)'}}>
                 <b className="font-disp text-[9.5px] leading-tight block uppercase">{f.nombre}</b>
                 <small className="font-mono text-[6.5px] tracking-[1.5px]" style={{color:c}}>{f.tier} · ×{f.cant}</small></div></>
            :<div className="absolute inset-0 grid place-items-center text-center px-2"><div><div className="font-disp text-[22px] text-white/10">?</div><small className="font-mono text-[6.5px] text-dim tracking-[1px]">BLOQUEADA</small></div></div>}
        </div>;})}
    </div>
    <div className="flex items-center justify-between mt-4 mb-2"><span className="font-mono text-[9px] text-mut tracking-[1px]">MI ÁLBUM · {done}/{total}</span><b className="font-mono text-[9px] text-gold2">{Math.round(done/total*100)}%</b></div>
    <div className="h-[7px] rounded-full bg-white/10 overflow-hidden"><i className="block h-full rounded-full" style={{width:done/total*100+'%',background:'linear-gradient(90deg,#d4a437,#ffcf3e)'}}/></div>
    <button onClick={()=>toast('Abriendo tienda de sobres…')} className="press rounded-2xl py-3 mt-4 w-full text-[13px] font-bold text-white" style={{background:'linear-gradient(160deg,#ff2e3e,#8d0917)',boxShadow:'0 12px 30px -8px rgba(224,30,47,.5)'}}>ABRIR SOBRE · 5 FIGURITAS</button>
  </section>;
}

/* ============ PLANTEL carrusel ============ */
function PlantelModule(){
  const db=useDB();
  const POS={ARQ:'#22d3ee',DEF:'#2f7df6',MED:'#22c55e',DEL:'#ff2e3e'};
  return <section className="rise">
    <SectionTitle k="EL PLANTEL" t="La Banda 2026"/>
    <div className="flex gap-3 overflow-x-auto no-scrollbar pb-2 -mx-1 px-1">
      {db.plantel.map(p=>(
        <div key={p.n} className="press glass rounded-[22px] p-3 flex-none w-[140px] relative overflow-hidden">
          <span className="absolute top-2 right-3 font-disp text-[30px] text-white/10">{p.num}</span>
          <div className="w-full aspect-square rounded-2xl overflow-hidden mb-2" style={{background:'radial-gradient(circle at 50% 30%,#2a2a33,#111116)'}}><img src={p.foto} className="w-full h-full object-cover object-top"/></div>
          <b className="font-disp text-[13px] leading-tight block">{p.n}</b>
          <div className="flex items-center gap-1.5 mt-1"><span className="w-1.5 h-1.5 rounded-full" style={{background:POS[p.pos]}}/><small className="font-mono text-[8px] tracking-[1px] text-mut">{p.pos} · #{p.num}</small></div>
        </div>))}
    </div>
  </section>;
}

/* ============ SORTEO ============ */
function SorteoModule(){
  const db=useDB();const toast=useContext(ToastCtx);const s=db.sorteo;
  const sold=useMemo(()=>new Set(s.sold),[s.sold]);
  const [pick,setPick]=useState(()=>new Set());
  const toggle=n=>{if(sold.has(n))return;const nx=new Set(pick);nx.has(n)?nx.delete(n):nx.add(n);setPick(nx);};
  return <section className="glass rounded-glass p-5 rise">
    <SectionTitle k="GANÁ PREMIOS" t="Sorteos" right={<Chip c="#22c55e">${s.precio} c/u</Chip>}/>
    <div className="grid sm:grid-cols-[auto_1fr] gap-5 items-center">
      <div className="flex flex-col items-center gap-2 mx-auto">
        <img src={s.img} className="w-32 object-contain drop-shadow-[0_12px_24px_rgba(0,0,0,.6)]"/>
        <b className="font-disp text-[13px] text-center max-w-[160px] leading-tight">{s.premio}</b>
      </div>
      <div>
        <div className="grid grid-cols-10 gap-1">
          {Array.from({length:s.total},(_,n)=>{const isS=sold.has(n);const isP=pick.has(n);
            return <button key={n} disabled={isS} onClick={()=>toggle(n)} className="press aspect-square rounded-md grid place-items-center font-mono text-[8px] font-bold transition-colors"
              style={isP?{background:'linear-gradient(160deg,#ff2e3e,#8d0917)',color:'#fff',boxShadow:'0 0 10px rgba(224,30,47,.5)'}:isS?{background:'#131317',color:'#3c3c46'}:{background:'rgba(255,255,255,.06)',color:'#9a9aa6',border:'1px solid rgba(255,255,255,.06)'}}>{String(n).padStart(2,'0')}</button>;})}
        </div>
        <button onClick={()=>toast(pick.size?`✔ ${pick.size} número(s) reservado(s) · $${(pick.size*s.precio).toLocaleString('es-AR')}`:'Elegí al menos un número')}
          className="press rounded-2xl py-3 mt-4 w-full text-[13px] font-bold text-white" style={{background:'linear-gradient(160deg,#ff2e3e,#8d0917)',boxShadow:'0 12px 30px -8px rgba(224,30,47,.5)'}}>RESERVAR {pick.size>0&&`· $${(pick.size*s.precio).toLocaleString('es-AR')}`}</button>
      </div>
    </div>
  </section>;
}

/* ============ FIXTURE ============ */
function FixtureModule(){
  const db=useDB();const cl=db.clasico;const c=useCountdown(cl.fecha);
  return <section className="grid md:grid-cols-2 gap-4 rise">
    <div className="rounded-glass p-6 relative overflow-hidden glass-deep flex flex-col justify-center" style={{minHeight:220}}>
      <div className="absolute inset-0" style={{background:'radial-gradient(90% 90% at 80% 10%,rgba(224,30,47,.35),transparent 60%)'}}/>
      <div className="relative text-center">
        <div className="font-mono text-[8.5px] tracking-[3px] text-gold2 mb-1">{cl.torneo}</div>
        <h3 className="font-disp text-[30px] tracking-[2px] mb-4">SUPERCLÁSICO</h3>
        <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 mb-4">
          <div className="flex flex-col items-center gap-2"><img src={db.partido.escudo_local} className="w-12 h-12 object-contain"/><b className="font-disp text-[11px]">RIVER</b></div>
          <span className="font-disp text-[16px] text-river2">VS</span>
          <div className="flex flex-col items-center gap-2"><img src={cl.escudo} className="w-12 h-12 object-contain"/><b className="font-disp text-[11px]">BOCA</b></div>
        </div>
        <div className="grid grid-cols-4 gap-2 max-w-xs mx-auto">
          {[['DÍAS',c.dd],['HS',c.hh],['MIN',c.mm],['SEG',c.ss]].map(([l,v])=><div key={l} className="bg-black/40 rounded-xl py-2"><b className="font-disp text-[20px] text-gold2 tabular-nums">{v}</b><small className="font-mono text-[7px] tracking-[1px] text-mut block">{l}</small></div>)}
        </div>
      </div>
    </div>
    <div className="glass rounded-glass p-5">
      <b className="font-disp text-[15px] tracking-[1px] mb-3 block">CALENDARIO</b>
      <div className="flex flex-col gap-2">
        {db.fixture.map((f,i)=>(
          <div key={i} className="flex items-center gap-3 bg-white/[.05] border border-white/[.07] rounded-2xl px-3 py-2.5">
            <img src={f.escudo} className="w-8 h-8 object-contain flex-none"/>
            <div className="flex-1 min-w-0"><b className="text-[12px] block leading-tight">{f.rival}</b><small className="font-mono text-[8px] text-dim">{f.dia} · {f.hora}</small></div>
            <span className={`font-mono text-[7px] tracking-[1px] px-2 py-1 rounded ${f.cond==='LOCAL'?'text-gold2 bg-gold2/10':'text-river2 bg-river2/10'}`}>{f.cond}</span>
            <span className={`font-disp text-[13px] w-9 text-center ${f.win?'text-green-400':'text-dim'}`}>{f.res}</span>
          </div>))}
      </div>
    </div>
  </section>;
}

/* ============ SPONSORS ============ */
function SponsorsModule(){
  const db=useDB();const T=[['ORO','#ffcf3e'],['PLATA','#c0c0cb'],['BRONCE','#b0763a']];
  return <section className="glass rounded-glass p-6 rise">
    <div className="text-center mb-5"><div className="font-mono text-[9px] tracking-[3px] text-river2 mb-1">NUESTROS ALIADOS</div><h2 className="font-disp text-[22px] tracking-[1px]">Sponsors Oficiales</h2></div>
    <div className="flex flex-col gap-4">
      {T.map(([t,c])=>(<div key={t}>
        <div className="text-center font-mono text-[8px] tracking-[2px] mb-2" style={{color:c}}>{t}</div>
        <div className="grid grid-cols-3 gap-3">
          {(db.sponsors[t]||[]).map((sp,i)=>(
            <div key={i} className="press h-14 rounded-2xl grid place-items-center bg-white/[.05] px-3" style={{border:`1px solid ${c}44`}}>
              {sp.logo?<img src={sp.logo} className="max-h-7 max-w-full object-contain"/>:<span className="font-disp text-[11px] tracking-[1px] text-mut text-center">{sp.nombre}</span>}
            </div>))}
        </div></div>))}
    </div>
  </section>;
}

/* ============ NAV / APP ============ */
const NAV=[['inicio','home','Inicio'],['viaje','ticket','Viaje'],['figuritas','cards','Figuritas'],['plantel','squad','Plantel'],['sorteo','gift','Sorteos']];
function App(){
  const db=useDB();const toast=useContext(ToastCtx);
  useEffect(()=>{document.body.classList.toggle('theme-light',db.config.tema==='light');},[db.config.tema]);
  const go=id=>{const el=document.getElementById('s-'+id);if(el)window.scrollTo({top:el.getBoundingClientRect().top+window.scrollY-88,behavior:'smooth'});};
  return <>
    <div className="blob w-[520px] h-[520px] -top-40 -left-32" style={{background:'radial-gradient(circle,#8d0917,transparent 70%)',opacity:.5,animation:'drift1 18s ease-in-out infinite'}}/>
    <div className="blob w-[440px] h-[440px] top-1/3 -right-32" style={{background:'radial-gradient(circle,#3b1d6e,transparent 70%)',opacity:.45,animation:'drift2 22s ease-in-out infinite'}}/>
    <div className="blob w-[380px] h-[380px] bottom-0 left-1/3" style={{background:'radial-gradient(circle,#5a4008,transparent 70%)',opacity:.35,animation:'drift1 26s ease-in-out infinite'}}/>

    {/* top nav */}
    <header className="sticky top-0 z-[60] px-3 md:px-6 pt-3">
      <div className="glass-deep rounded-glass flex items-center gap-3 px-4 md:px-5 py-2.5 max-w-[1240px] mx-auto">
        <img src="assets/logo-om.png" className="w-8 h-9 object-contain"/>
        <div className="leading-tight mr-1"><b className="font-disp text-[13px] tracking-[1px] block">ORGULLO</b><small className="font-mono text-[7px] tracking-[2px] text-river2">MILLONARIO</small></div>
        <nav className="hidden md:flex items-center gap-1 flex-1 justify-center">
          {NAV.map(([id,ic,l])=><button key={id} onClick={()=>go(id)} className="press flex items-center gap-2 px-3.5 py-2 rounded-full text-[11px] font-semibold text-mut hover:text-ink hover:bg-white/[.07] transition-colors"><Ic n={ic} s={13}/>{l}</button>)}
        </nav>
        <div className="flex items-center gap-2 ml-auto">
          <a href={'https://wa.me/'+db.config.whatsapp.replace(/[^0-9]/g,'')} target="_blank" className="press w-9 h-9 rounded-full glass grid place-items-center text-green-400"><Ic n="wa" s={16}/></a>
          <button onClick={()=>toast('Iniciá sesión para gestionar tu cuenta')} className="press hidden sm:flex items-center gap-2 px-4 py-2 rounded-full text-[11px] font-bold text-white" style={{background:'linear-gradient(160deg,#ff2e3e,#8d0917)',boxShadow:'0 8px 24px -6px rgba(224,30,47,.6)'}}>Mi Cuenta</button>
        </div>
      </div>
    </header>

    <main className="relative z-10 px-3 md:px-6 py-4 pb-28 md:pb-10 max-w-[1240px] mx-auto flex flex-col gap-10">
      <div id="s-inicio"><Hero/></div>
      <div id="s-viaje"><ViajeModule/></div>
      <div id="s-figuritas"><FiguritasModule/></div>
      <div id="s-plantel"><PlantelModule/></div>
      <FixtureModule/>
      <div id="s-sorteo"><SorteoModule/></div>
      <SponsorsModule/>
      <footer className="text-center font-mono text-[8px] tracking-[1px] text-dim pt-4">ORGULLO MILLONARIO ® 2026 · SIEMPRE JUNTOS, DONDE SEA · <a href="panel.html" className="text-river2">PANEL</a></footer>
    </main>

    {/* tab bar móvil */}
    <nav className="md:hidden fixed bottom-3 inset-x-3 z-[70] safe-b">
      <div className="glass-deep rounded-glass flex items-center justify-around px-1 py-2">
        {NAV.map(([id,ic,l])=><button key={id} onClick={()=>go(id)} className="press flex flex-col items-center gap-1 px-3 py-1.5 rounded-2xl text-mut hover:text-ink"><Ic n={ic} s={19}/><small className="font-mono text-[7px] tracking-[.5px]">{l}</small></button>)}
      </div>
    </nav>
  </>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<ToastHost><App/></ToastHost>);