// ============================================================
// SEÇÃO · Home (aprovada: Híbrida) — v3
//   Hero aspiracional (vídeo full-viewport) + utilidade + jornadas
//   por intenção (4 públicos) + heritage + notícias + patrocínio.
// ============================================================

// "Por onde começar" = jornadas por INTENÇÃO (4 públicos), não cópia do menu.
const INTENT = [
  ['Sou sócio', 'Área do Sócio · canal oficial', true],
  ['Quero me associar', 'Associe-se'],
  ['Visito o clube', 'O Clube · Serviços'],
  ['Velejo / compito', 'Esportes › Náutica & Vela'],
];

// "O que tem essa semana" — bloco recorrente
function EssaSemana({ compact }) {
  return (
    <div className="wf-card" style={{ padding: 14 }}>
      <div className="wf-between" style={{ marginBottom: 12 }}>
        <Eyebrow>O que tem essa semana</Eyebrow>
        <Data>13–15 jun</Data>
      </div>
      <div className="wf-stack" style={{ gap: 10 }}>
        <div className="wf-row" style={{ gap: 10, alignItems: 'center' }}>
          <Box w={38} h={38} label="📅" style={{ flex: '0 0 38px' }} />
          <div style={{ flex: 1 }}><div className="wf-bar" style={{ width: '70%', height: 10, marginBottom: 6 }} /><Data>Próxima regata · sáb 09:00</Data></div>
        </div>
        <Hr />
        <div className="wf-row" style={{ gap: 10, alignItems: 'center' }}>
          <Box w={38} h={38} label="🍽" style={{ flex: '0 0 38px' }} />
          <div style={{ flex: 1 }}><div className="wf-bar" style={{ width: '60%', height: 10, marginBottom: 6 }} /><Data>Cardápio da semana · dinâmico (CMS)</Data></div>
        </div>
        {!compact && <><Hr />
          <div className="wf-row" style={{ gap: 12 }}>
            <Data>🌬 12–16 kn SE</Data><Data>⛴ Balsa 06–23h</Data><Data>⛽ R$ 6,29</Data>
          </div></>}
      </div>
    </div>
  );
}

