"use client";
import React from "react";
import Link from "next/link";

// DO NOT OVERRIDE — NewsTicker headlines and animation
const headlines = [
  { text: "Calrec Redefines Broadcast Workflows at NAB 2026 with its Most Powerful Hardware, Virtual and Hybrid Audio Lineup Yet", slug: "calrec-redefines-broadcast-workflows-nab-2026" },
  { text: "Ease Live powers interactive Premier Padel experiences on Red Bull TV as global viewership surges 30%", slug: "ease-live-premier-padel-red-bull-tv" },
  { text: "Telestream Expands Its Cloud Services with the Introduction of UP", slug: "telestream-expands-cloud-services-up" },
  { text: "Operative Launches AOS Configuration for Digital-First Monetization", slug: "operative-launches-aos-configuration" },
  { text: "Matrox Video Enables the Next Era of Software-Defined Media Production at NAB 2026", slug: "matrox-video-software-defined-nab-2026" },
  { text: "GlobalM Introduces Distributed Video Gateway Architecture for Scalable Live IP Transport", slug: "globalm-distributed-video-gateway" },
  { text: "Digital Alert Systems Unveils Version 6 Software for DASDEC-III Platforms", slug: "digital-alert-systems-dasdec-iii-v6" },
];

export default function NewsTicker() {
  const doubled = [...headlines, ...headlines];

  return (
    <div className="bg-[#1D4ED8] overflow-hidden border-b border-[#1E3A8A]">
      <div className="flex items-stretch h-8">
        {/* Label */}
        <div className="flex-shrink-0 bg-[#080808] flex items-center px-4 z-10">
          <span className="font-body text-xs font-bold text-white tracking-widest uppercase whitespace-nowrap">
            THE BEAT
          </span>
        </div>
        {/* Divider chevron */}
        <div className="w-0 h-0 border-t-[32px] border-t-transparent border-l-[14px] border-l-[#080808] border-b-[0px] flex-shrink-0" />
        {/* Scrolling track */}
        <div className="flex-1 overflow-hidden flex items-center">
          <div className="ticker-track">
            {doubled?.map((item, i) => (
              <span key={i} className="inline-flex items-center whitespace-nowrap text-white font-body font-normal text-sm mr-0">
                <Link
                  href={`/articles/${item?.slug}`}
                  className="px-5 hover:text-white/80 transition-colors">
                  {item?.text}
                </Link>
                <span className="text-white/60 text-base">·</span>
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}