// ============================================================
// SEÇÃO · Desktops faltantes (opção A) — wireframes desktop dos
// templates restantes + telas de maior tráfego. Mobile-first:
// estas são as expansões desktop (referência) que faltavam.
// ============================================================

const Crumb = ({ items }) => <div className="wf-crumb" style={{ marginBottom: 14 }}>{items.map((x, i) => <React.Fragment key={i}>{i > 0 && <span className="sep">›</span>}{x}</React.Fragment>)}</div>;

// ---------------- TEMPLATES (desktop) ----------------
function tDeskArtboards() {
  return [

    // Matéria · Desktop (corpo modular + sidebar)
    <DCArtboard key="tMd" id="tpl-art-d" label="Matéria · Desktop" width={SHEETW(1240)} height={2510} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Template <b>Matéria</b> em desktop: coluna de leitura ~720 + <b>sidebar</b>.',
          { pin: 1, t: 'Header editorial: categoria, título serifado, autor/data.' },
          { pin: 2, t: '<b>Corpo modular</b> (blocos: vídeo, galeria, citação) + <b>article-mid</b>.' },
          { pin: 3, t: '<b>article-sidebar</b> sticky + relacionados.' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ padding: '30px 60px 0' }}>
          <Crumb items={['Notícias']} />
          <div style={{ position: 'relative', maxWidth: 720 }}>
            <Pin n={1} style={{ position: 'absolute', left: -40, top: 0, zIndex: 6 }} />
            <Tag navy>Náutica & Vela</Tag>
            <div className="wf-h" style={{ fontSize: 46, lineHeight: 1.05, margin: '14px 0 16px' }}>Título da matéria editorial em duas linhas</div>
            <div className="wf-row" style={{ gap: 10, alignItems: 'center' }}><Avatar s={32} /><Data>Por Autor · 12 jun 2026 · 6 min</Data></div>
          </div>
        </div>
        <Img h={380} label="Hero · Mux ou imagem" style={{ border: 'none', borderRadius: 0, margin: '24px 0 28px' }} />
        <div style={{ padding: '0 60px', display: 'grid', gridTemplateColumns: '720px 1fr', gap: 48 }}>
          <div style={{ position: 'relative' }}>
            <Pin n={2} style={{ position: 'absolute', left: -40, top: 0, zIndex: 6 }} />
            <Lines n={5} style={{ marginBottom: 22 }} />
            <div style={{ margin: '0 0 8px', position: 'relative' }}><Tag navy style={{ position: 'absolute', left: 14, top: 12, zIndex: 2 }}>Bloco · Vídeo</Tag><Img h={300} video label="" /></div>
            <Data style={{ marginBottom: 22 }}>Vídeo (Mux) no meio da matéria · legenda</Data>
            <Lines n={4} style={{ marginBottom: 22 }} />
            <div className="wf-between" style={{ marginBottom: 8 }}><Eyebrow>Bloco · Galeria</Eyebrow><Data>4 fotos</Data></div>
            <div className="wf-row" style={{ gap: 10, marginBottom: 22 }}>{[0, 1, 2, 3].map(i => <Img key={i} w="25%" h={110} label="" />)}</div>
            <Quote style={{ margin: '4px 0 22px' }} />
            <Lines n={4} style={{ marginBottom: 22 }} />
            <div style={{ marginBottom: 22 }}><SlotBox cota="Oficial" label="article-mid · 600×300" h={140} /></div>
            <Lines n={3} style={{ marginBottom: 22 }} />
            <div className="wf-between" style={{ paddingTop: 14, borderTop: '1px solid var(--wf-line-2)' }}><Data>Compartilhar</Data><div className="wf-row" style={{ gap: 8 }}>{['↗', 'in', 'f', '✉'].map(x => <Box key={x} w={34} h={34} label={x} style={{ borderRadius: '50%' }} />)}</div></div>
          </div>
          <div style={{ position: 'relative' }}>
            <Pin n={3} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <div style={{ position: 'sticky', top: 20 }}>
              <SlotBox cota="Oficial" label="article-sidebar · 300×600" h={420} style={{ marginBottom: 20 }} />
              <Eyebrow style={{ marginBottom: 12 }}>Mais lidas</Eyebrow>
              <div className="wf-stack" style={{ gap: 12 }}>{[0, 1, 2].map(i => <div key={i} className="wf-row" style={{ gap: 10 }}><Data style={{ color: 'var(--wf-navy)' }}>{i + 1}</Data><div className="wf-bar" style={{ width: '80%', height: 10, marginTop: 4 }} /></div>)}</div>
            </div>
          </div>
        </div>
        <div style={{ padding: '36px 60px 0' }}>
          <Eyebrow style={{ marginBottom: 16 }}>Relacionados</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}><NewsCard /><NewsCard /><NewsCard /></div>
        </div>
        <div style={{ marginTop: 28 }}><Footer /></div>
      </Sheet>
    </DCArtboard>,

    // Newsletter · e-mail (HTML) · Desktop (template)
    <DCArtboard key="tRd" id="tpl-newsletter-d" label="Newsletter · e-mail HTML · template" width={SHEETW(1240)} height={1380} style={ABS}>
      <Sheet vp="Desktop · 1240 · e-mail" screenW={1240}
        notes={[
          'Rev. 18/jun: <b>template de e-mail HTML</b> que substitui o PDF da Revista. Largura de e-mail (~600px) centralizada.',
          { pin: 1, t: '<b>Masthead</b>: marca + nome da newsletter + data da edição.' },
          { pin: 2, t: '<b>Curadoria</b>: 3–5 destaques; cada bloco <b>linka para a matéria</b> no site (não traz o conteúdo inteiro).' },
          { pin: 3, t: '<b>Patrocínio</b> rotulado + rodapé com descadastro (LGPD).' },
          'Métricas de abertura e clique no CMS. O mesmo conteúdo vira a página de arquivo (ver Newsletter · arquivo).',
        ]}>
        <DeskHeader active="Notícias" weather mega />
        <div style={{ padding: '32px 60px', background: 'var(--wf-fill-2)', display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: 600, background: 'var(--wf-screen)', border: '1px solid var(--wf-line-2)' }}>
            <div style={{ position: 'relative', padding: '22px 28px', borderBottom: '2px solid var(--wf-navy)', textAlign: 'center' }}>
              <Pin n={1} style={{ position: 'absolute', left: -34, top: 14, zIndex: 6 }} />
              <Logo />
              <div className="wf-eyebrow" style={{ justifyContent: 'center', marginTop: 12 }}>Newsletter semanal · nome a definir</div>
              <Data style={{ marginTop: 6 }}>Edição da semana · 12 jun 2026</Data>
            </div>
            <div style={{ padding: '24px 28px', borderBottom: '1px solid var(--wf-line-2)' }}>
              <Img h={240} label="Destaque da semana" style={{ border: 'none', borderRadius: 0, marginBottom: 16 }} />
              <Tag navy>Em destaque</Tag>
              <div className="wf-h md" style={{ margin: '10px 0' }}>A chamada principal da semana</div>
              <Lines n={2} style={{ marginBottom: 14 }} />
              <Btn variant="primary" ar>Ler no site</Btn>
            </div>
            <div style={{ position: 'relative', padding: '22px 28px', borderBottom: '1px solid var(--wf-line-2)' }}>
              <Pin n={2} style={{ position: 'absolute', left: -34, top: 16, zIndex: 6 }} />
              <Eyebrow style={{ marginBottom: 14 }}>Também nesta edição</Eyebrow>
              <div className="wf-stack" style={{ gap: 0 }}>{[0,1,2].map(i => <div key={i} className="wf-row" style={{ gap: 14, padding: '13px 0', borderBottom: i<2 ? '1px solid var(--wf-line-2)' : 'none' }}><Img w={96} h={64} label="" style={{ flex: '0 0 96px' }} /><div style={{ flex: 1 }}><Tag>Editoria</Tag><div className="wf-bar" style={{ width: '90%', height: 11, margin: '8px 0 6px' }} /><div className="wf-bar" style={{ width: '60%', height: 11 }} /></div><span style={{ color: 'var(--wf-navy)' }}>›</span></div>)}</div>
            </div>
            <div style={{ position: 'relative', padding: '22px 28px' }}>
              <Pin n={3} style={{ position: 'absolute', left: -34, top: 16, zIndex: 6 }} />
              <SlotBox cota="Oficial" label="newsletter-patrocínio · faixa" h={80} />
              <div className="wf-rule" style={{ margin: '20px 0 14px' }} />
              <Data style={{ display: 'block', textAlign: 'center' }}>Você recebe porque é sócio · descadastrar · preferências</Data>
              <Data style={{ display: 'block', textAlign: 'center', marginTop: 6 }}>Yacht Club de Ilhabela · desde 1956</Data>
            </div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

    // Evento · Desktop
    <DCArtboard key="tEd" id="tpl-event-d" label="Evento · Desktop" width={SHEETW(1240)} height={1520} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Template <b>Evento</b> em desktop (regatas, sociais, Semana de Vela).',
          { pin: 1, t: 'Hero + <b>apresentado por</b> (evento).' },
          { pin: 2, t: 'Main: descrição + <b>programação</b> + classes. Sidebar: data/local + inscrição.' },
          { pin: 3, t: 'Resultados + galeria + <b>event-faixa</b> (cotas).' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ position: 'relative' }}>
          <Img h={380} label="Hero · evento" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', top: 24, right: 60, zIndex: 4 }}><Cobrand /></div>
          <Pin n={1} style={{ position: 'absolute', left: 40, top: 12, zIndex: 6 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 44 }}><Tag navy>Regata · Oceânico</Tag><div className="wf-h" style={{ fontSize: 44, marginTop: 12 }}>Circuito Ilhabela · Etapa 2</div></div>
        </div>
        <div style={{ padding: '36px 60px', display: 'grid', gridTemplateColumns: '1fr 340px', gap: 48 }}>
          <div style={{ position: 'relative', maxWidth: 720 }}>
            <Pin n={2} style={{ position: 'absolute', left: -40, top: 0, zIndex: 6 }} />
            <Lines n={4} style={{ marginBottom: 24 }} />
            <Eyebrow style={{ marginBottom: 16 }}>Programação</Eyebrow>
            <div className="wf-stack" style={{ gap: 0, marginBottom: 24 }}>{[['18/jul', 'Briefing e largada'], ['19/jul', 'Regatas'], ['20/jul', 'Premiação']].map(([d, t]) => <div key={d} className="wf-row" style={{ gap: 18, padding: '13px 0', borderBottom: '1px solid var(--wf-line-2)' }}><Data style={{ flex: '0 0 60px', color: 'var(--wf-navy)', fontSize: 14 }}>{d}</Data><div className="wf-h sm">{t}</div></div>)}</div>
            <Eyebrow style={{ marginBottom: 12 }}>Classes</Eyebrow>
            <div className="wf-row" style={{ gap: 8, flexWrap: 'wrap' }}>{['ORC', 'HPE', 'Snipe', 'Optimist'].map(c => <Tag key={c}>{c}</Tag>)}</div>
          </div>
          <div>
            <div className="wf-card" style={{ padding: 18, marginBottom: 16 }}><div className="wf-stack" style={{ gap: 10 }}><Data>📅 18–20 jul 2026</Data><Data>📍 Raia YCI · Ilhabela</Data><Data>🌬 12–16 kn SE</Data></div><Btn variant="primary" block ar style={{ marginTop: 14 }}>Inscrever-se</Btn></div>
            <Eyebrow style={{ marginBottom: 12 }}>Documentos</Eyebrow>
            <div className="wf-stack" style={{ gap: 10 }}><DocRow /><DocRow /></div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '0 60px 28px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 40, top: -6, zIndex: 6 }} />
          <div className="wf-between" style={{ marginBottom: 12 }}><Eyebrow>Resultados</Eyebrow><Link>Ver ao vivo ↗</Link></div>
          <div className="wf-card" style={{ padding: 0, marginBottom: 20 }}>{[1, 2, 3, 4].map(p => <ResultRow key={p} pos={p} />)}</div>
          <SlotBox cota="Master" label="event-faixa · cotas do evento" h={80} />
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

  ];
}
window.tDeskArtboards = tDeskArtboards;

