// ============================================================
// SEÇÃO · Vida no Iate Clube — o que está acontecendo
// Notícias (lista + editorias), Newsletter (arquivo), Agenda (calendário),
// Esportes (hub). Gastronomia/Sociais usam
// os templates Institucional/Matéria.
// ============================================================

function vidaArtboards() {
  return [

    // ---------- Notícias (lista + filtro) ----------
    <DCArtboard key="vN" id="vida-news" label="Notícias · lista / editoria · Mobile" width={SHEETW(390)} height={1880} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Resolve as <b>107 páginas paginadas</b> sem filtro de hoje.',
          { pin: 1, t: '<b>Curadoria editorial manual</b>: hero + destaques secundários + cronológico (não só ordem por data).' },
          { pin: 2, t: '<b>Busca</b> + filtro por <b>editoria</b> e ano. Editorias = ex-rubricas da revista.' },
          { state: true, pin: 3, t: 'Estados: vazio / carregando / erro (ver Componentes globais).' },
          { pin: 4, t: '<b>In-feed "Patrocinado"</b> a cada N cards (slot infeed-native, reusa o molde Matéria).' },
          'Rev. 18/jun: Notícias é <b>área top-level</b> e absorve o editorial da antiga Revista (Carta do Comodoro vira editorial recorrente).',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>Notícias</div>
          <div className="wf-h xl" style={{ marginBottom: 12 }}>Notícias</div>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 80, zIndex: 6 }} />
          <div className="wf-input" style={{ marginBottom: 10 }}>⌕ Buscar notícia</div>
          <div className="wf-row" style={{ gap: 7, overflow: 'hidden' }}>{['Todas', 'Náutica & Vela', 'Social', 'Gastronomia', 'Pessoas', 'História'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
        </div>
        <div style={{ position: 'relative', padding: '6px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 0, zIndex: 6 }} />
          <div className="wf-stack" style={{ gap: 14 }}><NewsCard tall />
            <div key="a" className="wf-row wf-card" style={{ padding: 12, gap: 12 }}><Img w={92} h={70} label="" style={{ flex: '0 0 92px' }} /><div style={{ flex: 1 }}><Tag>Categoria</Tag><div className="wf-bar" style={{ width: '90%', height: 11, margin: '8px 0 6px' }} /><div className="wf-bar" style={{ width: '60%', height: 11, marginBottom: 8 }} /><Data>12 jun 2026</Data></div></div>
            <div style={{ position: 'relative' }}><Pin n={4} style={{ position: 'absolute', left: -10, top: -8, zIndex: 6 }} /><InFeedAd /></div>
            {[0, 1].map(i => (
            <div key={i} className="wf-row wf-card" style={{ padding: 12, gap: 12 }}><Img w={92} h={70} label="" style={{ flex: '0 0 92px' }} /><div style={{ flex: 1 }}><Tag>Categoria</Tag><div className="wf-bar" style={{ width: '90%', height: 11, margin: '8px 0 6px' }} /><div className="wf-bar" style={{ width: '60%', height: 11, marginBottom: 8 }} /><Data>12 jun 2026</Data></div></div>
          ))}</div>
        </div>
        <div style={{ position: 'relative', padding: '16px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
          <Btn variant="ghost" block>Carregar mais</Btn>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Newsletter semanal · arquivo (substitui a Revista) ----------
    <DCArtboard key="vR" id="vida-newsletter" label="Newsletter semanal · arquivo · Mobile" width={SHEETW(390)} height={1560} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Rev. 18/jun: <b>substitui a Revista</b>. Newsletter semanal em HTML que <b>leva às matérias</b> do portal — não é um magazine com edições/capa/acervo.',
          { pin: 1, t: '<b>Edição da semana</b>: curadoria de 3–4 destaques, cada um linka a uma matéria.' },
          { pin: 2, t: '<b>Assinar</b> (e-mail) — o mesmo conteúdo chega na caixa do sócio.' },
          { pin: 3, t: '<b>Arquivo</b> de envios anteriores (data + título da edição).' },
          'Métricas de abertura/clique no CMS. <b>Nome próprio a definir</b> (com Fernando). Template de e-mail HTML detalhado no desktop.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ padding: '14px 16px 8px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>Notícias<span className="sep">›</span>Newsletter</div>
          <div className="wf-between" style={{ marginBottom: 4 }}><div className="wf-h xl">Newsletter semanal</div><Tag navy>nome a definir</Tag></div>
          <T sm style={{ marginBottom: 6 }}>Os destaques da semana no seu e-mail.</T>
        </div>
        <div style={{ position: 'relative', padding: '8px 16px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 4, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 0 }}>
            <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--wf-line-2)', background: 'var(--wf-fill-2)' }}><Data>Edição da semana · 12 jun 2026</Data><div className="wf-h sm" style={{ marginTop: 4 }}>Nesta semana no clube</div></div>
            <div className="wf-stack" style={{ gap: 0 }}>{[0,1,2].map(i => <div key={i} className="wf-row" style={{ gap: 12, padding: '12px 14px', borderBottom: i<2 ? '1px solid var(--wf-line-2)' : 'none' }}><Img w={70} h={52} label="" style={{ flex: '0 0 70px' }} /><div style={{ flex: 1 }}><Tag>Editoria</Tag><div className="wf-bar" style={{ width: '88%', height: 10, margin: '7px 0 5px' }} /><div className="wf-bar" style={{ width: '55%', height: 10 }} /></div><span style={{ color: 'var(--wf-navy)' }}>›</span></div>)}</div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '12px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 6, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 14, background: 'var(--wf-navy-08)', borderColor: 'var(--wf-navy-14)' }}>
            <Eyebrow style={{ marginBottom: 8 }}>Receba toda semana</Eyebrow>
            <div className="wf-input" style={{ marginBottom: 8 }}>seu@email.com</div>
            <Btn variant="primary" block>Assinar</Btn>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '12px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Edições anteriores</Eyebrow>
          <div className="wf-stack" style={{ gap: 0 }}>{['05 jun 2026','29 mai 2026','22 mai 2026','15 mai 2026'].map((d,i) => <div key={i} className="wf-between" style={{ padding: '12px 0', borderBottom: '1px solid var(--wf-line-2)' }}><div><Data style={{ color: 'var(--wf-navy)' }}>{d}</Data><div className="wf-h sm" style={{ marginTop: 3 }}>Título da edição</div></div><span style={{ color: 'var(--wf-faint)' }}>›</span></div>)}</div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Agenda / calendário ----------
    <DCArtboard key="vA" id="vida-agenda" label="Agenda · Mobile" width={SHEETW(390)} height={1582} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          '<b>Um único sistema de Agenda</b> com filtro por tipo (Regata / Social / Escola) — alimenta também o "Calendário de Regatas" em Náutica.',
          { pin: 1, t: 'Filtro por <b>tipo</b> + alternância <b>calendário ↔ lista</b>.' },
          { pin: 2, t: 'Cada item leva à <b>página de evento</b> (template Evento, fonte única).' },
          'Resolve "cada festa é uma página fixa" do site atual.',
          '<b>Sociais</b> = Agenda filtrada por tipo Social (não uma página por festa).',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>Vida no Iate Clube<span className="sep">›</span>Agenda</div>
          <div className="wf-between" style={{ marginBottom: 12 }}><div className="wf-h xl">Agenda</div><div className="wf-row" style={{ gap: 6 }}><Chip active>Mês</Chip><Chip>Lista</Chip></div></div>
          <div className="wf-row" style={{ gap: 7, overflow: 'hidden', marginBottom: 14 }}>{['Todos', 'Regata', 'Social', 'Escola', 'Gastronomia'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 70, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 12 }}>
            <div className="wf-between" style={{ marginBottom: 10 }}><span style={{ color: 'var(--wf-faint)' }}>‹</span><div className="wf-h sm">Junho 2026</div><span style={{ color: 'var(--wf-faint)' }}>›</span></div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 4 }}>
              {['D', 'S', 'T', 'Q', 'Q', 'S', 'S'].map((d, i) => <Data key={i} style={{ textAlign: 'center' }}>{d}</Data>)}
              {Array.from({ length: 30 }).map((_, i) => <div key={i} className="wf-center" style={{ aspectRatio: '1', borderRadius: 4, fontSize: 11, color: 'var(--wf-muted)', background: [13, 14, 21].includes(i) ? 'var(--wf-navy-08)' : 'transparent', fontWeight: [13, 14, 21].includes(i) ? 700 : 400, border: [13, 14, 21].includes(i) ? '1px solid var(--wf-navy-14)' : '1px solid transparent' }}>{i + 1}</div>)}
            </div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '8px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 4, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Próximos</Eyebrow>
          <div className="wf-stack" style={{ gap: 12 }}><EventRow status="Confirmado" /><EventRow status="Inscrições" /></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Esportes (hub) — Náutica & Vela em destaque ----------
    <DCArtboard key="vE" id="vida-esportes" label="Esportes (hub) · Mobile" width={SHEETW(390)} height={2026} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Hub <b>Esportes</b> com <b>Náutica & Vela em destaque</b> (decisão de taxonomia).',
          { pin: 1, t: '<b>Náutica & Vela</b> em card-destaque → leva ao sub-hub (regatas, resultados, escola, classes).' },
          { pin: 2, t: 'Demais modalidades: <b>Pesca, Rali, Beach Tennis, Academia, Atividades de Verão, Kite surf</b>.' },
          { pin: 3, t: '<b>Agenda esportiva</b> (Agenda filtrada por esporte) + faixa de patrocínio.' },
          'Eventos são <b>conteúdo</b> (tipo Evento), nunca item de menu. Molde de modalidade: Institucional + agenda/turmas.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ padding: '14px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>Vida no Iate Clube<span className="sep">›</span>Esportes</div>
          <div className="wf-h xl" style={{ marginBottom: 4 }}>Esportes</div>
          <T sm>As modalidades do clube</T>
        </div>
        <div style={{ position: 'relative', padding: '8px 16px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 2, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 0, marginBottom: 14, border: '1.5px solid var(--wf-navy)' }}>
            <Img h={120} label="Náutica & Vela" style={{ borderRadius: 0, border: 'none' }} />
            <div className="wf-between" style={{ padding: 14 }}><div><Tag navy>Em destaque</Tag><div className="wf-h md" style={{ margin: '8px 0 4px' }}>Náutica & Vela</div><Data>regatas · resultados · escola · classes</Data></div><span style={{ color: 'var(--wf-navy)' }}>↗</span></div>
          </div>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 224, zIndex: 6 }} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {['Pesca', 'Rali Náutico', 'Beach Tennis', 'Academia', 'Atividades de Verão', 'Kite surf'].map(t => (
              <div key={t} className="wf-card" style={{ padding: 0 }}><Img h={84} label="" style={{ borderRadius: 0, border: 'none' }} /><div style={{ padding: 12 }}><div className="wf-h sm" style={{ marginBottom: 4 }}>{t}</div><Data>ver modalidade ›</Data></div></div>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 10, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Agenda esportiva</Eyebrow>
          <div className="wf-stack" style={{ gap: 12, marginBottom: 16 }}><EventRow status="Inscrições" /><EventRow status="Confirmado" /></div>
          <div className="wf-sponsor" style={{ height: 60 }}><span>Patrocínio · faixa</span><div className="lg-slot" /></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

  ];
}
window.vidaArtboards = vidaArtboards;