/* ORGULLO MILLONARIO · Landing modular — React + Tailwind · Liquid Glass iOS 26
   Réplica del sitio completo. Cada sección Y cada bloque (tarjetas/banners) se
   prende/apaga desde el Panel SaaS (config.sections[].on + blocks[].on) y se
   refleja EN VIVO vía OM-DB. */
const {useState,useEffect,useRef,useMemo,useSyncExternalStore,createContext,useContext}=React;
const useDB=()=>useSyncExternalStore(OMDB.subscribe,OMDB.get);

/* ---- icons ---- */
const I={
  home:<path d="M4 11 12 4l8 7M6 10v10h12V10"/>,
  cal:<><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M8 2v4M16 2v4M3 10h18"/></>,
  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"/></>,
  chat:<path d="M21 12a8 8 0 0 1-8 8H4l2-3a8 8 0 1 1 15-5Z"/>,
  user:<><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
  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"/>,
  ig:<><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1"/></>,
  yt:<><rect x="3" y="6" width="18" height="12" rx="3"/><path d="m10 9 5 3-5 3V9Z"/></>,
  tk:<path d="M14 4c.5 2.5 2 4 4.5 4.2V11c-1.7 0-3.2-.5-4.5-1.4v5.7A4.8 4.8 0 1 1 9.2 10v2.6a2.2 2.2 0 1 0 2 2.2V4h2.8Z"/>,
  x:<path d="M4 4l16 16M20 4 4 20"/>,
  arrow:<path d="M5 12h14M13 6l6 6-6 6"/>,
  lock:<><rect x="4" y="11" width="16" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></>,
  play:<path d="M8 5v14l11-7L8 5Z"/>,
  chev:<path d="m9 6 6 6-6 6"/>,
  up:<path d="M12 19V5M6 11l6-6 6 6"/>,
};
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>;

/* ---- crests (imagen si existe, si no badge con iniciales) ---- */
const CRESTS={river:'assets/river.png',boca:'assets/boca.png',barracas:'assets/barracas.png',argentinos:'assets/argentinos.png',racing:'assets/racing.png',talleres:'assets/talleres.png',gimnasia:'assets/gimnasia.png',rosario:'assets/rosario.png',flamengo:'assets/flamengo.png'};
function Crest({k,name,s=32,logo}){
  const src=logo||CRESTS[k];
  if(src)return <img src={src} alt={name||''} style={{width:s,height:s,objectFit:'contain'}} className="drop-shadow-[0_2px_6px_rgba(0,0,0,.4)]"/>;
  const ini=(name||'?').replace(/[^A-Za-zÁÉÍÓÚÑ ]/g,'').split(/\s+/).filter(Boolean).slice(0,2).map(w=>w[0]).join('').toUpperCase();
  return <span style={{width:s,height:s,borderRadius:'50%',display:'grid',placeItems:'center',fontFamily:'Oswald',fontWeight:700,fontSize:s*.42,background:'radial-gradient(circle at 35% 30%,#2a2a33,#111116)',border:'1px solid rgba(255,255,255,.14)',color:'#c0c0cb',flex:'none'}}>{ini}</span>;
}
const FORMA={G:['#2fe07a','rgba(47,224,122,.16)'],P:['#ff5a63','rgba(255,90,99,.16)'],E:['#e0a24e','rgba(224,162,78,.16)']};
const FormaBadges=({str,s=24})=><div className="flex gap-1.5">{str.split('').map((r,i)=>{const[c,bg]=FORMA[r]||FORMA.E;return <span key={i} style={{width:s,height:s,borderRadius:6,display:'grid',placeItems:'center',fontFamily:'Oswald',fontWeight:700,fontSize:s*.5,color:c,background:bg,border:'1px solid '+c}}>{r}</span>;})}</div>;

/* ---- 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)};}
function faltan(iso){let ms=new Date(iso)-Date.now();if(ms<0)return 'Jugado';const d=Math.floor(ms/864e5);const h=Math.floor((ms%864e5)/36e5);return `Faltan ${d}d ${h}h`;}

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 Eyebrow=({k,t,sub})=>(
  <div className="text-center mb-7">
    <div className="font-mono text-[10px] tracking-[3px] text-river2 mb-2">{k}</div>
    <h2 className="font-disp font-700 text-[34px] md:text-[54px] leading-[.95] tracking-[-.5px]">{t}</h2>
    {sub&&<p className="text-mut text-[14px] mt-2.5 max-w-lg mx-auto">{sub}</p>}
  </div>
);
const CountBoxes=({c,accent='#ffcf3e'})=>(
  <div className="grid grid-cols-4 gap-2 max-w-sm mx-auto">
    {[['DÍAS',c.dd],['HS',c.hh],['MIN',c.mm],['SEG',c.ss]].map(([l,v])=>(
      <div key={l} className="bg-black/35 rounded-2xl py-2.5 text-center border border-white/[.06]"><b className="font-disp text-[22px] md:text-[28px] tabular-nums leading-none" style={{color:accent}}>{v}</b><small className="font-mono text-[7px] tracking-[1.5px] text-mut block mt-1">{l}</small></div>))}
  </div>
);
const Bar=({pct,bg})=><div className="h-[6px] rounded-full bg-white/10 overflow-hidden"><i className="block h-full rounded-full" style={{width:pct+'%',background:bg||'linear-gradient(90deg,#8d0917,#ff2e3e)'}}/></div>;

/* helper visibilidad — la modularización SOLO aplica si el panel la activó */
function useVis(){
  const db=useDB();const modular=!!db.config.modular;const secs=db.config.sections||[];
  const blockOn=(secId,blkId)=>{if(!modular)return true;const s=secs.find(x=>x.id===secId);if(!s)return true;const b=(s.blocks||[]).find(x=>x.id===blkId);return b?b.on:true;};
  return {secs,blockOn,modular};
}

/* ============ SHIRT 360 ============ */
function Shirt360({front,back,s=150}){
  const [ang,setAng]=useState(0);const drag=useRef(null);const auto=useRef(true);const resume=useRef();
  useEffect(()=>{let last=performance.now(),raf;const loop=t=>{const dt=t-last;last=t;if(auto.current)setAng(a=>(a+dt*0.045)%360);raf=requestAnimationFrame(loop);};raf=requestAnimationFrame(loop);return()=>cancelAnimationFrame(raf);},[]);
  const down=e=>{auto.current=false;clearTimeout(resume.current);drag.current={x:e.clientX,a:ang};e.currentTarget.setPointerCapture&&e.currentTarget.setPointerCapture(e.pointerId);};
  const move=e=>{if(drag.current)setAng(drag.current.a+(e.clientX-drag.current.x)*0.8);};
  const up=()=>{if(drag.current){drag.current=null;resume.current=setTimeout(()=>auto.current=true,2200);}};
  return <div className="flex flex-col items-center gap-2 select-none">
    <div onPointerDown={down} onPointerMove={move} onPointerUp={up} onPointerCancel={up} className="relative cursor-grab active:cursor-grabbing touch-none" style={{width:s,height:s*1.28,perspective:'700px'}}>
      <div className="absolute inset-0" style={{transformStyle:'preserve-3d',transform:`rotateY(${ang}deg)`}}>
        <img src={front} draggable="false" className="absolute inset-0 w-full h-full object-contain drop-shadow-[0_14px_26px_rgba(0,0,0,.65)]" style={{backfaceVisibility:'hidden'}}/>
        <img src={back||front} draggable="false" className="absolute inset-0 w-full h-full object-contain drop-shadow-[0_14px_26px_rgba(0,0,0,.65)]" style={{backfaceVisibility:'hidden',transform:'rotateY(180deg)'}}/>
      </div>
    </div>
    <span className="font-mono text-[7.5px] tracking-[1.5px] text-mut">↺ ARRASTRÁ PARA GIRAR 360°</span>
  </div>;
}

