// shaiAcademy — Super Admin screens (platform level)
// Same editorial system; always-on role.

/* ================================================================
   Shared bits
   ================================================================ */

// Logo monogram for each academia — deterministic, editorial
const AcademyMark = ({ name, slug, size = 44, tone }) => {
  const letters = (name || '').split(/\s+/).map(s => s[0]).filter(Boolean).slice(0, 2).join('').toUpperCase();
  const palette = [
    { bg: 'var(--ink)',          fg: 'var(--paper)' },
    { bg: 'var(--accent)',       fg: 'white' },
    { bg: 'var(--paper-3)',      fg: 'var(--ink)' },
    { bg: 'oklch(0.88 0.08 110)',fg: 'var(--ink)' },
    { bg: 'oklch(0.3 0.08 260)', fg: 'var(--paper)' },
    { bg: 'oklch(0.55 0.14 145)',fg: 'white' },
  ];
  const pick = palette[(slug || name || '').split('').reduce((a,c) => a + c.charCodeAt(0), 0) % palette.length];
  return (
    <span style={{
      width: size, height: size, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      background: tone?.bg || pick.bg, color: tone?.fg || pick.fg,
      fontFamily: 'var(--font-display)', fontStyle: 'italic',
      fontSize: size * 0.42, letterSpacing: '-0.04em',
      borderRadius: size >= 64 ? 12 : 8,
      flex: 'none',
      border: '1px solid rgba(0,0,0,0.05)',
    }}>{letters}</span>
  );
};

// Editorial line chart (12 months) — inspired by existing LineChart
const TrendLine = ({ data, field = 'v', width = 640, height = 200, fill = true, accent = 'var(--ink)' }) => {
  const pad = { l: 36, r: 12, t: 12, b: 24 };
  const w = width - pad.l - pad.r, h = height - pad.t - pad.b;
  const vals = data.map(d => d[field]);
  const max = Math.max(...vals) * 1.08, min = Math.min(...vals) * 0.85;
  const x = i => pad.l + (i / (data.length - 1)) * w;
  const y = v => pad.t + h - ((v - min) / (max - min)) * h;
  const path = data.map((d, i) => `${i === 0 ? 'M' : 'L'}${x(i)},${y(d[field])}`).join(' ');
  const area = path + ` L${x(data.length-1)},${pad.t+h} L${x(0)},${pad.t+h} Z`;
  const gridLines = 4;
  return (
    <svg width={width} height={height} style={{overflow: 'visible', maxWidth: '100%'}}>
      {[...Array(gridLines)].map((_, i) => {
        const yv = pad.t + (h * i) / (gridLines - 1);
        const val = max - ((max - min) * i) / (gridLines - 1);
        return (
          <g key={i}>
            <line x1={pad.l} y1={yv} x2={pad.l + w} y2={yv} stroke="var(--rule)" strokeDasharray="2 3"/>
            <text x={pad.l - 6} y={yv + 4} textAnchor="end" fontSize="10" fill="var(--ink-3)" fontFamily="var(--font-mono)">
              {val >= 1000 ? (val / 1000).toFixed(1) + 'k' : Math.round(val)}
            </text>
          </g>
        );
      })}
      {fill && <path d={area} fill={accent} opacity="0.08"/>}
      <path d={path} fill="none" stroke={accent} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
      {data.map((d, i) => (
        <g key={i}>
          <circle cx={x(i)} cy={y(d[field])} r={i === data.length - 1 ? 5 : 3} fill={i === data.length - 1 ? accent : 'var(--paper)'} stroke={accent} strokeWidth="2"/>
          <text x={x(i)} y={height - 6} textAnchor="middle" fontSize="10" fill="var(--ink-3)" fontFamily="var(--font-mono)">{d.m}</text>
        </g>
      ))}
    </svg>
  );
};

