// ============================================================
// SEÇÃO · Associe-se — funil de novo sócio (dados reais 08/jun)
// Dois caminhos de AQUISIÇÃO (não tiers): Título direto do clube /
// Título de associado (revenda). Taxa social real. CTA = Secretaria.
// LGPD: não expor quem vende título.
// ============================================================

const PathCard = ({ title, price, parcels, items, featured }) => (
  <div className="wf-card" style={{ padding: 16, border: featured ? '1.5px solid var(--wf-navy)' : '1px solid var(--wf-line-2)', background: featured ? 'var(--wf-navy-08)' : 'var(--wf-screen)' }}>
    <Tag navy>Caminho de aquisição</Tag>
    <div className="wf-h md" style={{ margin: '9px 0 4px' }}>{title}</div>
    <Data style={{ color: 'var(--wf-ink)', fontWeight: 700, fontSize: 14 }}>{price}</Data>
    <Data style={{ marginBottom: 12 }}>{parcels}</Data>
    <div className="wf-stack" style={{ gap: 8 }}>{items.map((x, i) => <div key={i} className="wf-row" style={{ gap: 8, alignItems: 'center' }}><span style={{ color: 'var(--wf-navy)' }}>›</span><T sm>{x}</T></div>)}</div>
  </div>
);

function associeArtboards() {
  return [

    // ---------- Associe-se · Mobile ----------
    <DCArtboard key="aM" id="assoc-mob" label="Associe-se · Mobile" width={SHEETW(390)} height={2420} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Página de <b>conversão</b> com <b>dados reais</b> (08/jun).',
          { pin: 1, t: '<b>Hero</b> + proposta de valor + CTA.' },
          { pin: 2, t: '<b>Dois caminhos de aquisição</b> (não tiers Blue/Gold): Título direto do clube / Título de associado (revenda).' },
          { pin: 3, t: '<b>Vantagens</b> + <b>prova social</b> (componente único).' },
          { pin: 4, t: '<b>Taxa social mensal R$ 2.889</b> + dependentes; tabela completa no CMS.' },
          { pin: 5, t: 'CTA = <b>falar com a Secretaria</b> (visita / WhatsApp). Não há compra online.' },
          { state: true, t: '<b>LGPD</b>: não expor nome/WhatsApp de quem vende título — interesse via Secretaria / área logada.' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 8, top: 8, zIndex: 6 }} />
          <Img h={210} label="Hero · vida no clube" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ padding: '16px 16px 4px' }}>
            <Eyebrow style={{ marginBottom: 8 }}>Associe-se · desde 1956</Eyebrow>
            <div className="wf-h xl" style={{ marginBottom: 12 }}>Faça parte do Yacht Club de Ilhabela</div>
            <Btn variant="primary" block ar>Quero me associar</Btn>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '18px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 14, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 14 }}>Como se associar · dois caminhos</Eyebrow>
          <div className="wf-stack" style={{ gap: 12 }}>
            <PathCard featured title="Título direto do clube" price="R$ 200.000" parcels="em até 12× R$ 16.666,67" items={['Título de sócio proprietário/familiar', 'Titular + cônjuge + filhos solteiros até 25 anos']} />
            <PathCard title="Título de associado (revenda)" price="Valor negociado + taxa YCI" parcels="transferência R$ 100.000 em até 10× R$ 10.000" items={['Negociação com o vendedor', 'Taxa de transferência ao YCI']} />
          </div>
        </div>
        <div style={{ position: 'relative', padding: '4px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 0, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 14 }}>Vantagens</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 18 }}>{['Marina & vela', 'Restaurante', 'Eventos sociais', 'Rede internacional'].map(t => <div key={t} className="wf-jt"><div className="ic" /><div className="wf-h sm">{t}</div></div>)}</div>
          <div style={{ padding: '4px 0 8px' }}><SocialProof wrap /></div>
        </div>
        <div style={{ position: 'relative', padding: '18px 16px' }}>
          <Pin n={4} style={{ position: 'absolute', left: 6, top: 14, zIndex: 6 }} />
          <div className="wf-between" style={{ marginBottom: 12 }}><Eyebrow>Taxas</Eyebrow><Link>Tabela completa (CMS)</Link></div>
          <div className="wf-card" style={{ padding: 0 }}>{[['Taxa social mensal', 'R$ 2.889'], ['Dependente 16–21', 'R$ 293'], ['Dependente 21–25', 'R$ 734']].map(([t, v], i) => <div key={t} className="wf-between" style={{ padding: '13px 14px', borderBottom: i < 2 ? '1px solid var(--wf-line-2)' : 'none' }}><Data style={{ color: 'var(--wf-ink)' }}>{t}</Data><Data style={{ color: 'var(--wf-ink)', fontWeight: 700 }}>{v}</Data></div>)}</div>
        </div>
        <div style={{ position: 'relative', padding: '4px 16px 18px' }}>
          <Pin n={5} style={{ position: 'absolute', left: 6, top: 0, 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 }}>Fale com a Secretaria</div>
            <T sm style={{ marginBottom: 14 }}>Agende uma visita ou fale no WhatsApp. Sem compra online.</T>
            <Btn variant="primary" block>Agendar visita / WhatsApp</Btn>
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Associe-se · Desktop ----------
    <DCArtboard key="aD" id="assoc-desk" label="Associe-se · Desktop" width={SHEETW(1240)} height={1660} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Landing de conversão em desktop · dados reais.',
          'Dois caminhos de aquisição lado a lado; taxa social real; prova social.',
          'CTA = Secretaria (visita / WhatsApp), sem compra online. LGPD: não expor vendedores.',
        ]}>
        <DeskHeader active="Associe-se" />
        <div style={{ position: 'relative' }}>
          <Img h={380} label="Hero · vida no clube ao pôr do sol" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 44, maxWidth: 600 }}>
            <Eyebrow style={{ marginBottom: 12 }}>Associe-se · desde 1956</Eyebrow>
            <div className="wf-h" style={{ fontSize: 46, lineHeight: 1.05, marginBottom: 18 }}>Faça parte do clube</div>
            <Btn variant="primary" size="lg" ar>Quero me associar</Btn>
          </div>
        </div>
        <div style={{ padding: '40px 60px' }}>
          <Eyebrow style={{ marginBottom: 18 }}>Dois caminhos para associar-se</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 28 }}>
            <PathCard featured title="Título direto do clube" price="R$ 200.000" parcels="em até 12× R$ 16.666,67" items={['Título de sócio proprietário/familiar', 'Titular + cônjuge + filhos solteiros até 25 anos']} />
            <PathCard title="Título de associado (revenda)" price="Valor negociado + taxa YCI" parcels="transferência R$ 100.000 em até 10× R$ 10.000" items={['Negociação com o vendedor', 'Taxa de transferência ao YCI']} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 36 }}>
            <div className="wf-card" style={{ padding: 0 }}>{[['Taxa social mensal', 'R$ 2.889'], ['Dependente 16–21', 'R$ 293'], ['Dependente 21–25', 'R$ 734']].map(([t, v], i) => <div key={t} className="wf-between" style={{ padding: '13px 16px', borderBottom: i < 2 ? '1px solid var(--wf-line-2)' : 'none' }}><Data style={{ color: 'var(--wf-ink)' }}>{t}</Data><Data style={{ color: 'var(--wf-ink)', fontWeight: 700 }}>{v}</Data></div>)}</div>
            <div className="wf-card" style={{ padding: 16, background: 'var(--wf-fill-2)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}><Eyebrow style={{ marginBottom: 8 }}>Tabela completa</Eyebrow><T sm>Taxas sociais e náuticas — documento no CMS.</T><div style={{ marginTop: 10 }}><Link>Baixar tabela (PDF)</Link></div></div>
          </div>
          <Eyebrow style={{ marginBottom: 18 }}>Vantagens</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginBottom: 28 }}>{['Marina & vela', 'Restaurante', 'Eventos sociais', 'Rede internacional'].map(t => <div key={t} className="wf-jt"><div className="ic" /><div className="wf-h sm">{t}</div><Data>conheça ›</Data></div>)}</div>
          <div style={{ padding: '8px 0 32px' }}><SocialProof wrap /></div>
          <div className="wf-card" style={{ padding: 28, 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: 6 }}>Fale com a Secretaria</div><T>Agende uma visita ou fale no WhatsApp. Não há compra online.</T></div>
            <Btn variant="primary" size="lg">Agendar visita / WhatsApp</Btn>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

  ];
}
window.associeArtboards = associeArtboards;