/* ============ HERO ============ */
function Hero(){
  const db=useDB();const p=db.partido;const c=useCountdown(p.fecha);const k=db.kpis;
  return <section className="relative rounded-glass overflow-hidden glass-deep p-1 rise">
    <div className="relative rounded-[24px] overflow-hidden" style={{minHeight:'clamp(420px,64vh,640px)'}}>
      <img src={db.config.hero_img} alt="" className="absolute inset-0 w-full h-full object-cover object-top opacity-95"/>
      <div className="absolute inset-0" style={{background:'linear-gradient(180deg,rgba(8,8,11,.1) 0%,rgba(8,8,11,.5) 50%,rgba(8,8,11,.97) 100%)'}}/>
      <div className="absolute inset-0" style={{background:'radial-gradient(90% 70% at 80% 0%,rgba(224,30,47,.3),transparent 60%)'}}/>
      <div className="relative h-full flex flex-col justify-end items-center text-center p-5 md:p-8" style={{minHeight:'inherit'}}>
        <div className="font-mono text-[10px] tracking-[4px] text-river2 mb-3">FILIAL RIVER · CORRIENTES</div>
        <h1 className="font-disp font-700 text-[46px] md:text-[86px] leading-[.9] tracking-[.5px] drop-shadow-[0_4px_28px_rgba(0,0,0,.7)]">{db.config.hero_titulo}</h1>
        <div className="glass rounded-[24px] mt-6 p-5 md:p-6 w-full max-w-2xl">
          <div className="flex items-center justify-center gap-4 mb-5">
            <span className="flex items-center gap-2 font-mono text-[10px] text-green-400"><i className="w-[7px] h-[7px] rounded-full bg-green-400" style={{animation:'pulseDot 1.6s infinite'}}/>{k.socios} en vivo</span>
            <span className="text-dim">|</span>
            <span className="font-mono text-[10px] text-mut"><b className="text-ink">{k.visitas}</b> visitas</span>
          </div>
          <div className="flex justify-center mb-5"><Chip>● PRÓXIMO PARTIDO</Chip></div>
          <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 mb-5">
            <div className="flex flex-col items-center gap-2.5"><Crest k="river" name={p.local} s={64}/><b className="font-disp text-[15px] md:text-[18px]">{p.local}</b><Chip>LOCAL</Chip></div>
            <div className="flex flex-col items-center"><span className="font-disp text-[30px] md:text-[40px] text-river2" style={{textShadow:'0 0 24px rgba(255,46,62,.7)'}}>VS</span></div>
            <div className="flex flex-col items-center gap-2.5"><Crest k="barracas" name={p.visitante} s={64}/><b className="font-disp text-[15px] md:text-[18px]">{p.visitante}</b><Chip c="#9a9aa6">VISITANTE</Chip></div>
          </div>
          <CountBoxes c={c}/>
          <div className="flex flex-wrap items-center justify-center gap-4 mt-5 font-mono text-[10px] text-mut">
            <span>📅 25 JUL</span><span>🏆 {p.competencia}</span><span>📍 Monumental</span>
          </div>
        </div>
      </div>
    </div>
  </section>;
}

/* ============ CENTRO DE DATOS ============ */
function Centro(){
  const db=useDB();const {blockOn}=useVis();const d=db.datos;
  const live=!!(window.OMDB&&OMDB.isLive&&OMDB.isLive());
  const _xgMax=Math.max(d.xg.river,d.xg.rivalXg);
  return <section>
    <Eyebrow k="DATOS EN VIVO · API SPORTMONKS" t="Centro de Datos"/>
    <div className="flex justify-center mb-6"><Chip c={live?'#2fe07a':'#e0a24e'}>● {live?'EN VIVO':'DEMO'} · {d.liga}</Chip></div>
    <div className="grid lg:grid-cols-[1.3fr_1fr] gap-4">
      {blockOn('centro','tabla')&&<div className="glass rounded-glass p-5">
        <div className="flex items-center justify-between mb-3"><span className="font-mono text-[9px] tracking-[2px] text-river2">🏆 TABLA · ZONA DE RIVER</span><span className="font-mono text-[9px] text-mut">Liga Prof. 2026</span></div>
        <div className="grid grid-cols-[20px_1fr_auto_auto] gap-x-3 font-mono text-[8px] tracking-[1px] text-dim mb-1 px-2"><span>#</span><span>EQUIPO</span><span>DG</span><span className="text-right">PTS</span></div>
        <div className="flex flex-col gap-1">
          {d.tabla.map(t=>(
            <div key={t.pos} className="grid grid-cols-[20px_1fr_auto_auto] items-center gap-x-3 px-2 py-1.5 rounded-xl" style={t.river?{background:'linear-gradient(90deg,rgba(255,46,62,.2),rgba(255,255,255,.03))',border:'1px solid rgba(255,46,62,.42)'}:{}}>
              <span className="font-disp text-[14px]" style={{color:t.river?'#ff2e3e':'#8a8a97'}}>{t.pos}</span>
              <div className="flex items-center gap-2.5 min-w-0">
                <Crest k={t.crest} name={t.nombre} logo={t.logo} s={26}/>
                <div className="min-w-0 flex-1"><b className="text-[12.5px] block truncate" style={t.river?{color:'#ff6a78'}:{}}>{t.nombre}</b><div className="h-[5px] rounded-full bg-white/[.08] overflow-hidden mt-1"><i className="block h-full rounded-full" style={{width:t.pts/34*100+'%',background:t.river?'linear-gradient(90deg,#ff2e3e,#ff6a2e)':'rgba(255,255,255,.22)'}}/></div></div>
              </div>
              <span className="font-mono text-[10px] text-mut">{t.dg}</span>
              <b className="font-disp text-[17px] text-right" style={t.river?{color:'#ff2e3e'}:{}}>{t.pts}</b>
            </div>))}
        </div>
      </div>}
      <div className="flex flex-col gap-4">
        {blockOn('centro','forma')&&<div className="glass rounded-glass p-5">
          <span className="font-mono text-[9px] tracking-[2px] text-river2 block mb-3">📋 FORMA RIVER · ÚLTIMOS 5</span>
          <FormaBadges str={d.forma} s={30}/>
          <div className="flex gap-3 mt-3 font-mono text-[8px] text-mut"><span>■ Ganó</span><span>■ Empató</span><span>■ Perdió</span></div>
        </div>}
        {blockOn('centro','xg')&&<div className="glass rounded-glass p-5">
          <span className="font-mono text-[9px] tracking-[2px] text-river2 block mb-3">◎ xG · GOLES ESPERADOS</span>
          <div className="flex items-center gap-2 mb-2"><Crest k="river" name="River" s={24}/><div className="flex-1"><Bar pct={d.xg.river/_xgMax*100} bg="linear-gradient(90deg,#ff2e3e,#ff6a2e)"/></div><b className="font-disp text-[18px] text-ink w-12 text-right">{d.xg.river}</b></div>
          <div className="flex items-center gap-2"><Crest k={d.xg.crest} name={d.xg.rival} logo={d.xg.logo} s={24}/><div className="flex-1"><Bar pct={d.xg.rivalXg/_xgMax*100} bg="rgba(120,140,170,.5)"/></div><b className="font-disp text-[18px] text-mut w-12 text-right">{d.xg.rivalXg}</b></div>
        </div>}
        {blockOn('centro','ad')&&<div className="glass rounded-glass grid place-items-center text-center p-5" style={{minHeight:180}}>
          <div><div className="font-mono text-[10px] tracking-[2px] text-mut">ESPACIO PUBLICITARIO</div><div className="font-mono text-[8px] text-dim mt-1.5">300 × 250 · configurable desde el panel</div></div>
        </div>}
      </div>
    </div>
  </section>;
}

