// Club 1519 — Portal Socios · vistas: Directorio de miembros, Marcas aliadas, Comunicados
const { useState: c15pv2State } = React;

/* ================= DIRECTORIO ================= */
function C15PDirectorio({ onOpen }) {
  const [giro, setGiro] = c15pv2State('todos');
  const giros = ['todos', ...Array.from(new Set(window.C15_SOCIOS.map(s => s.giro)))];
  const socios = window.C15_SOCIOS.filter(s => s.status === 'activo' && (giro === 'todos' || s.giro === giro));

  return (
    <div className="c15p-screen">
      <div className="c15p-chiprow">
        {giros.map(g => (
          <button key={g} className={'c15p-chip' + (giro === g ? ' on' : '')} onClick={() => setGiro(g)}>
            {g === 'todos' ? 'Todos' : g}
          </button>
        ))}
      </div>
      <div className="c15p-list">
        {socios.map(s => (
          <div key={s.id} className="c15p-personrow" onClick={() => onOpen(s)}>
            <span className="pr-avatar">{s.short}</span>
            <div className="pr-body">
              <div className="pr-name">{s.nombre}</div>
              <div className="pr-meta">{s.empresa} · {s.giro}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function C15PSocioFicha({ socio }) {
  return (
    <div className="c15p-screen">
      <div className="c15p-personhead">
        <span className="pr-avatar lg">{socio.short}</span>
        <h2>{socio.nombre}</h2>
        <div className="ph-meta">{socio.empresa}</div>
        <div className="ph-giro">{socio.giro}</div>
      </div>
      <div className="c15p-card">
        <div className="c15p-deflist">
          <div className="dl"><dt>Empresa</dt><dd>{socio.empresa}</dd></div>
          <div className="dl"><dt>Industria</dt><dd>{socio.giro}</dd></div>
          <div className="dl"><dt>Socio desde</dt><dd>{window.fmtFechaCorta(socio.ingreso)}</dd></div>
        </div>
      </div>
    </div>
  );
}

/* ================= MARCAS ALIADAS ================= */
function C15PMarcas({ onOpen }) {
  return (
    <div className="c15p-screen">
      <div className="c15p-sectionlbl first">Beneficios exclusivos para socios</div>
      <div className="c15p-list">
        {window.C15_MARCAS.map(m => (
          <div key={m.id} className="c15p-marcarow" onClick={() => onOpen(m)}>
            <div className="mr-top"><span className="mr-name">{m.nombre}</span><span className="mr-nivel">{m.nivel}</span></div>
            <div className="mr-giro">{m.giro}</div>
            <div className="mr-beneficio">{m.beneficio}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function C15PMarcaDetalle({ marca }) {
  return (
    <div className="c15p-screen">
      <div className="c15p-detailicon"><window.C15Icons.Estrella size={24} /></div>
      <h2 className="c15p-detailtitle">{marca.nombre}</h2>
      <div className="c15p-detailmeta">{marca.giro} · Nivel {marca.nivel}</div>
      <div className="c15p-card">
        <div className="c15p-card-lbl">Beneficio para ti</div>
        <p>{marca.beneficio}</p>
      </div>
    </div>
  );
}

/* ================= COMUNICADOS ================= */
function C15PComunicados() {
  return (
    <div className="c15p-screen">
      <div className="c15p-list">
        {window.C15_COMUNICADOS.map(c => (
          <div key={c.id} className={'c15p-comurow' + (c.destaque ? ' destaque' : '')}>
            <div className="cr-title">{c.titulo}</div>
            <p>{c.cuerpo}</p>
            <div className="cr-fecha">{window.fmtFechaCorta(c.fecha)}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { C15PDirectorio, C15PSocioFicha, C15PMarcas, C15PMarcaDetalle, C15PComunicados });