"use client";

/**
 * ProofBar — "trusted by" band. A labelled, seamless looping marquee of the
 * industries we grow, separated by the brand pill glyph. Pure CSS transform
 * animation; pauses under reduced-motion via the stylesheet. Decorative track,
 * but the label and items are real text. (Swap industry labels for greyscale
 * client logos before launch.)
 */

const items = [
  "E-commerce",
  "B2B SaaS",
  "Clinics",
  "Professional services",
  "Retail",
  "Hospitality",
];

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 (
    <section className="proof" aria-label="Industries we work with">
      <p className="proof__label">
        Trusted by teams that care about the sales number
      </p>
      <div className="marquee">
        <div className="marquee__track">
          <Row />
          <Row />
        </div>
      </div>
    </section>
  );
}