function homeArtboards() {
  return [

    // ---------- Hero aspiracional · Mobile (vídeo full-viewport) ----------
    <DCArtboard key="hero-m" id="home-hero-m" label="Hero aspiracional · Mobile" width={SHEETW(390)} height={860} style={ABS}>
      <Sheet mobile vp="Mobile · 390 · 100dvh" screenW={390}
        notes={[
          'Devolutiva §3: hero <b>full-viewport</b> (svh/dvh), <b>vídeo Mux</b> mudo em loop + poster.',
          { pin: 1, t: 'Selo <b>apresentado por</b> (slot home-hero-cobrand, sutil).' },
          { pin: 2, t: '<b>Claim aspiracional</b> curto + 1 CTA primário.' },
          { state: true, pin: 3, t: '<b>Em temporada (campanha)</b>: manchete e CTA do <b>evento</b> — não misturar com institucional. Countdown ao go-live (24 jul). Fora de temporada → institucional (ver "Hero modular · 3 estados").' },
          { pin: 4, t: '<b>Faixa "ao vivo"</b>: clima/vento, próxima regata, balsa — útil sem poluir.' },
          'Cuidados: poster antes do vídeo (LCP); prefers-reduced-motion = imagem; sem áudio; botão pausar; no 3G não baixa vídeo.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Img h={620} video label="" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ position: 'absolute', top: 14, left: 16, zIndex: 6 }}><Cobrand /></div>
          <div style={{ position: 'absolute', top: 14, right: 16, zIndex: 6 }}><div className="wf-icon" style={{ width: 30, height: 30, background: 'rgba(255,255,255,.8)' }}>❚❚</div></div>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 7 }} />
          <div style={{ position: 'absolute', left: 0, right: 0, bottom: 64, padding: '0 20px' }}>
            <Pin n={3} style={{ position: 'absolute', right: 16, top: -150, zIndex: 7 }} />
            <div className="wf-row" style={{ gap: 8, marginBottom: 16 }}>{[['12', 'dias'], ['08', 'hrs'], ['23', 'min'], ['10', 'seg']].map(([n, l]) => <div key={l} style={{ background: 'rgba(255,255,255,.85)', borderRadius: 4, padding: '6px 10px', textAlign: 'center' }}><div className="wf-h sm" style={{ color: 'var(--wf-navy)' }}>{n}</div><Data>{l}</Data></div>)}</div>
            <Pin n={2} style={{ position: 'absolute', left: 8, top: 64, zIndex: 7 }} />
            <Eyebrow style={{ marginBottom: 10 }}>Semana de Vela · 24 jul – 02 ago</Eyebrow>
            <div className="wf-h" style={{ fontSize: 34, lineHeight: 1.05, marginBottom: 14 }}>A maior semana de vela da América Latina</div>
            <Btn variant="primary" ar>Ver a Semana de Vela</Btn>
            <div className="wf-center" style={{ marginTop: 18, color: 'var(--wf-faint)', flexDirection: 'column', gap: 2 }}><Data>role para descobrir</Data><span>⌄</span></div>
          </div>
          <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 6 }}>
            <Pin n={4} style={{ position: 'absolute', left: 6, top: -8, zIndex: 7 }} />
            <LiveStrip />
          </div>
        </div>
      </Sheet>
    </DCArtboard>,

    // ---------- Hero aspiracional · Desktop ----------
    <DCArtboard key="hero-d" id="home-hero-d" label="Hero aspiracional · Desktop" width={SHEETW(1240)} height={825} style={ABS}>
      <Sheet vp="Desktop · 1240 · 100vh" screenW={1240}
        notes={[
          'Hero full-viewport com vídeo Mux; overlay à esquerda + faixa "ao vivo" na base.',
          { pin: 1, t: 'Header sticky sobre o hero (condensa ao rolar).' },
          { pin: 2, t: 'Claim + 1 CTA primário; <b>apresentado por</b> sutil.' },
          { pin: 3, t: '<b>Estado campanha</b>: manchete + CTA do <b>evento</b> (coerentes entre si). Fora de temporada → institucional (ver "Hero modular · 3 estados").' },
          { pin: 4, t: 'Faixa "ao vivo": clima/vento, regata, balsa, combustível.' },
        ]}>
        <DeskHeader active="" weather mega />
        <div style={{ position: 'relative' }}>
          <Img h={640} video label="" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', top: 24, right: 60, zIndex: 6 }}><Cobrand /></div>
          <Pin n={2} style={{ position: 'absolute', left: 50, top: 180, zIndex: 7 }} />
          <Pin n={3} style={{ position: 'absolute', left: 50, top: 120, zIndex: 7 }} />
          <div style={{ position: 'absolute', left: 60, top: 150, maxWidth: 680 }}>
            <div className="wf-row" style={{ gap: 8, marginBottom: 18 }}>{[['12', 'dias'], ['08', 'hrs'], ['23', 'min'], ['10', 'seg']].map(([n, l]) => <div key={l} style={{ background: 'rgba(255,255,255,.85)', borderRadius: 4, padding: '8px 14px', textAlign: 'center' }}><div className="wf-h md" style={{ color: 'var(--wf-navy)' }}>{n}</div><Data>{l}</Data></div>)}</div>
            <Eyebrow style={{ marginBottom: 14 }}>Semana de Vela · 24 jul – 02 ago</Eyebrow>
            <div className="wf-h" style={{ fontSize: 60, lineHeight: 1.02, marginBottom: 20 }}>A maior semana de vela da América Latina</div>
            <div className="wf-row" style={{ gap: 12 }}><Btn variant="primary" size="lg" ar>Ver a Semana de Vela</Btn><Btn variant="ghost" size="lg">▶ Assistir</Btn></div>
          </div>
          <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 6 }}>
            <Pin n={4} style={{ position: 'absolute', left: 50, top: -8, zIndex: 7 }} />
            <LiveStrip />
          </div>
        </div>
      </Sheet>
    </DCArtboard>,

    // ---------- Hero · estados: ver "Hero modular · 3 estados" (heroRev16, nesta seção) ----------

    // ---------- ★ Híbrida (recomendação da direção: Editorial + utilidade + jornadas) ----------
    <DCArtboard key="hH" id="home-hibrida" label="Home · Mobile (aprovada · Híbrida)" width={SHEETW(390)} height={2825} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          '<b>Home aprovada</b>: híbrida (Editorial + utilidade + jornadas por intenção).',
          { pin: 1, t: '<b>Hero de vitrine</b> — ver artboard Hero aspiracional (vídeo + countdown).' },
          { pin: 2, t: '<b>Faixa de utilidade</b> "essa semana / clima / balsa / combustível".' },
          { pin: 3, t: '<b>Jornadas por intenção</b> (4 públicos), não cópia do menu sticky.' },
          { pin: 4, t: '<b>História / orgulho</b>: 70 anos + números + prova social (referência, fonte em O Clube).' },
          { pin: 5, t: 'Destaques de Revista/Notícias.' },
          { pin: 6, t: '<b>Faixa de patrocínio nobre</b> (slot home-faixa-master) + CTA Associe-se.' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <Img h={300} label="Hero · Semana de Vela" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 16 }}>
            <Cobrand style={{ marginBottom: 10 }} />
            <Eyebrow style={{ marginBottom: 8 }}>Desde 1956 · Ilhabela</Eyebrow>
            <div className="wf-h xl" style={{ marginBottom: 10 }}>Onde a tradição encontra o mar aberto</div>
            <Btn variant="primary" ar>Ver a Semana de Vela</Btn>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '12px 16px 4px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 4, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 12, display: 'flex', justifyContent: 'space-around', textAlign: 'center', marginBottom: 12 }}>
            {[['🌬', '14 kn', 'Vento SE'], ['⛴', '06–23h', 'Balsa'], ['⛽', 'R$ 6,29', 'Combust.']].map(([i, v, l]) =>
              <div key={l}><div style={{ fontSize: 15 }}>{i}</div><div className="wf-data" style={{ margin: '4px 0 2px', color: 'var(--wf-ink)', fontWeight: 700 }}>{v}</div><Data>{l}</Data></div>)}
          </div>
          <EssaSemana compact />
        </div>
        <div style={{ position: 'relative', padding: '12px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Por onde começar · por intenção</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {INTENT.map(([t, s, acc]) => <div key={t} className={'wf-jt' + (acc ? ' accent' : '')}><div className="ic" /><div className="wf-h sm" style={acc ? { color: 'var(--wf-navy)' } : {}}>{t}</div><Data>{s}</Data></div>)}
          </div>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px', background: 'var(--wf-fill-2)', borderTop: '1px solid var(--wf-line-2)', borderBottom: '1px solid var(--wf-line-2)' }}>
          <Pin n={4} style={{ position: 'absolute', left: 6, top: 10, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>70 anos de mar</Eyebrow>
          <div className="wf-h lg" style={{ marginBottom: 14 }}>Uma história que continua sendo escrita</div>
          <div className="wf-row" style={{ gap: 10, marginBottom: 18 }}>
            <div style={{ flex: 1 }}><Stat v="1956" l="Fundação" /></div>
            <div style={{ flex: 1 }}><Stat v={<>500<span style={{ fontSize: 22 }}>+</span></>} l="Associados" /></div>
            <div style={{ flex: 1 }}><Stat v="16" l="Países" /></div>
          </div>
          <SocialProof wrap />
        </div>
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <Pin n={5} style={{ position: 'absolute', left: 6, top: 10, zIndex: 6 }} />
          <div className="wf-between" style={{ marginBottom: 12 }}><Eyebrow>Em destaque · Notícias</Eyebrow><Link>Ver tudo</Link></div>
          <div className="wf-stack" style={{ gap: 14 }}><NewsCard tall /><NewsCard /></div>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <Pin n={6} style={{ position: 'absolute', left: 6, top: 10, zIndex: 6 }} />
          <div className="wf-sponsor" style={{ height: 84, marginBottom: 16, flexDirection: 'column', gap: 10 }}><span>Patrocinadores · faixa nobre</span><div className="wf-row" style={{ gap: 10 }}><div className="lg-slot" style={{ width: 90, height: 36 }} /><div className="lg-slot" /><div className="lg-slot" /></div></div>
          <div className="wf-card" style={{ padding: 18, textAlign: 'center', background: 'var(--wf-navy-08)', borderColor: 'var(--wf-navy-14)' }}>
            <div className="wf-h md" style={{ marginBottom: 8 }}>Faça parte do clube</div>
            <T sm style={{ marginBottom: 14 }}>Conheça as formas de associação.</T>
            <Btn variant="primary" block>Associe-se</Btn>
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Desktop reference (Editorial) ----------
    <DCArtboard key="hD" id="home-desktop" label="Home · Desktop (Híbrida)" width={SHEETW(1240)} height={1815} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Expansão desktop da direção <b>Híbrida</b> (aprovada).',
          'Header com <b>mega-menu + clima</b> (sticky ao rolar); hero de vitrine.',
          'Jornadas <b>por intenção</b> (4 públicos); faixa "essa semana"; <b>história + prova social</b>.',
          '<b>Faixa de patrocínio nobre</b> + grade editorial de Notícias.',
        ]}>
        <DeskHeader active="" weather mega />
        <div style={{ position: 'relative' }}>
          <Img h={420} label="Hero full-bleed · Semana Internacional de Vela" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', left: 60, top: 26 }}><Cobrand /></div>
          <div style={{ position: 'absolute', left: 60, bottom: 50, maxWidth: 620 }}>
            <Eyebrow style={{ marginBottom: 12 }}>Desde 1956 · Ilhabela</Eyebrow>
            <div className="wf-h" style={{ fontSize: 52, lineHeight: 1.04, marginBottom: 18 }}>Onde a tradição encontra o mar aberto</div>
            <div className="wf-row" style={{ gap: 12 }}><Btn variant="primary" size="lg" ar>Ver a Semana de Vela</Btn><Btn variant="ghost" size="lg">Conheça o clube</Btn></div>
          </div>
        </div>
        <div style={{ padding: '36px 60px 8px' }}>
          <Eyebrow style={{ marginBottom: 18 }}>Por onde começar · por intenção</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {INTENT.map(([t, s, acc]) => <div key={t} className={'wf-jt' + (acc ? ' accent' : '')}><div className="ic" /><div className="wf-h sm" style={acc ? { color: 'var(--wf-navy)' } : {}}>{t}</div><Data>{s}</Data></div>)}
          </div>
        </div>
        <div style={{ padding: '28px 60px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
            <div className="wf-card" style={{ padding: 18, gridColumn: 'span 1' }}><EssaSemanaInline /></div>
            <div style={{ gridColumn: 'span 2' }}>
              <div className="wf-between" style={{ marginBottom: 14 }}><Eyebrow>Em destaque · Notícias</Eyebrow><Link>Ver tudo ↗</Link></div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}><NewsCard /><NewsCard /><NewsCard /></div>
            </div>
          </div>
        </div>
        <div style={{ padding: '8px 60px 36px' }}>
          <div style={{ background: 'var(--wf-fill-2)', border: '1px solid var(--wf-line-2)', borderRadius: 6, padding: '32px 36px' }}>
            <div className="wf-between" style={{ alignItems: 'flex-end', marginBottom: 24 }}>
              <div style={{ maxWidth: 560 }}><Eyebrow style={{ marginBottom: 10 }}>70 anos de mar · desde 1956</Eyebrow><div className="wf-h" style={{ fontSize: 34 }}>Uma história que continua sendo escrita</div></div>
              <div className="wf-row" style={{ gap: 28 }}><Stat v="1956" l="Fundação" /><Stat v={<>500<span style={{ fontSize: 24 }}>+</span></>} l="Associados" /><Stat v="16" l="Países" /></div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 28, alignItems: 'center' }}>
              <Quote /><SocialProof wrap />
            </div>
          </div>
        </div>
        <div style={{ padding: '0 60px 36px' }}>
          <div className="wf-sponsor" style={{ height: 96 }}><span>Patrocinadores · Master</span><div className="lg-slot" style={{ width: 120, height: 50 }} /><span>Oficiais</span>{[0, 1, 2].map(i => <div key={i} className="lg-slot" style={{ height: 40 }} />)}</div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

  ];
}

// versão inline do bloco (sem card externo) p/ desktop
function EssaSemanaInline() {
  return (
    <>
      <Eyebrow style={{ marginBottom: 14 }}>Essa semana</Eyebrow>
      <div className="wf-stack" style={{ gap: 12 }}>
        {[['Próxima regata', 'sáb 09:00 · 12–16 kn SE'], ['Cardápio da semana', 'dinâmico · CMS'], ['Agenda do fim de semana', '3 eventos']].map(([t, s]) =>
          <div key={t} className="wf-row" style={{ gap: 10, alignItems: 'center' }}><Box w={36} h={36} style={{ flex: '0 0 36px' }} /><div><div className="wf-h sm">{t}</div><Data>{s}</Data></div></div>)}
      </div>
    </>
  );
}

window.homeArtboards = homeArtboards;