/* Marquee — running tape with edge fades + a quiet section label */
const Marquee = () => {
  const items = ['TOWING & RECOVERY', 'HVAC', 'PLUMBING', 'ELECTRICAL', 'LANDSCAPING', 'ROOFING', 'PUBLIC ADJUSTERS', 'AUTO REPAIR', 'PEST CONTROL', 'LOCKSMITHS'];
  const all = [...items, ...items, ...items];
  return (
    <section className="relative py-12 border-y border-line2 overflow-hidden bg-[#0b0b0b]/45 backdrop-blur-md">
      {/* quiet centered label behind the tape */}
      <div className="pointer-events-none absolute inset-0 grid place-items-center">
        <span data-px="-16" className="font-mono text-[10px] tracking-[0.4em] text-white/[0.06] uppercase">— built for the trades —</span>
      </div>

      <div
        className="relative flex marquee-track gap-12 whitespace-nowrap"
        style={{ WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)', maskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)' }}
      >
        {all.map((t, i) => (
          <span key={i} className="flex items-center gap-12 font-mono text-sm tracking-[0.28em] text-white/45 hover:text-white/70 transition-colors">
            {t}
            <span className="w-1.5 h-1.5 rounded-full bg-flame inline-block shadow-[0_0_8px_rgba(255,87,54,0.5)]"></span>
          </span>
        ))}
      </div>
    </section>
  );
};
window.Marquee = Marquee;