// ============================================================
// SEÇÃO · Prioridade média — Revisão 16/jun (briefing de ajustes)
//  eventosCicloRev16 · enquetesRev16 · kanbanRev16
//  Completa o que faltava do bloco médio: ciclo de vida do
//  Evento (pré/durante/pós + clipping) e os dois itens ainda
//  ausentes da Área do Sócio (enquetes + Kanban de entregas).
//  Esportes, Agenda e Patrocínio já estão cobertos em outras
//  seções — não duplicados aqui.
// ============================================================

// Selo de patrocínio de evento (reuso local, dashed).
const SealMed = ({ name, style }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 4, background: 'rgba(255,255,255,.88)', border: '1px solid var(--wf-line)', ...style }}>
    <Data style={{ textTransform: 'uppercase', letterSpacing: '.1em' }}>Apresentado por</Data>
    <div style={{ width: 48, height: 16, border: '1px solid var(--wf-line)', borderRadius: 2, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Data style={{ fontSize: 8 }}>{name}</Data></div>
  </div>
);
// Badge de estado do ciclo (canto do hero).
const PhaseBadge = ({ kind }) => {
  const map = {
    pre: { t: 'Inscrições abertas', dot: 'var(--wf-navy)' },
    live: { t: 'Ao vivo', dot: '#c0392b' },
    post: { t: 'Encerrado', dot: 'var(--wf-faint)' },
  }[kind];
  return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 9px', borderRadius: 999, background: 'rgba(255,255,255,.9)', border: '1px solid var(--wf-line)' }}>
    <span style={{ width: 7, height: 7, borderRadius: '50%', background: map.dot }} /><Data style={{ color: 'var(--wf-ink)' }}>{map.t}</Data>
  </span>;
};
// Card de clipping de mídia (cobertura de imprensa pós-evento).
const Clip = () => (
  <div className="wf-between wf-card" style={{ padding: 11 }}>
    <div className="wf-row" style={{ gap: 10, alignItems: 'center' }}>
      <Box w={36} h={36} label="" style={{ flex: '0 0 36px' }} />
      <div><Data style={{ color: 'var(--wf-navy)', marginBottom: 4 }}>Veículo de imprensa</Data><div className="wf-bar" style={{ width: 120, height: 9 }} /></div>
    </div>
    <span style={{ color: 'var(--wf-navy)' }}>↗</span>
  </div>
);
// Countdown compacto (reuso do hero).
const Countdown = () => (
  <div className="wf-row" style={{ gap: 6 }}>
    {[['12', 'd'], ['08', 'h'], ['23', 'm']].map(([n, l]) => (
      <div key={l} style={{ background: 'var(--wf-navy-08)', border: '1px solid var(--wf-navy-14)', borderRadius: 4, padding: '6px 9px', textAlign: 'center', minWidth: 40 }}>
        <div className="wf-h sm" style={{ color: 'var(--wf-navy)' }}>{n}</div><Data>{l}</Data>
      </div>
    ))}
  </div>
);

// Shell logado mínimo (a Área do Sócio detalha o resto).
function LoggedTop({ active, tabs = ['Início', 'Comunicados', 'Documentos', 'Enquetes', 'Entregas', 'Ouvidoria', 'Ética'] }) {
  return (
    <>
      <div className="wf-statusbar"><span>9:41</span><span>▰▰▰ ◢ 100%</span></div>
      <div className="wf-between" style={{ padding: '11px 16px', background: 'var(--wf-navy-08)', borderBottom: '1px solid var(--wf-line-2)' }}>
        <div className="wf-row" style={{ gap: 10, alignItems: 'center' }}><Avatar s={30} label="S" /><div><div className="wf-h sm">Olá, Sócio</div><Data>Titular · nº 0427</Data></div></div>
        <Data>Sair</Data>
      </div>
      <div style={{ padding: '9px 16px', borderBottom: '1px solid var(--wf-line-2)', display: 'flex', gap: 14, overflow: 'hidden' }}>
        {tabs.map(t => <span key={t} className="wf-h sm" style={{ color: t === active ? 'var(--wf-navy)' : 'var(--wf-muted)', whiteSpace: 'nowrap', borderBottom: t === active ? '2px solid var(--wf-navy)' : 'none', paddingBottom: 6 }}>{t}</span>)}
      </div>
    </>
  );
}

// =====================================================================
// 6 · EVENTOS — ciclo de vida (pré / durante / pós) + clipping de mídia.
//     Completa o template: o mesmo evento muda de estado pelo CMS.
// =====================================================================
function eventosCicloRev16() {
  const Frame = ({ vp, children }) => (
    <div style={{ flex: '0 0 auto' }}>
      <div className="wf-vp">{vp}</div>
      <div className="wf-screen is-mobile" style={{ width: 304 }}>{children}</div>
    </div>
  );
  return [
    <DCArtboard key="evCiclo" id="rev-eventos-ciclo" label="Eventos · ciclo de vida (pré · durante · pós + clipping)" width={1360} height={1640} style={ABS}>
      <div className="wf-sheet">

        {/* PRÉ-EVENTO */}
        <Frame vp="① Pré-evento (anúncio + inscrição)">
          <MobileHeader logged={false} />
          <div style={{ position: 'relative' }}>
            <Img h={150} label="Hero · regata" style={{ borderRadius: 0, border: 'none' }} />
            <div style={{ position: 'absolute', top: 10, left: 10 }}><PhaseBadge kind="pre" /></div>
            <div style={{ position: 'absolute', top: 10, right: 10 }}><SealMed name="Daycoval" /></div>
          </div>
          <div style={{ padding: '14px 16px' }}>
            <Tag navy>Regata · Oceânico</Tag>
            <div className="wf-h md" style={{ margin: '9px 0 10px' }}>Circuito Ilhabela · Etapa 2</div>
            <div className="wf-stack" style={{ gap: 7, marginBottom: 14 }}><Data>📅 18–20 jul 2026</Data><Data>📍 Raia YCI · Ilhabela</Data></div>
            <Eyebrow style={{ marginBottom: 8 }}>Faltam</Eyebrow>
            <div style={{ marginBottom: 14 }}><Countdown /></div>
            <Btn variant="primary" block ar style={{ marginBottom: 16 }}>Inscrever-se</Btn>
            <Eyebrow style={{ marginBottom: 10 }}>Programação prevista</Eyebrow>
            <div className="wf-stack" style={{ gap: 0, marginBottom: 14 }}>{[['18/jul', 'Briefing e largada'], ['19/jul', 'Regatas'], ['20/jul', 'Premiação']].map(([d, t]) => <div key={d} className="wf-row" style={{ gap: 12, padding: '10px 0', borderBottom: '1px solid var(--wf-line-2)' }}><Data style={{ flex: '0 0 50px', color: 'var(--wf-navy)' }}>{d}</Data><div className="wf-h sm">{t}</div></div>)}</div>
            <Eyebrow style={{ marginBottom: 10 }}>Documentos · aviso de regata</Eyebrow>
            <div className="wf-stack" style={{ gap: 10 }}><DocRow /><DocRow /></div>
          </div>
          <Footer mobile />
        </Frame>

        {/* DURANTE */}
        <Frame vp="② Durante (ao vivo)">
          <MobileHeader logged={false} />
          <div style={{ position: 'relative' }}>
            <Img h={150} video label="" style={{ borderRadius: 0, border: 'none' }} />
            <div style={{ position: 'absolute', top: 10, left: 10 }}><PhaseBadge kind="live" /></div>
          </div>
          <div style={{ padding: '14px 16px' }}>
            <Tag navy>Regata · Oceânico</Tag>
            <div className="wf-h md" style={{ margin: '9px 0 10px' }}>Circuito Ilhabela · Etapa 2</div>
            <div className="wf-card" style={{ padding: 12, marginBottom: 14, background: 'var(--wf-fill-2)' }}>
              <div className="wf-between"><Data style={{ color: 'var(--wf-ink)' }}>🌬 Vento agora</Data><Data style={{ color: 'var(--wf-navy)', fontWeight: 700 }}>14–18 kn SE</Data></div>
            </div>
            <div className="wf-between" style={{ marginBottom: 10 }}><Eyebrow>Resultados parciais</Eyebrow><span className="wf-data" style={{ color: '#c0392b' }}>● ao vivo</span></div>
            <div className="wf-card" style={{ padding: 0, marginBottom: 16 }}>{[1, 2, 3, 4].map(p => <ResultRow key={p} pos={p} />)}</div>
            <Eyebrow style={{ marginBottom: 10 }}>Hoje · 19/jul</Eyebrow>
            <div className="wf-stack" style={{ gap: 0, marginBottom: 16 }}>{[['10:00', 'Regata 3 — largada'], ['14:00', 'Regata 4 — largada']].map(([h, t]) => <div key={t} className="wf-row" style={{ gap: 12, padding: '10px 0', borderBottom: '1px solid var(--wf-line-2)' }}><Data style={{ flex: '0 0 44px', color: 'var(--wf-navy)' }}>{h}</Data><div className="wf-h sm">{t}</div></div>)}</div>
            <div className="wf-between" style={{ marginBottom: 10 }}><Eyebrow>Galeria · atualizando</Eyebrow><Data>+ ao longo do dia</Data></div>
            <div className="wf-row" style={{ gap: 6 }}><Img w="33%" h={62} label="" /><Img w="33%" h={62} label="" /><Img w="33%" h={62} label="" /></div>
          </div>
          <Footer mobile />
        </Frame>

        {/* PÓS-EVENTO */}
        <Frame vp="③ Pós-evento (resultados + clipping)">
          <MobileHeader logged={false} />
          <div style={{ position: 'relative' }}>
            <Img h={150} label="Hero · regata" style={{ borderRadius: 0, border: 'none' }} />
            <div style={{ position: 'absolute', top: 10, left: 10 }}><PhaseBadge kind="post" /></div>
          </div>
          <div style={{ padding: '14px 16px' }}>
            <Tag navy>Regata · Oceânico</Tag>
            <div className="wf-h md" style={{ margin: '9px 0 10px' }}>Circuito Ilhabela · Etapa 2</div>
            <Data style={{ marginBottom: 14 }}>Realizada · 18–20 jul 2026</Data>
            <Eyebrow style={{ marginBottom: 10 }}>Pódio · resultado final</Eyebrow>
            <div className="wf-card" style={{ padding: 0, marginBottom: 16 }}>{[1, 2, 3].map(p => <ResultRow key={p} pos={p} />)}</div>
            <Link style={{ marginBottom: 16, display: 'inline-block' }}>Ver classificação completa ↗</Link>
            <div className="wf-between" style={{ marginBottom: 10 }}><Eyebrow>Galeria do evento</Eyebrow><Data>48 fotos</Data></div>
            <div className="wf-row" style={{ gap: 6, marginBottom: 16 }}><Img w="33%" h={62} label="" /><Img w="33%" h={62} label="" /><Img w="33%" h={62} label="" /></div>
            <Eyebrow style={{ marginBottom: 10 }}>Clipping de mídia</Eyebrow>
            <div className="wf-stack" style={{ gap: 10, marginBottom: 16 }}><Clip /><Clip /><Clip /></div>
            <Eyebrow style={{ marginBottom: 10 }}>Patrocinadores</Eyebrow>
            <div className="wf-row" style={{ gap: 8, flexWrap: 'wrap' }}><div style={{ width: 70, height: 30, border: '1px solid var(--wf-line)', borderRadius: 3, background: '#fff' }} /><div style={{ width: 70, height: 30, border: '1px solid var(--wf-line)', borderRadius: 3, background: '#fff' }} /><div style={{ width: 70, height: 30, border: '1px solid var(--wf-line)', borderRadius: 3, background: '#fff' }} /></div>
          </div>
          <Footer mobile />
        </Frame>

        <div className="wf-notes">
          <div className="wf-notes-title">Notas · ciclo de vida do evento (§6)</div>
          <p className="wf-note">Prio. MÉDIA · §6 — <b>um único conteúdo de Evento</b> que muda de estado pelo CMS; não são três páginas. A página de regata robusta (seção Vida) é o molde; aqui mostramos como ela <b>evolui no tempo</b>.</p>
          <p className="wf-note"><b>① Pré</b>: anúncio + <b>contagem regressiva</b> + <b>inscrição aberta</b> + programação prevista + aviso de regata (documentos) + selo de patrocínio.</p>
          <p className="wf-note"><b>② Durante</b>: badge <b>"ao vivo"</b> + <b>resultados parciais</b> em tempo real + programação do dia + galeria que cresce. Vento ao vivo no topo.</p>
          <p className="wf-note"><b>③ Pós</b>: <b>resultado final</b> (pódio + classificação) + galeria completa + <b>clipping de mídia</b> (cobertura de imprensa) + grade de patrocinadores.</p>
          <p className="wf-note wf-note-state"><b>Regras</b>: estado derivado das datas (antes/entre/depois). Sem inscrição online de pagamento na Fase 1 — CTA leva a formulário/secretaria. Resultados e clipping são blocos opcionais por evento.</p>
        </div>
      </div>
    </DCArtboard>,
  ];
}
window.eventosCicloRev16 = eventosCicloRev16;

// =====================================================================
// 7 · ÁREA DO SÓCIO · ENQUETES — consulta aos sócios (item do briefing
//     ainda ausente). Lista + votar + resultado.
// =====================================================================
function enquetesRev16() {
  return [
    <DCArtboard key="enq" id="rev-enquetes" label="Área do Sócio · Enquetes" width={SHEETW(390)} height={1430} style={ABS}>
      <Sheet mobile vp="Mobile · 390 · logado" screenW={390}
        notes={[
          'Prio. MÉDIA · §4 (Área do Sócio) — <b>enquetes</b> ainda não existiam nas telas.',
          { pin: 1, t: '<b>Lista</b> de enquetes: abertas (com prazo) e encerradas (com resultado).' },
          { pin: 2, t: '<b>Votar</b>: opções em seleção única; um voto por sócio.' },
          { pin: 3, t: '<b>Resultado</b> em barras após votar ou após o prazo.' },
          { state: true, t: 'Voto <b>vinculado ao sócio</b> (evita duplicidade), mas resultado <b>agregado/anônimo</b> — coerente com a LGPD.' },
          'Consulta não-vinculante por padrão; assembleias formais seguem por documento/edital.',
        ]}>
        <LoggedTop active="Enquetes" />
        <div style={{ position: 'relative', padding: 16 }}>
          <Pin n={1} style={{ position: 'absolute', left: 4, top: 8, zIndex: 6 }} />
          <div className="wf-row" style={{ gap: 7, overflow: 'hidden', marginBottom: 16 }}>{['Abertas', 'Encerradas'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>

          {/* Enquete ativa · votar */}
          <Pin n={2} style={{ position: 'absolute', left: 4, top: 64, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 14, marginBottom: 16 }}>
            <div className="wf-between" style={{ marginBottom: 10 }}><Tag navy>Aberta</Tag><Data>encerra em 5 dias</Data></div>
            <div className="wf-h sm" style={{ marginBottom: 4 }}>Qual tema para a confraternização de fim de ano?</div>
            <Data style={{ marginBottom: 14 }}>Diretoria Social · seleção única</Data>
            <div className="wf-stack" style={{ gap: 10, marginBottom: 14 }}>
              {[['Noite náutica', true], ['Luau na praia', false], ['Jantar de gala', false]].map(([t, on]) => (
                <div key={t} className="wf-row" style={{ gap: 10, alignItems: 'center', padding: '11px 12px', border: '1px solid var(--wf-line-2)', borderRadius: 6, background: on ? 'var(--wf-navy-08)' : 'var(--wf-screen)' }}>
                  <span style={{ width: 18, height: 18, borderRadius: '50%', border: '1.5px solid ' + (on ? 'var(--wf-navy)' : 'var(--wf-line)'), display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 18px' }}>{on && <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--wf-navy)' }} />}</span>
                  <div className="wf-h sm" style={{ color: on ? 'var(--wf-navy)' : 'var(--wf-ink)' }}>{t}</div>
                </div>
              ))}
            </div>
            <Btn variant="primary" block>Confirmar voto</Btn>
          </div>

          {/* Enquete encerrada · resultado */}
          <Pin n={3} style={{ position: 'absolute', left: 4, top: 520, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 14 }}>
            <div className="wf-between" style={{ marginBottom: 10 }}><Tag>Encerrada</Tag><Data>142 votos</Data></div>
            <div className="wf-h sm" style={{ marginBottom: 14 }}>Horário preferido para as aulas de vela infantil?</div>
            <div className="wf-stack" style={{ gap: 12 }}>
              {[['Manhã', 58], ['Tarde', 31], ['Fim de semana', 11]].map(([t, pct]) => (
                <div key={t}>
                  <div className="wf-between" style={{ marginBottom: 5 }}><div className="wf-t sm">{t}</div><Data style={{ color: 'var(--wf-navy)', fontWeight: 700 }}>{pct}%</Data></div>
                  <div style={{ height: 8, borderRadius: 4, background: 'var(--wf-fill)', overflow: 'hidden' }}><div style={{ width: pct + '%', height: '100%', background: 'var(--wf-navy)', opacity: pct === 58 ? 1 : .45 }} /></div>
                </div>
              ))}
            </div>
            <Data style={{ marginTop: 14, display: 'block' }}>Você votou · resultado agregado e anônimo.</Data>
          </div>
        </div>
        <div className="wf-botnav">{['Início', 'Comunicados', 'Documentos', 'Enquetes', 'Mais'].map((t, i) => <div key={t} className={'it' + (i === 3 ? ' on' : '')}><div className="ic" /><small>{t}</small></div>)}</div>
      </Sheet>
    </DCArtboard>,
    // Enquetes · Desktop (par do Kanban)
    <DCArtboard key="enqD" id="rev-enquetes-d" label="Área do Sócio · Enquetes · Desktop" width={SHEETW(1080)} height={720} style={ABS}>
      <Sheet vp="Desktop · 1080 · logado" screenW={1080}
        notes={[
          'Versão <b>desktop</b> de Enquetes (par do Kanban).',
          { pin: 1, t: 'Nav lateral da Área do Sócio.' },
          { pin: 2, t: '<b>Votar</b> (esquerda) e <b>resultado</b> de encerradas (direita).' },
          'Voto vinculado ao sócio; resultado agregado/anônimo (LGPD).',
        ]}>
        <div className="wf-topbar" style={{ background: 'var(--wf-navy-08)' }}>
          <Logo /><div style={{ flex: 1 }} /><div className="wf-langs"><span className="on">PT</span>/<span>EN</span></div><div className="wf-btn plain sm" style={{ gap: 8 }}><Avatar s={20} label="S" />Sócio · 0427</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', minHeight: 540 }}>
          <div style={{ borderRight: '1px solid var(--wf-line-2)', padding: 20, position: 'relative' }}>
            <div className="wf-eyebrow" style={{ marginBottom: 14 }}>Área do Sócio</div>
            <Pin n={1} style={{ position: 'absolute', left: 4, top: 150, zIndex: 6 }} />
            <div className="wf-stack" style={{ gap: 4 }}>{['Início', 'Comunicados', 'Documentos', 'Enquetes', 'Entregas da diretoria', 'Ouvidoria', 'Canal de Ética'].map(t => <div key={t} style={{ padding: '10px 12px', borderRadius: 6, background: t === 'Enquetes' ? 'var(--wf-navy-08)' : 'transparent', color: t === 'Enquetes' ? 'var(--wf-navy)' : 'var(--wf-ink)', fontWeight: t === 'Enquetes' ? 600 : 500, fontSize: 13 }}>{t}</div>)}</div>
          </div>
          <div style={{ padding: 28 }}>
            <div className="wf-between" style={{ marginBottom: 18 }}>
              <div><div className="wf-h lg">Enquetes</div><Data style={{ marginTop: 4 }}>Consulta aos sócios · não-vinculante</Data></div>
              <div className="wf-row" style={{ gap: 7 }}><Chip active>Abertas</Chip><Chip>Encerradas</Chip></div>
            </div>
            <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              <Pin n={2} style={{ position: 'absolute', left: -22, top: 0, zIndex: 6 }} />
              <div className="wf-card" style={{ padding: 18 }}>
                <div className="wf-between" style={{ marginBottom: 10 }}><Tag navy>Aberta</Tag><Data>encerra em 5 dias</Data></div>
                <div className="wf-h md" style={{ marginBottom: 4 }}>Tema da confraternização de fim de ano?</div>
                <Data style={{ marginBottom: 16 }}>Diretoria Social · seleção única</Data>
                <div className="wf-stack" style={{ gap: 10, marginBottom: 16 }}>{[['Noite náutica', true], ['Luau na praia', false], ['Jantar de gala', false]].map(([t, on]) => <div key={t} className="wf-row" style={{ gap: 10, alignItems: 'center', padding: '12px 14px', border: '1px solid var(--wf-line-2)', borderRadius: 6, background: on ? 'var(--wf-navy-08)' : 'var(--wf-screen)' }}><span style={{ width: 18, height: 18, borderRadius: '50%', border: '1.5px solid ' + (on ? 'var(--wf-navy)' : 'var(--wf-line)'), display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 18px' }}>{on && <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--wf-navy)' }} />}</span><div className="wf-h sm" style={{ color: on ? 'var(--wf-navy)' : 'var(--wf-ink)' }}>{t}</div></div>)}</div>
                <Btn variant="primary" block>Confirmar voto</Btn>
              </div>
              <div className="wf-card" style={{ padding: 18 }}>
                <div className="wf-between" style={{ marginBottom: 10 }}><Tag>Encerrada</Tag><Data>142 votos</Data></div>
                <div className="wf-h md" style={{ marginBottom: 16 }}>Horário das aulas de vela infantil?</div>
                <div className="wf-stack" style={{ gap: 14 }}>{[['Manhã', 58], ['Tarde', 31], ['Fim de semana', 11]].map(([t, pct]) => <div key={t}><div className="wf-between" style={{ marginBottom: 5 }}><div className="wf-t sm">{t}</div><Data style={{ color: 'var(--wf-navy)', fontWeight: 700 }}>{pct}%</Data></div><div style={{ height: 8, borderRadius: 4, background: 'var(--wf-fill)', overflow: 'hidden' }}><div style={{ width: pct + '%', height: '100%', background: 'var(--wf-navy)', opacity: pct === 58 ? 1 : .45 }} /></div></div>)}</div>
                <Data style={{ marginTop: 16, display: 'block' }}>Você votou · resultado agregado e anônimo.</Data>
              </div>
            </div>
          </div>
        </div>
      </Sheet>
    </DCArtboard>,
  ];
}
window.enquetesRev16 = enquetesRev16;

// =====================================================================
// 8 · ÁREA DO SÓCIO · KANBAN DE ENTREGAS DA DIRETORIA — transparência
//     (sugestão da ata, ainda ausente). Quadro de entregas por status.
// =====================================================================
function kanbanRev16() {
  const Card = ({ dir, prazo, done }) => (
    <div className="wf-card" style={{ padding: 12, marginBottom: 10 }}>
      <div className="wf-between" style={{ marginBottom: 8 }}><Tag navy>{dir}</Tag>{done ? <span className="wf-data" style={{ color: 'var(--wf-navy)' }}>✓ entregue</span> : <Data>{prazo}</Data>}</div>
      <div className="wf-bar" style={{ width: '88%', height: 10, marginBottom: 6 }} />
      <div className="wf-bar" style={{ width: '55%', height: 10 }} />
    </div>
  );
  const Col = ({ title, count, children, accent }) => (
    <div style={{ flex: 1, minWidth: 0 }}>
      <div className="wf-between" style={{ marginBottom: 12, paddingBottom: 9, borderBottom: '2px solid ' + (accent || 'var(--wf-line-2)') }}>
        <div className="wf-h sm">{title}</div><Data>{count}</Data>
      </div>
      {children}
    </div>
  );
  return [
    // Kanban · Mobile (mobile-first — colunas em scroll horizontal)
    <DCArtboard key="kanbanM" id="rev-kanban-m" label="Área do Sócio · Kanban de entregas · Mobile" width={SHEETW(390)} height={900} style={ABS}>
      <Sheet mobile vp="Mobile · 390 · logado" screenW={390}
        notes={[
          'Prio. MÉDIA · §4 — versão <b>mobile</b> do Kanban de entregas (premissa mobile-first).',
          { pin: 1, t: 'Colunas viram <b>scroll horizontal</b> (A fazer · Em andamento · Entregue).' },
          { pin: 2, t: 'Cada card = entrega + <b>diretoria responsável</b> + prazo/status.' },
          'Mesma estrutura do desktop; read-only para o sócio.',
        ]}>
        <LoggedTop active="Entregas" />
        <div style={{ padding: '14px 16px 8px' }}>
          <div className="wf-h lg" style={{ marginBottom: 2 }}>Entregas da diretoria</div>
          <Data style={{ marginBottom: 12 }}>Transparência · gestão 2026–2028</Data>
          <div className="wf-row" style={{ gap: 7, overflow: 'hidden' }}>{['Todas', 'Social', 'Náutica', 'Marina'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
        </div>
        <div style={{ position: 'relative', padding: '6px 0 0 16px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 4, top: 0, zIndex: 6 }} />
          <div className="wf-row" style={{ gap: 12, overflow: 'hidden', alignItems: 'flex-start' }}>
            <div style={{ flex: '0 0 236px' }}><Col title="A fazer" count="4"><Card dir="Náutica" prazo="ago/26" /><Card dir="Marina" prazo="set/26" /><Card dir="Social" prazo="out/26" /></Col></div>
            <div style={{ flex: '0 0 236px' }}><Col title="Em andamento" count="3" accent="var(--wf-navy)"><Card dir="Marina" prazo="em curso" /><Card dir="Pesca" prazo="em curso" /></Col></div>
            <div style={{ flex: '0 0 120px' }}><Col title="Entregue" count="6"><Card dir="Social" done /></Col></div>
          </div>
          <Data style={{ padding: '6px 16px 0' }}>← deslize para ver todas as colunas →</Data>
        </div>
        <div className="wf-botnav">{['Início', 'Comunicados', 'Documentos', 'Enquetes', 'Mais'].map((t, i) => <div key={t} className={'it' + (i === 4 ? ' on' : '')}><div className="ic" /><small>{t}</small></div>)}</div>
      </Sheet>
    </DCArtboard>,
    // Kanban · Desktop
    <DCArtboard key="kanban" id="rev-kanban" label="Área do Sócio · Kanban de entregas da diretoria · Desktop" width={SHEETW(1080)} height={760} style={ABS}>
      <Sheet vp="Desktop · 1080 · logado" screenW={1080}
        notes={[
          'Prio. MÉDIA · §4 — <b>Kanban de entregas da diretoria</b> (sugestão da ata p/ transparência).',
          { pin: 1, t: 'Colunas por <b>status</b>: A fazer · Em andamento · Entregue.' },
          { pin: 2, t: 'Cada card = uma <b>promessa/entrega</b> com <b>diretoria responsável</b> e prazo.' },
          { pin: 3, t: 'Filtro por <b>diretoria</b> e por gestão/ano.' },
          'Read-only para o sócio (transparência); edição é interna (CMS/gestão). Reforça o "canal oficial".',
          'Em mobile vira <b>scroll horizontal</b> de colunas (mesma estrutura).',
        ]}>
        <div className="wf-topbar" style={{ background: 'var(--wf-navy-08)' }}>
          <Logo /><div style={{ flex: 1 }} /><div className="wf-langs"><span className="on">PT</span>/<span>EN</span></div><div className="wf-btn plain sm" style={{ gap: 8 }}><Avatar s={20} label="S" />Sócio · 0427</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', minHeight: 560 }}>
          <div style={{ borderRight: '1px solid var(--wf-line-2)', padding: 20 }}>
            <div className="wf-eyebrow" style={{ marginBottom: 14 }}>Área do Sócio</div>
            <div className="wf-stack" style={{ gap: 4 }}>{['Início', 'Comunicados', 'Documentos', 'Enquetes', 'Entregas da diretoria', 'Ouvidoria', 'Canal de Ética'].map((t) => <div key={t} style={{ padding: '10px 12px', borderRadius: 6, background: t === 'Entregas da diretoria' ? 'var(--wf-navy-08)' : 'transparent', color: t === 'Entregas da diretoria' ? 'var(--wf-navy)' : 'var(--wf-ink)', fontWeight: t === 'Entregas da diretoria' ? 600 : 500, fontSize: 13 }}>{t}</div>)}</div>
          </div>
          <div style={{ padding: 28 }}>
            <div className="wf-between" style={{ marginBottom: 6 }}>
              <div><div className="wf-h lg">Entregas da diretoria</div><Data style={{ marginTop: 4 }}>Transparência · gestão 2026–2028</Data></div>
              <div style={{ position: 'relative' }}><Pin n={3} style={{ position: 'absolute', left: -22, top: 4, zIndex: 6 }} /><div className="wf-row" style={{ gap: 7 }}><Chip active>Todas</Chip><Chip>Social</Chip><Chip>Náutica</Chip><Chip>Marina</Chip></div></div>
            </div>
            <div style={{ position: 'relative', marginTop: 18 }}>
              <Pin n={1} style={{ position: 'absolute', left: -22, top: -4, zIndex: 6 }} />
              <Pin n={2} style={{ position: 'absolute', left: 320, top: 40, zIndex: 6 }} />
              <div className="wf-row" style={{ gap: 18, alignItems: 'flex-start' }}>
                <Col title="A fazer" count="4">
                  <Card dir="Náutica" prazo="ago/26" /><Card dir="Marina" prazo="set/26" /><Card dir="Social" prazo="out/26" />
                </Col>
                <Col title="Em andamento" count="3" accent="var(--wf-navy)">
                  <Card dir="Marina" prazo="em curso" /><Card dir="Pesca" prazo="em curso" />
                </Col>
                <Col title="Entregue" count="6">
                  <Card dir="Social" done /><Card dir="Náutica" done /><Card dir="Restaurante" done />
                </Col>
              </div>
            </div>
          </div>
        </div>
      </Sheet>
    </DCArtboard>,
  ];
}
window.kanbanRev16 = kanbanRev16;
