// ============================================================
// SEÇÃO · v4 — fechamento (spec 08/jun)
//  patrocinioArtboards · esportesV4Artboards · clubeV4Artboards
//  · servicosV4Artboards
// ============================================================

// Slot de patrocínio vendável (Media Kit) — placeholder "Espaço disponível".
const SlotBox = ({ cota, label, h = 72, style }) => (
  <div className="wf-sponsor" style={{ height: h, flexDirection: 'column', gap: 6, borderColor: 'var(--wf-navy-14)', ...style }}>
    <Tag navy>Espaço disponível</Tag>
    <Data style={{ color: 'var(--wf-navy)' }}>{label} · Cota {cota}</Data>
  </div>
);
// Slot de evento com marca real (patrocínio de evento, não do clube).
const BrandSlot = ({ name, w = 84, h = 34 }) => (
  <div style={{ width: w, height: h, border: '1px solid var(--wf-line)', borderRadius: 3, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Data>{name}</Data></div>
);

// ---------------- PATROCÍNIO · pranchas Media Kit ----------------
function patrocinioArtboards() {
  return [

    // Prancha A · Home
    <DCArtboard key="pA" id="spon-a" label="Prancha A · Home" width={SHEETW(390)} height={1250} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          '<b>Inventário como produto de venda</b> — slots de site vazios ("Espaço disponível"), não marcas reais.',
          { pin: 1, t: '<b>home-hero-cobrand</b>: selo "apresentado por" · Cota Master.' },
          { pin: 2, t: '<b>home-faixa-master</b>: faixa nobre logo após o hero · Cota Master.' },
          'Máx. 1 master por página. Material vira Media Kit comercial.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Img h={240} label="Hero" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 4 }}><div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 4, border: '1.5px dashed var(--wf-navy)', background: 'rgba(255,255,255,.85)' }}><Data style={{ color: 'var(--wf-navy)', textTransform: 'uppercase', letterSpacing: '.1em' }}>Apresentado por · Master</Data></div></div>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <div style={{ position: 'absolute', bottom: 14, left: 16 }}><Eyebrow style={{ marginBottom: 6 }}>Semana de Vela</Eyebrow><div className="wf-h lg">A maior semana de vela da América Latina</div></div>
        </div>
        <div style={{ position: 'relative', padding: 16 }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
          <SlotBox cota="Master" label="Faixa full-width" h={84} />
        </div>
        <div style={{ padding: '0 16px 8px' }}><Data>↓ resto da Home (jornadas, essa semana…)</Data></div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // Prancha B · Lista (in-feed)
    <DCArtboard key="pB" id="spon-b" label="Prancha B · Lista in-feed" width={SHEETW(390)} height={1395} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          '<b>infeed-native</b>: card no feed a cada N itens, mesmo molde de matéria.',
          { pin: 1, t: 'Sempre rotulado <b>"Patrocinado"</b> — nunca disfarçado de editorial.' },
          'Cota Oficial / Apoio · rotaciona pelo CMS · vale p/ Notícias e Agenda.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ padding: '14px 16px' }}>
          <div className="wf-h xl" style={{ marginBottom: 12 }}>Notícias</div>
          <div className="wf-stack" style={{ gap: 14 }}>
            <div 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>Esportes</Tag><div className="wf-bar" style={{ width: '90%', height: 11, margin: '8px 0 6px' }} /><Data>12 jun</Data></div></div>
            <div style={{ position: 'relative' }}>
              <Pin n={1} style={{ position: 'absolute', left: -10, top: -8, zIndex: 6 }} />
              <div className="wf-card" style={{ padding: 12, borderStyle: 'dashed', borderColor: 'var(--wf-navy-14)', background: 'var(--wf-navy-08)' }}>
                <div className="wf-between" style={{ marginBottom: 8 }}><Tag navy>Patrocinado</Tag><Data>infeed-native · Oficial</Data></div>
                <div className="wf-row" style={{ gap: 12 }}><Box w={92} h={64} label="Espaço" style={{ flex: '0 0 92px' }} /><div style={{ flex: 1 }}><div className="wf-bar" style={{ width: '85%', height: 11, marginBottom: 6 }} /><div className="wf-bar" style={{ width: '55%', height: 11, marginBottom: 8 }} /><Data>Espaço disponível · Cota Oficial</Data></div></div>
              </div>
            </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>Social</Tag><div className="wf-bar" style={{ width: '90%', height: 11, margin: '8px 0 6px' }} /><Data>11 jun</Data></div></div>)}
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // Prancha C · Matéria / Revista (desktop)
    <DCArtboard key="pC" id="spon-c" label="Prancha C · Matéria (article-mid + sidebar)" width={SHEETW(1240)} height={1030} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          { pin: 1, t: '<b>article-mid</b>: retângulo no meio do corpo · Cota Oficial · 1 por matéria.' },
          { pin: 2, t: '<b>article-sidebar</b>: retângulo vertical, sticky leve (desktop).' },
          { pin: 3, t: '<b>editoria-apresentada</b>: faixa no fim da edição · por edição.' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ padding: '28px 60px', display: 'grid', gridTemplateColumns: '1fr 300px', gap: 36 }}>
          <div style={{ maxWidth: 720 }}>
            <Tag navy>Náutica & Vela</Tag>
            <div className="wf-h" style={{ fontSize: 38, margin: '12px 0 16px' }}>Título da matéria editorial</div>
            <Lines n={5} style={{ marginBottom: 20 }} />
            <div style={{ position: 'relative', marginBottom: 20 }}>
              <Pin n={1} style={{ position: 'absolute', left: -10, top: -8, zIndex: 6 }} />
              <SlotBox cota="Oficial" label="article-mid · retângulo" h={120} />
            </div>
            <Lines n={5} />
          </div>
          <div style={{ position: 'relative' }}>
            <Pin n={2} style={{ position: 'absolute', left: -10, top: -8, zIndex: 6 }} />
            <SlotBox cota="Oficial" label="sidebar" h={420} style={{ position: 'sticky', top: 20 }} />
          </div>
        </div>
        <div style={{ position: 'relative', padding: '0 60px 28px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 50, top: -8, zIndex: 6 }} />
          <SlotBox cota="Oficial" label="editoria-apresentada · faixa" h={90} />
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

    // Prancha D · Evento / Semana de Vela (marcas reais de evento)
    <DCArtboard key="pD" id="spon-d" label="Prancha D · Evento (presented-by + cotas)" width={SHEETW(390)} height={1340} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Exceção §7.3: <b>patrocinadores de evento existentes</b> ilustram os slots de evento.',
          { pin: 1, t: '<b>event-presented-by</b>: naming do evento (ex.: Daycoval · SIVI).' },
          { pin: 2, t: '<b>event-faixa</b>: grade de cotas por nível na base.' },
          'Mitsubishi (Copa) · Kia (Rali) · Daycoval (SIVI) são patrocínios de evento, não do clube.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Img h={220} label="Hero · Semana de Vela" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 4, display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 4, background: 'rgba(255,255,255,.85)' }}><Data style={{ textTransform: 'uppercase', letterSpacing: '.1em' }}>Apresentado por</Data><BrandSlot name="Daycoval" w={56} h={18} /></div>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <div style={{ position: 'absolute', bottom: 14, left: 16 }}><Eyebrow style={{ marginBottom: 6 }}>SIVI · 24 jul – 02 ago</Eyebrow><div className="wf-h lg">Semana Internacional de Vela</div></div>
        </div>
        <div style={{ padding: 16 }}><Lines n={3} /></div>
        <div style={{ position: 'relative', padding: '8px 16px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 0, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Patrocinadores do evento</Eyebrow>
          <Data style={{ marginBottom: 8 }}>Master</Data>
          <div className="wf-row" style={{ gap: 8, marginBottom: 12 }}><BrandSlot name="Daycoval" /><SlotBox cota="Master" label="vaga" h={34} style={{ flex: 1, height: 34 }} /></div>
          <Data style={{ marginBottom: 8 }}>Oficial · Apoio</Data>
          <div className="wf-row" style={{ gap: 8, flexWrap: 'wrap' }}>{['Mitsubishi', 'Kia'].map(b => <BrandSlot key={b} name={b} />)}<SlotBox cota="Apoio" label="vaga" h={34} style={{ flex: 1, minWidth: 80, height: 34 }} /></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // Prancha E · Footer (desktop)
    <DCArtboard key="pE" id="spon-e" label="Prancha E · Footer apoiadores" width={SHEETW(1240)} height={460} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          '<b>footer-apoiadores</b>: grade por nível, presente em todas as páginas.',
          { pin: 1, t: 'Hierarquia Master · Oficial · Apoio · Fornecedor.' },
          'Slots vazios = "Espaço disponível", prontos p/ vender.',
        ]}>
        <div className="wf-foot" style={{ padding: '36px 60px' }}>
          <div style={{ position: 'relative' }}>
            <Pin n={1} style={{ position: 'absolute', left: -10, top: -8, zIndex: 6 }} />
            <div className="wf-eyebrow" style={{ marginBottom: 16 }}>Apoiadores do clube</div>
            <Data style={{ marginBottom: 8 }}>Master</Data>
            <div className="wf-row" style={{ gap: 12, marginBottom: 16 }}>{[0, 1].map(i => <SlotBox key={i} cota="Master" label="vaga" h={56} style={{ flex: 1 }} />)}</div>
            <Data style={{ marginBottom: 8 }}>Oficial</Data>
            <div className="wf-row" style={{ gap: 12, marginBottom: 16 }}>{[0, 1, 2, 3].map(i => <SlotBox key={i} cota="Oficial" label="vaga" h={44} style={{ flex: 1 }} />)}</div>
            <Data style={{ marginBottom: 8 }}>Apoio · Fornecedor</Data>
            <div className="wf-row" style={{ gap: 12 }}>{[0, 1, 2, 3, 4, 5].map(i => <SlotBox key={i} cota="Apoio" label="" h={36} style={{ flex: 1 }} />)}</div>
          </div>
        </div>
      </Sheet>
    </DCArtboard>,

    // Prancha F · Área do Sócio (sem ads)
    <DCArtboard key="pF" id="spon-f" label="Prancha F · Área do Sócio (sem ads)" width={SHEETW(390)} height={595} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Argumento de <b>valor</b>, não ausência: a área logada <b>não tem publicidade comercial</b>.',
          { pin: 1, t: 'Só <b>comunicação do clube</b> (comunicados oficiais).' },
          'Preserva o "canal oficial" — diferencial frente ao WhatsApp não-oficial.',
        ]}>
        <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={{ position: 'relative', padding: 16 }}>
          <Pin n={1} style={{ position: 'absolute', left: 4, top: 10, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 14, marginBottom: 16, border: '1.5px dashed var(--wf-line)', textAlign: 'center' }}><Data style={{ textTransform: 'uppercase', letterSpacing: '.1em' }}>Sem publicidade · só comunicação do clube</Data></div>
          <Eyebrow style={{ marginBottom: 12 }}>Comunicados recentes</Eyebrow>
          <div className="wf-stack" style={{ gap: 10 }}>{[0, 1, 2].map(i => <div key={i} className="wf-card" style={{ padding: 12 }}><Tag navy>{['Governança', 'Operacional', 'Social'][i]}</Tag><div className="wf-bar" style={{ width: '85%', height: 11, margin: '8px 0 6px' }} /><Data>12 jun</Data></div>)}</div>
        </div>
      </Sheet>
    </DCArtboard>,

    // Prancha A · Home (desktop)
    <DCArtboard key="pAd" id="spon-a-d" label="Prancha A · Home · Desktop" width={SHEETW(1240)} height={990} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Versão desktop p/ apresentação ao cliente.',
          { pin: 1, t: '<b>home-hero-cobrand</b>: selo "apresentado por" no hero · Master.' },
          { pin: 2, t: '<b>home-faixa-master</b>: faixa full-width nobre após o hero · Master.' },
        ]}>
        <DeskHeader active="" weather mega />
        <div style={{ position: 'relative' }}>
          <Img h={360} label="Hero" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', top: 22, left: 60, zIndex: 4, display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 4, border: '1.5px dashed var(--wf-navy)', background: 'rgba(255,255,255,.85)' }}><Data style={{ color: 'var(--wf-navy)', textTransform: 'uppercase', letterSpacing: '.1em' }}>Apresentado por · Master</Data></div>
          <Pin n={1} style={{ position: 'absolute', left: 40, top: 12, zIndex: 6 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 44 }}><Eyebrow style={{ marginBottom: 8 }}>Semana de Vela</Eyebrow><div className="wf-h" style={{ fontSize: 44 }}>A maior semana de vela da América Latina</div></div>
        </div>
        <div style={{ position: 'relative', padding: '28px 60px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 40, top: 18, zIndex: 6 }} />
          <SlotBox cota="Master" label="home-faixa-master · 970×250" h={120} />
        </div>
        <div style={{ padding: '0 60px 8px' }}><Data>↓ resto da Home (jornadas, essa semana, newsletter…)</Data></div>
        <Footer />
      </Sheet>
    </DCArtboard>,

    // Prancha D · Evento (desktop)
    <DCArtboard key="pDd" id="spon-d-d" label="Prancha D · Evento · Desktop" width={SHEETW(1240)} height={985} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Versão desktop do evento — material de venda do naming.',
          { pin: 1, t: '<b>event-presented-by</b>: naming no hero (marca real do evento).' },
          { pin: 2, t: '<b>event-faixa</b>: grade de cotas por nível na base.' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ position: 'relative' }}>
          <Img h={400} label="Hero · Semana de Vela" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', top: 24, right: 60, zIndex: 4, display: 'flex', alignItems: 'center', gap: 10, padding: '7px 14px', borderRadius: 4, background: 'rgba(255,255,255,.85)' }}><Data style={{ textTransform: 'uppercase', letterSpacing: '.1em' }}>Apresentado por</Data><BrandSlot name="Daycoval" w={72} h={22} /></div>
          <Pin n={1} style={{ position: 'absolute', right: 40, top: 12, zIndex: 6 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 46 }}><Eyebrow style={{ marginBottom: 8 }}>SIVI · 24 jul – 02 ago</Eyebrow><div className="wf-h" style={{ fontSize: 46 }}>Semana Internacional de Vela</div></div>
        </div>
        <div style={{ position: 'relative', padding: '28px 60px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 40, top: 18, zIndex: 6 }} />
          <div className="wf-eyebrow" style={{ marginBottom: 16 }}>Patrocinadores do evento</div>
          <div className="wf-row" style={{ gap: 28, alignItems: 'flex-end' }}>
            <div><Data style={{ marginBottom: 8 }}>Master · Naming</Data><BrandSlot name="Daycoval" w={120} h={48} /></div>
            <div><Data style={{ marginBottom: 8 }}>Oficial</Data><div className="wf-row" style={{ gap: 12 }}><BrandSlot name="Mitsubishi" /><BrandSlot name="Kia" /></div></div>
            <div style={{ flex: 1 }}><Data style={{ marginBottom: 8 }}>Apoio · Fornecedor</Data><div className="wf-row" style={{ gap: 12 }}>{[0, 1, 2].map(i => <SlotBox key={i} cota="Apoio" label="vaga" h={40} style={{ flex: 1 }} />)}</div></div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

    // Kit comercial — tabela de cotas / formatos / métricas (anexo Media Kit)
    <DCArtboard key="pKit" id="spon-kit" label="Kit comercial · cotas & formatos" width={SHEETW(1240)} height={550} style={ABS}>
      <Sheet vp="Documento · Media Kit" screenW={1240}
        notes={[
          'Sugestão da devolutiva: <b>anexo comercial</b> p/ o YCI vender patrocínio já.',
          { pin: 1, t: 'Por <b>cota</b>: slots inclusos · formato/dimensão · impressões/mês estimadas.' },
          'Métricas por slot (GA4) alimentam renovação de cotas.',
        ]}>
        <div style={{ padding: '30px 40px' }}>
          <Eyebrow style={{ marginBottom: 6 }}>Media Kit · patrocínio YCI</Eyebrow>
          <div className="wf-h lg" style={{ marginBottom: 18 }}>Cotas, formatos e alcance</div>
          <div style={{ position: 'relative' }}>
            <Pin n={1} style={{ position: 'absolute', left: -10, top: -8, zIndex: 6 }} />
            <div className="wf-card" style={{ padding: 0 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 2fr 1.4fr 1fr', padding: '11px 16px', background: 'var(--wf-fill-2)', borderBottom: '1px solid var(--wf-line-2)' }}>{['Cota', 'Slots inclusos', 'Formato / dimensão', 'Impressões/mês*'].map(h => <Data key={h}>{h}</Data>)}</div>
              {[
                ['Master', 'hero-cobrand · faixa-master · footer · event-presented-by', '970×250 · selo · naming', '~120 mil'],
                ['Oficial', 'infeed-native · article-mid · sidebar · editoria-apresentada', '600×500 · 300×600 · card', '~70 mil'],
                ['Apoio', 'footer-apoiadores · infeed (rotação)', '180×90 · card', '~40 mil'],
                ['Fornecedor', 'footer-apoiadores', '160×80', '~30 mil'],
                ['Naming de evento', 'event-presented-by · event-faixa', 'logo destaque + grade', 'por evento'],
              ].map(([c, s, f, m], i) => (
                <div key={c} style={{ display: 'grid', gridTemplateColumns: '1.1fr 2fr 1.4fr 1fr', padding: '13px 16px', borderBottom: i < 4 ? '1px solid var(--wf-line-2)' : 'none', alignItems: 'center' }}>
                  <Tag navy>{c}</Tag><T sm>{s}</T><Data>{f}</Data><Data style={{ color: 'var(--wf-ink)', fontWeight: 700 }}>{m}</Data>
                </div>
              ))}
            </div>
            <Data style={{ marginTop: 10 }}>* estimativa a confirmar com GA4 após go-live · Área do Sócio não recebe anúncio.</Data>
          </div>
        </div>
      </Sheet>
    </DCArtboard>,

  ];
}
window.patrocinioArtboards = patrocinioArtboards;

// ---------------- ESPORTES · detalhe ----------------
function esportesV4Artboards() {
  return [

    // Página de regata (Evento robusto)
    <DCArtboard key="eR" id="esp-regata" label="Página de regata · Mobile" width={SHEETW(390)} height={1962} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Molde <b>Evento</b> robusto. Eventos são <b>conteúdo</b> (não item de menu).',
          { pin: 1, t: 'Hero + data/local + <b>apresentado por</b> (evento).' },
          { pin: 2, t: '<b>Classes</b>, raia e <b>programação</b>.' },
          { pin: 3, t: '<b>Aviso de regata + instruções</b> (documentos para download).' },
          { pin: 4, t: '<b>Inscrição</b> + <b>resultados</b> + galeria + patrocínio.' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Img h={190} label="Hero · regata" style={{ borderRadius: 0, border: 'none' }} />
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <div style={{ padding: '14px 16px' }}>
            <div className="wf-between" style={{ marginBottom: 10 }}><Tag navy>Regata · Oceânico</Tag><span className="wf-data">● Inscrições</span></div>
            <div className="wf-h lg" style={{ marginBottom: 12 }}>Circuito Ilhabela · Etapa 2</div>
            <div className="wf-stack" style={{ gap: 8 }}><Data>📅 18–20 jul 2026</Data><Data>📍 Raia YCI · Ilhabela</Data><Cobrand /></div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '6px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 2, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 10 }}>Classes</Eyebrow>
          <div className="wf-row" style={{ gap: 7, flexWrap: 'wrap', marginBottom: 16 }}>{['ORC', 'HPE', 'Snipe', 'Optimist'].map(c => <Tag key={c}>{c}</Tag>)}</div>
          <Eyebrow style={{ marginBottom: 12 }}>Programação</Eyebrow>
          <div className="wf-stack" style={{ gap: 0 }}>{[['18/jul', 'Briefing e largada'], ['19/jul', 'Regatas']].map(([d, t]) => <div key={d} className="wf-row" style={{ gap: 14, padding: '11px 0', borderBottom: '1px solid var(--wf-line-2)' }}><Data style={{ flex: '0 0 54px', color: 'var(--wf-navy)' }}>{d}</Data><div className="wf-h sm">{t}</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 }}>Documentos da regata</Eyebrow>
          <div className="wf-stack" style={{ gap: 10 }}><DocRow /><DocRow /></div>
        </div>
        <div style={{ position: 'relative', padding: '6px 16px 14px' }}>
          <Pin n={4} style={{ position: 'absolute', left: 6, top: 0, zIndex: 6 }} />
          <Btn variant="primary" block ar style={{ marginBottom: 14 }}>Inscrever-se</Btn>
          <div className="wf-between" style={{ marginBottom: 10 }}><Eyebrow>Resultados</Eyebrow><Link>Ver ao vivo</Link></div>
          <div className="wf-card" style={{ padding: 0, marginBottom: 14 }}>{[1, 2, 3].map(p => <ResultRow key={p} pos={p} />)}</div>
          <div className="wf-row" style={{ gap: 6, marginBottom: 14 }}><Img w="33%" h={64} label="" /><Img w="33%" h={64} label="" /><Img w="33%" h={64} label="" /></div>
          <SlotBox cota="Master" label="event-faixa" h={64} />
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // Classes (lista leve)
    <DCArtboard key="eC" id="esp-classes" label="Classes · Mobile" width={SHEETW(390)} height={1422} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Molde <b>lista leve</b>: classes que velejam no clube.',
          { pin: 1, t: 'Cada classe: nome + breve descrição + link p/ regatas da classe.' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ padding: '14px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>Esportes<span className="sep">›</span>Náutica & Vela<span className="sep">›</span>Classes</div>
          <div className="wf-h xl" style={{ marginBottom: 12 }}>Classes</div>
        </div>
        <div style={{ position: 'relative', padding: '0 16px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: -4, zIndex: 6 }} />
          <div className="wf-stack" style={{ gap: 10 }}>
            {['Optimist', 'Snipe', 'HPE', 'Oceânico ORC', 'Star', 'Laser', 'Kite'].map(c =>
              <div key={c} className="wf-between wf-card" style={{ padding: 13 }}><div><div className="wf-h sm">{c}</div><Data>breve descrição da classe</Data></div><span style={{ color: 'var(--wf-faint)' }}>›</span></div>)}
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // Página de modalidade (Pesca) — molde
    <DCArtboard key="eM" id="esp-modalidade" label="Página de modalidade (Pesca) · Mobile" width={SHEETW(390)} height={1646} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Molde de <b>modalidade</b>: Institucional + bloco de agenda/torneios/resultados.',
          { pin: 1, t: 'Sobre a modalidade + foto.' },
          { pin: 2, t: '<b>Torneios</b> (agenda filtrada por esporte) + inscrição.' },
          { pin: 3, t: '<b>Resultados</b> + galeria + contato.' },
          'Mesmo molde: Rali, Beach Tennis, Academia, Atividades de Verão, Kite.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 60, zIndex: 6 }} />
          <div style={{ padding: '14px 16px 8px' }}><div className="wf-crumb" style={{ marginBottom: 12 }}>Vida no Iate Clube<span className="sep">›</span>Esportes<span className="sep">›</span>Pesca</div><div className="wf-h xl">Pesca</div></div>
          <Img h={170} label="Foto · pesca" style={{ borderRadius: 0, border: 'none', margin: '6px 0' }} />
          <div style={{ padding: '8px 16px' }}><Lines n={3} /></div>
        </div>
        <div style={{ position: 'relative', padding: '10px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 6, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Torneios</Eyebrow>
          <div className="wf-stack" style={{ gap: 12 }}><EventRow status="Inscrições" /><EventRow status="Confirmado" /></div>
        </div>
        <div style={{ position: 'relative', padding: '8px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 2, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Resultados &amp; galeria</Eyebrow>
          <div className="wf-card" style={{ padding: 0, marginBottom: 12 }}>{[1, 2].map(p => <ResultRow key={p} pos={p} />)}</div>
          <div className="wf-row" style={{ gap: 6 }}><Img w="33%" h={64} label="" /><Img w="33%" h={64} label="" /><Img w="33%" h={64} label="" /></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

  ];
}
window.esportesV4Artboards = esportesV4Artboards;

// ---------------- O CLUBE · cobertura ----------------
function clubeV4Artboards() {
  return [

    // Onde estamos (Ilhabela)
    <DCArtboard key="cO" id="clube-onde" label="Onde estamos (Ilhabela) · Mobile" width={SHEETW(390)} height={1548} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Lacuna §1.4: <b>Ilhabela (destino)</b> ganha um lar — "Onde estamos".',
          { pin: 1, t: 'Sobre a cidade + <b>como chegar</b> (balsa).' },
          { pin: 2, t: 'As <b>3 sedes</b> + Subsede Saco do Sombrio, com mapa.' },
          'Conteúdo a produzir (Sprint 3); aqui placeholder estrutural.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 60, zIndex: 6 }} />
          <div style={{ padding: '14px 16px 8px' }}><div className="wf-crumb" style={{ marginBottom: 12 }}>O Clube<span className="sep">›</span>Onde estamos</div><div className="wf-h xl">Onde estamos</div><T sm style={{ marginTop: 4 }}>Ilhabela · costa norte de SP</T></div>
          <Img h={160} label="Mapa · Ilhabela" style={{ borderRadius: 0, border: 'none', margin: '8px 0' }} />
          <div style={{ padding: '8px 16px' }}><Lines n={3} /></div>
        </div>
        <div style={{ position: 'relative', padding: '12px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Nossas sedes</Eyebrow>
          <div className="wf-stack" style={{ gap: 10 }}>
            {[['Sede Ilhabela', 'marina, restaurante, vela'], ['Saco do Sombrio', 'subsede · baía'], ['São Sebastião', 'subsede'], ['Sede SP', 'secretaria']].map(([t, s]) =>
              <div key={t} className="wf-between wf-card" style={{ padding: 12 }}><div className="wf-row" style={{ gap: 10, alignItems: 'center' }}><Box w={40} h={40} label="📍" style={{ flex: '0 0 40px' }} /><div><div className="wf-h sm">{t}</div><Data>{s}</Data></div></div><span style={{ color: 'var(--wf-faint)' }}>›</span></div>)}
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // Estrutura / instalações
    <DCArtboard key="cE" id="clube-estrutura" label="Estrutura / instalações · Mobile" width={SHEETW(390)} height={1624} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Lacuna §1.4: <b>Estrutura</b> hoje diluída na Apresentação ganha página.',
          { pin: 1, t: 'Grade de <b>instalações</b>: restaurante, bar, sushi, academia, espaço kids, marina.' },
          { pin: 2, t: '<b>Casa YCI Sports</b> (beach tennis, musculação, gym) em destaque.' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ padding: '14px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>O Clube<span className="sep">›</span>Estrutura</div>
          <div className="wf-h xl" style={{ marginBottom: 4 }}>Estrutura</div>
          <T sm>Instalações do clube</T>
        </div>
        <div style={{ position: 'relative', padding: '8px 16px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 2, zIndex: 6 }} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {['Restaurante', 'Bar', 'Sushi', 'Academia', 'Espaço kids', 'Marina'].map(t => <div key={t} className="wf-card" style={{ padding: 0 }}><Img h={80} label="" style={{ borderRadius: 0, border: 'none' }} /><div style={{ padding: 12 }}><div className="wf-h sm">{t}</div></div></div>)}
          </div>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 10, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 0 }}><Img h={120} label="Casa YCI Sports" style={{ borderRadius: 0, border: 'none' }} /><div style={{ padding: 14 }}><Tag navy>Bem-estar</Tag><div className="wf-h sm" style={{ margin: '8px 0 4px' }}>Casa YCI Sports</div><Data>beach tennis · musculação · gym</Data></div></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

  ];
}
window.clubeV4Artboards = clubeV4Artboards;

// ---------------- SERVIÇOS · cobertura ----------------
function servicosV4Artboards() {
  return [

    // Horários & Links úteis
    <DCArtboard key="sHL" id="serv-horarios" label="Horários & Links úteis · Mobile" width={SHEETW(390)} height={1444} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Lapidação §4: <b>horários num só lugar</b> (hoje espalhados), referenciados onde preciso.',
          { pin: 1, t: '<b>Horários</b> consolidados: clube, restaurante, marina, academia.' },
          { pin: 2, t: '<b>Links úteis / náutica prática</b>: Marinha, Travessias SP, Prefeitura, Windguru, Hora marcada.' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ padding: '14px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>Serviços<span className="sep">›</span>Horários &amp; Links</div>
          <div className="wf-h xl" style={{ marginBottom: 4 }}>Horários</div>
        </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: 18 }}>
            {[['Clube', 'ter–dom · 08–22h'], ['Restaurante', 'ter–dom · 12–22h'], ['Marina', 'todos os dias · 07–19h'], ['Academia', 'seg–sáb · 06–22h']].map(([t, h], i) =>
              <div key={t} className="wf-between" style={{ padding: '13px 14px', borderBottom: i < 3 ? '1px solid var(--wf-line-2)' : 'none' }}><Data style={{ color: 'var(--wf-ink)' }}>{t}</Data><Data style={{ color: 'var(--wf-ink)', fontWeight: 700 }}>{h}</Data></div>)}
          </div>
        </div>
        <div style={{ position: 'relative', padding: '0 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: -4, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Links úteis · náutica prática</Eyebrow>
          <div className="wf-stack" style={{ gap: 10 }}>
            {['Marinha do Brasil', 'Travessias SP (DER)', 'Prefeitura de Ilhabela', 'Windguru · previsão', 'Hora marcada'].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-navy)' }}>↗</span></div>)}
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

  ];
}
window.servicosV4Artboards = servicosV4Artboards;