// ============================================================
// SEÇÃO · Prioridade alta — Revisão 16/jun (briefing de ajustes)
//  flatsRev16 · conveniadosRev16 · heroRev16 · revistaRev16 · leadRev16
//  Itens estruturais / caminho crítico da devolutiva de 16/jun.
// ============================================================

// Selo "apresentado por" (cota Master) — reuso local.
const Seal = ({ style }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 4, border: '1.5px dashed var(--wf-navy)', background: 'rgba(255,255,255,.85)', ...style }}>
    <Data style={{ color: 'var(--wf-navy)', textTransform: 'uppercase', letterSpacing: '.1em' }}>Apresentado por · Master</Data>
  </div>
);
// Atributo com ícone (linha de serviço de conveniado).
const Attr = ({ ic, label, on }) => (
  <div className="wf-row" style={{ gap: 9, alignItems: 'center', padding: '9px 0', borderBottom: '1px solid var(--wf-line-2)' }}>
    <div style={{ width: 26, height: 26, borderRadius: 5, background: on ? 'var(--wf-navy-08)' : 'var(--wf-fill)', border: '1px solid var(--wf-line-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: on ? 'var(--wf-navy)' : 'var(--wf-faint)', flex: '0 0 26px' }}>{ic}</div>
    <div className="wf-t sm" style={{ color: on ? 'var(--wf-ink)' : 'var(--wf-faint)', textDecoration: on ? 'none' : 'line-through' }}>{label}</div>
  </div>
);
// Marcador "conteúdo pendente do clube" (bloqueio de conteúdo).
const Pending = ({ what, style }) => (
  <div style={{ border: '1.5px dashed var(--wf-navy)', borderRadius: 6, background: 'var(--wf-navy-08)', padding: '12px 14px', display: 'flex', gap: 10, alignItems: 'center', ...style }}>
    <span className="wf-tag navy">Pendente</span>
    <div className="wf-t sm" style={{ color: 'var(--wf-navy-ink)' }}>{what}</div>
  </div>
);

// =====================================================================
// 1 · FLATS — página nova (não existia). Template provisório.
//     Bloqueada por conteúdo: fotos, tipos de unidade, descrição.
// =====================================================================
function flatsRev16() {
  return [

    // Flats · Mobile
    <DCArtboard key="flM" id="rev-flats-m" label="Flats · Mobile (template provisório)" width={SHEETW(390)} height={2010} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Prio. ALTA · §1 — <b>página nova</b>, não existia. Template <b>provisório</b>.',
          { state: true, t: '<b>Bloqueada por conteúdo do clube</b>: fotos, tipos de unidade e descrição.' },
          { pin: 1, t: '<b>Hero</b> + proposta (hospedagem do sócio na ilha).' },
          { pin: 2, t: '<b>Tipos de unidade</b> em cards — slots prontos para o conteúdo real.' },
          { pin: 3, t: '<b>Galeria</b> + comodidades (atributos por unidade).' },
          { pin: 4, t: '<b>Disponibilidade & reserva</b> → CTA contato (sem booking online na Fase 1).' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <Img h={200} label="Hero · Flats" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ padding: '14px 16px 6px' }}>
            <div className="wf-crumb" style={{ marginBottom: 10 }}>O Clube<span className="sep">›</span>Estrutura<span className="sep">›</span>Flats</div>
            <Eyebrow style={{ marginBottom: 8 }}>Hospedagem · Ilhabela</Eyebrow>
            <div className="wf-h xl" style={{ marginBottom: 10 }}>Flats YCI</div>
            <Pending what="Texto de apresentação — a receber do clube." />
          </div>
        </div>
        <div style={{ position: 'relative', padding: '16px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 12, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Tipos de unidade</Eyebrow>
          <div className="wf-stack" style={{ gap: 12 }}>
            {['Studio', 'Apartamento 1 dorm.', 'Apartamento 2 dorm.'].map((t, i) => (
              <div key={t} className="wf-card" style={{ padding: 0 }}>
                <Img h={110} label="Foto · pendente" style={{ borderRadius: 0, border: 'none' }} />
                <div style={{ padding: 13 }}>
                  <div className="wf-between" style={{ marginBottom: 8 }}><div className="wf-h sm">{t}</div><Tag>até {2 + i} hóspedes</Tag></div>
                  <div className="wf-row" style={{ gap: 7, flexWrap: 'wrap' }}>{['Wi-Fi', 'Ar', 'Cozinha'].map(a => <Tag key={a}>{a}</Tag>)}</div>
                  <Data style={{ marginTop: 8 }}>diária · sob consulta</Data>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative', padding: '4px 16px 8px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 0, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Galeria &amp; comodidades</Eyebrow>
          <div className="wf-row" style={{ gap: 6, marginBottom: 12 }}><Img w="33%" h={66} label="" /><Img w="33%" h={66} label="" /><Img w="33%" h={66} label="" /></div>
          <div className="wf-card" style={{ padding: '4px 14px' }}>
            <Attr ic="🅿" label="Estacionamento" on />
            <Attr ic="⛵" label="Vaga para embarcação" on />
            <Attr ic="🍽" label="Café da manhã" on />
            <Attr ic="🐶" label="Pet friendly" />
          </div>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px 18px' }}>
          <Pin n={4} style={{ position: 'absolute', left: 6, top: 10, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 16, background: 'var(--wf-navy-08)', borderColor: 'var(--wf-navy-14)', textAlign: 'center' }}>
            <div className="wf-h md" style={{ marginBottom: 6 }}>Disponibilidade &amp; reserva</div>
            <T sm style={{ marginBottom: 14 }}>Consulta de datas pela Secretaria. Booking online fica para fase posterior.</T>
            <Btn variant="primary" block>Consultar disponibilidade</Btn>
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // Flats · Desktop
    <DCArtboard key="flD" id="rev-flats-d" label="Flats · Desktop (template provisório)" width={SHEETW(1240)} height={1320} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Mesmo template em desktop. Estrutura pronta; <b>aguarda conteúdo</b>.',
          { pin: 1, t: 'Hero + intro. Tipos de unidade em grade de 3.' },
          { pin: 2, t: 'Galeria + comodidades + bloco de reserva (CTA Secretaria).' },
        ]}>
        <DeskHeader active="O Clube" weather mega />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 40, top: 12, zIndex: 6 }} />
          <Img h={360} label="Hero · Flats" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 40 }}>
            <Eyebrow style={{ marginBottom: 10 }}>Hospedagem · Ilhabela</Eyebrow>
            <div className="wf-h" style={{ fontSize: 46 }}>Flats YCI</div>
          </div>
        </div>
        <div style={{ padding: '28px 60px' }}>
          <div className="wf-crumb" style={{ marginBottom: 16 }}>O Clube<span className="sep">›</span>Estrutura<span className="sep">›</span>Flats</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 28, marginBottom: 28 }}>
            <Pending what="Descrição institucional dos flats — a receber do clube." />
            <div className="wf-card" style={{ padding: 14 }}><Attr ic="🅿" label="Estacionamento" on /><Attr ic="⛵" label="Vaga para embarcação" on /><Attr ic="🍽" label="Café da manhã" on /></div>
          </div>
          <div style={{ position: 'relative' }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: -4, zIndex: 6 }} />
            <Eyebrow style={{ marginBottom: 14 }}>Tipos de unidade</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18, marginBottom: 28 }}>
              {['Studio', 'Apartamento 1 dorm.', 'Apartamento 2 dorm.'].map((t, i) => (
                <div key={t} className="wf-card" style={{ padding: 0 }}>
                  <Img h={150} label="Foto · pendente" style={{ borderRadius: 0, border: 'none' }} />
                  <div style={{ padding: 14 }}><div className="wf-between" style={{ marginBottom: 8 }}><div className="wf-h sm">{t}</div><Tag>até {2 + i}</Tag></div><Data>diária · sob consulta</Data></div>
                </div>
              ))}
            </div>
            <div className="wf-card" style={{ padding: 24, background: 'var(--wf-navy-08)', borderColor: 'var(--wf-navy-14)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div><div className="wf-h lg" style={{ marginBottom: 4 }}>Disponibilidade &amp; reserva</div><T>Consulta de datas pela Secretaria · sem booking online na Fase 1.</T></div>
              <Btn variant="primary" size="lg">Consultar disponibilidade</Btn>
            </div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

  ];
}
window.flatsRev16 = flatsRev16;

