// ============================================================
// SEÇÃO · Serviços — operação prática do dia a dia
// Rev. 16/jun: Serviços fica SÓ operacional. Cardápio migrou para
// Gastronomia (Vida no Iate Clube) como embed do componente dinâmico.
// Índice, Marina (fix LGPD), Travessia (API+embed), Taxas (tabela).
// Combustíveis = card dinâmico; Regulamentos = biblioteca (template).
// ============================================================

function servicosArtboards() {
  return [

    // ---------- Serviços · índice ----------
    <DCArtboard key="sI" id="serv-index" label="Serviços · índice · Mobile" width={SHEETW(390)} height={1420} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Hub de operação. Tudo que o sócio resolve no dia a dia.',
          { pin: 1, t: 'Topo com <b>dados dinâmicos</b> (balsa, combustível, clima).' },
          { pin: 2, t: 'Grade dos <b>serviços operacionais</b>: Marina, Travessia, Combustíveis, Taxas, Regulamentos, Links úteis.' },
          'Rev. 16/jun: <b>Cardápio saiu</b> daqui → vive em Gastronomia (Vida no Iate Clube). Serviços = só operação.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ padding: '14px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>Serviços</div>
          <div className="wf-h xl" style={{ marginBottom: 12 }}>Serviços</div>
          <div style={{ position: 'relative' }}>
            <Pin n={1} style={{ position: 'absolute', left: -2, top: -2, zIndex: 6 }} />
            <div className="wf-card" style={{ padding: 12, display: 'flex', justifyContent: 'space-around', textAlign: 'center', marginBottom: 16 }}>
              {[['⛴', '06–23h', 'Balsa'], ['⛽', 'R$ 6,29', 'Combustível'], ['🌬', '14 kn', 'Vento']].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>
          </div>
        </div>
        <div style={{ position: 'relative', padding: '0 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: -4, zIndex: 6 }} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {['Marina', 'Travessia', 'Combustíveis', 'Taxas', 'Regulamentos', 'Links úteis'].map(t => (
              <div key={t} className="wf-jt"><div className="ic" /><div className="wf-h sm">{t}</div><Data>acessar ›</Data></div>
            ))}
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Marina (fix LGPD) ----------
    <DCArtboard key="sM" id="serv-marina" label="Marina · Mobile" width={SHEETW(390)} height={1510} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Corrige o <b>Lorem ipsum</b> e a exposição de telefones de sócios.',
          { pin: 1, t: 'Informações da marina + estrutura (texto real).' },
          { pin: 2, t: 'Vagas para venda/locação: <b>sem dados pessoais</b> expostos.' },
          { state: true, pin: 3, t: 'Dois papéis: <b>público vê a info</b>; <b>sócio entra na fila logado</b> (app / Área do Sócio). Interesse via Secretaria — LGPD.' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Pin n={1} style={{ position: 'absolute', left: 22, top: 60, zIndex: 6 }} />
          <div style={{ padding: '14px 16px 8px' }}><div className="wf-crumb" style={{ marginBottom: 12 }}>Serviços<span className="sep">›</span>Marina</div><div className="wf-h xl">Marina &amp; Estaleiro</div></div>
          <Img h={170} label="Foto da marina" style={{ borderRadius: 0, border: 'none', margin: '8px 0' }} />
          <div style={{ padding: '8px 16px' }}><Lines n={4} /></div>
        </div>
        <div style={{ position: 'relative', padding: '12px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 8, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Vagas disponíveis</Eyebrow>
          <div className="wf-stack" style={{ gap: 10 }}>
            {[['Vaga seca · 32 pés', 'Locação', 'SEC-07'], ['Vaga molhada · 40 pés', 'Venda', 'MOL-12']].map(([t, k, c]) =>
              <div key={t} className="wf-between wf-card" style={{ padding: 12 }}><div><div className="wf-h sm">{t}</div><Data>código {c}</Data></div><Tag navy>{k}</Tag></div>)}
          </div>
          <div className="wf-card" style={{ padding: 14, marginTop: 14, background: 'var(--wf-fill-2)', position: 'relative' }}>
            <Pin n={3} style={{ position: 'absolute', left: -10, top: -10, zIndex: 6 }} />
            <div className="wf-h sm" style={{ marginBottom: 4 }}>Tenho interesse</div>
            <T sm style={{ marginBottom: 12 }}>Contato intermediado pela secretaria — sem expor telefones.</T>
            <Btn variant="ghost" size="sm" block>Falar com a secretaria</Btn>
          </div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Travessia ----------
    <DCArtboard key="sT" id="serv-travessia" label="Travessia · Mobile" width={SHEETW(390)} height={1335} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Operação prática mais consultada.',
          { pin: 1, t: '<b>Horários da balsa</b> (API SP Travessias) — tempo real.' },
          { pin: 2, t: '<b>Embed do app Monitor</b> p/ agendar (público vê info; sócio agenda logado).' },
          { state: true, pin: 3, t: 'Prever <b>erro</b> da API → fallback manual.' },
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>Serviços<span className="sep">›</span>Travessia</div>
          <div className="wf-h xl" style={{ marginBottom: 4 }}>Travessia da balsa</div>
          <Data style={{ marginBottom: 14 }}>São Sebastião ↔ Ilhabela · DER-SP</Data>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 100, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 0 }}>
            <div className="wf-between" style={{ padding: '12px 14px', borderBottom: '1px solid var(--wf-line-2)' }}><div className="wf-h sm">Próximas saídas</div><span className="wf-data" style={{ color: 'var(--wf-navy)' }}>● ao vivo</span></div>
            {[['06:00', 'SS → Ilha'], ['06:30', 'Ilha → SS'], ['07:00', 'SS → Ilha']].map(([h, d]) =>
              <div key={h + d} className="wf-between" style={{ padding: '12px 14px', borderBottom: '1px solid var(--wf-line-2)' }}><Data style={{ fontSize: 14, color: 'var(--wf-ink)', fontWeight: 700 }}>{h}</Data><Data>{d}</Data></div>)}
          </div>
        </div>
        <div style={{ position: 'relative', padding: '8px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 4, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 10 }}>Agendar travessia</Eyebrow>
          <div className="wf-img" style={{ height: 150, flexDirection: 'column', gap: 8 }}><span>Embed · app Monitor</span><Data>deep-link autenticado</Data></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Cardápio: movido para Gastronomia (ver screens-gastronomia.jsx) ----------

    // ---------- Taxas (tabela) ----------
    <DCArtboard key="sX" id="serv-taxas" label="Taxas · Mobile" width={SHEETW(390)} height={1375} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Mesma régua de tabela vale para <b>Combustíveis</b> (preços dinâmicos).',
          { pin: 1, t: 'Tabela de <b>taxas sociais e náuticas</b>, com vigência.' },
          { pin: 2, t: '<b>Regulamentos</b>: biblioteca de PDFs p/ download (template).' },
          'Números em fonte mono, tabular.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>Serviços<span className="sep">›</span>Taxas</div>
          <div className="wf-h xl" style={{ marginBottom: 4 }}>Taxas</div>
          <Data style={{ marginBottom: 14 }}>Vigência 2026 · valores ilustrativos (confirmar com a Secretaria)</Data>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 96, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 0 }}>
            {[['Mensalidade titular', 'R$ 890'], ['Mensalidade dependente', 'R$ 320'], ['Vaga seca · mês', 'R$ 480'], ['Vaga molhada · mês', 'R$ 1.250'], ['Convidado · dia', 'R$ 120']].map(([t, v], i) => (
              <div key={t} className="wf-between" style={{ padding: '13px 14px', borderBottom: i < 4 ? '1px solid var(--wf-line-2)' : 'none' }}><Data style={{ fontSize: 13, color: 'var(--wf-ink)' }}>{t}</Data><Data style={{ color: 'var(--wf-ink)', fontWeight: 700 }}>{v}</Data></div>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 10, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Regulamentos</Eyebrow>
          <div className="wf-stack" style={{ gap: 10 }}><DocRow /><DocRow /></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

  ];
}
window.servicosArtboards = servicosArtboards;