// Servicos.jsx — 4 cards com imagem
// FOTOS: images/servico-cabine.jpg, images/servico-lua.jpg, images/servico-esfoliacao.jpg, images/servico-duplo.jpg
function Servicos() {
  const cards = [
    { id:'serv-cabine', img:'images/servico-cabine.jpg', t:'Bronzeamento de Cabine', d:'Bronze por vaporização em cabine, com cuidado e conforto.' },
    { id:'serv-lua',    img:'images/servico-lua.jpg',    t:'Banho de Lua', d:'Cuidado corporal para uma pele mais bonita e uniforme.' },
    { id:'serv-esfo',   img:'images/servico-esfoliacao.jpg', t:'Esfoliação Corporal', d:'Preparo da pele para um resultado mais bonito e duradouro.' },
    { id:'serv-duplo',  img:'images/servico-duplo.jpg',  t:'Bronzeamento Duplo', d:'Sessão pensada para um resultado mais intenso.' },
  ];
  return (
    <section className="section" id="servicos">
      <div className="wrap">
        <div className="sec-head center">
          <span className="eyebrow center reveal">Serviços</span>
          <h2 className="reveal" data-d="1">Escolha o cuidado ideal para você.</h2>
        </div>
        <div className="serv-grid">
          {cards.map((c, i) => (
            <article className="serv-card reveal" data-d={(i % 4) + 1} key={c.id}>
              <image-slot id={c.id} shape="rect" fit="cover" src={c.img} placeholder={c.t}></image-slot>
              <div className="serv-body">
                <h3>{c.t}</h3>
                <p>{c.d}</p>
                <a className="serv-link" href={WA_LINK} target="_blank" rel="noopener">{Ic.whatsapp({width:16,height:16})} Agendar pelo WhatsApp</a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Servicos });