Animated marquee highlights band

"use client";

import { motion } from "motion/react";

const headline = ["Momentum", "for", "teams", "that", "move", "fast"];

const wordsReveal = {
  hidden: {},
  show: { transition: { staggerChildren: 0.07, delayChildren: 0.1 } },
};

const wordReveal = {
  hidden: { opacity: 0, y: 24, filter: "blur(6px)" },
  show: { opacity: 1, y: 0, filter: "blur(0px)", transition: { type: "spring", stiffness: 140, damping: 18 } },
};

const rowA = ["Automated workflows", "Real-time sync", "Edge delivery", "Version history", "One-click rollback", "Smart alerts"];
const rowB = ["Role-based access", "Audit logging", "Custom dashboards", "Webhooks", "Bulk actions", "Saved views"];

const stats = [
  { value: "2.4M", label: "Actions automated weekly" },
  { value: "180ms", label: "Median response time" },
  { value: "99.99%", label: "Rolling uptime" },
];

function Pill({ text }: { text: string }) {
  return (
    <span className="flex items-center gap-2 whitespace-nowrap rounded-full border border-white/20 bg-white/10 px-4 py-2 text-sm font-medium text-white backdrop-blur">
      <svg viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4 text-white/70" aria-hidden="true">
        <path fillRule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 10.7a1 1 0 1 1 1.4-1.4l3.1 3.1 6.8-6.8a1 1 0 0 1 1.4 0Z" clipRule="evenodd" />
      </svg>
      {text}
    </span>
  );
}

export default function MarqueeHighlights() {
  return (
    <section className="relative w-full bg-slate-50 px-5 py-24 dark:bg-slate-950 sm:px-8">
      <style>{`
        @keyframes mqh-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        @keyframes mqh-marquee { to { transform: translateX(-50%); } }
        @keyframes mqh-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-24px); } }
        @keyframes mqh-shimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
        .mqh-gradient { background: linear-gradient(120deg, #4f46e5, #7c3aed, #db2777, #6366f1); background-size: 300% 300%; animation: mqh-gradient 15s ease infinite; }
        .mqh-marquee { animation: mqh-marquee 26s linear infinite; }
        .mqh-marquee-rev { animation: mqh-marquee 30s linear infinite reverse; }
        .mqh-float { animation: mqh-float 9s ease-in-out infinite; }
        .mqh-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.5) 50%, transparent 80%); transform: translateX(-120%); animation: mqh-shimmer 3.5s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) {
          .mqh-gradient, .mqh-marquee, .mqh-marquee-rev, .mqh-float { animation: none !important; }
          .mqh-shimmer::after { animation: none !important; opacity: 0; }
        }
      `}</style>

      <div className="relative mx-auto max-w-6xl overflow-hidden rounded-[2rem] shadow-2xl">
        <div className="mqh-gradient absolute inset-0" aria-hidden="true" />
        <div className="absolute inset-0 bg-slate-950/25" aria-hidden="true" />
        <div className="mqh-float pointer-events-none absolute -left-16 top-10 h-64 w-64 rounded-full bg-white/20 blur-3xl" aria-hidden="true" />
        <div className="mqh-float pointer-events-none absolute -right-10 bottom-0 h-72 w-72 rounded-full bg-fuchsia-300/25 blur-3xl" style={{ animationDelay: "1.5s" }} aria-hidden="true" />

        <div className="relative px-6 py-16 sm:px-12 sm:py-20">
          <div className="mx-auto max-w-3xl text-center">
            <motion.span
              initial={{ opacity: 0, y: 12 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5 }}
              className="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/10 px-3 py-1 text-xs font-medium text-white backdrop-blur"
            >
              <span className="h-1.5 w-1.5 rounded-full bg-white" />
              Built for velocity
            </motion.span>

            <motion.h2
              variants={wordsReveal}
              initial="hidden"
              whileInView="show"
              viewport={{ once: true, amount: 0.5 }}
              className="mt-6 flex flex-wrap justify-center gap-x-3 text-balance text-4xl font-semibold tracking-tight text-white sm:text-6xl"
            >
              {headline.map((w, i) => (
                <motion.span key={i} variants={wordReveal} className="inline-block">
                  {w}
                </motion.span>
              ))}
            </motion.h2>

            <motion.p
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.3 }}
              className="mx-auto mt-5 max-w-xl text-pretty text-base leading-relaxed text-white/80"
            >
              Everything you need to organise work and keep it moving, wrapped in one calm interface your whole team will actually enjoy using.
            </motion.p>

            <motion.div
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.4 }}
              className="mt-8 flex flex-wrap items-center justify-center gap-3"
            >
              <a href="#" className="rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 shadow-lg transition hover:scale-105 hover:bg-white/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
                Start free
              </a>
              <a href="#" className="rounded-full border border-white/40 bg-white/5 px-6 py-3 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/15 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
                Watch the tour
              </a>
            </motion.div>
          </div>

          {/* Marquee rows */}
          <div className="relative mt-14 space-y-3 [mask-image:linear-gradient(90deg,transparent,#000_8%,#000_92%,transparent)]">
            <div className="overflow-hidden">
              <div className="mqh-marquee flex w-max gap-3">
                {[...rowA, ...rowA].map((t, i) => <Pill key={i} text={t} />)}
              </div>
            </div>
            <div className="overflow-hidden">
              <div className="mqh-marquee-rev flex w-max gap-3">
                {[...rowB, ...rowB].map((t, i) => <Pill key={i} text={t} />)}
              </div>
            </div>
          </div>

          {/* Stats */}
          <motion.dl
            variants={wordsReveal}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.4 }}
            className="mt-14 grid grid-cols-1 gap-4 sm:grid-cols-3"
          >
            {stats.map((s) => (
              <motion.div
                key={s.label}
                variants={wordReveal}
                className="mqh-shimmer relative overflow-hidden rounded-2xl border border-white/15 bg-white/10 p-6 text-center backdrop-blur"
              >
                <dt className="text-3xl font-bold tracking-tight text-white sm:text-4xl">{s.value}</dt>
                <dd className="mt-2 text-sm text-white/70">{s.label}</dd>
              </motion.div>
            ))}
          </motion.dl>
        </div>
      </div>
    </section>
  );
}