// ============================================================
// SEÇÃO · O Clube — identidade e governança
// (Apresentação/70 anos usa o template Institucional.)
// Aqui as telas com estrutura própria: Diretoria, Conveniados,
// Meio Ambiente/Marina Viva, Imprensa/Press kit.
// ============================================================

function clubeArtboards() {
  return [

    // ---------- Apresentação / 70 anos (abertura institucional · História) ----------
    <DCArtboard key="c70" id="clube-70" label="O Clube · 70 anos (abertura) · Mobile" width={SHEETW(390)} height={1755} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          '<b>Unifica Apresentação + 70 anos</b> numa página de abertura institucional (decisão).',
          { pin: 1, t: '<b>Hero cinematográfico</b> dos 70 anos (à la Chemists Club).' },
          { pin: 2, t: '<b>Números</b> de história + <b>linha do tempo</b>.' },
          { pin: 3, t: '<b>Citação</b> editorial (orgulho de pertencer).' },
          { pin: 4, t: '<b>Prova social</b> (componente único): Globe40, Rolex, NY Yacht Club, Barcelona.' },
          'Útil termo: <b>"História"</b> em PT (substitui "heritage"). Fonte única; Home/Notícias referenciam.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <Img h={300} label="Hero · arquivo histórico do clube" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 16 }}>
            <Eyebrow style={{ marginBottom: 8 }}>1956 — 2026 · 70 anos</Eyebrow>
            <div className="wf-h xl">Setenta anos de mar, vela e tradição</div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '18px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 14, zIndex: 6 }} />
          <Lines n={3} style={{ marginBottom: 18 }} />
          <div className="wf-row" style={{ gap: 10, marginBottom: 22 }}><div style={{ flex: 1 }}><Stat v="1956" l="Fundação" /></div><div style={{ flex: 1 }}><Stat v={<>500<span style={{ fontSize: 22 }}>+</span></>} l="Associados" /></div><div style={{ flex: 1 }}><Stat v="70" l="Anos" /></div></div>
          <Eyebrow style={{ marginBottom: 14 }}>Linha do tempo</Eyebrow>
          <div className="wf-stack" style={{ gap: 0 }}>{[['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: 14, padding: '12px 0', borderBottom: '1px solid var(--wf-line-2)' }}><Data style={{ flex: '0 0 44px', color: 'var(--wf-navy)', fontSize: 14 }}>{y}</Data><div className="wf-h sm">{t}</div></div>)}</div>
        </div>
        <div style={{ position: 'relative', padding: '8px 16px 18px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 4, zIndex: 6 }} />
          <Quote style={{ marginBottom: 22 }} />
          <div style={{ position: 'relative' }}>
            <Pin n={4} style={{ position: 'absolute', left: 0, top: -8, zIndex: 6 }} />
            <SocialProof wrap />
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Diretoria ----------
    <DCArtboard key="cD" id="clube-dir" label="Diretoria · Mobile" width={SHEETW(390)} height={1435} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Corrige a gestão antiga ainda exibida hoje.',
          { pin: 1, t: '<b>Nova gestão</b> em destaque: Comodoro (Palermo) e Vice (Badaró).' },
          { pin: 2, t: 'Demais <b>diretores e conselho</b> em grade de cards (foto + cargo + mandato).' },
          'Tipo de conteúdo "Membro da diretoria" — sem dados pessoais sensíveis (LGPD).',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ padding: '14px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>O Clube<span className="sep">›</span>Diretoria</div>
          <Eyebrow style={{ marginBottom: 8 }}>Gestão 2026–2028</Eyebrow>
          <div className="wf-h xl" style={{ marginBottom: 6 }}>Diretoria e Conselho</div>
        </div>
        <div style={{ position: 'relative', padding: '4px 16px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 0, zIndex: 6 }} />
          <div className="wf-row" style={{ gap: 12 }}>
            {[['Comodoro', 'P. Palermo'], ['Vice-Comodoro', 'G. Badaró']].map(([c, n]) =>
              <div key={c} className="wf-card" style={{ flex: 1, padding: 14, textAlign: 'center' }}><Avatar s={64} style={{ margin: '0 auto 10px' }} /><Tag navy>{c}</Tag><div className="wf-h sm" style={{ marginTop: 8 }}>{n}</div></div>)}
          </div>
        </div>
        <div style={{ position: 'relative', padding: '18px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 14, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 14 }}>Diretores</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[0, 1, 2, 3].map(i => <div key={i} className="wf-card" style={{ padding: 12, textAlign: 'center' }}><Avatar s={48} style={{ margin: '0 auto 8px' }} /><div className="wf-bar" style={{ width: '70%', height: 9, margin: '0 auto 6px' }} /><Data>Cargo</Data></div>)}
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Conveniados: ver O Clube › Conveniados (telas rev-conv-list / rev-conv-page) ----------

    // ---------- Meio Ambiente / Marina Viva ----------
    <DCArtboard key="cM" id="clube-ambiente" label="Meio Ambiente · Mobile" width={SHEETW(390)} height={1400} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Substitui o <b>"Lorem ipsum"</b> da página atual.',
          { pin: 1, t: '<b>Vídeo</b> (Mux) da pesquisa ambiental de 10 anos.' },
          { pin: 2, t: 'Matéria <b>Marina Viva</b> + dados da pesquisa.' },
          'Sem expor dados pessoais (LGPD).',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ padding: '14px 16px 8px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>O Clube<span className="sep">›</span>Meio Ambiente</div>
          <Eyebrow style={{ marginBottom: 8 }}>Marina Viva</Eyebrow>
          <div className="wf-h xl" style={{ marginBottom: 12 }}>Dez anos cuidando do mar</div>
        </div>
        <div style={{ position: 'relative', padding: '0 16px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 22, top: 6, zIndex: 6 }} />
          <Img h={200} video label="" />
        </div>
        <div style={{ position: 'relative', padding: '16px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 12, zIndex: 6 }} />
          <Lines n={5} style={{ marginBottom: 18 }} />
          <div className="wf-row" style={{ gap: 12 }}>
            {[['10', 'anos'], ['+200', 'espécies'], ['1956', 'desde']].map(([v, l]) => <div key={l} className="wf-card" style={{ flex: 1, padding: 12, textAlign: 'center' }}><div className="wf-h lg" style={{ color: 'var(--wf-navy)' }}>{v}</div><Data>{l}</Data></div>)}
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Imprensa / Press kit ----------
    <DCArtboard key="cP" id="clube-imprensa" label="Imprensa / Press kit · Mobile" width={SHEETW(390)} height={1385} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Audiência institucional. Sub-página de O Clube.',
          { pin: 1, t: '<b>Releases</b> recentes (lista).' },
          { pin: 2, t: '<b>Press kit</b>: logos, fotos em alta, fact sheet (download).' },
          { pin: 3, t: '<b>Contato da assessoria</b>.' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ padding: '14px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>O Clube<span className="sep">›</span>Imprensa</div>
          <div className="wf-h xl" style={{ marginBottom: 14 }}>Imprensa</div>
        </div>
        <div style={{ position: 'relative', padding: '0 16px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: -4, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Releases</Eyebrow>
          <div className="wf-stack" style={{ gap: 10, marginBottom: 22 }}>{[0, 1].map(i => <div key={i} className="wf-card" style={{ padding: 12 }}><Data style={{ marginBottom: 6 }}>12 jun 2026</Data><div className="wf-bar" style={{ width: '80%', height: 11 }} /></div>)}</div>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 220, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Press kit</Eyebrow>
          <div className="wf-stack" style={{ gap: 10, marginBottom: 22 }}><DocRow /><DocRow /></div>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 470, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 14, background: 'var(--wf-fill-2)' }}><Eyebrow style={{ marginBottom: 8 }}>Contato assessoria</Eyebrow><Lines n={2} /></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

  ];
}
window.clubeArtboards = clubeArtboards;