// Tiny sparkline for list rows
const Spark = ({ data, w = 72, h = 22, color = 'var(--ink-3)' }) => {
  const vals = data, max = Math.max(...vals), min = Math.min(...vals);
  const x = i => (i / (vals.length - 1)) * w;
  const y = v => h - ((v - min) / (max - min || 1)) * h;
  const path = vals.map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i)},${y(v)}`).join(' ');
  return <svg width={w} height={h} style={{display: 'block'}}><path d={path} fill="none" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>;
};

/* ================================================================
   1) DashAdmin — Platform panel
   ================================================================ */
const DashAdmin = () => {
  const p = PLATFORM_STATS;
  return (
    <div className="page stack-l">
      <div>
        <div className="eyebrow">Plataforma · Semana 16 · 2026</div>
        <h1 className="display" style={{fontSize: 72, margin: '8px 0 24px', maxWidth: 1100, lineHeight: 0.95}}>
          <em style={{fontStyle: 'italic', color: 'var(--accent)'}}>47 academias</em> confían en shaiAcademy. MRR <em style={{fontStyle: 'italic'}}>S/ 42.3k</em>.
        </h1>
      </div>

      {/* KPI band */}
      <div className="grid-4">
        <Stat label="MRR (abril)" value={`S/ ${(p.mrr / 1000).toFixed(1)}k`} sub={<><Icon name="arrow_up" size={11}/> +{p.mrrDeltaPct}% vs marzo</>} trend="up"/>
        <Stat label="Academias activas" value={p.academias} sub={<><Icon name="arrow_up" size={11}/> +{p.academiasDeltaAbs} este mes</>} trend="up"/>
        <Stat label="Usuarios totales" value={p.usuariosTotal.toLocaleString('es-PE')} sub={`${p.atletasTotal.toLocaleString('es-PE')} atletas`}/>
        <Stat label="Trial · En mora" value={`${p.trialActivos} · ${p.mora}`} sub="Vigilar esta semana"/>
      </div>

      {/* Growth chart + ops alerts */}
      <div className="split-2-wide">
        <div>
          <SectionMarker num="01 / Crecimiento">Academias <em>últimos 12 meses</em></SectionMarker>
          <div className="card" style={{padding: 24}}>
            <div className="between" style={{marginBottom: 16}}>
              <div>
                <div className="eyebrow">Academias activas</div>
                <div className="display" style={{fontSize: 48, lineHeight: 1, marginTop: 4}}>
                  47<span style={{fontSize: 22, color: 'var(--ink-3)', marginLeft: 8}}>/ 22 hace un año</span>
                </div>
              </div>
              <div className="row" style={{gap: 6}}>
                <button className="chip active">12m</button>
                <button className="chip">6m</button>
                <button className="chip">3m</button>
              </div>
            </div>
            <TrendLine data={CRECIMIENTO_ACADEMIAS} field="n" width={640} height={200} accent="var(--ink)"/>
            <hr className="hr" style={{margin: '20px 0'}}/>
            <div className="row" style={{gap: 40, flexWrap: 'wrap'}}>
              <div>
                <div className="tiny mono muted">NUEVAS · ABR</div>
                <div style={{fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '-0.02em'}}>3 <span style={{fontSize: 14, color: 'var(--ink-3)'}}>/ 2 promedio</span></div>
              </div>
              <div>
                <div className="tiny mono muted">CHURN · 6M</div>
                <div style={{fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '-0.02em'}}>{p.churn6m}%</div>
              </div>
              <div>
                <div className="tiny mono muted">LTV PROMEDIO</div>
                <div style={{fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '-0.02em'}}>S/ 14.8k</div>
              </div>
            </div>
          </div>
        </div>

        <div className="stack-l">
          <div>
            <div className="between" style={{marginBottom: 12}}>
              <div className="eyebrow">Alertas operativas</div>
              <a className="link-ink tiny">Ver todas</a>
            </div>
            <div className="card" style={{padding: 0}}>
              {ALERTAS_PLATAFORMA.map((a, i) => (
                <div key={i} className="row" style={{padding: '14px 16px', gap: 12, borderBottom: i < ALERTAS_PLATAFORMA.length - 1 ? '1px solid var(--rule)' : 'none', alignItems: 'flex-start'}}>
                  <span style={{
                    width: 6, height: 6, borderRadius: '50%', marginTop: 7, flex: 'none',
                    background: a.sev === 'high' ? 'var(--danger)' : a.sev === 'med' ? 'var(--warn)' : 'var(--ink-3)',
                  }}></span>
                  <div style={{flex: 1, minWidth: 0}}>
                    <div style={{fontSize: 13, fontWeight: 500, lineHeight: 1.3}}>{a.titulo}</div>
                    <div className="tiny muted" style={{marginTop: 2}}>{a.desc}</div>
                  </div>
                  <div className="tiny muted mono" style={{flex: 'none', whiteSpace: 'nowrap'}}>{a.hora.toUpperCase()}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Latest academies + MRR */}
      <div className="split-2-wide">
        <div>
          <SectionMarker num="02 / Últimas</em>">Últimas academias creadas</SectionMarker>
          <div className="card" style={{padding: 0, overflow: 'hidden'}}>
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{width: 56}}></th>
                  <th>Academia</th>
                  <th>Owner</th>
                  <th>Plan</th>
                  <th>Usuarios</th>
                  <th>Estado</th>
                </tr>
              </thead>
              <tbody>
                {ACADEMIAS.slice().sort((a,b) => b.id - a.id).slice(0, 6).map(a => (
                  <tr key={a.id} style={{cursor: 'pointer'}}>
                    <td><AcademyMark name={a.nombre} slug={a.slug} size={36}/></td>
                    <td>
                      <div style={{fontWeight: 500}}>{a.nombre}</div>
                      <div className="tiny muted mono">{a.slug}.shai.app · {a.ciudad}</div>
                    </td>
                    <td className="small">{a.owner}</td>
                    <td>{a.plan === 'Pro' ? <Badge tone="ok">Pro</Badge> : <Badge>Starter</Badge>}</td>
                    <td className="num">{a.usuarios}</td>
                    <td><Badge tone={ESTADOS_ACADEMIA[a.estado].tone}>{ESTADOS_ACADEMIA[a.estado].label}</Badge></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div>
          <div className="eyebrow" style={{marginBottom: 12}}>MRR · 12 meses</div>
          <div className="card" style={{padding: 24}}>
            <div className="display" style={{fontSize: 64, lineHeight: 1, letterSpacing: '-0.03em'}}>
              S/ {(p.mrr / 1000).toFixed(1)}<span style={{fontSize: 26, color: 'var(--ink-3)'}}>k</span>
            </div>
            <div className="tiny muted" style={{marginBottom: 18}}>abril 2026 · +{p.mrrDeltaPct}% mes</div>
            <TrendLine data={MRR_SERIE} field="v" width={400} height={160} accent="var(--accent)"/>
          </div>
        </div>
      </div>

      {/* Bottom strip */}
      <div style={{padding: '40px 32px', background: 'var(--ink)', color: 'var(--paper)', borderRadius: 'var(--r-lg)', marginTop: 24}}>
        <div className="between" style={{alignItems: 'flex-start', gap: 32, flexWrap: 'wrap'}}>
          <div style={{maxWidth: 680}}>
            <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Nota interna · Shai</div>
            <p className="pullquote" style={{color: 'var(--paper)', marginTop: 12}}>
              "47 academias. 2.9k atletas entrenando hoy. Este mes sumamos Handball Norte (Piura) y Remo Chosica. Próximo foco: onboarding del plan Pro en &lt; 1 hora."
            </p>
          </div>
          <div style={{minWidth: 240}}>
            <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Tiempo medio de onboarding</div>
            <div className="display" style={{fontSize: 88, color: 'var(--paper)', marginTop: 8, lineHeight: 1}}>2.4<span style={{fontSize: 32, color: 'var(--ink-4)'}}> h</span></div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ================================================================
   2) AcademiasList — 47 academies table
   ================================================================ */
const AcademiasList = () => {
  const [filter, setFilter] = React.useState('Todas');
  const [plan, setPlan] = React.useState('Todos');
  const filters = ['Todas', 'Pro', 'Starter', 'Trial', 'Suspendidas', 'En mora'];

  const filtered = ACADEMIAS.filter(a => {
    if (filter === 'Pro') return a.plan === 'Pro';
    if (filter === 'Starter') return a.plan === 'Starter';
    if (filter === 'Trial') return a.estado === 'trial';
    if (filter === 'Suspendidas') return a.estado === 'suspendida';
    if (filter === 'En mora') return a.estado === 'mora';
    return true;
  });

  // Deterministic sparklines per academy
  const sparks = React.useMemo(() => {
    const out = {};
    ACADEMIAS.forEach((a, idx) => {
      const base = 40 + (idx * 7) % 40;
      out[a.id] = Array.from({length: 8}, (_, i) => base + (Math.sin(idx + i) * 6) + (a.estado === 'mora' ? -i : i * 1.2));
    });
    return out;
  }, []);

  return (
    <div className="page stack-l">
      <div className="between" style={{alignItems: 'flex-end', flexWrap: 'wrap', gap: 16}}>
        <div>
          <div className="eyebrow">47 academias · 12 ciudades · S/ 42.3k MRR</div>
          <h1 className="display" style={{fontSize: 72, margin: '8px 0 0'}}>Academias<span style={{color:'var(--ink-3)'}}>.</span></h1>
        </div>
        <div className="row" style={{gap: 8, flexWrap: 'wrap'}}>
          <button className="btn btn-ghost btn-sm"><Icon name="download" size={14}/> Exportar CSV</button>
          <button className="btn btn-accent btn-sm"><Icon name="plus" size={14}/> Crear academia</button>
        </div>
      </div>

      <div className="between" style={{borderBottom: '1px solid var(--rule)', paddingBottom: 16, flexWrap: 'wrap', gap: 12}}>
        <div className="row" style={{flexWrap: 'wrap', gap: 6}}>
          {filters.map(f => (
            <button key={f} className={`chip ${filter === f ? 'active' : ''}`} onClick={() => setFilter(f)}>{f}</button>
          ))}
        </div>
        <div className="row" style={{gap: 12, flexWrap: 'wrap'}}>
          <div className="row" style={{gap: 6, padding: '6px 12px', border: '1px solid var(--rule)', borderRadius: 999}}>
            <Icon name="search" size={12}/>
            <input placeholder="Buscar por nombre, slug, owner…" style={{border: 0, background: 'transparent', outline: 0, fontSize: 12, width: 220}}/>
          </div>
        </div>
      </div>

      <div className="card" style={{padding: 0, overflow: 'hidden'}}>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width: 52}}></th>
              <th>Academia · Slug</th>
              <th>Owner</th>
              <th>Plan</th>
              <th style={{textAlign: 'right'}}>Usuarios</th>
              <th style={{textAlign: 'right'}}>MRR</th>
              <th>Uso 7d</th>
              <th>Estado</th>
              <th>Último uso</th>
              <th style={{width: 36}}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(a => (
              <tr key={a.id} style={{cursor: 'pointer'}}>
                <td><AcademyMark name={a.nombre} slug={a.slug} size={36}/></td>
                <td>
                  <div style={{fontWeight: 500}}>{a.nombre}</div>
                  <div className="tiny muted mono">{a.slug}.shai.app · {a.disciplina}</div>
                </td>
                <td>
                  <div className="small">{a.owner}</div>
                  <div className="tiny muted">{a.ciudad}</div>
                </td>
                <td>{a.plan === 'Pro' ? <Badge tone="ok">Pro</Badge> : <Badge>Starter</Badge>}</td>
                <td className="num" style={{textAlign: 'right'}}>
                  <div>{a.usuarios}</div>
                  <div className="tiny muted">{a.atletas} atletas</div>
                </td>
                <td className="num mono" style={{textAlign: 'right'}}>S/ {a.mrr.toLocaleString('es-PE')}</td>
                <td><Spark data={sparks[a.id]} color={a.estado === 'mora' || a.estado === 'suspendida' ? 'var(--danger)' : a.estado === 'trial' ? 'var(--warn)' : 'var(--ink-3)'}/></td>
                <td><Badge tone={ESTADOS_ACADEMIA[a.estado].tone}>{ESTADOS_ACADEMIA[a.estado].label}</Badge></td>
                <td className="tiny muted mono">{a.ultimoUso.toUpperCase()}</td>
                <td><Icon name="chevron" size={14}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="between tiny muted" style={{paddingTop: 8}}>
        <span>Mostrando {filtered.length} de {ACADEMIAS.length} academias</span>
        <span className="mono">Página 1 / 1</span>
      </div>
    </div>
  );
};

/* ================================================================
   3) AcademiaDetalle — ficha de una academia
   ================================================================ */
const AcademiaDetalle = () => {
  const a = ACADEMIAS[0]; // Academia Gutiérrez
  const [tab, setTab] = React.useState('overview');

  return (
    <div className="page stack-l">
      {/* Hero */}
      <div style={{display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 32, alignItems: 'center', paddingBottom: 28, borderBottom: '1px solid var(--ink)'}}>
        <AcademyMark name={a.nombre} slug={a.slug} size={148}/>
        <div style={{minWidth: 0}}>
          <div className="eyebrow">{a.slug}.shai.app · Fundada {a.inicio} · {a.ciudad}</div>
          <h1 className="display display-hero" style={{fontSize: 'clamp(44px, 8vw, 80px)', margin: '8px 0', lineHeight: 0.92, letterSpacing: '-0.03em'}}>
            Academia<br/><em style={{fontStyle: 'italic'}}>Gutiérrez</em>
          </h1>
          <div className="row" style={{gap: 16, marginTop: 16, fontSize: 13, flexWrap: 'wrap'}}>
            <span className="mono muted">{a.disciplina.toUpperCase()}</span>
            <span>·</span>
            <span>Owner: {a.owner}</span>
            <span>·</span>
            <span className="mono">{a.ownerEmail}</span>
          </div>
        </div>
        <div className="stack-s" style={{display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8, flex: 'none'}}>
          <Badge tone={ESTADOS_ACADEMIA[a.estado].tone}>{ESTADOS_ACADEMIA[a.estado].label}</Badge>
          <button className="btn btn-ghost btn-sm"><Icon name="share" size={12}/> Ver como owner</button>
          <button className="btn btn-primary btn-sm"><Icon name="user" size={12}/> Impersonar</button>
        </div>
      </div>

      {/* KPI band */}
      <div className="grid-4">
        <Stat label="MRR" value={`S/ ${a.mrr.toLocaleString('es-PE')}`} sub={`Plan ${a.plan}`}/>
        <Stat label="Usuarios" value={a.usuarios} sub={`${a.atletas} atletas · ${a.usuarios - a.atletas} apoderados / staff`}/>
        <Stat label="Asistencia 30d" value="91%" sub="+2 pts vs marzo" trend="up"/>
        <Stat label="Último uso" value={a.ultimoUso} sub="Sesión activa"/>
      </div>

      {/* Tabs */}
      <div className="tabs">
        {['overview','miembros','billing','config','acciones'].map(t => (
          <div key={t} className={`tab ${tab === t ? 'active' : ''}`} onClick={() => setTab(t)} style={{textTransform: 'capitalize'}}>{t === 'config' ? 'Configuración' : t}</div>
        ))}
      </div>

      {tab === 'overview' && (
        <div className="split-2">
          <div>
            <div className="eyebrow" style={{marginBottom: 12}}>Uso · últimos 12 meses</div>
            <div className="card" style={{padding: 24}}>
              <TrendLine data={MRR_SERIE.map((m, i) => ({m: m.m, v: 40 + i * 7 + (i % 3) * 4}))} field="v" width={460} height={180} accent="var(--accent)"/>
              <hr className="hr" style={{margin: '16px 0'}}/>
              <div className="row" style={{gap: 32, flexWrap: 'wrap'}}>
                <div><div className="tiny mono muted">LOGINS / SEMANA</div><div style={{fontFamily: 'var(--font-display)', fontSize: 24}}>284</div></div>
                <div><div className="tiny mono muted">CLASES / SEMANA</div><div style={{fontFamily: 'var(--font-display)', fontSize: 24}}>18</div></div>
                <div><div className="tiny mono muted">PAGOS / MES</div><div style={{fontFamily: 'var(--font-display)', fontSize: 24}}>96</div></div>
              </div>
            </div>

            <div style={{marginTop: 24}}>
              <div className="eyebrow" style={{marginBottom: 12}}>Adopción de módulos</div>
              <div className="card" style={{padding: 0}}>
                {[
                  ['Asistencia',   98, 'Usado diariamente'],
                  ['Pagos',         92, 'Yape integrado'],
                  ['Evaluaciones',  74, 'Mensual · 2 evaluadores'],
                  ['Nutrición',     38, 'Piloto con 44 atletas'],
                  ['CV Deportivo',  64, 'Público para 69 atletas'],
                  ['Comunicados',   55, '1 campaña / semana'],
                ].map(([k, v, desc], i, arr) => (
                  <div key={k} className="row between" style={{padding: '14px 16px', gap: 16, borderBottom: i < arr.length - 1 ? '1px solid var(--rule)' : 'none', flexWrap: 'wrap'}}>
                    <div style={{flex: '1 1 180px', minWidth: 0}}>
                      <div style={{fontSize: 13, fontWeight: 500}}>{k}</div>
                      <div className="tiny muted">{desc}</div>
                    </div>
                    <div className="row" style={{gap: 10, flex: 'none'}}>
                      <div className="bar" style={{width: 120}}><span style={{width: v + '%', background: v >= 80 ? 'var(--ink)' : v >= 50 ? 'var(--ink-3)' : 'var(--warn)'}}></span></div>
                      <span className="num mono small" style={{width: 40, textAlign: 'right'}}>{v}%</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="stack-l">
            <div>
              <div className="eyebrow" style={{marginBottom: 12}}>Salud del cliente</div>
              <div className="card" style={{padding: 24, background: 'var(--ink)', color: 'var(--paper)', border: 'none'}}>
                <div className="between" style={{alignItems: 'flex-start'}}>
                  <div>
                    <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Score · salud</div>
                    <div className="display" style={{fontSize: 88, color: 'var(--paper)', lineHeight: 1, marginTop: 4}}>
                      92<span style={{fontSize: 32, color: 'var(--ink-4)'}}>/100</span>
                    </div>
                  </div>
                  <Badge tone="ok">Saludable</Badge>
                </div>
                <div className="stack-s" style={{marginTop: 24}}>
                  {[
                    ['Uso diario',          'excelente'],
                    ['Pagos al día',        'excelente'],
                    ['Usuarios activos',    'excelente'],
                    ['Tickets soporte 30d', '1 · bajo'],
                  ].map(([k, v]) => (
                    <div key={k} className="between" style={{padding: '8px 0', borderBottom: '1px solid rgba(255,255,255,0.15)'}}>
                      <span className="tiny mono" style={{color: 'var(--ink-4)', letterSpacing: '0.08em', textTransform: 'uppercase'}}>{k}</span>
                      <span className="small" style={{color: 'var(--paper)'}}>{v}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div>
              <div className="eyebrow" style={{marginBottom: 12}}>Actividad reciente</div>
              <div className="stack">
                {LOGS_PLATAFORMA.filter(l => l.objeto.includes('Gutiérrez') || l.actor.includes('Shaira')).slice(0, 4).map((l, i) => (
                  <div key={i} className="row" style={{gap: 12, alignItems: 'flex-start'}}>
                    <span className="dot" style={{marginTop: 6, background: l.sev === 'err' ? 'var(--danger)' : l.sev === 'warn' ? 'var(--warn)' : 'var(--ink-3)'}}></span>
                    <div style={{flex: 1}}>
                      <div className="small"><strong>{l.actor}</strong> {l.accion.toLowerCase()}</div>
                      <div className="tiny muted">{l.meta}</div>
                      <div className="tiny muted mono">{l.fecha.toUpperCase()} · {l.hora}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === 'miembros' && (
        <div className="card" style={{padding: 0}}>
          <table className="tbl">
            <thead><tr><th style={{width:40}}></th><th>Usuario</th><th>Rol</th><th>Último acceso</th><th>MFA</th><th>Estado</th></tr></thead>
            <tbody>
              {USUARIOS_GLOBALES.filter(u => u.academias.includes('Academia Gutiérrez')).map(u => (
                <tr key={u.id}>
                  <td><Avatar name={u.nombre}/></td>
                  <td><div style={{fontWeight: 500}}>{u.nombre}</div><div className="tiny muted mono">{u.email}</div></td>
                  <td><Badge tone={ROLES_LABEL[u.rol].tone}>{ROLES_LABEL[u.rol].label}</Badge></td>
                  <td className="tiny muted mono">{u.ultimoAcceso.toUpperCase()}</td>
                  <td>{u.mfa ? <Icon name="check" size={14}/> : <Icon name="x" size={14}/>}</td>
                  <td>{u.estado === 'activo' ? <Badge tone="ok">Activo</Badge> : u.estado === 'pendiente' ? <Badge tone="warn">Pendiente</Badge> : <Badge tone="err">Bloqueado</Badge>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'billing' && (
        <div className="split-2">
          <div>
            <div className="eyebrow" style={{marginBottom: 12}}>Plan actual</div>
            <div className="card" style={{padding: 24}}>
              <div className="between">
                <div>
                  <div style={{fontFamily: 'var(--font-display)', fontSize: 36, letterSpacing: '-0.02em'}}>Pro · anual</div>
                  <div className="tiny muted">Renovación 18 abr 2027 · Tarjeta Visa ****4821</div>
                </div>
                <Badge tone="ok">Al día</Badge>
              </div>
              <hr className="hr" style={{margin: '16px 0'}}/>
              <div className="row" style={{gap: 32, flexWrap: 'wrap'}}>
                <div><div className="tiny mono muted">FACTURADO 2026</div><div style={{fontFamily: 'var(--font-display)', fontSize: 24}}>S/ 14.2k</div></div>
                <div><div className="tiny mono muted">LTV</div><div style={{fontFamily: 'var(--font-display)', fontSize: 24}}>S/ 58.8k</div></div>
                <div><div className="tiny mono muted">DESDE</div><div style={{fontFamily: 'var(--font-display)', fontSize: 24}}>{a.inicio}</div></div>
              </div>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom: 12}}>Últimos cobros</div>
            <div className="card" style={{padding: 0}}>
              <table className="tbl">
                <thead><tr><th>Factura</th><th>Monto</th><th>Fecha</th><th>Estado</th></tr></thead>
                <tbody>
                  {COBROS_PLATAFORMA.filter(c => c.academia.includes('Gutiérrez')).concat(COBROS_PLATAFORMA.slice(0, 4)).slice(0, 5).map((c, i) => (
                    <tr key={i}>
                      <td className="mono tiny">{c.id.replace(/INV-2026-04-\d+/, 'INV-2026-04-0' + (47 - i))}</td>
                      <td className="num">S/ {c.monto.toLocaleString('es-PE')}</td>
                      <td className="tiny muted mono">{(c.fecha === '—' ? '—' : c.fecha + ' 2026').toUpperCase()}</td>
                      <td>{c.estado === 'cobrado' ? <Badge tone="ok">Cobrado</Badge> : <Badge tone="err">Fallido</Badge>}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      {tab === 'config' && (
        <div className="split-2">
          <div className="card" style={{padding: 24}}>
            <div className="eyebrow" style={{marginBottom: 16}}>Datos de la academia</div>
            <dl className="stack" style={{margin: 0}}>
              {[
                ['Nombre comercial', 'Academia Gutiérrez'],
                ['Razón social',     'Shai Sport Perú S.A.C.'],
                ['RUC',              '20512345678'],
                ['Slug',             'gutierrez.shai.app'],
                ['Zona horaria',     'America/Lima (GMT−5)'],
                ['Idioma',           'Español (PE)'],
                ['Moneda',           'PEN'],
              ].map(([k, v]) => (
                <div key={k} className="between" style={{padding: '8px 0', borderBottom: '1px solid var(--rule)'}}>
                  <dt className="tiny muted mono" style={{textTransform: 'uppercase', letterSpacing: '0.08em'}}>{k}</dt>
                  <dd className="small" style={{margin: 0, fontWeight: 500}}>{v}</dd>
                </div>
              ))}
            </dl>
          </div>
          <div className="card" style={{padding: 24}}>
            <div className="eyebrow" style={{marginBottom: 16}}>Integraciones</div>
            <div className="stack-s">
              {[
                ['Yape', 'Conectado', true],
                ['Interbank APIs', 'Conectado', true],
                ['Twilio WhatsApp', 'Conectado · template Meta', true],
                ['Google Calendar', 'Desconectado', false],
                ['Stripe', 'No aplica', false],
              ].map(([k, s, ok]) => (
                <div key={k} className="between" style={{padding: '10px 0', borderBottom: '1px solid var(--rule)'}}>
                  <div><div style={{fontSize: 13, fontWeight: 500}}>{k}</div><div className="tiny muted">{s}</div></div>
                  {ok ? <Badge tone="ok">Activo</Badge> : <Badge>—</Badge>}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === 'acciones' && (
        <div className="split-2">
          <div>
            <div className="eyebrow" style={{marginBottom: 12}}>Acciones de soporte</div>
            <div className="stack">
              {[
                { icon: 'user',     title: 'Impersonar owner',       desc: 'Entra al tenant como Shaira Gutiérrez. Queda registrado en el log.', tone: 'warn',  action: 'Impersonar' },
                { icon: 'share',    title: 'Cambiar owner',          desc: 'Transfiere la propiedad del tenant a otra cuenta existente.',         tone: null,    action: 'Cambiar owner' },
                { icon: 'money',    title: 'Cambiar plan',           desc: 'Pro ↔ Starter. Recalcula el MRR del mes.',                            tone: null,    action: 'Cambiar plan' },
                { icon: 'download', title: 'Exportar datos',         desc: 'CSV de alumnos, pagos y evaluaciones. GDPR-ready.',                   tone: null,    action: 'Generar export' },
              ].map((a, i) => (
                <div key={i} className="card" style={{padding: 18}}>
                  <div className="row" style={{gap: 14}}>
                    <span style={{width: 36, height: 36, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--paper-3)', borderRadius: 8, flex: 'none'}}>
                      <Icon name={a.icon} size={16}/>
                    </span>
                    <div style={{flex: 1, minWidth: 0}}>
                      <div style={{fontWeight: 500}}>{a.title}</div>
                      <div className="tiny muted">{a.desc}</div>
                    </div>
                    <button className={`btn ${a.tone === 'warn' ? 'btn-primary' : 'btn-ghost'} btn-sm`} style={{flex: 'none'}}>{a.action}</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom: 12}}>Zona peligrosa</div>
            <div className="card" style={{padding: 20, borderColor: 'var(--danger)'}}>
              <div className="stack-s">
                {[
                  { title: 'Suspender tenant',      desc: 'Bloquea login y desactiva cobros. Reversible.',     action: 'Suspender' },
                  { title: 'Exportar y borrar',     desc: 'Genera export completo y elimina los datos en 30 días (GDPR).', action: 'Iniciar borrado' },
                ].map((d, i, arr) => (
                  <div key={i} className="between" style={{padding: '14px 0', gap: 12, borderBottom: i < arr.length - 1 ? '1px solid var(--rule)' : 'none', flexWrap: 'wrap'}}>
                    <div style={{flex: '1 1 200px', minWidth: 0}}>
                      <div style={{fontSize: 14, fontWeight: 500, color: 'var(--danger)'}}>{d.title}</div>
                      <div className="tiny muted">{d.desc}</div>
                    </div>
                    <button className="btn btn-ghost btn-sm" style={{borderColor: 'var(--danger)', color: 'var(--danger)', flex: 'none'}}>{d.action}</button>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

/* ================================================================
   4) FormAcademia — crear nueva academia (wizard de 3 pasos)
   ================================================================ */
const FormAcademia = () => {
  const [step, setStep] = React.useState(1);
  const [slug, setSlug] = React.useState('handball-norte');
  const [plan, setPlan] = React.useState('Starter');
  const steps = [
    { n: 1, label: 'Identidad' },
    { n: 2, label: 'Owner & plan' },
    { n: 3, label: 'Revisión' },
  ];

  return (
    <div className="page">
      <div className="form-head" style={{paddingBottom: 28, borderBottom: '1px solid var(--ink)', marginBottom: 32}}>
        <div className="eyebrow">Super admin · Onboarding</div>
        <h1 className="display" style={{fontSize: 'clamp(44px, 7vw, 72px)', margin: '8px 0 0', lineHeight: 0.95}}>
          Crear <em style={{fontStyle: 'italic'}}>academia</em> nueva
        </h1>
        <p className="lede" style={{maxWidth: 620, marginTop: 12}}>
          Tres pasos. Tenant en vivo en menos de dos minutos. El owner recibirá un enlace mágico para configurar el resto.
        </p>
      </div>

      <div className="stepper" style={{marginBottom: 32}}>
        {steps.map((s, i) => (
          <React.Fragment key={s.n}>
            <div className={`stepper-item ${step === s.n ? 'active' : ''} ${step > s.n ? 'done' : ''}`}>
              <span className="stepper-num mono">{step > s.n ? '✓' : String(s.n).padStart(2, '0')}</span>
              <span className="stepper-label">{s.label}</span>
            </div>
            {i < steps.length - 1 && <span className="stepper-rule"></span>}
          </React.Fragment>
        ))}
      </div>

      <div className="split-2">
        <div>
          {step === 1 && (
            <FormSection title="Identidad de la academia" desc="Cómo aparecerá en la plataforma y en su URL pública.">
              <Field label="Nombre comercial" required>
                <Input value="Handball Norte"/>
              </Field>
              <div className="sa-grid-2">
                <Field label="Slug · subdominio" required hint={`${slug}.shai.app`}>
                  <Input mono value={slug} onChange={e => setSlug(e.target.value)}/>
                </Field>
                <Field label="Ciudad" required>
                  <Input value="Piura, PE"/>
                </Field>
              </div>
              <Field label="Disciplina principal">
                <div className="sa-chiprow">
                  {['Handball','Fútbol','Voleibol','Natación','Atletismo','Otro'].map((d, i) => (
                    <button key={d} className={`chip ${i === 0 ? 'active' : ''}`} type="button">{d}</button>
                  ))}
                </div>
              </Field>
              <Field label="Zona horaria">
                <Select options={['America/Lima (GMT−5)','America/Bogotá','America/Santiago']} value="America/Lima (GMT−5)"/>
              </Field>
            </FormSection>
          )}

          {step === 2 && (
            <>
              <FormSection title="Owner inicial" desc="Recibirá el enlace mágico y podrá invitar al resto del staff.">
                <div className="sa-grid-2">
                  <Field label="Nombre completo" required>
                    <Input value="Iván Mendoza"/>
                  </Field>
                  <Field label="Documento · DNI">
                    <Input mono value="46281705"/>
                  </Field>
                </div>
                <div className="sa-grid-2">
                  <Field label="Email" required>
                    <Input type="email" value="ivan@handball.pe"/>
                  </Field>
                  <Field label="Teléfono">
                    <Input mono value="+51 991 223 445"/>
                  </Field>
                </div>
              </FormSection>

              <FormSection title="Plan inicial" desc="Puede cambiarse después desde el detalle de la academia.">
                <div className="plan-grid">
                  {[
                    { id: 'Starter', price: 'S/ 180/mes', features: ['Hasta 100 atletas', 'Módulos base', 'Soporte email'] },
                    { id: 'Pro',     price: 'S/ 420/mes', features: ['Atletas ilimitados', 'Todos los módulos', 'Integraciones Yape/Interbank', 'Soporte prioritario'], featured: true },
                    { id: 'Trial',   price: '14 días · gratis', features: ['Todo Pro durante 14 días', 'Sin tarjeta', 'Se convierte a Starter'] },
                  ].map(p => (
                    <label key={p.id} className={`plan-card ${plan === p.id ? 'selected' : ''}`}>
                      <input type="radio" name="plan" checked={plan === p.id} onChange={() => setPlan(p.id)} style={{display: 'none'}}/>
                      <div className="between">
                        <div style={{fontFamily: 'var(--font-display)', fontSize: 22}}>{p.id}</div>
                        {p.featured && <Badge tone="ok">Recomendado</Badge>}
                      </div>
                      <div className="mono tiny muted" style={{marginTop: 6}}>{p.price}</div>
                      <ul style={{margin: '12px 0 0', padding: 0, listStyle: 'none'}}>
                        {p.features.map(f => <li key={f} className="small" style={{padding: '3px 0', color: 'var(--ink-2)'}}>· {f}</li>)}
                      </ul>
                    </label>
                  ))}
                </div>
              </FormSection>
            </>
          )}

          {step === 3 && (
            <FormSection title="Revisa antes de crear" desc="Una vez creada, el owner recibirá un email con el enlace de acceso.">
              <div className="review-grid">
                <dl className="review-dl">
                  <div><dt>Academia</dt><dd>Handball Norte</dd></div>
                  <div><dt>Slug</dt><dd className="mono">{slug}.shai.app</dd></div>
                  <div><dt>Ciudad</dt><dd>Piura, PE</dd></div>
                  <div><dt>Disciplina</dt><dd>Handball</dd></div>
                  <div><dt>Owner</dt><dd>Iván Mendoza · ivan@handball.pe</dd></div>
                  <div><dt>Plan</dt><dd>{plan} {plan === 'Pro' ? '· S/ 420/mes' : plan === 'Starter' ? '· S/ 180/mes' : '· 14 días gratis'}</dd></div>
                  <div><dt>Zona horaria</dt><dd>America/Lima (GMT−5)</dd></div>
                </dl>
                <div className="callout">
                  <div className="eyebrow" style={{marginBottom: 8}}>Qué pasa al crear</div>
                  <ol style={{margin: 0, paddingLeft: 18, fontSize: 13, lineHeight: 1.55, color: 'var(--ink-2)'}}>
                    <li>Se provisiona el tenant en <span className="mono">{slug}.shai.app</span></li>
                    <li>El owner recibe un email con enlace mágico (válido 24 h)</li>
                    <li>Se aplica el plan {plan} y se agenda el primer cobro</li>
                    <li>Entra en tu dashboard como academia activa</li>
                  </ol>
                </div>
              </div>
            </FormSection>
          )}
        </div>

        <aside className="form-aside">
          <div className="eyebrow" style={{marginBottom: 12}}>Vista previa</div>
          <div className="card" style={{padding: 20}}>
            <div className="row" style={{gap: 14}}>
              <AcademyMark name="Handball Norte" slug={slug} size={56}/>
              <div style={{minWidth: 0}}>
                <div style={{fontFamily: 'var(--font-display)', fontSize: 20, letterSpacing: '-0.01em'}}>Handball Norte</div>
                <div className="tiny muted mono">{slug}.shai.app</div>
              </div>
            </div>
            <hr className="hr" style={{margin: '16px 0'}}/>
            <div className="stack-s tiny">
              <div className="between"><span className="muted mono" style={{textTransform:'uppercase',letterSpacing:'0.08em'}}>Plan</span><span>{plan}</span></div>
              <div className="between"><span className="muted mono" style={{textTransform:'uppercase',letterSpacing:'0.08em'}}>Ciudad</span><span>Piura, PE</span></div>
              <div className="between"><span className="muted mono" style={{textTransform:'uppercase',letterSpacing:'0.08em'}}>Disciplina</span><span>Handball</span></div>
              <div className="between"><span className="muted mono" style={{textTransform:'uppercase',letterSpacing:'0.08em'}}>Owner</span><span>Iván M.</span></div>
            </div>
          </div>

          <div className="eyebrow" style={{marginTop: 24, marginBottom: 12}}>Al crear la academia</div>
          <div className="stack-s small" style={{color: 'var(--ink-2)'}}>
            {['Provisiona DB & subdominio','Envía magic link al owner','Aplica plan y primer cobro','Aparece en tu dashboard'].map((l, i) => (
              <div key={i} className="row" style={{gap: 10, alignItems: 'flex-start'}}>
                <span className="mono tiny" style={{color: 'var(--ink-3)', flex: 'none', width: 18}}>0{i+1}</span>
                <span>{l}</span>
              </div>
            ))}
          </div>
        </aside>
      </div>

      <div className="form-footer">
        <div className="form-footer-meta">
          <span className="saving-dot">Borrador guardado</span>
          <span className="mono tiny">PASO {String(step).padStart(2,'0')} / 03</span>
        </div>
        <div className="form-footer-actions">
          <button className="btn btn-ghost" onClick={() => setStep(Math.max(1, step - 1))} disabled={step === 1}>Atrás</button>
          {step < 3 ? (
            <button className="btn btn-dark" onClick={() => setStep(step + 1)}>Continuar <Icon name="arrow_right" size={14}/></button>
          ) : (
            <button className="btn btn-accent"><Icon name="check" size={14}/> Crear academia</button>
          )}
        </div>
      </div>
    </div>
  );
};

/* ================================================================
   5) UsuariosGlobales — búsqueda cross-academia
   ================================================================ */
const UsuariosGlobales = () => {
  const [rolFilter, setRolFilter] = React.useState('Todos');
  const roles = ['Todos', 'Owners', 'Profesores', 'Atletas', 'Apoderados', 'Staff plataforma'];
  const map = { 'Owners': 'owner', 'Profesores': 'coach', 'Atletas': 'atleta', 'Apoderados': 'apoderado', 'Staff plataforma': 'staff_plataforma' };
  const filtered = USUARIOS_GLOBALES.filter(u => rolFilter === 'Todos' || u.rol === map[rolFilter]);

  return (
    <div className="page stack-l">
      <div className="between" style={{alignItems: 'flex-end', flexWrap: 'wrap', gap: 16}}>
        <div>
          <div className="eyebrow">Plataforma · directorio global</div>
          <h1 className="display" style={{fontSize: 72, margin: '8px 0 0'}}>Usuarios<span style={{color:'var(--ink-3)'}}>.</span></h1>
          <p className="lede" style={{maxWidth: 620, marginTop: 8}}>
            3,842 cuentas en 47 academias. Búsqueda transversal para soporte, deduplicación y cumplimiento GDPR.
          </p>
        </div>
        <div className="row" style={{gap: 8}}>
          <button className="btn btn-ghost btn-sm"><Icon name="download" size={14}/> Exportar</button>
          <button className="btn btn-primary btn-sm"><Icon name="user" size={14}/> Invitar staff</button>
        </div>
      </div>

      <div className="grid-4">
        <Stat label="Total usuarios" value="3,842" sub="+218 este mes" trend="up"/>
        <Stat label="Atletas" value="2,918"/>
        <Stat label="Staff academias" value="412" sub="Owners + profesores"/>
        <Stat label="Staff plataforma" value="8" sub="Soporte · ventas"/>
      </div>

      <div className="between" style={{borderBottom: '1px solid var(--rule)', paddingBottom: 16, flexWrap: 'wrap', gap: 12}}>
        <div className="row" style={{gap: 6, flexWrap: 'wrap'}}>
          {roles.map(r => (
            <button key={r} className={`chip ${rolFilter === r ? 'active' : ''}`} onClick={() => setRolFilter(r)}>{r}</button>
          ))}
        </div>
        <div className="row" style={{gap: 6, padding: '6px 12px', border: '1px solid var(--rule)', borderRadius: 999}}>
          <Icon name="search" size={12}/>
          <input placeholder="Buscar por nombre, email, DNI…" style={{border: 0, background: 'transparent', outline: 0, fontSize: 12, width: 240}}/>
        </div>
      </div>

      <div className="card" style={{padding: 0, overflow: 'hidden'}}>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width: 44}}></th>
              <th>Usuario</th>
              <th>Rol</th>
              <th>Academias</th>
              <th>MFA</th>
              <th>Último acceso</th>
              <th>Estado</th>
              <th style={{width: 36}}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(u => (
              <tr key={u.id} style={{cursor: 'pointer'}}>
                <td><Avatar name={u.nombre}/></td>
                <td><div style={{fontWeight: 500}}>{u.nombre}</div><div className="tiny muted mono">{u.email}</div></td>
                <td><Badge tone={ROLES_LABEL[u.rol].tone}>{ROLES_LABEL[u.rol].label}</Badge></td>
                <td>
                  <div className="row" style={{gap: 4, flexWrap: 'wrap'}}>
                    {u.academias.slice(0, 2).map(a => (
                      <span key={a} className="tiny" style={{padding: '2px 8px', background: 'var(--paper-3)', borderRadius: 4}}>{a}</span>
                    ))}
                    {u.academias.length > 2 && <span className="tiny muted">+{u.academias.length - 2}</span>}
                  </div>
                </td>
                <td>{u.mfa ? <Badge tone="ok">On</Badge> : <Badge>Off</Badge>}</td>
                <td className="tiny muted mono">{u.ultimoAcceso.toUpperCase()}</td>
                <td>{u.estado === 'activo' ? <Badge tone="ok">Activo</Badge> : u.estado === 'pendiente' ? <Badge tone="warn">Pendiente</Badge> : <Badge tone="err">Bloqueado</Badge>}</td>
                <td><Icon name="chevron" size={14}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="tiny muted">Mostrando {filtered.length} de {USUARIOS_GLOBALES.length} · busca para ampliar.</div>
    </div>
  );
};

/* ================================================================
   6) BillingPlataforma — MRR, pagos, cambios de plan
   ================================================================ */
const BillingPlataforma = () => {
  const p = PLATFORM_STATS;
  return (
    <div className="page stack-l">
      <div>
        <div className="eyebrow">Finanzas · plataforma</div>
        <h1 className="display" style={{fontSize: 'clamp(44px, 8vw, 80px)', margin: '8px 0 0', lineHeight: 0.95}}>
          S/ <em style={{fontStyle: 'italic'}}>{(p.mrr / 1000).toFixed(1)}k</em> <span style={{color:'var(--ink-3)', fontSize: '0.6em'}}>MRR · abril</span>
        </h1>
      </div>

      <div className="grid-4">
        <Stat label="MRR" value={`S/ ${(p.mrr / 1000).toFixed(1)}k`} sub={`+${p.mrrDeltaPct}% vs marzo`} trend="up"/>
        <Stat label="ARR proyectado" value="S/ 508k" sub="12 × MRR"/>
        <Stat label="Nuevos cobros abr" value="47" sub="96% tasa de éxito"/>
        <Stat label="En mora" value={`S/ ${(220+520+180).toLocaleString('es-PE')}`} sub="3 academias"/>
      </div>

      <div className="split-2-wide">
        <div>
          <SectionMarker num="01 / Evolución">MRR · <em>12 meses</em></SectionMarker>
          <div className="card" style={{padding: 24}}>
            <TrendLine data={MRR_SERIE} field="v" width={700} height={240} accent="var(--accent)"/>
            <hr className="hr" style={{margin: '20px 0'}}/>
            <div className="row" style={{gap: 32, flexWrap: 'wrap'}}>
              <div><div className="tiny mono muted">NUEVO MRR · ABR</div><div style={{fontFamily: 'var(--font-display)', fontSize: 26}}>+S/ 3.5k</div></div>
              <div><div className="tiny mono muted">EXPANSION</div><div style={{fontFamily: 'var(--font-display)', fontSize: 26}}>+S/ 920</div></div>
              <div><div className="tiny mono muted">CHURN</div><div style={{fontFamily: 'var(--font-display)', fontSize: 26, color: 'var(--danger)'}}>−S/ 380</div></div>
              <div><div className="tiny mono muted">NETO</div><div style={{fontFamily: 'var(--font-display)', fontSize: 26}}>+S/ 3.3k</div></div>
            </div>
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{marginBottom: 12}}>Mix por plan</div>
          <div className="card" style={{padding: 24}}>
            {[
              { plan: 'Pro',     cuentas: 22, mrr: 26300, pct: 62, color: 'var(--ink)' },
              { plan: 'Starter', cuentas: 19, mrr: 10460, pct: 25, color: 'var(--ink-3)' },
              { plan: 'Trial',   cuentas: 6,  mrr: 0,     pct: 0,  color: 'var(--warn)' },
            ].map(r => (
              <div key={r.plan} style={{padding: '12px 0', borderBottom: '1px solid var(--rule)'}}>
                <div className="between" style={{marginBottom: 6}}>
                  <div><span style={{fontWeight: 500}}>{r.plan}</span> <span className="tiny muted">· {r.cuentas} academias</span></div>
                  <span className="mono small">S/ {r.mrr.toLocaleString('es-PE')}</span>
                </div>
                <div className="bar"><span style={{width: Math.max(r.pct, 2) + '%', background: r.color}}></span></div>
              </div>
            ))}
            <hr className="hr" style={{margin: '12px 0'}}/>
            <div className="between tiny">
              <span className="muted">Total 47 academias</span>
              <span className="mono" style={{fontWeight: 500}}>S/ {p.mrr.toLocaleString('es-PE')}</span>
            </div>
          </div>
        </div>
      </div>

      <div>
        <SectionMarker num="02 / Cobros">Últimos cobros</SectionMarker>
        <div className="card" style={{padding: 0, overflow: 'hidden'}}>
          <table className="tbl">
            <thead>
              <tr><th>Factura</th><th>Academia</th><th>Plan</th><th style={{textAlign:'right'}}>Monto</th><th>Método</th><th>Fecha</th><th>Estado</th></tr>
            </thead>
            <tbody>
              {COBROS_PLATAFORMA.map(c => (
                <tr key={c.id}>
                  <td className="mono tiny">{c.id}</td>
                  <td>
                    <div className="row" style={{gap: 10}}>
                      <AcademyMark name={c.academia} slug={c.academia} size={28}/>
                      <span style={{fontWeight: 500}}>{c.academia}</span>
                    </div>
                  </td>
                  <td>{c.plan === 'Pro' ? <Badge tone="ok">Pro</Badge> : <Badge>Starter</Badge>}</td>
                  <td className="num mono" style={{textAlign: 'right'}}>S/ {c.monto.toLocaleString('es-PE')}</td>
                  <td className="small">{c.metodo}</td>
                  <td className="tiny muted mono">{c.fecha === '—' ? '—' : (c.fecha + ' 2026').toUpperCase()}</td>
                  <td>{c.estado === 'cobrado' ? <Badge tone="ok">Cobrado</Badge> : <Badge tone="err">Fallido</Badge>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div>
        <SectionMarker num="03 / Movimientos">Cambios de plan · abril</SectionMarker>
        <div className="card" style={{padding: 0}}>
          {CAMBIOS_PLAN.map((c, i, arr) => (
            <div key={i} className="row between" style={{padding: '16px 20px', borderBottom: i < arr.length - 1 ? '1px solid var(--rule)' : 'none', gap: 16, flexWrap: 'wrap'}}>
              <div className="row" style={{gap: 12, flex: '1 1 240px', minWidth: 0}}>
                <AcademyMark name={c.academia} slug={c.academia} size={36}/>
                <div style={{minWidth: 0}}>
                  <div style={{fontWeight: 500}}>{c.academia}</div>
                  <div className="tiny muted mono">{c.fecha}</div>
                </div>
              </div>
              <div className="row" style={{gap: 8, alignItems: 'center'}}>
                <Badge>{c.de}</Badge>
                <span style={{color: 'var(--ink-3)'}}>→</span>
                {c.a === 'Pro' ? <Badge tone="ok">{c.a}</Badge> : <Badge>{c.a}</Badge>}
              </div>
              <div className="mono small" style={{color: c.delta.startsWith('+') ? 'var(--ok)' : c.delta.startsWith('−') ? 'var(--danger)' : 'var(--ink-3)'}}>{c.delta}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ================================================================
   7) LogsActividad — audit log
   ================================================================ */
const LogsActividad = () => {
  const [tipo, setTipo] = React.useState('Todos');
  const tipos = ['Todos', 'Sistema', 'Staff', 'Owners', 'Errores'];
  const filtered = LOGS_PLATAFORMA.filter(l => {
    if (tipo === 'Sistema') return l.actor === 'Sistema';
    if (tipo === 'Staff')   return l.actor.includes('staff');
    if (tipo === 'Owners')  return !l.actor.includes('staff') && l.actor !== 'Sistema';
    if (tipo === 'Errores') return l.sev === 'err';
    return true;
  });

  // Group by fecha
  const groups = {};
  filtered.forEach(l => { (groups[l.fecha] = groups[l.fecha] || []).push(l); });

  return (
    <div className="page stack-l">
      <div className="between" style={{alignItems: 'flex-end', flexWrap: 'wrap', gap: 16}}>
        <div>
          <div className="eyebrow">Plataforma · auditoría</div>
          <h1 className="display" style={{fontSize: 72, margin: '8px 0 0'}}>Registro<span style={{color:'var(--ink-3)'}}>.</span></h1>
          <p className="lede" style={{maxWidth: 620, marginTop: 8}}>
            Cada acción que modifica una academia, un usuario o un cobro queda aquí. Retención: 2 años · exportable a CSV.
          </p>
        </div>
        <div className="row" style={{gap: 8}}>
          <button className="btn btn-ghost btn-sm"><Icon name="download" size={14}/> Exportar</button>
          <button className="btn btn-ghost btn-sm"><Icon name="settings" size={14}/> Configurar retención</button>
        </div>
      </div>

      <div className="between" style={{borderBottom: '1px solid var(--rule)', paddingBottom: 16, flexWrap: 'wrap', gap: 12}}>
        <div className="row" style={{gap: 6, flexWrap: 'wrap'}}>
          {tipos.map(t => (
            <button key={t} className={`chip ${tipo === t ? 'active' : ''}`} onClick={() => setTipo(t)}>{t}</button>
          ))}
        </div>
        <div className="row" style={{gap: 12, flexWrap: 'wrap'}}>
          <div className="row" style={{gap: 6, padding: '6px 12px', border: '1px solid var(--rule)', borderRadius: 999}}>
            <Icon name="search" size={12}/>
            <input placeholder="Buscar por actor, objeto…" style={{border: 0, background: 'transparent', outline: 0, fontSize: 12, width: 220}}/>
          </div>
          <div className="row" style={{gap: 6, padding: '6px 12px', border: '1px solid var(--rule)', borderRadius: 999}}>
            <Icon name="calendar" size={12}/>
            <span className="tiny mono">7 días</span>
          </div>
        </div>
      </div>

      {Object.entries(groups).map(([fecha, items]) => (
        <div key={fecha}>
          <div className="eyebrow" style={{marginBottom: 12}}>{fecha.toUpperCase()}</div>
          <div className="card" style={{padding: 0}}>
            {items.map((l, i) => (
              <div key={i} className="row" style={{padding: '14px 20px', gap: 16, borderBottom: i < items.length - 1 ? '1px solid var(--rule)' : 'none', alignItems: 'flex-start'}}>
                <div className="mono tiny muted" style={{width: 48, flex: 'none', paddingTop: 2}}>{l.hora}</div>
                <span style={{
                  width: 8, height: 8, borderRadius: '50%', marginTop: 6, flex: 'none',
                  background: l.sev === 'err' ? 'var(--danger)' : l.sev === 'warn' ? 'var(--warn)' : 'var(--ink-3)',
                }}></span>
                <div style={{flex: 1, minWidth: 0}}>
                  <div className="small">
                    <strong>{l.actor}</strong> <span style={{color: 'var(--ink-2)'}}>{l.accion.toLowerCase()}</span> <span style={{color: 'var(--ink)', fontWeight: 500}}>{l.objeto}</span>
                  </div>
                  <div className="tiny muted" style={{marginTop: 3}}>{l.meta}</div>
                </div>
                {l.sev === 'err' && <Badge tone="err">Error</Badge>}
                {l.sev === 'warn' && <Badge tone="warn">Alerta</Badge>}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

/* ================================================================
   8) Impersonation Banner — rendered globally when impersonating
   ================================================================ */
const ImpersonationBanner = ({ academia = 'Academia Gutiérrez', onExit }) => (
  <div className="impersonation-banner">
    <div className="row" style={{gap: 14, alignItems: 'center'}}>
      <span className="imp-dot"></span>
      <div style={{minWidth: 0}}>
        <div className="tiny mono" style={{letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.85}}>Modo impersonación · staff shaiAcademy</div>
        <div className="small" style={{fontWeight: 500, marginTop: 2}}>
          Estás viendo como <strong>Shaira Gutiérrez</strong> · {academia} · Ticket #2148
        </div>
      </div>
    </div>
    <div className="row" style={{gap: 10, flex: 'none'}}>
      <span className="tiny mono" style={{opacity: 0.75}}>Iniciado hace 12 min · Caduca en 48 min</span>
      <button className="btn btn-sm" onClick={onExit} style={{background: 'white', color: 'var(--ink)', borderColor: 'white'}}>
        <Icon name="x" size={12}/> Salir de impersonación
      </button>
    </div>
  </div>
);

Object.assign(window, {
  AcademyMark, TrendLine, Spark,
  DashAdmin, AcademiasList, AcademiaDetalle,
  FormAcademia, UsuariosGlobales, BillingPlataforma, LogsActividad,
  ImpersonationBanner,
});