/* ============ PROBABILIDADES 1X2 ============ */
function Prob(){
  const db=useDB();const p=db.datos.pred;const pt=db.partido;
  const max=Math.max(...p.scores.map(s=>s.p));
  return <section className="glass rounded-glass p-5 md:p-7 rise">
    <div className="flex items-center justify-between mb-5"><span className="font-mono text-[10px] tracking-[2px] text-river2">◈ PROBABILIDADES · PRÓXIMO PARTIDO</span><span className="font-mono text-[9px] text-mut hidden sm:block">{p.modelo}</span></div>
    <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 max-w-md mx-auto mb-6">
      <div className="flex flex-col items-center gap-2"><Crest k="river" name="River" s={54}/><b className="font-disp text-[13px]">River</b></div>
      <div className="text-center"><span className="font-disp text-[26px] text-river2">VS</span><div className="font-mono text-[8px] text-mut mt-1">25/7 · 19:15</div><div className="font-mono text-[8px] text-mut">📍 Monumental</div></div>
      <div className="flex flex-col items-center gap-2"><Crest k="barracas" name={pt.visitante} s={54}/><b className="font-disp text-[13px] text-center">{pt.visitante}</b></div>
    </div>
    <div className="mb-5">
      <span className="font-mono text-[9px] tracking-[1.5px] text-mut block mb-2">RESULTADO FINAL (1X2)</span>
      <div className="h-3 rounded-full overflow-hidden flex">
        <i style={{width:p.home+'%',background:'linear-gradient(90deg,#ff2e3e,#ff6a2e)'}}/>
        <i style={{width:p.draw+'%',background:'rgba(255,255,255,.28)'}}/>
        <i style={{width:p.away+'%',background:'rgba(120,140,170,.55)'}}/>
      </div>
      <div className="flex justify-between font-mono text-[9px] mt-2"><span className="text-river2">Gana River {p.home}%</span><span className="text-mut">Empate {p.draw}%</span><span className="text-mut">Gana rival {p.away}%</span></div>
    </div>
    <div className="grid md:grid-cols-2 gap-5 items-start">
      <div>
        <span className="font-mono text-[9px] tracking-[1.5px] text-mut block mb-2">AMBOS EQUIPOS MARCAN</span>
        <div className="h-3 rounded-full bg-white/10 overflow-hidden"><i className="block h-full rounded-full" style={{width:p.bttsYes+'%',background:'linear-gradient(90deg,#2fe07a,#0f9d54)'}}/></div>
        <div className="flex justify-between font-mono text-[9px] mt-2"><span className="text-green-400">Sí {p.bttsYes}%</span><span className="text-mut">No {p.bttsNo}%</span></div>
      </div>
      <div>
        <span className="font-mono text-[9px] tracking-[1.5px] text-mut block mb-2">RESULTADOS MÁS PROBABLES</span>
        <div className="grid grid-cols-4 gap-2">
          {p.scores.map((s,i)=>(<div key={s.s} className="text-center rounded-2xl py-3 px-1" style={{background:s.p===max?'linear-gradient(150deg,rgba(255,46,62,.22),rgba(255,255,255,.03))':'rgba(255,255,255,.05)',border:'1px solid '+(s.p===max?'rgba(255,46,62,.4)':'rgba(255,255,255,.08)')}}><b className="font-disp text-[19px] block">{s.s}</b><small className="font-mono text-[8px] text-mut">{s.p}%</small></div>))}
        </div>
      </div>
    </div>
    <div className="text-right font-mono text-[8px] text-dim mt-4">Actualizado 04:01:19 · se refresca cada 60s</div>
  </section>;
}

