/* Services — 6 hairline-bordered cards in a 3-col grid */

function Services({ t }) {
  return (
    <section id="services" className="compact">
      <div className="container">
        <div className="section-head">
          <div className="num">§ 01 / {t.sectionHeads.services}</div>
          <h2>{t.sectionHeads.servicesSub}</h2>
        </div>
        <div className="services-grid">
          {t.services.map(s => {
            const isIrs = s.id === "irs";
            return (
              <article
                className={`service-card${isIrs ? " service-card--irs" : ""}`}
                key={s.num}
                onClick={isIrs ? () => window.location.href = "/irs" : undefined}
                style={isIrs ? { cursor: "pointer" } : undefined}
              >
                <div className="num">№ {s.num}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                {isIrs
                  ? <button className="service-card-irs-btn" onClick={e => { e.stopPropagation(); window.location.href = "/irs"; }}>Trate do seu IRS →</button>
                  : <span className="arrow" aria-hidden="true">→</span>
                }
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;