// =====================================================================
// 2 · CONVENIADOS — filtros por atributo + página interna padronizada.
//     Depende do template de atributos (Fernando).
// =====================================================================
function conveniadosRev16() {
  return [

    // Conveniados · Lista filtrável por atributo
    <DCArtboard key="cvL" id="rev-conv-list" label="Conveniados · Lista (filtros por atributo)" width={SHEETW(390)} height={1610} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Prio. ALTA · §2 — evolui a lista para <b>filtro por atributos</b>.',
          { pin: 1, t: '<b>Filtros por atributo</b>: almoço, embarcação, estacionamento… (multi-seleção).' },
          { pin: 2, t: 'Cada card mostra os <b>atributos-chave</b> do conveniado.' },
          { state: true, t: 'Atributos vêm do <b>template a fornecer (Fernando)</b>. Prever vazio ao filtrar.' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ padding: '14px 16px 8px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>O Clube<span className="sep">›</span>Conveniados</div>
          <div className="wf-h xl" style={{ marginBottom: 4 }}>Conveniados</div>
          <T sm style={{ marginBottom: 14 }}>Parceiros com benefícios ao sócio</T>
        </div>
        <div style={{ position: 'relative', padding: '0 16px 6px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: -4, zIndex: 6 }} />
          <div className="wf-input" style={{ marginBottom: 10 }}>⌕ Buscar conveniado</div>
          <Data style={{ marginBottom: 8 }}>Filtrar por atributo</Data>
          <div className="wf-row" style={{ gap: 7, flexWrap: 'wrap' }}>
            <Chip active>🍽 Almoço</Chip><Chip active>⛵ Embarcação</Chip><Chip>🅿 Estacionamento</Chip><Chip>🛏 Hospedagem</Chip><Chip>🏊 Piscina</Chip><Chip>🏋 Academia</Chip>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '12px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
          <Data style={{ marginBottom: 10 }}>3 resultados · 2 filtros ativos</Data>
          <div className="wf-stack" style={{ gap: 12 }}>
            {[['Iate Clube de Santa Catarina', 'Florianópolis · SC'], ['Yacht Club de Angra', 'Angra dos Reis · RJ'], ['Clube Náutico de Paraty', 'Paraty · RJ']].map(([n, p]) => (
              <div key={n} className="wf-card" style={{ padding: 12 }}>
                <div className="wf-between" style={{ marginBottom: 10 }}>
                  <div className="wf-row" style={{ gap: 11, alignItems: 'center' }}><Box w={40} h={40} label="LOGO" style={{ flex: '0 0 40px' }} /><div><div className="wf-h sm">{n}</div><Data>{p}</Data></div></div>
                  <span style={{ color: 'var(--wf-faint)' }}>›</span>
                </div>
                <div className="wf-row" style={{ gap: 6, flexWrap: 'wrap' }}>{['🍽 Almoço', '⛵ Embarcação', '🅿 Estac.'].map(a => <Tag key={a}>{a}</Tag>)}</div>
              </div>
            ))}
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // Conveniados · Página interna padronizada
    <DCArtboard key="cvP" id="rev-conv-page" label="Conveniados · Página interna padronizada" width={SHEETW(390)} height={1880} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Prio. ALTA · §2 — <b>página interna padronizada por clube</b> (1 molde p/ todos).',
          { pin: 1, t: 'Hero/foto + nome + cidade + reciprocidade.' },
          { pin: 2, t: '<b>Sobre</b> + atributos/serviços (mesma régua de toda a rede).' },
          { pin: 3, t: '<b>Como usar o benefício</b> + regras de reciprocidade.' },
          { pin: 4, t: 'Localização (mapa) + contato + galeria.' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <Img h={180} label="Foto · conveniado" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ padding: '14px 16px 6px' }}>
            <div className="wf-crumb" style={{ marginBottom: 10 }}>Conveniados<span className="sep">›</span>Iate Clube de Santa Catarina</div>
            <div className="wf-between" style={{ marginBottom: 6 }}><div className="wf-h lg">Iate Clube de Santa Catarina</div><Tag navy>Reciprocidade</Tag></div>
            <Data>Florianópolis · Santa Catarina · Brasil</Data>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 10, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 10 }}>Sobre</Eyebrow>
          <Lines n={3} style={{ marginBottom: 16 }} />
          <Eyebrow style={{ marginBottom: 8 }}>Serviços disponíveis</Eyebrow>
          <div className="wf-card" style={{ padding: '4px 14px' }}>
            <Attr ic="🍽" label="Restaurante / almoço" on />
            <Attr ic="⛵" label="Atracação para embarcação" on />
            <Attr ic="🅿" label="Estacionamento" on />
            <Attr ic="🛏" label="Hospedagem" />
            <Attr ic="🏊" label="Piscina" on />
          </div>
        </div>
        <div style={{ position: 'relative', padding: '6px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 2, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 14, background: 'var(--wf-fill-2)' }}>
            <div className="wf-h sm" style={{ marginBottom: 8 }}>Como usar o benefício</div>
            <Lines n={2} style={{ marginBottom: 10 }} />
            <Data>Apresente a carteira de sócio YCI · reciprocidade mediante reserva.</Data>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px 18px' }}>
          <Pin n={4} style={{ position: 'absolute', left: 6, top: 10, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 10 }}>Localização &amp; contato</Eyebrow>
          <Img h={130} label="Mapa" style={{ borderRadius: 4, marginBottom: 10 }} />
          <div className="wf-stack" style={{ gap: 8 }}><Data>📍 Endereço do clube conveniado</Data><Data>☎ +55 13 0000-0000</Data><Link>Site oficial ↗</Link></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

  ];
}
window.conveniadosRev16 = conveniadosRev16;

// =====================================================================
// 3 · HERO MODULAR — 3 estados explícitos: institucional / campanha /
//     evento (countdown + selo patrocinador + link externo).
// =====================================================================
function heroRev16() {
  const Frame = ({ vp, children }) => (
    <div style={{ flex: '0 0 auto' }}>
      <div className="wf-vp">{vp}</div>
      <div className="wf-screen is-mobile" style={{ width: 300 }}>
        <MobileHeader logged={false} />
        {children}
      </div>
    </div>
  );
  return [
    <DCArtboard key="heroR" id="rev-hero" label="Hero modular · 3 estados" width={1300} height={760} style={ABS}>
      <div className="wf-sheet">

        {/* Estado 1 · Institucional */}
        <Frame vp="① Institucional (evergreen)">
          <div style={{ position: 'relative' }}>
            <Img h={300} label="" style={{ borderRadius: 0, border: 'none' }} />
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 16, padding: '0 16px' }}>
              <Eyebrow style={{ marginBottom: 8 }}>Desde 1956 · Ilhabela</Eyebrow>
              <div className="wf-h lg" style={{ marginBottom: 12 }}>Onde a tradição encontra o mar aberto</div>
              <Btn variant="primary" size="sm" ar>Conheça o clube</Btn>
            </div>
          </div>
          <LiveStrip />
        </Frame>

        {/* Estado 2 · Campanha */}
        <Frame vp="② Campanha (temporada/CMS)">
          <div style={{ position: 'relative' }}>
            <Img h={300} label="" style={{ borderRadius: 0, border: 'none' }} />
            <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 4 }}><Tag navy>Campanha · Associe-se</Tag></div>
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 16, padding: '0 16px' }}>
              <Eyebrow style={{ marginBottom: 8 }}>Temporada 2026</Eyebrow>
              <div className="wf-h lg" style={{ marginBottom: 12 }}>Faça parte do clube</div>
              <Btn variant="primary" size="sm" ar>Quero me associar</Btn>
            </div>
          </div>
          <LiveStrip />
        </Frame>

        {/* Estado 3 · Evento ativo */}
        <Frame vp="③ Evento ativo">
          <div style={{ position: 'relative' }}>
            <Img h={300} video label="" style={{ borderRadius: 0, border: 'none' }} />
            <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 4 }}><Seal /></div>
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 16, padding: '0 16px' }}>
              <div className="wf-row" style={{ gap: 6, marginBottom: 10 }}>{[['12', 'd'], ['08', 'h'], ['23', 'm']].map(([n, l]) => <div key={l} style={{ background: 'rgba(255,255,255,.9)', borderRadius: 4, padding: '5px 8px', textAlign: 'center' }}><div className="wf-h sm" style={{ color: 'var(--wf-navy)' }}>{n}</div><Data>{l}</Data></div>)}</div>
              <Eyebrow style={{ marginBottom: 8 }}>Semana de Vela · 24 jul</Eyebrow>
              <div className="wf-h lg" style={{ marginBottom: 12 }}>Setenta anos navegando</div>
              <div className="wf-row" style={{ gap: 8 }}><Btn variant="primary" size="sm" ar>Site do evento</Btn><Btn variant="ghost" size="sm">Ver programação</Btn></div>
            </div>
          </div>
          <LiveStrip />
        </Frame>

        <div className="wf-notes">
          <div className="wf-notes-title">Notas · hero modular (§3)</div>
          <p className="wf-note">Prio. ALTA · §3 — <b>um layout, três estados</b> trocados pelo CMS (Sanity); não são telas diferentes.</p>
          <p className="wf-note"><b>① Institucional</b>: fallback evergreen — claim atemporal, <b>sem countdown</b>, CTA "conheça o clube".</p>
          <p className="wf-note"><b>② Campanha</b>: peça de temporada (ex.: Associe-se) — rótulo de campanha + CTA dirigido.</p>
          <p className="wf-note"><b>③ Evento</b>: <b>contagem regressiva</b> + <b>selo de patrocinador</b> + <b>link externo p/ o site do evento</b>.</p>
          <p className="wf-note wf-note-state"><b>Regras</b>: countdown só com data; sem evento/campanha ativos → institucional. Faixa "ao vivo" é evergreen em todos.</p>
        </div>
      </div>
    </DCArtboard>,
  ];
}
window.heroRev16 = heroRev16;

