// ============================================================
// SEÇÃO · Esportes Náuticos + Regata + Agenda única — Rodada 2 (spec §6)
//  espHubArtboards   · hub por MODALIDADE (Vela, Pesca, Náutica, Rali)
//  regataArtboards   · Regata como evento estruturado (inscrição externa,
//                      resultados embedados, galeria durante/depois)
//  agendaUnicaArtboards · Agenda única que alimenta todas as áreas por tags
//    (mobile: dropdown de filtros ≤15 itens · desktop: 3 meses com setas)
// ============================================================

// Taxonomia de tags padronizada (única fonte — não degradar na mão do editor)
const AGENDA_TAGS = ['Regata', 'Social', 'Escola', 'Gastronomia', 'Curso', 'Assembleia'];

function espHubArtboards() {
  const MODS = [
    ['Vela', 'regatas, escola e classes', true],
    ['Pesca', 'torneios e saídas', false],
    ['Náutica', 'motor, travessias e passeios', false],
    ['Rali', 'rali náutico e travessias', false],
  ];
  return [

    // ---------- Esportes Náuticos · hub (por modalidade) · Mobile ----------
    <DCArtboard key="espH" id="esp-hub" label="Esportes Náuticos · hub · Mobile" width={SHEETW(390)} height={1880} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Rev.2 · §5 — <b>Esportes Náuticos</b>: hub que agrega <b>modalidades</b>. O usuário navega pela <b>modalidade</b>, não pela diretoria.',
          { pin: 1, t: '<b>Modalidades</b>: Vela, Pesca, Náutica, Rali — cada card abre a página-modelo de modalidade.' },
          { pin: 2, t: '<b>Próximas regatas</b> = Agenda única filtrada por Regata (não é outro sistema).' },
          { pin: 3, t: '<b>Semana de Vela (SIVI)</b> em destaque (evento-âncora).' },
          'Instalações esportivas (academia, beach tênis, kite) ficam em <b>Outros Esportes</b> · Casa YCI Sports.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Img h={210} label="Hero · esportes náuticos" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ position: 'absolute', bottom: 14, left: 16, right: 16 }}>
            <div className="wf-crumb" style={{ marginBottom: 8 }}>Vida no Iate Clube<span className="sep">›</span>Esportes Náuticos</div>
            <div className="wf-h xl" style={{ color: '#fff' }}>Esportes Náuticos</div>
          </div>
        </div>
        <div style={{ padding: '14px 16px 4px' }}><T sm>Escolha a modalidade — vela, pesca, náutica a motor ou rali.</T></div>
        <div style={{ position: 'relative', padding: '10px 16px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 4, zIndex: 6 }} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {MODS.map(([t, d, feat]) => (
              <div key={t} className="wf-card" style={{ padding: 0, border: feat ? '1.5px solid var(--wf-navy)' : '1px solid var(--wf-line-2)' }}>
                <Img h={82} label="" style={{ borderRadius: 0, border: 'none' }} />
                <div style={{ padding: 11 }}><div className="wf-h sm">{t}</div><Data>{d}</Data></div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative', padding: '12px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
          <div className="wf-between" style={{ marginBottom: 12 }}><Eyebrow>Próximas regatas</Eyebrow><Link>Ver na Agenda ↗</Link></div>
          <div className="wf-stack" style={{ gap: 12 }}><EventRow status="Inscrições" /><EventRow status="Confirmada" /></div>
        </div>
        <div style={{ position: 'relative', padding: '4px 16px 18px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 0, zIndex: 6 }} />
          <div className="wf-jt accent" style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
            <div className="ic" /><div style={{ flex: 1 }}><div className="wf-h sm" style={{ color: 'var(--wf-navy)' }}>Semana de Vela · SIVI</div><Data>evento-âncora · 24 jul – 02 ago</Data></div><span style={{ color: 'var(--wf-navy)' }}>↗</span>
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Esportes Náuticos · hub · Desktop ----------
    <DCArtboard key="espHD" id="esp-hub-d" label="Esportes Náuticos · hub · Desktop" width={SHEETW(1240)} height={1120} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Versão desktop do hub <b>Esportes Náuticos</b> — entrada por modalidade.',
          { pin: 1, t: 'Grade de <b>modalidades</b> (Vela, Pesca, Náutica, Rali).' },
          { pin: 2, t: '<b>Próximas regatas</b> (Agenda filtrada) + <b>últimos resultados</b>.' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ position: 'relative' }}>
          <Img h={360} label="Hero · regata em mar aberto" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 44, maxWidth: 640 }}>
            <div className="wf-crumb" style={{ marginBottom: 10 }}>Vida no Iate Clube<span className="sep">›</span>Esportes Náuticos</div>
            <div className="wf-h" style={{ fontSize: 50, color: '#fff' }}>Esportes Náuticos</div>
          </div>
        </div>
        <div style={{ padding: '36px 60px' }}>
          <div style={{ position: 'relative', marginBottom: 32 }}>
            <Pin n={1} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <Eyebrow style={{ marginBottom: 16 }}>Modalidades</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 }}>
              {MODS.map(([t, d, feat]) => (
                <div key={t} className="wf-card" style={{ padding: 0, border: feat ? '1.5px solid var(--wf-navy)' : '1px solid var(--wf-line-2)' }}>
                  <Img h={130} label="" style={{ borderRadius: 0, border: 'none' }} />
                  <div style={{ padding: 14 }}><div className="wf-h sm" style={{ marginBottom: 3 }}>{t}</div><Data>{d}</Data></div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <div><div className="wf-between" style={{ marginBottom: 14 }}><Eyebrow>Próximas regatas</Eyebrow><Link>Agenda ↗</Link></div><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.espHubArtboards = espHubArtboards;

function regataArtboards() {
  return [

    // ---------- Regata (evento estruturado) · Mobile ----------
    <DCArtboard key="regM" id="esp-regata" label="Regata · evento estruturado · Mobile" width={SHEETW(390)} height={2140} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Rev.2 · §6.3 — <b>Regata como evento estruturado</b> (página própria de calendário). Reusa em toda regata.',
          { pin: 1, t: '<b>Header foto/vídeo</b> + data, local e <b>status</b> (bandeira).' },
          { pin: 2, t: '<b>Descrição, regulamento e percurso</b>.' },
          { pin: 3, t: '<b>Inscrições por link externo</b> (ex.: Viramos) — não é formulário do site.' },
          { pin: 4, t: '<b>Resultados embedados</b> de plataforma externa.' },
          { pin: 5, t: '<b>Galeria</b> de durante e depois.' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <Img h={230} video label="Header · regata (foto/vídeo)" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ position: 'absolute', bottom: 12, left: 16, right: 16 }}>
            <div className="wf-crumb" style={{ marginBottom: 8 }}>Esportes Náuticos<span className="sep">›</span>Vela<span className="sep">›</span>Regatas</div>
            <Tag navy>Inscrições abertas</Tag>
            <div className="wf-h xl" style={{ color: '#fff', marginTop: 8 }}>Rali Náutico Ilhabela–Búzios</div>
            <Data style={{ color: '#fff' }}>16–18 ago 2026 · Ilhabela</Data>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '16px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 12, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 10 }}>Sobre a regata</Eyebrow>
          <Lines n={3} style={{ marginBottom: 16 }} />
          <div className="wf-stack" style={{ gap: 0 }}>{[['Regulamento', 'PDF · classes e penalidades'], ['Percurso', 'mapa e marcas de prova'], ['Classes', 'ORC · HPE · Oceânico']].map(([t, d]) => <div key={t} className="wf-between" style={{ padding: '12px 0', borderBottom: '1px solid var(--wf-line-2)' }}><div><div className="wf-h sm">{t}</div><Data>{d}</Data></div><span style={{ color: 'var(--wf-navy)' }}>›</span></div>)}</div>
        </div>
        <div style={{ position: 'relative', padding: '6px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 0, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 14, background: 'var(--wf-navy-08)', borderColor: 'var(--wf-navy-14)', textAlign: 'center' }}>
            <div className="wf-h sm" style={{ marginBottom: 8 }}>Inscrições</div>
            <Btn variant="primary" block ar>Inscrever no Viramos ↗</Btn>
            <Data style={{ marginTop: 8, display: 'block' }}>plataforma externa · abre em nova aba</Data>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '16px 16px' }}>
          <Pin n={4} style={{ position: 'absolute', left: 6, top: 12, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 10 }}>Resultados</Eyebrow>
          <div className="wf-card" style={{ padding: 0, borderStyle: 'dashed' }}>
            <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--wf-line-2)', background: 'var(--wf-fill-2)' }}><Data>embed · plataforma externa</Data></div>
            {[1, 2, 3].map(p => <ResultRow key={p} pos={p} />)}
          </div>
        </div>
        <div style={{ position: 'relative', padding: '6px 16px 18px' }}>
          <Pin n={5} style={{ position: 'absolute', left: 6, top: 0, zIndex: 6 }} />
          <div className="wf-row" style={{ gap: 7, marginBottom: 12 }}><Chip active>Durante</Chip><Chip>Depois</Chip></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>{[0, 1, 2, 3, 4, 5].map(i => <Img key={i} h={84} label="" style={{ borderRadius: 0, border: 'none' }} />)}</div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Regata (evento estruturado) · Desktop ----------
    <DCArtboard key="regD" id="esp-regata-d" label="Regata · evento estruturado · Desktop" width={SHEETW(1240)} height={1180} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Versão desktop da <b>Regata estruturada</b>.',
          { pin: 1, t: 'Coluna principal: descrição, percurso e <b>resultados embedados</b>.' },
          { pin: 2, t: 'Trilho: dados, <b>inscrição externa (Viramos)</b>, regulamento, galeria.' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ position: 'relative' }}>
          <Img h={400} video label="Header · regata (foto/vídeo)" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 44, maxWidth: 720 }}>
            <div className="wf-crumb" style={{ marginBottom: 10 }}>Esportes Náuticos<span className="sep">›</span>Vela<span className="sep">›</span>Regatas</div>
            <Tag navy>Inscrições abertas</Tag>
            <div className="wf-h" style={{ fontSize: 46, color: '#fff', margin: '10px 0 6px' }}>Rali Náutico Ilhabela–Búzios</div>
            <Data style={{ color: '#fff' }}>16–18 ago 2026 · Ilhabela</Data>
          </div>
        </div>
        <div style={{ padding: '36px 60px', display: 'grid', gridTemplateColumns: '1fr 360px', gap: 48 }}>
          <div style={{ position: 'relative' }}>
            <Pin n={1} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <Eyebrow style={{ marginBottom: 12 }}>Sobre a regata</Eyebrow>
            <Lines n={4} style={{ marginBottom: 24 }} />
            <Eyebrow style={{ marginBottom: 12 }}>Percurso</Eyebrow>
            <Img h={240} label="Mapa · marcas de prova" style={{ border: 'none', borderRadius: 0, marginBottom: 24 }} />
            <Eyebrow style={{ marginBottom: 12 }}>Resultados</Eyebrow>
            <div className="wf-card" style={{ padding: 0, borderStyle: 'dashed' }}>
              <div style={{ padding: '10px 16px', borderBottom: '1px solid var(--wf-line-2)', background: 'var(--wf-fill-2)' }}><Data>embed · plataforma externa de resultados</Data></div>
              {[1, 2, 3, 4, 5].map(p => <ResultRow key={p} pos={p} />)}
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <div className="wf-card" style={{ padding: 16, marginBottom: 16 }}>
              <div className="wf-stack" style={{ gap: 0 }}>{[['Data', '16–18 ago 2026'], ['Local', 'Ilhabela · SP'], ['Classes', 'ORC · HPE · Oceânico'], ['Status', 'Inscrições abertas']].map(([t, v], i) => <div key={t} className="wf-between" style={{ padding: '10px 0', borderBottom: i < 3 ? '1px solid var(--wf-line-2)' : 'none' }}><Data>{t}</Data><Data style={{ color: 'var(--wf-ink)', fontWeight: 600 }}>{v}</Data></div>)}</div>
            </div>
            <div className="wf-card" style={{ padding: 16, marginBottom: 16, background: 'var(--wf-navy-08)', borderColor: 'var(--wf-navy-14)', textAlign: 'center' }}>
              <Btn variant="primary" block ar>Inscrever no Viramos ↗</Btn>
              <Data style={{ marginTop: 8, display: 'block' }}>plataforma externa</Data>
            </div>
            <Btn variant="ghost" block style={{ marginBottom: 16 }}>Baixar regulamento (PDF)</Btn>
            <Eyebrow style={{ marginBottom: 10 }}>Galeria</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>{[0, 1, 2, 3].map(i => <Img key={i} h={72} label="" style={{ borderRadius: 0, border: 'none' }} />)}</div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

  ];
}
window.regataArtboards = regataArtboards;

