// ============================================================
// SEÇÃO · Lacunas Bloco 3 — Rev. 18/jun
//  eventosSociaisArtboards · erro404Artboards
//  Eventos sociais: vitrine curada (vive sob Vida no Iate Clube);
//  cada evento abre a página de Evento (ciclo pré/durante/pós).
//  404: página de rota inexistente (faltava — só havia vazio/erro de lista).
// ============================================================

function eventosSociaisArtboards() {
  const SocialCard = ({ t, q, tag }) => (
    <div className="wf-card" style={{ padding: 0 }}>
      <Img h={120} label="" style={{ borderRadius: 0, border: 'none' }} />
      <div style={{ padding: 13 }}>
        <div className="wf-between" style={{ marginBottom: 6 }}><Tag>{tag}</Tag><Data>{q}</Data></div>
        <div className="wf-h sm">{t}</div>
      </div>
    </div>
  );
  return [

    // ---------- Eventos sociais · Mobile ----------
    <DCArtboard key="evS" id="eventos-sociais" label="Eventos sociais · Mobile" width={SHEETW(390)} height={1820} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Rev. 18/jun · Bloco 3 — <b>página dedicada</b> de Eventos sociais (existia só no menu). Vive sob Vida no Iate Clube.',
          { pin: 1, t: '<b>Próximos</b> eventos sociais em destaque; cada um abre a <b>página de Evento</b> (ciclo pré/durante/pós).' },
          { pin: 2, t: 'Filtro por <b>tipo</b>: Festas · Jantares · Kids · Datas comemorativas.' },
          { pin: 3, t: '<b>Galeria</b> de eventos passados (memória social do clube).' },
          'Sociais seguem também como preset da <b>Agenda</b> — esta é a vitrine curada (não substitui o calendário).',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Img h={200} label="Festa · salão do clube" 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>Eventos sociais</div>
            <div className="wf-h xl" style={{ color: '#fff' }}>Eventos sociais</div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px 6px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
          <div className="wf-row" style={{ gap: 7, overflow: 'hidden' }}>{['Todos', 'Festas', 'Jantares', 'Kids', 'Datas'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
        </div>
        <div style={{ position: 'relative', padding: '8px 16px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 2, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Próximos</Eyebrow>
          <div className="wf-stack" style={{ gap: 14 }}>
            <SocialCard t="Festa Julina do clube" q="19 jul · 19h" tag="Festa" />
            <SocialCard t="Jantar dançante" q="02 ago · 21h" tag="Jantar" />
          </div>
        </div>
        <div style={{ position: 'relative', padding: '16px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 12, zIndex: 6 }} />
          <div className="wf-between" style={{ marginBottom: 12 }}><Eyebrow>Já aconteceu</Eyebrow><Link>Ver galeria</Link></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>,

    // ---------- Eventos sociais · Desktop ----------
    <DCArtboard key="evSD" id="eventos-sociais-d" label="Eventos sociais · Desktop" width={SHEETW(1240)} height={1080} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Versão desktop dos <b>Eventos sociais</b>.',
          { pin: 1, t: 'Grade de <b>próximos</b> + filtro por tipo.' },
          { pin: 2, t: '<b>Galeria</b> de eventos passados.' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ position: 'relative' }}>
          <Img h={340} label="Hero · salão / festa" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 40, maxWidth: 620 }}>
            <div className="wf-crumb" style={{ marginBottom: 10 }}>Vida no Iate Clube<span className="sep">›</span>Eventos sociais</div>
            <div className="wf-h" style={{ fontSize: 48, color: '#fff' }}>Eventos sociais</div>
          </div>
        </div>
        <div style={{ padding: '32px 60px' }}>
          <div className="wf-between" style={{ marginBottom: 20, alignItems: 'flex-end' }}>
            <div className="wf-h" style={{ fontSize: 28 }}>Próximos</div>
            <div style={{ position: 'relative' }}><Pin n={1} style={{ position: 'absolute', left: -28, top: 2, zIndex: 6 }} /><div className="wf-row" style={{ gap: 7 }}>{['Todos', 'Festas', 'Jantares', 'Kids', 'Datas'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div></div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginBottom: 36 }}>
            <SocialCard t="Festa Julina do clube" q="19 jul · 19h" tag="Festa" />
            <SocialCard t="Jantar dançante" q="02 ago · 21h" tag="Jantar" />
            <SocialCard t="Domingo das crianças" q="12 out · 11h" tag="Kids" />
          </div>
          <div style={{ position: 'relative' }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <div className="wf-between" style={{ marginBottom: 16 }}><Eyebrow>Já aconteceu</Eyebrow><Link>Ver galeria completa ↗</Link></div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 12 }}>{[0, 1, 2, 3, 4, 5].map(i => <Img key={i} h={110} label="" style={{ borderRadius: 0, border: 'none' }} />)}</div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

  ];
}
window.eventosSociaisArtboards = eventosSociaisArtboards;

// =====================================================================
// 404 — página de rota inexistente (mobile + desktop).
// =====================================================================
function erro404Artboards() {
  const Body = ({ desk }) => (
    <div style={{ textAlign: 'center', padding: desk ? '70px 60px' : '56px 24px' }}>
      <Box w={desk ? 72 : 56} h={desk ? 72 : 56} dashed style={{ margin: '0 auto 20px', borderRadius: '50%' }} label="⚓" />
      <div className="wf-h" style={{ fontSize: desk ? 56 : 34, marginBottom: 12 }}>Página fora de rota</div>
      <T style={{ maxWidth: 420, margin: '0 auto 24px' }}>Esta página não existe ou mudou de lugar. Use a busca ou volte ao porto.</T>
      <div className="wf-input focus" style={{ maxWidth: 360, margin: '0 auto 24px', textAlign: 'left' }}>⌕  Buscar no site</div>
      <div className="wf-row" style={{ gap: 10, justifyContent: 'center', marginBottom: 28 }}>
        <Btn variant="primary" ar>Ir para a Home</Btn><Btn variant="ghost">Falar com a Secretaria</Btn>
      </div>
      <Eyebrow style={{ justifyContent: 'center', marginBottom: 14 }}>Atalhos</Eyebrow>
      <div className="wf-row" style={{ gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>{['O Clube', 'Vida no Iate Clube', 'Notícias', 'Serviços', 'Área do Sócio'].map(x => <Chip key={x}>{x}</Chip>)}</div>
    </div>
  );
  return [
    <DCArtboard key="e404" id="erro-404" label="404 · rota inexistente" width={1320} height={760} style={ABS}>
      <div className="wf-sheet">
        <div style={{ flex: '0 0 auto' }}>
          <div className="wf-vp">Mobile · 390</div>
          <div className="wf-screen is-mobile" style={{ width: 320 }}>
            <MobileHeader />
            <Body />
            <Footer mobile />
          </div>
        </div>
        <div style={{ flex: '0 0 auto' }}>
          <div className="wf-vp">Desktop · 1240</div>
          <div className="wf-screen is-desktop" style={{ width: 760 }}>
            <DeskHeader />
            <Body desk />
            <Footer />
          </div>
        </div>
        <div className="wf-notes">
          <div className="wf-notes-title">Notas · 404 (§Bloco 3)</div>
          <p className="wf-note">Faltava: havia <b>vazio / carregando / erro</b> de lista, mas não a <b>404 de rota</b>.</p>
          <p className="wf-note">Mantém header/footer (não é beco sem saída): <b>busca</b> + <b>atalhos</b> para as 5 áreas + voltar à Home.</p>
          <p className="wf-note wf-note-state">Tom náutico calmo (“fora de rota / voltar ao porto”), sem culpar o usuário. Vale também para conteúdo removido (matéria/evento antigo).</p>
        </div>
      </div>
    </DCArtboard>,
  ];
}
window.erro404Artboards = erro404Artboards;