"use client";

/**
 * Services — deliberately broken editorial grid. Six services on a 6-column
 * grid; the first two cards span 3 (breaking the safe 2-col-per-card rhythm),
 * the rest span 2. Serif index numerals, spectrum top-line on hover.
 */

import Reveal from "./Reveal";
import { services } from "../content";

export default function Services() {
  return (
    <section id="services" className="services" aria-label="Services">
      <div className="wrap">
        <Reveal>
          <p className="kicker">What we do</p>
          <h2 className="section__title">How we grow your business.</h2>
        </Reveal>

        <Reveal className="services__grid" stagger={0.08}>
          {services.map((s, i) => (
            <article
              className={`service hoverable${i < 2 ? " service--wide" : ""}`}
              key={s.id}
              data-cursor="more"
            >
              <span className="service__index">0{i + 1}</span>
              <h3 className="service__name">{s.name}</h3>
              <p className="service__desc">{s.desc}</p>
            </article>
          ))}
        </Reveal>
      </div>
    </section>
  );
}