// ============================================================
// SEÇÃO · Programação de Fim de Semana — Rodada 2 (spec §6.5)
//  Quadro semanal de atividades por LOCAL (Casa YCI Sports, Sede,
//  Esportes no Mar), atualizado toda semana; vive no portal de Notícias.
//  progFimSemanaArtboards — mobile (empilhado por local) + desktop (3 colunas).
// ============================================================

function progFimSemanaArtboards() {
  const LOCAIS = [
    ['Casa YCI Sports', [['Sáb 08h', 'Beach tênis · clínica'], ['Sáb 10h', 'Funcional na areia'], ['Dom 09h', 'Yoga ao ar livre']]],
    ['Sede', [['Sáb 12h', 'Almoço no restaurante'], ['Sáb 20h', 'Jantar dançante'], ['Dom 11h', 'Brunch de domingo']]],
    ['Esportes no Mar', [['Sáb 09h', 'Turma de vela infantil'], ['Sáb 14h', 'Regata Copa Mitsubishi'], ['Dom 08h', 'Saída de pesca']]],
  ];
  const DayRow = ({ q, t, last }) => (
    <div className="wf-row" style={{ gap: 12, padding: '10px 0', borderBottom: last ? 'none' : '1px solid var(--wf-line-2)', alignItems: 'baseline' }}>
      <Data style={{ color: 'var(--wf-navy)', fontWeight: 700, flex: '0 0 62px' }}>{q}</Data>
      <div className="wf-t sm" style={{ flex: 1 }}>{t}</div>
    </div>
  );
  return [

    // ---------- Programação de Fim de Semana · Mobile ----------
    <DCArtboard key="pfsM" id="prog-fim-semana" label="Programação de Fim de Semana · Mobile" width={SHEETW(390)} height={1580} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Rev.2 · §6.5 — <b>componente novo</b>. Quadro semanal de atividades <b>por local</b>, atualizado toda semana. Vive no <b>portal de Notícias</b>.',
          { pin: 1, t: '<b>Seletor de semana</b> (‹ / ›) — conteúdo trocado no CMS toda semana.' },
          { pin: 2, t: '<b>Por local</b>: Casa YCI Sports · Sede · Esportes no Mar.' },
          { pin: 3, t: 'Cada linha: <b>dia/hora + atividade</b>. Itens podem linkar ao evento/agenda.' },
          'Mobile: locais <b>empilhados</b>. Desktop: 3 colunas lado a lado.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative', padding: '14px 16px 6px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>Notícias<span className="sep">›</span>Programação</div>
          <div className="wf-h xl" style={{ marginBottom: 4 }}>Fim de semana no clube</div>
          <T sm style={{ marginBottom: 12 }}>O que acontece em cada espaço, sábado e domingo.</T>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 96, zIndex: 6 }} />
          <div className="wf-between wf-card" style={{ padding: '10px 14px', alignItems: 'center' }}>
            <div className="wf-btn ghost sm">‹</div><div className="wf-h sm">15 – 16 ago 2026</div><div className="wf-btn ghost sm">›</div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '10px 16px 18px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 6, zIndex: 6 }} />
          <div className="wf-stack" style={{ gap: 14 }}>
            {LOCAIS.map(([local, items]) => (
              <div key={local} className="wf-card" style={{ padding: 0 }}>
                <div style={{ padding: '11px 14px', borderBottom: '1px solid var(--wf-line-2)', background: 'var(--wf-navy-08)' }}><div className="wf-h sm" style={{ color: 'var(--wf-navy)' }}>{local}</div></div>
                <div style={{ padding: '4px 14px 8px', position: 'relative' }}>
                  {items.map(([q, t], i) => <DayRow key={i} q={q} t={t} last={i === items.length - 1} />)}
                </div>
              </div>
            ))}
          </div>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 96, zIndex: 6 }} />
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Programação de Fim de Semana · Desktop ----------
    <DCArtboard key="pfsD" id="prog-fim-semana-d" label="Programação de Fim de Semana · Desktop" width={SHEETW(1240)} height={820} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Versão desktop — <b>quadro de 3 colunas</b>, uma por local.',
          { pin: 1, t: '<b>Seletor de semana</b> com setas.' },
          { pin: 2, t: 'Colunas: <b>Casa YCI Sports · Sede · Esportes no Mar</b>.' },
          'Mesma fonte do mobile; muda só o layout (colunas vs. empilhado).',
        ]}>
        <DeskHeader active="Notícias" weather mega />
        <div style={{ padding: '30px 60px' }}>
          <div className="wf-crumb" style={{ marginBottom: 14 }}>Notícias<span className="sep">›</span>Programação de Fim de Semana</div>
          <div className="wf-between" style={{ marginBottom: 22, alignItems: 'flex-end' }}>
            <div><div className="wf-h" style={{ fontSize: 40 }}>Fim de semana no clube</div><T sm style={{ marginTop: 6 }}>O que acontece em cada espaço, atualizado toda semana.</T></div>
            <div style={{ position: 'relative' }}>
              <Pin n={1} style={{ position: 'absolute', left: -28, top: 4, zIndex: 6 }} />
              <div className="wf-row" style={{ gap: 10, alignItems: 'center' }}><div className="wf-btn ghost sm">‹ anterior</div><div className="wf-h sm">15 – 16 ago 2026</div><div className="wf-btn ghost sm">próxima ›</div></div>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
              {LOCAIS.map(([local, items]) => (
                <div key={local} className="wf-card" style={{ padding: 0 }}>
                  <div style={{ padding: '14px 18px', borderBottom: '1.5px solid var(--wf-navy)', background: 'var(--wf-navy-08)' }}><div className="wf-h md" style={{ color: 'var(--wf-navy)' }}>{local}</div></div>
                  <div style={{ padding: '6px 18px 12px' }}>{items.map(([q, t], i) => <DayRow key={i} q={q} t={t} last={i === items.length - 1} />)}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

  ];
}
window.progFimSemanaArtboards = progFimSemanaArtboards;