// ============================================================
// SEÇÃO · Templates-mestre — reuso em todo o site
//  (Home já está na seção Home.) Aqui: Institucional, Matéria,
//   Newsletter, Evento, Sócio (shell). Mobile + desktop onde a
//   estrutura muda.
// ============================================================

function ArticleShareBar() {
  return <div className="wf-row" style={{ gap: 8 }}>{['↗', 'in', 'f', '✉'].map(x => <Box key={x} w={32} h={32} label={x} style={{ borderRadius: '50%' }} />)}</div>;
}

function templateArtboards() {
  return [

    // ---------- Institucional · Mobile ----------
    <DCArtboard key="tI" id="tpl-inst" label="Institucional · Mobile" width={SHEETW(390)} height={1695} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Template <b>Institucional</b>: O Clube e páginas estáticas.',
          { pin: 1, t: 'Título + <b>hero/mídia</b> + breadcrumb.' },
          { pin: 2, t: '<b>Corpo rico</b> em coluna de leitura (~720px no desktop).' },
          { pin: 3, t: '<b>Blocos de apoio</b>: documentos, galeria, linha do tempo.' },
          'Reusado por: Apresentação, Estatuto, Subsedes, Meio Ambiente…',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative', padding: '12px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>O Clube<span className="sep">›</span>Apresentação</div>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 36, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 8 }}>Desde 1956</Eyebrow>
          <div className="wf-h xl" style={{ marginBottom: 14 }}>Título da página institucional</div>
          <Img h={180} label="Mídia / hero" />
        </div>
        <div style={{ position: 'relative', padding: '6px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 4, zIndex: 6 }} />
          <Lines n={5} style={{ marginBottom: 18 }} />
          <div className="wf-h md" style={{ marginBottom: 10 }}>Subtítulo de seção</div>
          <Lines n={4} />
        </div>
        <div style={{ position: 'relative', padding: '18px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 14, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Documentos relacionados</Eyebrow>
          <div className="wf-stack" style={{ gap: 10 }}><DocRow /><DocRow /></div>
          <Eyebrow style={{ margin: '20px 0 12px' }}>Galeria</Eyebrow>
          <div className="wf-row" style={{ gap: 8 }}><Img w="33%" h={70} label="" /><Img w="33%" h={70} label="" /><Img w="33%" h={70} label="" /></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Institucional · Desktop ----------
    <DCArtboard key="tID" id="tpl-inst-d" label="Institucional · Desktop" width={SHEETW(1240)} height={1390} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Coluna de leitura <b>centrada ~720px</b>; apoio nas margens.',
          'Linha do tempo dos <b>70 anos</b> como bloco de apoio.',
          'Sumário lateral fixo (anchor nav) opcional.',
        ]}>
        <DeskHeader active="O Clube" />
        <div style={{ padding: '30px 60px 0' }}>
          <div className="wf-crumb" style={{ marginBottom: 16 }}>O Clube<span className="sep">›</span>Apresentação · 70 anos</div>
          <Eyebrow style={{ marginBottom: 10 }}>Desde 1956 · Ilhabela</Eyebrow>
          <div className="wf-h" style={{ fontSize: 44, maxWidth: 820, marginBottom: 20 }}>Setenta anos de tradição na vela brasileira</div>
        </div>
        <Img h={340} label="Hero institucional" style={{ border: 'none', borderRadius: 0, margin: '0 0 28px' }} />
        <div style={{ padding: '0 60px', display: 'grid', gridTemplateColumns: '220px 1fr', gap: 40 }}>
          <div><div className="wf-eyebrow" style={{ marginBottom: 12 }}>Nesta página</div><div className="wf-stack" style={{ gap: 10 }}>{['História', 'Marcos', 'Conselho', 'Subsedes'].map((x, i) => <span key={x} className="wf-t" style={i === 0 ? { color: 'var(--wf-navy)', fontWeight: 600 } : {}}>{x}</span>)}</div></div>
          <div style={{ maxWidth: 720 }}>
            <Lines n={6} style={{ marginBottom: 22 }} />
            <div className="wf-eyebrow" style={{ marginBottom: 16 }}>Linha do tempo</div>
            <div className="wf-stack" style={{ gap: 14, marginBottom: 22 }}>
              {['1956', '1980', '2006', '2026'].map(y => <div key={y} className="wf-row" style={{ gap: 16, alignItems: 'flex-start' }}><Data style={{ flex: '0 0 44px', fontSize: 15, color: 'var(--wf-navy)' }}>{y}</Data><div style={{ flex: 1 }}><Lines n={2} /></div></div>)}
            </div>
            <Lines n={4} />
          </div>
        </div>
        <div style={{ marginTop: 28 }}><Footer /></div>
      </Sheet>
    </DCArtboard>,

    // ---------- Matéria · Mobile (corpo modular, à la Medium) ----------
    <DCArtboard key="tM" id="tpl-art" label="Matéria · Mobile" width={SHEETW(390)} height={2310} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Template <b>Matéria</b>: notícias, editorial, posts.',
          { pin: 1, t: '<b>Header</b>: categoria, título, autor, data.' },
          { pin: 2, t: '<b>Capa</b>: player Mux ou imagem.' },
          { pin: 3, t: '<b>Corpo modular</b> (block content / Sanity Portable Text): o editor intercala parágrafo, <b>galeria</b>, <b>vídeo Mux</b>, citação e embed — onde quiser, à la Medium.' },
          { pin: 4, t: 'Botão <b>“+ inserir bloco”</b> entre parágrafos; cada bloco tem variações (largura total / centrada).' },
          { pin: 5, t: '<b>Compartilhar</b> + <b>relacionados</b> ao final.' },
          'Mesmo corpo modular vale para qualquer matéria (reuso do template).',
        ]}>
        <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>Notícias</div>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 34, zIndex: 6 }} />
          <Tag navy>Esportes</Tag>
          <div className="wf-h lg" style={{ margin: '10px 0 14px' }}>Título da matéria em duas ou três linhas</div>
          <div className="wf-between"><div className="wf-row" style={{ gap: 9, alignItems: 'center' }}><Avatar s={28} /><Data>Por Autor · 12 jun 2026</Data></div></div>
        </div>
        <div style={{ position: 'relative' }}>
          <Pin n={2} style={{ position: 'absolute', left: 22, top: 8, zIndex: 6 }} />
          <Img h={210} video label="" style={{ borderRadius: 0, border: 'none', margin: '0 0 6px' }} />
          <Data style={{ padding: '0 16px' }}>Bloco de capa · Mux ou imagem · legenda</Data>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
          <Lines n={4} style={{ marginBottom: 16 }} />
          {/* bloco vídeo inline */}
          <div style={{ margin: '0 -16px 6px', position: 'relative' }}><Tag navy style={{ position: 'absolute', left: 16, top: 10, zIndex: 2 }}>Bloco · Vídeo</Tag><Img h={180} video label="" style={{ borderRadius: 0, border: 'none' }} /></div>
          <Data style={{ marginBottom: 16 }}>Vídeo (Mux) inserido no meio da matéria · legenda</Data>
          <Lines n={3} style={{ marginBottom: 16 }} />
          {/* bloco galeria inline */}
          <div className="wf-between" style={{ marginBottom: 8 }}><Eyebrow>Bloco · Galeria</Eyebrow><Data>3 fotos · arrastar</Data></div>
          <div className="wf-row" style={{ gap: 6, marginBottom: 6 }}><Img w="33%" h={72} label="" /><Img w="33%" h={72} label="" /><Img w="33%" h={72} label="" /></div>
          <Data style={{ marginBottom: 16 }}>Galeria inserida no meio da matéria</Data>
          {/* citação */}
          <Quote style={{ margin: '4px 0 18px' }} />
          <Lines n={3} style={{ marginBottom: 14 }} />
          {/* affordance de inserção entre blocos */}
          <div style={{ position: 'relative', border: '1.5px dashed var(--wf-line)', borderRadius: 6, padding: '10px 0', textAlign: 'center', color: 'var(--wf-navy)', marginBottom: 18 }}>
            <Pin n={4} style={{ position: 'absolute', left: -10, top: -10, zIndex: 6 }} />
            <span className="wf-data" style={{ color: 'var(--wf-navy)' }}>+ inserir bloco · texto · imagem · galeria · vídeo · citação · embed</span>
          </div>
          <div className="wf-between" style={{ position: 'relative', paddingTop: 10, borderTop: '1px solid var(--wf-line-2)' }}><Pin n={5} style={{ position: 'absolute', left: -10, top: 4, zIndex: 6 }} /><Data>Compartilhar</Data><ArticleShareBar /></div>
        </div>
        <div style={{ position: 'relative', padding: '8px 16px' }}>
          <Eyebrow style={{ marginBottom: 12 }}>Relacionados</Eyebrow>
          <div className="wf-row" style={{ gap: 12, overflow: 'hidden' }}><NewsCard w={200} /><NewsCard w={200} /></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Newsletter · e-mail (HTML) · Mobile (template) ----------
    <DCArtboard key="tR" id="tpl-newsletter" label="Newsletter · e-mail HTML · template (Mobile)" width={SHEETW(390)} height={1500} style={ABS}>
      <Sheet mobile vp="Mobile · 390 · e-mail" screenW={390}
        notes={[
          'Rev. 18/jun: <b>Revista descontinuada</b>. Este molde é a <b>newsletter semanal em HTML</b> (e-mail) que substitui o PDF.',
          { pin: 1, t: '<b>Masthead</b>: marca + nome da newsletter + data da edição.' },
          { pin: 2, t: '<b>Destaque</b> da semana → leva à matéria no site.' },
          { pin: 3, t: '<b>Curadoria</b>: blocos que linkam para matérias (não republica o texto).' },
          { pin: 4, t: '<b>Patrocínio</b> rotulado + rodapé com descadastro (LGPD).' },
          'Arquivo público e métricas no CMS — ver "Newsletter · arquivo" (Vida › Notícias).',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative', padding: '20px 16px', borderBottom: '2px solid var(--wf-navy)', textAlign: 'center' }}>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 12, zIndex: 6 }} />
          <Logo />
          <div className="wf-eyebrow" style={{ justifyContent: 'center', marginTop: 10 }}>Newsletter semanal · nome a definir</div>
          <Data style={{ marginTop: 6 }}>Edição da semana · 12 jun 2026</Data>
        </div>
        <div style={{ position: 'relative', padding: '16px 16px', borderBottom: '1px solid var(--wf-line-2)' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 12, zIndex: 6 }} />
          <Img h={180} label="Destaque da semana" style={{ border: 'none', borderRadius: 0, marginBottom: 12 }} />
          <Tag navy>Em destaque</Tag>
          <div className="wf-h md" style={{ margin: '10px 0' }}>A chamada principal da semana</div>
          <Lines n={2} style={{ marginBottom: 12 }} />
          <Btn variant="primary" ar>Ler no site</Btn>
        </div>
        <div style={{ position: 'relative', padding: '16px 16px', borderBottom: '1px solid var(--wf-line-2)' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 12, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Também nesta edição</Eyebrow>
          <div className="wf-stack" style={{ gap: 0 }}>{[0, 1, 2].map(i => <div key={i} className="wf-row" style={{ gap: 12, padding: '11px 0', borderBottom: i < 2 ? '1px solid var(--wf-line-2)' : 'none' }}><Img w={70} h={52} label="" style={{ flex: '0 0 70px' }} /><div style={{ flex: 1 }}><Tag>Editoria</Tag><div className="wf-bar" style={{ width: '88%', height: 10, margin: '7px 0 5px' }} /><div className="wf-bar" style={{ width: '55%', height: 10 }} /></div><span style={{ color: 'var(--wf-navy)' }}>›</span></div>)}</div>
        </div>
        <div style={{ position: 'relative', padding: '16px 16px' }}>
          <Pin n={4} style={{ position: 'absolute', left: 6, top: 12, zIndex: 6 }} />
          <div className="wf-sponsor" style={{ height: 60, marginBottom: 16 }}><span>Patrocínio · faixa</span><div className="lg-slot" /></div>
          <div className="wf-rule" style={{ margin: '4px 0 12px' }} />
          <Data style={{ display: 'block', textAlign: 'center' }}>Você recebe porque é sócio · descadastrar · preferências</Data>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Evento · Mobile ----------
    <DCArtboard key="tE" id="tpl-event" label="Evento · Mobile" width={SHEETW(390)} height={1525} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Template <b>Evento</b>: agenda, regatas, sociais.',
          { pin: 1, t: '<b>Header do evento</b>: data, local, status (signal-flag).' },
          { pin: 2, t: 'Descrição + <b>programação</b> (timeline).' },
          { pin: 3, t: '<b>CTA / inscrição</b> fixo.' },
          'SIVI usa este molde, mas leva ao site externo.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <Img h={190} label="Hero do evento" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ padding: '14px 16px' }}>
            <div className="wf-between" style={{ marginBottom: 10 }}><Tag navy>Regata</Tag><span className="wf-data">● Inscrições abertas</span></div>
            <div className="wf-h lg" style={{ marginBottom: 12 }}>Nome do evento / regata</div>
            <div className="wf-stack" style={{ gap: 8 }}>
              <Data>📅 14–16 jun 2026</Data><Data>📍 Marina YCI · Ilhabela</Data><Data>🌬 12–16 kn SE · Maré 1.4 m</Data>
            </div>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '6px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 4, zIndex: 6 }} />
          <Lines n={4} style={{ marginBottom: 18 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Programação</Eyebrow>
          <div className="wf-stack" style={{ gap: 0 }}>
            {[['09:00', 'Largada'], ['12:00', 'Almoço no deck'], ['16:00', 'Premiação']].map(([h, t]) =>
              <div key={t} className="wf-row" style={{ gap: 16, padding: '12px 0', borderBottom: '1px solid var(--wf-line-2)' }}><Data style={{ flex: '0 0 44px', color: 'var(--wf-navy)' }}>{h}</Data><div className="wf-h sm">{t}</div></div>)}
          </div>
        </div>
        <div style={{ position: 'relative', padding: 16, borderTop: '1px solid var(--wf-line-2)', background: 'var(--wf-fill-2)', marginTop: 8 }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 6, zIndex: 6 }} />
          <Btn variant="primary" block ar>Inscrever-se</Btn>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Sócio (shell) · Mobile ----------
    <DCArtboard key="tS" id="tpl-socio" label="Sócio (shell) · Mobile" width={SHEETW(390)} height={545} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Template <b>Sócio</b>: esqueleto das telas autenticadas.',
          { pin: 1, t: 'Cabeçalho logado: nome do sócio + sair.' },
          { pin: 2, t: '<b>Navegação interna</b> da Área do Sócio (não é o menu público).' },
          { pin: 3, t: 'Área de conteúdo: <b>listas e documentos</b>.' },
          'Detalhe das telas na seção <b>Área do Sócio</b>.',
        ]}>
        <div className="wf-statusbar"><span>9:41</span><span>▰▰▰ ◢ 100%</span></div>
        <div style={{ position: 'relative' }}>
          <div className="wf-between" style={{ padding: '12px 16px', background: 'var(--wf-navy-08)', borderBottom: '1px solid var(--wf-line-2)' }}>
            <Pin n={1} style={{ position: 'absolute', left: 4, top: 4, zIndex: 6 }} />
            <div className="wf-row" style={{ gap: 10, alignItems: 'center' }}><Avatar s={32} label="S" /><div><div className="wf-h sm">Olá, Sócio</div><Data>Titular · nº 0427</Data></div></div>
            <Data>Sair</Data>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '10px 16px', borderBottom: '1px solid var(--wf-line-2)', display: 'flex', gap: 14, overflow: 'hidden' }}>
          <Pin n={2} style={{ position: 'absolute', left: 4, top: -4, zIndex: 6 }} />
          {['Início', 'Comunicados', 'Documentos', 'Ouvidoria'].map((t, i) => <span key={t} className="wf-h sm" style={{ color: i === 0 ? 'var(--wf-navy)' : 'var(--wf-muted)', whiteSpace: 'nowrap', borderBottom: i === 0 ? '2px solid var(--wf-navy)' : 'none', paddingBottom: 6 }}>{t}</span>)}
        </div>
        <div style={{ position: 'relative', padding: 16 }}>
          <Pin n={3} style={{ position: 'absolute', left: 4, top: 10, zIndex: 6 }} />
          <div className="wf-stack" style={{ gap: 12 }}><div className="wf-skel" style={{ height: 64 }} /><div className="wf-skel" style={{ height: 64 }} /><div className="wf-skel" style={{ height: 64 }} /></div>
        </div>
        <div className="wf-botnav">
          {['Início', 'Comunicados', 'Documentos', 'Enquetes', 'Mais'].map((t, i) => <div key={t} className={'it' + (i === 0 ? ' on' : '')}><div className="ic" /><small>{t}</small></div>)}
        </div>
      </Sheet>
    </DCArtboard>,

  ];
}
window.templateArtboards = templateArtboards;