// =====================================================================
// 4 · NOTÍCIAS + NEWSLETTER — Rev. 18/jun: Revista DESCONTINUADA. O editorial
//     migra para um Portal de Notícias com hierarquia editorial manual; a
//     newsletter semanal em HTML substitui o PDF. Carta do Comodoro vira
//     editorial recorrente. Sem schema de Revista (edições/capa/acervo).
// =====================================================================
function revistaRev16() {
  return [

    // Portal de Notícias · curadoria editorial (hero + destaques + Carta do Comodoro)
    <DCArtboard key="revE" id="rev-noticias" label="Notícias · portal (curadoria) · Mobile" width={SHEETW(390)} height={2160} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Rev. 18/jun · §1 — <b>Revista descontinuada</b>. O editorial migra para o <b>Portal de Notícias</b> + newsletter.',
          { pin: 1, t: '<b>Hierarquia editorial manual</b>: hero curado pela redação (não só o mais recente).' },
          { pin: 2, t: '<b>Destaques secundários</b> escolhidos a dedo.' },
          { pin: 3, t: '<b>Carta do Comodoro</b> vira <b>editorial recorrente</b> (era peça da revista).' },
          { pin: 4, t: '<b>Editorias</b> (ex-rubricas): Náutica & Vela, Social, Gastronomia, Pessoas, História.' },
          { pin: 5, t: 'Cronológico + in-feed "Patrocinado". Edições da newsletter no arquivo (tela própria).' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <Img h={260} label="Hero curado · matéria de capa" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ position: 'absolute', bottom: 14, left: 16, right: 16 }}>
            <Tag navy>Em destaque</Tag>
            <div className="wf-h xl" style={{ marginTop: 8, color: '#fff' }}>A chamada principal da semana</div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Destaques</Eyebrow>
          <div className="wf-row" style={{ gap: 12 }}>{[0, 1].map(i => <div key={i} className="wf-card" style={{ padding: 0, flex: 1 }}><Img h={90} label="" style={{ borderRadius: 0, border: 'none' }} /><div style={{ padding: 10 }}><Tag>Editoria</Tag><div className="wf-bar" style={{ width: '90%', height: 9, margin: '7px 0 5px' }} /><div className="wf-bar" style={{ width: '60%', height: 9 }} /></div></div>)}</div>
        </div>
        <div style={{ position: 'relative', padding: '8px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 2, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 16, background: 'var(--wf-fill-2)' }}>
            <div className="wf-row" style={{ gap: 12, alignItems: 'center', marginBottom: 12 }}><Avatar s={42} label="C" /><div><Eyebrow>Carta do Comodoro</Eyebrow><div className="wf-h sm" style={{ marginTop: 4 }}>editorial recorrente</div></div></div>
            <Lines n={3} />
          </div>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px 4px' }}>
          <Pin n={4} style={{ position: 'absolute', left: 6, top: 10, zIndex: 6 }} />
          <div className="wf-row" style={{ gap: 7, overflow: 'hidden' }}>{['Todas', 'Náutica & Vela', 'Social', 'Gastronomia', 'Pessoas', 'História'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
        </div>
        <div style={{ position: 'relative', padding: '8px 16px 18px' }}>
          <Pin n={5} style={{ position: 'absolute', left: 6, top: 2, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Mais recentes</Eyebrow>
          <div className="wf-stack" style={{ gap: 12 }}>
            {[0, 1].map(i => <div key={i} className="wf-row wf-card" style={{ padding: 12, gap: 12 }}><Img w={92} h={70} label="" style={{ flex: '0 0 92px' }} /><div style={{ flex: 1 }}><Tag>Editoria</Tag><div className="wf-bar" style={{ width: '90%', height: 11, margin: '8px 0 6px' }} /><div className="wf-bar" style={{ width: '60%', height: 11, marginBottom: 8 }} /><Data>12 jun 2026</Data></div></div>)}
            <InFeedAd />
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // Modelo de conteúdo · Notícia + Newsletter (Revista descontinuada)
    <DCArtboard key="revSep" id="rev-content-model" label="Modelo de conteúdo · Notícia + Newsletter" width={SHEETW(560)} height={800} style={ABS}>
      <Sheet vp="Modelo de conteúdo (CMS)" screenW={560} notes={[
        'Rev. 18/jun: <b>sem schema de Revista</b>. Dois tipos: Notícia (conteúdo) e Newsletter (curadoria de envio).',
        { pin: 1, t: '<b>Notícia</b>: avulsa, datada, editoria, fluxo contínuo — a fonte do conteúdo.' },
        { pin: 2, t: '<b>Newsletter</b>: edição semanal que <b>referencia matérias</b> (não duplica texto) + envio por e-mail.' },
        'A antiga Revista (edições/capa/acervo) <b>deixa de existir</b>; Carta do Comodoro vira editorial em Notícias.',
      ]}>
        <div style={{ padding: '24px 26px' }}>
          <Eyebrow style={{ marginBottom: 18 }}>Modelo de conteúdo</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
            <div style={{ position: 'relative' }}>
              <Pin n={1} style={{ position: 'absolute', left: -10, top: -8, zIndex: 6 }} />
              <div className="wf-card" style={{ padding: 16, height: '100%' }}>
                <div className="wf-h md" style={{ marginBottom: 8 }}>Notícia</div>
                <Data style={{ marginBottom: 12 }}>schema · noticia</Data>
                <div className="wf-stack" style={{ gap: 8 }}>{['Avulsa, datada', 'Editoria + busca', 'Hierarquia editorial manual', 'Card in-feed patrocinado', 'Carta do Comodoro (editorial)'].map(x => <div key={x} className="wf-row" style={{ gap: 8, alignItems: 'center' }}><span style={{ color: 'var(--wf-navy)' }}>›</span><T sm>{x}</T></div>)}</div>
              </div>
            </div>
            <div style={{ position: 'relative' }}>
              <Pin n={2} style={{ position: 'absolute', left: -10, top: -8, zIndex: 6 }} />
              <div className="wf-card" style={{ padding: 16, height: '100%', background: 'var(--wf-navy-08)', borderColor: 'var(--wf-navy-14)' }}>
                <div className="wf-h md" style={{ marginBottom: 8 }}>Newsletter</div>
                <Data style={{ marginBottom: 12 }}>schema · edicao-newsletter</Data>
                <div className="wf-stack" style={{ gap: 8 }}>{['Curadoria semanal', 'Referencia matérias (links)', 'HTML responsivo (e-mail)', 'Página de arquivo', 'Métricas de abertura/clique'].map(x => <div key={x} className="wf-row" style={{ gap: 8, alignItems: 'center' }}><span style={{ color: 'var(--wf-navy)' }}>›</span><T sm>{x}</T></div>)}</div>
              </div>
            </div>
          </div>
          <div className="wf-card" style={{ padding: 14, marginTop: 18, borderStyle: 'dashed' }}>
            <div className="wf-between"><div className="wf-h sm">Blocos flexíveis (na matéria)</div><Data>reuso</Data></div>
            <div className="wf-row" style={{ gap: 7, flexWrap: 'wrap', marginTop: 10 }}>{['Texto', 'Imagem', 'Vídeo (Mux)', 'Galeria', 'Citação', 'Embed'].map(b => <Tag key={b}>{b}</Tag>)}</div>
          </div>
        </div>
      </Sheet>
    </DCArtboard>,

  ];
}
window.revistaRev16 = revistaRev16;

// =====================================================================
// 5 · ASSOCIE-SE — fluxo de lead em conformidade com a LGPD.
//     Sem expor nome/telefone publicamente.
// =====================================================================
function leadRev16() {
  return [
    <DCArtboard key="leadR" id="rev-lead" label="Associe-se · fluxo de lead (LGPD)" width={1300} height={1280} style={ABS}>
      <div className="wf-sheet">

        {/* Passo 1 · Formulário */}
        <div style={{ flex: '0 0 auto' }}>
          <div className="wf-vp">① Formulário de interesse</div>
          <div className="wf-screen is-mobile" style={{ width: 320 }}>
            <MobileHeader logged={false} />
            <div style={{ padding: '16px 16px' }}>
              <Eyebrow style={{ marginBottom: 8 }}>Associe-se</Eyebrow>
              <div className="wf-h lg" style={{ marginBottom: 6 }}>Tenho interesse</div>
              <T sm style={{ marginBottom: 16 }}>Deixe seus dados — a Secretaria entra em contato. Não há compra online.</T>
              <div className="wf-stack" style={{ gap: 14 }}>
                <Field label="Nome" placeholder="Seu nome" />
                <Field label="E-mail" placeholder="voce@exemplo.com" />
                <Field label="Telefone / WhatsApp" placeholder="(00) 00000-0000" />
                <Field label="Caminho de interesse" select placeholder="Título direto / revenda" />
                <Field label="Mensagem (opcional)" area placeholder="Conte um pouco sobre seu interesse" />
              </div>
              <div className="wf-row" style={{ gap: 10, alignItems: 'flex-start', margin: '16px 0' }}>
                <div style={{ width: 18, height: 18, border: '1.5px solid var(--wf-navy)', borderRadius: 3, flex: '0 0 18px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--wf-navy)', fontSize: 12 }}>✓</div>
                <T sm>Autorizo o contato e o tratamento dos meus dados conforme a <span style={{ color: 'var(--wf-navy)', borderBottom: '1.5px solid var(--wf-navy-14)' }}>Política de Privacidade</span> (LGPD).</T>
              </div>
              <Btn variant="primary" block ar>Enviar interesse</Btn>
            </div>
          </div>
        </div>

        {/* Passo 2 · Confirmação */}
        <div style={{ flex: '0 0 auto' }}>
          <div className="wf-vp">② Confirmação</div>
          <div className="wf-screen is-mobile" style={{ width: 320 }}>
            <MobileHeader logged={false} />
            <div style={{ padding: '40px 20px', textAlign: 'center' }}>
              <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--wf-navy-08)', border: '1.5px solid var(--wf-navy-14)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, color: 'var(--wf-navy)', margin: '0 auto 18px' }}>✓</div>
              <div className="wf-h lg" style={{ marginBottom: 10 }}>Recebemos seu interesse</div>
              <T style={{ marginBottom: 20 }}>A Secretaria retorna em até 2 dias úteis. Protocolo nº 2026-1183.</T>
              <Btn variant="ghost" block>Voltar ao início</Btn>
              <Data style={{ marginTop: 18, display: 'block' }}>Seus dados ficam restritos à Secretaria.</Data>
            </div>
          </div>
        </div>

        <div className="wf-notes">
          <div className="wf-notes-title">Notas · lead LGPD (§5)</div>
          <p className="wf-note">Prio. ALTA · §5 — <b>geração de lead</b> para venda de título; CTA = Secretaria (visita/WhatsApp).</p>
          <p className="wf-note wf-note-state"><b>LGPD — regra central</b>: <b>não expor nome nem telefone</b> publicamente. Quem vende título não aparece no site.</p>
          <p className="wf-note"><b>Consentimento explícito</b> (checkbox) + link para a Política de Privacidade antes do envio.</p>
          <p className="wf-note"><b>Mínimo necessário</b> de campos; dados <b>restritos à Secretaria</b>, não publicados.</p>
          <p className="wf-note">Interesse em <b>revenda</b> roteia pela Secretaria — intermedia sem expor o vendedor.</p>
          <p className="wf-note">Confirmação com <b>protocolo</b> e prazo de retorno; sem pagamento online.</p>
        </div>
      </div>
    </DCArtboard>,
  ];
}
window.leadRev16 = leadRev16;