// ============================================================
// SEÇÃO · Componentes globais (em todas as telas)
// Retorna um array de <DCArtboard>. Estilo ABS = artboard cresce
// com o conteúdo (canvas) e height numérico cobre o foco.
// ============================================================
window.ABS = { height: 'auto', overflow: 'visible', background: 'transparent' };

function globalArtboards() {
  return [

    // ---------- G1 · Header universal (desktop) — deslogado + logado ----------
    <DCArtboard key="g1" id="g-header" label="Header universal · Desktop" width={SHEETW(1240)} height={530} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          { pin: 1, t: 'Logo: <b>espaço reservado</b>, não recriar a marca.' },
          { pin: 2, t: '<b>4 áreas</b> na nav (O Clube, Vida no Iate Clube, Notícias, Serviços). <b>Associe-se</b> vira CTA fixo e <b>Área do Sócio</b> vira botão — ambos saem da navegação.' },
          { pin: 3, t: 'Busca + seletor <b>PT/EN</b> sempre acessíveis.' },
          { pin: 4, t: '<b>Entrar / Área do Sócio</b> em destaque — canal oficial, não um "entrar" no canto.' },
          { state: true, pin: 5, t: 'Estado <b>logado</b>: o botão vira atalho do painel (avatar + nome).' },
          'Sticky no scroll: cream ~85% + leve blur.' ,
        ]}>
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 10, top: 12, zIndex: 6 }} />
          <Pin n={2} style={{ position: 'absolute', left: 250, top: 12, zIndex: 6 }} />
          <Pin n={3} style={{ position: 'absolute', right: 250, top: 12, zIndex: 6 }} />
          <Pin n={4} style={{ position: 'absolute', right: 14, top: 12, zIndex: 6 }} />
          <DeskHeader active="O Clube" weather mega />
        </div>
        <div style={{ padding: '10px 26px', background: 'var(--wf-fill-2)' }}>
          <State neutral>Estado A · Visitante (deslogado)</State>
        </div>
        <div style={{ position: 'relative' }}>
          <Pin n={5} style={{ position: 'absolute', right: 14, top: 12, zIndex: 6 }} />
          <DeskHeader active="O Clube" logged weather mega />
        </div>
        <div style={{ padding: '10px 26px', background: 'var(--wf-navy-08)' }}>
          <State>Estado B · Sócio autenticado (logado)</State>
        </div>
      </Sheet>
    </DCArtboard>,

    // ---------- G1b · Header desktop · mega-menu + clima ----------
    <DCArtboard key="g1b" id="g-mega" label="Header · mega-menu + clima" width={SHEETW(1240)} height={540} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Recomendação da direção: <b>mega-menu</b> no desktop (drawer no mobile).',
          { pin: 1, t: '<b>Clima / vento</b> no header — utilidade náutica (componente já previsto).' },
          { pin: 2, t: 'Hover numa área abre <b>painel com sub-estruturas</b> — mais escaneável p/ 4 áreas.' },
          { pin: 3, t: 'Coluna de <b>destaque</b> no painel (ex.: Semana de Vela).' },
          'Náutica & Vela ganha relevo dentro de Vida no Iate Clube.',
        ]}>
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', right: 250, top: 12, zIndex: 6 }} />
          <Pin n={2} style={{ position: 'absolute', left: 250, top: 12, zIndex: 6 }} />
          <DeskHeader active="Vida no Iate Clube" weather mega />
        </div>
        <div style={{ position: 'relative' }}>
          <Pin n={3} style={{ position: 'absolute', right: 80, top: 30, zIndex: 6 }} />
          <MegaMenuPanel />
        </div>
        <div style={{ padding: '12px 26px', background: 'var(--wf-fill-2)' }}>
          <State neutral>Painel aberto no hover de "Vida no Iate Clube"</State>
        </div>
      </Sheet>
    </DCArtboard>,

    // ---------- G2 · Header + menu drawer (mobile) ----------
    <DCArtboard key="g2" id="g-menu-mob" label="Menu mobile · Drawer" width={SHEETW(390)} height={685} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Menu completo em <b>drawer</b> full-screen.',
          { pin: 1, t: 'Busca e <b>PT/EN</b> no topo do drawer.' },
          { pin: 2, t: 'As <b>4 áreas</b>; cada uma abre acordeão com sub-itens.' },
          { pin: 3, t: '<b>Associe-se</b> (CTA) e <b>Entrar / Área do Sócio</b> fixos e destacados no rodapé do drawer.' },
          'Hit targets ≥ 44px. Fecha no "×" ou toque fora.',
        ]}>
        <MobileHeader />
        <div style={{ position: 'relative', background: 'var(--wf-screen)' }}>
          <div className="wf-between" style={{ padding: '14px 16px' }}>
            <Logo small />
            <span style={{ color: 'var(--wf-muted)', fontSize: 20 }}>×</span>
          </div>
          <div style={{ position: 'relative', padding: '0 16px 16px' }}>
            <Pin n={1} style={{ position: 'absolute', left: -2, top: -2, zIndex: 6 }} />
            <div className="wf-input" style={{ marginBottom: 12 }}>⌕  Buscar no site</div>
            <div className="wf-row" style={{ marginBottom: 16 }}>
              <span className="wf-chip active">PT</span><span className="wf-chip">EN</span>
            </div>
            <div style={{ position: 'relative' }}>
              <Pin n={2} style={{ position: 'absolute', left: -2, top: 4, zIndex: 6 }} />
              {NAV.concat(['Área do Sócio']).map((n, i) => (
                <div key={n} className="wf-between" style={{ padding: '15px 4px', borderBottom: '1px solid var(--wf-line-2)' }}>
                  <span className="wf-h sm">{n}</span>
                  <span style={{ color: 'var(--wf-faint)' }}>{i < 4 ? '+' : '›'}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative', padding: 16, borderTop: '1px solid var(--wf-line-2)', background: 'var(--wf-fill-2)', display: 'flex', flexDirection: 'column', gap: 10 }}>
            <Pin n={3} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
            <Btn variant="ghost" block style={{ borderColor: 'var(--wf-navy)', color: 'var(--wf-navy)' }}>Associe-se</Btn>
            <Btn variant="primary" block>Entrar · Área do Sócio</Btn>
          </div>
        </div>
      </Sheet>
    </DCArtboard>,

    // ---------- G3 · Footer universal (desktop) ----------
    <DCArtboard key="g3" id="g-footer" label="Footer universal · Desktop" width={SHEETW(1240)} height={420} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          { pin: 1, t: '<b>Contato das 3 sedes</b> numa página só (resolve telefones espalhados).' },
          { pin: 2, t: '<b>Patrocinadores</b> com hierarquia visual (Master · Oficial · Apoio).' },
          { pin: 3, t: '<b>Newsletter semanal</b> → assinar (substitui o PDF da Revista).' },
          'Imprensa · LGPD · Cookies · selo <b>"Desde 1956"</b>.',
        ]}>
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 14, top: 14, zIndex: 6 }} />
          <Pin n={3} style={{ position: 'absolute', right: 200, top: 14, zIndex: 6 }} />
          <Pin n={2} style={{ position: 'absolute', right: 180, bottom: 56, zIndex: 6 }} />
          <Footer />
        </div>
      </Sheet>
    </DCArtboard>,

    // ---------- G4 · Busca · resultados (desktop) ----------
    <DCArtboard key="g4" id="g-search" label="Busca · Resultados" width={SHEETW(1240)} height={840} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Inexistente hoje. Campo + página de resultados.',
          { pin: 1, t: '<b>Filtro por área e tipo</b> (matéria, evento, documento, página).' },
          { pin: 2, t: 'Resultado: tipo, título, trecho e caminho (breadcrumb).' },
          { state: true, pin: 3, t: 'Prever estado <b>vazio</b> ("nada encontrado" + sugestões).' },
        ]}>
        <DeskHeader />
        <div style={{ padding: '26px 26px 40px' }}>
          <div className="wf-input focus" style={{ height: 50, fontSize: 15, marginBottom: 8 }}>⌕  travessia balsa horário</div>
          <Data style={{ marginBottom: 18 }}>128 resultados</Data>
          <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 28 }}>
            <div style={{ position: 'relative' }}>
              <Pin n={1} style={{ position: 'absolute', left: -2, top: -2, zIndex: 6 }} />
              <div className="wf-eyebrow" style={{ marginBottom: 12 }}>Filtrar por área</div>
              <div className="wf-stack" style={{ gap: 9, marginBottom: 20 }}>
                {['Todas', 'O Clube', 'Vida no Iate Clube', 'Notícias', 'Serviços'].map((x, i) =>
                  <div key={x} className="wf-chip" style={i === 0 ? { borderColor: 'var(--wf-navy)', color: 'var(--wf-navy)', background: 'var(--wf-navy-08)', fontWeight: 600 } : {}}>{x}</div>)}
              </div>
              <div className="wf-eyebrow" style={{ marginBottom: 12 }}>Tipo</div>
              <div className="wf-stack" style={{ gap: 9 }}>
                {['Matéria', 'Evento', 'Documento', 'Página'].map(x => <div key={x} className="wf-chip">{x}</div>)}
              </div>
            </div>
            <div style={{ position: 'relative' }}>
              <Pin n={2} style={{ position: 'absolute', left: -2, top: -2, zIndex: 6 }} />
              <div className="wf-stack" style={{ gap: 14 }}>
                {[0, 1, 2, 3].map(i => (
                  <div key={i} className="wf-card" style={{ padding: 16 }}>
                    <div className="wf-crumb" style={{ marginBottom: 9 }}><Tag>{['Serviço', 'Matéria', 'Evento', 'Documento'][i]}</Tag><span className="sep">/</span>Serviços<span className="sep">›</span>Travessia</div>
                    <div className="wf-h sm" style={{ marginBottom: 8 }}>Título do resultado nº {i + 1}</div>
                    <Lines n={2} />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </Sheet>
    </DCArtboard>,

    // ---------- G5 · Estados de lista (mobile) ----------
    <DCArtboard key="g5" id="g-states" label="Estados · vazio / carregando / erro" width={1180} height={800} style={ABS}>
      <div className="wf-sheet">
        {[
          ['Vazio', 'empty'], ['Carregando', 'loading'], ['Erro', 'error'],
        ].map(([title, kind]) => (
          <div key={kind} style={{ flex: '0 0 auto' }}>
            <div className="wf-vp">{title}</div>
            <div className="wf-screen is-mobile" style={{ width: 300 }}>
              <MobileHeader />
              <div style={{ padding: '14px 16px' }}>
                <div className="wf-h md" style={{ marginBottom: 4 }}>Notícias</div>
                <div className="wf-row" style={{ gap: 7, marginBottom: 16 }}><Chip active>Todas</Chip><Chip>Esportes</Chip><Chip>Social</Chip></div>
                {kind === 'empty' && (
                  <div style={{ textAlign: 'center', padding: '40px 14px' }}>
                    <Box w={56} h={56} dashed style={{ margin: '0 auto 16px', borderRadius: '50%' }} />
                    <div className="wf-h sm" style={{ marginBottom: 8 }}>Nada por aqui ainda</div>
                    <T sm style={{ marginBottom: 18 }}>Tente outra categoria ou limpe os filtros.</T>
                    <Btn variant="ghost" size="sm">Limpar filtros</Btn>
                    <State neutral style={{ marginTop: 22 }}>Estado vazio</State>
                  </div>
                )}
                {kind === 'loading' && (
                  <div className="wf-stack" style={{ gap: 14 }}>
                    {[0, 1, 2].map(i => (
                      <div key={i} className="wf-card" style={{ padding: 0 }}>
                        <div className="wf-skel" style={{ height: 90, borderRadius: 0 }} />
                        <div style={{ padding: 12 }}><div className="wf-skel" style={{ height: 11, width: '40%', marginBottom: 8 }} /><div className="wf-skel" style={{ height: 11, width: '85%' }} /></div>
                      </div>
                    ))}
                    <State style={{ margin: '6px auto 0' }}>Carregando · skeleton</State>
                  </div>
                )}
                {kind === 'error' && (
                  <div style={{ textAlign: 'center', padding: '40px 14px' }}>
                    <Box w={56} h={56} style={{ margin: '0 auto 16px', borderRadius: '50%', borderColor: 'var(--wf-navy)' }} label="!" />
                    <div className="wf-h sm" style={{ marginBottom: 8 }}>Algo deu errado</div>
                    <T sm style={{ marginBottom: 18 }}>Não foi possível carregar agora.</T>
                    <Btn variant="primary" size="sm">Tentar de novo</Btn>
                    <State style={{ marginTop: 22 }}>Estado de erro</State>
                  </div>
                )}
              </div>
            </div>
          </div>
        ))}
        <div className="wf-notes">
          <div className="wf-notes-title">Notas · estados</div>
          <p className="wf-note">Todo bloco de lista prevê <b>vazio</b>, <b>carregando</b> e <b>erro</b>.</p>
          <p className="wf-note">Paginação ou scroll infinito + filtro por categoria.</p>
          <p className="wf-note wf-note-state">Mesma régua vale para Notícias, Agenda, Documentos e Comunicados.</p>
        </div>
      </div>
    </DCArtboard>,

    // ---------- G6 · Header sticky (scroll) ----------
    <DCArtboard key="g6" id="g-sticky" label="Header sticky · scroll" width={1180} height={530} style={ABS}>
      <div className="wf-sheet">
        <div style={{ flex: '0 0 auto' }}>
          <div className="wf-vp">Desktop · condensado</div>
          <div className="wf-screen is-desktop" style={{ width: 720 }}>
            <div className="wf-topbar" style={{ height: 48, background: 'rgba(244,242,236,.88)' }}>
              <Logo small />
              <nav className="wf-nav" style={{ marginLeft: 14, gap: 16 }}>{NAV.map(n => <a key={n} className="muted" style={{ fontSize: 12 }}>{n}</a>)}</nav>
              <div style={{ flex: 1 }} />
              <span style={{ color: 'var(--wf-muted)' }}>⌕</span>
              <span className="wf-langs"><span className="on">PT</span>/<span>EN</span></span>
              <div className="wf-btn primary sm" style={{ height: 28 }}>Entrar</div>
            </div>
            <div className="wf-center" style={{ height: 150, color: 'var(--wf-faint)', fontFamily: 'var(--wf-mono)', fontSize: 11, borderBottom: '1px solid var(--wf-line-2)' }}>conteúdo rolando sob o header (cream ~85% + blur)</div>
          </div>
          <div className="wf-vp" style={{ marginTop: 18 }}>Mobile · sticky</div>
          <div className="wf-screen is-mobile" style={{ width: 300 }}>
            <div className="wf-mtop" style={{ height: 46, background: 'rgba(244,242,236,.9)' }}>
              <Logo small />
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}><span style={{ color: 'var(--wf-muted)' }}>⌕</span><div className="wf-btn primary sm" style={{ height: 24, padding: '0 8px', fontSize: 9 }}>Entrar</div><div className="wf-burger"><i /><i /><i /></div></div>
            </div>
            <div className="wf-center" style={{ height: 120, color: 'var(--wf-faint)', fontFamily: 'var(--wf-mono)', fontSize: 10 }}>barra fina fixa no topo</div>
          </div>
        </div>
        <div className="wf-notes">
          <div className="wf-notes-title">Notas · sticky</div>
          <p className="wf-note"><b>Desktop</b>: header <b>condensa ao rolar</b> (cream ~85% + blur), mantém logo, busca, idioma, Entrar e mega-menu.</p>
          <p className="wf-note"><b>Mobile</b>: barra fina sticky com logo + busca + menu; <b>Entrar sempre à mão</b>.</p>
          <p className="wf-note">Como a nav fica sempre exposta, a Home não repete as áreas — usa <b>jornadas por intenção</b>.</p>
        </div>
      </div>
    </DCArtboard>,

    // ---------- G7 · Patrocínio · inventário de slots ----------
    <DCArtboard key="g7" id="g-sponsor" label="Patrocínio · inventário de slots" width={1240} height={670} style={ABS}>
      <div className="wf-sheet">
        <div style={{ flex: '0 0 auto', width: 820 }}>
          <div className="wf-vp">Sistema · inventário de mídia</div>
          <div className="wf-screen is-desktop" style={{ width: 820, padding: 24 }}>
            <Eyebrow style={{ marginBottom: 6 }}>Arquitetura de patrocínio</Eyebrow>
            <div className="wf-h lg" style={{ marginBottom: 16 }}>Slots nomeados, geridos pelo CMS</div>
            <div className="wf-card" style={{ padding: 0 }}>
              <div className="wf-between" style={{ padding: '10px 14px', background: 'var(--wf-fill-2)', borderBottom: '1px solid var(--wf-line-2)' }}><Data>SLOT</Data><Data>ONDE · FORMATO</Data></div>
              {[
                ['home-hero-cobrand', 'Hero · "apresentado por" (sutil)'],
                ['home-faixa-master', 'Faixa nobre pós-hero · cota Master'],
                ['infeed-native', 'A cada N cards · Notícias/Agenda'],
                ['article-mid / sidebar', 'Dentro da matéria · retângulo'],
                ['editoria-apresentada', 'Rodapé de editoria · "apresentada por"'],
                ['event-presented-by / faixa', 'Header e base de Evento/Regata/Semana de Vela'],
                ['footer-apoiadores', 'Todas as páginas · grade por nível'],
                ['anchor-mobile', 'Faixa sticky inferior (opcional)'],
              ].map(([s, w], i) => (
                <div key={s} className="wf-between" style={{ padding: '11px 14px', borderBottom: i < 7 ? '1px solid var(--wf-line-2)' : 'none' }}>
                  <Tag navy>{s}</Tag><Data style={{ textAlign: 'right', maxWidth: 380 }}>{w}</Data>
                </div>
              ))}
            </div>
            <div className="wf-row" style={{ gap: 10, marginTop: 16, flexWrap: 'wrap' }}>
              {['Master', 'Oficial', 'Apoio', 'Fornecedor Oficial', 'Apoio de Evento'].map(c => <Tag key={c}>{c}</Tag>)}
            </div>
          </div>
        </div>
        <div className="wf-notes">
          <div className="wf-notes-title">Notas · patrocínio</div>
          <p className="wf-note"><b>Um conteúdo, uma fonte:</b> documentos <b>Patrocinador</b> + <b>Inserção/Campanha</b> (patrocinador → slots + período + criativo). CMS faz <b>rotação</b>.</p>
          <p className="wf-note">Native <b>sempre rotulado</b> "Patrocinado / Apresentado por" (transparência), reusa o molde Matéria.</p>
          <p className="wf-note"><b>Afinidade por seção</b>: náutico em Esportes/Regatas; banco na Home/institucional (sem rastreamento).</p>
          <p className="wf-note wf-note-state"><b>Área do Sócio sem anúncio comercial</b> — preserva o canal oficial.</p>
          <p className="wf-note">Métricas por slot (GA4 + Vercel) → alimentam o Media Kit e a renovação de cotas.</p>
        </div>
      </div>
    </DCArtboard>,

  ];
}
window.globalArtboards = globalArtboards;