// KSANET — Plataforma · Vistas (Avance, Aportaciones, Auditoría, Documentos, Asambleas, Mensajes)

// ═══════════════════════════════════════════════════════════
// AVANCE DE OBRA
// ═══════════════════════════════════════════════════════════
function ViewObra() {
  const hitos = [
    { n: '01', name: 'Suelo y licencia', date: 'Mar 2024', s: 'done' },
    { n: '02', name: 'Cimentación', date: 'Sep 2024', s: 'done' },
    { n: '03', name: 'Estructura', date: 'En curso', s: 'current' },
    { n: '04', name: 'Cerramientos', date: 'Q4 2026', s: 'pending' },
    { n: '05', name: 'Instalaciones', date: 'Q1 2027', s: 'pending' },
    { n: '06', name: 'Acabados', date: 'Q2 2027', s: 'pending' },
    { n: '07', name: 'Entrega llaves', date: 'Sep 2027', s: 'pending' },
  ];

  const ConstructionSVG = ({ tone='warm' }) => {
    // Render simbólico de obra (sin foto real). 'warm' = atardecer; 'cool' = mañana
    const sky = tone === 'warm' ? '#e9c896' : '#cdd5dc';
    const sky2 = tone === 'warm' ? '#c97a4a' : '#9aa6b1';
    return (
      <svg viewBox="0 0 600 280" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display:'block' }}>
        <defs>
          <linearGradient id={'sky-'+tone} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={sky}/>
            <stop offset="100%" stopColor={sky2}/>
          </linearGradient>
        </defs>
        <rect width="600" height="280" fill={'url(#sky-'+tone+')'}/>
        {/* edificios fondo */}
        <rect x="20" y="160" width="80" height="120" fill="#3d3530" opacity="0.55"/>
        <rect x="110" y="140" width="90" height="140" fill="#2a2422" opacity="0.5"/>
        {/* edificio principal en obra */}
        <rect x="220" y="60" width="280" height="220" fill="#1a1715"/>
        {Array.from({ length: 14 }).map((_, c) =>
          Array.from({ length: 11 }).map((_, r) => (
            <rect key={c+'-'+r} x={228 + c * 20} y={68 + r * 19} width="14" height="14"
                  fill={r < 7 ? '#3d3530' : (r === 7 ? '#8C1E22' : '#8C1E22')}
                  opacity={r < 4 ? 0.95 : (r < 7 ? 0.7 : 0.55)}/>
          ))
        )}
        {/* grúa */}
        <rect x="500" y="20" width="3" height="200" fill="#1a1715"/>
        <rect x="430" y="24" width="120" height="3" fill="#1a1715"/>
        <line x1="510" y1="27" x2="510" y2="80" stroke="#1a1715" strokeWidth="1.5"/>
        <rect x="505" y="80" width="10" height="10" fill="#8C1E22"/>
        {/* suelo */}
        <rect x="0" y="240" width="600" height="40" fill="#2a2422" opacity="0.85"/>
      </svg>
    );
  };

  return (
    <>
      <div className="ks-h-row">
        <div>
          <div className="ks-h-eyebrow">Avance de obra</div>
          <h1 className="ks-h-title">Tu edificio, <em>en construcción.</em></h1>
        </div>
        <div className="ks-h-meta">Última visita auditor · 22 marzo 2026</div>
      </div>

      <div className="obra-stats">
        <div className="obra-stat"><span className="obra-stat-l">Avance global</span><span className="obra-stat-v">42<em>%</em></span></div>
        <div className="obra-stat"><span className="obra-stat-l">Plazo</span><span className="obra-stat-v">+3<em>d</em></span></div>
        <div className="obra-stat"><span className="obra-stat-l">Coste vs. plan</span><span className="obra-stat-v">−1,2<em>%</em></span></div>
        <div className="obra-stat"><span className="obra-stat-l">Entrega prevista</span><span className="obra-stat-v">Sep<em>'27</em></span></div>
      </div>

      <div className="obra-hero">
        <ConstructionSVG tone="warm"/>
        <div className="obra-hero-overlay">
          <div>
            <div className="obra-hero-meta">Edificio Victoria · Las Tablas · Madrid</div>
            <div className="obra-hero-title">Estructura · planta 4 de 7</div>
          </div>
        </div>
      </div>

      <div className="obra-timeline">
        {hitos.map((h, i) => (
          <div key={i} className={'obra-tl-step ' + h.s}>
            <div className="obra-tl-num">Hito {h.n}</div>
            <div className="obra-tl-name">{h.name}</div>
            <div className="obra-tl-date">{h.date}</div>
          </div>
        ))}
      </div>

      <div className="ks-panel">
        <div className="ks-panel-h">
          <span className="eyebrow"><span className="dot"></span>Reportaje fotográfico · semana 12</span>
          <a href="#" className="ks-link">Ver galería completa →</a>
        </div>
        <div className="obra-photos">
          {[
            { c: 'Forjado planta 4', t: 'cool' },
            { c: 'Pilares planta 5', t: 'warm' },
            { c: 'Acopio armaduras', t: 'cool' },
            { c: 'Encofrado núcleo', t: 'warm' },
            { c: 'Vista sur', t: 'cool' },
            { c: 'Cubierta planta 3', t: 'warm' },
          ].map((p, i) => (
            <div key={i} className="obra-photo">
              <ConstructionSVG tone={p.t}/>
              <div className="obra-photo-cap">{p.c} · 22.03.26</div>
            </div>
          ))}
        </div>
      </div>

      <div className="ks-row" style={{ marginTop: 14 }}>
        <div className="ks-panel">
          <div className="ks-panel-h">
            <span className="eyebrow"><span className="dot"></span>Mediciones recientes</span>
          </div>
          <div className="ks-audit">
            {[
              { k: 'm² de forjado ejecutados', v: '1.840 / 4.380 m²' },
              { k: 'm³ hormigón vertido', v: '1.220 m³' },
              { k: 'kg de acero corrugado', v: '184.500 kg' },
              { k: 'Operarios en obra (media)', v: '32 / día' },
              { k: 'Horas trabajadas semana 12', v: '1.420 h' },
            ].map((a, i) => (
              <div key={i} className="ks-audit-row">
                <span className="ks-audit-k">{a.k}</span>
                <span className="ks-audit-v">{a.v}</span>
                <span className="ks-audit-s ok">●</span>
              </div>
            ))}
          </div>
        </div>
        <div className="ks-panel">
          <div className="ks-panel-h">
            <span className="eyebrow"><span className="dot"></span>Próximos hitos</span>
          </div>
          <div className="ks-pay-list">
            {[
              { d: '15 abr 2026', c: 'Forjado planta 5 completado', s: 'next' },
              { d: '30 may 2026', c: 'Forjado planta 6', s: 'pending' },
              { d: '15 jul 2026', c: 'Cubierta', s: 'pending' },
              { d: '30 sep 2026', c: 'Inicio cerramientos', s: 'pending' },
              { d: '15 dic 2026', c: 'Fachada concluida', s: 'pending' },
            ].map((p, i) => (
              <div key={i} className={'ks-pay ' + p.s}>
                <span className="ks-pay-d">{p.d}</span>
                <span className="ks-pay-c">{p.c}</span>
                <span className="ks-pay-a"></span>
                <span className="ks-pay-s">{p.s === 'next' ? '● Próximo' : '○ Programado'}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

// ═══════════════════════════════════════════════════════════
// APORTACIONES
// ═══════════════════════════════════════════════════════════
function ViewPagos() {
  const pagos = [
    { d: '15 sep 2024', c: 'Cuota inicial', dt: 'Reserva de plaza · transferencia', a: 6000, s: 'paid' },
    { d: '15 dic 2024', c: 'Aportación 1', dt: 'Suelo y licencia', a: 4200, s: 'paid' },
    { d: '15 mar 2025', c: 'Aportación 2', dt: 'Cimentación', a: 4200, s: 'paid' },
    { d: '15 jun 2025', c: 'Aportación 3', dt: 'Estructura · planta 1', a: 4200, s: 'paid' },
    { d: '15 sep 2025', c: 'Aportación 4', dt: 'Estructura · planta 2', a: 4200, s: 'paid' },
    { d: '15 dic 2025', c: 'Aportación 5', dt: 'Estructura · planta 3', a: 4200, s: 'paid' },
    { d: '15 mar 2026', c: 'Aportación 6', dt: 'Estructura · planta 4', a: 4200, s: 'paid' },
    { d: '01 abr 2026', c: 'Aportación 7', dt: 'Estructura · planta 5', a: 4200, s: 'next' },
    { d: '15 jun 2026', c: 'Aportación 8', dt: 'Estructura · planta 6', a: 4200, s: 'pending' },
    { d: '15 sep 2026', c: 'Aportación 9', dt: 'Cubierta', a: 4200, s: 'pending' },
    { d: '15 dic 2026', c: 'Aportación 10', dt: 'Cerramientos', a: 4200, s: 'pending' },
    { d: '15 mar 2027', c: 'Aportación 11', dt: 'Instalaciones', a: 4200, s: 'pending' },
    { d: '15 jun 2027', c: 'Aportación final', dt: 'Acabados y entrega', a: 12420, s: 'pending' },
  ];

  return (
    <>
      <div className="ks-h-row">
        <div>
          <div className="ks-h-eyebrow">Aportaciones</div>
          <h1 className="ks-h-title">Tu inversión, <em>al detalle.</em></h1>
        </div>
        <div className="ks-h-meta">IBAN ES76 **** **** **** 4218 · KSA Custodia</div>
      </div>

      <div className="ks-cards">
        <div className="ks-card">
          <div className="ks-card-lbl">Total aportado</div>
          <div className="ks-card-num">38.420<span> €</span></div>
          <div className="ks-bar"><div style={{ width: '46%' }}></div></div>
          <div className="ks-card-mini">46 % del total · 7 de 13 cuotas</div>
        </div>
        <div className="ks-card">
          <div className="ks-card-lbl">Pendiente</div>
          <div className="ks-card-num">45.420<span> €</span></div>
          <div className="ks-card-mini">6 cuotas restantes hasta entrega</div>
        </div>
        <div className="ks-card">
          <div className="ks-card-lbl">Próxima aportación</div>
          <div className="ks-card-num" style={{ fontSize: 32 }}>4.200<span> €</span></div>
          <div className="ks-card-mini" style={{ color: 'var(--brand)' }}>1 abr 2026 · en 6 días</div>
        </div>
        <div className="ks-card">
          <div className="ks-card-lbl">Coste total vivienda</div>
          <div className="ks-card-num">232.400<span> €</span></div>
          <div className="ks-card-mini">96 m² · 2.420 €/m² · al coste</div>
        </div>
      </div>

      <div className="ks-row-1">
        <div className="ks-panel">
          <div className="ks-panel-h">
            <span className="eyebrow"><span className="dot"></span>Plan de aportaciones · 2024 – 2027</span>
            <a href="#" className="ks-link">Descargar plan PDF →</a>
          </div>
          <div className="ks-pay-list">
            {pagos.map((p, i) => (
              <div key={i} className={'ks-pay ' + p.s}>
                <span className="ks-pay-d">{p.d}</span>
                <span className="ks-pay-c">
                  <div style={{ fontWeight: 500 }}>{p.c}</div>
                  <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>{p.dt}</div>
                </span>
                <span className="ks-pay-a">{new Intl.NumberFormat('es-ES').format(p.a)} €</span>
                <span className="ks-pay-s">
                  {p.s === 'paid' && '✓ Pagado'}
                  {p.s === 'next' && '● Próximo'}
                  {p.s === 'pending' && '○ Pendiente'}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="ks-row" style={{ marginTop: 14 }}>
        <div className="ks-panel">
          <div className="ks-panel-h">
            <span className="eyebrow"><span className="dot"></span>Tu vivienda · ficha económica</span>
          </div>
          <div className="ks-audit">
            {[
              { k: 'Suelo (proporcional)', v: '52.300 €' },
              { k: 'Construcción', v: '148.620 €' },
              { k: 'Honorarios técnicos', v: '12.480 €' },
              { k: 'Licencias y tasas', v: '6.200 €' },
              { k: 'Honorarios KSANET (gestora)', v: '8.400 €' },
              { k: 'Reserva contingencia', v: '4.400 €' },
            ].map((a, i) => (
              <div key={i} className="ks-audit-row">
                <span className="ks-audit-k">{a.k}</span>
                <span className="ks-audit-v">{a.v}</span>
                <span className="ks-audit-s ok">●</span>
              </div>
            ))}
            <div className="ks-audit-row" style={{ borderTop: '1px solid var(--ink)', borderBottom: 'none', marginTop: 6 }}>
              <span className="ks-audit-k" style={{ fontWeight: 600 }}>Total al coste</span>
              <span className="ks-audit-v" style={{ fontSize: 14, fontWeight: 600 }}>232.400 €</span>
              <span></span>
            </div>
          </div>
        </div>
        <div className="ks-panel">
          <div className="ks-panel-h">
            <span className="eyebrow"><span className="dot"></span>Datos bancarios · domiciliación</span>
          </div>
          <div className="ks-audit">
            <div className="ks-audit-row"><span className="ks-audit-k">Cuenta de socio</span><span className="ks-audit-v">ES76 **** **** **** 4218</span><span></span></div>
            <div className="ks-audit-row"><span className="ks-audit-k">Custodia</span><span className="ks-audit-v">CaixaBank · cuenta tutelada</span><span></span></div>
            <div className="ks-audit-row"><span className="ks-audit-k">Aval bancario</span><span className="ks-audit-v">Activo · ley 38/1999</span><span className="ks-audit-s ok">●</span></div>
            <div className="ks-audit-row"><span className="ks-audit-k">Forma de pago</span><span className="ks-audit-v">Domiciliación SEPA</span><span></span></div>
          </div>
          <button className="btn btn-primary" style={{ marginTop: 18, width: '100%', justifyContent: 'center' }}>Modificar datos bancarios</button>
        </div>
      </div>
    </>
  );
}

// ═══════════════════════════════════════════════════════════
// AUDITORÍA TÉCNICA
// ═══════════════════════════════════════════════════════════
function ViewAudit() {
  return (
    <>
      <div className="ks-h-row">
        <div>
          <div className="ks-h-eyebrow">Auditoría técnica</div>
          <h1 className="ks-h-title">Una mirada <em>independiente.</em></h1>
        </div>
        <div className="ks-h-meta">Auditor · KSA-TECH Ingeniería · marzo 2026</div>
      </div>

      <div className="audit-hero">
        <div className="audit-hero-l">
          <div className="ks-card-lbl">Calificación global · marzo 2026</div>
          <div className="audit-score">A<sup>+</sup></div>
          <div className="audit-badge">● Sin desviaciones críticas</div>
          <p style={{ marginTop: 24, color: 'var(--ink-2)', maxWidth: 460, lineHeight: 1.6, fontSize: 14 }}>
            La obra avanza dentro del cronograma, con un margen positivo de tres días. La calidad de los materiales y las mediciones de control cumplen o superan las especificaciones del proyecto técnico. No se han registrado incidencias de seguridad ni desviaciones presupuestarias significativas.
          </p>
        </div>
        <div className="audit-hero-r">
          <div className="ks-card-lbl">Datos del informe</div>
          <div className="audit-list" style={{ marginTop: 12 }}>
            <div className="ks-audit-row"><span className="ks-audit-k">Auditor</span><span className="ks-audit-v">KSA-TECH</span><span></span></div>
            <div className="ks-audit-row"><span className="ks-audit-k">Visita de obra</span><span className="ks-audit-v">22 mar 2026</span><span></span></div>
            <div className="ks-audit-row"><span className="ks-audit-k">Informe nº</span><span className="ks-audit-v">2026-03-VIC-12</span><span></span></div>
            <div className="ks-audit-row"><span className="ks-audit-k">Próxima visita</span><span className="ks-audit-v">22 abr 2026</span><span></span></div>
            <div className="ks-audit-row"><span className="ks-audit-k">Periodicidad</span><span className="ks-audit-v">Mensual</span><span></span></div>
          </div>
          <button className="btn btn-primary" style={{ marginTop: 22, width: '100%', justifyContent: 'space-between' }}>
            Descargar informe completo <span className="btn-arrow">↓</span>
          </button>
        </div>
      </div>

      <div className="ks-row" style={{ marginTop: 14 }}>
        <div className="ks-panel">
          <div className="ks-panel-h">
            <span className="eyebrow"><span className="dot"></span>Calidad técnica · materiales</span>
          </div>
          <div className="ks-audit">
            {[
              { k: 'Calidad de hormigón H-30', v: 'Conforme', s: 'ok' },
              { k: 'Resistencia probetas 28 días', v: '34,2 N/mm²', s: 'ok' },
              { k: 'Acero corrugado B500S', v: 'Certificado', s: 'ok' },
              { k: 'Verticalidad muros', v: '± 2 mm', s: 'ok' },
              { k: 'Planeidad forjados', v: '± 3 mm/2m', s: 'ok' },
              { k: 'Recubrimientos armadura', v: 'Conforme', s: 'ok' },
              { k: 'Tolerancias ejecución', v: 'Dentro de norma', s: 'ok' },
            ].map((a, i) => (
              <div key={i} className="ks-audit-row">
                <span className="ks-audit-k">{a.k}</span>
                <span className="ks-audit-v">{a.v}</span>
                <span className={'ks-audit-s ' + a.s}>●</span>
              </div>
            ))}
          </div>
        </div>
        <div className="ks-panel">
          <div className="ks-panel-h">
            <span className="eyebrow"><span className="dot"></span>Seguridad, salud y entorno</span>
          </div>
          <div className="ks-audit">
            {[
              { k: 'Incidencias seguridad (mes)', v: '0', s: 'ok' },
              { k: 'Incidencias graves (acumulado)', v: '0', s: 'ok' },
              { k: 'EPIs y protecciones', v: 'Conforme', s: 'ok' },
              { k: 'Plan de emergencia', v: 'Vigente', s: 'ok' },
              { k: 'Residuos · gestión autorizada', v: '94 % reciclado', s: 'ok' },
              { k: 'Ruido perimetral', v: '< 65 dB', s: 'ok' },
              { k: 'Polvo y vertidos', v: 'Sin incidencias', s: 'ok' },
            ].map((a, i) => (
              <div key={i} className="ks-audit-row">
                <span className="ks-audit-k">{a.k}</span>
                <span className="ks-audit-v">{a.v}</span>
                <span className={'ks-audit-s ' + a.s}>●</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="ks-panel" style={{ marginTop: 14 }}>
        <div className="ks-panel-h">
          <span className="eyebrow"><span className="dot"></span>Histórico de auditorías</span>
        </div>
        <div className="ks-audit">
          {[
            { d: 'Mar 2026', n: '2026-03-VIC-12', s: 'A+', c: 'Sin desviaciones · forjado planta 4', t: 'ok' },
            { d: 'Feb 2026', n: '2026-02-VIC-11', s: 'A+', c: 'Sin desviaciones · forjado planta 3', t: 'ok' },
            { d: 'Ene 2026', n: '2026-01-VIC-10', s: 'A',  c: 'Retraso 2 d. recuperado · ferralla', t: 'warn' },
            { d: 'Dic 2025', n: '2025-12-VIC-09', s: 'A+', c: 'Sin desviaciones · forjado planta 2', t: 'ok' },
            { d: 'Nov 2025', n: '2025-11-VIC-08', s: 'A+', c: 'Sin desviaciones · pilares planta 2', t: 'ok' },
            { d: 'Oct 2025', n: '2025-10-VIC-07', s: 'A+', c: 'Sin desviaciones · forjado planta 1', t: 'ok' },
          ].map((a, i) => (
            <div key={i} className="ks-audit-row" style={{ gridTemplateColumns: '90px 110px 1fr auto auto', gap: 18 }}>
              <span className="ks-audit-v" style={{ color: 'var(--brand)' }}>{a.d}</span>
              <span className="ks-pay-d">{a.n}</span>
              <span className="ks-audit-k">{a.c}</span>
              <span className="ks-audit-v" style={{ fontFamily: 'var(--tight)', fontSize: 16 }}>{a.s}</span>
              <button className="doc-dl">PDF</button>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// ═══════════════════════════════════════════════════════════
// DOCUMENTOS
// ═══════════════════════════════════════════════════════════
function ViewDocs() {
  const [filter, setFilter] = useState('all');
  const docs = [
    { ic: 'PDF', n: 'Estatutos de la cooperativa', m: '15 ene 2024 · v3', sz: '420 KB', tag: 'Firmado', tagS: 'signed', cat: 'legal' },
    { ic: 'PDF', n: 'Contrato de incorporación · socio nº 042', m: '01 sep 2024 · firma electrónica', sz: '380 KB', tag: 'Firmado', tagS: 'signed', cat: 'legal' },
    { ic: 'PDF', n: 'Reglamento de régimen interno', m: '15 ene 2024 · v2', sz: '210 KB', tag: 'Firmado', tagS: 'signed', cat: 'legal' },
    { ic: 'PDF', n: 'Memoria de calidades · Edificio Victoria', m: '20 jul 2024 · v4', sz: '5,2 MB', tag: 'Firmado', tagS: 'signed', cat: 'tecnica' },
    { ic: 'DWG', n: 'Plano de planta · 3B (96 m², 3 dorm)', m: '20 jul 2024', sz: '1,8 MB', tag: '', tagS: '', cat: 'tecnica' },
    { ic: 'PDF', n: 'Proyecto básico · arquitectura', m: '12 mar 2024', sz: '14,4 MB', tag: '', tagS: '', cat: 'tecnica' },
    { ic: 'PDF', n: 'Licencia urbanística · Ayto. Madrid', m: '04 abr 2024', sz: '180 KB', tag: 'Firmado', tagS: 'signed', cat: 'legal' },
    { ic: 'PDF', n: 'Aval bancario · CaixaBank · ley 38/1999', m: '15 sep 2024', sz: '120 KB', tag: 'Firmado', tagS: 'signed', cat: 'legal' },
    { ic: 'PDF', n: 'Auditoría técnica marzo 2026', m: '22 mar 2026', sz: '2,4 MB', tag: 'Firmado', tagS: 'signed', cat: 'auditoria' },
    { ic: 'PDF', n: 'Auditoría técnica febrero 2026', m: '22 feb 2026', sz: '2,2 MB', tag: 'Firmado', tagS: 'signed', cat: 'auditoria' },
    { ic: 'PDF', n: 'Acta asamblea · 12 dic 2025', m: '14 dic 2025', sz: '180 KB', tag: 'Firmado', tagS: 'signed', cat: 'asamblea' },
    { ic: 'PDF', n: 'Acta asamblea · 14 sep 2025', m: '16 sep 2025', sz: '160 KB', tag: 'Firmado', tagS: 'signed', cat: 'asamblea' },
    { ic: 'PDF', n: 'Modificación de proyecto · zona coworking', m: '10 mar 2026', sz: '640 KB', tag: 'Pendiente firma', tagS: 'pending', cat: 'asamblea' },
    { ic: 'XLSX', n: 'Cuenta de explotación · Q1 2026', m: '31 mar 2026', sz: '85 KB', tag: '', tagS: '', cat: 'economica' },
    { ic: 'PDF', n: 'Justificante aportación · mar 2026', m: '15 mar 2026', sz: '60 KB', tag: '', tagS: '', cat: 'economica' },
  ];
  const filtered = filter === 'all' ? docs : docs.filter(d => d.cat === filter);

  return (
    <>
      <div className="ks-h-row">
        <div>
          <div className="ks-h-eyebrow">Documentos</div>
          <h1 className="ks-h-title">Tu cooperativa <em>archivada,</em> firmada, segura.</h1>
        </div>
        <div className="ks-h-meta">{docs.length} documentos · 28 firmados · 1 pendiente</div>
      </div>

      <div className="doc-filters">
        {[
          { k: 'all', l: 'Todos' },
          { k: 'legal', l: 'Legal' },
          { k: 'tecnica', l: 'Técnica' },
          { k: 'auditoria', l: 'Auditoría' },
          { k: 'asamblea', l: 'Asambleas' },
          { k: 'economica', l: 'Económica' },
        ].map(c => (
          <button key={c.k} className={'doc-chip ' + (filter === c.k ? 'active' : '')} onClick={() => setFilter(c.k)}>
            {c.l}
          </button>
        ))}
        <div style={{ flex: 1 }}></div>
        <button className="doc-chip">↓ Descargar selección</button>
      </div>

      <div className="ks-panel" style={{ padding: '8px 24px' }}>
        <div className="doc-list">
          {filtered.map((d, i) => (
            <div key={i} className="doc-row">
              <div className="doc-icon">{d.ic}</div>
              <div>
                <div className="doc-name">{d.n}</div>
                <div className="doc-meta">{d.m}</div>
              </div>
              {d.tag ? <span className={'doc-tag ' + d.tagS}>{d.tag}</span> : <span></span>}
              <span className="doc-size">{d.sz}</span>
              <button className="doc-dl">↓ PDF</button>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// ═══════════════════════════════════════════════════════════
// ASAMBLEAS
// ═══════════════════════════════════════════════════════════
// Email del proyecto / cooperativa al que se envía la confirmación.
// Para cambiar el destinatario, edita esta constante.
const PROJECT_EMAIL = 'cooperativa.victoria@ksanet.es';
const SOCIO = { nombre: 'David Aroca', num: '042', vivienda: '3B · 96 m² · 3 dorm' };

function confirmarAsistencia({ fecha, hora, lugar, modo = 'presencial' }) {
  const subject = `Confirmación de asistencia · Asamblea ${fecha} · Socio nº ${SOCIO.num}`;
  const body = [
    'Estimados,',
    '',
    `Mediante el presente correo confirmo mi asistencia a la asamblea convocada para el ${fecha} a las ${hora} en ${lugar}.`,
    '',
    `Modalidad de asistencia: ${modo === 'online' ? 'videollamada' : 'presencial'}.`,
    '',
    'Datos del socio:',
    `· Nombre: ${SOCIO.nombre}`,
    `· Nº de socio: ${SOCIO.num}`,
    `· Vivienda: ${SOCIO.vivienda}`,
    `· Cooperativa: Edificio Victoria (COOP-2026-LCH-46)`,
    '',
    'Un saludo,',
    SOCIO.nombre,
    '',
    '— Enviado automáticamente desde la Plataforma KSA del cooperativista.'
  ].join('\n');

  const mailto = `mailto:${PROJECT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
  window.location.href = mailto;
}

function ViewAsambleas() {
  const [confirmado, setConfirmado] = useState(false);
  const proximaAsamblea = {
    fecha: '14 de abril de 2026',
    hora: '19:00 h',
    lugar: 'Sede KSANET, c/ Velázquez 122 (Madrid) · y por videollamada',
  };
  const handleConfirmar = () => {
    confirmarAsistencia(proximaAsamblea);
    setConfirmado(true);
  };
  return (
    <>
      <div className="ks-h-row">
        <div>
          <div className="ks-h-eyebrow">Asambleas</div>
          <h1 className="ks-h-title">Cada decisión, <em>tuya.</em></h1>
        </div>
        <div className="ks-h-meta">Próxima · 14 abril 2026 · 19:00</div>
      </div>

      {/* Próxima asamblea */}
      <div className="assembly-card next">
        <div className="assembly-h">
          <div>
            <div className="assembly-tag">Próxima asamblea</div>
            <div className="assembly-date" style={{ marginTop: 8 }}>14 <em>abril</em> 2026</div>
            <div className="assembly-loc" style={{ marginTop: 8 }}>19:00 h · Sede KSANET, c/ Velázquez 122 · y por videollamada</div>
          </div>
          <div className="assembly-status live">● Inscripción abierta</div>
        </div>

        <div className="ks-side-h" style={{ color: 'var(--muted)', marginBottom: 10 }}>Orden del día</div>
        <div className="assembly-agenda">
          {[
            { n: '01', name: 'Aprobación del acta de la asamblea anterior', v: 'Vota →' },
            { n: '02', name: 'Informe de gestión Q1 2026', v: 'Vota →' },
            { n: '03', name: 'Modificación del proyecto: ampliación zona coworking (+22 m²)', v: 'Vota →' },
            { n: '04', name: 'Aprobación calendario aportaciones 2026-2027', v: 'Vota →' },
            { n: '05', name: 'Propuestas de socios y ruegos', v: '—' },
          ].map((it, i) => (
            <div key={i} className="agenda-item">
              <span className="agenda-num">{it.n}</span>
              <span className="agenda-name">{it.name}</span>
              <span className="agenda-vote">{it.v}</span>
            </div>
          ))}
        </div>

        <div className="ks-vote" style={{ marginTop: 18 }}>
          <div className="ks-vote-q">Punto 03 · Ampliación de la zona de coworking en planta baja (+22 m²)</div>
          <div className="ks-vote-meta">Coste estimado · +18.400 € · 219 € por socio</div>
          <div className="ks-vote-bars">
            <div className="ks-vote-bar"><span className="lbl">A favor</span><div className="bar"><div style={{ width: '64%', background: 'var(--moss)' }}></div></div><span className="num">45</span></div>
            <div className="ks-vote-bar"><span className="lbl">En contra</span><div className="bar"><div style={{ width: '17%', background: 'var(--brand)' }}></div></div><span className="num">12</span></div>
            <div className="ks-vote-bar"><span className="lbl">Abstención</span><div className="bar"><div style={{ width: '6%', background: 'var(--ink-2)' }}></div></div><span className="num">4</span></div>
            <div className="ks-vote-bar"><span className="lbl">Sin votar</span><div className="bar"><div style={{ width: '14%', background: 'var(--line-2)' }}></div></div><span className="num">10</span></div>
          </div>
        </div>

        <div className="assembly-actions">
          <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={handleConfirmar}>
            {confirmado ? '✓ Asistencia confirmada' : 'Confirmar asistencia'}
          </button>
          <button className="btn btn-ghost" style={{ flex: 1, justifyContent: 'center' }}>Votar online ahora</button>
          <button className="btn btn-ghost" style={{ flex: 1, justifyContent: 'center' }}>Descargar dossier (PDF)</button>
        </div>
        {confirmado && (
          <div style={{
            marginTop: 14, padding: '12px 16px',
            background: 'rgba(74,90,58,0.08)', border: '1px solid var(--moss)',
            fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em',
            color: 'var(--moss)', textTransform: 'uppercase'
          }}>
            ✓ Se ha abierto tu cliente de correo con la confirmación dirigida a {PROJECT_EMAIL}. Revisa y pulsa enviar.
          </div>
        )}
      </div>

      {/* Histórico */}
      <div className="ks-side-h" style={{ marginTop: 32, marginBottom: 14, padding: 0 }}>Asambleas anteriores</div>

      {[
        {
          d: '12', m: 'diciembre', y: '2025', tag: 'Ordinaria · cierre 2025', loc: 'Sede KSANET · 24 socios presenciales · 47 online',
          agenda: [
            'Aprobación cuentas anuales 2025 · 71 a favor · 0 en contra',
            'Renovación contrato auditor técnico · 68 a favor · 3 abstención',
            'Calendario asambleas 2026 · 71 a favor',
            'Aprobación calidades · alicatado baño principal · 65 a favor · 6 en contra',
          ]
        },
        {
          d: '14', m: 'septiembre', y: '2025', tag: 'Extraordinaria · estructura',
          loc: 'Videollamada · 71 socios',
          agenda: [
            'Aprobación inicio fase estructura · 71 a favor',
            'Modificación menor proyecto · trasteros planta -1 · 69 a favor · 2 en contra',
            'Selección empresa de instalaciones · 71 a favor',
          ]
        },
        {
          d: '20', m: 'abril', y: '2025', tag: 'Ordinaria',
          loc: 'Sede KSANET · 21 presenciales · 50 online',
          agenda: [
            'Informe avance · cimentación completada',
            'Aprobación segundo desembolso de aportaciones · 71 a favor',
            'Información sobre auditoría técnica anual',
          ]
        },
      ].map((a, i) => (
        <div key={i} className="assembly-card">
          <div className="assembly-h">
            <div style={{ display: 'flex', gap: 24, alignItems: 'flex-end' }}>
              <div className="assembly-date">{a.d} <em>{a.m.substring(0,3)}</em></div>
              <div className="assembly-meta">
                <div className="assembly-tag">{a.tag}</div>
                <div className="assembly-loc">{a.loc}</div>
              </div>
            </div>
            <div className="assembly-status done">✓ Celebrada</div>
          </div>
          <div className="assembly-agenda">
            {a.agenda.map((it, j) => (
              <div key={j} className="agenda-item">
                <span className="agenda-num">·</span>
                <span className="agenda-name" style={{ fontSize: 13.5, color: 'var(--ink-2)' }}>{it}</span>
                <span className="agenda-vote done">Aprobado</span>
              </div>
            ))}
          </div>
          <div className="assembly-actions">
            <button className="doc-dl">↓ Acta firmada · PDF</button>
            <button className="doc-dl">↓ Grabación</button>
            <button className="doc-dl">↓ Resultado de votaciones</button>
          </div>
        </div>
      ))}
    </>
  );
}

// ═══════════════════════════════════════════════════════════
// MENSAJES
// ═══════════════════════════════════════════════════════════
function ViewMensajes() {
  const threads = [
    { id: 0, from: 'Lucía Bermejo', role: 'Tu gestora KSANET', initials: 'LB', av: 'team', subj: 'Próxima visita de obra · viernes 28', prev: 'Hola David, te confirmo que la visita de obra abierta a socios será...', time: 'Hoy 11:42', unread: true },
    { id: 1, from: 'KSA-TECH Auditor', role: 'Auditoría técnica', initials: 'KT', av: 'audit', subj: 'Informe auditoría marzo · firmado y publicado', prev: 'Buenas tardes, ya tienes disponible el informe de auditoría correspondiente al mes...', time: 'Ayer', unread: true },
    { id: 2, from: 'Cooperativa Victoria', role: 'Junta rectora', initials: 'CV', av: 'team', subj: 'Convocatoria asamblea 14 abril', prev: 'Estimados socios, se convoca asamblea ordinaria para el próximo 14 de abril...', time: '23 mar', unread: false },
    { id: 3, from: 'Marta Hidalgo', role: 'Personalización vivienda', initials: 'MH', av: 'team', subj: 'Confirmación de tus calidades · 3B', prev: 'David, hemos recibido tu selección de acabados. Te confirmo...', time: '20 mar', unread: false },
    { id: 4, from: 'KSANET Administración', role: 'Sistema', initials: 'KS', av: 'team', subj: 'Recibo aportación marzo · descarga disponible', prev: 'Tu aportación nº 6 ha sido cobrada correctamente. Adjuntamos...', time: '15 mar', unread: false },
    { id: 5, from: 'Lucía Bermejo', role: 'Tu gestora KSANET', initials: 'LB', av: 'team', subj: 'Cambio puntual en plan de pagos', prev: 'Hola David, te informo de un pequeño ajuste en el calendario...', time: '08 mar', unread: false },
  ];
  const [active, setActive] = useState(0);
  const cur = threads[active];

  return (
    <>
      <div className="ks-h-row">
        <div>
          <div className="ks-h-eyebrow">Mensajes</div>
          <h1 className="ks-h-title">Habla con tu <em>cooperativa.</em></h1>
        </div>
        <div className="ks-h-meta">2 sin leer · 6 conversaciones</div>
      </div>

      <div className="msg-layout">
        <div className="msg-list">
          <div className="msg-search">
            <input type="text" placeholder="Buscar en mensajes…"/>
          </div>
          {threads.map((t, i) => (
            <div key={t.id}
                 className={'msg-row ' + (i === active ? 'active ' : '') + (t.unread ? 'unread' : '')}
                 onClick={() => setActive(i)}
                 style={{ position: 'relative' }}>
              <div className={'msg-av ' + t.av}>{t.initials}</div>
              <div className="msg-meta">
                <div className="msg-from">
                  <span className="msg-name">{t.from}</span>
                  <span className="msg-time">{t.time}</span>
                </div>
                <div className="msg-subj">{t.subj}</div>
                <div className="msg-prev">{t.prev}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="msg-thread">
          <div className="msg-thread-h">
            <div>
              <div className="msg-thread-subj">{cur.subj}</div>
              <div className="msg-thread-from">De · {cur.from} ({cur.role}) · {cur.time}</div>
            </div>
            <div className="msg-thread-actions">
              <button className="ks-icon-btn" title="Archivar">▤</button>
              <button className="ks-icon-btn" title="Marcar no leído">◌</button>
              <button className="ks-icon-btn" title="Adjuntar a expediente">◇</button>
            </div>
          </div>
          <div className="msg-body">
            {active === 0 && <>
              <p>Hola David,</p>
              <p>Te confirmo que la <strong>visita de obra abierta a socios</strong> será el <strong>viernes 28 de marzo a las 17:00</strong>. Nos reuniremos en la caseta de obra (acceso por calle Tablas, 14) con casco y chaleco que proporcionamos en sitio.</p>
              <p>Recorreremos las plantas 1 a 4 (forjado finalizado) acompañados de Roberto, jefe de obra, y Marina, nuestra arquitecta auditora. Después tendremos un café para resolver dudas.</p>
              <p>Si prefieres asistir por videollamada, te enviaré el enlace 15 minutos antes.</p>
              <p>Confírmame asistencia respondiendo a este mensaje. Un abrazo,<br/><strong>Lucía Bermejo</strong> · gestora cooperativa Victoria</p>
              <div className="msg-attach">
                <div className="doc-icon">PDF</div>
                <div>
                  <div style={{ color: 'var(--ink)', fontFamily: 'var(--tight)', fontSize: 13, marginBottom: 2 }}>Plan de visita · viernes 28.pdf</div>
                  <div>180 KB · 2 páginas</div>
                </div>
                <button className="doc-dl" style={{ marginLeft: 'auto' }}>↓ Descargar</button>
              </div>
            </>}
            {active === 1 && <>
              <p>Buenas tardes, David:</p>
              <p>Ya tienes disponible el <strong>informe de auditoría técnica correspondiente a marzo de 2026</strong>. La obra continúa avanzando dentro del plan, con un margen positivo de 3 días respecto al cronograma y sin desviaciones presupuestarias relevantes.</p>
              <p>Calificación global: <strong>A+</strong>. Sin incidencias críticas. Las probetas de hormigón H-30 alcanzan 34,2 N/mm², muy por encima del mínimo exigido.</p>
              <p>Cualquier consulta técnica, respondemos por aquí o en la asamblea del 14 de abril.</p>
              <p>Un saludo,<br/><strong>KSA-TECH · Auditoría independiente</strong></p>
              <div className="msg-attach">
                <div className="doc-icon">PDF</div>
                <div>
                  <div style={{ color: 'var(--ink)', fontFamily: 'var(--tight)', fontSize: 13, marginBottom: 2 }}>Auditoria-Victoria-2026-03.pdf</div>
                  <div>2,4 MB · firmada electrónicamente</div>
                </div>
                <button className="doc-dl" style={{ marginLeft: 'auto' }}>↓ Descargar</button>
              </div>
            </>}
            {active >= 2 && <>
              <p>Hola David,</p>
              <p>{cur.prev}</p>
              <p>Quedamos a tu disposición para cualquier aclaración.</p>
              <p>Un saludo,<br/><strong>{cur.from}</strong></p>
            </>}
          </div>
          <div className="msg-reply">
            <textarea placeholder="Escribe tu respuesta a Lucía…"></textarea>
            <div className="msg-reply-actions">
              <button className="btn btn-ghost">Adjuntar</button>
              <button className="btn btn-primary">Enviar respuesta →</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// Exportamos al window para que platform.jsx los pueda usar
Object.assign(window, { ViewObra, ViewPagos, ViewAudit, ViewDocs, ViewAsambleas, ViewMensajes });