/* ============ CALENDARIO ============ */
const CAL=[
  {dia:'25',mes:'JUL',rival:'Barracas Central',crest:'barracas',comp:'Liga Profesional · Jornada 1 · Monumental',cond:'LOCAL',iso:'2026-07-25T19:15:00-03:00'},
  {dia:'29',mes:'JUL',rival:'Gimnasia La Plata',crest:'gimnasia',comp:'Liga Profesional · Jornada 2 · Visitante',cond:'VISITA',iso:'2026-07-29T19:15:00-03:00'},
  {dia:'02',mes:'AGO',rival:'Rosario Central',crest:'rosario',comp:'Liga Profesional · Jornada 3 · Monumental',cond:'LOCAL',iso:'2026-08-02T19:15:00-03:00'},
  {dia:'09',mes:'AGO',rival:'Tigre',crest:'tigre',comp:'Liga Profesional · Jornada 4 · Visitante',cond:'VISITA',iso:'2026-08-09T21:00:00-03:00'},
];
function Calendario(){
  const {blockOn}=useVis();
  return <section className="rise">
    <Eyebrow k="" t="Calendario"/>
    <div className="flex justify-center mb-6"><Chip c="#2fe07a">● Sincronizado · API fútbol</Chip></div>
    <div className="flex flex-col gap-3 max-w-4xl mx-auto">
      {CAL.map((m,i)=>(
        <div key={i} className="glass rounded-glass px-4 md:px-6 py-4 flex items-center gap-4 lift">
          <div className="text-center flex-none w-12"><b className="font-disp text-[26px] text-river2 leading-none">{m.dia}</b><small className="font-mono text-[8px] text-mut block">{m.mes}</small></div>
          <div className="flex items-center gap-2 flex-none"><Crest k="river" name="River" s={34}/><span className="font-mono text-[9px] text-dim">VS</span><Crest k={m.crest} name={m.rival} s={34}/></div>
          <div className="flex-1 min-w-0"><b className="font-disp text-[16px] md:text-[19px] block leading-tight"><span className="text-river2">River</span> vs {m.rival}</b><small className="font-mono text-[8.5px] text-mut">🏆 {m.comp}</small></div>
          <div className="text-right flex-none hidden sm:block"><Chip c={m.cond==='LOCAL'?'#ffcf3e':'#ff2e3e'}>{m.cond}</Chip><div className="font-mono text-[9px] text-river2 mt-2">{faltan(m.iso)}</div></div>
        </div>))}
      {blockOn('calendario','sponsor')&&<div className="glass rounded-glass px-6 py-5 flex items-center justify-center gap-4" style={{background:'linear-gradient(160deg,rgba(24,60,40,.35),rgba(255,255,255,.02))'}}>
        <span className="font-mono text-[8px] tracking-[2px] text-mut absolute left-6 top-4">SPONSOR OFICIAL · RIVER PLATE</span>
        <Crest k="river" name="River" s={38}/><img src="assets/betano.png" alt="Betano" className="h-7 object-contain"/>
      </div>}
    </div>
  </section>;
}

/* ============ TICKETS & VIAJES ============ */
function Viajes(){
  const db=useDB();const toast=useContext(ToastCtx);
  return <section className="rise">
    <Eyebrow k="VIAJÁ CON LA BANDA" t="Tickets & Viajes" sub="Publicados automáticamente desde los flyers de WhatsApp del club"/>
    <div className="grid md:grid-cols-3 gap-4">
      {db.viajes.map((v,i)=>{const pct=Math.round((1-v.cupos/v.total)*100);const last=v.cupos<=20&&v.cupos>0;
        return <div key={i} className="glass rounded-glass p-5 flex flex-col lift shine">
          <div className="flex items-center justify-between mb-3"><span className="font-mono text-[8px] tracking-[2px] text-river2">VIAJE OFICIAL</span>{v.nuevo&&<Chip c="#2fe07a">NUEVO · WHATSAPP</Chip>}</div>
          <h3 className="font-disp text-[26px] leading-none mb-2">{v.destino}</h3>
          <div className="flex items-center gap-2 mb-4"><Crest k="river" name="River" s={26}/><span className="font-mono text-[8px] text-dim">VS</span><Crest k={v.crest} name={v.rival} s={26}/><small className="text-mut text-[11px] leading-tight">{v.rival} · {v.comp}</small></div>
          <div className="flex flex-col gap-2 text-[12px] text-mut mb-4">
            <span>🗓 {v.fecha}</span><span>🚌 {v.salida}</span><span>📍 {v.punto}</span><span>👥 {v.cupos} de {v.total} cupos libres</span>
          </div>
          <Bar pct={pct} bg="linear-gradient(90deg,#ff2e3e,#ff6a2e)"/>
          <div className={`font-mono text-[9px] mt-2 ${last?'text-river2':'text-mut'}`}>{last?'¡Últimos lugares!':'Cupos disponibles'}</div>
          <div className="flex items-end justify-between mt-4">
            <div><b className="font-disp text-[26px] text-gold2">{v.precio}</b><div className="font-mono text-[8px] text-dim">SEÑA {v.sena}</div></div>
            <Chip c="#2fe07a">{v.estado}</Chip>
          </div>
          <button onClick={()=>{location.href=(window.OMAuth&&OMAuth.current())?'dashboard.html':'register.html';}} className="press glass rounded-2xl py-3 mt-4 text-[12px] font-bold text-mut hover:text-ink w-full">Reservá creando tu cuenta de socio ↓</button>
        </div>;})}
    </div>
  </section>;
}

/* ============ SORTEOS & PREMIOS ============ */
function Sorteos(){
  const db=useDB();
  return <section className="rise">
    <Eyebrow k="GANÁ PREMIOS" t="Sorteos & Premios"/>
    <div className="grid md:grid-cols-3 gap-4">
      {db.premios.map((pr,i)=>(
        <div key={i} className="glass rounded-glass p-5 flex flex-col lift shine" style={{border:`1px solid ${pr.accent}55`,boxShadow:`0 20px 50px -22px ${pr.accent}66`}}>
          <div className="flex items-center justify-between mb-3"><span className="font-mono text-[8px] tracking-[2px]" style={{color:pr.accent}}>{pr.kicker}</span><Chip c={pr.badgeColor}>{pr.badge}</Chip></div>
          <h3 className="font-disp text-[21px] leading-tight mb-4">{pr.titulo}</h3>
          <div className="rounded-2xl overflow-hidden grid place-items-center py-6 mb-4" style={{background:`radial-gradient(circle at 50% 40%,${pr.accent}22,rgba(0,0,0,.2))`}}>
            {pr.dorso?<Shirt360 front={pr.img} back={pr.dorso} s={132}/>:<img src={pr.img} alt={pr.titulo} className={`h-40 object-contain drop-shadow-[0_14px_26px_rgba(0,0,0,.6)] ${i%2?'float-yr':'float-y'}`}/>}
          </div>
          <b className="font-disp text-[20px] mt-auto">{pr.precio}</b>
          <button onClick={()=>{location.href=(window.OMAuth&&OMAuth.current())?'dashboard.html':'register.html';}} className="press glass rounded-2xl py-3 mt-3 text-[12px] font-bold text-mut hover:text-ink w-full">Participá creando tu cuenta ↓</button>
        </div>))}
    </div>
  </section>;
}