// ---------------- VIDA / NÁUTICA (desktop) ----------------
function vDeskArtboards() {
  return [

    // Notícias · Desktop
    <DCArtboard key="vNd" id="vida-news-d" label="Notícias · Desktop" width={SHEETW(1240)} height={1135} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Lista <b>Notícias</b> em desktop: grade de 3 colunas + filtro.',
          { pin: 1, t: 'Busca + filtro por categoria/ano.' },
          { pin: 2, t: 'Grade de cards + <b>infeed "Patrocinado"</b> a cada N.' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ padding: '30px 60px' }}>
          <Crumb items={['Notícias']} />
          <div className="wf-between" style={{ marginBottom: 20, alignItems: 'flex-end' }}>
            <div className="wf-h" style={{ fontSize: 40 }}>Notícias</div>
            <div style={{ position: 'relative', width: 300 }}><Pin n={1} style={{ position: 'absolute', left: -28, top: -2, zIndex: 6 }} /><div className="wf-input">⌕ Buscar notícia</div></div>
          </div>
          <div className="wf-row" style={{ gap: 8, marginBottom: 24, flexWrap: 'wrap' }}>{['Todas', 'Esportes', 'Social', 'Clube', 'Náutica & Vela', '2026'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
          <div style={{ position: 'relative' }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: -2, zIndex: 6 }} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
              <NewsCard /><NewsCard /><NewsCard />
              <div style={{ gridColumn: 'span 1' }}><div className="wf-card" style={{ padding: 12, borderStyle: 'dashed', borderColor: 'var(--wf-navy-14)', background: 'var(--wf-navy-08)', height: '100%' }}><div className="wf-between" style={{ marginBottom: 8 }}><Tag navy>Patrocinado</Tag><Data>infeed</Data></div><Box h={90} label="Espaço · Oficial" style={{ marginBottom: 8 }} /><Data>Espaço disponível · Cota Oficial</Data></div></div>
              <NewsCard /><NewsCard />
            </div>
          </div>
          <div className="wf-center" style={{ marginTop: 28 }}><Btn variant="ghost">Carregar mais</Btn></div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

    // Agenda · Desktop
    <DCArtboard key="vAd" id="vida-agenda-d" label="Agenda · Desktop" width={SHEETW(1240)} height={1040} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          '<b>Agenda</b> desktop: calendário grande + lista de próximos.',
          { pin: 1, t: 'Filtro por tipo (Regata / Social / Escola) + toggle mês/lista.' },
          'Sistema único de Agenda; "Calendário de Regatas" = esta Agenda filtrada.',
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ padding: '30px 60px' }}>
          <Crumb items={['Vida no Iate Clube', 'Agenda']} />
          <div className="wf-between" style={{ marginBottom: 18 }}><div className="wf-h" style={{ fontSize: 40 }}>Agenda</div><div className="wf-row" style={{ gap: 6 }}><Chip active>Mês</Chip><Chip>Lista</Chip></div></div>
          <div style={{ position: 'relative' }}>
            <Pin n={1} style={{ position: 'absolute', left: -28, top: -2, zIndex: 6 }} />
            <div className="wf-row" style={{ gap: 8, marginBottom: 20 }}>{['Todos', 'Regata', 'Social', 'Escola', 'Gastronomia'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 32 }}>
            <div className="wf-card" style={{ padding: 18 }}>
              <div className="wf-between" style={{ marginBottom: 14 }}><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: 6 }}>{['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={{ height: 56, borderRadius: 4, fontSize: 12, color: 'var(--wf-muted)', border: '1px solid var(--wf-line-2)', background: [13, 14, 21].includes(i) ? 'var(--wf-navy-08)' : 'transparent', fontWeight: [13, 14, 21].includes(i) ? 700 : 400 }}>{i + 1}</div>)}</div>
            </div>
            <div><Eyebrow style={{ marginBottom: 14 }}>Próximos</Eyebrow><div className="wf-stack" style={{ gap: 12 }}><EventRow status="Confirmado" /><EventRow status="Inscrições" /></div></div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

    // Esportes (hub) · Desktop
    <DCArtboard key="vEd" id="vida-esportes-d" label="Esportes (hub) · Desktop" width={SHEETW(1240)} height={1320} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          '<b>Esportes</b> hub desktop: Náutica & Vela em destaque + modalidades.',
          { pin: 1, t: 'Card-destaque <b>Náutica & Vela</b> (largo).' },
          { pin: 2, t: 'Grade de modalidades + agenda esportiva + faixa de patrocínio.' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ padding: '30px 60px' }}>
          <Crumb items={['Vida no Iate Clube', 'Esportes']} />
          <div className="wf-h" style={{ fontSize: 40, marginBottom: 20 }}>Esportes</div>
          <div style={{ position: 'relative' }}>
            <Pin n={1} style={{ position: 'absolute', left: -28, top: -2, zIndex: 6 }} />
            <div className="wf-card" style={{ padding: 0, marginBottom: 24, border: '1.5px solid var(--wf-navy)', display: 'flex' }}><Img w={420} h={220} label="Náutica & Vela" style={{ border: 'none', borderRadius: 0, flex: '0 0 420px' }} /><div style={{ padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}><Tag navy>Em destaque</Tag><div className="wf-h lg" style={{ margin: '12px 0 8px' }}>Náutica & Vela</div><Data style={{ marginBottom: 16 }}>Calendário de regatas · resultados · escola de vela · classes</Data><Btn variant="primary" ar style={{ alignSelf: 'flex-start' }}>Ver Náutica & Vela</Btn></div></div>
          </div>
          <div style={{ position: 'relative' }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: -2, zIndex: 6 }} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginBottom: 28 }}>{['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={120} label="" style={{ border: 'none', borderRadius: 0 }} /><div style={{ padding: 14 }}><div className="wf-h sm">{t}</div><Data>ver modalidade ›</Data></div></div>)}</div>
            <div className="wf-sponsor" style={{ height: 80 }}><span>Patrocínio · faixa</span><div className="lg-slot" /><div className="lg-slot" /></div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

    // Regatas (calendário) · Desktop
    <DCArtboard key="vRd" id="naut-regatas-d" label="Regatas (Agenda) · Desktop" width={SHEETW(1240)} height={940} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          '<b>Calendário de Regatas</b> = Agenda filtrada por Regata, dentro de Náutica.',
          { pin: 1, t: 'Filtro por classe + toggle calendário/lista.' },
          { pin: 2, t: 'Cada regata → página de evento (template Evento).' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ padding: '30px 60px' }}>
          <Crumb items={['Vida no Iate Clube', 'Agenda', 'Regatas']} />
          <div className="wf-between" style={{ marginBottom: 18 }}><div className="wf-h" style={{ fontSize: 40 }}>Calendário de regatas</div><div className="wf-row" style={{ gap: 6 }}><Chip active>Lista</Chip><Chip>Mês</Chip></div></div>
          <div style={{ position: 'relative' }}>
            <Pin n={1} style={{ position: 'absolute', left: -28, top: -2, zIndex: 6 }} />
            <div className="wf-row" style={{ gap: 8, marginBottom: 22 }}>{['Todas', 'Oceânico', 'Optimist', 'Snipe', 'HPE'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
          </div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: -2, zIndex: 6 }} />
            <EventRow status="Confirmada" /><EventRow status="Inscrições" /><EventRow status="Adiada" /><EventRow status="Confirmada" /><EventRow status="Inscrições" /><EventRow status="Confirmada" />
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

    // Resultados · Desktop
    <DCArtboard key="vResd" id="naut-resultados-d" label="Resultados · Desktop" width={SHEETW(1240)} height={1000} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          '<b>Resultados</b> desktop: tabela larga (mono, tabular).',
          { pin: 1, t: 'Seleção de regata + classe + link ao vivo.' },
          { pin: 2, t: 'Classificação: pos · barco · classe · tempo · pontos.' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ padding: '30px 60px' }}>
          <Crumb items={['Vida no Iate Clube', 'Esportes', 'Náutica & Vela', 'Resultados']} />
          <div className="wf-h" style={{ fontSize: 40, marginBottom: 18 }}>Resultados</div>
          <div style={{ position: 'relative' }}>
            <Pin n={1} style={{ position: 'absolute', left: -28, top: -2, zIndex: 6 }} />
            <div className="wf-between" style={{ marginBottom: 20 }}><div className="wf-row" style={{ gap: 12, width: 520 }}><Field select placeholder="Regata" style={{ flex: 1 }} /><Field select placeholder="Classe" style={{ flex: 1 }} /></div><span className="wf-data" style={{ color: 'var(--wf-navy)' }}>● resultados ao vivo</span></div>
          </div>
          <div style={{ position: 'relative' }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <div className="wf-card" style={{ padding: 0 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr 1fr 120px 100px', padding: '12px 18px', background: 'var(--wf-fill-2)', borderBottom: '1px solid var(--wf-line-2)' }}>{['POS', 'BARCO', 'CLASSE', 'TEMPO', 'PONTOS'].map(h => <Data key={h}>{h}</Data>)}</div>
              {[1, 2, 3, 4, 5, 6, 7, 8].map(p => <div key={p} style={{ display: 'grid', gridTemplateColumns: '60px 1fr 1fr 120px 100px', padding: '13px 18px', borderBottom: p < 8 ? '1px solid var(--wf-line-2)' : 'none', alignItems: 'center' }}><Data style={{ color: 'var(--wf-navy)', fontWeight: 700 }}>{p}º</Data><div className="wf-bar" style={{ width: 160, height: 10 }} /><Data>Oceânico ORC</Data><Data>00:00:00</Data><Data style={{ color: 'var(--wf-ink)', fontWeight: 700 }}>{p * 2}</Data></div>)}
            </div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

    // Newsletter · arquivo de edições · Desktop
    <DCArtboard key="vRid" id="vida-newsletter-d" label="Newsletter · arquivo · Desktop" width={SHEETW(1240)} height={980} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Rev. 18/jun: <b>arquivo público</b> da newsletter (substitui o acervo da Revista). A edição abre as matérias no portal de Notícias.',
          { pin: 1, t: '<b>Edição da semana</b> em destaque + assinar.' },
          { pin: 2, t: '<b>Arquivo</b> de envios anteriores (data + título).' },
          'Sem capa/edição-magazine: é curadoria semanal de links.',
        ]}>
        <DeskHeader active="Notícias" weather mega />
        <div style={{ padding: '30px 60px 0' }}>
          <div className="wf-crumb" style={{ marginBottom: 14 }}>Notícias<span className="sep">›</span>Newsletter</div>
          <div className="wf-between" style={{ alignItems: 'flex-end', marginBottom: 24 }}>
            <div><div className="wf-h" style={{ fontSize: 44 }}>Newsletter semanal</div><T sm style={{ marginTop: 6 }}>Os destaques do clube no seu e-mail · nome a definir</T></div>
            <div className="wf-row" style={{ gap: 8 }}><div className="wf-input" style={{ width: 220 }}>seu@email.com</div><Btn variant="primary">Assinar</Btn></div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '0 60px 8px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 32, top: -4, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 0, display: 'flex', marginBottom: 32 }}>
            <Img w={420} h={260} label="Destaque · edição da semana" style={{ border: 'none', borderRadius: 0, flex: '0 0 420px' }} />
            <div style={{ padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}><Data style={{ marginBottom: 8 }}>Edição da semana · 12 jun 2026</Data><div className="wf-h lg" style={{ marginBottom: 12 }}>Nesta semana no clube</div><Lines n={3} style={{ marginBottom: 18 }} /><Btn variant="primary" ar style={{ alignSelf: 'flex-start' }}>Ver edição</Btn></div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '0 60px 28px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 32, top: -4, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 16 }}>Edições anteriores</Eyebrow>
          <div className="wf-card" style={{ padding: 0 }}>{['05 jun 2026','29 mai 2026','22 mai 2026','15 mai 2026','08 mai 2026'].map((d,i,arr) => <div key={i} className="wf-between" style={{ padding: '14px 18px', borderBottom: i<arr.length-1 ? '1px solid var(--wf-line-2)' : 'none' }}><div className="wf-row" style={{ gap: 16 }}><Data style={{ color: 'var(--wf-navy)', width: 90 }}>{d}</Data><div className="wf-h sm">Título da edição</div></div><span style={{ color: 'var(--wf-faint)' }}>›</span></div>)}</div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

    // Esportes › Náutica & Vela (sub-hub) · Desktop
    <DCArtboard key="nHd" id="naut-hub-d" label="Esportes › Náutica & Vela · Desktop" width={SHEETW(1240)} height={1280} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          '<b>Sub-hub Náutica & Vela</b> em desktop (vive sob Esportes · Vida no Iate Clube).',
          { pin: 1, t: 'Hero + atalhos: Calendário, Resultados, Escola, Classes.' },
          { pin: 2, t: '<b>Semana de Vela</b> (âncora) em destaque.' },
          { pin: 3, t: 'Próximas regatas + últimos resultados em 2 colunas.' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 40, top: 12, zIndex: 6 }} />
          <Img h={400} label="Hero · regata em mar aberto" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 44, maxWidth: 720 }}><div className="wf-crumb" style={{ marginBottom: 10 }}>Vida no Iate Clube<span className="sep">›</span>Esportes<span className="sep">›</span>Náutica & Vela</div><Eyebrow style={{ marginBottom: 10 }}>Náutica & Vela</Eyebrow><div className="wf-h" style={{ fontSize: 50, lineHeight: 1.04 }}>O coração do clube é a vela</div></div>
        </div>
        <div style={{ padding: '36px 60px' }}>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18, marginBottom: 24 }}>
            <Pin n={1} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            {['Calendário de Regatas', 'Resultados', 'Escola de Vela', 'Classes'].map(t => <div key={t} className="wf-card" style={{ padding: 18 }}><div className="wf-h sm" style={{ marginBottom: 6 }}>{t}</div><Data>acessar ›</Data></div>)}
          </div>
          <div style={{ position: 'relative', marginBottom: 32 }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <div className="wf-card" style={{ padding: 0, border: '1.5px solid var(--wf-navy)', display: 'flex' }}><Img w={420} h={190} label="Semana de Vela · SIVI" style={{ border: 'none', borderRadius: 0, flex: '0 0 420px' }} /><div style={{ padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}><Tag navy>Evento-âncora</Tag><div className="wf-h lg" style={{ margin: '10px 0 6px' }}>Semana Internacional de Vela</div><Data style={{ marginBottom: 16 }}>24 jul – 02 ago 2026 · Ilhabela</Data><Btn variant="primary" ar style={{ alignSelf: 'flex-start' }}>Ver evento</Btn></div></div>
          </div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
            <Pin n={3} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <div><Eyebrow style={{ marginBottom: 14 }}>Próximas regatas</Eyebrow><div className="wf-stack" style={{ gap: 12 }}><EventRow status="Inscrições" /><EventRow status="Confirmada" /></div></div>
            <div><div className="wf-between" style={{ marginBottom: 14 }}><Eyebrow>Últimos resultados</Eyebrow><Link>Ver todos ↗</Link></div><div className="wf-card" style={{ padding: 0 }}>{[1, 2, 3, 4].map(p => <ResultRow key={p} pos={p} />)}</div></div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

  ];
}
window.vDeskArtboards = vDeskArtboards;

