Fecha	Jornada	Local	Visitante	Sede	Estado
{m.date} · {m.time}	{m.comp}	{m.home}	{m.away}	{m.venue}	Programado

setEditing(emptyOf('news'))}> Nueva noticia}/>

{data.news.map(n => ( ))}

	Título	Categoría	Fecha	Autor
	{n.title \|\| '(sin título)'} {n.excerpt.slice(0, 80)}{n.excerpt.length > 80 ? '…' : ''}	{n.cat}	{n.date}	{n.author}

{editing && ( x.id === editing.id) ? 'Nueva noticia' : 'Editar noticia'} onClose={() => setEditing(null)} onSave={() => save(editing)}> setEditing({...editing, title: e.target.value})}/>

setEditing({...editing, date: e.target.value})}/> setEditing({...editing, readMin: +e.target.value})}/>

setEditing({...editing, author: e.target.value})}/>

setEditing({...editing, excerpt: e.target.value})}/></Field>
          <Field label="Color de portada (hue)">
            <input type="range" min="0" max="360" value={editing.hue} onChange={e => setEditing({...editing, hue: +e.target.value})}/>
            <div style={{height:80, borderRadius:8, marginTop:8, background:`linear-gradient(135deg, hsl(${editing.hue} 70% 50%), hsl(${(editing.hue+200)%360} 60% 20%))`}}/>
          </Field>
        </Drawer>
      )}
    </div>
  );
}