/* ============ ÚLTIMOS RESULTADOS ============ */
function Resultados(){
  const db=useDB();const r=db.resultados;const [mes,setMes]=useState(r.activo);
  return <section className="rise">
    <Eyebrow k="DATOS EN VIVO" t="Últimos Resultados"/>
    <div className="glass rounded-glass p-3 md:p-4 max-w-3xl mx-auto mb-6 flex items-center gap-2 overflow-x-auto no-scrollbar">
      <span className="font-mono text-[9px] tracking-[1px] text-mut flex items-center gap-2 flex-none px-2">🗓 TEMPORADA {r.anio}</span>
      {r.meses.map(([m,n])=>(
        <button key={m} onClick={()=>n&&setMes(m)} disabled={!n} className={`press flex-none font-mono text-[10px] tracking-[1px] px-3 py-2 rounded-xl border transition-colors ${mes===m?'text-white border-river bg-river/15':n?'text-mut border-white/10 hover:text-ink':'text-dim border-transparent opacity-40'}`}>{m} {n>0&&<b className="text-[8px] ml-0.5">{n}</b>}</button>))}
    </div>
    <div className="text-center font-disp text-[22px] mb-4">{r.mesLabel} <span className="text-mut text-[14px]">{r.anio}</span></div>
    <div className="grid md:grid-cols-2 gap-4 max-w-4xl mx-auto">
      {r.lista.map((m,i)=>(
        <div key={i} className="glass rounded-glass p-5">
          <div className="flex justify-between font-mono text-[8.5px] text-mut mb-3"><span>{m.comp}</span><span>{m.fecha}</span></div>
          <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3">
            <div className="flex flex-col items-center gap-2"><Crest k={m.crestL} name={m.local} logo={m.logoL} s={44}/><b className="font-disp text-[13px]">{m.local}</b></div>
            {m.gl!=null?<div className="text-center"><b className="font-disp text-[30px]">{m.gl} - {m.gv}</b><div className="mt-1"><Chip c={m.color}>{m.estado}</Chip></div></div>
              :<div className="text-center"><b className="font-disp text-[22px] text-river2">VS</b><div className="mt-1"><Chip c={m.color}>{m.estado}</Chip></div></div>}
            <div className="flex flex-col items-center gap-2"><Crest k={m.crestV} name={m.visita} logo={m.logoV} s={44}/><b className="font-disp text-[13px] text-center leading-tight">{m.visita}</b></div>
          </div>
        </div>))}
    </div>
  </section>;
}

/* ============ ESTADÍSTICAS · SUPERCLÁSICO ============ */
function Stats(){
  const db=useDB();const cl=db.clasico;const h=db.historial;const c=useCountdown(cl.fecha);
  return <section className="rise">
    <Eyebrow k="DATOS EN VIVO · API" t="Estadísticas River" sub="Plantilla, próximo superclásico e historial ante Boca"/>
    <div className="rounded-glass p-6 md:p-8 relative overflow-hidden glass-deep" style={{minHeight:280}}>
      <div className="absolute inset-0" style={{background:'radial-gradient(80% 80% at 50% 120%,rgba(224,30,47,.28),transparent 60%)'}}/>
      <div className="relative">
        <div className="flex justify-center mb-6"><Chip>● ✕ EL CLÁSICO DE CLÁSICOS</Chip></div>
        <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 max-w-2xl mx-auto mb-6">
          <div className="flex flex-col items-center gap-2"><Crest k="river" name="River" s={64}/><b className="font-disp text-[16px]">RIVER</b><small className="font-mono text-[8px] text-green-400">VISITANTE</small></div>
          <div className="text-center"><span className="font-disp text-[32px] text-river2">VS</span><div className="bg-black/40 rounded-xl px-3 py-1.5 mt-2 border border-white/10"><div className="font-mono text-[9px]">DOM 1 NOV</div><div className="font-mono text-[7px] text-mut">20:00 hs · Jornada 15</div></div></div>
          <div className="flex flex-col items-center gap-2"><Crest k="boca" name="Boca" s={64}/><b className="font-disp text-[16px]">BOCA</b><small className="font-mono text-[8px] text-[#2f72e0]">LOCAL · La Bombonera</small></div>
        </div>
        <CountBoxes c={c} accent="#ff2e3e"/>
        <div className="flex items-center justify-between max-w-2xl mx-auto mt-6 pt-5 border-t border-white/10">
          <div className="flex items-center gap-2"><span className="font-mono text-[8px] text-mut">RIVER</span><FormaBadges str={h.formaRiver} s={22}/></div>
          <span className="font-mono text-[8px] tracking-[1px] text-gold2">FORMA RECIENTE</span>
          <div className="flex items-center gap-2"><FormaBadges str={h.formaBoca} s={22}/><span className="font-mono text-[8px] text-mut">BOCA</span></div>
        </div>
      </div>
    </div>
  </section>;
}

/* ============ PLANTILLA 2026 ============ */
function Plantilla(){
  const db=useDB();const {blockOn}=useVis();const f=db.formacion;const h=db.historial;
  const Face=({p,gk})=>(<div className="flex flex-col items-center gap-1">
    <span className="w-12 h-12 rounded-full overflow-hidden grid place-items-center" style={{border:gk?'2px solid #ffcf3e':'2px solid rgba(255,255,255,.25)',background:gk?'radial-gradient(circle at 40% 30%,#3d3216,#1d1608)':'radial-gradient(circle at 40% 30%,#2a2a33,#111116)'}}>{p.foto?<img src={p.foto} alt={p.n} className="w-full h-full object-cover object-top"/>:<span className="font-disp text-[12px] text-white/70">{(p.n||'?')[0]}</span>}</span>
    <span className={`font-mono text-[8px] px-1.5 py-0.5 rounded ${gk?'bg-gold2 text-black font-bold':'bg-black/60 text-ink'}`}>{p.n}</span>
  </div>);
  const Row=({arr})=><div className="flex justify-around px-2 relative z-10">{(arr||[]).map((p,i)=><Face key={i} p={p}/>)}</div>;
  return <section className="grid lg:grid-cols-[1.2fr_1fr] gap-4 rise items-start">
    <div className="glass rounded-glass p-5">
      <div className="flex items-center justify-between mb-4"><span className="font-mono text-[9px] tracking-[2px] text-holo">👥 PLANTILLA 2026</span><span className="font-mono text-[11px] text-gold2 font-bold tracking-[1px]">{f.esquema}</span></div>
      <div className="rounded-2xl py-5 flex flex-col gap-6 relative overflow-hidden" style={{background:'linear-gradient(160deg,#0d3b1e,#08240f)',border:'1px solid rgba(255,255,255,.08)'}}>
        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 rounded-full border border-white/15"/>
        <div className="absolute inset-x-6 top-1/2 h-px bg-white/15"/>
        <Row arr={f.del}/><Row arr={f.med}/><Row arr={f.def}/>
        <div className="flex justify-center relative z-10"><Face p={f.arq} gk/></div>
      </div>
      <button onClick={()=>{location.href='dashboard.html';}} 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)'}}>Ver plantilla completa →</button>
    </div>
    <div className="flex flex-col gap-4">
      {blockOn('plantilla','historial')&&<div className="glass rounded-glass p-5">
        <span className="font-mono text-[9px] tracking-[2px] text-river2 block mb-4">📋 HISTORIAL SUPERCLÁSICOS</span>
        <div className="grid grid-cols-3 gap-2 mb-3">
          {[[h.ganoRiver,'GANÓ RIVER','#2fe07a'],[h.empates,'EMPATES','#e0a24e'],[h.ganoBoca,'GANÓ BOCA','#2f72e0']].map(([n,l,c],i)=>(
            <div key={i} className="bg-white/[.05] border border-white/[.08] rounded-2xl py-3 text-center"><b className="font-disp text-[26px] block leading-none" style={{color:c}}>{n}</b><small className="font-mono text-[7px] tracking-[1px] text-mut block mt-1.5">{l}</small></div>))}
        </div>
        <p className="font-mono text-[8px] text-dim mb-3">{h.total} clásicos oficiales · último: {h.ultimo}</p>
        <span className="font-mono text-[8px] tracking-[1px] text-mut block mb-2">ÚLTIMOS CRUCES</span>
        <div className="flex flex-col gap-1.5">
          {h.cruces.map(([f,s,r],i)=>{const[c,bg]=FORMA[r];return <div key={i} className="flex items-center justify-between bg-white/[.04] rounded-xl px-3 py-2"><span className="font-mono text-[10px] text-mut">{f}</span><b className="font-disp text-[14px]">{s}</b><span style={{width:20,height:20,borderRadius:6,display:'grid',placeItems:'center',fontFamily:'Oswald',fontWeight:700,fontSize:10,color:c,background:bg,border:'1px solid '+c}}>{r}</span></div>;})}
        </div>
      </div>}
      {blockOn('plantilla','ad')&&<div className="glass rounded-glass p-5 flex flex-col items-center gap-3">
        <span className="font-mono text-[8px] tracking-[2px] text-river2">PUBLICIDAD DE SOCIO EXCLUSIVO</span>
        <div className="flex items-center gap-4 py-3"><Crest k="river" name="River" s={44}/><img src="assets/betano.png" alt="Betano" className="h-8 object-contain"/></div>
      </div>}
    </div>
  </section>;
}