// ---------------- SERVIÇOS (desktop) ----------------
function sDeskArtboards() {
  return [
    // Marina · Desktop
    <DCArtboard key="sMd" id="serv-marina-d" label="Marina · Desktop" width={SHEETW(1240)} height={1125} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          '<b>Marina</b> desktop: info + vagas sem dados pessoais (LGPD).',
          { pin: 1, t: 'Texto/estrutura à esquerda, vagas + CTA à direita.' },
          { pin: 2, t: 'Dois papéis: público vê info; sócio entra na fila logado.' },
        ]}>
        <DeskHeader active="Serviços" weather mega />
        <div style={{ position: 'relative' }}>
          <Img h={360} label="Foto da marina" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 40 }}><Eyebrow style={{ marginBottom: 8 }}>Serviços · Marina</Eyebrow><div className="wf-h" style={{ fontSize: 44 }}>Marina &amp; Estaleiro</div></div>
        </div>
        <div style={{ padding: '36px 60px', display: 'grid', gridTemplateColumns: '1fr 360px', gap: 48 }}>
          <div style={{ position: 'relative', maxWidth: 720 }}><Pin n={1} style={{ position: 'absolute', left: -40, top: 0, zIndex: 6 }} /><Lines n={6} style={{ marginBottom: 22 }} /><Lines n={4} /></div>
          <div style={{ position: 'relative' }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <Eyebrow style={{ marginBottom: 12 }}>Vagas disponíveis</Eyebrow>
            <div className="wf-stack" style={{ gap: 10, marginBottom: 16 }}>{[['Vaga seca · 32 pés', 'Locação'], ['Vaga molhada · 40 pés', 'Venda']].map(([t, k]) => <div key={t} className="wf-between wf-card" style={{ padding: 12 }}><div className="wf-h sm">{t}</div><Tag navy>{k}</Tag></div>)}</div>
            <div className="wf-card" style={{ padding: 16, background: 'var(--wf-fill-2)' }}><div className="wf-h sm" style={{ marginBottom: 4 }}>Tenho interesse</div><T sm style={{ marginBottom: 12 }}>Contato pela secretaria — sem expor telefones.</T><Btn variant="ghost" size="sm" block>Falar com a secretaria</Btn></div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,
    // Serviços · índice · Desktop
    <DCArtboard key="sId" id="serv-index-d" label="Serviços · índice · Desktop" width={SHEETW(1240)} height={900} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          '<b>Hub de Serviços</b> (operacional) em desktop.',
          { pin: 1, t: 'Faixa de <b>dados dinâmicos</b> no topo (balsa, combustível, clima).' },
          { pin: 2, t: 'Grade de serviços operacionais (3 colunas).' },
          'Rev. 16/jun: Cardápio saiu → Gastronomia (Vida). Serviços = só operação.',
        ]}>
        <DeskHeader active="Serviços" weather mega />
        <div style={{ padding: '30px 60px 0' }}>
          <div className="wf-crumb" style={{ marginBottom: 14 }}>Serviços</div>
          <div className="wf-h" style={{ fontSize: 44, marginBottom: 20 }}>Serviços</div>
          <div style={{ position: 'relative' }}>
            <Pin n={1} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <div className="wf-card" style={{ padding: 18, display: 'flex', justifyContent: 'space-around', textAlign: 'center', marginBottom: 28 }}>{[['⛴', '06–23h', 'Balsa'], ['⛽', 'R$ 6,29', 'Combustível'], ['🌬', '14 kn SE', 'Vento'], ['🌡', '22°', 'Tempo']].map(([i, v, l]) => <div key={l}><div style={{ fontSize: 18 }}>{i}</div><div className="wf-data" style={{ margin: '6px 0 2px', color: 'var(--wf-ink)', fontWeight: 700 }}>{v}</div><Data>{l}</Data></div>)}</div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '0 60px 28px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 32, top: -4, zIndex: 6 }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>{['Marina & Estaleiro', 'Travessia da balsa', 'Combustíveis', 'Taxas', 'Regulamentos', 'Links úteis'].map(t => <div key={t} className="wf-card" style={{ padding: 0 }}><Img h={150} label="" style={{ border: 'none', borderRadius: 0 }} /><div style={{ padding: 16 }}><div className="wf-h sm" style={{ marginBottom: 4 }}>{t}</div><Data>acessar ›</Data></div></div>)}</div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,
  ];
}
window.sDeskArtboards = sDeskArtboards;

