// Services.jsx — 6 frentes de trabalho
function Services() {
  const items = [
    { icon: 'fiscal',     title: 'Fiscal',             body: 'Apuração de tributos, escrituração e cumprimento das obrigações acessórias com calendário próprio.' },
    { icon: 'contabil',   title: 'Contábil',           body: 'Balancetes, demonstrações financeiras e contabilidade gerencial entregues até o 5º dia útil.' },
    { icon: 'rh',         title: 'Recursos Humanos',   body: 'Folha, eSocial, admissões, férias e rescisões — sem você precisar acompanhar prazos.' },
    { icon: 'societario', title: 'Societário',         body: 'Abertura, alteração contratual, baixas e regularização junto à Junta Comercial e Receita.' },
    { icon: 'bpo',        title: 'BPO Financeiro',     body: 'Contas a pagar, conciliação bancária e fluxo de caixa terceirizados — você foca no negócio.' },
    { icon: 'certdigital',title: 'Certificado Digital',body: 'Emissão e renovação de e-CNPJ e e-CPF (A1/A3) com agilidade e suporte na instalação.' }
  ];
  return (
    <section className="rs-section" id="servicos">
      <div className="rs-container">
        <header className="rs-section-head">
          <span className="rs-eyebrow">O que fazemos</span>
          <h2 className="rs-section-title">Seis frentes, um único contador no seu dia a dia.</h2>
        </header>
        <div className="rs-services">
          {items.map(it => (
            <article key={it.title} className="rs-service">
              <div className="rs-service-icon"><Icon name={it.icon}/></div>
              <h3 className="rs-service-title">{it.title}</h3>
              <p className="rs-service-body">{it.body}</p>
              <a className="rs-link-arrow" href="#">Saiba mais →</a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Icon({ name }) {
  const common = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.75, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'fiscal')       return <svg viewBox="0 0 24 24" {...common}><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12"/></svg>;
  if (name === 'contabil')     return <svg viewBox="0 0 24 24" {...common}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M9 13h6M9 17h6"/></svg>;
  if (name === 'rh')           return <svg viewBox="0 0 24 24" {...common}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
  if (name === 'societario')   return <svg viewBox="0 0 24 24" {...common}><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>;
  if (name === 'bpo')          return <svg viewBox="0 0 24 24" {...common}><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>;
  if (name === 'certdigital')  return <svg viewBox="0 0 24 24" {...common}><rect x="3" y="4" width="18" height="14" rx="2"/><circle cx="12" cy="11" r="2.5"/><path d="M9 18l1-3M15 18l-1-3M7 8h3M14 8h3"/></svg>;
  return <svg viewBox="0 0 24 24" {...common}><path d="M3 17l6-6 4 4 8-8"/><polyline points="14 7 21 7 21 14"/></svg>;
}
window.Services = Services;
window.Icon = Icon;