/* ============ SPONSORS ============ */
function Sponsors(){
  const db=useDB();const {blockOn}=useVis();const TC={ORO:'#ffcf3e',PLATA:'#c0c0cb',BRONCE:'#d9915a'};
  return <section className="rise">
    <Eyebrow k="COMERCIOS & MARCAS" t="Nuestros Sponsors" sub="Las marcas que viajan con la banda"/>
    {blockOn('sponsors','gob')&&<div className="rounded-glass overflow-hidden mb-4 relative" style={{background:'#fff'}}>
      <span className="absolute left-4 top-3 font-mono text-[8px] tracking-[2px] text-black/40">APOYA</span>
      <div className="flex items-center justify-center gap-3 py-8"><img src="assets/gobierno.gif" alt="Gobierno de Corrientes" className="h-12 object-contain"/></div>
    </div>}
    <div className="marquee-wrap overflow-hidden -mx-1 px-1">
      <div className="marquee-track gap-3">
        {[...(db.sponsors_locales||[]),...(db.sponsors_locales||[])].map((s,i)=>(
          <div key={i} className="glass rounded-glass flex-none w-[190px] h-24 grid place-items-center px-4 mr-3" style={{border:`1px solid ${TC[s.tier]}44`}}>
            <div className="text-center"><div className="font-mono text-[8px] tracking-[2px] mb-1.5" style={{color:TC[s.tier]}}>{s.tier}</div>{s.logo?<img src={s.logo} className="h-6 mx-auto object-contain"/>:<span className="font-disp text-[15px]">{s.nombre}</span>}</div>
          </div>))}
      </div>
    </div>
    <div className="flex justify-center mt-4"><Chip>★ NUESTROS SPONSORS OFICIALES</Chip></div>
  </section>;
}

/* ============ PRODE ============ */
function Prode(){
  const db=useDB();const {blockOn}=useVis();const pr=db.prode;const pt=db.partido;const [vid,setVid]=useState(false);
  return <section className="rise">
    <Eyebrow k={pr.kicker} t={pr.titulo} sub={<>Acertá y ganá hasta <b className="text-ink">{pr.descuento}</b> en tu próximo viaje</>}/>
    <div className="grid md:grid-cols-2 gap-4">
      <div className="glass rounded-glass p-6 flex flex-col">
        <div className="flex items-center justify-between pb-4 mb-5 border-b border-dashed border-white/15">
          <div className="flex items-center gap-2"><Crest k="river" name="River" s={30}/><b className="font-disp text-[13px]">River vs {pt.visitante}</b></div>
          <span className="font-mono text-[8px] text-river2">● PRÓXIMO · EN VIVO API</span>
        </div>
        <div className="flex-1 grid place-items-center text-center py-4">
          <div>
            <span className="w-14 h-14 rounded-full grid place-items-center text-gold2 mx-auto mb-4" style={{background:'rgba(212,164,55,.12)',border:'1px solid rgba(212,164,55,.35)'}}><Ic n="lock" s={22}/></span>
            <h3 className="font-disp text-[22px] mb-2">Registrate para jugar el Prode</h3>
            <p className="text-mut text-[12.5px] max-w-xs mx-auto mb-5">Es una función exclusiva de socios. Creá tu cuenta y elegí un plan Plata, Oro o VIP para jugar cada partido y ganar descuentos reales.</p>
            <button onClick={()=>location.href='register.html'} className="press rounded-2xl py-3 px-6 text-[13px] font-bold text-white" style={{background:'linear-gradient(160deg,#ff2e3e,#8d0917)',boxShadow:'0 12px 30px -8px rgba(224,30,47,.5)'}}>Registrate para jugar →</button>
          </div>
        </div>
      </div>
      {blockOn('prode','video')&&<div className="glass rounded-glass p-5 flex flex-col">
        <div className="flex items-center gap-2 mb-4"><span className="w-8 h-8 rounded-xl grid place-items-center text-river2" style={{background:'rgba(224,30,47,.12)',border:'1px solid rgba(224,30,47,.3)'}}><Ic n="yt" s={16}/></span><div><b className="font-disp text-[14px] tracking-[1px]">LO ÚLTIMO DE LA BANDA</b><div className="font-mono text-[7px] text-river2">● VIDEO DESTACADO</div></div></div>
        <button onClick={()=>setVid(true)} className="press relative rounded-2xl overflow-hidden flex-1 min-h-[260px]" style={{background:'#111'}}>
          <img src="assets/hero-jugador.jpg" alt="" className="absolute inset-0 w-full h-full object-cover"/>
          <div className="absolute inset-0" style={{background:'linear-gradient(transparent 40%,rgba(0,0,0,.85))'}}/>
          <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-full grid place-items-center text-white" style={{background:'rgba(224,30,47,.9)',boxShadow:'0 8px 30px rgba(224,30,47,.6)'}}><Ic n="play" s={26}/></span>
          <b className="absolute bottom-4 left-4 right-4 font-disp text-[16px] text-left leading-tight">{pr.video.titulo}</b>
        </button>
      </div>}
    </div>
    {vid&&<VideoModal reel={pr.video} onClose={()=>setVid(false)}/>}
  </section>;
}

