"use client"

import { motion } from "framer-motion"

const ITEMS = [
  "🏠 Sarah J. paid $1,800 rent",
  "📋 New lease signed — Unit 4B",
  "🔧 Maintenance resolved — HVAC",
  "✅ 94% occupancy this month",
  "💰 $12,400 collected in April",
  "📩 Reminder sent to 3 tenants",
  "🏢 2 leases expiring this month",
  "⭐ Tenant portal accessed 24× today",
]

export function Marquee() {
  const doubled = [...ITEMS, ...ITEMS]

  return (
    <div className="relative overflow-hidden border-y border-white/[0.04] bg-white/[0.02] py-4">
      {/* Fade edges */}
      <div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-24 bg-gradient-to-r from-[#09090b] to-transparent" />
      <div className="pointer-events-none absolute right-0 top-0 z-10 h-full w-24 bg-gradient-to-l from-[#09090b] to-transparent" />

      <motion.div
        animate={{ x: ["0%", "-50%"] }}
        transition={{ duration: 28, ease: "linear", repeat: Infinity }}
        className="flex gap-0 whitespace-nowrap"
      >
        {doubled.map((item, i) => (
          <div key={i} className="flex items-center gap-8 px-8">
            <span className="text-sm text-white/40">{item}</span>
            <span className="text-white/10">·</span>
          </div>
        ))}
      </motion.div>
    </div>
  )
}