// Services.jsx — 4 services as big hover rows
const SERVICES = [
  {
    num: "01",
    title: "AI solutions",
    italic: "that actually help",
    desc: "Custom apps, workflows, and integrations built around how your business really runs. Not a generic chatbot — the specific tool you didn't know you could have.",
    chips: ["Internal tools", "Automations", "Chat & voice"],
  },
  {
    num: "02",
    title: "Websites",
    italic: "that earn their keep",
    desc: "Fast, considered marketing sites and booking portals. Designed, built, and handed over so you can update the copy yourself at 10pm without calling anyone.",
    chips: ["Marketing sites", "Booking & payments", "SEO basics"],
  },
  {
    num: "03",
    title: "Training",
    italic: "for you and your team",
    desc: "Hands-on workshops in plain English. We'll sit with your team, use your real tools and data, and leave them genuinely faster by the afternoon.",
    chips: ["Half-day workshops", "Team programmes", "1:1 mentoring"],
  },
  {
    num: "04",
    title: "Whatever",
    italic: "needs doing",
    desc: "A strategy sanity-check, a tricky spreadsheet, the plumbing nobody else will touch. If it's small, useful, and saves you hours, we're interested.",
    chips: ["Audits", "Fix-its", "Sounding board"],
  },
];

function Services() {
  return (
    <section className="section section--paper" id="services">
      <div className="container-xl">
        <header className="section__head reveal">
          <div className="section__num">01 &nbsp;/&nbsp; Services</div>
          <SectionOrbit variant="services" />
          <h2 className="section__title">Four things we do, <em>properly</em>.</h2>
        </header>

        <div className="services">
          {SERVICES.map((s, i) => (
            <a
              href="#contact"
              className="service-row"
              key={s.num}
              data-hover
              onClick={(e) => { e.preventDefault(); const el = document.getElementById('contact'); if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' }); }}
            >
              <div className="service-row__num">{s.num}</div>
              <div>
                <h3 className="service-row__title">
                  {s.title}{' '}<em>{s.italic}</em>
                </h3>
                <div className="service-row__chips">
                  {s.chips.map(c => <span className="chip" key={c}>{c}</span>)}
                </div>
              </div>
              <p className="service-row__desc">{s.desc}</p>
              <span className="service-row__arrow" aria-hidden="true"><ArrowUpRight size={18} /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;