/* ============ REELS ============ */
function ytId(u){const m=(u||'').match(/(?:youtu\.be\/|v=|shorts\/|embed\/)([\w-]{11})/);return m?m[1]:null;}
function ttId(u){const m=(u||'').match(/video\/(\d+)/);return m?m[1]:null;}
function VideoModal({reel,onClose}){
  const yt=reel.plataforma==='YOUTUBE'&&ytId(reel.url);const tt=reel.plataforma==='TIKTOK'&&ttId(reel.url);
  return <div className="fixed inset-0 z-[92] flex items-center justify-center p-4" onClick={onClose}>
    <div className="absolute inset-0 bg-black/85 backdrop-blur-md"/>
    <div onClick={e=>e.stopPropagation()} className="glass-deep relative rounded-glass p-3 w-full max-w-[420px]" style={{animation:'sheetUp .35s cubic-bezier(.22,1,.36,1) both'}}>
      <div className="flex items-center justify-between px-2 py-1.5 mb-2"><b className="font-disp text-[14px] truncate pr-3">{reel.titulo}</b><button onClick={onClose} className="press w-8 h-8 rounded-full glass grid place-items-center text-mut hover:text-ink flex-none">✕</button></div>
      <div className="rounded-[18px] overflow-hidden bg-black" style={{aspectRatio:yt?'16/9':'9/16'}}>
        {yt?<iframe src={`https://www.youtube.com/embed/${yt}?autoplay=1&rel=0`} title={reel.titulo} allow="autoplay; encrypted-media; picture-in-picture" allowFullScreen className="w-full h-full border-0"/>
         :tt?<iframe src={`https://www.tiktok.com/embed/v2/${tt}`} title={reel.titulo} allowFullScreen className="w-full h-full border-0"/>
         :<a href={reel.url} target="_blank" className="w-full h-full grid place-items-center text-mut text-[13px]">Abrir video ↗</a>}
      </div>
    </div>
  </div>;
}
function Reels(){
  const db=useDB();const [open,setOpen]=useState(null);const reels=db.reels||[];
  return <section className="rise">
    <Eyebrow k="MULTIMEDIA EXCLUSIVA · FILIAL CORRIENTES" t="Reels & TikTok" sub="Los mejores momentos de la banda · deslizá o tocá para reproducir"/>
    <swiper-container className="reels-swiper" effect="coverflow" grab-cursor="true" centered-slides="true" slides-per-view="auto" navigation="true" coverflow-effect-rotate="0" coverflow-effect-depth="220" coverflow-effect-modifier="2.2" coverflow-effect-stretch="0" coverflow-effect-slide-shadows="false">
      {reels.map((r,i)=>{const yt=r.plataforma==='YOUTUBE'&&ytId(r.url);const thumb=yt?`https://i.ytimg.com/vi/${yt}/hqdefault.jpg`:null;
        return <swiper-slide key={i} style={{width:'230px'}}>
          <button onClick={()=>setOpen(i)} className="press block w-full">
            <div className="relative mx-auto w-[220px] rounded-[32px] p-2.5 bg-black border border-white/15" style={{boxShadow:'0 30px 60px -20px rgba(0,0,0,.85)'}}>
              <div className="absolute top-2.5 left-1/2 -translate-x-1/2 w-16 h-4 bg-black rounded-b-2xl z-20"/>
              <div className="relative rounded-[24px] overflow-hidden h-[372px]" style={{background:'linear-gradient(165deg,#2a2a33,#111116)'}}>
                {thumb?<img src={thumb} alt="" className="absolute inset-0 w-full h-full object-cover"/>:<span className="absolute inset-0 grid place-items-center text-[34px] opacity-30">▶</span>}
                <div className="absolute inset-0" style={{background:'linear-gradient(transparent 45%,rgba(0,0,0,.9))'}}/>
                <span className="absolute top-3 left-3 font-mono text-[7px] tracking-[1px] px-2 py-1 rounded-full" style={{background:r.plataforma==='TIKTOK'?'rgba(34,211,238,.2)':'rgba(224,30,47,.25)',color:r.plataforma==='TIKTOK'?'#22d3ee':'#ff6b78'}}>{r.plataforma}</span>
                <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-14 h-14 rounded-full grid place-items-center text-white" style={{background:'rgba(224,30,47,.92)',boxShadow:'0 8px 30px rgba(224,30,47,.6)'}}><Ic n="play" s={24}/></span>
                <b className="absolute bottom-3 left-3 right-3 font-disp text-[13px] leading-tight text-left">{r.titulo}</b>
              </div>
            </div>
          </button>
        </swiper-slide>;})}
    </swiper-container>
    {open!==null&&reels[open]&&<VideoModal reel={reels[open]} onClose={()=>setOpen(null)}/>}
  </section>;
}

/* ============ TESTIMONIOS ============ */
function Testimonios(){
  const db=useDB();
  const ini=n=>n.split(/\s+/).slice(0,2).map(w=>w[0]).join('').toUpperCase();
  return <section className="rise">
    <Eyebrow k="EXPERIENCIAS REALES" t="La Banda Habla" sub="Hinchas de River desde todo Corrientes"/>
    <div className="grid md:grid-cols-3 gap-4">
      {(db.testimonios||[]).map((t,i)=>(
        <div key={i} className="glass rounded-glass p-5 flex flex-col lift shine">
          <span className="font-disp text-[30px] leading-none text-river2 mb-2">“</span>
          <div className="flex items-center gap-2 mb-1"><span className="font-mono text-[8px] tracking-[1px] text-gold2">🏆 {t.tag}</span></div>
          <div className="text-gold2 text-[11px] mb-2">★★★★★</div>
          <p className="text-[13px] text-mut italic leading-relaxed flex-1">{t.texto}</p>
          <div className="flex items-center gap-3 mt-4 pt-4 border-t border-white/10">
            <span className="w-10 h-10 rounded-full grid place-items-center font-disp font-bold text-[13px] text-white flex-none" style={{background:`linear-gradient(150deg,${t.color},rgba(0,0,0,.35))`}}>{ini(t.nombre)}</span>
            <div><b className="text-[13px] block leading-none">{t.nombre}</b><small className="font-mono text-[8px] text-dim tracking-[1px]">{t.lugar.toUpperCase()}</small></div>
          </div>
        </div>))}
    </div>
  </section>;
}

