// ============================================================
// SEÇÃO · Área do Sócio — autenticada, canal oficial
// Login (3 abordagens) + Início, Comunicados (lista+página),
// Documentos, Ouvidoria, Canal de Ética, Travessia/Vagas.
// ============================================================

// Shell logado reutilizável (header + abas internas + bottom nav)
function SocioShell({ active, children, tall }) {
  const tabs = ['Início', 'Comunicados', 'Documentos', 'Enquetes', 'Entregas', 'Ouvidoria', 'Ética'];
  const primary = ['Início', 'Comunicados', 'Documentos', 'Enquetes'];
  const botActive = primary.includes(active) ? active : 'Mais';
  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>
      {children}
      <div className="wf-botnav">{[...primary, 'Mais'].map(t => <div key={t} className={'it' + (t === botActive ? ' on' : '')}><div className="ic" /><small>{t}</small></div>)}</div>
    </>
  );
}

function socioArtboards() {
  return [

    // ---------- ★ Login recomendado (B+C: magic link + confiança) ----------
    <DCArtboard key="lR" id="socio-login-rec" label="Login · Mobile (aprovado · B+C)" width={SHEETW(390)} height={700} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          '<b>Login aprovado</b>: magic link (B) + confiança institucional (C).',
          { pin: 1, t: '<b>Confiança institucional</b>: hero + "canal oficial desde 1956".' },
          { pin: 2, t: '<b>Magic link primário</b> — só o e-mail (melhor p/ sócio idoso).' },
          { state: true, pin: 3, t: 'Estado <b>"link enviado"</b> previsto.' },
          { pin: 4, t: 'Senha como caminho <b>secundário</b>, recolhido.' },
        ]}>
        <div className="wf-statusbar"><span>9:41</span><span>▰▰▰ ◢ 100%</span></div>
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <Img h={150} label="Hero · deck ao pôr do sol" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ padding: '16px 24px 6px' }}><Eyebrow style={{ marginBottom: 8 }}>Canal oficial · desde 1956</Eyebrow><div className="wf-h lg">A fonte confiável do clube</div></div>
        </div>
        <div style={{ position: 'relative', padding: '6px 24px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 8, top: 0, zIndex: 6 }} />
          <div className="wf-stack" style={{ gap: 8, marginBottom: 16 }}>{['Comunicados oficiais da diretoria', 'Documentos, atas e demonstrativos', 'Ouvidoria e canal de ética'].map(t => <div key={t} className="wf-row" style={{ gap: 9, alignItems: 'center' }}><span style={{ color: 'var(--wf-navy)' }}>✓</span><T sm>{t}</T></div>)}</div>
          <Field label="E-mail cadastrado" focus placeholder="voce@exemplo.com" style={{ marginBottom: 12 }} />
          <Btn variant="primary" block ar>Receber link de acesso</Btn>
        </div>
        <div style={{ position: 'relative', padding: '12px 24px 0' }}>
          <Pin n={3} style={{ position: 'absolute', left: 8, top: 6, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 12, background: 'var(--wf-navy-08)', borderColor: 'var(--wf-navy-14)', display: 'flex', gap: 10, alignItems: 'center' }}><Box w={30} h={30} label="✉" style={{ flex: '0 0 30px' }} /><div><div className="wf-h sm">Link enviado</div><Data>Confira sua caixa de entrada.</Data></div></div>
        </div>
        <div style={{ position: 'relative', padding: '16px 24px 24px', textAlign: 'center' }}>
          <Pin n={4} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <Link>Entrar com senha</Link>
        </div>
      </Sheet>
    </DCArtboard>,

    // ---------- Início (logado) · Mobile ----------
    <DCArtboard key="sH" id="socio-home" label="Início logado · Mobile" width={SHEETW(390)} height={865} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Painel pós-login.',
          { pin: 1, t: '<b>Comunicados recentes</b> em destaque (o que mudou).' },
          { pin: 2, t: '<b>Atalhos</b>: documentos, ouvidoria, travessia, vagas.' },
          { pin: 3, t: 'Status pessoal (vaga, próxima regata) — só p/ o próprio (LGPD).' },
        ]}>
        <SocioShell active="Início">
          <div style={{ position: 'relative', padding: 16 }}>
            <Pin n={1} style={{ position: 'absolute', left: 4, top: 8, zIndex: 6 }} />
            <Eyebrow style={{ marginBottom: 12 }}>Comunicados recentes</Eyebrow>
            <div className="wf-stack" style={{ gap: 10, marginBottom: 20 }}>
              {[['Governança', 'novo'], ['Operacional', '']].map(([c, n]) => <div key={c} className="wf-card" style={{ padding: 12 }}><div className="wf-between" style={{ marginBottom: 8 }}><Tag navy>{c}</Tag>{n && <span className="wf-data" style={{ color: 'var(--wf-navy)' }}>● {n}</span>}</div><div className="wf-bar" style={{ width: '85%', height: 11, marginBottom: 6 }} /><Data>12 jun 2026</Data></div>)}
            </div>
            <Pin n={2} style={{ position: 'absolute', left: 4, top: 260, zIndex: 6 }} />
            <Eyebrow style={{ marginBottom: 12 }}>Atalhos</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 20 }}>{['Documentos', 'Ouvidoria', 'Travessia', 'Vagas em seco'].map(t => <div key={t} className="wf-jt"><div className="ic" /><div className="wf-h sm">{t}</div></div>)}</div>
            <Pin n={3} style={{ position: 'absolute', left: 4, top: 470, zIndex: 6 }} />
            <div className="wf-card" style={{ padding: 14, background: 'var(--wf-fill-2)' }}><Eyebrow style={{ marginBottom: 10 }}>Seu status</Eyebrow><div className="wf-row" style={{ gap: 10 }}><div style={{ flex: 1 }}><Data>Vaga</Data><div className="wf-h sm">Seca · 32 pés</div></div><div style={{ flex: 1 }}><Data>Próxima regata</Data><div className="wf-h sm">Sáb 09:00</div></div></div></div>
          </div>
        </SocioShell>
      </Sheet>
    </DCArtboard>,

    // ---------- Início (logado) · Desktop ----------
    <DCArtboard key="sHD" id="socio-home-d" label="Início logado · Desktop" width={SHEETW(1240)} height={780} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Expansão desktop do painel do sócio.',
          'Nav interna lateral; conteúdo em 2 colunas.',
          'Mesma régua de confiança e estados.',
        ]}>
        <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: 600 }}>
          <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', 'Ouvidoria', 'Canal de Ética', 'Travessia / Vagas'].map((t, i) => <div key={t} style={{ padding: '10px 12px', borderRadius: 6, background: i === 0 ? 'var(--wf-navy-08)' : 'transparent', color: i === 0 ? 'var(--wf-navy)' : 'var(--wf-ink)', fontWeight: i === 0 ? 600 : 500, fontSize: 13 }}>{t}</div>)}</div>
          </div>
          <div style={{ padding: 28 }}>
            <div className="wf-h lg" style={{ marginBottom: 4 }}>Olá, Sócio</div><Data style={{ marginBottom: 22 }}>Titular · nº 0427</Data>
            <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 24 }}>
              <div><Eyebrow style={{ marginBottom: 14 }}>Comunicados recentes</Eyebrow><div className="wf-stack" style={{ gap: 12 }}>{[0, 1, 2].map(i => <div key={i} className="wf-card" style={{ padding: 14 }}><div className="wf-between" style={{ marginBottom: 8 }}><Tag navy>{['Governança', 'Operacional', 'Social'][i]}</Tag><Data>12 jun</Data></div><div className="wf-bar" style={{ width: '80%', height: 11 }} /></div>)}</div></div>
              <div><Eyebrow style={{ marginBottom: 14 }}>Atalhos</Eyebrow><div className="wf-stack" style={{ gap: 10 }}>{['Documentos', 'Ouvidoria', 'Travessia'].map(t => <div key={t} className="wf-between wf-card" style={{ padding: 12 }}><div className="wf-h sm">{t}</div><span style={{ color: 'var(--wf-faint)' }}>›</span></div>)}</div></div>
            </div>
          </div>
        </div>
      </Sheet>
    </DCArtboard>,

    // ---------- Comunicados (lista) ----------
    <DCArtboard key="sCom" id="socio-com" label="Comunicados · lista · Mobile" width={SHEETW(390)} height={755} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Compete com o WhatsApp como <b>fonte oficial</b>.',
          { pin: 1, t: 'Filtro por <b>categoria</b>: operacional, governança, social.' },
          { pin: 2, t: 'Lista de comunicados → página de comunicado.' },
          { pin: 3, t: 'Marcação de <b>não lido</b>.' },
        ]}>
        <SocioShell active="Comunicados">
          <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 }}>{['Todos', 'Operacional', 'Governança', 'Social'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
            <Pin n={2} style={{ position: 'absolute', left: 4, top: 70, zIndex: 6 }} />
            <div className="wf-stack" style={{ gap: 10 }}>
              {[['Governança', true], ['Operacional', true], ['Social', false], ['Operacional', false]].map(([c, unread], i) => (
                <div key={i} className="wf-card" style={{ padding: 13, borderLeft: unread ? '3px solid var(--wf-navy)' : '1px solid var(--wf-line-2)' }}>
                  <div className="wf-between" style={{ marginBottom: 8 }}><Tag navy>{c}</Tag>{unread && <span className="wf-data" style={{ color: 'var(--wf-navy)' }}>● não lido</span>}</div>
                  <div className="wf-bar" style={{ width: '90%', height: 11, marginBottom: 7 }} /><Data>12 jun 2026 · Diretoria</Data>
                </div>
              ))}
            </div>
          </div>
        </SocioShell>
      </Sheet>
    </DCArtboard>,

    // ---------- Comunicado (individual, autenticado) ----------
    <DCArtboard key="sComP" id="socio-com-page" label="Comunicado (página) · Mobile" width={SHEETW(390)} height={795} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Órfã da v2: a <b>página de comunicado</b> não existia. <b>Molde próprio</b> (autenticado), não o template Matéria público.',
          { pin: 1, t: 'Categoria + data + emissor (Diretoria/Conselho).' },
          { pin: 2, t: 'Corpo + <b>anexos PDF</b> (atas, editais).' },
          { pin: 3, t: '<b>Sem publicidade</b> na Área do Sócio (decisão) — só comunicação do clube.' },
          'Confiança: marca de "comunicado oficial" + confirmação de leitura.',
        ]}>
        <SocioShell active="Comunicados">
          <div style={{ position: 'relative', padding: 16 }}>
            <Data style={{ marginBottom: 12 }}>‹ Voltar aos comunicados</Data>
            <Pin n={1} style={{ position: 'absolute', left: 4, top: 40, zIndex: 6 }} />
            <div className="wf-between" style={{ marginBottom: 10 }}><Tag navy>Governança</Tag><span className="wf-data" style={{ color: 'var(--wf-navy)' }}>● oficial</span></div>
            <div className="wf-h lg" style={{ marginBottom: 10 }}>Título do comunicado oficial</div>
            <div className="wf-row" style={{ gap: 9, alignItems: 'center', marginBottom: 16 }}><Avatar s={26} /><Data>Diretoria · 12 jun 2026</Data></div>
            <Pin n={2} style={{ position: 'absolute', left: 4, top: 220, zIndex: 6 }} />
            <Lines n={6} style={{ marginBottom: 18 }} />
            <Eyebrow style={{ marginBottom: 12 }}>Anexos</Eyebrow>
            <div className="wf-stack" style={{ gap: 10, marginBottom: 16 }}><DocRow locked /><DocRow locked /></div>
            <div style={{ position: 'relative' }}>
              <Pin n={3} style={{ position: 'absolute', left: -10, top: -8, zIndex: 6 }} />
              <div className="wf-card" style={{ padding: 12, background: 'var(--wf-fill-2)', display: 'flex', alignItems: 'center', gap: 10 }}><Box w={20} h={20} label="✓" style={{ flex: '0 0 20px' }} /><T sm>Confirmo a leitura deste comunicado</T></div>
            </div>
          </div>
        </SocioShell>
      </Sheet>
    </DCArtboard>,

    // ---------- Documentos (biblioteca) ----------
    <DCArtboard key="sDoc" id="socio-docs" label="Documentos · Mobile" width={SHEETW(390)} height={690} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Biblioteca única, <b>visibilidade por papel</b>. Decisão §7.4: <b>governança é restrita ao sócio</b> (transparência, editais, atas, demonstrativos, estatuto).',
          { pin: 1, t: '<b>Busca</b> + categorias: atas, editais, demonstrativos, regulamentos, estatuto, <b>transparência</b>.' },
          { pin: 2, t: 'Linhas de documento com tipo, data e download.' },
          { state: true, t: 'Ressalva jurídica: edital de convocação de assembleia pode exigir publicidade legal externa (exceção pontual).' },
          'Visibilidade <b>Sócio</b> (alguns públicos, outros restritos).',
        ]}>
        <SocioShell active="Documentos">
          <div style={{ position: 'relative', padding: 16 }}>
            <Pin n={1} style={{ position: 'absolute', left: 4, top: 8, zIndex: 6 }} />
            <div className="wf-input" style={{ marginBottom: 12 }}>⌕ Buscar documento</div>
            <div className="wf-row" style={{ gap: 7, overflow: 'hidden', marginBottom: 16 }}>{['Todos', 'Atas', 'Editais', 'Demonstrativos', 'Regulamentos', 'Transparência', 'Estatuto'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
            <Pin n={2} style={{ position: 'absolute', left: 4, top: 130, zIndex: 6 }} />
            <div className="wf-stack" style={{ gap: 10 }}><DocRow /><DocRow locked /><DocRow /><DocRow locked /></div>
          </div>
        </SocioShell>
      </Sheet>
    </DCArtboard>,

    // ---------- Ouvidoria (formulário) ----------
    <DCArtboard key="sOuv" id="socio-ouv" label="Ouvidoria · Mobile" width={SHEETW(390)} height={735} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Hoje "enterrada"; aqui ganha <b>destaque</b>.',
          { pin: 1, t: 'Formulário com <b>assunto, categoria e mensagem</b>.' },
          { pin: 2, t: 'Encaminhamento à <b>Diretoria</b>; protocolo de retorno.' },
          { state: true, pin: 3, t: 'Estado de <b>enviado</b> (protocolo gerado).' },
        ]}>
        <SocioShell active="Ouvidoria">
          <div style={{ position: 'relative', padding: 16 }}>
            <Pin n={1} style={{ position: 'absolute', left: 4, top: 8, zIndex: 6 }} />
            <div className="wf-h md" style={{ marginBottom: 6 }}>Ouvidoria</div>
            <T sm style={{ marginBottom: 18 }}>Sua mensagem vai direto à Diretoria.</T>
            <div className="wf-stack" style={{ gap: 14 }}>
              <Field label="Assunto" placeholder="Resumo" />
              <Field label="Categoria" select placeholder="Selecione" />
              <Field label="Mensagem" area placeholder="Escreva aqui…" />
              <div style={{ position: 'relative' }}><Pin n={2} style={{ position: 'absolute', left: -8, top: -8, zIndex: 6 }} /><Btn variant="primary" block>Enviar à Diretoria</Btn></div>
            </div>
            <div style={{ position: 'relative', marginTop: 16 }}>
              <Pin n={3} style={{ position: 'absolute', left: -8, top: 8, zIndex: 6 }} />
              <State neutral>Após enviar → protocolo #0000</State>
            </div>
          </div>
        </SocioShell>
      </Sheet>
    </DCArtboard>,

    // ---------- Canal de Ética ----------
    <DCArtboard key="sEt" id="socio-etica" label="Canal de Ética · Mobile" width={SHEETW(390)} height={740} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Fluxo de denúncia <b>estruturado</b> (transparência é tema da nova gestão).',
          { pin: 1, t: 'Opção de <b>anonimato</b> destacada.' },
          { pin: 2, t: 'Tipo de ocorrência + relato + anexos.' },
          { pin: 3, t: 'Protocolo p/ <b>acompanhar</b> sem se identificar.' },
        ]}>
        <SocioShell active="Ética">
          <div style={{ position: 'relative', padding: 16 }}>
            <Pin n={1} style={{ position: 'absolute', left: 4, top: 8, zIndex: 6 }} />
            <div className="wf-h md" style={{ marginBottom: 14 }}>Canal de Ética</div>
            <div className="wf-card" style={{ padding: 12, marginBottom: 16, background: 'var(--wf-navy-08)', borderColor: 'var(--wf-navy-14)', display: 'flex', gap: 10, alignItems: 'center' }}><Box w={30} h={30} label="🛡" style={{ flex: '0 0 30px' }} /><div><div className="wf-h sm">Pode ser anônimo</div><Data>Sua identidade é protegida.</Data></div></div>
            <Pin n={2} style={{ position: 'absolute', left: 4, top: 200, zIndex: 6 }} />
            <div className="wf-stack" style={{ gap: 14 }}>
              <Field label="Tipo de ocorrência" select placeholder="Selecione" />
              <Field label="Relato" area placeholder="Descreva o ocorrido…" />
              <div className="wf-row" style={{ gap: 8, alignItems: 'center' }}><Box w={20} h={20} label="" /><T sm>Enviar anonimamente</T></div>
              <Btn variant="primary" block>Registrar denúncia</Btn>
            </div>
            <div style={{ position: 'relative', marginTop: 16 }}>
              <Pin n={3} style={{ position: 'absolute', left: -8, top: 8, zIndex: 6 }} />
              <State neutral>Gera protocolo p/ acompanhar</State>
            </div>
          </div>
        </SocioShell>
      </Sheet>
    </DCArtboard>,

    // ---------- Travessia / Vagas (embed) ----------
    <DCArtboard key="sTrv" id="socio-travessia" label="Travessia / Vagas · Mobile" width={SHEETW(390)} height={620} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Funcionalidade que já existe no app — <b>sem reescrever</b>.',
          { pin: 1, t: '<b>Embed do app Monitor</b> via deep-link autenticado (SSO).' },
          { pin: 2, t: 'Agendar travessia e espera de <b>vagas em seco</b>.' },
          'Reescrita nativa só na V3.',
        ]}>
        <SocioShell active="Início">
          <div style={{ position: 'relative', padding: 16 }}>
            <div className="wf-h md" style={{ marginBottom: 14 }}>Travessia &amp; Vagas</div>
            <Pin n={1} style={{ position: 'absolute', left: 4, top: 60, zIndex: 6 }} />
            <div className="wf-img" style={{ height: 220, flexDirection: 'column', gap: 8, marginBottom: 16 }}><span>Embed · app Monitor</span><Data>deep-link autenticado · SSO</Data></div>
            <Pin n={2} style={{ position: 'absolute', left: 4, top: 300, zIndex: 6 }} />
            <div className="wf-row" style={{ gap: 12 }}><Btn variant="ghost" size="sm" style={{ flex: 1 }}>Agendar travessia</Btn><Btn variant="ghost" size="sm" style={{ flex: 1 }}>Vagas em seco</Btn></div>
          </div>
        </SocioShell>
      </Sheet>
    </DCArtboard>,

  ];
}
window.socioArtboards = socioArtboards;