"use client";

/**
 * Marquee — seamless looping band of disciplines, separated by the brand pill
 * glyph. Pure CSS animation (transform only); pauses under reduced-motion via
 * the stylesheet. Decorative.
 */

const items = [
  "Web & Desarrollo",
  "SEO & GEO",
  "Paid Ads",
  "Contenido",
  "Diseño & Marca",
  "Automatización",
];

function Row() {
  return (
    <div className="marquee__row" aria-hidden="true">
      {items.map((it) => (
        <span className="marquee__item" key={it}>
          {it}
          <span className="marquee__sep" />
        </span>
      ))}
    </div>
  );
}

export default function Marquee() {
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">
        <Row />
        <Row />
      </div>
    </div>
  );
}