/* Marquee — industries we work with. Edit the items array to add/remove
   verticals. The list is rendered twice and the .marquee-track keyframe
   animates translateX(0) → translateX(-50%) so the loop is seamless. */

const Marquee = () => {
  const { StarSpark, useViewport } = window.AAS;
  const { isSm } = useViewport();

  const items = [
    'Fitness',
    'Life coaching',
    'Health & wellness',
    'Spirituality',
    'Food & nutrition',
    'Yoga & meditation',
    'Tarot & astrology',
  ];
  const reel = [...items, ...items];

  return (
    <section className="marquee">
      <div className="container marquee-eyebrow-wrap">
        <span className="eyebrow">We work with creators in:</span>
      </div>
      <div className="marquee-rail">
        <div className="marquee-track">
          {reel.map((t, i) => (
            <React.Fragment key={i}>
              <span className="marquee-word">{t}</span>
              <span aria-hidden="true" className="marquee-spark">
                <StarSpark size={isSm ? 14 : 20} color="currentColor" />
              </span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

window.AAS = window.AAS || {};
window.AAS.Marquee = Marquee;