// services.jsx - Editorial grid with finance illustrations
const SVC_ILLS = [IllBarChart, IllFlowDiagram, IllRingGauge, IllLineGrowth, IllStackedBars, IllWave];

const Services = () => {
  const { t } = useLang();
  const s = t.services;

  return (
    <section className="services" id="services">
      <div className="services-head">
        <div>
          <Reveal><div className="eyebrow">{s.eyebrow}</div></Reveal>
          <Reveal delay={1}><h2 className="section-title">{s.title}</h2></Reveal>
        </div>
        {s.sub && <Reveal delay={2}><p className="services-sub">{s.sub}</p></Reveal>}
      </div>
      <div className="svc-grid">
        {s.items.map((item, i) => {
          const Ill = SVC_ILLS[i % SVC_ILLS.length];
          return (
            <a key={i} href="#contact" className="svc-card">
              <div className="art"><Ill/></div>
              <span className="svc-card-num">{item.num} / 06</span>
              <h3 className="svc-card-name">{item.name}</h3>
              <p className="svc-card-desc">{item.desc}</p>
              <div className="svc-card-tag">
                <span>{item.expand}</span>
                <span className="svc-card-arrow"><ArrowDiag/></span>
              </div>
            </a>
          );
        })}
      </div>
    </section>
  );
};

window.Services = Services;