/* ============ CONTACTO ============ */
function Contacto(){
  const db=useDB();const [subj,setSubj]=useState('Reservar un viaje');const [nombre,setNombre]=useState('');const [msg,setMsg]=useState('');
  const wa=db.config.whatsapp.replace(/[^0-9]/g,'');
  const send=()=>{const txt=encodeURIComponent(`Hola Orgullo Millonario 👋 Asunto: ${subj}${nombre?'. Soy '+nombre:''}${msg?'. '+msg:'.'}`);window.open(`https://wa.me/${wa}?text=${txt}`,'_blank');};
  const subjects=[['Reservar un viaje','ticket','#ff2e3e'],['Ser sponsor','home','#ffcf3e'],['Sorteos','home','#8b5cf6'],['Consulta general','chat','#2fe07a']];
  const socials=[['ig','#ee2a7b','https://instagram.com/'+db.config.instagram],['wa','#25d366','https://wa.me/'+wa],['yt','#ff3b30','#'],['tk','#22d3ee','#'],['x','#f6f1f2','#']];
  return <section className="glass rounded-glass p-6 md:p-8 rise">
    <div className="grid md:grid-cols-2 gap-8">
      <div>
        <div className="font-mono text-[10px] tracking-[3px] text-river2 mb-2">HABLEMOS</div>
        <h2 className="font-disp font-700 text-[40px] md:text-[52px] leading-none mb-4">CONTACTO</h2>
        <p className="text-mut text-[14px] max-w-sm mb-6">¿Querés reservar un viaje, ser sponsor o tenés una consulta? Respondemos en menos de 24 hs.</p>
        <div className="flex gap-2.5 mb-6">{socials.map(([n,c,href])=><a key={n} href={href} target="_blank" className="social-ico w-11 h-11 rounded-full glass grid place-items-center" style={{color:c}}><Ic n={n} s={17}/></a>)}</div>
        <a href="terminos.html" className="font-mono text-[11px] text-mut underline hover:text-ink">Términos y Condiciones de uso</a>
      </div>
      <div>
        <span className="font-mono text-[9px] tracking-[2px] text-mut block mb-2">¿SOBRE QUÉ NOS ESCRIBÍS?</span>
        <div className="grid grid-cols-2 gap-2 mb-3">
          {subjects.map(([s,ic,c])=>(
            <button key={s} onClick={()=>setSubj(s)} className={`press rounded-2xl px-3 py-3 flex items-center gap-2.5 border transition-all ${subj===s?'text-white':'text-mut'}`} style={{borderColor:subj===s?c:'rgba(255,255,255,.1)',background:subj===s?c+'1e':'rgba(255,255,255,.04)'}}>
              <span style={{color:c}}><Ic n={ic} s={16}/></span><b className="text-[12.5px] flex-1 text-left">{s}</b>{subj===s&&<span style={{color:c}}>✓</span>}
            </button>))}
        </div>
        <input value={nombre} onChange={e=>setNombre(e.target.value)} placeholder="Tu nombre" className="w-full bg-white/[.06] border border-white/12 rounded-2xl px-4 py-3 text-[13.5px] outline-none focus:border-river/60 mb-3 placeholder:text-dim"/>
        <textarea value={msg} onChange={e=>setMsg(e.target.value)} placeholder="Contanos en qué podemos ayudarte…" rows="4" className="w-full bg-white/[.06] border border-white/12 rounded-2xl px-4 py-3 text-[13.5px] outline-none focus:border-river/60 mb-3 resize-none placeholder:text-dim"/>
        <button onClick={send} className="press rounded-2xl py-4 w-full text-[15px] 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)'}}><Ic n="wa" s={18}/> Enviar por WhatsApp →</button>
      </div>
    </div>
  </section>;
}

/* ============ NAV / APP ============ */
const SECMAP={hero:Hero,centro:Centro,prob:Prob,calendario:Calendario,viajes:Viajes,sorteos:Sorteos,resultados:Resultados,stats:Stats,sponsors:Sponsors,prode:Prode,plantilla:Plantilla,reels:Reels,testimonios:Testimonios,contacto:Contacto};
const NAV=[['hero','home','Inicio'],['calendario','cal','Calendario'],['viajes','ticket','Viajes'],['testimonios','chat','Foro'],['cuenta','user','Mi Cuenta']];
function App(){
  const db=useDB();const toast=useContext(ToastCtx);
  const light=db.config.tema==='light';
  useEffect(()=>{document.body.classList.toggle('theme-light',light);},[light]);
  const [top,setTop]=useState(false);
  useEffect(()=>{const f=()=>setTop(window.scrollY>600);window.addEventListener('scroll',f);return()=>window.removeEventListener('scroll',f);},[]);
  const go=id=>{if(id==='cuenta'){location.href=(window.OMAuth&&OMAuth.current())?'dashboard.html':'login.html';return;}const el=document.getElementById('s-'+id);if(el)window.scrollTo({top:el.getBoundingClientRect().top+window.scrollY-96,behavior:'smooth'});};
  const sections=(db.config.sections||[]).filter(x=>SECMAP[x.id]&&(!db.config.modular||x.on));
  return <>
    <div className="blob w-[560px] h-[560px] -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-[460px] h-[460px] top-1/3 -right-32" style={{background:'radial-gradient(circle,#3b1d6e,transparent 70%)',opacity:.42,animation:'drift2 22s ease-in-out infinite'}}/>
    <div className="blob w-[400px] h-[400px] bottom-0 left-1/3" style={{background:'radial-gradient(circle,#5a4008,transparent 70%)',opacity:.32,animation:'drift1 26s ease-in-out infinite'}}/>

    <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-6 py-2.5 max-w-[1280px] 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 MILLONARIO</b><small className="font-mono text-[7px] tracking-[2px] text-river2">FILIAL RIVER · CORRIENTES</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">
          <button onClick={()=>{OMDB.set('config.tema',light?'dark':'light');toast(light?'Tema oscuro':'Tema claro');}} className="press w-9 h-9 rounded-full glass grid place-items-center text-gold2" title="Cambiar tema">{light?'☾':'☀'}</button>
          <button onClick={()=>go('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)'}}><Ic n="user" s={13}/>Mi Cuenta</button>
        </div>
      </div>
    </header>

    <main className="relative z-10 px-3 md:px-6 py-6 pb-28 md:pb-12 max-w-[1280px] mx-auto flex flex-col gap-14 md:gap-20">
      {sections.map(x=>{const C=SECMAP[x.id];return <div key={x.id} id={'s-'+x.id}><C/></div>;})}
      <footer className="text-center font-mono text-[9px] tracking-[1px] text-dim pt-4 flex flex-col gap-2">
        <div className="flex items-center justify-center gap-4"><span className="flex items-center gap-1.5"><i className="w-[6px] h-[6px] rounded-full bg-green-400"/>{db.kpis.socios} EN VIVO</span><span>👁 {db.kpis.visitas} VISITAS</span><span>HOY {db.kpis.visitas_hoy}</span></div>
        <div>© 2026 Orgullo Millonario · Filial River Corrientes · No afiliado a C.A. River Plate · <a href="panel.html" className="text-river2">PANEL</a></div>
        <div>Creador: <span className="text-river2 font-bold">Martínez Darío</span></div>
      </footer>
    </main>

    <button onClick={()=>window.scrollTo({top:0,behavior:'smooth'})} className={`press fixed bottom-20 md:bottom-6 right-4 z-[70] w-11 h-11 rounded-full glass-deep grid place-items-center text-river2 transition-all ${top?'opacity-100':'opacity-0 pointer-events-none'}`}><Ic n="up" s={18}/></button>

    <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-2.5 py-1.5 rounded-2xl text-mut hover:text-ink"><Ic n={ic} s={18}/><small className="font-mono text-[7px] tracking-[.5px]">{l}</small></button>)}
      </div>
    </nav>
  </>;
}

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