// "Para quem" — service-provider categories
const ForWho = () => {
  const items = [
  { tag: "01", name: "Salões + estúdios de beleza", pitch: "Chatbot para agendamento, WhatsApp, Google Maps, avaliações." },
  { tag: "02", name: "Eletricistas + serviços técnicos", pitch: "Agendamento de visitas técnicas, formulários de orçamentos." },
  { tag: "03", name: "Terapeutas + bem-estar", pitch: "Detalhes sobre as técnicas, posts no blog, autoridade para sua empresa." },
  { tag: "04", name: "Profissionais autônomas", pitch: "Um site profissional que conta a sua história e atrai mais clientes." }];


  return (
    <section className="section forwho" id="para-quem">
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="eyebrow">
</div>
            <h2>Feito para quem<br /><em className="italic-soft">vive de hora marcada.</em></h2>
          </div>
          <p className="lede">Cada negócio tem seu próprio ritmo. Os sites da SheBytes se adaptam: agenda, chatbot, catálogo, formas de pagamento, sem sobrecarregar você com mais uma tarefa.



          </p>
        </div>

        <div className="fw-grid">
          {items.map((it, i) => <article key={i} className="fw-card">
              <div className="fw-card-head">
                <span className="mono fw-tag">{it.tag}</span>
                <span className="fw-arrow">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <path d="M7 17 17 7M9 7h8v8" strokeLinecap="round" />
                  </svg>
                </span>
              </div>
              <h3>{it.name}</h3>
              <p>{it.pitch}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

};

window.ForWho = ForWho;