Glowing Logo Marquee

"use client";

import { type ReactNode } from "react";
import { motion } from "motion/react";

type Logo = { name: string; mark: ReactNode };

const logos: Logo[] = [
  {
    name: "Nimbus",
    mark: (
      <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor" aria-hidden="true">
        <path d="M6.5 19a4.5 4.5 0 010-9 5.5 5.5 0 0110.6-1.7A4.75 4.75 0 1117.5 19z" />
      </svg>
    ),
  },
  {
    name: "Vertex",
    mark: (
      <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor" aria-hidden="true">
        <path d="M12 3.5l8.5 16.5H3.5z" />
      </svg>
    ),
  },
  {
    name: "Orbit",
    mark: (
      <svg viewBox="0 0 24 24" className="h-5 w-5" aria-hidden="true">
        <ellipse cx="12" cy="12" rx="10" ry="4.5" fill="none" stroke="currentColor" strokeWidth="1.6" />
        <circle cx="12" cy="12" r="3" fill="currentColor" />
      </svg>
    ),
  },
  {
    name: "Quartz",
    mark: (
      <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor" aria-hidden="true">
        <path d="M12 2.5l7 6.2-7 12.8-7-12.8z" />
      </svg>
    ),
  },
  {
    name: "Pulse",
    mark: (
      <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M3 12h4l2.4 6L13 5l2.2 8H21" />
      </svg>
    ),
  },
  {
    name: "Prism",
    mark: (
      <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor" aria-hidden="true">
        <path d="M12 2l8.7 5v10L12 22 3.3 17V7z" />
      </svg>
    ),
  },
  {
    name: "Halo",
    mark: (
      <svg viewBox="0 0 24 24" className="h-5 w-5" aria-hidden="true">
        <circle cx="12" cy="12" r="8.2" fill="none" stroke="currentColor" strokeWidth="2.6" />
      </svg>
    ),
  },
  {
    name: "Beacon",
    mark: (
      <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor" aria-hidden="true">
        <path d="M12 2l2.9 6.2 6.8.6-5.1 4.5 1.5 6.7L12 16.9 5.9 20.5l1.5-6.7L2.3 8.8l6.8-.6z" />
      </svg>
    ),
  },
];

function LogoRow({ dir, duration }: { dir: "left" | "right"; duration: number }) {
  const doubled = [...logos, ...logos];
  return (
    <div className="group relative overflow-hidden [-webkit-mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]">
      <div
        className={`lg-track lg-${dir} gap-4`}
        style={{ animationDuration: `${duration}s` }}
      >
        {doubled.map((logo, i) => (
          <motion.div
            key={`${dir}-${i}`}
            aria-hidden={i >= logos.length ? true : undefined}
            whileHover={{ y: -6, scale: 1.04 }}
            transition={{ type: "spring", stiffness: 320, damping: 22 }}
            className="group/chip relative flex shrink-0 items-center gap-3 overflow-hidden rounded-2xl border border-zinc-200 bg-white/80 px-6 py-4 shadow-sm ring-1 ring-transparent backdrop-blur transition-colors hover:border-indigo-300 hover:ring-indigo-300/40 dark:border-white/10 dark:bg-white/5 dark:hover:border-indigo-400/40 dark:hover:ring-indigo-400/20"
          >
            <span className="pointer-events-none absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-indigo-400/15 to-transparent transition-transform duration-700 group-hover/chip:translate-x-full" />
            <span className="text-zinc-400 transition-colors group-hover/chip:text-indigo-500 dark:text-zinc-500 dark:group-hover/chip:text-indigo-400">
              {logo.mark}
            </span>
            <span className="text-base font-semibold tracking-tight text-zinc-700 dark:text-zinc-200">
              {logo.name}
            </span>
          </motion.div>
        ))}
      </div>
    </div>
  );
}

export default function MarqueeLogoGlow() {
  return (
    <section className="relative overflow-hidden bg-white px-6 py-20 dark:bg-zinc-950 md:py-28">
      <style>{`
        @keyframes lg-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @keyframes lg-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
        @keyframes lg-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6%,-8%) scale(1.18); } }
        @keyframes lg-drift-2 { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-7%,6%) scale(0.9); } }
        .lg-track { display: flex; width: max-content; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
        .lg-left { animation-name: lg-scroll-left; }
        .lg-right { animation-name: lg-scroll-right; }
        .group:hover .lg-track { animation-play-state: paused; }
        .lg-blob { animation: lg-drift 14s ease-in-out infinite; }
        .lg-blob-2 { animation: lg-drift-2 18s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) {
          .lg-track, .lg-blob, .lg-blob-2 { animation: none; }
        }
      `}</style>

      <div aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden">
        <div className="lg-blob absolute left-1/4 top-1/3 h-72 w-72 -translate-x-1/2 rounded-full bg-indigo-400/25 blur-[90px] dark:bg-indigo-600/25" />
        <div className="lg-blob-2 absolute right-1/4 top-1/2 h-72 w-72 translate-x-1/2 rounded-full bg-sky-400/20 blur-[90px] dark:bg-sky-500/20" />
      </div>

      <div className="relative mx-auto max-w-3xl text-center">
        <motion.span
          initial={{ opacity: 0, y: 14 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
          className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white/70 px-4 py-1.5 text-xs font-semibold uppercase tracking-widest text-indigo-600 backdrop-blur dark:border-white/10 dark:bg-white/5 dark:text-indigo-400"
        >
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-indigo-500 opacity-70" />
            <span className="relative inline-flex h-2 w-2 rounded-full bg-indigo-500" />
          </span>
          Trusted worldwide
        </motion.span>
        <motion.h2
          initial={{ opacity: 0, y: 18 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={{ duration: 0.55, delay: 0.08, ease: [0.22, 1, 0.36, 1] }}
          className="mt-5 text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white"
        >
          Powering the teams behind great products
        </motion.h2>
        <motion.p
          initial={{ opacity: 0, y: 18 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={{ duration: 0.55, delay: 0.16, ease: [0.22, 1, 0.36, 1] }}
          className="mx-auto mt-4 max-w-xl text-lg text-zinc-600 dark:text-zinc-400"
        >
          Thousands of fast moving teams ship with confidence on a platform built to keep up. Hover to take a closer look.
        </motion.p>
      </div>

      <motion.div
        initial={{ opacity: 0, y: 26 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-60px" }}
        transition={{ duration: 0.6, delay: 0.2, ease: [0.22, 1, 0.36, 1] }}
        className="relative mx-auto mt-14 flex max-w-6xl flex-col gap-4"
        aria-label="Companies building with us"
      >
        <LogoRow dir="left" duration={34} />
        <LogoRow dir="right" duration={42} />
      </motion.div>
    </section>
  );
}