// ---------------- O CLUBE (desktop) ----------------
function cDeskArtboards() {
  return [
    // 70 anos (abertura) · Desktop
    <DCArtboard key="c70d" id="clube-70-d" label="O Clube · 70 anos · Desktop" width={SHEETW(1240)} height={1465} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          '<b>O Clube / 70 anos</b> (abertura institucional) em desktop — heritage.',
          { pin: 1, t: 'Hero cinematográfico + claim.' },
          { pin: 2, t: 'Números + linha do tempo (coluna de leitura + trilho).' },
          { pin: 3, t: 'Citação + <b>prova social</b> (componente único).' },
        ]}>
        <DeskHeader active="O Clube" weather mega />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 40, top: 12, zIndex: 6 }} />
          <Img h={460} label="Hero · arquivo histórico do clube" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 48, maxWidth: 720 }}><Eyebrow style={{ marginBottom: 12 }}>1956 — 2026 · 70 anos</Eyebrow><div className="wf-h" style={{ fontSize: 54, lineHeight: 1.03 }}>Setenta anos de mar, vela e tradição</div></div>
        </div>
        <div style={{ padding: '40px 60px' }}>
          <div className="wf-row" style={{ gap: 48, justifyContent: 'center', marginBottom: 36 }}><Stat v="1956" l="Fundação" /><Stat v={<>500<span style={{ fontSize: 24 }}>+</span></>} l="Associados" /><Stat v="16" l="Países" /><Stat v="70" l="Anos" /></div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '220px 1fr', gap: 40 }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <div><div className="wf-eyebrow" style={{ marginBottom: 12 }}>Linha do tempo</div></div>
            <div style={{ maxWidth: 720 }}>
              <div className="wf-stack" style={{ gap: 16, marginBottom: 28 }}>{[['1956', 'Fundação do clube'], ['1973', 'Primeira Semana de Vela'], ['2006', 'Sede de São Sebastião'], ['2026', '70 anos · novo site']].map(([y, t]) => <div key={y} className="wf-row" style={{ gap: 18, alignItems: 'flex-start' }}><Data style={{ flex: '0 0 54px', color: 'var(--wf-navy)', fontSize: 16 }}>{y}</Data><div style={{ flex: 1 }}><div className="wf-h sm" style={{ marginBottom: 6 }}>{t}</div><Lines n={2} /></div></div>)}</div>
              <div style={{ position: 'relative' }}><Pin n={3} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} /><Quote style={{ marginBottom: 28 }} /><SocialProof wrap /></div>
            </div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,
  ];
}
window.cDeskArtboards = cDeskArtboards;