// ============================================================
// SEÇÃO · Náutica & Vela — sob Esportes (Vida no Iate Clube)
// Decisão de taxonomia: NÃO é área top-level nem pilar solto.
// Vive em Vida › Esportes › Náutica & Vela; protagonismo vem da
// Home (hero) + atalho no mega-menu. Telas: sub-hub, regatas
// (Agenda filtrada), resultados, escola, Semana de Vela (âncora).
// ============================================================

function nauticaArtboards() {
  return [

    // ---------- Esportes › Náutica & Vela (sub-hub) ----------
    <DCArtboard key="nH" id="naut-hub" label="Esportes › Náutica & Vela · Mobile" width={SHEETW(390)} height={2000} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Decisão da direção: <b>Náutica & Vela vive sob Esportes</b> (em Vida no Iate Clube). 5 áreas top-level.',
          { pin: 1, t: 'Protagonismo vem da <b>Home (hero) + atalho no mega-menu</b>, não de caixa própria na nav.' },
          { pin: 2, t: 'Atalhos: <b>Calendário de Regatas, Resultados, Escola de Vela, Classes</b> (sem "Modalidades" à parte).' },
          { pin: 3, t: '<b>Próximas regatas</b> + <b>últimos resultados</b>.' },
          'Demais modalidades (Pesca, Rali, Beach Tennis, Academia) ficam no hub <b>Esportes</b>.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <Img h={220} label="Hero · regata em mar aberto" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ padding: '14px 16px 4px' }}><div className="wf-crumb" style={{ marginBottom: 10 }}>Vida no Iate Clube<span className="sep">›</span>Esportes<span className="sep">›</span>Náutica & Vela</div><Eyebrow style={{ marginBottom: 8 }}>Náutica & Vela</Eyebrow><div className="wf-h xl">O coração do clube é a vela</div></div>
        </div>
        <div style={{ position: 'relative', padding: '10px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 4, zIndex: 6 }} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {['Calendário de Regatas', 'Resultados', 'Escola de Vela', 'Classes'].map(t => <div key={t} className="wf-jt"><div className="ic" /><div className="wf-h sm">{t}</div><Data>acessar ›</Data></div>)}
          </div>
          <div className="wf-jt accent" style={{ marginTop: 12, 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>
        <div style={{ position: 'relative', padding: '12px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Próximas regatas</Eyebrow>
          <div className="wf-stack" style={{ gap: 12, marginBottom: 20 }}><EventRow status="Inscrições" /><EventRow status="Confirmada" /></div>
          <div className="wf-between" style={{ marginBottom: 12 }}><Eyebrow>Últimos resultados</Eyebrow><Link>Ver todos</Link></div>
          <div className="wf-card" style={{ padding: 0 }}>{[1, 2, 3].map(p => <ResultRow key={p} pos={p} />)}</div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Calendário de Regatas ----------
    <DCArtboard key="nR" id="naut-regatas" label="Regatas (Agenda · filtro) · Mobile" width={SHEETW(390)} height={1465} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          '<b>Um único sistema de Agenda</b> com filtro — "Calendário de Regatas" = a Agenda filtrada por Regata, exibida dentro de Náutica.',
          { pin: 1, t: 'Filtro por <b>classe</b> e mês; alterna calendário ↔ lista.' },
          { pin: 2, t: 'Cada regata → <b>página de evento</b> (template Evento, fonte única).' },
          { pin: 3, t: 'Status por <b>bandeira de sinalização</b> (confirmada / adiada).' },
        ]}>
        <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>Esportes<span className="sep">›</span>Náutica &amp; Vela<span className="sep">›</span>Regatas</div>
          <div className="wf-between" style={{ marginBottom: 12 }}><div className="wf-h xl">Regatas</div><div className="wf-row" style={{ gap: 6 }}><Chip active>Lista</Chip><Chip>Mês</Chip></div></div>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 78, zIndex: 6 }} />
          <div className="wf-row" style={{ gap: 7, overflow: 'hidden' }}>{['Todas', 'Oceânico', 'Optimist', 'Snipe', 'HPE'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
        </div>
        <div style={{ position: 'relative', padding: '6px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 0, zIndex: 6 }} />
          <Pin n={3} style={{ position: 'absolute', right: 8, top: 18, zIndex: 6 }} />
          <div className="wf-stack" style={{ gap: 12 }}><EventRow status="Confirmada" /><EventRow status="Inscrições" /><EventRow status="Adiada" /><EventRow status="Confirmada" /></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Resultados ----------
    <DCArtboard key="nRes" id="naut-resultados" label="Resultados · Mobile" width={SHEETW(390)} height={1350} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Resultados de regatas — prova de excelência esportiva.',
          { pin: 1, t: 'Seleção de <b>regata + classe</b>.' },
          { pin: 2, t: '<b>Classificação</b> em tabela (mono, tabular): pos · barco · tempo.' },
          { pin: 3, t: 'Link p/ resultados <b>ao vivo</b> durante a Semana de Vela.' },
        ]}>
        <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>Esportes<span className="sep">›</span>Náutica &amp; Vela<span className="sep">›</span>Resultados</div>
          <div className="wf-h xl" style={{ marginBottom: 12 }}>Resultados</div>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 76, zIndex: 6 }} />
          <div className="wf-row" style={{ gap: 10, marginBottom: 4 }}><Field select placeholder="Regata" style={{ flex: 1 }} /><Field select placeholder="Classe" style={{ flex: 1 }} /></div>
        </div>
        <div style={{ position: 'relative', padding: '10px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 6, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 0 }}>
            <div className="wf-between" style={{ padding: '10px 14px', borderBottom: '1px solid var(--wf-line-2)', background: 'var(--wf-fill-2)' }}><Data>POS · BARCO</Data><Data>TEMPO</Data></div>
            {[1, 2, 3, 4, 5, 6].map(p => <ResultRow key={p} pos={p} />)}
          </div>
          <div style={{ position: 'relative', marginTop: 14 }}>
            <Pin n={3} style={{ position: 'absolute', left: -8, top: -8, zIndex: 6 }} />
            <div className="wf-card" style={{ padding: 12, background: 'var(--wf-navy-08)', borderColor: 'var(--wf-navy-14)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><div><div className="wf-h sm">Resultados ao vivo</div><Data>durante a Semana de Vela</Data></div><span className="wf-data" style={{ color: 'var(--wf-navy)' }}>● ao vivo</span></div>
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Escola de Vela ----------
    <DCArtboard key="nE" id="naut-escola" label="Escola de Vela · Mobile" width={SHEETW(390)} height={1510} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Formação — alimenta o pilar e a base do clube.',
          { pin: 1, t: 'Turmas por <b>nível</b> (infantil, adulto, aperfeiçoamento).' },
          { pin: 2, t: 'Calendário de turmas + <b>inscrição</b>.' },
          { pin: 3, t: 'CTA de contato / matrícula.' },
        ]}>
        <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>Náutica &amp; Vela<span className="sep">›</span>Escola de Vela</div><div className="wf-h xl">Escola de Vela</div></div>
          <Img h={170} label="Foto · escola de vela" 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 }}>Turmas</Eyebrow>
          <div className="wf-stack" style={{ gap: 10 }}>
            {[['Infantil', '7–12 anos · Optimist'], ['Adulto', 'iniciante · fim de semana'], ['Aperfeiçoamento', 'regata · oceânico']].map(([t, s]) =>
              <div key={t} className="wf-between wf-card" style={{ padding: 13 }}><div><div className="wf-h sm">{t}</div><Data>{s}</Data></div><Btn variant="ghost" size="sm">Inscrever</Btn></div>)}
          </div>
        </div>
        <div style={{ position: 'relative', padding: 16, marginTop: 6, borderTop: '1px solid var(--wf-line-2)', background: 'var(--wf-fill-2)' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 6, zIndex: 6 }} />
          <Btn variant="primary" block ar>Falar com a escola</Btn>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Semana de Vela (evento-âncora) · Mobile ----------
    <DCArtboard key="nS" id="naut-semana" label="Semana de Vela · âncora · Mobile" width={SHEETW(390)} height={1710} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'A <b>Semana de Vela</b> não é área: é o <b>evento-âncora</b> (template Evento), <b>uma fonte da verdade</b>, referenciada por Home, Esportes/Náutica, Agenda e SIVI.',
          { pin: 1, t: '<b>Hero dedicado</b> + countdown ao go-live (24 jul) + selo <b>apresentado por</b>.' },
          { pin: 2, t: 'Sobre + números (prova social internacional).' },
          { pin: 3, t: '<b>Programação</b> + <b>classes</b> participantes.' },
          { pin: 4, t: 'Resultados ao vivo + <b>inscrição</b> + link ao site SIVI externo.' },
          { pin: 5, t: '<b>Patrocínio do evento</b> (slots event-presented-by / event-faixa).' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <Img h={280} label="Hero · Semana Internacional de Vela" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 16 }}>
            <Cobrand style={{ marginBottom: 10 }} />
            <Eyebrow style={{ marginBottom: 8 }}>SIVI · 24 jul – 02 ago</Eyebrow>
            <div className="wf-h xl" style={{ marginBottom: 10 }}>Semana Internacional de Vela de Ilhabela</div>
            <div className="wf-row" style={{ gap: 8 }}>{['12', '08', '23'].map((n, i) => <div key={i} className="wf-card" style={{ padding: '6px 10px', textAlign: 'center' }}><div className="wf-h sm" style={{ color: 'var(--wf-navy)' }}>{n}</div><Data>{['dias', 'hrs', 'min'][i]}</Data></div>)}</div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '16px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 12, zIndex: 6 }} />
          <Lines n={3} style={{ marginBottom: 16 }} />
          <div className="wf-row" style={{ gap: 10 }}><div style={{ flex: 1 }}><Stat v="+1100" l="velejadores" /></div><div style={{ flex: 1 }}><Stat v="12" l="classes" /></div><div style={{ flex: 1 }}><Stat v="#1" l="Am. Latina" /></div></div>
        </div>
        <div style={{ position: 'relative', padding: '8px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 4, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Programação</Eyebrow>
          <div className="wf-stack" style={{ gap: 0, marginBottom: 18 }}>{[['24/jul', 'Abertura · largada'], ['28/jul', 'Regatas oceânicas'], ['02/ago', 'Premiação']].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>
          <Eyebrow style={{ marginBottom: 12 }}>Classes</Eyebrow>
          <div className="wf-row" style={{ gap: 7, flexWrap: 'wrap' }}>{['Oceânico ORC', 'HPE', 'Snipe', 'Optimist', 'Laser', 'Kite'].map(c => <Tag key={c}>{c}</Tag>)}</div>
        </div>
        <div style={{ position: 'relative', padding: 16, borderTop: '1px solid var(--wf-line-2)', background: 'var(--wf-fill-2)', marginTop: 8 }}>
          <Pin n={4} style={{ position: 'absolute', left: 6, top: 6, zIndex: 6 }} />
          <div className="wf-row" style={{ gap: 10, marginBottom: 12 }}><Btn variant="primary" style={{ flex: 1 }} ar>Inscrição</Btn><Btn variant="ghost" style={{ flex: 1 }}>Site SIVI ↗</Btn></div>
          <div style={{ position: 'relative' }}>
            <Pin n={5} style={{ position: 'absolute', left: -10, top: -10, zIndex: 6 }} />
            <div className="wf-sponsor" style={{ height: 64 }}><span>Patrocínio do evento</span><div className="lg-slot" /><div className="lg-slot" /></div>
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Semana de Vela · Desktop (âncora) ----------
    <DCArtboard key="nSD" id="naut-semana-d" label="Semana de Vela · Desktop" width={SHEETW(1240)} height={1225} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Versão desktop do evento-âncora — centro do go-live de 24/jul.',
          'Hero cinematográfico + countdown; números e classes em faixa.',
          'Programação em timeline; inscrição e patrocínio nobres.',
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ position: 'relative' }}>
          <Img h={460} label="Hero full-bleed · Semana Internacional de Vela" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 48, maxWidth: 680 }}>
            <Eyebrow style={{ marginBottom: 12 }}>SIVI · 24 jul – 02 ago · Ilhabela</Eyebrow>
            <div className="wf-h" style={{ fontSize: 50, lineHeight: 1.04, marginBottom: 18 }}>Semana Internacional de Vela</div>
            <div className="wf-row" style={{ gap: 12 }}><Btn variant="primary" size="lg" ar>Inscrição</Btn><Btn variant="ghost" size="lg">Resultados ao vivo</Btn></div>
          </div>
        </div>
        <div style={{ padding: '36px 60px' }}>
          <div className="wf-row" style={{ gap: 48, justifyContent: 'center', marginBottom: 36 }}><Stat v="+1100" l="velejadores" /><Stat v="12" l="classes" /><Stat v="20" l="países" /><Stat v="#1" l="América Latina" /></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
            <div><Eyebrow style={{ marginBottom: 16 }}>Programação</Eyebrow><div className="wf-stack" style={{ gap: 0 }}>{[['24/jul', 'Abertura e primeira largada'], ['28/jul', 'Regatas oceânicas ORC'], ['02/ago', 'Premiação e encerramento']].map(([d, t]) => <div key={d} className="wf-row" style={{ gap: 18, padding: '14px 0', borderBottom: '1px solid var(--wf-line-2)' }}><Data style={{ flex: '0 0 60px', color: 'var(--wf-navy)', fontSize: 14 }}>{d}</Data><div className="wf-h sm">{t}</div></div>)}</div></div>
            <div><Eyebrow style={{ marginBottom: 16 }}>Classes participantes</Eyebrow><div className="wf-row" style={{ gap: 8, flexWrap: 'wrap', marginBottom: 24 }}>{['Oceânico ORC', 'HPE', 'Snipe', 'Optimist', 'Laser', 'Kite', '49er'].map(c => <Tag key={c}>{c}</Tag>)}</div><div className="wf-sponsor" style={{ height: 90 }}><span>Patrocínio do evento</span><div className="lg-slot" style={{ width: 100, height: 44 }} /><div className="lg-slot" /></div></div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

  ];
}
window.nauticaArtboards = nauticaArtboards;