// ---------- Fixtures manager ----------
function FixturesManager({ data, setData }) {
  const [editing, setEditing] = uS(null);
  const [editIdx, setEditIdx] = uS(null);
  const save = (f) => {
    const list = [...data.fixtures];
    if (editIdx == null) list.unshift(f); else list[editIdx] = f;
    setData({ ...data, fixtures: list });
    setEditing(null); setEditIdx(null);
  };
  const remove = (i) => {
    if (!confirm('¿Eliminar este partido?')) return;
    const list = [...data.fixtures]; list.splice(i, 1);
    setData({ ...data, fixtures: list });
  };
  return (
    <div className="admin-content">
      <Topbar title="Partidos" sub="Gestión de fixtures y resultados"
        actions={<button className="btn btn-primary btn-sm" onClick={() => { setEditing(emptyOf('fixture')); setEditIdx(null); }}><AdminIcon name="plus" size={14}/> Nuevo partido</button>}/>
      <div className="admin-card">
        <table className="admin-table">
          <thead><tr><th>Fecha</th><th>Jornada</th><th>Local</th><th>Visitante</th><th>Sede</th><th style={{width:120}}></th></tr></thead>
          <tbody>
            {data.fixtures.map((m, i) => (
              <tr key={i}>
                <td style={{fontVariantNumeric:'tabular-nums'}}>{m.date} · {m.time}</td>
                <td>{m.comp}</td>
                <td style={{fontWeight: m.home === 'Puntarenas FC' ? 600 : 400}}>{m.home}</td>
                <td style={{fontWeight: m.away === 'Puntarenas FC' ? 600 : 400}}>{m.away}</td>
                <td>{m.venue}</td>
                <td>
                  <div style={{display:'flex', gap:6, justifyContent:'flex-end'}}>
                    <button className="admin-icon-btn sm" onClick={() => { setEditing({...m}); setEditIdx(i); }}><AdminIcon name="edit" size={14}/></button>
                    <button className="admin-icon-btn sm danger" onClick={() => remove(i)}><AdminIcon name="trash" size={14}/></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {editing && (
        <Drawer title={editIdx == null ? 'Nuevo partido' : 'Editar partido'} onClose={() => { setEditing(null); setEditIdx(null); }} onSave={() => save(editing)}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <Field label="Fecha"><input type="date" className="a-input" value={editing.date} onChange={e => setEditing({...editing, date: e.target.value})}/></Field>
            <Field label="Hora"><input type="time" className="a-input" value={editing.time} onChange={e => setEditing({...editing, time: e.target.value})}/></Field>
          </div>
          <Field label="Jornada / Competición"><input className="a-input" value={editing.comp} onChange={e => setEditing({...editing, comp: e.target.value})}/></Field>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <Field label="Local"><input className="a-input" value={editing.home} onChange={e => setEditing({...editing, home: e.target.value})}/></Field>
            <Field label="Visitante"><input className="a-input" value={editing.away} onChange={e => setEditing({...editing, away: e.target.value})}/></Field>
          </div>
          <Field label="Sede / Estadio"><input className="a-input" value={editing.venue} onChange={e => setEditing({...editing, venue: e.target.value})}/></Field>
        </Drawer>
      )}
    </div>
  );
}

// ---------- Squad manager ----------
function SquadManager({ data, setData }) {
  const [editing, setEditing] = uS(null);
  const save = (p) => {
    const exists = data.squad.find(x => x.id === p.id);
    const squad = exists ? data.squad.map(x => x.id === p.id ? p : x) : [...data.squad, p];
    setData({ ...data, squad });
    setEditing(null);
  };
  const remove = (id) => {
    if (!confirm('¿Eliminar jugador?')) return;
    setData({ ...data, squad: data.squad.filter(x => x.id !== id) });
  };
  return (
    <div className="admin-content">
      <Topbar title="Plantel" sub="Roster completo del primer equipo"
        actions={<button className="btn btn-primary btn-sm" onClick={() => setEditing(emptyOf('player'))}><AdminIcon name="plus" size={14}/> Nuevo jugador</button>}/>
      <div className="admin-card">
        <table className="admin-table">
          <thead><tr><th style={{width:50}}>#</th><th>Nombre</th><th>Pos.</th><th>País</th><th>Edad</th><th>PJ</th><th>G</th><th>A</th><th style={{width:120}}></th></tr></thead>
          <tbody>
            {data.squad.map(p => (
              <tr key={p.id}>
                <td style={{fontFamily:'var(--font-display)', fontSize:20}}>{p.no}</td>
                <td>
                  <div style={{display:'flex', alignItems:'center', gap:10}}>
                    <div style={{width:28, height:28, borderRadius:'50%', background:'var(--surface-2)', display:'grid', placeItems:'center', fontFamily:'var(--font-condensed)', fontWeight:600, fontSize:11}}>
                      {p.name.split(' ').map(w => w[0]).slice(0,2).join('')}
                    </div>
                    <div>
                      <div style={{fontWeight:600}}>{p.name || '(sin nombre)'}</div>
                      {p.captain && <span style={{fontSize:11, color:'var(--accent)', fontFamily:'var(--font-condensed)', letterSpacing:'0.14em'}}>CAPITÁN</span>}
                    </div>
                  </div>
                </td>
                <td><span className="admin-pill">{p.pos}</span></td>
                <td>{p.country}</td>
                <td>{p.age}</td>
                <td>{p.apps}</td><td>{p.goals}</td><td>{p.assists}</td>
                <td>
                  <div style={{display:'flex', gap:6, justifyContent:'flex-end'}}>
                    <button className="admin-icon-btn sm" onClick={() => setEditing({...p})}><AdminIcon name="edit" size={14}/></button>
                    <button className="admin-icon-btn sm danger" onClick={() => remove(p.id)}><AdminIcon name="trash" size={14}/></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {editing && (
        <Drawer title={data.squad.find(x => x.id === editing.id) ? 'Editar jugador' : 'Nuevo jugador'} onClose={() => setEditing(null)} onSave={() => save(editing)}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <Field label="Dorsal"><input type="number" className="a-input" value={editing.no} onChange={e => setEditing({...editing, no: +e.target.value})}/></Field>
            <Field label="Posición">
              <select className="a-input" value={editing.pos} onChange={e => setEditing({...editing, pos: e.target.value})}>
                <option value="POR">Portero</option>
                <option value="DEF">Defensa</option>
                <option value="MED">Mediocampista</option>
                <option value="DEL">Delantero</option>
              </select>
            </Field>
          </div>
          <Field label="Nombre completo"><input className="a-input" value={editing.name} onChange={e => setEditing({...editing, name: e.target.value})}/></Field>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <Field label="País (código)"><input className="a-input" maxLength={3} value={editing.country} onChange={e => setEditing({...editing, country: e.target.value.toUpperCase()})}/></Field>
            <Field label="Edad"><input type="number" className="a-input" value={editing.age} onChange={e => setEditing({...editing, age: +e.target.value})}/></Field>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12}}>
            <Field label="Partidos"><input type="number" className="a-input" value={editing.apps} onChange={e => setEditing({...editing, apps: +e.target.value})}/></Field>
            <Field label="Goles"><input type="number" className="a-input" value={editing.goals} onChange={e => setEditing({...editing, goals: +e.target.value})}/></Field>
            <Field label="Asistencias"><input type="number" className="a-input" value={editing.assists} onChange={e => setEditing({...editing, assists: +e.target.value})}/></Field>
          </div>
          <Field label="Capitán">
            <label style={{display:'inline-flex', alignItems:'center', gap:8, fontSize:14}}>
              <input type="checkbox" checked={editing.captain} onChange={e => setEditing({...editing, captain: e.target.checked})}/>
              Designar como capitán
            </label>
          </Field>
        </Drawer>
      )}
    </div>
  );
}

// ---------- Standings manager ----------
function StandingsManager({ data, setData }) {
  const set = (i, key, val) => {
    const s = [...data.standings];
    s[i] = { ...s[i], [key]: val };
    setData({ ...data, standings: s });
  };
  return (
    <div className="admin-content">
      <Topbar title="Tabla de posiciones" sub="Editá directamente los valores · se actualiza automáticamente"/>
      <div className="admin-card">
        <table className="admin-table admin-table-edit">
          <thead><tr><th style={{width:40}}>Pos</th><th>Equipo</th><th>PJ</th><th>G</th><th>E</th><th>P</th><th>GF</th><th>GC</th><th>Pts</th></tr></thead>
          <tbody>
            {data.standings.map((r, i) => (
              <tr key={i} className={r.team === 'Puntarenas FC' ? 'is-us' : ''}>
                <td style={{fontFamily:'var(--font-display)', fontSize:20}}>{r.pos}</td>
                <td><input className="a-input a-input-flat" value={r.team} onChange={e => set(i, 'team', e.target.value)}/></td>
                {['P','W','D','L','GF','GA','Pts'].map(k => (
                  <td key={k}><input type="number" className="a-input a-input-flat num" value={r[k]} onChange={e => set(i, k, +e.target.value)} style={{width:52, textAlign:'right'}}/></td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ---------- Hero manager ----------
function HeroManager({ data, setData }) {
  const m = data.nextMatch;
  const upd = (path, val) => {
    const next = { ...m };
    const parts = path.split('.');
    let cur = next; for (let i = 0; i < parts.length - 1; i++) { cur[parts[i]] = { ...cur[parts[i]] }; cur = cur[parts[i]]; }
    cur[parts[parts.length - 1]] = val;
    setData({ ...data, nextMatch: next });
  };
  return (
    <div className="admin-content">
      <Topbar title="Hero · Portada" sub="Configuración del próximo partido destacado en el home"/>
      <div className="admin-grid-2">
        <div className="admin-card">
          <div className="admin-card__head"><h3>Datos del partido</h3></div>
          <Field label="Competición"><input className="a-input" value={m.competition} onChange={e => upd('competition', e.target.value)}/></Field>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <Field label="Fecha y hora"><input type="datetime-local" className="a-input" value={m.date.slice(0,16)} onChange={e => upd('date', e.target.value + ':00-06:00')}/></Field>
            <Field label="Estadio"><input className="a-input" value={m.venue} onChange={e => upd('venue', e.target.value)}/></Field>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <Field label="Local">
              <input className="a-input" placeholder="Nombre" value={m.home.name} onChange={e => upd('home.name', e.target.value)}/>
              <input className="a-input" placeholder="Código (3)" maxLength={3} style={{marginTop:8}} value={m.home.code} onChange={e => upd('home.code', e.target.value.toUpperCase())}/>
            </Field>
            <Field label="Visitante">
              <input className="a-input" placeholder="Nombre" value={m.away.name} onChange={e => upd('away.name', e.target.value)}/>
              <input className="a-input" placeholder="Código (3)" maxLength={3} style={{marginTop:8}} value={m.away.code} onChange={e => upd('away.code', e.target.value.toUpperCase())}/>
              <input type="color" style={{marginTop:8, height:36, width:'100%', border:'1px solid var(--line-strong)', borderRadius:8}} value={m.away.tri} onChange={e => upd('away.tri', e.target.value)}/>
            </Field>
          </div>
          <Field label="Transmisión"><input className="a-input" value={m.broadcast.join(', ')} onChange={e => upd('broadcast', e.target.value.split(',').map(s => s.trim()))}/></Field>
          <Field label="URL de boletos"><input className="a-input" value={m.ticketsUrl} onChange={e => upd('ticketsUrl', e.target.value)}/></Field>
        </div>
        <div className="admin-card">
          <div className="admin-card__head"><h3>Vista previa</h3><span className="admin-pill">Hero</span></div>
          <div className="hero-preview">
            <div className="pill pill-accent">Próximo partido</div>
            <div style={{fontFamily:'var(--font-condensed)', fontSize:12, letterSpacing:'0.18em', textTransform:'uppercase', opacity:.7, marginTop:10}}>{m.competition}</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr auto 1fr', gap:12, alignItems:'center', margin:'14px 0'}}>
              <div style={{display:'flex', alignItems:'center', gap:10, justifyContent:'flex-end'}}>
                <span style={{fontFamily:'var(--font-display)', fontSize:24}}>{m.home.name}</span>
                <div className="match-crest" style={{background:'#F37021', width:36, height:36, fontSize:12}}>{m.home.code}</div>
              </div>
              <div style={{fontFamily:'var(--font-display)', fontSize:20, color:'var(--accent)'}}>vs</div>
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <div className="match-crest" style={{background:m.away.tri, width:36, height:36, fontSize:12}}>{m.away.code}</div>
                <span style={{fontFamily:'var(--font-display)', fontSize:24}}>{m.away.name}</span>
              </div>
            </div>
            <div style={{display:'flex', gap:16, fontSize:12, fontFamily:'var(--font-condensed)', letterSpacing:'0.14em', textTransform:'uppercase', opacity:.85}}>
              <span>{new Date(m.date).toLocaleDateString('es-CR',{day:'numeric',month:'short'})}</span>
              <span>{m.venue}</span>
              <span>{m.broadcast.join(' / ')}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Tickets manager ----------
function TicketsManager() {
  const [items, setItems] = uS(() => JSON.parse(localStorage.getItem('pfc_tickets') || 'null') || [
    { id: 't1', name: 'Sombra Norte', price: 8000, cap: 1200, sold: 980, status: 'active' },
    { id: 't2', name: 'Sol Sur',       price: 5000, cap: 1400, sold: 612, status: 'active' },
    { id: 't3', name: 'Palco Oeste',   price: 18000, cap: 280, sold: 210, status: 'active' },
    { id: 't4', name: 'Visitante',     price: 6000, cap: 600, sold: 0,   status: 'paused' },
  ]);
  uE(() => localStorage.setItem('pfc_tickets', JSON.stringify(items)), [items]);

return (
    <div className="admin-content">
      <Topbar title="Boletería" sub="PFC vs Saprissa · Sáb 2 May · Estadio Lito Pérez"
        actions={<button className="btn btn-primary btn-sm"><AdminIcon name="plus" size={14}/> Nuevo sector</button>}/>

<div className="admin-grid-4" style={{marginBottom:24}}>
        <StatCard label="Boletos vendidos" value={items.reduce((a,b) => a+b.sold, 0).toLocaleString()} delta="+124 hoy" icon="ticket" tone="accent"/>
        <StatCard label="Ingresos" value={`₡${(items.reduce((a,b) => a+b.sold*b.price, 0) / 1e6).toFixed(1)}M`} delta="Clausura J17" icon="chart" tone="ocean"/>
        <StatCard label="Aforo total" value={items.reduce((a,b) => a+b.cap, 0).toLocaleString()} delta="4,105 máximo" icon="trophy" tone="dark"/>
        <StatCard label="% Ocupación" value={`${Math.round(items.reduce((a,b) => a+b.sold, 0) / items.reduce((a,b) => a+b.cap, 0) * 100)}%`} delta="Estadio Lito Pérez" icon="ball" tone="accent"/>
      </div>

<div className="admin-card">
        <div className="admin-card__head"><h3>Sectores</h3></div>
        <table className="admin-table">
          <thead><tr><th>Sector</th><th>Precio</th><th>Aforo</th><th>Vendidos</th><th>Ocupación</th><th>Estado</th><th></th></tr></thead>
          <tbody>
            {items.map(t => (
              <tr key={t.id}>
                <td style={{fontWeight:600}}>{t.name}</td>
                <td className="num">₡{t.price.toLocaleString()}</td>
                <td className="num">{t.cap}</td>
                <td className="num">{t.sold}</td>
                <td>
                  <div className="progress"><div style={{width: `${(t.sold/t.cap)*100}%`}}/></div>
                </td>
                <td><span className={`admin-pill ${t.status === 'active' ? 'pill-green' : 'pill-muted'}`}>{t.status === 'active' ? 'Activo' : 'Pausado'}</span></td>
                <td style={{textAlign:'right'}}>
                  <button className="admin-icon-btn sm"><AdminIcon name="edit" size={14}/></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ---------- Shop manager ----------
function ShopManager() {
  const [products, setProducts] = uS(() => JSON.parse(localStorage.getItem('pfc_shop') || 'null') || [
    { id: 's1', name: 'Camiseta Local 2026', price: 42000, stock: 124, category: 'Indumentaria', featured: true },
    { id: 's2', name: 'Camiseta Visita 2026', price: 42000, stock: 88, category: 'Indumentaria', featured: true },
    { id: 's3', name: 'Bufanda Tiburones', price: 8500, stock: 220, category: 'Accesorios', featured: false },
    { id: 's4', name: 'Gorra PFC', price: 12000, stock: 156, category: 'Accesorios', featured: false },
    { id: 's5', name: 'Pin Oficial', price: 3500, stock: 410, category: 'Coleccionables', featured: false },
  ]);
  uE(() => localStorage.setItem('pfc_shop', JSON.stringify(products)), [products]);

return (
    <div className="admin-content">
      <Topbar title="Tienda" sub="Productos oficiales"
        actions={<button className="btn btn-primary btn-sm"><AdminIcon name="plus" size={14}/> Nuevo producto</button>}/>
      <div className="shop-grid">
        {products.map(p => (
          <div key={p.id} className="admin-card shop-card">
            <div className="shop-card__media" style={{background:`linear-gradient(135deg, hsl(${p.id.charCodeAt(1)*30 % 360} 60% 45%), hsl(${(p.id.charCodeAt(1)*30 + 60) % 360} 50% 25%))`}}>
              {p.featured && <span className="admin-pill pill-accent" style={{position:'absolute', top:10, left:10}}>Destacado</span>}
            </div>
            <div style={{padding:16}}>
              <div className="admin-pill" style={{marginBottom:8}}>{p.category}</div>
              <div style={{fontFamily:'var(--font-condensed)', fontWeight:600, fontSize:16, textTransform:'uppercase'}}>{p.name}</div>
              <div style={{display:'flex', justifyContent:'space-between', marginTop:10, fontSize:13}}>
                <span style={{fontFamily:'var(--font-display)', fontSize:22}}>₡{p.price.toLocaleString()}</span>
                <span style={{color: p.stock < 50 ? '#B23B3B' : 'var(--ink-mute)'}}>{p.stock} uds.</span>
              </div>
              <div style={{display:'flex', gap:6, marginTop:12}}>
                <button className="btn btn-ghost btn-sm" style={{flex:1}}><AdminIcon name="edit" size={14}/> Editar</button>
                <button className="admin-icon-btn sm danger"><AdminIcon name="trash" size={14}/></button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- Settings ----------
function SettingsManager({ data, setData }) {
  return (
    <div className="admin-content">
      <Topbar title="Configuración" sub="Identidad del club, colores, patrocinadores y redes"/>
      <div className="admin-grid-2">
        <div className="admin-card">
          <div className="admin-card__head"><h3>Datos generales</h3></div>
          <Field label="Nombre completo"><input className="a-input" value={data.club.name} onChange={e => setData({...data, club: {...data.club, name: e.target.value}})}/></Field>
          <Field label="Nombre corto"><input className="a-input" value={data.club.short} onChange={e => setData({...data, club: {...data.club, short: e.target.value}})}/></Field>
          <Field label="Apodo"><input className="a-input" value={data.club.nickname} onChange={e => setData({...data, club: {...data.club, nickname: e.target.value}})}/></Field>
          <Field label="Lema"><input className="a-input" value={data.club.motto} onChange={e => setData({...data, club: {...data.club, motto: e.target.value}})}/></Field>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <Field label="Estadio"><input className="a-input" value={data.club.stadium} onChange={e => setData({...data, club: {...data.club, stadium: e.target.value}})}/></Field>
            <Field label="Aforo"><input type="number" className="a-input" value={data.club.capacity} onChange={e => setData({...data, club: {...data.club, capacity: +e.target.value}})}/></Field>
          </div>
        </div>
        <div className="admin-card">
          <div className="admin-card__head"><h3>Redes sociales</h3></div>
          {Object.keys(data.social).map(k => (
            <Field key={k} label={k.charAt(0).toUpperCase() + k.slice(1)}>
              <input className="a-input" value={data.social[k]} onChange={e => setData({...data, social: {...data.social, [k]: e.target.value}})}/>
            </Field>
          ))}
        </div>
        <div className="admin-card" style={{gridColumn:'span 2'}}>
          <div className="admin-card__head"><h3>Patrocinadores</h3></div>
          <div style={{display:'flex', flexWrap:'wrap', gap:8}}>
            {data.sponsors.map((s, i) => (
              <span key={i} className="sponsor-tag">
                {s}
                <button onClick={() => { const n = [...data.sponsors]; n.splice(i,1); setData({...data, sponsors: n}); }}>×</button>
              </span>
            ))}
            <button className="sponsor-add" onClick={() => { const n = prompt('Nombre del patrocinador'); if (n) setData({...data, sponsors: [...data.sponsors, n]}); }}>+ Agregar</button>
          </div>
        </div>
        <div className="admin-card" style={{gridColumn:'span 2', borderColor:'#B23B3B33'}}>
          <div className="admin-card__head"><h3 style={{color:'#B23B3B'}}>Zona de peligro</h3></div>
          <p style={{color:'var(--ink-dim)', fontSize:14, marginTop:8}}>Restaurar todos los datos al estado inicial. Esta acción no se puede deshacer.</p>
          <button className="btn btn-ghost" style={{marginTop:12, borderColor:'#B23B3B', color:'#B23B3B'}} onClick={() => {
            if (!confirm('¿Restaurar datos a los valores iniciales?')) return;
            localStorage.removeItem('pfc_admin_data');
            location.reload();
          }}><AdminIcon name="trash" size={14}/> Restaurar datos</button>
        </div>
      </div>
    </div>
  );
}

// ---------- Users manager ----------
function UsersManager() {
  const [users] = uS([
    { name: 'Vladimir Quesada', email: 'vquesada@puntarenasfc.com', role: 'Administrador', last: 'Hace 2h', status: 'active' },
    { name: 'Ana Ramírez', email: 'aramirez@puntarenasfc.com', role: 'Editor de noticias', last: 'Hace 5h', status: 'active' },
    { name: 'Luis Marín', email: 'lmarin@puntarenasfc.com', role: 'Editor de contenido', last: 'Ayer', status: 'active' },
    { name: 'Kevin Vargas', email: 'kvargas@puntarenasfc.com', role: 'Boletería', last: 'Hace 3 días', status: 'active' },
    { name: 'Diana Soto', email: 'dsoto@puntarenasfc.com', role: 'Tienda', last: 'Hace 1 semana', status: 'inactive' },
  ]);

return (
    <div className="admin-content">
      <Topbar title="Usuarios" sub="Gestión de equipo y permisos"
        actions={<button className="btn btn-primary btn-sm"><AdminIcon name="plus" size={14}/> Nuevo usuario</button>}/>
      <div className="admin-card">
        <table className="admin-table">
          <thead><tr><th>Usuario</th><th>Rol</th><th>Última actividad</th><th>Estado</th><th></th></tr></thead>
          <tbody>
            {users.map((u, i) => (
              <tr key={i}>
                <td>
                  <div style={{display:'flex', alignItems:'center', gap:10}}>
                    <div style={{width:32, height:32, borderRadius:'50%', background:`hsl(${i*60} 55% 45%)`, color:'#fff', display:'grid', placeItems:'center', fontFamily:'var(--font-condensed)', fontWeight:600, fontSize:12}}>
                      {u.name.split(' ').map(w => w[0]).slice(0,2).join('')}
                    </div>
                    <div>
                      <div style={{fontWeight:600}}>{u.name}</div>
                      <div style={{fontSize:12, color:'var(--ink-mute)'}}>{u.email}</div>
                    </div>
                  </div>
                </td>
                <td><span className="admin-pill">{u.role}</span></td>
                <td style={{color:'var(--ink-mute)', fontSize:13}}>{u.last}</td>
                <td><span className={`admin-pill ${u.status === 'active' ? 'pill-green' : 'pill-muted'}`}>{u.status === 'active' ? 'Activo' : 'Inactivo'}</span></td>
                <td style={{textAlign:'right'}}>
                  <button className="admin-icon-btn sm"><AdminIcon name="edit" size={14}/></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

<div className="admin-card" style={{marginTop:24}}>
        <div className="admin-card__head"><h3>Roles y permisos</h3></div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, marginTop:14}}>
          {[
            {r:'Administrador', c:'Acceso total', n:1},
            {r:'Editor de noticias', c:'Crear y publicar noticias', n:1},
            {r:'Editor de contenido', c:'Partidos, plantel, tabla', n:1},
            {r:'Boletería', c:'Gestión de boletos', n:1},
            {r:'Tienda', c:'Productos e inventario', n:1},
          ].map(r => (
            <div key={r.r} className="card" style={{padding:16}}>
              <div style={{fontFamily:'var(--font-condensed)', fontWeight:600, fontSize:14, textTransform:'uppercase'}}>{r.r}</div>
              <div style={{fontSize:12, color:'var(--ink-mute)', marginTop:4}}>{r.c}</div>
              <div style={{marginTop:10, fontFamily:'var(--font-display)', fontSize:28}}>{r.n}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- Primitives ----------
function Field({ label, children }) {
  return (
    <div className="a-field">
      <label>{label}</label>
      {children}
    </div>
  );
}
function Drawer({ title, onClose, onSave, children }) {
  return (
    <div className="a-drawer-overlay" onClick={onClose}>
      <div className="a-drawer" onClick={e => e.stopPropagation()}>
        <div className="a-drawer__head">
          <h3>{title}</h3>
          <button className="admin-icon-btn sm" onClick={onClose}><AdminIcon name="close" size={14}/></button>
        </div>
        <div className="a-drawer__body">{children}</div>
        <div className="a-drawer__foot">
          <button className="btn btn-ghost btn-sm" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary btn-sm" onClick={onSave}><AdminIcon name="check" size={14}/> Guardar</button>
        </div>
      </div>
    </div>
  );
}

// ---------- Root ----------
function AdminApp() {
  const [page, setPage] = uS(() => localStorage.getItem('pfc_admin_page') || 'dashboard');
  const [sideOpen, setSideOpen] = uS(false);
  const [data, setData] = useAdminStore();
  uE(() => localStorage.setItem('pfc_admin_page', page), [page]);
  uE(() => { setSideOpen(false); }, [page]);

const views = {
    dashboard: <Dashboard data={data}/>,
    news:      <NewsManager data={data} setData={setData}/>,
    hero:      <HeroManager data={data} setData={setData}/>,
    fixtures:  <FixturesManager data={data} setData={setData}/>,
    standings: <StandingsManager data={data} setData={setData}/>,
    squad:     <SquadManager data={data} setData={setData}/>,
    tickets:   <TicketsManager/>,
    shop:      <ShopManager/>,
    settings:  <SettingsManager data={data} setData={setData}/>,
    users:     <UsersManager/>,
  };
  return (
    <div className={`admin-shell ${sideOpen ? 'is-open' : ''}`} onClick={() => sideOpen && setSideOpen(false)}>
      <div onClick={e => e.stopPropagation()}>
        <Sidebar page={page} setPage={setPage}/>
      </div>
      <div>
        <button className="admin-mobile-menu" aria-label="Menu" onClick={() => setSideOpen(true)}>
          <AdminIcon name="drag" size={20}/>
        </button>
        {views[page] || views.dashboard}
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<AppProvider><AdminApp/></AppProvider>);

{title}

Actividad reciente

Visitas al sitio

Próximos partidos