function agendaUnicaArtboards() {
  // Mini-mês para o desktop (grade 7×5 com pontos por tag)
  const MiniMonth = ({ mes, dots }) => (
    <div className="wf-card" style={{ padding: 14 }}>
      <div className="wf-h sm" style={{ marginBottom: 10, textAlign: 'center' }}>{mes}</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 4 }}>
        {['S', 'T', 'Q', 'Q', 'S', 'S', 'D'].map((d, i) => <div key={i} style={{ textAlign: 'center', fontSize: 9, color: 'var(--wf-faint)' }}>{d}</div>)}
        {Array.from({ length: 35 }).map((_, i) => {
          const day = i - 2;
          const has = dots[day];
          return <div key={i} style={{ aspectRatio: '1', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: day > 0 && day <= 31 ? 'var(--wf-ink)' : 'transparent' }}>{day > 0 && day <= 31 ? day : '·'}{has ? <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--wf-navy)', marginTop: 1 }} /> : null}</div>;
        })}
      </div>
    </div>
  );
  return [

    // ---------- Agenda única · Mobile (dropdown de filtros) ----------
    <DCArtboard key="agM" id="agenda-unica" label="Agenda única · Mobile" width={SHEETW(390)} height={1620} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Rev.2 · §6.2 — <b>Agenda única</b> alimenta todas as áreas por <b>tags</b>; cada entrada aparece nas seções relevantes.',
          { pin: 1, t: 'Mobile: <b>dropdown de filtros</b> por tag (funciona bem até ~15 itens).' },
          { pin: 2, t: '<b>Taxonomia de tags padronizada</b>: Regata · Social · Escola · Gastronomia · Curso · Assembleia.' },
          { pin: 3, t: 'Cada entrada carrega sua tag e abre o destino (regata → componente Regata; social → Social e Cultural).' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>Vida no Iate Clube<span className="sep">›</span>Agenda</div>
          <div className="wf-h xl" style={{ marginBottom: 12 }}>Agenda do clube</div>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 84, zIndex: 6 }} />
          <Field select placeholder="Filtrar por tag · Todas" />
          <div style={{ position: 'relative', marginTop: 12 }}>
            <Pin n={2} style={{ position: 'absolute', left: -10, top: -4, zIndex: 6 }} />
            <div className="wf-row" style={{ gap: 7, overflow: 'hidden' }}>{['Todas', ...AGENDA_TAGS].slice(0, 5).map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '6px 16px 18px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 0, zIndex: 6 }} />
          <div className="wf-stack" style={{ gap: 0 }}>
            {[['16 ago', 'Rali Náutico Ilhabela–Búzios', 'Regata'], ['19 ago', 'Jantar harmonizado', 'Gastronomia'], ['24 ago', 'Turma de vela infantil', 'Escola'], ['31 ago', 'Festa de aniversário do clube', 'Social'], ['05 set', 'Assembleia geral', 'Assembleia'], ['12 set', 'Copa Mitsubishi · etapa', 'Regata']].map(([d, t, tag]) => (
              <div key={t} className="wf-row" style={{ gap: 12, padding: '13px 0', borderBottom: '1px solid var(--wf-line-2)', alignItems: 'center' }}>
                <div style={{ flex: '0 0 46px', textAlign: 'center' }}><Data style={{ color: 'var(--wf-navy)', fontWeight: 700 }}>{d}</Data></div>
                <div style={{ flex: 1 }}><div className="wf-h sm">{t}</div><Tag>{tag}</Tag></div>
                <span style={{ color: 'var(--wf-faint)' }}>›</span>
              </div>
            ))}
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Agenda única · Desktop (3 meses, setas) ----------
    <DCArtboard key="agD" id="agenda-unica-d" label="Agenda única · Desktop" width={SHEETW(1240)} height={900} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Versão desktop da <b>Agenda única</b>.',
          { pin: 1, t: '<b>Visualização de 3 meses</b> com navegação por <b>setas</b>.' },
          { pin: 2, t: 'Filtro por <b>tag padronizada</b> + legenda; pontos marcam dias com evento.' },
          'Mesma fonte de dados da versão mobile — só muda a visualização.',
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ padding: '30px 60px' }}>
          <div className="wf-crumb" style={{ marginBottom: 14 }}>Vida no Iate Clube<span className="sep">›</span>Agenda</div>
          <div className="wf-between" style={{ marginBottom: 20, alignItems: 'flex-end' }}>
            <div className="wf-h" style={{ fontSize: 40 }}>Agenda do clube</div>
            <div style={{ position: 'relative' }}>
              <Pin n={2} style={{ position: 'absolute', left: -28, top: 2, zIndex: 6 }} />
              <div className="wf-row" style={{ gap: 7, flexWrap: 'wrap' }}>{['Todas', ...AGENDA_TAGS].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <Pin n={1} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <div className="wf-between" style={{ marginBottom: 14 }}>
              <div className="wf-btn ghost sm">‹ anterior</div>
              <div className="wf-h sm">ago – out 2026</div>
              <div className="wf-btn ghost sm">próximo ›</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
              <MiniMonth mes="Agosto" dots={{ 16: 1, 19: 1, 24: 1, 31: 1 }} />
              <MiniMonth mes="Setembro" dots={{ 5: 1, 12: 1, 20: 1 }} />
              <MiniMonth mes="Outubro" dots={{ 3: 1, 12: 1, 25: 1 }} />
            </div>
            <div className="wf-row" style={{ gap: 16, flexWrap: 'wrap', marginTop: 18 }}>{AGENDA_TAGS.map(t => <div key={t} className="wf-row" style={{ gap: 6, alignItems: 'center' }}><span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--wf-navy)' }} /><Data>{t}</Data></div>)}</div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

  ];
}
window.agendaUnicaArtboards = agendaUnicaArtboards;